-theme back-to-top — hidden; replaced by .ppshop-scroll-top */
a.ui-to-top {
  display: none !important;
}

/* ── Custom scroll-to-top ── */
.ppshop-scroll-top {
  position: fixed;
  right: 34px;
  bottom: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #E88300;
  color: #000;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}

/* ════════════════════════════════════════════════════════
   HOMEPAGE HEADER + BRAND CARDS OVERRIDE
   ════════════════════════════════════════════════════════ */

#masthead .ppshop-topbar,
#masthead #nav_bar_wrap,
#masthead #nav_bar_wrap .container,
#masthead #nav_bar_wrap .ppshop-nav-inner {
  background: #111722 !important;
}

#masthead #nav_bar_wrap .container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}

#masthead .ppshop-topbar__inner,
#masthead .ppshop-nav-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-inline: clamp(16px, 2.2vw, 40px) !important;
}

#masthead .ppshop-topbar__brand {
  margin-left: 0 !important;
}

#masthead .ppshop-topbar__right {
  margin-right: 0 !important;
}

#masthead .ppshop-nav-inner {
  justify-content: space-between !important;
}

.ppshop-home-banner {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.ppshop-home-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

.ppshop-banner-brands {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(10px, 1.3vw, 18px);
  padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 32px) clamp(12px, 1.6vw, 22px);
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}

.ppshop-banner-brands__item {
  flex: 0 1 200px !important;
  width: 200px !important;
  min-width: 170px !important;
  max-width: 200px !important;
  height: 240px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(17, 23, 34, 0.68) !important;
  border: 1px solid rgba(232, 131, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  text-decoration: none !important;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}

.ppshop-banner-brands__item:hover {
  background: rgba(232, 131, 0, 0.75) !important;
  border-color: rgba(232, 131, 0, 0.95) !important;
  transform: translateY(-3px);
}

.ppshop-banner-brands__logo {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 1.8vw, 24px) clamp(10px, 1.4vw, 18px) 0 !important;
}

.ppshop-banner-brands__logo img {
  width: auto !important;
  height: auto !important;
  max-width: min(150px, 80%) !important;
  max-height: min(112px, 42%) !important;
  object-fit: contain !important;
}

.ppshop-banner-brands__name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 3rem;
  padding: 10px 8px 12px !important;
  background: rgba(0, 0, 0, 0.58) !important;
  color: #fff !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  white-space: normal !important;
}

@media (max-width: 1400px) {
  .ppshop-banner-brands {
    gap: 12px;
  }
}

@media (max-width: 1200px) {
  .ppshop-banner-brands {
    gap: 10px;
  }
  .ppshop-banner-brands__item {
    flex-basis: 180px !important;
    width: 180px !important;
    min-width: 160px !important;
    max-width: 180px !important;
    height: 220px !important;
  }
}

@media (max-width: 992px) {
  .ppshop-topbar__inner,
  .ppshop-nav-inner {
    padding-inline: 16px !important;
  }
  .ppshop-banner-brands__item {
    flex-basis: 170px !important;
    width: 170px !important;
    min-width: 150px !important;
    max-width: 170px !important;
    height: 210px !important;
  }
}

@media (max-width: 767px) {
  .ppshop-topbar__tagline {
    display: none !important;
  }
  .ppshop-topbar__logo img {
    max-height: 50px !important;
  }
  .ppshop-banner-brands {
    gap: 8px;
    padding: 10px 10px 12px;
  }
  .ppshop-banner-brands__item {
    flex-basis: calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 8px) !important;
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .ppshop-banner-brands { gap: 8px; }
  .ppshop-banner-brands__item {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 180px !important;
  }
  .ppshop-banner-brands__name {
    font-size: 12px !important;
  }
}

.ppshop-scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ppshop-scroll-top:hover,
.ppshop-scroll-top:focus {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-3px);
  background: #E88300;
  color: #000;
}

.ppshop-scroll-top i {
  font-size: 22px;
  line-height: 1;
  color: #000;
}

/* Inline search panel */
.ppshop-search-panel {
  background: #0b0d12;
  border-top: 1px solid rgba(28, 105, 212, 0.4);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.ppshop-search-panel.is-open {
  max-height: 220px;
  opacity: 1;
}

.ppshop-search-panel__inner {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 16px 20px 8px 20px;
}

.ppshop-search-form {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 10px;
  position: relative;
  width: 100%;
}

.ppshop-search-form input[type="search"] {
  background: #0b0d12;
  border: 1px solid rgba(28, 105, 212, 0.6);
  border-radius: 4px;
  color: #fff;
  flex: 1;
  min-width: 320px;
  max-width: 680px;
  height: 40px;
  padding: 8px 14px 8px 40px;
}

.ppshop-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  pointer-events: none;
}

.ppshop-search-form input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.ppshop-search-form button[type="submit"] {
  background: var(--secondary-color);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  padding: 10px 12px;
}

.ppshop-search-submit__text {
  display: none;
}

.ppshop-search-close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 6px;
}

.ppshop-live-results {
  background: #0b0d12;
  border: 1px solid rgba(28, 105, 212, 0.4);
  border-radius: 0 0 6px 6px;
  display: none;
  margin: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 999;
}

.ppshop-menu-search {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  margin-right: 4%;
  position: relative;
  align-self: center;
  max-width: 700px;
  width: 100%;
}

.ppshop-menu-search .ppshop-search-form {
  margin: 0;
  align-items: center;
}

.ppshop-menu-search .ppshop-search-form input[type="search"] {
  margin: 0;
}

.ppshop-menu-search .ppshop-search-form {
  width: 100%;
}

.ppshop-live-results.is-open {
  display: block;
}

.ppshop-live-results__list {
  padding: 4px 0;
}

.ppshop-live-results__item {
  align-items: stretch;
  display: flex;
  gap: 0;
  padding: 0;
  transition: background 0.15s;
}

.ppshop-live-results__item:hover {
  background: #1a2236;
}

.ppshop-live-results__link {
  align-items: center;
  color: #fff;
  display: flex;
  flex: 1;
  gap: 14px;
  min-width: 0;
  padding: 10px 0 10px 16px;
  text-decoration: none;
}

.ppshop-live-results__action {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  padding: 8px 14px 8px 6px;
}

.ppshop-live-results__cat-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
  flex-shrink: 0;
}

/* Single "go to product" arrow — same for every product type */
.ppshop-search-action--goto {
  align-items: center;
  background: #E88300;
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  height: 34px;
  justify-content: center;
  line-height: 1;
  text-decoration: none !important;
  transition: background 0.15s;
  width: 34px;
  flex-shrink: 0;
}

.ppshop-search-action--goto:hover {
  background: #d47600;
  color: #fff;
}

.ppshop-live-results__loading {
  align-items: center;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  font-size: 13px;
  gap: 8px;
  min-height: 76px;
  padding: 10px 16px;
}

.ppshop-live-results__loading::before {
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #E88300;
  border-radius: 50%;
  content: '';
  display: inline-block;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
  animation: ppshop-spin 0.7s linear infinite;
}

@keyframes ppshop-spin {
  to { transform: rotate(360deg); }
}

.ppshop-live-results__media {
  flex-shrink: 0;
}

.ppshop-live-results__media img {
  border-radius: 6px;
  display: block;
  height: 56px;
  object-fit: cover;
  width: 56px;
}

.ppshop-live-results__meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.ppshop-live-results__title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppshop-live-results__price {
  color: #E88300;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ppshop-live-results__empty {
  color: rgba(255, 255, 255, 0.7);
  padding: 12px 16px;
}

/* ── Cart custom layout ── */

/* Name row: product name only */
.ppshop-cart-name-row {
  margin-bottom: 2px;
}

/* Meta row: ×qty on left, trash icon on right */
.ppshop-cart-meta-row {
  align-items: center;
  display: flex;
  margin-bottom: 6px;
}

.ppshop-cart-product-name {
  color: var(--primary-color);
  font-family: var(--heading-fonts);
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.ppshop-cart-qty {
  color: #888;
  font-size: 14px;
  white-space: nowrap;
}

.ppshop-cart-remove {
  color: #999 !important;
  font-size: 18px !important;
  line-height: 1;
  margin-left: auto;
  background: transparent !important;
  transition: color 0.2s;
  flex-shrink: 0;
}

.ppshop-cart-remove:hover {
  color: #E88300 !important;
}

.ppshop-cart-price {
  color: #555;
  font-size: 14px;
  margin-bottom: 6px;
}

/* WAPF / variation options: each dt+dd on its own line */
.woocommerce-cart-form .variation dt,
.woocommerce-cart-form .variation dd {
  display: block !important;
  font-size: 13px;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-cart-form .variation dt {
  font-weight: 600;
  margin-top: 3px !important;
}

/* Hide the native quantity spinner — kept in DOM for form submit */
.ppshop-cart-qty-input {
  display: none;
}

/* ── Cross-sells "Nowe w sklepie" slider ── */
.cross-sells {
  padding: 20px 0 32px;
}

.cross-sells h2 {
  text-align: center;
  margin-bottom: 24px;
}

.ppshop-cs-slider {
  align-items: center;
  display: flex;
  gap: 10px;
}

.ppshop-cs-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ppshop-cs-btn {
  align-items: center;
  background: #fff;
  border: 1.5px solid #ddd;
  border-radius: 50%;
  color: #333;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 20px;
  height: 46px;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  width: 46px;
}

.ppshop-cs-btn:hover {
  background: #E88300;
  border-color: #E88300;
  color: #fff;
}

.ppshop-cs-btn:disabled {
  cursor: default;
  opacity: 0.25;
  pointer-events: none;
}

@media (max-width: 500px) {
  .ppshop-cs-btn {
    height: 36px;
    width: 36px;
    font-size: 16px;
  }
}

/* Sticky notes */
.ppshop-sticky-notes {
  padding: 24px 0 36px 0;
}

/* Space before orange container (h2 heading) on home page */
body.home h2.wp-block-heading {
  margin-top: 24px;
}

body.home #content,
body.home .site-content {
  background: #f0f0f0;
}

.ppshop-sticky-notes__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  padding-left: 8%;
  padding-right: 8%;
}

.ppshop-sticky-note {
  background: #1c69d4;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  color: #fff;
  padding: 26px;
}

.ppshop-sticky-note__icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.ppshop-sticky-note h3 {
  font-size: 18px;
  margin: 0 0 6px 0;
}

.ppshop-sticky-note p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  margin: 0;
  opacity: 0.9;
  text-transform: none;
}

@media only screen and (max-width: 900px) {
  .ppshop-sticky-notes__grid {
    grid-template-columns: 1fr;
    padding-left: 16px;
    padding-right: 16px;
  }

  .ppshop-menu-search {
    margin: 0 auto 10px auto;
    width: 100%;
  }

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

  .ppshop-search-form input[type="search"] {
    max-width: 100%;
    min-width: 0;
  }

  .ppshop-page-title-bar .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Footer custom layout */
.ppshop-footer-newsletter {
  text-align: right;
}

.ppshop-footer-newsletter-box {
  text-align: left;
}

.ppshop-footer-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ppshop-footer-newsletter__form {
  align-items: stretch;
}

.ppshop-footer-newsletter__form input[type="email"] {
  background: #0b0d12;
  border: 1px solid rgba(28, 105, 212, 0.6);
  border-radius: 4px;
  color: #fff;
  display: block !important;
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 14px;
  margin-bottom: 0 !important;
  min-height: 48px;
  height: 48px;
  box-sizing: border-box;
}

.ppshop-footer-newsletter__form button {
  background: var(--secondary-color);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  padding: 0 18px;
  min-height: 48px;
  height: 48px;
  align-self: auto;
  flex-shrink: 0;
  box-sizing: border-box;
}

.ppshop-footer-newsletter__message {
  color: #dbe6ff;
  font-size: 13px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ppshop-footer-newsletter__message.is-visible {
  opacity: 1;
}

.ppshop-footer-newsletter__message.is-error {
  color: #ff6b6b;
}

.ppshop-footer-info {
  background: #0b0d12;
  border-top: 1px solid rgba(28, 105, 212, 0.2);
  color: #fff;
  padding: 22px 0 18px;
}

.ppshop-footer-info__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}

@media only screen and (min-width: 992px) {
  .ppshop-footer-info__grid {
    grid-template-columns: 1.9fr 0.85fr 1.3fr;
    gap: 40px;
  }
}

.ppshop-footer-newsletter__heading {
  border-bottom: 2px solid var(--secondary-color);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 10px 0;
  padding-bottom: 7px;
  text-transform: uppercase;
}

.ppshop-footer-newsletter__sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.ppshop-footer-contact {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: flex-start;
  line-height: 1.3;
}

.ppshop-footer-contact i {
  color: var(--secondary-color);
  margin-right: 6px;
}

.ppshop-footer-links {
  text-align: left;
  padding-left: 0;
}

.ppshop-footer-links a {
  color: #fff;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none;
}

.ppshop-footer-links a:hover,
.ppshop-footer-links a:focus {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* Modern cart quantity spacing fix */
#moderncart-slide-out .moderncart-cart-item-quantity {
  align-items: center;
  flex-direction: column;
  gap: 0;
}

#moderncart-slide-out .moderncart-cart-item-quantity button,
#moderncart-slide-out .moderncart-cart-item-quantity input[type="number"] {
  margin: 0;
}

#moderncart-slide-out .moderncart-cart-item-quantity input[type="number"] {
  line-height: 26px;
  height: 26px;
}

#moderncart-slide-out .moderncart-cart-item-quantity button {
  height: 26px;
  min-width: 26px;
  width: 26px;
}

/* My Account navigation */
.woocommerce-MyAccount-navigation a {
  background: #111722;
  border: 1px solid rgba(28, 105, 212, 0.4);
  border-radius: 6px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding: 10px 14px;
  text-decoration: none;
  transition: background .15s;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus,
.woocommerce-MyAccount-navigation .is-active a {
  background: var(--secondary-color);
  color: #fff;
}

/* icon inside nav link */
.woocommerce-MyAccount-navigation a i {
  font-size: 16px;
  flex-shrink: 0;
  opacity: .85;
}

.woocommerce-Addresses {
  display: grid;
  gap: 24px;
}

.woocommerce-Address {
  margin-top: 8px;
}

.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 16px;
}

.woocommerce-customer-details .woocommerce-column {
  float: none;
  width: auto;
  margin: 0;
}

.woocommerce-customer-details .woocommerce-column__title {
  display: inline-block;
  position: static;
  margin: 0 0 12px;
}

.woocommerce-customer-details address {
  margin: 0;
}

.woocommerce-table--order-details .product-thumbnail {
  width: 130px;
}

.woocommerce-table--order-details .product-thumbnail img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  background: #fff;
  display: block;
  border: 1px solid #e4e8ee;
  border-radius: 10px;
}

.woocommerce-cart-form td.product-thumbnail {
  width: 90px;
}

.woocommerce-cart-form td.product-thumbnail a {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 6px;
}

.woocommerce-cart-form td.product-thumbnail img {
  background-color: #fff;
  border-radius: 6px;
  display: block;
  height: 72px;
  object-fit: contain;
  width: 72px;
}

/* Consistent 1:1 square thumbnail in all WooCommerce product loops.
   aspect-ratio lives on <img> so the browser enforces the square
   before object-fit scales the content — no clipping, white letterbox bars. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  width: 100%;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
  aspect-ratio: 1 / 1;
  background-color: #fff;
  display: block;
  object-fit: contain;
  width: 100%;
}

.ppshop-brand-grid {
  margin: 8px 0 32px;
}

.ppshop-brand-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.ppshop-brand-grid__title {
  margin: 0 0 18px;
  font-size: 20px;
  text-align: center;
}

.ppshop-brand-grid__item {
  background: #f2f2f2;
  border-radius: 12px;
  color: #111;
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ppshop-brand-grid__item:hover,
.ppshop-brand-grid__item:focus {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.ppshop-brand-grid__logo img {
  max-width: 120px;
  height: auto;
  display: block;
}

.ppshop-brand-grid__name {
  font-weight: 600;
  color: #2b2b2b;
}

/* Button-like links for actions */
.woocommerce-MyAccount-content a,
.woocommerce a.button,
.entry-content a.button {
  background: var(--secondary-color);
  border-radius: 6px;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  text-decoration: none !important;
}

.woocommerce-MyAccount-content a:hover,
.woocommerce a.button:hover,
.entry-content a.button:hover {
  background: #144fa3;
}

.woocommerce-table--order-details .product-name,
.woocommerce-table--order-details .product-name a {
  white-space: normal;
  word-break: break-word;
}

.woocommerce-table--order-details .product-name a {
  background: none;
  border-radius: 0;
  color: #333333 !important;
  display: inline;
  padding: 0;
  text-decoration: underline;
}

.woocommerce-table--order-details .product-name a:hover {
  color: #1c1c1c !important;
}

/* ════════════════════════════════════════════════════════
   ORDER ITEM ROW — modern card look. The "Łącznie" price used
   to sit as bare floating text next to the product with no
   container at all; give each item row a card frame and the
   price its own badge.
   ════════════════════════════════════════════════════════ */

.woocommerce-table--order-details {
  border-collapse: separate;
  border-spacing: 0 12px;
}

.woocommerce-table--order-details thead th {
  font-size: 12px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  padding: 0 14px 6px;
}

.woocommerce-table--order-details tbody tr.order_item td {
  background: #fff;
  border-top: 1px solid #e4e8ee;
  border-bottom: 1px solid #e4e8ee;
  padding: 20px 14px;
  vertical-align: middle;
}

.woocommerce-table--order-details tbody tr.order_item td:first-child {
  border-left: 1px solid #e4e8ee;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.woocommerce-table--order-details tbody tr.order_item td:last-child {
  border-right: 1px solid #e4e8ee;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.woocommerce-table--order-details td.product-total {
  text-align: center;
}

.ppshop-order-item-price {
  display: inline-block;
  background: #f7f8fa;
  border: 1px solid #e4e8ee;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 16px;
  color: #111;
  white-space: nowrap;
}

#moderncart-slide-out .moderncart-cart-item-quantity-selector {
  margin-top: 0;
}
/* ── Brand + Category product archive ── */
.ppshop-product-archive {
  padding-top: 16px;
  padding-bottom: 40px;
}

.ppshop-product-archive .woocommerce-ordering {
  margin-bottom: 20px;
}

/* CSS Grid: exactly 4 columns at all zoom levels — no sub-pixel calc() needed */
.ppshop-product-archive ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 25px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ppshop-product-archive ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

.ppshop-product-archive ul.products li.product.first,
.ppshop-product-archive ul.products li.product.last {
  clear: none !important;
  margin-right: 0 !important;
}

@media (max-width: 991px) {
  .ppshop-product-archive ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575px) {
  .ppshop-product-archive ul.products {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── Top bar ── */
.ppshop-topbar {
  background: #0a0a0a;
  width: 100%;
}

.ppshop-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  gap: 24px;
}

.ppshop-topbar__logo img {
  max-height: 64px;
  width: auto;
  display: block;
}

.ppshop-topbar__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.ppshop-topbar__search-wrap {
  position: relative;
}

.ppshop-topbar__search-wrap .ppshop-search-form {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 6px;
}

.ppshop-topbar__search-wrap .ppshop-search-input {
  background: transparent;
  color: #fff;
  width: 430px;
}

.ppshop-topbar__search-wrap .ppshop-search-input::placeholder {
  color: #888;
}

.ppshop-topbar__search-wrap .ppshop-search-icon {
  color: #888;
}

.ppshop-topbar__cart,
.ppshop-topbar__user,
.ppshop-topbar__msgs {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.ppshop-topbar__cart:hover,
.ppshop-topbar__user:hover,
.ppshop-topbar__msgs:hover {
  color: #E88300;
  text-decoration: none;
}

.ppshop-topbar__cart i,
.ppshop-topbar__user i,
.ppshop-topbar__msgs i {
  font-size: 26px;
  line-height: 1;
}

.ppshop-cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ppshop-topbar__cart .cart-count-badge,
.ppshop-topbar__msgs .cart-count-badge {
  position: absolute;
  bottom: -5px;
  right: -7px;
  top: auto;
  left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E88300;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.ppshop-topbar__label {
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .ppshop-topbar__inner {
    height: 70px;
  }
  .ppshop-topbar__search-wrap {
    display: none;
  }
  .ppshop-topbar__label {
    display: none;
  }
}

/* ── Hide ALL TranslatePress switchers + our hidden source div ── */
.trp-language-switcher,
.trp-language-switcher-container,
.trp-floated-language-switcher,
#trp-floated-language-switcher,
#ppshop-lang-src { display: none !important; }

/* ── Topbar wrapper ── */
.ppshop-lang-topbar {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Custom switcher (JS-built, zero TRP CSS) ── */
.ppshop-lc { position: relative; }

.ppshop-lc__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
  line-height: 1;
}

.ppshop-lc__btn:hover { color: #E88300; }

.ppshop-lc__flag {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  /* us.png is a real, correctly-proportioned US flag (~1.9:1) — much wider
     than this ~1.375:1 icon box, so object-fit:cover's default centered
     crop landed right on the seam between the star canton and the stripes,
     showing a confusing sliver of both instead of a recognizable flag.
     Anchoring the crop to the left keeps the canton fully in frame (no
     visible difference for pl.webp, a plain two-tone horizontal flag with
     nothing left-right to crop into). */
  object-position: left center;
  display: block;
  flex-shrink: 0;
}

.ppshop-lc__arrow {
  font-size: 12px;
  transition: transform 0.2s;
}

.ppshop-lc--open .ppshop-lc__arrow { transform: rotate(180deg); }

.ppshop-lc__list {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  min-width: 100px;
  z-index: 9999;
}

.ppshop-lc--open .ppshop-lc__list { display: block; }

.ppshop-lc__list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
}

.ppshop-lc__list li a:hover { color: #E88300; background: #252525; text-decoration: none; }
.ppshop-lc__curr a { color: #E88300 !important; }

@media (max-width: 767px) {
  .ppshop-lc__btn .ppshop-lc__code { display: none; }
  .ppshop-lc__list { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ── Homepage banner ── */
.ppshop-home-banner {
  width: 100%;
  line-height: 0;
}

.ppshop-home-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Footer contact updates ── */
.ppshop-footer-contact__brand {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.ppshop-footer-contact__legal {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  opacity: 0.65;
}

/* ── Topbar position adjustments ── */
.ppshop-topbar__logo {
  margin-left: 15%;
}

.ppshop-topbar__right {
  margin-right: 10%;
}

/* ── Nav bar with account on right ── */
.ppshop-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ppshop-nav-account {
  flex-shrink: 0;
}

.ppshop-nav-account__link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 0;
  transition: color 0.2s;
}

.ppshop-nav-account__link:hover {
  color: #E88300;
  text-decoration: none;
}

.ppshop-nav-account__link i {
  font-size: 22px;
}

@media (max-width: 767px) {
  .ppshop-topbar__logo {
    margin-left: 0;
  }
  .ppshop-topbar__right {
    margin-right: 0;
  }
  .ppshop-nav-account {
    display: none;
  }
}

/* ── Nav inner: single-row layout ── */
.ppshop-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* prevent menu item text from wrapping */
#nav_bar_wrap #navbar .navigation-menu > li > a {
  white-space: nowrap;
}

/* account link styled as nav item */
.ppshop-nav-account__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: normal;
  white-space: nowrap;
  padding: 22px 18px;
  transition: color 0.2s, background 0.2s;
}

.ppshop-nav-account__link:hover {
  color: #E88300;
  text-decoration: none;
}

.ppshop-nav-account__link i {
  font-size: 22px;
  line-height: 1;
}

@media only screen and (max-width: 992px) {
  .ppshop-nav-account__link {
    padding: 12px 18px;
  }
}

/* ── Topbar: same bg as navbar + white separator ── */
.ppshop-topbar {
  background: #111722 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* ── Topbar brand: logo + tagline side by side ── */
.ppshop-topbar__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 0;
}

#masthead #nav_bar_wrap,
#masthead #nav_bar_wrap .container,
#masthead #nav_bar_wrap .ppshop-nav-inner {
  background: #111722 !important;
}

#masthead #nav_bar_wrap .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* remove old standalone logo margin (now on brand wrapper) */
.ppshop-topbar__logo {
  margin-left: 0 !important;
}

.ppshop-topbar__tagline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ppshop-topbar__tagline span {
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
}

.ppshop-topbar__tagline span:first-child {
  font-size: 14px;
  font-weight: 600;
}

/* ── Nav items: start aligned with logo (15%) ── */
.ppshop-nav-inner {
  padding-left: 3vw;
  padding-right: 3vw;
}

/* ── Homepage banner: limit height, cover crop ── */
.ppshop-home-banner img {
  max-height: 420px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .ppshop-topbar__brand {
    margin-left: 0;
  }
  .ppshop-topbar__tagline {
    display: none;
  }
  .ppshop-nav-inner {
    padding-left: 0;
  }
  .ppshop-home-banner img {
    max-height: 200px;
  }
}

/* ── Koszyk + Konto stacked vertically ── */
.ppshop-topbar__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ppshop-topbar__actions .ppshop-topbar__cart,
.ppshop-topbar__actions .ppshop-topbar__user {
  justify-content: center;
  min-width: 90px;
}

/* ── Logo bigger ── */
.ppshop-topbar__logo img {
  max-height: 78px !important;
}

/* ── Banner taller ── */
.ppshop-home-banner img {
  max-height: 720px !important;
}
.ppshop-home-banner__img {
  min-height: 500px;
  object-fit: cover;
  object-position: center;
}

/* ── Homepage banner: image + brand overlay ── */
.ppshop-home-banner {
  position: relative;
  line-height: 0;
}

.ppshop-home-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

.ppshop-banner-brands {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}

.ppshop-banner-brands__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  background: rgba(17, 23, 34, 0.65);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 0;
  min-width: 110px;
  width: 200px;
  height: 240px;
  overflow: hidden;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  backdrop-filter: blur(4px);
}

.ppshop-banner-brands__item:hover {
  background: rgba(232, 131, 0, 0.75) !important;
  border-color: rgba(232, 131, 0, 0.95) !important;
  transform: translateY(-3px);
  text-decoration: none;
}

.ppshop-banner-brands__logo img {
  max-height: 108px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
}

.ppshop-banner-brands__name {
  display: block;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  padding: 10px 8px;
  min-height: 3.1em;
}

/* ── Brand page: brand header (logo + name) ── */
.ppshop-brand-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 32px 8px;
}

.ppshop-brand-header__logo img {
  max-height: 80px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
}

.ppshop-brand-header__name {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

/* ── Brand page: service cards (image + label) ── */
.ppshop-brand-grid__list--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.ppshop-service-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.09);
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.15s;
}

.ppshop-service-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  transform: translateY(-3px);
  text-decoration: none;
}

.ppshop-service-card__img {
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #f2f2f2;
}

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

.ppshop-service-card:hover .ppshop-service-card__img img {
  transform: scale(1.04);
}

.ppshop-service-card__name {
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1c;
  text-align: center;
}

/* ── Banner brand cards: higher position, bigger, name at bottom ── */
.ppshop-banner-brands {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-40%) !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  padding: 0 40px !important;
  background: none !important;
}

.ppshop-banner-brands__item {
  width: 200px !important;
  height: 240px !important;
  min-width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
  background: rgba(17, 23, 34, 0.62) !important;
  border: 1px solid rgba(232, 131, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
}

.ppshop-banner-brands__logo {
  flex: 1;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 22px 20px 12px !important;
}

.ppshop-banner-brands__logo img {
  max-height: 110px !important;
  max-width: 150px !important;
  width: auto !important;
  object-fit: contain !important;
}

.ppshop-banner-brands__name {
  display: block !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 10px 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
}

/* ── Nav bar: Konto pushed to the right ── */
.ppshop-nav-inner {
  justify-content: flex-start !important;
}

.ppshop-nav-account__link {
  margin-left: auto;
  padding-right: 10% !important;
}

/* ── Banner: top/bottom gradients + load animation ── */
.ppshop-home-banner {
  overflow: hidden;
}

.ppshop-home-banner::before,
.ppshop-home-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.ppshop-home-banner::before {
  top: 0;
  height: 28%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, transparent 100%);
}

.ppshop-home-banner::after {
  bottom: 0;
  height: 28%;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
}

.ppshop-home-banner__img {
  transition: transform 0.6s ease, filter 0.4s ease;
  transform: scale(1.03);
  filter: brightness(0.88);
  animation: ppshop-banner-load 1.2s ease forwards;
}

@keyframes ppshop-banner-load {
  from { transform: scale(1.06); filter: brightness(0.7); }
  to   { transform: scale(1.0);  filter: brightness(0.92); }
}

.ppshop-home-banner:hover .ppshop-home-banner__img {
  transform: scale(1.04);
  filter: brightness(1.0);
}

/* brand cards above gradients */
.ppshop-banner-brands {
  z-index: 3 !important;
}

/* ── Banner brand cards: 2x bigger, max 3 per row ── */
.ppshop-banner-brands {
  flex-wrap: wrap !important;
  gap: 28px !important;
  padding: 0 60px !important;
  justify-content: center !important;
}

.ppshop-banner-brands__item {
  width: 290px !important;
  height: 200px !important;
  min-width: 290px !important;
  max-width: calc(33.33% - 20px) !important;
}

.ppshop-banner-brands__logo img {
  max-height: 120px !important;
  max-width: 170px !important;
}

.ppshop-banner-brands__name {
  font-size: 15px !important;
  padding: 11px 10px !important;
}

/* ── Konto: centered ~15px left of Koszyk center ── */
.ppshop-nav-account__link {
  margin-left: auto !important;
  margin-right: calc(10% + 15px) !important;
  padding-right: 0 !important;
}

/* ── Konto dropdown ── */
.ppshop-nav-account {
  position: relative;
  margin-left: auto;
}

.ppshop-nav-account__caret {
  font-size: 12px;
  margin-left: 2px;
  transition: transform 0.2s;
}

.ppshop-nav-account:hover .ppshop-nav-account__caret {
  transform: rotate(180deg);
}

.ppshop-nav-account__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: #111722;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0 0 8px 8px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.ppshop-nav-account:hover .ppshop-nav-account__dropdown {
  display: block;
}

.ppshop-nav-account__dropdown li a {
  display: block;
  padding: 10px 18px;
  color: #e0e6f0;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.ppshop-nav-account__dropdown li a:hover,
.ppshop-nav-account__dropdown li.is-active a {
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}

.ppshop-nav-account__dropdown li.is-active a {
  background: #E88300;
  color: #fff;
}

/* ── Account nav: section label above sidebar ── */
.ppshop-account-nav-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #888;
  padding: 0 2px 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 10px;
}
.ppshop-account-nav-label i {
  font-size: 14px;
  opacity: .7;
}

/* ── My Account page sidebar: no underline, readable hover ── */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  text-decoration: none !important;
  color: #fff !important;
  display: block;
  transition: background 0.15s, color 0.15s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: rgba(28, 105, 212, 0.2) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
  background: #E88300 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Konto: aligned directly under Koszyk (same right edge) ── */
.ppshop-nav-account {
  margin-left: auto !important;
  margin-right: 10% !important;
}

/* ── Dropdown: full-width row hover ── */
.ppshop-nav-account__dropdown {
  padding: 0 !important;
  overflow: hidden;
}

.ppshop-nav-account__dropdown li {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  display: block;
}

.ppshop-nav-account__dropdown li a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 20px !important;
  border-radius: 0 !important;
}

.ppshop-nav-account__dropdown li a i {
  font-size: 15px;
  flex-shrink: 0;
  opacity: .85;
}

.ppshop-nav-account__dropdown li a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

.ppshop-nav-account__dropdown li.is-active a {
  background: #E88300 !important;
  color: #fff !important;
}

/* ── Konto: 10px further right ── */
.ppshop-nav-account {
  margin-right: calc(10% - 10px) !important;
}

/* ── Shop page brand cards: same style as banner, max 3 per row ── */
.ppshop-shop-brands {
  padding: 40px 0 20px;
}

.ppshop-shop-brands .ppshop-brand-grid__title {
  margin-bottom: 28px;
}

.ppshop-shop-brands__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  padding: 0 40px;
}

.ppshop-shop-brands__item {
  /* override absolute-position-specific overrides from banner */
  position: relative !important;
  top: auto !important;
  transform: none !important;
  /* solid background instead of transparent (no image behind) */
  background: #111722 !important;
  max-width: calc(33.33% - 20px) !important;
}

.ppshop-shop-brands__item:hover {
  background: #E88300 !important;
  transform: translateY(-3px) !important;
}

/* ── Brand card name: always pinned to bottom ── */
.ppshop-banner-brands__logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppshop-banner-brands__name {
  margin-top: auto !important;
}

/* ── Brand page header: centered ── */
.ppshop-brand-header {
  justify-content: center !important;
  text-align: center !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 32px 16px 16px !important;
}

/* ── Service cards: product-style grid, 4-5 per row ── */
.ppshop-brand-grid__list--cards {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 20px !important;
}

.ppshop-service-card__img {
  aspect-ratio: 4/3 !important;
}

/* ── Category archive header (logo above products) ── */
.ppshop-cat-header {
  display: flex;
  justify-content: center;
  padding: 28px 0 12px;
}

.ppshop-cat-header__logo img {
  max-height: 90px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}


/* ───────────────────────────────────────────────────
   Single product page – layout fixes
   ─────────────────────────────────────────────────── */

/* 1. Horizontal padding wrapper (PHP-injected div) */
.ppshop-product-outer {
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 992px) {
  .ppshop-product-outer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 576px) {
  .ppshop-product-outer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* 2. Gallery + summary: reduce gap to ~20px and force proper widths.
      JS (wp_footer script) handles the flexslider inline-width reset;
      CSS here ensures proper layout geometry. */
.ppshop-product-outer .breakdance-woocommerce.product,
.ppshop-product-outer div.product {
  gap: 20px !important;
}

.ppshop-product-outer .woocommerce-product-gallery {
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
}

.ppshop-product-outer .entry-summary {
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
}

/* Force every level of the gallery image chain to full width
   (JS in wp_footer also does this, CSS is backup) */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery .slides,
.single-product .woocommerce-product-gallery .slides li,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  width: 100% !important;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
  display: block !important;
  width: 100% !important;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* 3. Zoom trigger: pin to top-right of the gallery image */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 99 !important;
}

/* 4. WAPF select — left-aligned, half width */
.single-product .wapf-field-input {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.single-product .wapf-field-input select {
  flex: 0 0 auto !important;
  max-width: 50% !important;
  width: 50% !important;
}

.single-product .wapf-field-description {
  color: #cc0000 !important;
  text-align: center !important;
}

/* 5. Variations table – proper 2-column layout using CSS Grid.
   Problem with flex per-row: each <tr> is independent so column
   widths don't sync between rows.
   Solution: grid on <tbody> + display:contents on <tr> → all cells
   share the SAME column grid → labels always at column 1, selects
   always start at the SAME X position regardless of label length.
   Grid rows also guarantee equal cell heights → ONE border line per row. */

.single-product table.variations {
  display: block !important;
  width: 100% !important;
  /* Top border via the table element — guaranteed to span ALL columns */
  border-top: 1px solid #EAEAEA !important;
}

.single-product table.variations tbody {
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  gap: 0 !important;
  width: 100% !important;
}

.single-product table.variations tr {
  display: contents !important;
}

.single-product table.variations th,
.single-product table.variations td {
  border-top: none !important;
  border-bottom: 1px solid #EAEAEA !important;
  padding: 10px 8px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.single-product table.variations td.label label {
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}

.single-product table.variations td.value {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.single-product table.variations td.value select {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Hide the reset_variations link when visibility:hidden to remove ghost space */
.single-product .reset_variations[style*="hidden"] {
  display: none !important;
}

/* Drop the border under the LAST attribute row in both attribute lists —
   whatever follows (DODATKOWE USŁUGI, description, etc.) draws its own
   separator, so keeping this one too produced a doubled-up line. */
.single-product table.variations tr:last-child th,
.single-product table.variations tr:last-child td,
.single-product .woocommerce-product-attributes tr:last-child th,
.single-product .woocommerce-product-attributes tr:last-child td {
  border-bottom: none !important;
}

/* ── WAPF field labels left-aligned + select half width ── */
.wapf-field-label,
.wapf-field-label label {
  text-align: left !important;
}

.wapf-field-input select {
  width: 50% !important;
  max-width: 50% !important;
}

/* Required-field asterisk is an <abbr title="..."> — browsers draw a dotted
   underline under abbr[title] by default, which read as stray ".." under
   the red *. */
.wapf-field-label abbr.required,
abbr.required {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* ── Variation price + "Wyczyść" flex row ── */
.ppshop-price-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ppshop-price-row .woocommerce-variation.single_variation {
  flex: 1;
}

/* "Cena: " prefix — only when WC has injected a real price (class added by JS) */
div.woocommerce-variation-price::before {
  display: none;
}
div.woocommerce-variation-price.ppshop-price-loaded::before {
  display: inline;
  content: 'Cena:\00a0';
  font-weight: 700;
}

/* ── WAPF product totals — każdy wiersz jako flex row ── */
.wapf-product-totals {
  border-top: 1px solid #ddd;
  margin-top: 8px;
}

.wapf-product-totals::before {
  content: 'PODSUMOWANIE';
  display: block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding-top: 10px;
}

.wapf-product-totals .wapf--inner {
  padding: 8px 0 !important;
}

.wapf-product-totals .wapf--inner > div {
  align-items: center;
  display: flex !important;
  justify-content: space-between;
  padding-bottom: 3px !important;
  clear: none !important;
}

.wapf-product-totals .wapf--inner > div span:last-child {
  float: none !important;
  text-align: right;
}

/* Linia po "Łącznie" przed przyciskiem */
.wapf-product-totals .wapf--inner > div:last-child {
  border-bottom: 1px solid #ddd;
  padding-bottom: 12px !important;
  margin-bottom: 0;
}

/* ── Cart page (/koszyk/) — WooCommerce Cart BLOCK, full visual redesign ───
   This site's /koszyk/ renders through WooCommerce's block-based Cart
   (React, hydrated from the Store API), NOT the classic
   cart.php/cart-item-data.php template — those overrides still exist in
   this theme but are never used for this page. Every class name below was
   pulled straight out of THIS SITE's own live, deployed
   wp-content/plugins/woocommerce/assets/client/blocks/cart.js (grepped over
   FTP, not guessed/inferred from a possibly-different local copy), so this
   is verified against the exact markup that's actually rendered.

   !important is used liberally on structural (display/layout) rules only —
   WooCommerce's own wc-blocks-style-cart-css is a separate stylesheet whose
   load position relative to this file isn't guaranteed, so equal-specificity
   rules from it could otherwise silently win the cascade and make these
   overrides do nothing (which is exactly what happened before this pass).

   Row highlighting: inc/ppshop-conversion-wizard.php and
   inc/ppshop-price-addons.php tag each add-on's woocommerce_get_item_data
   row with 'className' => 'ppshop-cart-item-addon' — confirmed (from the
   same live bundle) that WooCommerce's renderer uses that value as the
   literal class on the row's <span> inside .wc-block-components-product-
   details, in place of its own auto-generated one. Vehicle attributes
   (Marka, Model, Kod fabryczny, …) get no such class and stay plain. */

/* ═══ Cart item cards ═══════════════════════════════════════════════════ */
table.wc-block-cart-items {
  border: none !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table.wc-block-cart-items thead {
  display: none !important;
}
table.wc-block-cart-items,
table.wc-block-cart-items tbody {
  display: block !important;
  width: 100% !important;
}
tr.wc-block-cart-items__row {
  display: grid !important;
  /* Fixed width (not "auto") for the price column — each <tr> is its own
     independent grid container (table/tbody were switched to display:block
     above so cards could get their own border/shadow/radius), so "auto"
     sized the column to that ROW's own price text, and different price
     lengths between cards meant the column landed in a different spot on
     every card instead of lining up. */
  grid-template-columns: 108px 1fr 170px;
  column-gap: 20px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px -12px rgba(17, 23, 34, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
tr.wc-block-cart-items__row:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(17, 23, 34, 0.22);
}
/* WooCommerce's own core CSS pins each of these three cells with explicit
   grid-column-start/grid-column-end/grid-row-start (image: col 1 row 1;
   product: col 2 → 4 row 1; total: row 1, column unset). That's fine at the
   container's own "desktop" width where it was designed for a DIFFERENT
   (2-track, 80px/132px) column layout, but combined with OUR 3-track
   108px/1fr/170px definition it made "product" span across both the 1fr
   AND 170px tracks while "total" got pushed into an implicit 4th column —
   confirmed live at ~906px: the name column rendered so narrow individual
   letters wrapped one per line. Resetting all three to `auto` here (not
   just inside the narrow-width override further down) makes plain DOM-order
   auto-placement the only thing in control, at every width — one behaviour,
   not "wide" and "narrow" cases that can drift apart. */
td.wc-block-cart-item__image,
td.wc-block-cart-item__product,
td.wc-block-cart-item__total {
  grid-column-start: auto !important;
  grid-column-end: auto !important;
  grid-row-start: auto !important;
}
td.wc-block-cart-item__image {
  display: block !important;
  width: 108px !important;
}
td.wc-block-cart-item__image img {
  border-radius: 12px !important;
  object-fit: cover;
}
td.wc-block-cart-item__product {
  display: block !important;
  min-width: 0;
}
td.wc-block-cart-item__total {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: right;
  padding-right: 44px; /* clears the floating remove button */
}
.wc-block-components-product-name.wc-block-components-product-name {
  font-size: 16px;
  font-weight: 800;
  color: #1a2035;
  line-height: 1.3;
}
/* Near the name: this is the item's unit price, already inclusive of
   whatever add-ons were picked — kept as a plain, normal-weight figure so
   it doesn't visually compete with the line total on the right, which is
   what should actually draw the eye. */
.wc-block-cart-item__prices {
  color: #666;
  font-weight: 400;
  font-size: 14px;
  margin: 4px 0 10px;
}
/* The real "what this line costs, all in" figure — bigger and bolder than
   the unit price above, since each add-on row already shows its own
   "(+ X zł)" and this is the number that actually matters once they're
   all added up. */
.wc-block-cart-item__total .wc-block-components-product-price {
  font-size: 22px;
  font-weight: 800;
  color: #E88300;
}

/* Floating remove (trash) button — top-right corner of the card */
.wc-block-cart-item__remove-link.wc-block-cart-item__remove-link {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #c0392b;
  opacity: 0.65;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.wc-block-cart-item__remove-link.wc-block-cart-item__remove-link:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Quantity stepper — rounded pill */
.wc-block-components-quantity-selector {
  border: 1px solid #e3e3e3 !important;
  border-radius: 999px !important;
  overflow: hidden;
  width: fit-content;
}
.wc-block-components-quantity-selector__button {
  color: #E88300 !important;
}

/* ═══ Attribute rows vs. add-on rows ═══════════════════════════════════
   An item's attribute rows and its custom (item_data) rows — Marka + our
   add-ons — render in two separate sibling .wc-block-components-product-
   details blocks, item_data first, so add-ons (Kodowanie/Konwersja/VIN)
   would otherwise show up ABOVE some attributes instead of below all of
   them. A pure-CSS reorder (display:contents + flex order) was tried here
   first and silently lost to this theme's own pre-existing, more specific
   ".wc-block-cart-item__wrap > .wc-block-components-product-metadata" grid
   rules a bit further down this file (see "Block Cart: CSS Grid") — rather
   than fight that cascade further, the actual move now happens in JS (see
   assets/shopper-shoppable.js → ppshopMoveCartAddonRows): add-on rows are
   physically relocated into a new .ppshop-cart-addons-box appended at the
   end, re-applied via MutationObserver so it survives the block's own
   re-renders (qty change, coupon, …). This file only styles the result. */
/* Every row — vehicle attribute or add-on — gets this class from
   ppshopBlockCartFix() in assets/shopper-shoppable.js, purely so every
   line gets the same, even spacing regardless of which of the two source
   blocks (item_data vs. variation) it originally came from. */
.ppshop-cart-detail-row {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: #666;
}
.ppshop-cart-detail-row:last-child {
  margin-bottom: 0;
}
.wc-block-components-product-details__name {
  font-weight: 700;
  color: #555;
}
.wc-block-components-product-details__value {
  font-weight: 400;
}

.ppshop-cart-addons-box {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Rows already get spacing from the box's own "gap" above — without this,
   each row's own margin-bottom (from .ppshop-cart-detail-row, meant for
   the plain attribute list) stacks on top of it too, doubling the gap
   between add-on lines specifically. */
.ppshop-cart-addons-box .ppshop-cart-detail-row {
  margin-bottom: 0;
}
.ppshop-cart-addons-box .ppshop-cart-item-addon {
  font-size: 13px;
}
.ppshop-cart-addons-box .ppshop-cart-item-addon .wc-block-components-product-details__name,
.ppshop-cart-addons-box .ppshop-cart-item-addon .wc-block-components-product-details__value {
  color: #E88300 !important;
  font-weight: 700 !important;
}

/* ═══ Sidebar (Podsumowanie koszyka) ═══════════════════════════════════ */
.wc-block-cart__sidebar,
.wc-block-components-sidebar {
  position: sticky;
  top: 24px;
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 6px 20px -12px rgba(17, 23, 34, 0.14);
}
.wc-block-cart__totals-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #E88300;
  margin-bottom: 12px;
}
.wc-block-components-totals-footer-item {
  border-top: none;
  padding-top: 12px;
  margin-top: 8px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 20px;
  font-weight: 800;
  color: #1a2035;
}
.wc-block-cart__submit-button.wc-block-cart__submit-button,
a.wc-block-cart__submit-button {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.wc-block-cart__submit-button.wc-block-cart__submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(232, 131, 0, 0.55) !important;
}

/* ═══ Checkout page (/zamowienie/) — same Cart-block-family components,
   widen + tidy up "Podsumowanie zamówienia" ═══════════════════════════
   The width split is NOT actually controlled by .wc-block-checkout__main /
   .wc-block-checkout__sidebar (those carry WooCommerce's own default
   65/35 via width, per the real checkout.css — verified from the live
   file) — this theme already has its own, more specific, pre-existing
   override further down this file (search "wp-block-woocommerce-checkout"),
   using flex-basis on .wp-block-woocommerce-checkout-fields-block (left)
   and a FIXED-pixel .wp-block-woocommerce-checkout-totals-block (right).
   flex-basis wins over a plain "width" for sizing a flex item's main axis,
   so the width:38%/58% rules that used to be here had no visible effect at
   all — the real lever is that other block's fixed pixel width, widened
   there instead of duplicating a competing (and losing) rule here. */
.wc-block-components-order-summary-item {
  padding: 14px 0 !important;
}
.wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
  border-top: 1px solid #ececec;
}
.wc-block-components-order-summary-item__description {
  font-size: 13px;
  line-height: 1.7;
}
.wc-block-components-order-summary-item .wc-block-components-product-name {
  font-size: 15px;
  font-weight: 700;
}
/* Line total (top-right of each item) — same treatment as the cart page's
   own line total: bigger and orange, since it's the "all in" figure for
   that line (base + every add-on already stacked on top). */
.wc-block-components-order-summary-item__total-price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #E88300 !important;
}

/* Horizontal line + spacing before add-to-cart */
.woocommerce-variation-add-to-cart {
  border-top: 1px solid #ddd;
  margin-top: 16px !important;
  padding-top: 16px !important;
}

/* "Wyczyść" — zawsze po prawej dzięki margin-left: auto */
.ppshop-reset-link {
  cursor: pointer;
  color: #666;
  display: inline-block;
  font-size: 13px;
  margin: 6px 0 10px;
  margin-left: auto;
  text-decoration: underline;
}

.ppshop-reset-link:hover {
  color: #E88300;
}

/* 6. "Informacje dodatkowe" tab — CSS Grid so th and td share equal row height.
   Same technique as variations table: grid on tbody + contents on tr. */
.single-product .woocommerce-product-attributes {
  display: block !important;
  width: 100% !important;
}

.single-product .woocommerce-product-attributes tbody {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}

.single-product .woocommerce-product-attributes tr {
  display: contents !important;
}

.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
  display: flex !important;
  align-items: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  vertical-align: unset !important;
}

.single-product .woocommerce-product-attributes td p {
  margin: 0 !important;
}

/* ── Add-to-cart modal ── */
.ppshop-cart-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.ppshop-cart-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ppshop-cart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.ppshop-cart-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 900px;
  width: 92%;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.ppshop-cart-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #f0f9f0;
  border-bottom: 1px solid #d8ead8;
  border-radius: 10px 10px 0 0;
  position: sticky;
  top: 0;
}

.ppshop-cart-modal__check {
  color: #2e7d32;
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.ppshop-cart-modal__title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: #1a3a1a;
  line-height: 1.4;
}

.ppshop-cart-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #666;
  padding: 4px 6px;
  flex-shrink: 0;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.ppshop-cart-modal__close:hover {
  color: #E88300;
  background: rgba(232, 131, 0, 0.08);
}

.ppshop-cart-modal__body {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.ppshop-cart-modal__left {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.ppshop-cart-modal__img {
  flex-shrink: 0;
  width: 96px;
}

.ppshop-cart-modal__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid #eee;
  object-fit: contain;
}

.ppshop-cart-modal__details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ppshop-cart-modal__name {
  font-weight: 700;
  font-size: 15px;
  color: #111;
  line-height: 1.3;
  margin-bottom: 2px;
}

.ppshop-cart-modal__unit-price {
  color: #E88300;
  font-weight: 600;
  font-size: 14px;
}

.ppshop-cart-modal__qty {
  color: #666;
  font-size: 13px;
}

.ppshop-cart-modal__variants {
  font-size: 13px;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  border-top: 1px solid #eee;
  padding-top: 6px;
}

.ppshop-modal-variant {
  line-height: 1.4;
}

.ppshop-modal-variant strong {
  color: #333;
}

.ppshop-modal-variant-divider {
  border-top: 1px dashed #ddd;
  margin: 6px 0;
}

.ppshop-modal-variant--addon strong {
  color: #E88300;
}

/* One card per separately-added product in the wizard's "added to cart"
   modal (see data.products in ppshopCartUI.showAddedModal()). */
.ppshop-cart-modal__multi-item {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.ppshop-cart-modal__multi-item:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.ppshop-cart-modal__multi-item-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: #333;
}

.ppshop-cart-modal__multi-item-label {
  flex: 1 1 auto;
}

.ppshop-cart-modal__multi-item-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
}

.ppshop-cart-modal__multi-item-razem {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #eee;
  font-size: 12px;
  color: #666;
}

.ppshop-cart-modal__multi-item-razem strong {
  color: #333;
}

/* /produkt/*: red "VIN must be 17 characters" message under a WAPF field —
   see ppshopValidateWapfVin() in assets/shopper-shoppable.js */
.ppshop-wapf-vin-error {
  margin: 6px 0 0;
  color: #c0392b;
  font-size: 12.5px;
  font-weight: 600;
}
input.wapf-input.ppshop-wapf-input--error {
  border-color: #c0392b !important;
}

.ppshop-cart-modal__right {
  flex-shrink: 0;
  width: 210px;
  background: #f7f8fa;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ppshop-cart-modal__pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #444;
  gap: 6px;
}

.ppshop-cart-modal__pricing-row span:last-child {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.ppshop-cart-modal__pricing-vat {
  font-size: 12px;
  color: #888;
  border-top: 1px solid #ddd;
  padding-top: 7px;
}

.ppshop-cart-modal__pricing-vat span:last-child {
  font-weight: 400;
}

.ppshop-cart-modal__pricing-total {
  border-top: 2px solid #ddd;
  padding-top: 9px;
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

.ppshop-cart-modal__pricing-total span:last-child {
  color: #E88300;
  font-size: 16px;
}

.ppshop-cart-modal__footer {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid #eee;
  justify-content: flex-end;
  background: #fafafa;
  border-radius: 0 0 10px 10px;
}

.ppshop-cart-modal__continue {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 6px;
  color: #444;
  cursor: pointer;
  font-family: 'Comfortaa', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  transition: border-color 0.2s, color 0.2s;
}

.ppshop-cart-modal__continue:hover {
  border-color: #E88300;
  color: #E88300;
}

.ppshop-cart-modal__goto-cart {
  background: #E88300 !important;
  border-radius: 6px;
  color: #fff !important;
  font-family: 'Comfortaa', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s;
}

.ppshop-cart-modal__goto-cart:hover {
  background: #c97000 !important;
  text-decoration: none !important;
}

body.ppshop-modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .ppshop-cart-modal__body {
    flex-direction: column;
  }
  .ppshop-cart-modal__left {
    flex-direction: column;
  }
  .ppshop-cart-modal__img {
    width: 80px;
  }
  .ppshop-cart-modal__right {
    width: auto;
  }
  .ppshop-cart-modal__footer {
    flex-direction: column-reverse;
  }
}

/* ── Block Cart: CSS Grid — qty+trash inline with product name ── */

/* Grid: col 1 = name/price/meta, col 2 = qty+trash (same row as name) */
.wc-block-cart-item__wrap {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  align-items: start !important;
}

/* Row 1 col 1: product name */
.wc-block-cart-item__wrap > a.wc-block-components-product-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* Row 1 col 2: quantity selector + remove — aligned to name */
.wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  align-self: center !important;
}

/* Row 2 full width: price */
.wc-block-cart-item__wrap > .wc-block-cart-item__prices,
.wc-block-cart-item__wrap > .wc-block-components-product-price {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* Row 3 full width: WAPF / variation metadata */
.wc-block-cart-item__wrap > .wc-block-components-product-metadata {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

/* Compact the quantity selector so it fits next to the name */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
  display: flex !important;
  align-items: center !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  font-size: 14px !important;
  padding: 0 !important;
  background: #f5f5f5 !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover {
  background: #e0e0e0 !important;
}

.wc-block-cart-item__quantity input[type="number"],
.wc-block-cart-item__quantity .wc-block-components-quantity-selector input {
  width: 32px !important;
  height: 26px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  font-size: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove link: icon-style, compact */
.wc-block-cart-item__remove-link {
  background: none !important;
  border: none !important;
  color: #e53935 !important;
  cursor: pointer !important;
  font-size: 20px !important;
  padding: 2px 4px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.2s !important;
}

.wc-block-cart-item__remove-link:hover {
  color: #b71c1c !important;
  text-decoration: none !important;
}

/* Hide the "Remove item" text, keep only icon (if any SVG is present) */
.wc-block-cart-item__remove-link svg {
  width: 16px !important;
  height: 16px !important;
}

/* ── Homepage: Nowości heading — more breathing room + polished span ── */
body.home h2.wp-block-heading {
  margin-top: 52px !important;
  margin-bottom: 32px;
}

body.home h2.wp-block-heading span {
  padding: 10px 32px !important;
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(232, 131, 0, 0.3);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 18px;
}

/* ── Home page product loop: card-style with hover lift ── */
body.home .woocommerce ul.products li.product {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.home .woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
}

/* Homepage buttons: center inside flex-column li.product (align-self works on cross axis) */
body.home .woocommerce ul.products li.product .button {
  align-self: center !important;
  width: 80% !important;
}

/* ── Contact page ── */
.ppshop-contact-page {
  padding: 32px 0 52px;
}

.ppshop-contact-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.ppshop-contact-page__card {
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid #E88300;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  padding: 28px 24px;
}
/* ════════════════════════════════════════════════════════
   HOMEPAGE HEADER + BRAND CARDS: single canonical override
   ════════════════════════════════════════════════════════ */

body.home #masthead .ppshop-topbar,
body.front-page #masthead .ppshop-topbar,
body.home #masthead #nav_bar_wrap,
body.front-page #masthead #nav_bar_wrap {
  background: #111722 !important;
}

body.home #masthead #nav_bar_wrap,
body.front-page #masthead #nav_bar_wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.home #masthead #nav_bar_wrap .container,
body.front-page #masthead #nav_bar_wrap .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

body.home #masthead .ppshop-topbar__inner,
body.front-page #masthead .ppshop-topbar__inner,
body.home #masthead .ppshop-nav-inner,
body.front-page #masthead .ppshop-nav-inner {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  padding-inline: clamp(16px, 2.2vw, 40px) !important;
}

body.home #masthead .ppshop-nav-inner,
body.front-page #masthead .ppshop-nav-inner {
  justify-content: space-between !important;
}

body.home .ppshop-home-banner,
body.front-page .ppshop-home-banner {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

body.home .ppshop-home-banner__img,
body.front-page .ppshop-home-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

body.home .ppshop-banner-brands,
body.front-page .ppshop-banner-brands {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: clamp(10px, 1.7vw, 22px);
  transform: translateX(-50%);
  width: min(1480px, calc(100vw - 24px));
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  padding: 0;
  align-items: stretch;
}

body.home .ppshop-banner-brands__item,
body.front-page .ppshop-banner-brands__item {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 5 / 6;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(17, 23, 34, 0.68) !important;
  border: 1px solid rgba(232, 131, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

body.home .ppshop-banner-brands__item:hover,
body.front-page .ppshop-banner-brands__item:hover {
  background: rgba(232, 131, 0, 0.75) !important;
  border-color: rgba(232, 131, 0, 0.95) !important;
  transform: translateY(-3px);
}

body.home .ppshop-banner-brands__logo,
body.front-page .ppshop-banner-brands__logo {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 1.8vw, 24px) clamp(10px, 1.4vw, 18px) 0 !important;
}

body.home .ppshop-banner-brands__logo img,
body.front-page .ppshop-banner-brands__logo img {
  width: auto !important;
  height: auto !important;
  max-width: min(150px, 80%) !important;
  max-height: min(112px, 42%) !important;
  object-fit: contain !important;
}

body.home .ppshop-banner-brands__name,
body.front-page .ppshop-banner-brands__name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 3rem;
  padding: 10px 8px 12px !important;
  background: rgba(0, 0, 0, 0.58) !important;
  color: #fff !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  white-space: normal !important;
}

@media (max-width: 1400px) {
  body.home .ppshop-banner-brands,
  body.front-page .ppshop-banner-brands {
    width: min(1380px, calc(100vw - 24px));
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  body.home .ppshop-banner-brands,
  body.front-page .ppshop-banner-brands {
    width: min(1040px, calc(100vw - 20px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.home .ppshop-topbar__tagline,
  body.front-page .ppshop-topbar__tagline {
    display: none !important;
  }
  body.home .ppshop-topbar__logo img,
  body.front-page .ppshop-topbar__logo img {
    max-height: 50px !important;
  }
  body.home .ppshop-banner-brands,
  body.front-page .ppshop-banner-brands {
    width: calc(100vw - 16px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    bottom: 8px;
  }
}

@media (max-width: 480px) {
  body.home .ppshop-banner-brands,
  body.front-page .ppshop-banner-brands {
    grid-template-columns: 1fr;
    width: calc(100vw - 12px);
  }
  body.home .ppshop-banner-brands__name,
  body.front-page .ppshop-banner-brands__name {
    font-size: 12px !important;
  }
}
 .ppshop-order-note__bubble {
  flex: 1;
  background: #f4f6fb;
  border: 1px solid #e4e8ee;
  border-radius: 10px;
  padding: 12px 16px;
}

.ppshop-order-note--status .ppshop-order-note__bubble {
  background: #fff8f0;
  border-color: #fcddb5;
}

.ppshop-order-note__text {
  font-size: 14px;
  color: #333;
  line-height: 1.55;
  margin: 0 0 6px;
}

.ppshop-order-note__date {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ════════════════════════════════════════════════════════
   SHIPPING WARNING BOX (/view-order/ + product page)
   ════════════════════════════════════════════════════════ */

/* product page: full width below gallery thumbnails */
.ppshop-send-warning--product-wrap {
  margin-top: 20px;
}

.ppshop-send-warning--product-wrap .ppshop-send-warning,
.ppshop-send-warning--cart-wrap .ppshop-send-warning {
  margin-top: 0;
}

/* cart: slightly compact inside the table cell */
.ppshop-send-warning--cart-wrap {
  margin-top: 12px;
}

.ppshop-send-warning--cart-wrap .ppshop-send-warning {
  padding: 14px 18px;
}

.ppshop-send-warning--cart-wrap .ppshop-send-warning__heading {
  font-size: 15px;
  margin-bottom: 8px;
}

.ppshop-send-warning--cart-wrap .ppshop-send-warning__address {
  font-size: 13px;
}

.ppshop-send-warning {
  background: #fff5f5;
  border: 2px solid #e53935;
  border-radius: 10px;
  padding: 20px 24px;
  margin-top: 28px;
}

.ppshop-send-warning__heading {
  color: #c62828;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Comfortaa', sans-serif;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ppshop-send-warning__address {
  font-style: normal;
  font-size: 15px;
  color: #222;
  line-height: 1.9;
  padding-left: 4px;
  border-left: 3px solid #e53935;
  padding-left: 14px;
  margin: 0;
}

/* ════════════════════════════════════════════════════════
   ORDER ITEM META: variants + WAPF options (/view-order/)
   ════════════════════════════════════════════════════════ */

.woocommerce-table--order-details .wc-item-meta {
  background: #f7f8fa;
  border: 1px solid #e4e8ee;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 6px;
}

.woocommerce-table--order-details .wc-item-meta li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 3px 0;
}

.woocommerce-table--order-details .wc-item-meta .wc-item-meta-label {
  font-weight: 700;
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 80px;
}

/* On narrow screens the label's white-space:nowrap forced it to render at
   its full (often 150px+) text width regardless of the 80px min-width —
   min-width only ever raises the shrink FLOOR, it doesn't cap the natural
   size, so in a flex row too narrow for that full label text, the browser
   shrank the label's BOX down toward 80px while the nowrap text inside it
   kept its full width and visually spilled out over the value text sitting
   right next to it (the exact "KODOWANIE LAMP PRZÓTAKQ:"-style overlap
   reported on /zamowienie/order-received/ at ~400px). Stacking label above
   value below 600px removes the shrink entirely — nothing to overlap. */
@media (max-width: 600px) {
  .woocommerce-table--order-details .wc-item-meta li {
    display: block;
  }
  .woocommerce-table--order-details .wc-item-meta .wc-item-meta-label {
    display: block;
    min-width: 0;
    white-space: normal;
    margin-bottom: 2px;
  }
}

.woocommerce-table--order-details .wc-item-meta p {
  margin: 0;
  font-size: 14px;
  color: #222;
}

/* Single divider between the plain vehicle attributes and the add-on rows
   below them — see order/order-details-item.php, which builds these two
   groups explicitly instead of one flat list. */
.ppshop-order-item-meta__divider {
  padding: 0 !important;
  margin: 6px 0;
  border-top: 1px solid #e4e8ee;
}
.ppshop-order-item-meta__addon,
.ppshop-order-item-meta__addon .wc-item-meta-label {
  color: #E88300 !important;
}
.ppshop-order-item-meta__addon p {
  color: #E88300 !important;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════
   ORDER SUMMARY (Kwota / Wysyłka / Razem / Metoda płatności)
   Rendered in order-details.php as plain <div>s *below* the
   items table (not inside a <tfoot>) — a real table row can't be
   restyled into a compact card without fighting the browser's
   table box model, so it isn't a table row at all anymore.
   ════════════════════════════════════════════════════════ */

.ppshop-order-summary {
  background: #f7f8fa;
  border: 1px solid #e4e8ee;
  border-radius: 10px;
  margin: 20px 0 0 auto;
  max-width: 420px;
  padding: 4px 20px;
}

.ppshop-order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e4e8ee;
}

.ppshop-order-summary__row:last-child {
  border-bottom: none;
}

.ppshop-order-summary__label {
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

.ppshop-order-summary__value {
  font-weight: 600;
  color: #222;
  text-align: right;
}

.ppshop-order-summary__row--order_total {
  padding-top: 14px;
  padding-bottom: 14px;
}

.ppshop-order-summary__row--order_total .ppshop-order-summary__label,
.ppshop-order-summary__row--order_total .ppshop-order-summary__value {
  font-size: 18px;
  color: #000;
}

.ppshop-order-summary__row--note {
  flex-direction: column;
  align-items: flex-start;
}

.ppshop-order-summary__row--note .ppshop-order-summary__value {
  text-align: left;
  font-weight: 400;
  color: #444;
}

/* ════════════════════════════════════════════════════════
   ORDER STATUS LINE ("Zamówienie nr X złożone ... ma obecnie
   status: ...") on the thank-you / view-order pages
   ════════════════════════════════════════════════════════ */

.ppshop-order-status-line {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════
   ORDER UPDATES (order status change log, view-order page)
   ════════════════════════════════════════════════════════ */

.ppshop-order-updates__title {
  margin: 24px 0 12px;
}

.woocommerce-OrderUpdates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.woocommerce-OrderUpdate-inner {
  background: #f7f8fa;
  border: 1px solid #e4e8ee;
  border-left: 3px solid var(--secondary-color, #E88300);
  border-radius: 6px;
  padding: 12px 16px;
}

.woocommerce-OrderUpdate-meta {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.woocommerce-OrderUpdate-description {
  font-size: 14px;
  color: #222;
}

.woocommerce-OrderUpdate-description p {
  margin: 0;
}

/* ════════════════════════════════════════════════════════
   ORDER RECEIVED (THANK YOU) PAGE
   ════════════════════════════════════════════════════════ */

.ppshop-thankyou-header {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #f0faf4;
  border: 2px solid #4caf50;
  border-radius: 12px;
  padding: 22px 28px;
  margin-bottom: 28px;
}

.ppshop-thankyou-header__icon {
  font-size: 52px;
  color: #4caf50;
  flex-shrink: 0;
  line-height: 1;
}

.ppshop-thankyou-header__title {
  font-family: 'Comfortaa', sans-serif;
  font-size: 20px;
  color: #1b5e20;
  margin: 0 0 4px;
}

.ppshop-thankyou-header__sub {
  font-size: 14px;
  color: #388e3c;
  margin: 0;
}

.ppshop-thankyou-phone {
  background: #fff8e1;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #5d4037;
}

.ppshop-thankyou-phone i {
  color: #f57c00;
  margin-right: 6px;
}

.ppshop-thankyou-phone a {
  color: #1c69d4;
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════
   DOWNLOADS TABLE — /moje-konto/downloads/ + view-order
   ════════════════════════════════════════════════════════ */

.ppshop-downloads-title {
  margin-bottom: 16px;
}

.ppshop-downloads-table th,
.ppshop-downloads-table td {
  text-align: center !important;
  vertical-align: middle !important;
}

.ppshop-dl-remaining {
  display: block;
  font-weight: 600;
}

.ppshop-dl-expires {
  display: block;
  font-size: 0.85em;
  color: #666;
  margin-top: 2px;
}

/* Green download button */
.ppshop-download-btn.button {
  background: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
  white-space: nowrap;
}

.ppshop-download-btn.button:hover {
  background: #1b5e20 !important;
  border-color: #1b5e20 !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════
   ORDERS LIST — Szczegóły button + download badge
   ════════════════════════════════════════════════════════ */

.ppshop-order-action-wrap {
  position: relative;
  display: inline-block;
}

.ppshop-dl-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #2e7d32;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════
   HEADER — desktop icon-area chat button
   ════════════════════════════════════════════════════════ */

/* desktop header-icon area button */
.ppshop-chat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 22px;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.ppshop-chat-btn:hover {
  color: #E88300;
}

/* ════════════════════════════════════════════════════════
   CHAT MODAL
   ════════════════════════════════════════════════════════ */

.ppshop-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppshop-chat-modal[hidden] {
  display: none;
}

.ppshop-chat-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.ppshop-chat-modal__box {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(900px, 96vw);
  height: min(620px, 90vh);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}

/* ── Left sidebar: thread list ── */
.ppshop-chat-modal__sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee;
  background: #f9f9f9;
}

.ppshop-chat-modal__sidebar-hdr {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  font-weight: 700;
  font-family: 'Comfortaa', sans-serif;
  font-size: 15px;
  border-bottom: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
}

/* Moved out of the sidebar header so it closes the WHOLE modal from the
   whole box's own top-right corner, not just the thread-list column. */
.ppshop-chat-modal__x {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #aaa;
  padding: 4px;
  line-height: 1;
}

.ppshop-chat-modal__x:hover { color: #333; }

#ppshop-chat-threads {
  flex: 1;
  overflow-y: auto;
}

/* Thread buttons */
.ppshop-chat-thread-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.ppshop-chat-thread-btn:hover,
.ppshop-chat-thread-btn--active {
  background: #fff3e0;
}

.ppshop-chat-thread-btn--unread {
  border-left: 3px solid #E88300;
  background: #fff8f0;
}

.ppshop-chat-thread-btn__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ppshop-chat-thread-btn__num {
  font-weight: 700;
  font-size: 13px;
  color: #222;
}

.ppshop-chat-thread-btn__prev {
  font-size: 12px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.ppshop-chat-thread-btn__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.ppshop-chat-thread-btn__date {
  font-size: 11px;
  color: #bbb;
}

.ppshop-chat-thread-btn__badge {
  background: #E88300;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Right panel: active thread ── */
.ppshop-chat-modal__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ppshop-chat-modal__main-hdr {
  padding: 14px 20px;
  font-weight: 700;
  font-family: 'Comfortaa', sans-serif;
  font-size: 15px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
  background: #fff;
}

#ppshop-chat-modal-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: #f7f7f7;
}

#ppshop-chat-modal-compose {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  background: #fff;
}

/* prevent body scroll when modal is open */
body.ppshop-chat-modal--open {
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════
   CHAT — shared message bubbles (frontend + admin)
   ════════════════════════════════════════════════════════ */

/* Container with fixed height + scroll */
.ppshop-chat-messages,
.ppshop-chat-admin-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 16px;
  background: #f7f7f7;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  margin-bottom: 12px;
  scroll-behavior: smooth;
}

.ppshop-chat-admin-msgs {
  max-height: 340px;
}

/* Single message row */
.ppshop-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 72%;
}

/* My messages — right side */
.ppshop-chat-msg--out {
  align-self: flex-end;
  align-items: flex-end;
}

/* Other party — left side */
.ppshop-chat-msg--in {
  align-self: flex-start;
  align-items: flex-start;
}

.ppshop-chat-msg__bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ppshop-chat-msg--out .ppshop-chat-msg__bubble {
  background: #E88300;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ppshop-chat-msg--in .ppshop-chat-msg__bubble {
  background: #fff;
  color: #222;
  border: 1px solid #ddd;
  border-bottom-left-radius: 4px;
}

.ppshop-chat-msg__meta {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  padding: 0 2px;
}

.ppshop-chat-empty {
  color: #aaa;
  text-align: center;
  font-size: 14px;
  padding: 20px 0;
}

/* ── Compose area ── */
.ppshop-chat-compose {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ppshop-chat-compose textarea,
#ppshop-chat-admin-input {
  flex: 1;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════
   CHAT — standalone page (/moje-konto/czat/)
   ════════════════════════════════════════════════════════ */

.ppshop-chat-page__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.ppshop-chat-back {
  font-size: 13px;
  color: #E88300;
  text-decoration: none;
}

.ppshop-chat-back:hover {
  text-decoration: underline;
}

.ppshop-chat-page__order {
  font-weight: 700;
  font-family: 'Comfortaa', sans-serif;
  font-size: 16px;
}

/* Thread list */
.ppshop-chat-list__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.ppshop-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ppshop-chat-thread-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f9f9f9;
  border: 1px solid #eee;
  text-decoration: none;
  color: #222;
  transition: background 0.15s;
}

.ppshop-chat-thread-row:hover {
  background: #f0f0f0;
}

.ppshop-chat-thread-row--unread {
  border-left: 3px solid #E88300;
  background: #fff8f0;
}

.ppshop-chat-thread-row__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ppshop-chat-thread-row__order {
  font-weight: 700;
  font-size: 14px;
}

.ppshop-chat-thread-row__preview {
  font-size: 13px;
  color: #777;
}

.ppshop-chat-thread-row__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.ppshop-chat-thread-row__date {
  font-size: 12px;
  color: #aaa;
}

.ppshop-chat-thread-row__badge {
  background: #E88300;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Inline chat on view-order page ── */
.ppshop-chat-section {
  margin-top: 28px;
}

.ppshop-chat-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════
   ACCOUNT NAV — orders + downloads badges
   ════════════════════════════════════════════════════════ */

.ppshop-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E88300;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════
   HISTORY: collapsible toggle button
   ════════════════════════════════════════════════════════ */

.ppshop-order-history__toggle {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Comfortaa', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #111722;
  margin-bottom: 16px;
  user-select: none;
}

.ppshop-order-history__toggle:hover {
  color: #E88300;
}

.ppshop-order-history__caret {
  font-size: 18px;
  transition: transform 0.2s ease;
  color: #E88300;
}

/* Compact note: "Szczegóły opłaty" type — tight line height */
.ppshop-order-note--compact .ppshop-order-note__text {
  line-height: 1.35 !important;
}

.ppshop-order-note--compact .ppshop-order-note__text p {
  margin: 2px 0 !important;
}

/* ════════════════════════════════════════════════════════
   CART REMOVE BUTTON — red, centered vertically per row
   ════════════════════════════════════════════════════════ */

/* Block cart remove button: always red */
.wc-block-cart-item__quantity .wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link {
  color: #e53935 !important;
  font-size: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.wc-block-cart-item__remove-link:hover {
  color: #b71c1c !important;
}

.wc-block-cart-item__remove-link svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
}

/* Classic cart remove button */
.cart.woocommerce-cart-form .product-remove a,
.ppshop-cart-remove {
  color: #e53935 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.cart.woocommerce-cart-form .product-remove a:hover,
.ppshop-cart-remove:hover {
  color: #b71c1c !important;
}

/* ════════════════════════════════════════════════════════
   FLOATING CART BUTTON + SIDE PANEL
   ════════════════════════════════════════════════════════ */

.ppshop-floating-cart {
  position: fixed;
  right: 34px;
  bottom: 90px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1c69d4;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
  transition: box-shadow 0.2s ease, transform 0.15s ease, color 0.15s ease;
}

.ppshop-floating-cart:hover {
  background: #1c69d4;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
  transform: scale(1.06);
  color: #E88300;
}

.ppshop-floating-cart.is-open {
  background: #1c69d4;
  color: #E88300;
}

.ppshop-floating-cart i {
  font-size: 26px;
  line-height: 1;
  pointer-events: none;
  transition: color 0.15s ease;
}

.ppshop-floating-cart__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #E88300;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.ppshop-floating-cart__badge--hidden {
  display: none;
}

/* ── Cart side panel ── */
.ppshop-cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 28px rgba(0, 0, 0, 0.16);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.ppshop-cart-panel.is-open {
  transform: translateX(0);
}

.ppshop-cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #1c69d4;
  color: #fff;
  flex-shrink: 0;
}

.ppshop-cart-panel__title {
  font-family: 'Comfortaa', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ppshop-cart-panel__title i {
  font-size: 20px;
}

.ppshop-cart-panel__close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0.8;
  transition: background 0.15s, opacity 0.15s;
}

.ppshop-cart-panel__close:hover {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

.ppshop-cart-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.ppshop-cart-panel__empty {
  color: #999;
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
  margin: 0;
}

.ppshop-cart-panel__list {
  list-style: none;
  padding: 12px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ppshop-cart-panel__item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.ppshop-cart-panel__item:last-child {
  border-bottom: none;
}

.ppshop-cart-panel__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #eee;
  background: #f9f9f9;
}

.ppshop-cart-panel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ppshop-cart-panel__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.ppshop-cart-panel__name {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.ppshop-cart-panel__name:hover {
  color: #1c69d4;
  text-decoration: none;
}

.ppshop-cart-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ppshop-cart-panel__qty {
  font-size: 12px;
  color: #999;
}

.ppshop-cart-panel__price {
  font-size: 13px;
  font-weight: 600;
  color: #E88300;
}

.ppshop-cart-panel__price .woocommerce-Price-amount {
  font-weight: 600;
}

.ppshop-cart-panel__footer {
  padding: 14px 16px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
  background: #f7f8fb;
}

.ppshop-cart-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #444;
}

.ppshop-cart-panel__total strong {
  font-size: 15px;
  color: #111;
}

.ppshop-cart-panel__clear {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: 1.5px solid #ddd;
  color: #888;
  padding: 9px 16px;
  border-radius: 6px;
  font-family: 'Comfortaa', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  transition: color 0.2s, border-color 0.2s;
}

.ppshop-cart-panel__clear:hover {
  color: #c0392b;
  border-color: #f5c6c2;
}

.ppshop-cart-panel__checkout {
  display: block;
  text-align: center;
  background: #1c69d4 !important;
  color: #fff !important;
  padding: 11px 16px;
  border-radius: 6px;
  font-family: 'Comfortaa', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s;
}

/* /koszyk/ own "Wyczyść koszyk" button — injected via JS (see the is_cart()
   hook in functions.php) right above whichever cart markup renders (the
   WooCommerce Cart block, or the classic shortcode template as a fallback). */
.ppshop-clear-cart-row {
  text-align: right;
  margin: 0 0 12px;
}

.ppshop-clear-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid #ddd;
  color: #888;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: 'Comfortaa', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.ppshop-clear-cart-btn:hover {
  color: #c0392b;
  border-color: #f5c6c2;
}

.ppshop-cart-panel__checkout:hover {
  background: #144fa3 !important;
  text-decoration: none !important;
}

.ppshop-cart-panel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #aaa;
  font-size: 13px;
  gap: 8px;
}

.ppshop-cart-panel__loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid #e0e0e0;
  border-top-color: #1c69d4;
  border-radius: 50%;
  animation: ppshop-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Cart panel: item top row (name + trash) ── */
.ppshop-cart-panel__top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}

.ppshop-cart-panel__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.15s;
}

.ppshop-cart-panel__remove:hover {
  color: #e53935;
}

/* ── Cart panel: variant / WAPF meta ── */
.ppshop-cart-panel__meta {
  font-size: 11px !important;
  color: #aaa !important;
  margin-bottom: 5px;
  line-height: 1.5;
}

.ppshop-cart-panel__meta * {
  font-size: 11px !important;
  color: #aaa !important;
}

.ppshop-cart-panel__meta dl {
  display: block;
  margin: 0;
  padding: 0;
}

.ppshop-cart-panel__meta dl dt {
  display: inline;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.ppshop-cart-panel__meta dl dd {
  display: inline;
  margin: 0 0 0 3px;
  padding: 0;
}

.ppshop-cart-panel__meta dl dd p {
  display: inline;
  margin: 0;
  padding: 0;
}

.ppshop-cart-panel__meta dl dd::after {
  content: '';
  display: block;
  margin-bottom: 2px;
}

/* ── Cart panel: quantity stepper ── */
.ppshop-cart-panel__qty-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.ppshop-cart-panel__qty-btn {
  background: #f5f5f5;
  border: none;
  color: #444;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  height: 26px;
  line-height: 1;
  min-width: 26px;
  padding: 0;
  transition: background 0.12s;
}

.ppshop-cart-panel__qty-btn:hover:not(:disabled) {
  background: #e2e2e2;
  color: #111;
}

.ppshop-cart-panel__qty-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ppshop-cart-panel__qty-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  font-size: 13px;
  font-weight: 600;
  height: 26px;
  min-width: 30px;
  text-align: center;
}

.ppshop-cart-panel__item--busy {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* ── Cart panel overlay ── */
.ppshop-cart-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.ppshop-cart-panel-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 400px) {
  .ppshop-cart-panel {
    width: 100vw;
  }
}

/* ── Footer – logo + motto kolumna ────────────────────────────────────────── */
.ppshop-footer-contact__brand-col {
  flex: 0 0 auto;
  max-width: 220px;
}

.ppshop-footer-contact__info-col {
  flex: 1 1 auto;
  display: grid;
  gap: 5px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

.ppshop-footer-logo-link {
  display: inline-block;
  margin-bottom: 10px;
}

.ppshop-footer-logo-img {
  max-height: 90px;
  width: auto;
  display: block;
}

.ppshop-footer-motto {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

@media (max-width: 640px) {
  .ppshop-footer-contact {
    flex-direction: column;
    gap: 10px;
  }
  .ppshop-footer-contact__brand-col {
    max-width: 100%;
  }
}

/* ── Footer – Informacje column ────────────────────────────────────────────── */
.ppshop-footer-links__heading {
  border-bottom: 2px solid var(--secondary-color);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 10px 0;
  padding-bottom: 7px;
  text-transform: uppercase;
}

.ppshop-footer-links__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ppshop-footer-links__list li {
  margin: 0 !important;
  padding: 0 !important;
}

.ppshop-footer-links .ppshop-footer-links__list a {
  color: rgba(255, 255, 255, 0.8);
  display: block;
  font-size: 16px;
  line-height: 1.25;
  margin: 0 !important;
  padding: 4px 0 !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

.ppshop-footer-links .ppshop-footer-links__list a:hover,
.ppshop-footer-links .ppshop-footer-links__list a:focus {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* ── Footer – dane kontaktowe (telefon, email, miasto) ─────────────────────── */
.ppshop-footer-contact__addr {
  align-items: flex-start;
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.ppshop-footer-contact__addr i {
  flex-shrink: 0;
  line-height: 1.5;
}

.ppshop-footer-contact__addr,
.ppshop-footer-contact__tel,
.ppshop-footer-contact__mail {
  font-size: 16px;
}

.ppshop-footer-contact__addr i,
.ppshop-footer-contact__tel i,
.ppshop-footer-contact__mail i {
  font-size: 17px;
}

/* Links: color + hover underline */
.ppshop-footer-contact__tel a,
.ppshop-footer-contact__mail a {
  color: inherit;
  text-decoration: none;
}

.ppshop-footer-contact__tel a:hover,
.ppshop-footer-contact__tel a:focus,
.ppshop-footer-contact__mail a:hover,
.ppshop-footer-contact__mail a:focus {
  text-decoration: underline;
}

/* ── Product cards: align price + button to same row regardless of title length ── */
ul.products li.product {
  display: flex !important;
  flex-direction: column;
}

ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1;
  flex-direction: column;
}

ul.products li.product a.woocommerce-LoopProduct-link .woocommerce-loop-product__title {
  flex: 1;
}

/* ── Cookie consent bar ─────────────────────────────────────────────────────── */
.ppshop-cookie-bar {
  background: #0b0d12;
  border-top: 2px solid var(--secondary-color, #E88300);
  bottom: -200px;
  color: #fff;
  left: 0;
  padding: 14px 20px;
  position: fixed;
  right: 0;
  transition: bottom 0.4s ease;
  z-index: 99998;
}

.ppshop-cookie-bar.is-visible {
  bottom: 0;
}

.ppshop-cookie-bar__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1200px;
}

.ppshop-cookie-bar__text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  min-width: 200px;
}

.ppshop-cookie-bar__text a {
  color: var(--secondary-color, #E88300);
  text-decoration: underline;
}

.ppshop-cookie-bar__actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.ppshop-cookie-bar__btn--accept {
  background: var(--secondary-color, #E88300);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.ppshop-cookie-bar__btn--accept:hover {
  opacity: 0.85;
}

.ppshop-cookie-bar__btn--close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 7px 12px;
  transition: border-color 0.15s;
}

.ppshop-cookie-bar__btn--close:hover {
  border-color: #fff;
}

/* ── Przyciski "Dodaj do koszyka" – ikona koszyka ──────────────────────────── */
a.add_to_cart_button::before,
button.single_add_to_cart_button::before {
  font-family: IcoFont !important;
  font-style: normal;
  font-variant: normal;
  font-size: 1.15em;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: "\eed2"; /* icofont-cart */
  margin-right: 5px;
}

/* Variable product — arrow icon instead of cart (all loop contexts) */
a.add_to_cart_button.product_type_variable::before,
ul.products a.product_type_variable::before,
ul.products li a.button.product_type_variable::before {
  content: "\ea5d"; /* icofont-arrow-right */
  font-family: IcoFont !important;
  font-style: normal;
  font-variant: normal;
  font-size: 1.15em;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  margin-right: 5px;
}

/* Home page product buttons — explicit orange + icon coverage */
body.home ul.products a.add_to_cart_button::before {
  font-family: IcoFont !important;
  font-style: normal;
  font-size: 1.15em;
  content: "\eed2";
  margin-right: 5px;
}

body.home ul.products a.product_type_variable::before {
  content: "\ea5d";
}

body.home ul.products a.add_to_cart_button,
body.home ul.products a.button,
body.home .woocommerce ul.products li.product .btn {
  background-color: #E88300 !important;
  background: #E88300 !important;
  color: #fff !important;
  border-color: #E88300 !important;
}

/* ── Arrow icon: ALL contexts where product can't be added via AJAX ─────────── */
/* Covers: variable products, simple+WAPF required fields, Breakdance widgets, blocks */

/* CSS-only detection: add_to_cart_button WITHOUT ajax_add_to_cart = requires product page */
a.add_to_cart_button:not(.ajax_add_to_cart)::before {
  content: "\ea5d" !important;
  font-family: IcoFont !important;
  font-style: normal;
  font-variant: normal;
  font-size: 1.15em;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  margin-right: 5px;
  display: inline-block;
}

/* Universal fallback for product_type_variable class (standard WC + PHP-patched simple) */
a.product_type_variable::before,
button.product_type_variable::before {
  content: "\ea5d" !important;
  font-family: IcoFont !important;
  font-style: normal;
  font-variant: normal;
  font-size: 1.15em;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  margin-right: 5px;
  display: inline-block;
}

/* JS fallback: buttons patched via ppshop_footer JS (Breakdance, blocks, custom templates) */
a.ppshop-needs-arrow::before,
button.ppshop-needs-arrow::before {
  content: "\ea5d" !important;
  font-family: IcoFont !important;
  font-style: normal;
  font-variant: normal;
  font-size: 1.15em;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  margin-right: 5px;
  display: inline-block;
}

/* Icon + text layout: row flex so ::before icon stays left of (possibly multi-line) text. */
a.add_to_cart_button:not(.ajax_add_to_cart),
a.product_type_variable,
button.product_type_variable,
a.ppshop-needs-arrow,
button.ppshop-needs-arrow {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  white-space: normal;
}

/* Shoper sets .btn.product_type_variable { width: 80% } — no override needed, width comes from the general rule below */
.woocommerce li.product .btn.product_type_variable {
  display: inline-flex !important;
}

/* "Dodaj do koszyka" (ajax): icon inline with text — .btn span is display:block which
   would push it below the ::before icon without an explicit flex-direction: row */
a.add_to_cart_button.ajax_add_to_cart {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Force consistent 2-line wrap in all loop product buttons regardless of card width */
ul.products li.product .btn span {
  width: auto !important;
  max-width: 95px;
  white-space: normal;
  text-align: center;
}

/* Button width — same for all button types (variable + ajax + needs-page simple) */
.woocommerce li.product .btn {
  width: 80% !important;
  min-width: unset !important;
}

/* ── Icon size/spacing overrides per button type ────────────────────────────── */

/* "Dodaj do koszyka" (ajax_add_to_cart): slightly larger, 10px spacing */
a.add_to_cart_button.ajax_add_to_cart::before {
  font-size: 1.3em !important;
  margin-right: 10px !important;
}

/* "Wybierz wariant" (product_type_variable): slightly larger icon, 10px spacing */
a.product_type_variable::before,
button.product_type_variable::before,
a.add_to_cart_button.product_type_variable::before,
a.add_to_cart_button:not(.ajax_add_to_cart)::before {
  font-size: 1.5em !important;
  margin-right: 10px !important;
}

/* ── Category product sections (ppshop-cat-section) ───────────────────────── */
.ppshop-cat-section {
  margin-top: 56px;
  clear: both;
}
.ppshop-cat-section > h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--secondary-color, #f0a500);
  color: inherit;
}
.ppshop-cat-section ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 25px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ppshop-cat-section ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 5px 5px 30px !important;
}
@media (max-width: 991px) {
  .ppshop-cat-section ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 575px) {
  .ppshop-cat-section ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ── Banner brand cards: 2200px+ — bigger cards & heading (2560px+ monitors) ── */
@media (min-width: 2200px) {
  /* Give the banner enough height to fit taller cards */
  .ppshop-home-banner img,
  .ppshop-home-banner__img {
    max-height: 860px !important;
    min-height: 620px !important;
  }

  /* Shift the whole brand group (heading + cards) 100px higher */
  .ppshop-banner-brands {
    transform: translateY(calc(-50% - 100px)) !important;
  }

  /* "Wybierz markę" — bigger pill at large screens */
  .ppshop-banner-brands__heading {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 48px !important;
    padding: 20px 52px !important;
    border-radius: 50px !important;
  }

  .ppshop-banner-brands__row {
    gap: 44px !important;
  }

  /* Card: fixed size, column flex, logos must NOT overflow */
  .ppshop-banner-brands__item {
    width: 260px !important;
    height: 370px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Logo area: takes all space above the name, image contained inside */
  .ppshop-banner-brands__logo {
    flex: 1 1 0% !important;   /* flex-grow:1, flex-shrink:1, flex-basis:0 */
    min-height: 0 !important;  /* critical — lets flex child shrink below content size */
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
  }

  /* Image: scale to fit logo area, never overflow */
  .ppshop-banner-brands__logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* Name: pinned to bottom of card, fixed height */
  .ppshop-banner-brands__name {
    flex-shrink: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 16px 14px !important;
    letter-spacing: 0.05em !important;
  }
}

/* ── Footer – wspólny styl nagłówka kolumny ────────────────────────────────── */
.ppshop-footer-section-heading {
  border-bottom: 2px solid var(--secondary-color);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 10px 0;
  padding-bottom: 7px;
  text-transform: uppercase;
}

/* ── Footer – Copyright bar ────────────────────────────────────────────────── */
.ppshop-footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  margin-top: 20px;
  padding-top: 12px;
  text-align: center;
}

.ppshop-footer-copyright p {
  margin: 0;
}

/* ── Strona: Metody płatności ──────────────────────────────────────────────── */
.ppshop-payment-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 24px 0;
}

.ppshop-payment-card {
  border: 1px solid #e0e5ef;
  border-radius: 10px;
  padding: 22px 20px;
  background: #f9fafc;
}

.ppshop-payment-card__icon {
  font-size: 32px;
  margin-bottom: 10px;
  line-height: 1;
  color: var(--secondary-color, #1c69d4);
}

.ppshop-payment-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.ppshop-payment-card p {
  color: #555;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.ppshop-payment-badge {
  display: inline-block;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 4px 3px 0 0;
  padding: 3px 8px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ── Regulamin: logo + h1 w jednej linii ─────────────────────────────────── */
.ppshop-reg-header {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ppshop-reg-header h1 {
  flex: 1;
  margin: 0;
}

.ppshop-reg-logo {
  flex-shrink: 0;
  max-height: 100px;
  width: auto;
}

/* ── Strona produktu: przerwa przed stopką ────────────────────────────────── */
body.single-product .site-main,
body.single-product #main {
  padding-bottom: 56px;
}

/* ── Strona: Dostawa / Wysyłka / Regulamin ─────────────────────────────────── */
.ppshop-info-page h2 {
  border-bottom: 2px solid var(--secondary-color, #1c69d4);
  padding-bottom: 5px;
  margin-top: 24px;
  margin-bottom: 8px;
}

.ppshop-info-page p {
  margin-bottom: 5px;
  line-height: 1.5;
}

.ppshop-info-page ul,
.ppshop-info-page ol {
  margin-top: 4px;
  margin-bottom: 6px;
  padding-left: 22px;
}

.ppshop-info-page li {
  margin-bottom: 3px;
  line-height: 1.45;
}

.ppshop-info-page .ppshop-delivery-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 20px 0;
}

.ppshop-delivery-card {
  border: 1px solid #e0e5ef;
  border-radius: 8px;
  padding: 14px 14px;
  background: #f9fafc;
}

.ppshop-delivery-card i {
  font-size: 24px;
  color: var(--secondary-color, #1c69d4);
  display: block;
  margin-bottom: 4px;
}

.ppshop-delivery-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.ppshop-delivery-card span {
  color: #555;
  font-size: 13px;
  line-height: 1.4;
  display: block;
}

/* Brand logo badge — top-right corner of product summary */
.summary.entry-summary {
    position: relative;
}
.ppshop-brand-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ppshop-brand-badge img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — topbar, brands, product, footer
   ════════════════════════════════════════════════════════ */

/* ── Hamburger: neutralise parent-theme shoper-rd-navbar-toggle defaults ── */
.ppshop-topbar-menu-btn {
  /* Always override parent defaults regardless of breakpoint */
  position: relative !important;
  float: none !important;
  margin-top: 0 !important;
  visibility: visible !important;
  /* Hidden by default, shown at ≤992px */
  display: none !important;
  /* Own styles */
  align-items: center;
  justify-content: center;
  background: #E88300 !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 6px;
  color: #fff !important;
  cursor: pointer;
  font-size: 22px;
  height: 40px;
  line-height: 1;
  padding: 0 10px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.ppshop-topbar-menu-btn:hover {
  background: #c97000 !important;
  color: #fff !important;
}

/* ── Konto icon in topbar: only ≤992px ── */
.ppshop-topbar-account-mobile {
  display: none !important;
}

/* ════ 1300px: reduce large side margins, shrink search ════ */
@media (max-width: 1300px) {
  .ppshop-topbar__brand {
    margin-left: 5% !important;
    flex-shrink: 0;
  }
  .ppshop-topbar__right {
    margin-right: 3% !important;
    flex-shrink: 0;
  }
  .ppshop-topbar__search-wrap .ppshop-search-input {
    width: 280px;
    min-width: 0;
  }
}

/* ════ 1100px: icon-only topbar labels, narrower search ════ */
@media (max-width: 1100px) {
  .ppshop-topbar__brand {
    margin-left: 2% !important;
    flex-shrink: 1 !important;
    min-width: 0;
  }
  .ppshop-topbar__logo {
    margin-left: 0 !important;
  }
  .ppshop-topbar__right {
    margin-right: 0 !important;
    gap: 10px;
    padding-right: 22px;
    overflow: visible;
    flex-shrink: 0;
  }
  /* Hide tagline to free space for icons */
  .ppshop-topbar__tagline {
    display: none !important;
  }
  /* Hide "Koszyk", "Wiadomości", etc. text — keep icons only */
  /* Note: .ppshop-lc__code does NOT have this class any more, so lang code always shows */
  .ppshop-topbar__label {
    display: none !important;
  }
  .ppshop-topbar__search-wrap .ppshop-search-input {
    width: 160px;
    min-width: 0;
  }
  /* Nav account link: tighter padding */
  .ppshop-nav-account__link {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .ppshop-lang-topbar {
    flex-shrink: 0;
    overflow: visible;
  }
}

/* ════ 992px: hide search, show hamburger + konto icon ════ */
@media (max-width: 992px) {
  .ppshop-topbar__brand {
    margin-left: 0 !important;
    flex-shrink: 0;
  }
  .ppshop-topbar__right {
    margin-right: 0 !important;
    gap: 12px;
  }
  /* Hide full search bar */
  .ppshop-topbar__search-wrap {
    display: none !important;
  }
  /* Keep logo visible */
  .ppshop-topbar__logo img {
    max-height: 64px !important;
  }
  /* Show topbar hamburger (override parent-theme visibility:hidden) */
  .ppshop-topbar-menu-btn {
    display: flex !important;
    visibility: visible !important;
    position: relative !important;
    float: none !important;
    margin-top: 0 !important;
  }
  /* Hide original nav-bar-wrap toggle (moved to topbar) */
  #nav_bar_wrap .shoper-rd-navbar-toggle {
    display: none !important;
  }
  /* Hide konto in nav bar — shown as icon in topbar instead */
  .ppshop-nav-account {
    display: none !important;
  }
  /* Konto icon: visible */
  .ppshop-topbar-account-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
  }
  .ppshop-topbar-account-mobile i {
    font-size: 22px;
    line-height: 1;
  }
  .ppshop-topbar-account-mobile:hover {
    color: #E88300;
  }
  /* Nav-bar-wrap: no padding when contents are hidden */
  #nav_bar_wrap {
    padding: 0 !important;
  }
  .ppshop-nav-inner {
    padding: 0 !important;
    min-height: 0;
  }
}

/* ════ 767px: full mobile ════ */
@media (max-width: 767px) {
  .ppshop-topbar__inner {
    height: 60px;
    gap: 8px;
  }
  .ppshop-topbar__right {
    gap: 10px;
  }
  .ppshop-topbar__tagline {
    display: none !important;
  }
  .ppshop-topbar__logo img {
    max-height: 50px !important;
  }
}

/* ── Title bar: centered on mobile ── */
@media (max-width: 767px) {
  .ppshop-page-title-bar .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .ppshop-page-title {
    text-align: center;
    justify-content: center;
  }
  .ppshop-page-title-bar {
    padding: 14px 0 10px;
  }
}

/* ── Home banner brand cards: progressive responsive ── */

/* 1100px: slightly smaller cards */
@media (max-width: 1100px) {
  .ppshop-banner-brands__row {
    gap: 16px !important;
    padding: 0 16px !important;
  }
  .ppshop-banner-brands__item {
    width: 220px !important;
    min-width: 0 !important;
    max-width: calc(33.33% - 12px) !important;
    height: 180px !important;
  }
  .ppshop-banner-brands__logo img {
    max-height: 80px !important;
    max-width: 115px !important;
  }
  .ppshop-banner-brands__name {
    font-size: 15px !important;
    padding: 8px 6px !important;
  }
  .ppshop-banner-brands {
    transform: translateY(-50%) !important;
  }
  .ppshop-home-banner img,
  .ppshop-home-banner__img {
    max-height: 560px !important;
  }
  .ppshop-home-banner__img {
    min-height: 440px;
    object-fit: cover;
    object-position: center;
  }
  .ppshop-lang-topbar {
    flex-shrink: 0;
    overflow: visible;
  }
  .ppshop-topbar__right {
    overflow: visible;
  }
}

/* 900px: smaller cards, 2 rows if needed, minimal side padding */
@media (max-width: 900px) {
  .ppshop-banner-brands__row {
    gap: 10px !important;
    padding: 0 8px !important;
  }
  .ppshop-banner-brands__item {
    width: calc(33.33% - 8px) !important;
    min-width: 0 !important;
    max-width: calc(33.33% - 8px) !important;
    height: 160px !important;
  }
  .ppshop-banner-brands__logo img {
    max-height: 72px !important;
    max-width: 100px !important;
  }
  .ppshop-banner-brands__name {
    font-size: 14px !important;
    padding: 7px 5px !important;
    letter-spacing: 0 !important;
  }
  .ppshop-banner-brands__heading {
    font-size: 17px;
    margin-bottom: 16px;
  }
  .ppshop-home-banner img,
  .ppshop-home-banner__img {
    max-height: 500px !important;
  }
  .ppshop-home-banner__img {
    min-height: 420px;
    object-fit: cover;
    object-position: center;
  }
  .ppshop-banner-brands {
    transform: translateY(-50%) !important;
  }
}

/* 767px: logos only, no names */
@media (max-width: 767px) {
  .ppshop-home-banner img,
  .ppshop-home-banner__img {
    max-height: 290px !important;
    object-fit: cover;
    object-position: center;
  }
  .ppshop-home-banner__img {
    min-height: 200px;
  }
  .ppshop-banner-brands {
    transform: translateY(-50%) !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .ppshop-banner-brands__heading {
    font-size: 11px;
    margin-bottom: 6px;
    text-align: center;
    letter-spacing: 0.05em;
  }
  .ppshop-banner-brands__row {
    gap: 5px !important;
    padding: 0 5px !important;
  }
  .ppshop-banner-brands__item {
    width: calc(33.33% - 4px) !important;
    min-width: 0 !important;
    max-width: calc(33.33% - 4px) !important;
    height: 80px !important;
    border-radius: 8px !important;
  }
  .ppshop-banner-brands__logo {
    flex: 1 !important;
    padding: 6px !important;
  }
  .ppshop-banner-brands__logo img {
    max-height: 44px !important;
    max-width: 58px !important;
  }
  /* No brand names on home banner mobile (shop page names stay visible) */
  .ppshop-home-banner .ppshop-banner-brands__name {
    display: none !important;
  }
}

/* ── Home banner brands: 426-767px — slightly larger cards + show names ── */
@media (min-width: 426px) and (max-width: 767px) {
  .ppshop-banner-brands__heading {
    font-size: 14px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.08em !important;
  }
  .ppshop-banner-brands__item {
    height: 106px !important;
    border-radius: 10px !important;
  }
  .ppshop-banner-brands__logo {
    flex: 1 !important;
    padding: 8px 6px 4px !important;
  }
  .ppshop-banner-brands__logo img {
    max-height: 54px !important;
    max-width: 70px !important;
  }
  /* Show brand names in the cards, centered */
  .ppshop-home-banner .ppshop-banner-brands__name {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    font-size: 10px !important;
    padding: 4px 4px 5px !important;
    letter-spacing: 0 !important;
  }
}

/* ── Home page: 2-col product grid on mobile ── */
@media (max-width: 767px) {
  body.home #content {
    padding-top: 20px !important;
  }
  body.home .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 400px) {
  body.home .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ── Single product page: stack on mobile ── */
@media (max-width: 768px) {
  .ppshop-product-outer .breakdance-woocommerce.product,
  .ppshop-product-outer div.product {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .ppshop-product-outer .woocommerce-product-gallery,
  .ppshop-product-outer .entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .single-product table.variations tbody {
    grid-template-columns: 110px 1fr !important;
  }
  .single-product .wapf-field-input select,
  .wapf-field-input select {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ppshop-brand-badge {
    width: 48px !important;
    height: 48px !important;
    top: 6px !important;
    right: 6px !important;
  }
  .ppshop-send-warning {
    padding: 14px 16px;
    margin-top: 16px;
  }
  .ppshop-send-warning__heading {
    font-size: 15px;
  }
  .ppshop-send-warning__address {
    font-size: 14px;
  }
  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products {
    grid-template-columns: 1fr !important;
  }
  .ppshop-product-archive ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ── Footer: responsive font scaling ── */
@media (max-width: 1100px) {
  .ppshop-footer-contact__addr,
  .ppshop-footer-contact__tel,
  .ppshop-footer-contact__mail {
    font-size: 14px;
  }
  .ppshop-footer-links .ppshop-footer-links__list a {
    font-size: 14px;
  }
  .ppshop-footer-contact__brand {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .ppshop-footer-contact__addr,
  .ppshop-footer-contact__tel,
  .ppshop-footer-contact__mail {
    font-size: 13px;
  }
  .ppshop-footer-links .ppshop-footer-links__list a {
    font-size: 13px;
  }
  .ppshop-footer-section-heading {
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  .ppshop-footer-newsletter__sub {
    font-size: 13px;
  }
  .ppshop-footer-contact__brand {
    font-size: 15px;
  }
}

/* ════════════════════════════════════════════════════════
   MOBILE NAV SIDE PANEL
   ════════════════════════════════════════════════════════ */

/* Middle-click / scroll-click / Ctrl-click a top nav item (opens the link
   in a NEW tab) still gives that <a> keyboard focus in the ORIGINATING tab
   — normal browser behaviour for any focusable element — but since that tab
   never navigates away, nothing ever blurs it, so it stays "stuck"
   highlighted indefinitely (parent theme, wp-content/themes/shoper/style.css,
   couples :focus to the exact same orange background as :hover/current-page).
   Only clears once the user happens to click something else on the page,
   which moves focus off it. Fix: mouse-triggered focus should never trigger
   the highlight at all — only real keyboard-tab focus (:focus-visible)
   should, which also happens to be the more correct accessibility
   distinction. Excludes the actual current-page item so its "you are here"
   highlight is untouched. */
#navbar .navigation-menu > li:not(.current-menu-item):not(.current-page-parent):not(.current_page_item) > a:focus:not(:focus-visible),
#navbar .navigation-menu > li:not(.current-menu-item):not(.current-page-parent):not(.current_page_item):focus > a:not(:focus-visible) {
  background: transparent !important;
  color: var(--nav-color) !important;
}

/* Close button inside #navbar: hidden on desktop */
.shoper-navbar-close {
  display: none;
}

@media (max-width: 992px) {
  /* Side panel: hidden off-screen to the left by default */
  #masthead #navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 300px !important;
    max-width: 88vw !important;
    height: 100vh !important;
    z-index: 9990 !important;
    background: #0e1119 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s ease !important;
    padding-top: 64px !important;
    padding-bottom: 40px !important;
    display: block !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }

  #masthead #navbar.active {
    transform: translateX(0) !important;
  }

  /* Close button: visible inside the panel */
  .shoper-navbar-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    background: rgba(255,255,255,0.08) !important;
    border: none !important;
    border-radius: 6px;
    color: #fff !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 6px 10px !important;
    line-height: 1;
    z-index: 1;
  }
  .shoper-navbar-close:hover {
    background: rgba(232,131,0,0.7) !important;
  }

  /* Nav items: vertical list */
  #masthead #navbar .navigation-menu {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #masthead #navbar .navigation-menu > li {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    width: 100% !important;
    display: block !important;
  }

  #masthead #navbar .navigation-menu > li > a {
    padding: 13px 20px !important;
    display: block !important;
    width: 100% !important;
    color: #e0e8ff !important;
    font-size: 14px !important;
  }

  #masthead #navbar .navigation-menu > li > a:hover {
    color: #E88300 !important;
    background: rgba(232,131,0,0.08) !important;
  }

  /* Sub-menus inside panel */
  #masthead #navbar .navigation-menu li ul {
    position: static !important;
    background: rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
    border: none !important;
    display: none;
    width: 100% !important;
    min-width: 0 !important;
  }

  #masthead #navbar .navigation-menu li:hover > ul,
  #masthead #navbar .navigation-menu li.focus > ul {
    display: block !important;
  }

  #masthead #navbar .navigation-menu li li > a {
    padding: 10px 30px !important;
    font-size: 13px !important;
    color: #aec0e8 !important;
  }

  /* Backdrop overlay */
  #ppshop-nav-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.52);
    z-index: 9985;
    cursor: pointer;
  }
  #ppshop-nav-overlay.is-visible {
    display: block;
  }
  body.ppshop-nav-open {
    overflow: hidden;
  }

  /* Collapse nav_bar_wrap to zero height */
  #nav_bar_wrap {
    overflow: visible !important;
    min-height: 0 !important;
  }
  .ppshop-nav-inner {
    min-height: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════
   MOBILE BRANDS MODAL (≤425px)
   ════════════════════════════════════════════════════════ */

/* Mobile trigger button: hidden everywhere except ≤425px */
.ppshop-brands-mobile-btn {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(232, 131, 0, 0.92);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.07em;
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(0,0,0,0.55);
  z-index: 10;
  white-space: nowrap;
  gap: 8px;
  align-items: center;
}
.ppshop-brands-mobile-btn:hover {
  background: rgba(201, 112, 0, 0.98);
}
.ppshop-brands-mobile-btn i {
  font-size: 20px;
}

/* Banner min-height so button/cards always fit */
@media (max-width: 900px) {
  .ppshop-home-banner {
    min-height: 200px;
  }
  .ppshop-home-banner__img {
    width: 100% !important;
    min-height: 200px;
    object-fit: cover;
    object-position: center top;
  }
}

@media (max-width: 425px) {
  /* Hide the standard brand overlay */
  .ppshop-banner-brands {
    display: none !important;
  }
  /* Show the mobile trigger button */
  .ppshop-brands-mobile-btn {
    display: flex !important;
  }
  /* Ensure banner has minimum height for the button */
  .ppshop-home-banner {
    min-height: 180px;
  }
}

/* Modal — centered */
.ppshop-brands-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.ppshop-brands-modal.is-open {
  display: flex;
}
.ppshop-brands-modal__backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.68);
}
.ppshop-brands-modal__panel {
  position: relative;
  background: #0b0d12;
  width: min(480px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 24px 20px 28px;
  z-index: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.ppshop-brands-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
}
.ppshop-brands-modal__close:hover {
  background: rgba(232,131,0,0.7);
}
.ppshop-brands-modal__heading {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-right: 40px;
}
.ppshop-brands-modal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ppshop-brands-modal__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #111722;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.18s;
  border: 1px solid rgba(255,255,255,0.07);
}
.ppshop-brands-modal__item:hover {
  background: rgba(232,131,0,0.15);
  border-color: rgba(232,131,0,0.4);
}
.ppshop-brands-modal__logo {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 4px;
}
.ppshop-brands-modal__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ppshop-brands-modal__name {
  color: #e0e8ff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body.ppshop-modal-open {
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════
   NAV PANEL TOP BAR (lang + close)
   Hidden by default; JS moves it inside #navbar on mobile.
   ════════════════════════════════════════════════════════ */

/* Always hidden until JS places it inside #navbar */
#ppshop-nav-panel-top {
  display: none;
}

@media (max-width: 992px) {
  /* Show only when correctly inside #navbar */
  #navbar #ppshop-nav-panel-top {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: #161b27;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .ppshop-nav-panel-close {
    margin-left: auto;
    margin-right: 5px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 5px 8px;
    line-height: 1;
    display: flex;
    align-items: center;
  }
  .ppshop-nav-panel-close:hover {
    background: rgba(232,131,0,0.7);
  }
  #masthead #navbar .shoper-navbar-close {
    display: none !important;
  }
  #masthead #navbar {
    padding-top: 0 !important;
  }
  /* Hide topbar lang — shown in nav panel instead */
  .ppshop-lang-topbar {
    display: none !important;
  }
}

/* WordPress admin bar: panel fills full viewport, content padded below admin bar */
html.admin-bar #masthead #navbar {
  top: 0 !important;
  height: 100vh !important;
}
/* Mobile nav panel: full-height dark bg, content pushed below topbar via padding */
@media (max-width: 992px) {
  #masthead #navbar {
    top: 0 !important;
    height: 100vh !important;
    padding-top: 100px !important;   /* topbar height */
  }
  html.admin-bar #masthead #navbar {
    top: 0 !important;
    height: 100vh !important;
    padding-top: 132px !important;   /* 32px admin bar + 100px topbar */
  }
}
@media screen and (max-width: 782px) {
  html.admin-bar #masthead #navbar {
    top: 0 !important;
    height: 100vh !important;
    padding-top: 146px !important;   /* 46px admin bar + 100px topbar */
  }
}
/* ≤767px: topbar is 60px tall */
@media (max-width: 767px) {
  #masthead #navbar {
    top: 0 !important;
    height: 100vh !important;
    padding-top: 60px !important;
  }
  html.admin-bar #masthead #navbar {
    top: 0 !important;
    height: 100vh !important;
    padding-top: 106px !important;   /* 46px admin bar + 60px topbar */
  }
}

/* ════════════════════════════════════════════════════════
   TOPBAR ICONS: ALIGNMENT FIX
   ════════════════════════════════════════════════════════ */

.ppshop-topbar__msgs {
  align-self: center;
  position: relative;
  top: 1px;
}

/* ════════════════════════════════════════════════════════
   SHOP PAGE BRANDS: responsive names visible
   ════════════════════════════════════════════════════════ */

/* 768–900px: slightly larger logos in shop brand cards */
@media (max-width: 900px) {
  .ppshop-shop-brands__item .ppshop-banner-brands__logo img {
    max-height: 88px !important;
    max-width: 130px !important;
  }
  .ppshop-shop-brands__item .ppshop-banner-brands__name {
    font-size: 14px !important;
  }
}

@media (max-width: 767px) {
  .ppshop-shop-brands__list {
    gap: 14px !important;
    padding: 0 12px !important;
  }
  .ppshop-shop-brands__item {
    max-width: calc(50% - 7px) !important;
    min-width: 0 !important;
    width: calc(50% - 7px) !important;
    height: auto !important;
    min-height: 130px;
  }
  .ppshop-shop-brands__item .ppshop-banner-brands__logo img {
    max-height: 72px !important;
    max-width: 110px !important;
  }
  .ppshop-shop-brands__item .ppshop-banner-brands__name {
    display: block !important;
    font-size: 13px !important;
    padding: 6px 4px !important;
  }
}

/* ════════════════════════════════════════════════════════
   CHAT MODAL: MOBILE RESPONSIVE
   ════════════════════════════════════════════════════════ */

.ppshop-chat-modal__back {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #E88300;
  font-size: 14px;
  font-weight: 700;
  padding: 0 10px 0 0;
  gap: 5px;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}
.ppshop-chat-modal__back i {
  font-size: 16px;
}

/* Admin bar: push modal below it + reduce box height accordingly */
html.admin-bar .ppshop-chat-modal {
  top: 32px;
}
html.admin-bar .ppshop-chat-modal__box {
  height: min(620px, calc(90vh - 32px));
  max-height: calc(100vh - 32px - 20px);
}
@media (max-width: 782px) {
  html.admin-bar .ppshop-chat-modal {
    top: 46px;
  }
  html.admin-bar .ppshop-chat-modal__box {
    height: min(620px, calc(90vh - 46px));
    max-height: calc(100vh - 46px - 20px);
  }
}

@media (max-width: 600px) {
  .ppshop-chat-modal__box {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    overflow: hidden;
  }

  /* Thread list: compact strip at top */
  .ppshop-chat-modal__sidebar {
    width: 100% !important;
    flex: 0 0 auto !important;
    max-height: 190px;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #eee;
  }

  /* Chat panel: fills remaining height */
  .ppshop-chat-modal__main {
    display: flex !important;
    width: 100% !important;
    flex: 1 !important;
    flex-direction: column !important;
    min-height: 0;
  }

  /* Both panels always visible regardless of selection state */
  .ppshop-chat-modal__box.ppshop-chat-box--thread-open .ppshop-chat-modal__sidebar {
    display: flex !important;
  }
  .ppshop-chat-modal__box.ppshop-chat-box--thread-open .ppshop-chat-modal__main {
    display: flex !important;
  }

  /* Back button not needed — sidebar is always visible */
  .ppshop-chat-modal__back {
    display: none !important;
  }

  /* Message area fills available space */
  .ppshop-chat-messages#ppshop-chat-modal-msgs {
    max-height: none !important;
    flex: 1;
  }

  .ppshop-chat-compose {
    padding: 10px 12px !important;
  }
}

/* Admin bar + mobile: full-screen modal with white safe-area at top.
   Admin bar (z-index 99999) overlays the white padding; header is visible below it. */
@media (max-width: 600px) {
  html.admin-bar .ppshop-chat-modal {
    top: 0 !important;
  }
  html.admin-bar .ppshop-chat-modal__box {
    padding-top: 46px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    box-sizing: border-box !important;
    background: #fff;
  }
}

/* ════════════════════════════════════════════════════════
   FOOTER: RESPONSIVE AT ≤900px
   ════════════════════════════════════════════════════════ */

@media (min-width: 901px) and (max-width: 991px) {
  .ppshop-footer-info__grid {
    grid-template-columns: 1.6fr 0.9fr 1.2fr !important;
    gap: 20px !important;
  }
  .ppshop-footer-contact {
    flex-direction: column !important;
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .ppshop-footer-info__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .ppshop-footer-contact {
    flex-direction: column !important;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .ppshop-footer-info__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ppshop-footer-newsletter__form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ppshop-footer-newsletter__form input[type="email"],
  .ppshop-footer-newsletter__form button {
    width: 100% !important;
    flex: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   BREADCRUMB BAR — inside content area, above main content
   ════════════════════════════════════════════════════════ */

/* Parent theme sets #content { padding-top: 80px } — remove that gap on non-home pages */
body:not(.home) #content {
  padding-top: 0 !important;
}

.ppshop-breadcrumb-bar {
  padding: 10px 10px 12px;
  margin-top: 0;
  margin-bottom: 18px;
  background: #f0f0f0;
  border-bottom: 1px solid #d0d0d0;
  position: relative;
  z-index: 1;
}
.ppshop-breadcrumb-bar .ppshop-breadcrumbs {
  font-size: 18px;
  color: #444;
  flex-wrap: wrap;
  display: inline-flex;
}
.ppshop-breadcrumb-bar .ppshop-breadcrumbs a {
  color: #444;
}
.ppshop-breadcrumb-bar .ppshop-breadcrumbs a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}
.ppshop-breadcrumb-bar .ppshop-breadcrumbs__sep {
  color: #999;
}

@media (max-width: 750px) {
  .ppshop-breadcrumb-bar {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   NAV PANEL: INLINE LANG BUTTONS (flag + code)
   ════════════════════════════════════════════════════════ */

.ppshop-nav-lang-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

#ppshop-nav-lang-inline {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ppshop-nav-lang-panel__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #c8d4f0;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.ppshop-nav-lang-panel__item:hover {
  background: rgba(232,131,0,0.18);
  border-color: rgba(232,131,0,0.5);
  color: #fff;
  text-decoration: none;
}

.ppshop-nav-lang-panel__item.is-current {
  background: rgba(232,131,0,0.25);
  border-color: rgba(232,131,0,0.7);
  color: #E88300;
}

/* ── Product page: collapsible attribute values ── */
.ppshop-attr-val--collapsed {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  line-clamp: 1 !important;
  overflow: hidden !important;
  margin-bottom: 2px;
}
.ppshop-attr-toggle {
  background: none;
  border: none;
  color: #E88300;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  margin: 0;
  display: block;
  line-height: 1.6;
  letter-spacing: .3px;
}
.ppshop-attr-toggle:hover {
  text-decoration: underline;
  color: #c97200;
}

.ppshop-nav-lang-panel__item img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  /* Same reasoning as .ppshop-lc__flag above — keeps the US flag's star
     canton in frame instead of a centered crop landing on the seam. */
  object-position: left center;
  flex-shrink: 0;
  display: block;
}

/* ── Login page: vertical divider between columns ── */
#customer_login.col2-set {
  display: flex;
  gap: 0;
  align-items: stretch;
}

#customer_login .u-column1 {
  flex: 1;
  padding-right: 40px;
  border-right: 1px solid #e0e0e0;
}

#customer_login .u-column2 {
  flex: 1;
  padding-left: 40px;
}

@media (max-width: 768px) {
  #customer_login.col2-set {
    flex-direction: column;
  }
  #customer_login .u-column1 {
    padding-right: 0;
    padding-bottom: 32px;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
  #customer_login .u-column2 {
    padding-left: 0;
    padding-top: 32px;
  }
}

/* ── Login page: register link ── */
.ppshop-login-register-link {
  margin-top: 16px;
  font-size: 14px;
  color: #555;
}

.ppshop-btn-register {
  display: inline-block;
  margin-left: 6px;
  padding: 6px 16px;
  background: #E88300;
  color: #fff !important;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
}

.ppshop-btn-register:hover {
  background: #c97200;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════
   HOMEPAGE HEADER + BRAND CARDS OVERRIDE
   ════════════════════════════════════════════════════════ */

#masthead .ppshop-topbar,
#masthead #nav_bar_wrap,
#masthead #nav_bar_wrap .container,
#masthead #nav_bar_wrap .ppshop-nav-inner {
  background: #111722 !important;
}

#masthead #nav_bar_wrap .container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#masthead .ppshop-topbar__inner,
#masthead .ppshop-nav-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-inline: clamp(16px, 2.2vw, 40px) !important;
}

#masthead .ppshop-topbar__brand {
  margin-left: 0 !important;
}

#masthead .ppshop-topbar__right {
  margin-right: 0 !important;
}

#masthead .ppshop-nav-inner {
  justify-content: space-between !important;
}

.ppshop-home-banner {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.ppshop-home-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

.ppshop-banner-brands {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 200px));
  justify-content: center;
  gap: clamp(10px, 1.3vw, 18px);
  padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 32px) clamp(12px, 1.6vw, 22px);
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}

.ppshop-banner-brands__item {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 5 / 6;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(17, 23, 34, 0.68) !important;
  border: 1px solid rgba(232, 131, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  text-decoration: none !important;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}

.ppshop-banner-brands__item:hover {
  background: rgba(232, 131, 0, 0.75) !important;
  border-color: rgba(232, 131, 0, 0.95) !important;
  transform: translateY(-3px);
}

.ppshop-banner-brands__logo {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 1.8vw, 24px) clamp(10px, 1.4vw, 18px) 0 !important;
}

.ppshop-banner-brands__logo img {
  width: auto !important;
  height: auto !important;
  max-width: min(150px, 80%) !important;
  max-height: min(112px, 42%) !important;
  object-fit: contain !important;
}

.ppshop-banner-brands__name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 3rem;
  padding: 10px 8px 12px !important;
  background: rgba(0, 0, 0, 0.58) !important;
  color: #fff !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  white-space: normal !important;
}

@media (max-width: 1400px) {
  .ppshop-banner-brands {
    grid-template-columns: repeat(5, minmax(0, 180px));
    gap: 12px;
  }
}

@media (max-width: 1200px) {
  .ppshop-banner-brands {
    grid-template-columns: repeat(4, minmax(0, 180px));
  }
}

@media (max-width: 992px) {
  .ppshop-topbar__inner,
  .ppshop-nav-inner {
    padding-inline: 16px !important;
  }
  .ppshop-banner-brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ppshop-topbar__tagline {
    display: none !important;
  }
  .ppshop-topbar__logo img {
    max-height: 50px !important;
  }
  .ppshop-banner-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 10px 12px;
  }
}

@media (max-width: 480px) {
  .ppshop-banner-brands {
    grid-template-columns: 1fr;
  }
  .ppshop-banner-brands__name {
    font-size: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════
   CATEGORY / ARCHIVE BUTTONS: compact width & padding
   Removes excessive empty space on button sides.
   ════════════════════════════════════════════════════════ */

.ppshop-product-archive ul.products li.product .btn,
.ppshop-cat-section ul.products li.product .btn,
.single-product .related.products ul.products li.product .btn,
.single-product .upsells.products ul.products li.product .btn {
  width: auto !important;
  min-width: 120px !important;
  max-width: 90% !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  align-self: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage CTA — "Pełna konwersja USA → EU"
   ═══════════════════════════════════════════════════════════════════════════ */

.ppshop-banner-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 16px;
  background: #fff;
  border-bottom: 2px solid #e0e0e0;
}

.ppshop-cta-separator {
  display: none;
}

.ppshop-conversion-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 26px 72px;
  background: linear-gradient(135deg, #e63b1f 0%, #b02810 100%);
  color: #fff !important;
  font-family: 'Bebas Neue', 'Comfortaa', sans-serif;
  font-size: 2.1rem;
  letter-spacing: 3px;
  border-radius: 6px;
  text-decoration: none !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.38);
  transition: background .22s, transform .15s, box-shadow .15s;
  white-space: nowrap;
  text-transform: uppercase;
}
.ppshop-conversion-btn:hover,
.ppshop-conversion-btn:focus {
  background: linear-gradient(135deg, #ff4f30 0%, #c42f14 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(0,0,0,.46);
  color: #fff !important;
}
.ppshop-conversion-btn i {
  font-size: 2.4rem;
}

@media (max-width: 768px) {
  .ppshop-conversion-btn {
    font-size: 1.4rem;
    padding: 18px 40px;
    letter-spacing: 2px;
    gap: 12px;
  }
  .ppshop-conversion-btn i {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .ppshop-conversion-btn {
    font-size: 1.1rem;
    padding: 14px 26px;
    letter-spacing: 1.5px;
  }
}

/* ════════════════════════════════════════════════════════════
   Category page tabs — zakładki z sekcjami produktów
   ════════════════════════════════════════════════════════════ */
.ppshop-cat-tabs__nav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ppshop-cat-tab-btn {
  background: transparent;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ppshop-cat-tab-btn:hover { border-color: #E88300; }
.ppshop-cat-tab-btn--active { background: #E88300; border-color: #E88300; color: #fff; }
.ppshop-tab-panel { display: none; }
.ppshop-tab-panel--active { display: block; }
@media (max-width: 600px) {
  .ppshop-cat-tab-btn { padding: 6px 12px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   [ppshop_nowosci] shortcode — siatka produktów PHP
   ════════════════════════════════════════════════════════════ */
ul.ppshop-nowosci-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
ul.ppshop-nowosci-grid.ppshop-cols-4 { grid-template-columns: repeat(4, 1fr); }
ul.ppshop-nowosci-grid.ppshop-cols-3 { grid-template-columns: repeat(3, 1fr); }
ul.ppshop-nowosci-grid.ppshop-cols-6 { grid-template-columns: repeat(6, 1fr); }
ul.ppshop-nowosci-grid li {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
ul.ppshop-nowosci-grid .ppshop-product-thumb {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f4f4;
}
ul.ppshop-nowosci-grid .ppshop-product-thumb img { width: 100%; height: auto; display: block; }
ul.ppshop-nowosci-grid .ppshop-nowosci-title { font-size: .88rem; font-weight: 600; margin: 0; line-height: 1.3; }
ul.ppshop-nowosci-grid .ppshop-nowosci-title a { color: inherit; text-decoration: none; }
ul.ppshop-nowosci-grid .ppshop-nowosci-price { font-size: .85rem; color: #e07b00; font-weight: 600; }
ul.ppshop-nowosci-grid a.button.ppshop-nowosci-btn {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 14px;
  line-height: 1.25;
  min-height: 44px;
  margin-top: auto;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
ul.ppshop-nowosci-grid .ppshop-btn-line1,
ul.ppshop-nowosci-grid .ppshop-btn-line2 { display: block; line-height: 1.25; }
@media (max-width: 900px) {
  ul.ppshop-nowosci-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  ul.ppshop-nowosci-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════
   Zakładki kategorii — poprawki hover/active + sort bar
   ════════════════════════════════════════════════════════════ */

/* Hover: tło pomarańczowe (nadpisuje wcześniejszą regułę) */
.ppshop-cat-tab-btn:hover {
  background: rgba(232,131,0,0.12);
  border-color: #E88300;
  color: #E88300;
}

/* Sort bar — wyrównanie do prawej + odstępy */
.ppshop-section-sort-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.ppshop-section-sort-bar label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: #555;
}
.ppshop-section-sort {
  padding: 5px 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  min-width: 180px;
}

/* Nagłówek sekcji w zakładkach */
.ppshop-cat-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #E88300;
}

/* ════════════════════════════════════════════════════════════
   Karty marek — fix dla średnich rozdzielczości (1100-1440px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
  .ppshop-banner-brands__item { width: 170px; height: 210px; }
  .ppshop-banner-brands__row { gap: 18px; padding: 0 30px; }
}
@media (max-width: 1200px) {
  .ppshop-banner-brands__item { width: 150px; height: 185px; }
  .ppshop-banner-brands__item .ppshop-banner-brands__name { display: block !important; font-size: 12px; }
  .ppshop-banner-brands__row { gap: 12px; padding: 0 16px; }
}

/* ════════════════════════════════════════════════════════════
   Zakładki — czarne przyciski domyślnie, pomarańczowy aktywny
   ════════════════════════════════════════════════════════════ */
.ppshop-cat-tab-btn {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}
.ppshop-cat-tab-btn:hover {
  background: #E88300 !important;
  border-color: #E88300 !important;
  color: #fff !important;
}
.ppshop-cat-tab-btn--active,
.ppshop-cat-tab-btn--active:focus,
.ppshop-cat-tab-btn--active:hover {
  background: #E88300 !important;
  border-color: #E88300 !important;
  color: #fff !important;
  outline: none !important;
}
.ppshop-cat-tab-btn:focus {
  outline: none !important;
}

/* Sort bar label — wyśrodkowanie pionowe z select */
.ppshop-section-sort-bar label {
  align-self: center !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Nagłówek sekcji wewnątrz ppshop-cat-section — wyższy priorytet niż > h2 z theme */
.ppshop-cat-section .ppshop-cat-section-title {
  color: #222 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #E88300 !important;
}

/* ════════════════════════════════════════════════════════
   HOMEPAGE HEADER + BRAND CARDS OVERRIDE
   ════════════════════════════════════════════════════════ */

#masthead .ppshop-topbar,
#masthead #nav_bar_wrap,
#masthead #nav_bar_wrap .container,
#masthead #nav_bar_wrap .ppshop-nav-inner {
  background: #111722 !important;
}

#masthead #nav_bar_wrap .container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#masthead .ppshop-topbar__inner,
#masthead .ppshop-nav-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-inline: clamp(16px, 2.2vw, 40px) !important;
}

#masthead .ppshop-topbar__brand {
  margin-left: 0 !important;
}

#masthead .ppshop-topbar__right {
  margin-right: 0 !important;
}

#masthead .ppshop-nav-inner {
  justify-content: space-between !important;
}

.ppshop-home-banner {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.ppshop-home-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

.ppshop-banner-brands {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 200px));
  justify-content: center;
  gap: clamp(10px, 1.3vw, 18px);
  padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 32px) clamp(12px, 1.6vw, 22px);
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}

.ppshop-banner-brands__item {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 5 / 6;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(17, 23, 34, 0.68) !important;
  border: 1px solid rgba(232, 131, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  text-decoration: none !important;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}

.ppshop-banner-brands__item:hover {
  background: rgba(232, 131, 0, 0.75) !important;
  border-color: rgba(232, 131, 0, 0.95) !important;
  transform: translateY(-3px);
}

.ppshop-banner-brands__logo {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 1.8vw, 24px) clamp(10px, 1.4vw, 18px) 0 !important;
}

.ppshop-banner-brands__logo img {
  width: auto !important;
  height: auto !important;
  max-width: min(150px, 80%) !important;
  max-height: min(112px, 42%) !important;
  object-fit: contain !important;
}

.ppshop-banner-brands__name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 3rem;
  padding: 10px 8px 12px !important;
  background: rgba(0, 0, 0, 0.58) !important;
  color: #fff !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  white-space: normal !important;
}

@media (max-width: 1400px) {
  .ppshop-banner-brands {
    grid-template-columns: repeat(5, minmax(0, 180px));
    gap: 12px;
  }
}

@media (max-width: 1200px) {
  .ppshop-banner-brands {
    grid-template-columns: repeat(4, minmax(0, 180px));
  }
}

@media (max-width: 992px) {
  .ppshop-topbar__inner,
  .ppshop-nav-inner {
    padding-inline: 16px !important;
  }
  .ppshop-banner-brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ppshop-topbar__tagline {
    display: none !important;
  }
  .ppshop-topbar__logo img {
    max-height: 50px !important;
  }
  .ppshop-banner-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 10px 12px;
  }
}

@media (max-width: 480px) {
  .ppshop-banner-brands {
    grid-template-columns: 1fr;
  }
  .ppshop-banner-brands__name {
    font-size: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   BANNER BRAND CARDS — LAYOUT RESET v5
   HTML: .ppshop-banner-brands > p.__heading + div.__row > a.__item
   Goal: single horizontal row, centered in banner, scales at every zoom level
   ══════════════════════════════════════════════════════════════ */

/* 1. Outer wrapper: column flex, vertically centered inside banner */
.ppshop-banner-brands {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, 0.6vw, 10px) !important;
  padding: 0 clamp(14px, 2vw, 48px) !important;
  background: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  grid-template-columns: unset !important;
}

/* 2. Wybierz marke heading */
.ppshop-banner-brands__heading {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: #fff !important;
  font-size: clamp(10px, 1vw, 16px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 3. Row of cards — single horizontal line, no wrap */
.ppshop-banner-brands__row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: clamp(8px, 1.1vw, 20px) !important;
  width: 100% !important;
  max-width: 1440px !important;
  height: clamp(140px, 21vw, 230px) !important;
  box-sizing: border-box !important;
}

/* 4. Individual brand card */
.ppshop-banner-brands__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: clamp(110px, 16vw, 210px) !important;
  width: auto !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  border-radius: clamp(6px, 0.9vw, 14px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
  background: rgba(17, 23, 34, 0.72) !important;
  border: 1px solid rgba(232, 131, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  text-decoration: none !important;
  transition: transform 0.15s, background 0.2s, border-color 0.2s !important;
}

.ppshop-banner-brands__item:hover {
  background: rgba(232, 131, 0, 0.80) !important;
  border-color: rgba(232, 131, 0, 0.95) !important;
  transform: translateY(-4px) !important;
}

/* 5. Logo section */
.ppshop-banner-brands__logo {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(8px, 1.2vw, 18px) clamp(6px, 1vw, 12px) clamp(4px, 0.5vw, 8px) !important;
}

.ppshop-banner-brands__logo img {
  max-height: clamp(50px, 9vw, 115px) !important;
  max-width: 85% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* 6. Name label pinned to bottom of card */
.ppshop-banner-brands__name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  min-height: 0 !important;
  background: rgba(0, 0, 0, 0.62) !important;
  color: #fff !important;
  text-align: center !important;
  padding: clamp(5px, 0.65vw, 9px) 5px !important;
  font-size: clamp(9px, 0.85vw, 13px) !important;
  font-weight: 700 !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
}

/* 7. Mobile (max-width 425px): overlay hidden */
@media (max-width: 425px) {
  .ppshop-banner-brands {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL FIXES v6 — 2026-07-08
   ══════════════════════════════════════════════════════════════ */

/* 1. Remove white bar above header: dark html background everywhere */
html {
  background: #111722 !important;
}

/* Prevent horizontal scrollbar from breakout technique */
body {
  overflow-x: hidden !important;
}

/* 2. Nav bar: full-width dark background on ALL pages (not just homepage) */
#masthead #nav_bar_wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  background: #111722 !important;
  box-sizing: border-box !important;
}

/* 3. Nav inner on non-homepage: center like Bootstrap container */
#masthead .ppshop-nav-inner {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
}

/* 4. Homepage nav inner: override body.home rule — same centering as /sklep/ */
body.home #masthead .ppshop-nav-inner,
body.front-page #masthead .ppshop-nav-inner {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-inline: unset !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 5. Taller cards on homepage banner */
.ppshop-banner-brands__row {
  height: clamp(190px, 29vw, 310px) !important;
}

/* 6. Taller logo images (scales better at high zoom) */
.ppshop-banner-brands__logo img {
  max-height: clamp(80px, 14vw, 175px) !important;
}

/* 7. Taller cards on /sklep/ — explicit height, parent has no height */
.ppshop-shop-brands__item {
  height: clamp(200px, 23vw, 310px) !important;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL FIXES v7 — 2026-07-08
   ══════════════════════════════════════════════════════════════ */

/* 1. WHITE BAR FIX: parent theme adds padding:30px 0 + background:#fff to header */
#masthead.site-header,
header#masthead,
.site-header {
  padding: 0 !important;
  background: #111722 !important;
}

/* 2. PAGE TITLE BAR: dark bg, orange bottom border, centered */
.ppshop-page-title-bar {
  background: #111722 !important;
  padding: 14px 0 16px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 3px solid rgba(232, 131, 0, 0.65) !important;
  box-sizing: border-box !important;
}

/* 3. PAGE TITLE TEXT: white, centered, uppercase */
.ppshop-page-title,
h1.ppshop-page-title,
.page-title-text {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: clamp(14px, 1.7vw, 22px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* 4. BREADCRUMB SEPARATOR: spaces around arrows */
.ppshop-breadcrumbs__sep {
  margin: 0 8px !important;
  color: #bbb !important;
  font-size: 0.85em !important;
}

/* Also: links in breadcrumb get a bit of breathing room */
.ppshop-breadcrumbs a,
.ppshop-breadcrumb-bar .ppshop-breadcrumbs a {
  padding: 0 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL FIXES v8 — 2026-07-08
   ══════════════════════════════════════════════════════════════ */

/* 1. CART SIDEBAR FIX: replace overflow-x:hidden (breaks position:fixed)
      with overflow-x:clip (hides scroll without affecting fixed elements) */
body {
  overflow-x: clip !important;
}

/* Ensure topbar stays above all homepage elements */
#masthead .ppshop-topbar {
  position: relative !important;
  z-index: 20 !important;
}

/* 2. WYBIERZ MARKĘ HEADING: add semi-transparent dark pill container */
.ppshop-banner-brands__heading {
  background: rgba(17, 23, 34, 0.72) !important;
  padding: 5px 20px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(232, 131, 0, 0.35) !important;
  font-size: clamp(11px, 1.1vw, 17px) !important;
}

/* 3. NAV CONTAINER: remove padding so breakout calc is exact (no overflow) */
#masthead .container:has(#nav_bar_wrap) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ══ KONWERSJA WIZARD — complete styles ══════════════════════════════════ */

.ppshop-wizard {
  max-width: 1080px;
  margin: 40px auto 56px;
  padding: 0;
  font-family: inherit;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(17, 23, 34, 0.05), 0 20px 48px -20px rgba(17, 23, 34, 0.18);
  border: 1px solid rgba(17, 23, 34, 0.06);
  position: relative;
  overflow: hidden;
}

.ppshop-wizard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #E88300 0%, #ffb648 50%, #E88300 100%);
}

.ppshop-wizard__header {
  text-align: center;
  padding: 40px 24px 26px;
  border-bottom: 1px solid rgba(17, 23, 34, 0.08);
  margin-bottom: 28px;
  background: linear-gradient(180deg, rgba(232, 131, 0, 0.045) 0%, rgba(232, 131, 0, 0) 100%);
}

.ppshop-wizard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  font-size: 1.7rem;
  color: #E88300;
  background: rgba(232, 131, 0, 0.10);
  border: 1px solid rgba(232, 131, 0, 0.22);
  border-radius: 50%;
}

.ppshop-wizard__title {
  font-size: clamp(18px, 2.2vw, 26px) !important;
  color: #1a2035;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.ppshop-wizard__arrow { color: #E88300; }

.ppshop-wizard__sub {
  color: #666;
  font-size: 15px;
  margin: 0;
  font-weight: 400;
}

.ppshop-wizard__body { padding: 0 24px 32px; }

.ppshop-wizard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 24px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .ppshop-wizard__grid { grid-template-columns: 1fr; }
}

.ppshop-wizard__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ppshop-wizard__label {
  font-size: 12px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ppshop-wizard__select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  color: #1a2035;
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: auto;
  box-sizing: border-box;
}

.ppshop-wizard__select:hover:not(:disabled) {
  border-color: #c9c9c9;
}

.ppshop-wizard__select:focus {
  border-color: #E88300;
  box-shadow: 0 0 0 3px rgba(232, 131, 0, 0.18);
}

.ppshop-wizard__field--locked .ppshop-wizard__select {
  background: #f5f5f7;
  color: #aaa;
  cursor: not-allowed;
  border-color: #e8e8e8;
}

.ppshop-wizard__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: #888;
  font-size: 14px;
}

.ppshop-wizard__spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid #ddd;
  border-top-color: #E88300;
  border-radius: 50%;
  animation: ppwiz-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes ppwiz-spin { to { transform: rotate(360deg); } }

.ppshop-wizard__rok-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: rgba(232, 131, 0, 0.08);
  border-left: 3px solid #E88300;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
}

.ppshop-wizard__result {
  margin-top: 24px;
  border: 1.5px solid rgba(232, 131, 0, 0.40);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 28px -16px rgba(232, 131, 0, 0.35);
}

.ppshop-wizard__result-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  align-items: start;
}

@media (max-width: 1024px) {
  /* Widened from 600px: the fixed "1fr 340px" 2-column split doesn't just
     break below 600px — any container where the left column's own min
     content (the "Podsumowanie wyboru" box, with its checked-item rows) is
     wider than the remaining space also overflows, since a plain 1fr track
     never shrinks below its content's intrinsic minimum. That range extends
     well past 600px on real tablet/small-laptop viewports (confirmed with a
     concrete report + screenshot at ~900px: "Razem (brutto)" cut off,
     rendered beside "Podsumowanie wyboru" instead of above it). Using the
     same known-working single-column stack up to 1024px instead. */
  .ppshop-wizard__result-inner { grid-template-columns: 1fr; }
  .ppshop-wizard__result-product,
  .ppshop-wizard__pricing,
  .ppshop-wizard__field#ppwiz-field-vin,
  .ppshop-wizard__summary,
  .ppshop-wizard__actions {
    grid-column: 1 !important;
  }
  /* .ppshop-wizard__pricing's base rule below hard-codes width:340px to
     match the desktop grid's 2nd column track exactly — on mobile the grid
     collapses to a single 1fr column, but that fixed 340px was never
     overridden, so on any viewport narrower than ~340px + the wizard's own
     side padding the box (and the prices inside it, e.g. "Razem (brutto)")
     stuck out past the edge of the screen instead of shrinking to fit. */
  .ppshop-wizard__pricing {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* Fixed placement so the split never shifts width when extras/checkboxes
   change what's rendered inside the pricing column — only heights change. */
.ppshop-wizard__result-product { grid-column: 1; grid-row: 1; }
.ppshop-wizard__pricing        { grid-column: 2; grid-row: 1; }
.ppshop-wizard__field#ppwiz-field-vin { grid-column: 1; }
.ppshop-wizard__summary        { grid-column: 1; }
.ppshop-wizard__actions        { grid-column: 1 / -1; }

.ppshop-wizard__result-product {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
}

.ppshop-wizard__result-img img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.ppshop-wizard__result-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a2035 !important;
  margin: 0 0 8px !important;
}

.ppshop-wizard__result-attrs {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.ppwiz-attr-line {
  display: block;
}

.ppshop-wizard__pricing {
  width: 340px;
  background: #f8f8fa;
  border-left: 1px solid #ececec;
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ppshop-wizard__pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #555;
  gap: 12px;
}

.ppshop-wizard__pricing-total {
  font-size: 16px;
  font-weight: 700;
  color: #1a2035;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
}
.ppshop-wizard__pricing-total:only-child {
  padding-top: 0;
  border-top: none;
}

.ppshop-wizard__checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: #333;
}

.ppshop-wizard__checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #E88300;
  cursor: pointer;
  flex-shrink: 0;
}

.ppshop-wizard__price-add {
  color: #E88300;
  font-weight: 600;
  margin-left: 4px;
}

.ppshop-wizard__actions {
  padding: 0 24px 20px;
  text-align: center;
}

.ppshop-wizard__btn-cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #f0932a 0%, #E88300 100%);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  padding: 13px 32px;
  border: none;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(232, 131, 0, 0.55);
}
.ppshop-wizard__btn-cart:disabled {
  opacity: 0.65;
  cursor: default;
  transform: none !important;
  box-shadow: none;
}

.ppshop-wizard__btn-cart:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff9d33 0%, #d47600 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(232, 131, 0, 0.65);
}

.ppshop-wizard__error {
  color: #c0392b;
  background: #fdf0ef;
  border: 1px solid #f5c6c2;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 14px;
}

.ppshop-wizard__clear-row {
  padding: 20px 24px 0;
  text-align: right;
}

.ppshop-wizard__btn-clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #888;
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  padding: 7px 16px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.ppshop-wizard__btn-clear:hover {
  color: #c0392b;
  border-color: #f5c6c2;
}

.ppshop-wizard__no-result {
  text-align: center;
  color: #888;
  padding: 24px;
  font-size: 15px;
}

/* A checked-out extra that only exists to show it's coming (e.g. "Kodowanie
   tył" before it's purchasable): grayed out, not interactive, no price. */
.ppshop-wizard__checkbox-label--disabled {
  cursor: not-allowed;
  color: #999;
}
.ppshop-wizard__checkbox-label--disabled input[type="checkbox"] {
  cursor: not-allowed;
}
.ppshop-wizard__unavailable-note {
  margin: 2px 0 0 26px;
  color: #999;
  font-size: .85em;
  font-style: italic;
}

/* ── Gentle reveal for anything that toggles via the [hidden] attribute —
   replays automatically whenever the browser flips display:none → block,
   no JS changes needed. ── */
@keyframes ppwiz-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ppshop-wizard__sections:not([hidden]),
.ppshop-wizard__section-body:not([hidden]),
.ppshop-wizard__result:not([hidden]),
.ppshop-wizard__rok-info:not([hidden]),
.ppshop-wizard__lamp-info:not([hidden]),
.ppshop-wizard__pricing-row:not([hidden]),
.ppshop-wizard__field:not([hidden]),
.ppshop-wizard__summary:not([hidden]) {
  animation: ppwiz-reveal 0.28s ease both;
}

.ppshop-wizard__section {
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ppshop-wizard__section:has(.ppshop-wizard__section-toggle input:checked) {
  border-color: rgba(232, 131, 0, 0.35);
  box-shadow: 0 4px 14px -8px rgba(232, 131, 0, 0.30);
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL FIXES v9 — 2026-07-08
   ══════════════════════════════════════════════════════════════ */

/* 1. "WYBIERZ MARKĘ" heading: pill container, not full-width */
.ppshop-banner-brands__heading {
  display: inline-block !important;
  width: auto !important;
  align-self: center !important;
  font-size: clamp(14px, 1.45vw, 20px) !important;
}

/* 2. Remove topbar stacking context (was blocking cart sidebar on homepage) */
#masthead .ppshop-topbar {
  position: static !important;
  z-index: auto !important;
}

/* 3. Wizard lamp info: same style as rok-info */
.ppshop-wizard__lamp-info {
  display: flex;
  align-items: center;
  gap: 8px;
  /* margin-top matters here specifically: this box now sits inside the
     Konwersja lamp tylnych flow, right after the kierunkowskaz <select> —
     during the brief window before the rear-price AJAX response fills in
     the price row/Instalacja elektryczna block above it, this box is the
     very next visible element with nothing else to create a gap, so it sat
     flush against the select with no breathing room at all. */
  margin-top: 12px;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: rgba(232, 131, 0, 0.08);
  border-left: 3px solid #E88300;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
}
/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v10 – 2026-07-08
   ═══════════════════════════════════════════════════════════════ */

/* Nav menu: add spacing between items so they don't run together */
#nav_bar_wrap ul.menu {
  gap: 6px !important;
}
#nav_bar_wrap ul.menu > li > a {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v10 – 2026-07-08
   ═══════════════════════════════════════════════════════════════ */

/* 1. Nav gap: extra right margin only on the injected Pelna Konwersja item */
li.ppshop-konwersja-nav-item {
  margin-right: 12px !important;
}

/* 2. CTA button inside banner – positioned below brand cards */
.ppshop-home-banner .ppshop-banner-cta {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: max-content;
}

/* Shift brand cards up slightly to leave room for the button */
.ppshop-banner-brands {
  bottom: 58px !important;
}

/* 3. /moje-konto/orders – force proper table display */
table.woocommerce-orders-table td,
table.woocommerce-orders-table th {
  display: table-cell !important;
  text-align: left;
  padding: 10px 12px !important;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
}
table.woocommerce-orders-table thead th {
  background: rgba(255,255,255,0.05);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table.woocommerce-orders-table td::before {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v11 – 2026-07-08
   ═══════════════════════════════════════════════════════════════ */

/* 1. Orders table – override parent theme's shop_table_responsive block display */
body.woocommerce-account table.woocommerce-MyAccount-orders {
  display: table !important;
  width: 100% !important;
}
body.woocommerce-account table.woocommerce-MyAccount-orders thead {
  display: table-header-group !important;
}
body.woocommerce-account table.woocommerce-MyAccount-orders tbody tr {
  display: table-row !important;
}
body.woocommerce-account table.woocommerce-MyAccount-orders tr td,
body.woocommerce-account table.woocommerce-MyAccount-orders tr th {
  display: table-cell !important;
  text-align: left !important;
  clear: none !important;
  padding: 10px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #ddd;
}
body.woocommerce-account table.woocommerce-MyAccount-orders tr td::before {
  display: none !important;
  content: none !important;
}

/* 2. Banner CTA: center between brand cards and bottom edge */
.ppshop-banner-brands {
  bottom: 80px !important;
}
.ppshop-home-banner .ppshop-banner-cta {
  bottom: 15px !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v12 – 2026-07-10
   ═══════════════════════════════════════════════════════════════ */

/* Banner CTA: raise it a bit so it sits clear of the banner's bottom edge,
   between the bottom border of the banner and the brand cards above it. */
.ppshop-home-banner .ppshop-banner-cta {
  bottom: 60px !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v13 – 2026-07-10
   ═══════════════════════════════════════════════════════════════ */

/* 1. /moje-konto/orders/ — the theme's own woocommerce/myaccount/orders.php
   override renders a div-based card per order (.ppshop-order-card), not a
   <table>. It shipped with no matching CSS, so every card fell back to
   plain stacked block elements. This lays each card out as a 2-column grid
   (number/status, date/total, then a full-width actions row). */
.ppshop-orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ppshop-order-card {
  display: grid;
  grid-template-areas:
    "num    status"
    "date   total"
    "actions actions";
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-left: 4px solid #E88300;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 5px rgba(0,0,0,.07);
  padding: 14px 16px 12px;
}
.ppshop-ocard__num {
  grid-area: num;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  align-self: center;
}
.ppshop-ocard__date {
  grid-area: date;
  font-size: 12px;
  color: #999;
  align-self: center;
}
.ppshop-ocard__status {
  grid-area: status;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  text-align: right;
  align-self: center;
}
.ppshop-ocard__total {
  grid-area: total;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: right;
  align-self: center;
}
.ppshop-ocard__actions {
  grid-area: actions;
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.ppshop-order-card--status-completed  .ppshop-ocard__status { color: #2e7d32; }
.ppshop-order-card--status-processing .ppshop-ocard__status { color: #E88300; }
.ppshop-order-card--status-on-hold    .ppshop-ocard__status { color: #b45309; }
.ppshop-order-card--status-cancelled  .ppshop-ocard__status { color: #c62828; }
.ppshop-order-card--status-refunded   .ppshop-ocard__status { color: #6d4c41; }
.ppshop-ocard__actions .button,
.ppshop-ocard__actions a.button { font-size: 13px; padding: 7px 18px; }

/* 2. Footer "Informacje" links — drop the parent theme's generic
   "#colophon.site-footer li" underline bleeding into this custom list. */
#colophon.site-footer .ppshop-footer-links__list li {
  border-bottom: none !important;
}

/* 3. /sklep/ category cards — slightly larger category name text. */
.ppshop-shop-brands__item .ppshop-banner-brands__name {
  font-size: clamp(11px, 1vw, 15px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v14 – 2026-07-10
   ═══════════════════════════════════════════════════════════════ */

/* /kategoria-produktu/* — widen the container (default .container caps at
   1600px) so the tab menu wraps less and product cards have more room. */
.ppshop-product-archive {
  max-width: 1800px !important;
  padding-left: 3% !important;
  padding-right: 3% !important;
}

/* Large screens: fit a 5th product column instead of stretching 4 cards. */
@media (min-width: 1600px) {
  .ppshop-product-archive ul.products {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* Breadcrumb bar sits above .ppshop-product-archive and shares the same
   .container class — match its width so the two don't look misaligned. */
.ppshop-breadcrumb-bar {
  max-width: 1800px !important;
  padding-left: 3% !important;
  padding-right: 3% !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v15 – 2026-07-10
   ═══════════════════════════════════════════════════════════════ */

/* /koszyk/ empty state — swap WooCommerce Blocks' default "sad face" mask
   icon for the site's own cart glyph (matches the header/floating cart icon). */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: none !important;
  font-family: 'IcoFont' !important;
  content: "\eed1" !important;
  display: block;
  height: auto !important;
  width: auto !important;
  font-size: 4.5em;
  line-height: 1;
  margin: 0 auto 0.25em !important;
  color: #E88300;
}

/* Cart/checkout step indicator (1-2-3) — the parent theme's ".ff-steps" has
   gap:0, so the connecting line touches the circle with no breathing room.
   This is most visible on "done"/"active" circles, whose glow (box-shadow)
   bleeds further out than a plain circle's border, eating into the gap and
   making the line look like it's touching it. Give every line generous,
   uniform clearance from BOTH the circle before and after it. */
.ff-steps {
  gap: 20px !important;
}
/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v16 – 2026-07-13
   ═══════════════════════════════════════════════════════════════ */

/* 1. Homepage CTA — drop the leftover "white line" (border-bottom from the
   original non-absolute .ppshop-banner-cta) under the "PEŁNA KONWERSJA"
   button. Applies on every screen size, incl. desktop. */
.ppshop-home-banner .ppshop-banner-cta {
  border: none !important;
}

/* 2. Homepage on mobile — JS (shopper-shoppable.js) moves .ppshop-banner-cta
   out from inside .ppshop-home-banner (which has dark top/bottom gradient
   overlays) to right below it. This styles it once it's there. */
@media (max-width: 767px) {
  .ppshop-home-banner + .ppshop-banner-cta {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: center !important;
    background: #fff !important;
  }
}

/* 3. /sklep/ category cards on mobile — 3 per row instead of 2, and closer
   to square (less empty space above/below the logo) instead of a fixed
   200px-tall card regardless of width. */
@media (max-width: 767px) {
  .ppshop-shop-brands__list {
    gap: 10px !important;
  }
  .ppshop-shop-brands__item {
    max-width: calc(33.333% - 7px) !important;
    width: calc(33.333% - 7px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
  }
  .ppshop-shop-brands__item .ppshop-banner-brands__logo img {
    max-height: 55px !important;
    max-width: 70px !important;
  }
  .ppshop-shop-brands__item .ppshop-banner-brands__name {
    font-size: 11px !important;
    padding: 4px 3px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v17 – 2026-07-13
   Homepage: trust cards / Nowości / dark contact CTA + modal
   ═══════════════════════════════════════════════════════════════ */

/* ── scroll-reveal utility ── */
.ppshop-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.ppshop-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Trust cards ── */
.ppshop-home-trust {
  max-width: 1180px;
  margin: 56px auto;
  padding: 0 20px;
}
@media (min-width: 1400px) {
  .ppshop-home-trust {
    max-width: 1320px;
  }
}
.ppshop-home-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ppshop-home-trust__card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  padding: 32px 28px;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  /* Grid items default to min-width:auto — i.e. never narrower than their
     OWN content's intrinsic width — so a card's text (and the icon+heading
     row) could force its 1fr track wider than the column actually had
     room for, instead of wrapping, pushing the last card(s) out past the
     edge of the viewport at "laptop" widths (~700–950px) where 3 columns
     is technically still active but genuinely too narrow. This lets the
     card shrink to the track's real width and wrap normally instead. */
  min-width: 0;
}
.ppshop-home-trust__card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,.14);
  border-color: rgba(232,131,0,.4);
}
.ppshop-home-trust__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ppshop-home-trust__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(232,131,0,.12);
  color: #E88300;
  font-size: 23px;
}
.ppshop-home-trust__card h3 {
  margin: 0 !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.25 !important;
}
.ppshop-home-trust__card p {
  margin: 0 0 14px !important;
  font-size: 16.5px !important;
  line-height: 168% !important;
  color: #555 !important;
}
.ppshop-home-trust__card p:last-child {
  margin-bottom: 0;
}

/* ── Nowości (full-bleed dark) ── */
.ppshop-home-news {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #0b0d12;
  padding: 64px 20px;
}
.ppshop-home-news__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.ppshop-home-news__heading {
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 40px;
}
.ppshop-home-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ppshop-home-news__card {
  display: block;
  background: #111722;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ppshop-home-news__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  border-color: rgba(232,131,0,.5);
}
.ppshop-home-news__card-img {
  aspect-ratio: 4 / 3;
  background: #0b0d12;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ppshop-home-news__card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ppshop-home-news__card-body {
  padding: 18px 20px 22px;
}
.ppshop-home-news__card-body h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #e0e8ff;
}
.ppshop-home-news__price {
  color: #E88300;
  font-weight: 700;
  font-size: 15px;
}
.ppshop-home-news__more {
  text-align: center;
  margin-top: 40px;
}
.ppshop-home-news__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  background: linear-gradient(135deg, #e63b1f 0%, #b02810 100%);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ppshop-home-news__more-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* ── CTA / kontakt (full-bleed dark) ── */
.ppshop-home-cta {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #05070a;
  padding: 72px 20px;
  text-align: center;
}
.ppshop-home-cta__inner h2 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 12px;
}
.ppshop-home-cta__inner p {
  color: rgba(255,255,255,.65);
  font-size: 16px;
  margin: 0 0 30px;
}
.ppshop-home-cta__write-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 46px;
  background: #E88300;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 20px rgba(232,131,0,.35);
}
.ppshop-home-cta__write-btn:hover {
  background: #ff9614;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(232,131,0,.5);
}

/* ── Contact modal (reuses .ppshop-brands-modal open/close mechanics) ── */
.ppshop-home-contact-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.ppshop-home-contact-modal.is-open {
  display: flex;
}
.ppshop-home-contact-modal__backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.68);
}
.ppshop-home-contact-modal__panel {
  position: relative;
  background: #fff;
  width: min(520px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 10px;
  border-top: 4px solid #E88300;
  padding: 32px 28px 30px;
  z-index: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ppshop-home-contact-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,.06);
  border: none;
  border-radius: 8px;
  color: #333;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1.4;
}
.ppshop-home-contact-modal__close:hover {
  background: rgba(232,131,0,.15);
}
.ppshop-home-contact-modal__heading {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
  color: #1a1a1a;
  padding-right: 30px;
}
.ppshop-home-contact-modal__subheading {
  margin: 0 0 22px;
  color: #666;
  font-size: 13.5px;
  line-height: 160%;
}
.ppshop-home-contact-modal__notice {
  display: none;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 155%;
}
.ppshop-home-contact-modal__notice--success {
  background: #f0faf0;
  border: 1px solid #b2e0b2;
  border-left: 4px solid #3dae3d;
  color: #1e6e1e;
}
.ppshop-home-contact-modal__notice--error {
  background: #fff5f5;
  border: 1px solid #f5b5b5;
  border-left: 4px solid #d63e3e;
  color: #922020;
}
.ppshop-home-contact-modal__notice--error a { color: #E88300; }
.ppshop-home-contact-modal__field {
  margin-bottom: 16px;
}
.ppshop-home-contact-modal__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ppshop-home-contact-modal__field input,
.ppshop-home-contact-modal__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 13px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14.5px;
  color: #333;
  background: #fff;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.ppshop-home-contact-modal__field input:focus,
.ppshop-home-contact-modal__field textarea:focus {
  border-color: #E88300;
}
.ppshop-home-contact-modal__field input[readonly] {
  background: #f7f7f7;
  border-color: #d0d0d0;
}
.ppshop-home-contact-modal__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #E88300;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 12px 30px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.ppshop-home-contact-modal__submit:hover {
  background: #ff9614;
}
.ppshop-home-contact-modal__spinner {
  display: none;
  margin-left: 10px;
  font-size: 13px;
  color: #888;
  vertical-align: middle;
}
body.ppshop-modal-open {
  overflow: hidden;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .ppshop-home-trust__grid,
  .ppshop-home-news__grid {
    grid-template-columns: 1fr;
  }
  .ppshop-home-news__heading,
  .ppshop-home-cta__inner h2 {
    font-size: 23px;
  }
}
/* ── Tablet / small laptop: 3 fixed columns is too narrow here (the mobile
   single-column rule above only kicks in below 768px) — 2 columns gives
   each card enough room to wrap normally instead of overflowing. ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .ppshop-home-trust__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v18 – 2026-07-13
   Homepage: brand strip, CTA polish, WYBIERZ MARKĘ pill sizing
   ═══════════════════════════════════════════════════════════════ */

/* ── Premium brand strip (under the trust cards) ── */
.ppshop-home-brandstrip {
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 70px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(232,131,0,.14) 0%, rgba(232,131,0,0) 70%),
    linear-gradient(180deg, #f4f5f7 0%, #ffffff 100%);
}
.ppshop-home-brandstrip__label {
  margin: 0 0 40px;
  color: #888;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.ppshop-home-brandstrip__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 90px;
  position: relative;
  z-index: 1;
}
.ppshop-home-brandstrip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.ppshop-home-brandstrip__item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-6px) scale(1.05);
}
.ppshop-home-brandstrip__item img {
  max-height: 150px;
  max-width: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .ppshop-home-brandstrip { padding: 44px 20px; }
  .ppshop-home-brandstrip__row { gap: 36px; }
  .ppshop-home-brandstrip__item img { max-height: 70px; max-width: 160px; }
}
/* ── Tablet / small laptop — the base 150px/320px logo size (tuned for
   wide desktop screens) had no intermediate step down to the 600px-and-
   below mobile size, so this whole range showed oversized logos that
   barely fit 2 per row with a lot of wasted space. ── */
@media (min-width: 601px) and (max-width: 1024px) {
  .ppshop-home-brandstrip__row { gap: 48px; }
  .ppshop-home-brandstrip__item img { max-height: 100px; max-width: 220px; }
}

/* ── Compact variant — /konwersja-usa-eu/, ~30% smaller than the homepage
   version (which stays untouched at its own default size above). A
   modifier class on the same .ppshop-home-brandstrip section (see
   ppshop_render_brand_strip()'s $extra_class param), not a separate
   component, so both stay visually/structurally identical apart from
   scale. ── */
.ppshop-home-brandstrip.ppshop-home-brandstrip--compact {
  margin-bottom: 44px;
  padding: 49px 20px;
}
.ppshop-home-brandstrip--compact .ppshop-home-brandstrip__label {
  margin-bottom: 28px;
  font-size: 12px;
}
.ppshop-home-brandstrip--compact .ppshop-home-brandstrip__row {
  gap: 63px;
}
.ppshop-home-brandstrip--compact .ppshop-home-brandstrip__item img {
  max-height: 105px;
  max-width: 224px;
}
@media (max-width: 600px) {
  .ppshop-home-brandstrip--compact { padding: 31px 14px; }
  .ppshop-home-brandstrip--compact .ppshop-home-brandstrip__row { gap: 25px; }
  .ppshop-home-brandstrip--compact .ppshop-home-brandstrip__item img { max-height: 49px; max-width: 112px; }
}

/* ── CTA: matching thin white divider bars above AND below (the parent theme's
   #content adds ~80px of its own padding-bottom on the home page, which made
   the gap after this section much taller than the one before it — killed here
   so both edges get the same thin 6px white line instead). ── */
.ppshop-home-cta {
  border-top: 24px solid #fff;
  border-bottom: 24px solid #fff;
}
body.home #content {
  padding-bottom: 0 !important;
}

/* ── CTA "Napisz" button: readable text on hover (was white-on-light-orange) ── */
.ppshop-home-cta__write-btn:hover {
  color: #1a1a1a;
}

/* ── "WYBIERZ MARKĘ" pill on the homepage banner: narrower, taller, more opaque ── */
.ppshop-banner-brands__heading {
  padding: 10px 14px !important;
  background: rgba(17, 23, 34, 0.9) !important;
  font-size: clamp(15px, 1.6vw, 22px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v20 – 2026-07-13
   Mini-cart side panel: category logo badge, addon divider, polish
   ═══════════════════════════════════════════════════════════════ */
.ppshop-cart-panel__thumb {
  position: relative;
}

.ppshop-cart-panel__meta-line {
  font-size: 11px !important;
  color: #888 !important;
  line-height: 1.6;
}
.ppshop-cart-panel__meta-line strong {
  font-weight: 600 !important;
  color: #666 !important;
}
.ppshop-cart-panel__meta-line--addon strong {
  color: #E88300 !important;
}
.ppshop-cart-panel__meta-divider {
  border-top: 1px dashed #e5e5e5;
  margin: 5px 0;
}

.ppshop-cart-panel__remove {
  font-size: 19px !important;
  padding: 5px 7px !important;
  color: #bbb;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s, transform 0.1s;
}
.ppshop-cart-panel__remove:hover {
  color: #e53935;
  background: #fdeceb;
  transform: scale(1.08);
}

/* Subtle hover "lift" on each cart panel item — a bit more visual life */
.ppshop-cart-panel__item {
  border-radius: 8px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
  transition: background 0.15s, box-shadow 0.15s;
}
.ppshop-cart-panel__item:hover {
  background: #fafbfd;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.ppshop-cart-panel__thumb img {
  transition: transform 0.2s ease;
}
.ppshop-cart-panel__item:hover .ppshop-cart-panel__thumb img {
  transform: scale(1.06);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v21 – 2026-07-13 (rev. 2 — corrected to the real block
   markup: .wp-block-woocommerce-checkout-fields-block (left, the form)
   and .wp-block-woocommerce-checkout-totals-block (right, the summary)
   are the two actual direct children — the earlier .wc-block-checkout__
   main/sidebar guess didn't match anything on this WC Blocks version.)
   ═══════════════════════════════════════════════════════════════ */
body.woocommerce-checkout .content-wrap,
body.woocommerce-cart .content-wrap {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The real bottleneck: #primary is a Bootstrap .container (max 1140px) and
   the article sits in a .col-md-10.offset-md-1 column (~83% of that) — so
   .content-wrap's own max-width above never had room to matter. Free up
   the actual ancestor chain first, scoped to checkout/cart only. */
body.woocommerce-checkout #primary.container,
body.woocommerce-cart #primary.container {
  max-width: 1700px !important;
}
body.woocommerce-checkout .bcf-main-content,
body.woocommerce-cart .bcf-main-content {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

.wp-block-woocommerce-checkout.wc-block-checkout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 64px;
  align-items: flex-start !important;
}

.wp-block-woocommerce-checkout-fields-block {
  flex: 1 1 38% !important;
  min-width: 320px !important;
}

.wp-block-woocommerce-checkout-totals-block {
  flex: 0 0 640px !important;
  max-width: 640px !important;
  min-width: 320px !important;
  background: #fff !important;
  border: 1px solid #ebebeb !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.08) !important;
}
/* The -40px pull only makes sense next to the 38%-wide form column on the
   desktop 2-column layout below — at ≤900px both blocks go full-width (see
   the @media block right after this one), so the same negative margin was
   silently eating 40px off the right edge of an already-100%-wide box on
   every laptop/tablet/mobile width, squeezing the order-summary item's
   image+name+price row far narrower than the viewport actually allowed. */
@media (min-width: 901px) {
  .wp-block-woocommerce-checkout-totals-block {
    margin-right: -40px !important;
  }
}

.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item .wc-block-components-product-name {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Narrow the form fields themselves (not just their column) — email,
   the address card, and both radio-choice groups (shipping + payment)
   were still stretching edge to edge across the fields column. Moved to a
   ≥901px-guarded rule further down this file (search "6b.") — unguarded,
   this squeezed an already-narrow single-column mobile layout even
   further for no reason, which is what was cramming checkbox/radio labels
   into far less width than the screen actually had. */

@media (max-width: 900px) {
  .wp-block-woocommerce-checkout-fields-block,
  .wp-block-woocommerce-checkout-totals-block {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* GLOBAL FIXES v22 — reverted: the guessed .wc-block-cart-item__remove-link
   class shrank the real remove control down to a barely-visible dot instead
   of enlarging it, without being verifiable (React-rendered cart items can't
   be inspected via a plain HTML fetch). Removed rather than guess again. */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v23 – 2026-07-13
   "Aktualności" (Nowości jako wpisy): homepage card date/excerpt,
   /aktualnosci/ listing page, admin add/edit modal.
   ═══════════════════════════════════════════════════════════════ */

/* ── Homepage "Nowości" cards: new date/excerpt sub-elements ── */
.ppshop-home-news__date {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.ppshop-home-news__excerpt {
  margin: 0;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── /aktualnosci/ listing page ── */
.ppshop-news-page {
  max-width: 1640px;
  margin: 0 auto 60px;
  padding: 40px 20px 0;
}
.ppshop-news-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.ppshop-news-page__header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.ppshop-news-page__header p {
  color: #666;
  margin: 0;
}
.ppshop-news-page__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 1200px) {
  .ppshop-news-page__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ppshop-news-page__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #888;
  padding: 40px 0;
}
.ppshop-news-page__card-wrap {
  position: relative;
  height: 100%;
}
.ppshop-news-page__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0b0d12;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ppshop-news-page__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  border-color: rgba(232,131,0,.5);
}
.ppshop-news-page__card-img {
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  background: #171b24;
  overflow: hidden;
}
.ppshop-news-page__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.ppshop-news-page__card:hover .ppshop-news-page__card-img img {
  transform: scale(1.08);
}
.ppshop-news-page__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 24px;
}
.ppshop-news-page__date {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.ppshop-news-page__card-body h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ppshop-news-page__card-body p {
  margin: 0;
  flex: 1;
  color: rgba(255,255,255,.6);
  font-size: 14px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Admin: per-card edit button ── */
.ppshop-news-card__edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,13,18,.82);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.ppshop-news-card__edit-btn:hover {
  background: #E88300;
  transform: scale(1.08);
}

.ppshop-news-card__delete-btn {
  position: absolute;
  top: 10px;
  right: 52px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,13,18,.82);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.ppshop-news-card__delete-btn:hover {
  background: #d0342c;
  transform: scale(1.08);
}
.ppshop-news-card__delete-btn:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
}

/* ── Admin: "+ Dodaj wpis" button, next to the "Aktualności" heading ── */
.ppshop-news-admin-fab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #E88300;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(232,131,0,.35);
  transition: background .15s, transform .15s;
}
.ppshop-news-admin-fab:hover {
  background: #d47600;
  transform: translateY(-3px);
}

/* ── Admin modal: image picker ── */
.ppshop-news-modal__image-picker {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ppshop-news-modal__image-preview {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  background: #f2f2f2;
  border: 1px solid #e5e5e5;
  flex-shrink: 0;
}
.ppshop-news-modal__image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ppshop-news-modal__image-btn {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: background .15s;
}
.ppshop-news-modal__image-btn:hover {
  background: #e8e8e8;
}
.ppshop-news-modal__panel textarea#ppshop-news-content {
  min-height: 120px;
}

/* ── "Edytuj wpis" modal — wider panel, large main-image preview at top,
   small selectable thumbnails ("Galeria zdjęć") lower down with a corner
   "×" instead of a big button underneath. ── */
.ppshop-news-modal__panel {
  width: min(880px, 95vw);
}
.ppshop-news-modal__main-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  border: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppshop-news-modal__main-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ppshop-news-modal__main-preview-empty {
  color: #999;
  font-size: 14px;
}
.ppshop-news-modal__gallery-heading {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1a2035;
}
.ppshop-news-modal__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.ppshop-news-gallery__item {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: #f2f2f2;
  border: 2px solid #e5e5e5;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s;
}
.ppshop-news-gallery__item:hover {
  border-color: #cfcfcf;
}
.ppshop-news-gallery__item.is-main {
  border-color: #E88300;
  box-shadow: 0 0 0 2px rgba(232, 131, 0, .18);
}
.ppshop-news-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ppshop-news-gallery__remove-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(17, 23, 34, .68);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.ppshop-news-gallery__remove-btn:hover {
  background: #c0392b;
}
@media (max-width: 600px) {
  .ppshop-news-modal__panel { width: min(560px, 95vw); }
}

@media (max-width: 900px) {
  .ppshop-news-page__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .ppshop-news-page__grid {
    grid-template-columns: 1fr;
  }
  .ppshop-news-page__header {
    flex-direction: column;
    align-items: stretch;
  }
  .ppshop-news-admin-fab {
    justify-content: center;
    padding: 12px 18px;
  }
}

/* ── Single "Aktualności" post: image left, date/title/content right ── */
.ppshop-news-single {
  max-width: 1320px;
  margin: 0 auto 60px;
  padding: 20px 20px 0;
}
.ppshop-news-single__grid {
  display: flex;
  align-items: flex-start;
  gap: 44px;
  margin-bottom: 56px;
}
.ppshop-news-single__img-col {
  flex: 0 0 44%;
  max-width: 44%;
}
.ppshop-news-single__img {
  border-radius: 12px;
  overflow: hidden;
  background: #171b24;
}
.ppshop-news-single__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ppshop-news-single__img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #171b24;
}
/* ── Extra gallery thumbnails below the main image — a horizontally
   scrolling row (roughly 4 visible at a time, more via the arrows), not
   the plain stacked list this defaulted to (each thumbnail is an <a>, and
   the plain ".ppshop-news-single__img img { width:100% }" rule above made
   every one of them full-width with no explicit sizing on the <a> itself,
   so as flex children they fought over space unpredictably instead of
   forming a clean row — fixed pixel sizing on each item's own bordered
   "container" avoids that ambiguity entirely). Arrows only render
   server-side when there are more than 4. ── */
.ppshop-news-single__gallery-box {
  margin-top: 18px;
}
.ppshop-news-single__gallery-heading {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 14px;
}
.ppshop-news-single__gallery-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ppshop-news-single__gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.ppshop-news-single__gallery::-webkit-scrollbar {
  display: none;
}
.ppshop-news-single__gallery-item {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  border: 1px solid #e5e5e5;
}
.ppshop-news-single__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ppshop-news-single__gallery-arrow {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
  padding: 0;
}
.ppshop-news-single__gallery-arrow:hover {
  background: #f5f5f5;
  border-color: #ccc;
}
.ppshop-news-single__content {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.ppshop-news-single__date {
  display: block;
  color: #888;
  font-size: 13px;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.ppshop-news-single__title-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.ppshop-news-single__title-row h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.25;
}
.ppshop-news-single__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ppshop-news-single__edit-btn,
.ppshop-news-single__delete-btn {
  position: static !important;
  flex-shrink: 0;
  background: #f2f2f2 !important;
  border: 1px solid #ddd !important;
  color: #333 !important;
}
.ppshop-news-single__edit-btn:hover {
  background: #E88300 !important;
  color: #fff !important;
}
.ppshop-news-single__delete-btn:hover {
  background: #d0342c !important;
  border-color: #d0342c !important;
  color: #fff !important;
}
.ppshop-news-single__delete-btn:disabled {
  opacity: .5;
  cursor: default;
}
.ppshop-news-single__body {
  color: #444;
  font-size: 15.5px;
  line-height: 1.75;
}
.ppshop-news-single__body p {
  margin: 0 0 16px;
}

/* ── Related posts (replaces "Previous Article" prev/next nav) ── */
.ppshop-news-single__related h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 24px;
}
.ppshop-news-single__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ppshop-news-single__related-card {
  display: flex;
  flex-direction: column;
  background: #0b0d12;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ppshop-news-single__related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.22);
  border-color: rgba(232,131,0,.5);
}
.ppshop-news-single__related-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #171b24;
}
.ppshop-news-single__related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.ppshop-news-single__related-card:hover .ppshop-news-single__related-img img {
  transform: scale(1.08);
}
.ppshop-news-single__related-body {
  padding: 14px 16px 18px;
}
.ppshop-news-single__related-body span {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: 11.5px;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.ppshop-news-single__related-body h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .ppshop-news-single__grid {
    flex-direction: column;
  }
  .ppshop-news-single__img {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .ppshop-news-single__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .ppshop-news-single__related-grid {
    grid-template-columns: 1fr;
  }
  .ppshop-news-single__title-row {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v19 — 2026-07-14: mobile header spacing, collapsible
   trust cards, hide hero banner brand overlay on phones
   ═══════════════════════════════════════════════════════════════ */

/* 1. Header: bigger gaps between the icons, hamburger pinned to the far right */
@media (max-width: 767px) {
  .ppshop-topbar__right {
    gap: 18px !important;
  }
  .ppshop-topbar-menu-btn {
    margin-left: auto !important;
  }
}

/* 2. Trust cards ("Konwersja lamp" / "Kodowanie lamp" / "Multimedia"):
   collapsed to a partial height on mobile with a fade-out + "Pokaż więcej". */
.ppshop-home-trust__more {
  display: none;
}
@media (max-width: 767px) {
  .ppshop-home-trust__card {
    position: relative;
  }
  .ppshop-home-trust__body {
    max-height: 168px;
    overflow: hidden;
    position: relative;
  }
  .ppshop-home-trust__body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
    pointer-events: none;
  }
  .ppshop-home-trust__card.is-expanded .ppshop-home-trust__body {
    max-height: none;
  }
  .ppshop-home-trust__card.is-expanded .ppshop-home-trust__body::after {
    display: none;
  }
  .ppshop-home-trust__more {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px 0;
    background: rgba(232,131,0,.1);
    border: 1px solid rgba(232,131,0,.3);
    border-radius: 8px;
    color: #E88300;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
  }
}

/* 3. Hero banner brand-logo overlay: hidden on phones — the "Wybierz markę"
   button (already shown at ≤425px) opens the same brand list in a modal,
   so showing both was redundant. */
@media (max-width: 425px) {
  .ppshop-banner-brands {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v20 — 2026-07-14: real fix for the Cart block's
   remove-item control (verified against WooCommerce's own compiled
   cart.css — .wc-block-cart-item__remove-link IS the correct class;
   it ships as a plain 24×24 inline text link with no icon, which is
   why every earlier icon-only override left it looking like a bare
   dot. This paints a real trash icon via background-image so it no
   longer depends on whatever text/SVG WooCommerce puts inside it.)
   ═══════════════════════════════════════════════════════════════ */
.wc-block-cart-item__remove-link {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 50% !important;
  background-color: rgba(229, 57, 53, 0.1) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e53935' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'></path><path d='M10 11v6'></path><path d='M14 11v6'></path><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'></path></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background-color .2s !important;
}
.wc-block-cart-item__remove-link:hover {
  background-color: rgba(229, 57, 53, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v24 — 2026-07-16: homepage brand cards overlapping the
   "PEŁNA KONWERSJA" CTA at laptop widths.

   Root cause: .ppshop-banner-brands still carries an old `top:50% +
   transform:translateY(-50%)` rule from an earlier rewrite, alongside a
   later `bottom:80px` rule from a different pass. With both `top` and
   `bottom` set on an absolutely positioned box whose height is auto, the
   browser stretches the box to fill the gap between them, and this box's
   `justify-content:center` then centers the (content-sized) cards inside
   that stretch. Since .ppshop-home-banner__img is width:100%/height:auto,
   the stretch amount scales with viewport width — at desktop widths the
   stretched box ends up much taller than the cards (safe margin below),
   but at laptop widths it's barely taller than the cards, pushing them
   down into the CTA button's own box (.ppshop-conversion-btn is roughly
   95-100px tall and sits at bottom:60px, i.e. it occupies [60,155] from
   the banner's bottom edge — well above the cards' old bottom:80 floor).

   Fix: stop stretching — anchor purely by `bottom` (auto height, sized by
   its own content) and push that anchor comfortably above the CTA's own
   box at every width, instead of relying on a `top`/`bottom` tug-of-war.
   Scoped to the homepage banner specifically so the same BEM classes
   reused on /sklep/ (.ppshop-shop-brands__item, different wrapper) are
   untouched, and to ≥768px — below that, JS (shopper-shoppable.js,
   ppshopRelocateBannerCta) already moves the CTA button out from inside
   the banner entirely, so there's no button left in here to collide with
   and the existing mobile layout is left exactly as it was.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .ppshop-home-banner .ppshop-banner-brands {
    top: auto !important;
    bottom: 190px !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   STICKY FOOTER — footer should always sit at the true bottom of the
   viewport, even on short pages (e.g. /konwersja-usa-eu/ before any
   results are shown) instead of leaving the dark footer background
   stranded with a big gap above it. Standard flex sticky-footer pattern,
   site-wide (#page / #content are the same wrapper on every page).
   ══════════════════════════════════════════════════════════════ */
html, body { height: 100%; }
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#content.site-content {
  flex: 1 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   CART/CHECKOUT ITEM DATA — thin divider between vehicle attributes
   (Marka/Model/Kod fabryczny/Rok...) and the wizard's chosen add-ons
   (Kodowanie tył/przód, Multimedia, VIN), inserted by the
   woocommerce_get_item_data filter in inc/ppshop-conversion-wizard.php.
   ══════════════════════════════════════════════════════════════ */
.ppshop-item-data-divider {
  display: block;
  border-top: 1px solid #e5e5e5;
  margin: 6px 0 8px;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT PAGE — informational attribute rows (Rok produkcji, Liczba
   lamp do konwersji, ...) injected by inc/ppshop-attr-cascade.php.
   Same "info highlight" look as .ppshop-wizard__rok-info /
   .ppshop-wizard__lamp-info in the /konwersja-usa-eu/ wizard.
   ══════════════════════════════════════════════════════════════ */
.ppshop-info-attr-row td.ppshop-info-attr-cell {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  background: rgba(232, 131, 0, 0.08);
  border-left: 3px solid #E88300;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
}
.ppshop-info-attr-row .icofont-info-circle {
  color: #E88300;
}
.ppshop-info-attr-val {
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v25 – 2026-07-25
   /moje-konto/: widen the content column on every tab.
   ═══════════════════════════════════════════════════════════════ */

/* The parent theme lays the page out as a Bootstrap row (see
   shoper/inc/class/class-body.php: container_wrap_column_start()) — the
   main content column only ever gets 8/12 or 10/12 of the row, which is
   too narrow for order line-item details (e.g. "Konwersja multimediów:
   MIB2 · MHI2 · Wysyłkowo (+ 156,00 zł)" wraps mid-word on /moje-konto/
   orders). Widen it to the full row width on every My Account tab —
   selector matches whichever column class the theme picked (col-xl-8,
   col-md-10 + offset-md-1, etc.) without depending on which one it is —
   and hide the now-pointless empty sidebar column next to it. */
body.woocommerce-account #primary.content-area > .row > [class*="col-"]:not(.shoper-sidebar) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}
body.woocommerce-account .shoper-sidebar {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v26 – 2026-07-26: mobile responsiveness pass.
   Placed at the very end of the file on purpose — .ppshop-banner-brands
   and .ppshop-topbar__logo/__right/hamburger already carry a very long
   history of competing rules earlier in this file (many with their own
   !important), some more specific than a plain class selector; rather
   than hunt down and edit each one, these use selectors specific enough
   to beat any of them and win by being last in source order too.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Homepage hero: only the "Wybierz markę" button (opens the brand-list
   modal — see ppshop_render_home_brands_overlay() in functions.php) should
   show over the banner image below 768px — not also the plain brand-card
   row + its own "Wybierz markę" heading underneath/behind it, which is the
   desktop-only presentation of the exact same brand list, absolutely
   positioned and only actually tuned to look right at ≥768px (see the
   "GLOBAL FIXES v24" comment above, scoped the same way). The original
   pair of rules for this only covered ≤425px, leaving the 426–767px range
   showing the broken, cut-off desktop card layout — widened both the hide
   and the "show the button instead" rule to the same ≤767px so every
   width below the desktop breakpoint uses the one known-working pattern. */
@media (max-width: 767px) {
  html body.home .ppshop-banner-brands,
  html body.front-page .ppshop-banner-brands,
  html .ppshop-home-banner .ppshop-banner-brands {
    display: none !important;
  }
  html .ppshop-brands-mobile-btn {
    display: flex !important;
  }
  html .ppshop-home-banner {
    min-height: 180px;
  }
}

/* 2. Mobile header: push the cart/chat/account/hamburger icon row all the
   way to the right edge — #masthead .container's inherited Bootstrap
   padding-right:15px was leaving a visible gap between the last icon and
   the edge of the screen, when the expected placement for a menu trigger
   is flush in the corner. Left padding (logo side) is untouched. */
@media (max-width: 767px) {
  html #masthead .container {
    padding-right: 6px !important;
  }
}

/* 3. Logo: shrink further at very small phone widths ("Mobile S", ~320px)
   — the existing ≤767px rules already shrink it once, but at 320px that
   size still crowded the icon row on the same line. */
@media (max-width: 340px) {
  html .ppshop-topbar__logo img {
    max-height: 34px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v27 – 2026-07-26: second mobile/tablet/laptop
   responsiveness pass — /moje-konto/ order tables, address columns,
   the wizard's nested selects, /koszyk/, /zamowienie/ and the
   order-received "thank you" page, plus a small desktop-only nudge to
   the homepage banner cards.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Homepage banner (desktop only, ≥1101px — the ≤1100px "laptop" range
   was already tuned separately in GLOBAL FIXES v24 and is left untouched):
   the brand-card row and the CTA button below it both sit a little lower
   than they should on genuinely wide monitors.
   Originally a fixed bottom:230px (before that, bottom:190px at a 1200px
   threshold) — but the banner image is width:100%/height:auto, so its
   rendered height keeps growing with viewport width (and with it, an
   equivalent effect from browser zoom: zooming OUT effectively widens the
   CSS viewport, so it renders the same taller-banner-at-wider-width
   situation) — a FIXED px offset is only ever correct at the one width it
   was tuned against; confirmed live at 80% vs 90% browser zoom on the same
   monitor, where the identical 230px looked right at 90% but visibly too
   low at 80% (wider effective viewport → taller banner → the same 230px
   is a smaller fraction of it → less lift). Switched to top:%/
   transform:translateY(-50%) — a true percentage of the banner's own
   (height:auto, so itself proportional to viewport width) rendered
   height — which scales correctly at ANY width or zoom level instead of
   needing an ever-growing set of fixed-px breakpoints chasing the same
   problem. `bottom:auto` alongside is required: an earlier bug (see
   GLOBAL FIXES v24 above) was caused by leftover rules setting BOTH top
   and bottom at once, which stretches an auto-height absolutely-positioned
   box instead of just moving it. */
@media (min-width: 1101px) {
  html body.home .ppshop-home-banner .ppshop-banner-brands,
  html body.front-page .ppshop-home-banner .ppshop-banner-brands {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  html .ppshop-home-banner .ppshop-banner-cta {
    top: 84% !important;
    bottom: auto !important;
    /* .ppshop-home-banner .ppshop-banner-cta's own base rule already
       centers it horizontally via left:50% + transform:translateX(-50%)
       (see "2. CTA button inside banner" above) — translate() must carry
       BOTH axes here, or setting transform to translateY alone would wipe
       out that horizontal centering. */
    transform: translate(-50%, -50%) !important;
  }
  html body.home .ppshop-banner-brands__name,
  html body.front-page .ppshop-banner-brands__name {
    font-size: 15px !important;
  }
}

/* 2. /moje-konto/view-order/ and /zamowienie/order-received/ share the
   same order/order-details.php + order-details-item.php templates — a
   plain 3-column <table> (thumbnail | name+attributes | price) with no
   responsive behaviour at all below desktop. At laptop/tablet/mobile
   widths the name column got squeezed hard enough that lines of text
   visually collided with the price/labels next to them. Switch the row to
   a stacked card: image, then name+attributes, then the price on its own
   full-width line (dashed divider) — this is what actually makes the card
   itself widen to fit its content instead of clipping it. */
@media (max-width: 900px) {
  .woocommerce-table--order-details tbody,
  .woocommerce-table--order-details tr.order_item,
  .woocommerce-table--order-details tr.order_item td {
    display: block;
    width: auto;
  }
  .woocommerce-table--order-details tr.order_item {
    background: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
  }
  .woocommerce-table--order-details tr.order_item td {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .woocommerce-table--order-details td.product-thumbnail {
    margin-bottom: 12px;
  }
  .woocommerce-table--order-details td.product-thumbnail img {
    width: 90px !important;
    height: 90px !important;
  }
  .woocommerce-table--order-details td.product-name {
    margin-bottom: 14px;
  }
  .woocommerce-table--order-details td.product-total {
    text-align: left !important;
    padding-top: 12px !important;
    border-top: 1px dashed #e4e8ee !important;
  }
}

/* 3. /moje-konto/view-order/ — "Adres Rozliczeniowy" / "Adres Do Wysyłki"
   cards: the auto-fit grid let two 240px-minimum columns squeeze onto one
   row on laptop/tablet widths well before there was actually enough room
   for both without heavy word-wrapping. Stack them one under the other
   through that whole range instead. */
@media (max-width: 900px) {
  .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr !important;
  }
}

/* 4. /konwersja-usa-eu/ selects (native <select>, e.g. "Wersja
   kierunkowskazu"): the browser sizes the OPEN option list to fit its own
   longest option text, which can end up wider than the closed control
   itself once the control's available width has already been eaten by the
   section's left indent — this is native popup rendering and can't be
   pixel-matched via CSS, but giving the control back the width the indent
   was taking narrows the gap between "closed box width" and "option list's
   natural width" to the point it no longer visibly mismatches. */
@media (max-width: 480px) {
  .ppshop-wizard__field--indent,
  .ppshop-wizard__pricing-row--indent,
  .ppshop-wizard__extras--indent {
    margin-left: 6px !important;
    padding-left: 8px !important;
  }
  .ppshop-wizard__select {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* 5. /koszyk/ — REPLACES an earlier @media-based attempt that turned out
   unreliable: WooCommerce Blocks lays this row out with CSS *container*
   queries (`.wp-block-woocommerce-cart{container-type:inline-size}` — its
   own breakpoints at 399/519/699px are measured against that container's
   rendered width, NOT the page viewport, and the container is narrower
   than the viewport by however much the sidebar/padding take up). A
   viewport @media breakpoint and a container-width breakpoint drift apart
   by different amounts depending on layout, which is exactly why the old
   fix looked different at 866px vs 824px instead of behaving consistently
   — switching to @container here evaluates against the SAME box WooCommerce
   itself measures, so there's only one source of truth.
   Separately, and more importantly: WooCommerce's own base CSS pins each
   cell with explicit `grid-column-start`/`grid-column-end`/`grid-row-start`
   (image: col 1 row 1; product: col 2 → 4 row 1; total: row 1) — our old
   override only changed grid-template-columns and left those explicit
   per-cell placements in place, so the browser kept generating extra
   IMPLICIT columns to satisfy them regardless of our 1fr track, which is
   why image/name/price still rendered side-by-side (with inconsistent
   spacing) instead of actually stacking. Resetting all three to `auto`
   here is what makes a real top-to-bottom stack possible. */
@container (max-width: 699px) {
  tr.wc-block-cart-items__row {
    grid-template-columns: 1fr !important;
    row-gap: 10px;
  }
  td.wc-block-cart-item__image,
  td.wc-block-cart-item__product,
  td.wc-block-cart-item__total {
    grid-column-start: auto !important;
    grid-column-end: auto !important;
    grid-row-start: auto !important;
  }
  td.wc-block-cart-item__image {
    width: 100% !important;
    padding-right: 0 !important;
    text-align: center;
  }
  td.wc-block-cart-item__image img {
    width: 130px !important;
    height: 130px !important;
    margin: 0 auto !important;
  }
  td.wc-block-cart-item__total {
    align-items: flex-end !important;
    text-align: right !important;
    padding-right: 4px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #ececec;
  }
  .wc-block-cart-item__total .wc-block-components-product-price {
    font-size: 19px;
  }
}
@container (max-width: 399px) {
  td.wc-block-cart-item__image img {
    width: 100px !important;
    height: 100px !important;
  }
  .wc-block-cart-item__total .wc-block-components-product-price {
    font-size: 16px;
  }
}

/* 6. /zamowienie/ — "Podsumowanie zamówienia" sidebar item: same
   container-vs-viewport reasoning as the cart fix above — the checkout
   block establishes its own container too
   (.wp-block-woocommerce-checkout{container-type:inline-size}) — so this
   uses @container for the same reason. Image above name/price instead of
   squeezed beside it. */
@container (max-width: 699px) {
  .wc-block-components-order-summary-item {
    flex-direction: column !important;
  }
  .wc-block-components-order-summary-item__image {
    width: auto !important;
    padding-bottom: 8px !important;
  }
  .wc-block-components-order-summary-item__image > img {
    max-width: 72px !important;
    width: 72px !important;
  }
  .wc-block-components-order-summary-item__description {
    padding: 4px 0 12px !important;
  }
}

/* 6b. The 78% cap on contact fields / address card / shipping-payment
   radio groups (see "Narrow the form fields themselves" above) was written
   for the wide desktop 2-column layout, where the fields column itself is
   already generous — on a narrower, single-column mobile layout the exact
   same 78% squeezes an already-tight column even further for no reason,
   which is what was cramming checkbox/radio labels ("Kurier" + its price,
   etc.) into far less width than the screen actually had. Only apply it
   at the desktop 2-column breakpoint (see the ≥901px totals-block guard
   above) where it was actually meant to matter. */
@media (min-width: 901px) {
  .wc-block-checkout__contact-fields,
  .wc-block-components-address-card,
  .wc-block-components-radio-control {
    max-width: 78% !important;
  }
}

/* 6c. Both checkout columns carry a hard min-width:320px (see
   "wp-block-woocommerce-checkout-fields-block"/"-totals-block" above) —
   fine down to a 320px viewport MINUS whatever padding/margin sits outside
   them, but on an actual 320px-wide phone ("Mobile S") there's always some
   padding outside, so the box could never actually fit — it overflowed the
   viewport instead of shrinking, cutting off "Podsumowanie zamówienia"
   and every price/label inside it. */
@media (max-width: 360px) {
  .wp-block-woocommerce-checkout-fields-block,
  .wp-block-woocommerce-checkout-totals-block {
    min-width: 0 !important;
  }
}

/* 7. /koszyk/, /zamowienie/, /zamowienie/order-received/ — the shared
   "Koszyk – Dostawa i płatność – Potwierdzenie" step header.
   ff_checkout_steps_html() itself was overridden in this child theme's
   functions.php to render the back control as a real text link
   ("‹ Wróć do koszyka") instead of a bare icon — see functions.php — so
   this styles that new markup. Always stacked (back link on its own line,
   left-aligned, ABOVE the centered step row) at every width, rather than
   letting flex-wrap put them on the same line whenever there happened to
   be room — sharing a line still read as visually competing for the same
   band even once the collision itself was fixed, and one fixed
   arrangement is simpler to reason about than "sometimes side by side,
   sometimes stacked" depending on viewport width. */
.ff-page-header {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  min-height: 0 !important;
}
.ff-back-btn {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start !important;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary-color, #E88300) !important;
}
.ff-back-btn:hover {
  background: transparent !important;
  color: #b96400 !important;
  text-decoration: underline;
}
.ff-back-btn i {
  font-size: 15px;
  line-height: 1;
}
@media (max-width: 420px) {
  .ff-step__label {
    display: none !important;
  }
  .ff-step__circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }
  .ff-step {
    gap: 0 !important;
  }
  .ff-step__line {
    width: 18px !important;
    margin-bottom: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FIXES v28 – 2026-07-26
   ═══════════════════════════════════════════════════════════════ */

/* Main nav (STRONA GŁÓWNA / USŁUGI I MULTIMEDIA / …): .ppshop-nav-inner is
   a plain edge-to-edge flex row with no padding at all, so above the
   mobile breakpoint (≥768px, where the hamburger menu takes over) the tabs
   sat glued right against the left edge of the header. A little breathing
   room, at the cost of hiding the "Konto" text label (icon + dropdown
   caret stay) in roughly the laptop range where the tabs + full account
   label together are more likely to run tight — wide desktop keeps the
   text label since there's no need to sacrifice it there. */
@media (min-width: 768px) {
  .ppshop-nav-inner {
    padding-left: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1366px) {
  .ppshop-nav-account__link span {
    display: none;
  }
  .ppshop-nav-account__link {
    gap: 4px;
  }
}

/* ── /zamowienie/ (WooCommerce block checkout): "Podsumowanie zamówienia"
   sidebar overflowing slightly past the page's right edge on desktop. Root
   cause: the checkout block carries WordPress's "alignwide" class, which
   normally breaks a block out of the normal content column via a negative
   margin calculated from theme-wide CSS custom properties — this theme
   never defines those (no other block content uses wide/full alignment
   anywhere else on the site), so the block fell back to the generic
   WooCommerce Blocks default width assumption instead of this page's
   actual container width, ending up wider than it and pushing the
   right-hand sidebar column past the edge. Neutralized by pinning it to
   100% of its real parent instead of trying to reproduce alignwide's
   break-out math for a container size nothing else on the site uses. ── */
.wp-block-woocommerce-checkout.alignwide {
  /* !important: WooCommerce's own checkout.css loads after this file and
     defines .wp-block-woocommerce-checkout{width:100%} at equal or higher
     specificity, so a plain override here was silently losing the cascade. */
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Belt-and-suspenders: the checkout block's own two-column split
   (.wp-block-woocommerce-checkout-fields-block at 65% + …-totals-block at
   35%, with a couple of percentage-based paddings on top) still edges a
   little past its container on some widths even with the block itself
   correctly constrained above — clipping horizontal overflow on the page's
   real content wrapper guarantees nothing can visually stick out past it,
   regardless of the exact sub-pixel cause inside WooCommerce's own CSS. */
body.woocommerce-checkout .content-wrap {
  overflow-x: hidden;
}