/**
 * KARTA PRODUKTU - NOWY DESIGN
 * Zgodny ze specyfikacją PRODUCT-CARD-SPECIFICATION.md
 *
 * @author    KamikStudio Patryk Kowalski
 * @copyright 2026 KamikStudio
 * @version   2.0.0
 */

/* CSS Loading confirmed - debug removed */

/* ============================================
   1. DESIGN TOKENS (CSS Variables)
   ============================================ */

:root {
  /* Tło - białe zamiast beżowego */
  --pp-background: 0 0% 100%;
  --pp-foreground: 220 20% 15%;

  /* Karty */
  --pp-card: 0 0% 100%;
  --pp-card-foreground: 220 20% 15%;

  /* Primary - Zieleń leśna (agro/eko) */
  --pp-primary: 142 50% 35%;
  --pp-primary-foreground: 0 0% 100%;
  --pp-primary-light: 142 45% 92%;
  --pp-primary-dark: 142 50% 28%;

  /* Secondary - Ciepły piasek */
  --pp-secondary: 35 25% 93%;
  --pp-secondary-foreground: 220 20% 20%;

  /* Muted - Szary */
  --pp-muted: 220 15% 95%;
  --pp-muted-foreground: 220 10% 50%;

  /* Accent - Pomarańczowy (promocje) */
  --pp-accent: 25 95% 55%;
  --pp-accent-foreground: 0 0% 100%;
  --pp-accent-light: 25 95% 95%;

  /* Success - Dostępność/W magazynie */
  --pp-success: 145 60% 42%;
  --pp-success-foreground: 0 0% 100%;
  --pp-success-light: 145 50% 94%;

  /* Warning - Ograniczone/Promocja */
  --pp-warning: 35 92% 50%;
  --pp-warning-foreground: 0 0% 100%;
  --pp-warning-light: 40 95% 95%;

  /* Destructive/Error */
  --pp-destructive: 0 75% 55%;
  --pp-destructive-foreground: 0 0% 100%;
  --pp-destructive-light: 0 75% 95%;

  /* Borders */
  --pp-border: 220 15% 90%;
  --pp-input: 220 15% 90%;
  --pp-ring: 142 50% 35%;

  /* Radius */
  --pp-radius-sm: 0.5rem;
  --pp-radius: 0.75rem;
  --pp-radius-lg: 1rem;
  --pp-radius-xl: 1.5rem;
  --pp-radius-full: 9999px;

  /* Shadows */
  --pp-shadow-sm: 0 1px 2px 0 hsl(220 20% 15% / 0.04);
  --pp-shadow: 0 4px 12px -2px hsl(220 20% 15% / 0.08);
  --pp-shadow-md: 0 4px 12px -2px hsl(220 20% 15% / 0.08);
  --pp-shadow-lg: 0 12px 32px -8px hsl(220 20% 15% / 0.12);
  --pp-shadow-hover: 0 8px 24px -4px hsl(220 20% 15% / 0.15);

  /* Transitions */
  --pp-transition: all 0.2s ease;
  --pp-transition-slow: all 0.3s ease;
}

/* Dark Mode */
.dark {
  --pp-background: 220 20% 8%;
  --pp-foreground: 40 15% 95%;
  --pp-card: 220 20% 12%;
  --pp-primary: 142 45% 50%;
  --pp-primary-light: 142 30% 18%;
  --pp-secondary: 220 15% 18%;
  --pp-muted: 220 15% 20%;
  --pp-muted-foreground: 220 10% 60%;
  --pp-accent: 25 90% 55%;
  --pp-success: 145 55% 50%;
  --pp-success-light: 145 30% 15%;
  --pp-warning: 35 90% 55%;
  --pp-warning-light: 40 40% 15%;
  --pp-destructive: 0 70% 50%;
  --pp-border: 220 15% 22%;
  --pp-ring: 142 45% 50%;
}

/* ============================================
   2. THEME.CSS OVERRIDES (Reset conflicts)
   ============================================ */

/* Reset ONLY the wrapper section content - NOT footer */
body#product section#wrapper #content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
}

body#product section#wrapper #content-wrapper.left-column,
body#product section#wrapper #content-wrapper.right-column,
body#product section#wrapper #content-wrapper.left-column.right-column {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
}

/* Target ONLY wrapper section container - NOT footer */
body#product section#wrapper > .container {
  max-width: 1320px !important;
  width: 100% !important;
  padding: 0 1rem !important;
  margin: 0 auto !important;
}

body#product section#wrapper #columns_inner {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

/* Hide default left/right columns on product page */
body#product section#wrapper #left-column,
body#product section#wrapper #right-column {
  display: none !important;
}

/* CRITICAL: Force pp-grid to work - override custom.css and theme.css */
body#product .pp-grid,
body#product #main .pp-grid,
body#product section#main .pp-grid,
html body#product .pp-grid,
html body#product #main .pp-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  flex-wrap: nowrap !important;
}

@media (min-width: 1024px) {
  body#product .pp-grid,
  body#product #main .pp-grid,
  body#product section#main .pp-grid,
  html body#product .pp-grid,
  html body#product #main .pp-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
  }
}

/* CRITICAL: Force columns to work as grid children - NOT flex children */
body#product .pp-grid > .pp-left-column,
body#product .pp-grid > .pp-right-column,
body#product #main .pp-grid > .pp-left-column,
body#product #main .pp-grid > .pp-right-column,
html body#product .pp-left-column,
html body#product .pp-right-column,
html body#product #main .pp-left-column,
html body#product #main .pp-right-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  float: none !important;
  flex: unset !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  z-index: auto !important;
}

/* Specific right column override for gap */
body#product .pp-grid > .pp-right-column,
body#product #main .pp-grid > .pp-right-column,
html body#product .pp-right-column,
html body#product #main .pp-right-column {
  gap: 1rem !important;
}

/* Reset product-specific elements from theme.css */
body#product .pp-right-column p {
  margin-bottom: initial;
}

body#product .pp-right-column .product-actions {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

body#product .pp-right-column .product-information .description-short {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

/* ============================================
   3. BASE STYLES
   ============================================ */

body#product .pp-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 1.5rem 1rem !important;
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: hsl(var(--pp-background));
  color: hsl(var(--pp-foreground));
}

@media (min-width: 1024px) {
  body#product .pp-container {
    padding: 2rem 1.5rem !important;
  }
}

/* ============================================
   3.5 BREADCRUMBS
   ============================================ */

body#product .pp-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 0.875rem !important;
  color: hsl(var(--pp-muted-foreground)) !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body#product .pp-breadcrumbs a {
  color: hsl(var(--pp-muted-foreground)) !important;
  text-decoration: none !important;
  transition: var(--pp-transition);
}

body#product .pp-breadcrumbs a:hover {
  color: hsl(var(--pp-foreground)) !important;
}

body#product .pp-breadcrumbs__separator {
  color: hsl(var(--pp-border)) !important;
}

body#product .pp-breadcrumbs__current {
  font-weight: 600 !important;
  color: hsl(var(--pp-foreground)) !important;
}

/* ============================================
   4. MAIN GRID LAYOUT (already defined in overrides section)
   ============================================ */

/* Grid styles moved to section 2 - THEME.CSS OVERRIDES */

/* ============================================
   5. SALE COUNTDOWN TIMER
   ============================================ */

.pp-countdown {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: hsl(var(--pp-accent-light));
  border: 1px solid hsl(var(--pp-accent) / 0.2);
  border-radius: var(--pp-radius-lg);
}

.pp-countdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--pp-accent));
  border-radius: var(--pp-radius);
  color: hsl(var(--pp-accent-foreground));
}

.pp-countdown__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-countdown__content {
  flex: 1;
}

.pp-countdown__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--pp-accent));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.pp-countdown__timer {
  display: flex;
  gap: 0.5rem;
}

.pp-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.5rem;
}

.pp-countdown__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
  line-height: 1;
}

.pp-countdown__suffix {
  font-size: 0.625rem;
  color: hsl(var(--pp-muted-foreground));
  text-transform: uppercase;
  margin-top: 0.125rem;
}

.pp-countdown__separator {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--pp-muted-foreground));
  line-height: 1;
}

/* ============================================
   6. GALLERY
   ============================================ */

.pp-gallery {
  display: flex;
  gap: 1rem;
}

.pp-gallery__thumbnails {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .pp-gallery__thumbnails {
    display: flex;
  }
}

.pp-gallery__thumbnail {
  width: 4rem;
  height: 4rem;
  border: 2px solid transparent;
  border-radius: var(--pp-radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--pp-transition);
  background: hsl(var(--pp-muted));
}

.pp-gallery__thumbnail:hover {
  border-color: hsl(var(--pp-muted-foreground) / 0.3);
}

.pp-gallery__thumbnail.active {
  border-color: hsl(var(--pp-primary));
  box-shadow: 0 0 0 2px hsl(var(--pp-primary) / 0.2);
}

.pp-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-gallery__main {
  flex: 1;
  position: relative;
}

.pp-gallery__image {
  aspect-ratio: 1;
  background: hsl(var(--pp-card));
  border-radius: var(--pp-radius-xl);
  overflow: hidden;
  box-shadow: var(--pp-shadow);
  cursor: zoom-in;
  position: relative;
}

.pp-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5rem;
  transition: transform 0.3s ease;
}

.pp-gallery__image:hover img {
  transform: scale(1.05);
}

.pp-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: var(--pp-transition);
  color: hsl(var(--pp-foreground));
  z-index: 2;
}

.pp-gallery__image:hover .pp-gallery__nav {
  opacity: 1;
}

.pp-gallery__nav:hover {
  background: hsl(var(--pp-primary));
  border-color: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
}

.pp-gallery__nav--prev {
  left: 1rem;
}

.pp-gallery__nav--next {
  right: 1rem;
}

.pp-gallery__counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.75rem;
  background: hsl(var(--pp-foreground) / 0.7);
  color: hsl(var(--pp-card));
  border-radius: var(--pp-radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.pp-gallery__fullscreen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: var(--pp-transition);
  color: hsl(var(--pp-foreground));
  z-index: 2;
}

.pp-gallery__image:hover .pp-gallery__fullscreen {
  opacity: 1;
}

.pp-gallery__fullscreen:hover {
  background: hsl(var(--pp-primary));
  border-color: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
}

/* Mobile thumbnails - pod zdjęciem */
.pp-gallery__thumbnails-mobile {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

@media (min-width: 1024px) {
  .pp-gallery__thumbnails-mobile {
    display: none;
  }
}

.pp-gallery__thumbnails-mobile .pp-gallery__thumbnail {
  flex-shrink: 0;
}

/* ============================================
   7. SOR WARNING CARD
   ============================================ */

.pp-sor-card {
  background: linear-gradient(135deg, hsl(var(--pp-primary-light)) 0%, hsl(142 45% 96%) 100%);
  border: 1px solid hsl(var(--pp-primary) / 0.2);
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
}

.pp-sor-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
}

.pp-sor-card__header svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.pp-sor-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pp-sor-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pp-sor-card__info {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.pp-sor-card__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: hsl(var(--pp-primary));
}

.pp-sor-card__info-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-sor-card__info-text {
  font-size: 0.8125rem;
  color: hsl(var(--pp-foreground));
  line-height: 1.5;
}

/* Status - brak certyfikatu */
.pp-sor-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--pp-radius);
  background: hsl(var(--pp-warning-light));
  border: 1px solid hsl(var(--pp-warning) / 0.2);
}

.pp-sor-status--success {
  background: hsl(var(--pp-success-light));
  border-color: hsl(var(--pp-success) / 0.2);
}

.pp-sor-status__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: hsl(var(--pp-warning));
  border-radius: var(--pp-radius-full);
  color: hsl(var(--pp-warning-foreground));
  flex-shrink: 0;
}

.pp-sor-status--success .pp-sor-status__icon {
  background: hsl(var(--pp-success));
}

.pp-sor-status__icon svg {
  width: 1rem;
  height: 1rem;
}

.pp-sor-status__content {
  flex: 1;
  min-width: 0;
}

.pp-sor-status__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--pp-warning));
  margin-bottom: 0.125rem;
}

.pp-sor-status--success .pp-sor-status__title {
  color: hsl(var(--pp-success));
}

.pp-sor-status__subtitle {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-sor-status__action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--pp-primary));
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-primary) / 0.3);
  border-radius: var(--pp-radius);
  text-decoration: none;
  transition: var(--pp-transition);
  white-space: nowrap;
}

.pp-sor-status__action:hover {
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border-color: hsl(var(--pp-primary));
}

.pp-sor-status__action svg {
  width: 1rem;
  height: 1rem;
}

.pp-sor-card__footer {
  padding: 0.5rem 1rem;
  background: hsl(var(--pp-card) / 0.5);
  border-top: 1px solid hsl(var(--pp-primary) / 0.1);
}

.pp-sor-card__legal {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-sor-card__legal svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ============================================
   8. PRODUCT INFO (Right Column)
   ============================================ */

/* Ratings - zgodne z wizualizacją (proste gwiazdki) */
.pp-ratings {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: var(--pp-transition);
  padding: 0;
  background: transparent;
  border: none;
  margin-bottom: 0.5rem;
}

.pp-ratings:hover .pp-ratings__text {
  color: hsl(var(--pp-foreground));
}

.pp-ratings__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pp-ratings__star {
  width: 1rem;
  height: 1rem;
}

.pp-ratings__star--filled {
  fill: #f59e0b;
  color: #f59e0b;
}

.pp-ratings__star--empty {
  fill: hsl(var(--pp-muted));
  color: hsl(var(--pp-muted));
}

.pp-ratings__text {
  font-size: 0.875rem;
  color: hsl(var(--pp-muted-foreground));
  transition: var(--pp-transition);
}

/* Title */
.pp-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
  line-height: 1.3;
  text-wrap: balance;
  margin: 0;
}

@media (min-width: 1024px) {
  .pp-title {
    font-size: 1.875rem;
  }
}

/* Short description */
.pp-description {
  font-size: 0.9375rem;
  color: hsl(var(--pp-muted-foreground));
  line-height: 1.6;
}

/* Meta info */
.pp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 0.75rem 0;
}

.pp-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-meta__item svg {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.7;
}

.pp-meta__label {
  opacity: 0.8;
}

.pp-meta__value {
  font-weight: 500;
  color: hsl(var(--pp-foreground));
}

.pp-meta__value a {
  color: hsl(var(--pp-primary));
  text-decoration: none;
}

.pp-meta__value a:hover {
  text-decoration: underline;
}

.pp-meta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: hsl(var(--pp-primary));
  text-decoration: none;
  font-weight: 500;
}

.pp-meta__link:hover {
  text-decoration: underline;
}

.pp-meta__link svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Separator */
.pp-separator {
  height: 1px;
  background: hsl(var(--pp-border));
  margin: 0.5rem 0;
}

/* ============================================
   9. PRICE SECTION
   ============================================ */

.pp-price-section {
  padding: 1rem 0;
}

.pp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pp-price__old {
  font-size: 1.125rem;
  color: hsl(var(--pp-muted-foreground));
  text-decoration: line-through;
}

.pp-price__current {
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
  letter-spacing: -0.025em;
}

.pp-price__current--promo {
  color: hsl(var(--pp-accent));
}

.pp-price__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: hsl(var(--pp-accent));
  color: hsl(var(--pp-accent-foreground));
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--pp-radius-full);
}

.pp-price__info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-price__tax {
  padding-right: 1rem;
  border-right: 1px solid hsl(var(--pp-border));
}

/* ============================================
   10. VOLUME DISCOUNTS
   ============================================ */

.pp-volume-discounts {
  background: hsl(var(--pp-primary-light));
  border: 1px solid hsl(var(--pp-primary) / 0.2);
  border-radius: var(--pp-radius-lg);
  padding: 1rem;
  margin: 0.5rem 0;
}

.pp-volume-discounts__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--pp-primary));
}

.pp-volume-discounts__header svg {
  width: 1rem;
  height: 1rem;
}

.pp-volume-discounts__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pp-volume-discounts__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}

.pp-volume-discounts__qty {
  color: hsl(var(--pp-foreground));
}

.pp-volume-discounts__discount {
  font-weight: 600;
  color: hsl(var(--pp-primary));
}

/* ============================================
   11. VARIANTS
   ============================================ */

.pp-variants {
  margin: 0.5rem 0;
}

.pp-variants__group {
  margin-bottom: 1rem;
}

.pp-variants__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  margin-bottom: 0.5rem;
}

.pp-variants__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pp-variants__option {
  position: relative;
}

.pp-variants__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pp-variants__option label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  background: hsl(var(--pp-card));
  border: 2px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-variants__option label:hover {
  border-color: hsl(var(--pp-primary) / 0.5);
}

.pp-variants__option input:checked + label {
  background: hsl(var(--pp-primary));
  border-color: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
}

.pp-variants__option input:checked + label .pp-variants__check {
  display: flex;
}

.pp-variants__option--unavailable label {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: line-through;
}

.pp-variants__check {
  display: none;
  width: 1rem;
  height: 1rem;
}

/* ============================================
   12. ADD TO CART SECTION
   ============================================ */

.pp-cart-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}

/* Notify when out of stock */
.pp-notify {
  background: hsl(var(--pp-muted));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  padding: 1.25rem;
}

.pp-notify__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pp-notify__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--pp-card));
  border-radius: var(--pp-radius-full);
  color: hsl(var(--pp-muted-foreground));
}

.pp-notify__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-notify__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
}

.pp-notify__subtitle {
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-notify__form {
  display: flex;
  gap: 0.5rem;
}

.pp-notify__input {
  flex: 1;
  height: 2.75rem;
  padding: 0 1rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  font-size: 0.875rem;
  color: hsl(var(--pp-foreground));
  transition: var(--pp-transition);
}

.pp-notify__input:focus {
  outline: none;
  border-color: hsl(var(--pp-primary));
  box-shadow: 0 0 0 2px hsl(var(--pp-primary) / 0.2);
}

.pp-notify__button {
  height: 2.75rem;
  padding: 0 1.25rem;
  background: hsl(var(--pp-foreground));
  color: hsl(var(--pp-background));
  border: none;
  border-radius: var(--pp-radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-notify__button:hover {
  opacity: 0.9;
}

.pp-notify__disclaimer {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  margin-top: 0.75rem;
}

/* Cart row */
.pp-cart-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Quantity selector */
.pp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  overflow: hidden;
  background: hsl(var(--pp-card));
}

.pp-qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: none;
  color: hsl(var(--pp-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-qty__btn:hover {
  background: hsl(var(--pp-muted));
}

.pp-qty__btn svg {
  width: 1rem;
  height: 1rem;
}

.pp-qty__input {
  width: 3rem;
  height: 2.75rem;
  text-align: center;
  border: none;
  border-left: 1px solid hsl(var(--pp-border));
  border-right: 1px solid hsl(var(--pp-border));
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  background: transparent;
  -moz-appearance: textfield;
}

.pp-qty__input::-webkit-outer-spin-button,
.pp-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pp-qty__input:focus {
  outline: none;
}

/* Add to cart button */
.pp-btn-cart {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-btn-cart:hover {
  background: hsl(var(--pp-primary-dark));
}

.pp-btn-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pp-btn-cart svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-btn-cart--success {
  background: hsl(var(--pp-success));
}

/* Wishlist button */
.pp-btn-wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  color: hsl(var(--pp-muted-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-btn-wishlist:hover {
  color: hsl(var(--pp-destructive));
  border-color: hsl(var(--pp-destructive) / 0.3);
  background: hsl(var(--pp-destructive-light));
}

.pp-btn-wishlist.active {
  color: hsl(var(--pp-destructive));
  background: hsl(var(--pp-destructive-light));
  border-color: hsl(var(--pp-destructive) / 0.3);
}

.pp-btn-wishlist svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================
   13. DELIVERY BADGES
   ============================================ */

.pp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0.75rem 0;
}

.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--pp-radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
}

.pp-badge svg {
  width: 1rem;
  height: 1rem;
}

.pp-badge--success {
  background: hsl(var(--pp-success-light));
  color: hsl(var(--pp-success));
}

.pp-badge--warning {
  background: hsl(var(--pp-warning-light));
  color: hsl(var(--pp-warning));
}

.pp-badge--muted {
  background: hsl(var(--pp-muted));
  color: hsl(var(--pp-muted-foreground));
}

/* ============================================
   14. CALCULATORS ACCORDION
   ============================================ */

.pp-calculators {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.pp-accordion {
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  overflow: hidden;
}

.pp-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1rem;
  background: hsl(var(--pp-card));
  border: none;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-accordion__trigger:hover {
  background: hsl(var(--pp-muted));
}

.pp-accordion__trigger-content {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
}

.pp-accordion__trigger-content svg {
  width: 1.125rem;
  height: 1.125rem;
  color: hsl(var(--pp-primary));
}

.pp-accordion__chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--pp-muted-foreground));
  transition: transform 0.2s ease;
}

.pp-accordion.open .pp-accordion__chevron {
  transform: rotate(180deg);
}

.pp-accordion__content {
  display: none;
  padding: 1rem;
  background: hsl(var(--pp-muted));
  border-top: 1px solid hsl(var(--pp-border));
}

.pp-accordion.open .pp-accordion__content {
  display: block;
}

/* Dosage calculator */
.pp-dosage-calc {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-dosage-calc__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  margin-bottom: 0.25rem;
}

.pp-dosage-calc__slider-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pp-dosage-calc__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 0.5rem;
  background: hsl(var(--pp-border));
  border-radius: var(--pp-radius-full);
  cursor: pointer;
}

.pp-dosage-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: hsl(var(--pp-primary));
  border-radius: var(--pp-radius-full);
  cursor: pointer;
  box-shadow: var(--pp-shadow);
}

.pp-dosage-calc__value {
  width: 4rem;
  height: 2.5rem;
  text-align: center;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  background: hsl(var(--pp-card));
}

.pp-dosage-calc__results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.pp-dosage-calc__result {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  text-align: center;
}

.pp-dosage-calc__result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 auto 0.5rem;
  background: hsl(var(--pp-primary-light));
  border-radius: var(--pp-radius);
  color: hsl(var(--pp-primary));
}

.pp-dosage-calc__result-icon svg {
  width: 1rem;
  height: 1rem;
}

.pp-dosage-calc__result-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
}

.pp-dosage-calc__result-label {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  margin-top: 0.125rem;
}

.pp-dosage-calc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-dosage-calc__btn:hover {
  background: hsl(var(--pp-primary-dark));
}

/* ============================================
   15. QUICK ACTIONS
   ============================================ */

.pp-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
}

.pp-quick-actions__group {
  display: flex;
  gap: 0.5rem;
}

.pp-quick-actions__divider {
  width: 1px;
  height: 1.5rem;
  background: hsl(var(--pp-border));
}

.pp-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pp-radius);
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--pp-muted-foreground));
  text-decoration: none;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-quick-action:hover {
  background: hsl(var(--pp-muted));
  color: hsl(var(--pp-foreground));
}

.pp-quick-action svg {
  width: 1rem;
  height: 1rem;
}

.pp-quick-action--allegro {
  background: hsl(var(--pp-accent-light));
  color: hsl(var(--pp-accent));
  border-color: hsl(var(--pp-accent) / 0.2);
}

.pp-quick-action--allegro:hover {
  background: hsl(var(--pp-accent));
  color: hsl(var(--pp-accent-foreground));
}

.pp-quick-action--pdf {
  background: hsl(var(--pp-muted));
  color: hsl(var(--pp-muted-foreground));
}

/* ============================================
   16. TABS SECTION
   ============================================ */

.pp-tabs-section {
  margin-top: 3rem;
}

.pp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid hsl(var(--pp-border));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pp-tabs::-webkit-scrollbar {
  display: none;
}

.pp-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.875rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-muted-foreground));
  cursor: pointer;
  white-space: nowrap;
  transition: var(--pp-transition);
}

.pp-tab:hover {
  color: hsl(var(--pp-foreground));
}

.pp-tab.active {
  color: hsl(var(--pp-primary));
  border-bottom-color: hsl(var(--pp-primary));
}

.pp-tab--warning {
  color: hsl(var(--pp-destructive));
}

.pp-tab--warning.active {
  color: hsl(var(--pp-destructive));
  border-bottom-color: hsl(var(--pp-destructive));
}

.pp-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
}

.pp-tab.active .pp-tab__badge {
  background: hsl(var(--pp-primary-light));
  color: hsl(var(--pp-primary));
}

.pp-tabs-content {
  padding: 2rem 0;
}

.pp-tab-panel {
  display: none;
}

.pp-tab-panel.active {
  display: block;
  animation: pp-fade-in 0.3s ease-out;
}

@keyframes pp-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tab content styles */
.pp-tab-content {
  font-size: 0.9375rem;
  color: hsl(var(--pp-foreground));
  line-height: 1.7;
}

.pp-tab-content h2,
.pp-tab-content h3,
.pp-tab-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
}

.pp-tab-content h2 {
  font-size: 1.25rem;
}

.pp-tab-content h3 {
  font-size: 1.125rem;
}

.pp-tab-content p {
  margin-bottom: 1rem;
}

.pp-tab-content ul,
.pp-tab-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.pp-tab-content li {
  margin-bottom: 0.5rem;
}

/* Specifications table */
.pp-specifications {
  width: 100%;
  border-collapse: collapse;
}

.pp-specifications tr:nth-child(odd) {
  background: hsl(var(--pp-muted));
}

.pp-specifications td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
}

.pp-specifications td:first-child {
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  width: 40%;
}

.pp-specifications td:last-child {
  color: hsl(var(--pp-muted-foreground));
}

/* Purpose tags */
.pp-purpose {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pp-purpose__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pp-purpose__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
}

.pp-purpose__label svg {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--pp-primary));
}

.pp-purpose__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pp-purpose__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius-full);
  font-size: 0.8125rem;
  color: hsl(var(--pp-foreground));
  transition: var(--pp-transition);
}

.pp-purpose__tag:hover {
  background: hsl(var(--pp-primary-light));
  color: hsl(var(--pp-primary));
}

/* Purpose tag variants */
.pp-purpose__tag--problem {
  background: hsl(var(--pp-warning-light));
  color: hsl(var(--pp-warning));
}

.pp-purpose__tag--problem:hover {
  background: hsl(var(--pp-warning));
  color: hsl(var(--pp-warning-foreground));
}

/* Substances list */
.pp-purpose__substances {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pp-purpose__substance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius);
  font-size: 0.875rem;
}

.pp-purpose__substance-name {
  font-weight: 500;
  color: hsl(var(--pp-foreground));
}

.pp-purpose__substance-conc {
  font-weight: 600;
  color: hsl(var(--pp-primary));
  background: hsl(var(--pp-primary-light));
  padding: 0.25rem 0.5rem;
  border-radius: var(--pp-radius-sm);
}

/* Purpose value (for dosage, karencja) */
.pp-purpose__value {
  font-size: 1rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  padding: 0.5rem 0;
}

/* Price history chart */
.pp-price-history {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pp-price-history__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.pp-price-history__stat {
  padding: 1rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
}

.pp-price-history__stat-label {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  margin-bottom: 0.25rem;
}

.pp-price-history__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
}

.pp-price-history__stat-value--success {
  color: hsl(var(--pp-success));
}

.pp-price-history__chart {
  height: 200px;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  padding: 1rem;
}

.pp-price-history__footer {
  text-align: center;
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
}

/* Warning tab (UWAGA!) */
.pp-warning-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-warning-box {
  padding: 1.25rem;
  border-radius: var(--pp-radius);
  border-left: 4px solid;
}

.pp-warning-box--danger {
  background: hsl(var(--pp-destructive-light));
  border-color: hsl(var(--pp-destructive));
}

.pp-warning-box--warning {
  background: hsl(var(--pp-warning-light));
  border-color: hsl(var(--pp-warning));
}

.pp-warning-box--muted {
  background: hsl(var(--pp-muted));
  border-color: hsl(var(--pp-border));
}

.pp-warning-box__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pp-warning-box--danger .pp-warning-box__title {
  color: hsl(var(--pp-destructive));
}

.pp-warning-box--warning .pp-warning-box__title {
  color: hsl(var(--pp-warning));
}

.pp-warning-box__content {
  font-size: 0.875rem;
  color: hsl(var(--pp-muted-foreground));
  line-height: 1.6;
}

.pp-warning-box__note {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--pp-border));
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  font-style: italic;
}

/* Reviews */
.pp-reviews {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pp-reviews__summary {
  display: flex;
  gap: 2rem;
  padding: 1.5rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
}

.pp-reviews__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-right: 2rem;
  border-right: 1px solid hsl(var(--pp-border));
}

.pp-reviews__score-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
  line-height: 1;
}

.pp-reviews__score-stars {
  display: flex;
  gap: 0.125rem;
}

.pp-reviews__score-count {
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-reviews__distribution {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pp-reviews__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pp-reviews__bar-label {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  width: 2rem;
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-reviews__bar-track {
  flex: 1;
  height: 0.5rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius-full);
  overflow: hidden;
}

.pp-reviews__bar-fill {
  height: 100%;
  background: hsl(var(--pp-primary));
  border-radius: var(--pp-radius-full);
}

.pp-reviews__bar-count {
  width: 1.5rem;
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  text-align: right;
}

.pp-reviews__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: transparent;
  border: 2px dashed hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-muted-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-reviews__add:hover {
  border-color: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary));
}

.pp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-review {
  padding: 1.25rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
}

.pp-review__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pp-review__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius-full);
  color: hsl(var(--pp-muted-foreground));
  flex-shrink: 0;
}

.pp-review__avatar svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-review__meta {
  flex: 1;
}

.pp-review__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
}

.pp-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--pp-success));
}

.pp-review__verified svg {
  width: 0.875rem;
  height: 0.875rem;
}

.pp-review__rating-date {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.pp-review__stars {
  display: flex;
  gap: 0.0625rem;
}

.pp-review__stars svg {
  width: 0.875rem;
  height: 0.875rem;
}

.pp-review__date {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-review__content {
  font-size: 0.875rem;
  color: hsl(var(--pp-muted-foreground));
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.pp-review__footer {
  display: flex;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--pp-border));
}

.pp-review__helpful {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: transparent;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-review__helpful:hover {
  background: hsl(var(--pp-muted));
  color: hsl(var(--pp-foreground));
}

.pp-review__helpful svg {
  width: 0.875rem;
  height: 0.875rem;
}

.pp-review__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  margin-bottom: 0.5rem;
}

.pp-review__rating {
  display: flex;
  gap: 0.125rem;
  margin-bottom: 0.75rem;
}

.pp-review__star {
  color: #e5e7eb;
}

.pp-review__star--filled {
  color: #f59e0b;
}

.pp-review__star--empty {
  color: #e5e7eb;
}

.pp-reviews__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  color: hsl(var(--pp-muted-foreground));
}

.pp-reviews__empty p {
  margin-top: 1rem;
  font-size: 0.9375rem;
}

/* Shipping info */
.pp-shipping {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-shipping__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
}

.pp-shipping__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius);
  color: hsl(var(--pp-muted-foreground));
  flex-shrink: 0;
}

.pp-shipping__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-shipping__content {
  flex: 1;
}

.pp-shipping__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  margin-bottom: 0.25rem;
}

.pp-shipping__desc {
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
}

/* ============================================
   17. CROSS-SELLING / UP-SELLING
   ============================================ */

.pp-products-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--pp-border));
}

.pp-products-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
  margin-bottom: 1.5rem;
}

.pp-products-carousel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .pp-products-carousel {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .pp-products-carousel {
    grid-template-columns: repeat(5, 1fr);
  }
}

.pp-product-card {
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  transition: var(--pp-transition-slow);
}

.pp-product-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--pp-shadow-hover);
}

.pp-product-card__image {
  position: relative;
  aspect-ratio: 1;
  background: hsl(var(--pp-muted));
  overflow: hidden;
}

.pp-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.3s ease;
}

.pp-product-card:hover .pp-product-card__image img {
  transform: scale(1.05);
}

.pp-product-card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: hsl(var(--pp-accent));
  color: hsl(var(--pp-accent-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--pp-radius-sm);
}

.pp-product-card__content {
  padding: 0.875rem;
}

.pp-product-card__title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.pp-product-card__title a {
  color: inherit;
  text-decoration: none;
}

.pp-product-card__title a:hover {
  color: hsl(var(--pp-primary));
}

.pp-product-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pp-product-card__price-old {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  text-decoration: line-through;
}

.pp-product-card__price-current {
  font-size: 0.9375rem;
  font-weight: 700;
  color: hsl(var(--pp-accent));
}

.pp-product-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius);
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-product-card__btn:hover {
  background: hsl(var(--pp-primary-dark));
}

.pp-product-card__btn svg {
  width: 1rem;
  height: 1rem;
}

.pp-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================
   18. STICKY CART PANEL
   ============================================ */

.pp-sticky-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: hsl(var(--pp-card));
  border-top: 1px solid hsl(var(--pp-border));
  box-shadow: 0 -4px 20px hsl(220 20% 15% / 0.1);
  z-index: 40;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.pp-sticky-cart.visible {
  transform: translateY(0);
}

.pp-sticky-cart__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pp-sticky-cart__info {
  flex: 1;
  min-width: 0;
}

.pp-sticky-cart__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-sticky-cart__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.pp-sticky-cart__price-old {
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
  text-decoration: line-through;
}

.pp-sticky-cart__price-current {
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
}

.pp-sticky-cart__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pp-sticky-cart__qty {
  display: flex;
  align-items: center;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  overflow: hidden;
}

.pp-sticky-cart__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.pp-sticky-cart__qty-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.pp-sticky-cart__qty-input {
  width: 2.5rem;
  height: 2.25rem;
  text-align: center;
  border: none;
  border-left: 1px solid hsl(var(--pp-border));
  border-right: 1px solid hsl(var(--pp-border));
  font-size: 0.875rem;
  font-weight: 600;
}

.pp-sticky-cart__wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  color: hsl(var(--pp-muted-foreground));
  cursor: pointer;
}

.pp-sticky-cart__wishlist:hover {
  color: hsl(var(--pp-destructive));
  border-color: hsl(var(--pp-destructive) / 0.3);
}

.pp-sticky-cart__wishlist svg {
  width: 1.125rem;
  height: 1.125rem;
}

.pp-sticky-cart__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.pp-sticky-cart__btn:hover {
  background: hsl(var(--pp-primary-dark));
}

.pp-sticky-cart__btn svg {
  width: 1rem;
  height: 1rem;
}

/* ============================================
   19. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
  .pp-sticky-cart__container {
    flex-wrap: wrap;
  }

  .pp-sticky-cart__info {
    flex: 1 1 100%;
    margin-bottom: 0.5rem;
  }

  .pp-sticky-cart__actions {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .pp-reviews__summary {
    flex-direction: column;
  }

  .pp-reviews__score {
    padding-right: 0;
    padding-bottom: 1rem;
    border-right: none;
    border-bottom: 1px solid hsl(var(--pp-border));
  }

  .pp-price-history__stats {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   20. UTILITIES
   ============================================ */

.pp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pp-text-balance {
  text-wrap: balance;
}

/* ============================================
   21. COUNTDOWN TIMER (Nowa wersja)
   ============================================ */

.pp-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: hsl(var(--pp-accent-light));
  border: 1px solid hsl(var(--pp-accent) / 0.2);
  border-radius: var(--pp-radius-xl);
}

.pp-countdown__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-accent));
}

.pp-countdown__header svg {
  width: 1rem;
  height: 1rem;
}

.pp-countdown__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pp-countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1rem;
  background: hsl(var(--pp-card));
  border-radius: var(--pp-radius-lg);
  min-width: 3.5rem;
}

.pp-countdown__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
  line-height: 1;
}

.pp-countdown__label {
  font-size: 0.625rem;
  font-weight: 500;
  color: hsl(var(--pp-muted-foreground));
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Kontener dni - pełne style */
.pp-countdown__days {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0.75rem 1rem;
  background: hsl(var(--pp-card));
  border-radius: var(--pp-radius-lg);
  min-width: 3.5rem;
}

.pp-countdown__days .pp-countdown__label {
  display: block !important;
}

.pp-countdown__separator {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--pp-muted-foreground));
}

/* ============================================
   22. CALCULATOR ACCORDION (Nowa wersja)
   ============================================ */

.pp-calculator {
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  background: hsl(var(--pp-card));
}

.pp-calculator + .pp-calculator {
  margin-top: 0.5rem;
}

.pp-calculator__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-calculator__header:hover {
  background: hsl(var(--pp-muted) / 0.5);
}

.pp-calculator__header.active {
  background: hsl(var(--pp-muted) / 0.3);
}

.pp-calculator__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
}

.pp-calculator__title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--pp-primary));
}

.pp-calculator__chevron {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--pp-muted-foreground));
  transition: transform 0.2s ease;
}

.pp-calculator__header.active .pp-calculator__chevron {
  transform: rotate(180deg);
}

.pp-calculator__content {
  padding: 1rem;
  padding-top: 0;
  border-top: 1px solid hsl(var(--pp-border));
  animation: pp-fade-in 0.2s ease-out;
}

.pp-calculator__desc {
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Pallet calculator - style the module button to match */
.pp-calculator--pallet .pp-calculator__pallet-hook {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1rem;
}

.pp-calculator--pallet #pddeliverycostbydistancepro_widget_btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
  justify-content: space-between;
}

.pp-calculator--pallet #pddeliverycostbydistancepro_widget_btn i {
  color: hsl(var(--pp-primary));
  margin-right: 0.5rem;
}

.pp-calculator--pallet #pddeliverycostbydistancepro_widget_btn:hover {
  color: hsl(var(--pp-primary));
}

.pp-calculator--pallet #pddeliverycostbydistancepro_widget_btn::after {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
}

/* Dosage calculator specific styles */
.pp-dosage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-dosage__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
}

.pp-dosage__label svg {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--pp-primary));
}

.pp-dosage__input {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pp-dosage__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 0.5rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius-full);
  cursor: pointer;
}

.pp-dosage__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: hsl(var(--pp-primary));
  border-radius: var(--pp-radius-full);
  cursor: pointer;
  box-shadow: var(--pp-shadow);
}

.pp-dosage__number {
  width: 4rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  text-align: center;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius);
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  background: hsl(var(--pp-background));
}

.pp-dosage__results {
  display: flex;
  gap: 0.75rem;
}

.pp-dosage__result {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border-radius: var(--pp-radius-lg);
  text-align: center;
}

.pp-dosage__result--qty {
  background: hsl(var(--pp-primary) / 0.05);
  border: 1px solid hsl(var(--pp-primary) / 0.2);
}

.pp-dosage__result--cost {
  background: hsl(var(--pp-accent) / 0.05);
  border: 1px solid hsl(var(--pp-accent) / 0.2);
}

.pp-dosage__result svg {
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.5rem;
}

.pp-dosage__result--qty svg {
  color: hsl(var(--pp-primary));
}

.pp-dosage__result--cost svg {
  color: hsl(var(--pp-accent));
}

.pp-dosage__value {
  font-size: 1.25rem;
  font-weight: 700;
}

.pp-dosage__result--qty .pp-dosage__value {
  color: hsl(var(--pp-primary));
}

.pp-dosage__result--cost .pp-dosage__value {
  color: hsl(var(--pp-accent));
}

.pp-dosage__unit {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  margin-top: 0.125rem;
}

.pp-dosage__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-dosage__add:hover {
  background: hsl(var(--pp-primary-dark));
}

/* ============================================
   23. STICKY CART PANEL (Nowa wersja)
   ============================================ */

.pp-sticky-cart__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.25rem;
  background: transparent;
  border: none;
  color: hsl(var(--pp-muted-foreground));
  cursor: pointer;
}

@media (min-width: 768px) {
  .pp-sticky-cart__expand {
    display: none;
  }
}

.pp-sticky-cart__expand svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease;
}

.pp-sticky-cart.expanded .pp-sticky-cart__expand svg {
  transform: rotate(180deg);
}

.pp-sticky-cart__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pp-sticky-cart__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

@media (max-width: 767px) {
  .pp-sticky-cart__name {
    font-size: 0.8125rem;
  }
}

.pp-sticky-cart__prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.pp-sticky-cart__old {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  text-decoration: line-through;
}

.pp-sticky-cart__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
}

.pp-sticky-cart__price--promo {
  color: hsl(var(--pp-accent));
}

.pp-sticky-cart__qty {
  display: flex;
  align-items: center;
}

.pp-sticky-cart__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: hsl(var(--pp-muted));
  border: 1px solid hsl(var(--pp-border));
  color: hsl(var(--pp-foreground));
  font-weight: 500;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-sticky-cart__qty-btn:first-child {
  border-radius: var(--pp-radius) 0 0 var(--pp-radius);
}

.pp-sticky-cart__qty-btn:last-child {
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
}

.pp-sticky-cart__qty-btn:hover {
  background: hsl(var(--pp-muted) / 0.8);
}

.pp-sticky-cart__qty-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2rem;
  border-top: 1px solid hsl(var(--pp-border));
  border-bottom: 1px solid hsl(var(--pp-border));
  background: hsl(var(--pp-background));
  font-size: 0.875rem;
  font-weight: 500;
}

.pp-sticky-cart__add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-sticky-cart__add:hover {
  background: hsl(var(--pp-primary-dark));
}

.pp-sticky-cart__add svg {
  width: 1.125rem;
  height: 1.125rem;
}

@media (max-width: 639px) {
  .pp-sticky-cart__add span {
    display: none;
  }
}

/* ============================================
   24. QUICK ACTIONS BAR (Share buttons)
   ============================================ */

.pp-quick-actions__share {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pp-quick-actions__share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--pp-muted-foreground));
  margin-right: 0.25rem;
}

.pp-quick-actions__share-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.pp-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--pp-radius);
  color: hsl(var(--pp-muted-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-share-btn svg {
  width: 1rem;
  height: 1rem;
}

.pp-share-btn--facebook:hover {
  color: #1877F2;
  background: hsl(222 89% 56% / 0.1);
}

.pp-share-btn--twitter:hover {
  color: hsl(var(--pp-foreground));
  background: hsl(var(--pp-muted));
}

.pp-share-btn--copy:hover {
  color: hsl(var(--pp-primary));
  background: hsl(var(--pp-primary) / 0.1);
}

.pp-quick-action.loading svg {
  animation: pp-pulse 1s ease-in-out infinite;
}

@keyframes pp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================
   25. TOAST NOTIFICATION
   ============================================ */

.pp-toast {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: hsl(var(--pp-foreground));
  color: hsl(var(--pp-background));
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--pp-shadow-lg);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 100;
}

.pp-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pp-toast svg {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--pp-success));
}

/* ============================================
   26. BADGE VARIANTS (Additional)
   ============================================ */

.pp-badge--promo {
  background: hsl(var(--pp-accent-light));
  color: hsl(var(--pp-accent));
  animation: pp-pulse 2s ease-in-out infinite;
}

.pp-badge--danger {
  background: hsl(var(--pp-destructive-light));
  color: hsl(var(--pp-destructive));
}

.pp-badge--sor {
  background: hsl(var(--pp-primary-light));
  color: hsl(var(--pp-primary));
}

.pp-badges--compact .pp-badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  gap: 0.25rem;
}

.pp-badges--compact .pp-badge svg {
  width: 0.75rem;
  height: 0.75rem;
}

@media (max-width: 639px) {
  .pp-badges--compact .pp-badge span {
    display: none;
  }
}

/* ============================================
   27. MINI PRODUCT CARD (Cross-selling)
   ============================================ */

.pp-card-mini {
  background: hsl(var(--pp-card));
  border-radius: var(--pp-radius-xl);
  overflow: hidden;
  box-shadow: var(--pp-shadow);
  transition: all 0.3s ease;
}

.pp-card-mini:hover {
  box-shadow: var(--pp-shadow-hover);
  transform: translateY(-0.25rem);
}

.pp-card-mini__image {
  position: relative;
  aspect-ratio: 1;
  background: hsl(var(--pp-muted));
  overflow: hidden;
}

.pp-card-mini__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.5s ease;
}

.pp-card-mini:hover .pp-card-mini__image img {
  transform: scale(1.1);
}

.pp-card-mini__promo {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: hsl(var(--pp-accent));
  color: hsl(var(--pp-accent-foreground));
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--pp-radius-sm);
  animation: pp-pulse 2s ease-in-out infinite;
}

.pp-card-mini__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(0 0% 0% / 0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
}

.pp-card-mini:hover .pp-card-mini__overlay {
  opacity: 1;
}

.pp-card-mini__quick-add {
  padding: 0.625rem 1rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transform: translateY(1rem);
  transition: all 0.3s ease;
}

.pp-card-mini:hover .pp-card-mini__quick-add {
  transform: translateY(0);
}

.pp-card-mini__quick-add:hover {
  background: hsl(var(--pp-primary-dark));
}

.pp-card-mini__content {
  padding: 1rem;
}

.pp-card-mini__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5rem;
  margin: 0 0 0.5rem 0;
  transition: color 0.2s ease;
}

.pp-card-mini__name a {
  color: inherit;
  text-decoration: none;
}

.pp-card-mini:hover .pp-card-mini__name {
  color: hsl(var(--pp-primary));
}

.pp-card-mini__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pp-card-mini__prices {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.pp-card-mini__old {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  text-decoration: line-through;
}

.pp-card-mini__price {
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
}

.pp-card-mini__price--promo {
  color: hsl(var(--pp-accent));
}

.pp-card-mini__cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pp-card-mini__cart:hover {
  background: hsl(var(--pp-primary-dark));
  transform: scale(1.1);
}

.pp-card-mini__cart svg {
  width: 1rem;
  height: 1rem;
}

/* ============================================
   28. CART SECTION (Main add to cart)
   ============================================ */

.pp-cart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-cart__row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.pp-cart__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  background: hsl(var(--pp-card));
}

.pp-cart__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: none;
  color: hsl(var(--pp-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-cart__qty-btn:hover {
  background: hsl(var(--pp-muted));
}

.pp-cart__qty-btn svg {
  width: 1rem;
  height: 1rem;
}

.pp-cart__qty-input {
  width: 3rem;
  height: 2.75rem;
  text-align: center;
  border: none;
  border-left: 1px solid hsl(var(--pp-border));
  border-right: 1px solid hsl(var(--pp-border));
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  background: transparent;
  -moz-appearance: textfield;
}

.pp-cart__qty-input::-webkit-outer-spin-button,
.pp-cart__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pp-cart__add {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 3rem;
  padding: 0 1.5rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-cart__add:hover {
  background: hsl(var(--pp-primary-dark));
}

.pp-cart__add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pp-cart__add svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-cart__wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  color: hsl(var(--pp-muted-foreground));
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-cart__wishlist:hover {
  color: hsl(var(--pp-destructive));
  border-color: hsl(var(--pp-destructive) / 0.3);
  background: hsl(var(--pp-destructive-light));
}

.pp-cart__wishlist.active {
  color: hsl(var(--pp-destructive));
  background: hsl(var(--pp-destructive-light));
  border-color: hsl(var(--pp-destructive) / 0.3);
}

.pp-cart__wishlist.active svg {
  fill: currentColor;
}

.pp-cart__wishlist svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================
   29. ANIMATION KEYFRAMES
   ============================================ */

@keyframes pp-slide-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pp-animate-slide-up {
  animation: pp-slide-up 0.3s ease-out;
}

@keyframes pp-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pp-animate-scale-in {
  animation: pp-scale-in 0.2s ease-out;
}

/* ============================================
   30. PURPOSE / PRZEZNACZENIE TAB
   ============================================ */

.pp-purpose {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pp-purpose__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pp-purpose__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
}

.pp-purpose__label svg {
  width: 1.125rem;
  height: 1.125rem;
  color: hsl(var(--pp-primary));
}

.pp-purpose__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pp-purpose__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: hsl(var(--pp-primary-light));
  color: hsl(var(--pp-primary));
  border: 1px solid hsl(var(--pp-primary) / 0.2);
  border-radius: var(--pp-radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: var(--pp-transition);
}

.pp-purpose__tag:hover {
  background: hsl(var(--pp-primary) / 0.15);
  border-color: hsl(var(--pp-primary) / 0.3);
}

.pp-purpose__value {
  font-size: 0.9375rem;
  color: hsl(var(--pp-foreground));
  line-height: 1.6;
}

/* ============================================
   31. NOTIFY / POWIADOMIENIE O DOSTĘPNOŚCI
   ============================================ */

.pp-notify {
  padding: 1.5rem;
  background: hsl(var(--pp-warning-light));
  border: 1px solid hsl(var(--pp-warning) / 0.3);
  border-radius: var(--pp-radius-xl);
}

.pp-notify__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pp-notify__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--pp-warning));
  color: white;
  border-radius: var(--pp-radius-lg);
  flex-shrink: 0;
}

.pp-notify__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-notify__title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  margin: 0;
}

.pp-notify__subtitle {
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
  margin: 0.25rem 0 0 0;
}

.pp-notify__form {
  display: flex;
  gap: 0.5rem;
}

.pp-notify__input {
  flex: 1;
  height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  background: hsl(var(--pp-background));
  color: hsl(var(--pp-foreground));
}

.pp-notify__input:focus {
  outline: none;
  border-color: hsl(var(--pp-primary));
  box-shadow: 0 0 0 3px hsl(var(--pp-primary) / 0.1);
}

.pp-notify__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pp-transition);
}

.pp-notify__button:hover {
  background: hsl(var(--pp-primary-dark));
}

.pp-notify__button svg {
  width: 1rem;
  height: 1rem;
}

.pp-notify__disclaimer {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-notify__disclaimer svg {
  flex-shrink: 0;
}

/* ============================================
   32. WARNING BOXES (UWAGA tab)
   ============================================ */

.pp-warning-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-warning-box {
  padding: 1.25rem;
  border-radius: var(--pp-radius-lg);
}

.pp-warning-box--danger {
  background: hsl(var(--pp-destructive-light));
  border: 1px solid hsl(var(--pp-destructive) / 0.3);
}

.pp-warning-box--warning {
  background: hsl(var(--pp-warning-light));
  border: 1px solid hsl(var(--pp-warning) / 0.3);
}

.pp-warning-box--muted {
  background: hsl(var(--pp-muted));
  border: 1px solid hsl(var(--pp-border));
}

.pp-warning-box__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  margin-bottom: 0.5rem;
}

.pp-warning-box--danger .pp-warning-box__title {
  color: hsl(var(--pp-destructive));
}

.pp-warning-box--warning .pp-warning-box__title {
  color: hsl(var(--pp-warning));
}

.pp-warning-box__content {
  font-size: 0.875rem;
  color: hsl(var(--pp-foreground));
  line-height: 1.6;
}

.pp-warning-box__content p {
  margin: 0 0 0.5rem 0;
}

.pp-warning-box__content p:last-child {
  margin-bottom: 0;
}

.pp-warning-box__note {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--pp-border));
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  font-style: italic;
}

.pp-warning-box--info {
  background: hsl(210 100% 97%);
  border: 1px solid hsl(210 100% 80% / 0.5);
}

.pp-warning-box--info .pp-warning-box__title {
  color: hsl(210 100% 40%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pp-warning-box--info .pp-warning-box__title svg {
  color: hsl(210 100% 50%);
}

.pp-warning-list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  list-style: disc;
}

.pp-warning-list li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.pp-warning-list li:last-child {
  margin-bottom: 0;
}

.pp-tab--info {
  color: hsl(210 100% 40%);
}

.pp-tab--info svg {
  color: hsl(210 100% 50%);
}

/* ============================================
   33. SHIPPING TAB
   ============================================ */

.pp-shipping {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pp-shipping__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  transition: var(--pp-transition);
}

.pp-shipping__item:hover {
  border-color: hsl(var(--pp-primary) / 0.3);
  background: hsl(var(--pp-primary-light));
}

.pp-shipping__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--pp-primary-light));
  color: hsl(var(--pp-primary));
  border-radius: var(--pp-radius-lg);
  flex-shrink: 0;
}

.pp-shipping__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pp-shipping__content {
  flex: 1;
}

.pp-shipping__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
  margin-bottom: 0.25rem;
}

.pp-shipping__desc {
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
}

/* ============================================
   34. REVIEWS TAB
   ============================================ */

.pp-reviews__summary {
  display: flex;
  gap: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid hsl(var(--pp-border));
  margin-bottom: 1.5rem;
}

@media (max-width: 639px) {
  .pp-reviews__summary {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.pp-reviews__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.pp-reviews__score-value {
  font-size: 3rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
  line-height: 1;
}

.pp-reviews__score-stars {
  display: flex;
  gap: 0.125rem;
}

.pp-reviews__score-count {
  font-size: 0.875rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-reviews__distribution {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pp-reviews__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pp-reviews__bar-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 2rem;
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
}

.pp-reviews__bar-track {
  flex: 1;
  height: 0.5rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius-full);
  overflow: hidden;
}

.pp-reviews__bar-fill {
  height: 100%;
  background: hsl(var(--pp-warning));
  border-radius: var(--pp-radius-full);
  transition: width 0.5s ease;
}

.pp-reviews__bar-count {
  width: 1.5rem;
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
  text-align: right;
}

.pp-reviews__add {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pp-transition);
  margin-bottom: 1.5rem;
}

.pp-reviews__add:hover {
  background: hsl(var(--pp-primary-dark));
}

.pp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ============================================
   35. PRICE HISTORY TAB
   ============================================ */

.pp-price-history__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 639px) {
  .pp-price-history__stats {
    grid-template-columns: 1fr;
  }
}

.pp-price-history__stat {
  padding: 1rem;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  text-align: center;
}

.pp-price-history__stat-label {
  font-size: 0.8125rem;
  color: hsl(var(--pp-muted-foreground));
  margin-bottom: 0.5rem;
}

.pp-price-history__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
}

.pp-price-history__stat-value--success {
  color: hsl(var(--pp-success));
}

.pp-price-history__chart {
  min-height: 200px;
  background: hsl(var(--pp-card));
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  margin-bottom: 1rem;
}

.pp-price-history__footer {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  text-align: center;
}

/* ============================================
   99. KS SOR MODULE FALLBACK STYLES
   W przypadku gdy ks_sor.css nie załaduje się
   ============================================ */

body#product .ks-sor-card {
  margin: 1rem 0;
  background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body#product .ks-sor-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #16a34a;
  color: #fff;
}

body#product .ks-sor-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

body#product .ks-sor-card__icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

body#product .ks-sor-card__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body#product .ks-sor-card__body {
  display: block !important;
  padding: 16px;
  background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
}

body#product .ks-sor-card__body:empty {
  display: none !important;
}

body#product .ks-sor-card__footer {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.5);
  border-top: 1px solid #bbf7d0;
}

body#product .ks-sor-card__legal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #94a3b8;
}

body#product .ks-sor-card__legal svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

body#product .ks-sor-requirement,
body#product .ks-sor-status {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 8px;
}

body#product .ks-sor-requirement__icon,
body#product .ks-sor-status__icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #16a34a;
}

body#product .ks-sor-requirement__icon svg,
body#product .ks-sor-status__icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

body#product .ks-sor-status__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
}

body#product .ks-sor-status__icon svg {
  width: 20px;
  height: 20px;
}

body#product .ks-sor-status--success {
  background: #dcfce7;
  border-color: #bbf7d0;
}

body#product .ks-sor-status--success .ks-sor-status__icon {
  background: #16a34a;
  color: #fff;
}

body#product .ks-sor-status--warning {
  background: #fef9c3;
  border-color: #fde047;
}

body#product .ks-sor-status--warning .ks-sor-status__icon {
  background: #ca8a04;
  color: #fff;
}

body#product .ks-sor-status--neutral {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

body#product .ks-sor-status--neutral .ks-sor-status__icon {
  background: #64748b;
  color: #fff;
}

body#product .ks-sor-requirement__content,
body#product .ks-sor-status__content {
  flex: 1;
}

body#product .ks-sor-requirement__content strong,
body#product .ks-sor-status__content strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

body#product .ks-sor-requirement__content p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

body#product .ks-sor-status__meta {
  display: block;
  font-size: 12px;
  color: #64748b;
}

body#product .ks-sor-status__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
  text-decoration: none;
  background: #dcfce7;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

body#product .ks-sor-status__action:hover {
  background: #16a34a;
  color: #fff;
  text-decoration: none;
}

body#product .ks-sor-status__action svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ============================================
   100. CALCULATOR ACCORDION
   Kalkulator palety i dawkowania w formie accordiona
   Design 1:1 z wizualizacji React
   ============================================ */

.pp-calc-accordion {
  border-radius: var(--pp-radius-xl);
  border: 1px solid hsl(var(--pp-border));
  background: #fff;
  overflow: hidden;
  margin-top: 1rem;
}

/* Accordion Item */
.pp-calc-accordion__item {
  /* Domyślnie zamknięty */
}

.pp-calc-accordion__item:not(:last-child) {
  border-bottom: 1px solid hsl(var(--pp-border));
}

/* Separator między kalkulatorami */
.pp-calc-accordion__separator {
  height: 1px;
  background: hsl(var(--pp-border));
}

/* Accordion Header (toggle button) */
.pp-calc-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pp-calc-accordion__header:hover {
  background: hsl(var(--pp-muted) / 0.5);
}

.pp-calc-accordion__item.is-open .pp-calc-accordion__header {
  background: hsl(var(--pp-muted) / 0.3);
}

/* Title with icon */
.pp-calc-accordion__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pp-calc-accordion__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--pp-primary));
  flex-shrink: 0;
}

.pp-calc-accordion__title span {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
}

/* Chevron arrow */
.pp-calc-accordion__chevron {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--pp-muted-foreground));
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.pp-calc-accordion__item.is-open .pp-calc-accordion__chevron {
  transform: rotate(180deg);
}

/* Accordion Content - domyślnie ukryte */
.pp-calc-accordion__content {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease;
  padding: 0;
}

/* Gdy otwarty - pokaż treść */
.pp-calc-accordion__item.is-open .pp-calc-accordion__content {
  max-height: 500px !important;
  border-top: 1px solid hsl(var(--pp-border));
  padding: 1rem;
}

/* Description text */
.pp-calc-accordion__desc {
  font-size: 0.875rem;
  color: hsl(var(--pp-muted-foreground));
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
}

/* Primary action button */
.pp-calc-accordion__btn {
  width: 100%;
  padding: 0.625rem 1rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pp-calc-accordion__btn:hover {
  background: hsl(var(--pp-primary-dark));
}

/* ============================================
   101. DOSAGE CALCULATOR (inside accordion)
   ============================================ */

.pp-dosage {
  padding: 1rem;
}

.pp-dosage__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  margin-bottom: 0.5rem;
}

.pp-dosage__label svg {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--pp-primary));
}

/* Input row with slider and number */
.pp-dosage__input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Range slider */
.pp-dosage__slider {
  flex: 1;
  height: 0.5rem;
  background: hsl(var(--pp-muted));
  border-radius: var(--pp-radius-full);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.pp-dosage__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: hsl(var(--pp-primary));
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid hsl(var(--pp-card));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pp-dosage__slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: hsl(var(--pp-primary));
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid hsl(var(--pp-card));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Number input */
.pp-dosage__number {
  width: 4rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  background: hsl(var(--pp-background));
  color: hsl(var(--pp-foreground));
  font-size: 0.875rem;
  text-align: center;
}

.pp-dosage__number:focus {
  outline: none;
  border-color: hsl(var(--pp-primary));
  box-shadow: 0 0 0 3px hsl(var(--pp-primary) / 0.1);
}

/* Results grid */
.pp-dosage__results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Result card */
.pp-dosage__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border-radius: var(--pp-radius-lg);
  text-align: center;
}

.pp-dosage__result svg {
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.25rem;
}

.pp-dosage__result--qty {
  background: hsl(var(--pp-primary) / 0.05);
  border: 1px solid hsl(var(--pp-primary) / 0.2);
}

.pp-dosage__result--qty svg,
.pp-dosage__result--qty .pp-dosage__value {
  color: hsl(var(--pp-primary));
}

.pp-dosage__result--cost {
  background: hsl(var(--pp-accent) / 0.05);
  border: 1px solid hsl(var(--pp-accent) / 0.2);
}

.pp-dosage__result--cost svg,
.pp-dosage__result--cost .pp-dosage__value {
  color: hsl(var(--pp-accent));
}

.pp-dosage__value {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.pp-dosage__unit {
  font-size: 0.875rem;
  font-weight: 400;
  margin-left: 0.125rem;
}

.pp-dosage__label-small {
  display: block;
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  margin-top: 0.125rem;
}

/* Dosage add to cart button */
.pp-dosage .pp-calc-accordion__btn {
  margin-top: 0.5rem;
}

/* ============================================
   102. PALLET CALCULATOR MODAL OVERRIDES
   Style dla modalu kalkulatora palety
   ============================================ */

#pddeliverycostbydistancepro_modal .modal-dialog {
  max-width: 500px;
}

#pddeliverycostbydistancepro_modal .modal-content {
  border-radius: var(--pp-radius-xl);
  border: none;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#pddeliverycostbydistancepro_modal .modal-header {
  border-bottom: 1px solid hsl(var(--pp-border));
  padding: 1.25rem 1.5rem;
}

#pddeliverycostbydistancepro_modal .modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--pp-foreground));
}

#pddeliverycostbydistancepro_modal .modal-body {
  padding: 1.5rem;
}

#pddeliverycostbydistancepro_modal .modal-body p {
  font-size: 0.875rem;
  color: hsl(var(--pp-muted-foreground));
  margin-bottom: 1rem;
}

#pddeliverycostbydistancepro_modal .form-group {
  margin-bottom: 1rem;
}

#pddeliverycostbydistancepro_modal label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  margin-bottom: 0.375rem;
}

#pddeliverycostbydistancepro_modal .form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid hsl(var(--pp-border));
  border-radius: var(--pp-radius-lg);
  background: hsl(var(--pp-background));
  color: hsl(var(--pp-foreground));
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#pddeliverycostbydistancepro_modal .form-control:focus {
  outline: none;
  border-color: hsl(var(--pp-primary));
  box-shadow: 0 0 0 3px hsl(var(--pp-primary) / 0.1);
}

#pddeliverycostbydistancepro_modal .modal-footer {
  border-top: 1px solid hsl(var(--pp-border));
  padding: 1rem 1.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

#pddeliverycostbydistancepro_modal .btn-secondary {
  padding: 0.625rem 1.25rem;
  background: hsl(var(--pp-muted));
  color: hsl(var(--pp-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#pddeliverycostbydistancepro_modal .btn-secondary:hover {
  background: hsl(var(--pp-border));
}

#pddeliverycostbydistancepro_modal .btn-primary {
  padding: 0.625rem 1.25rem;
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  border-radius: var(--pp-radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#pddeliverycostbydistancepro_modal .btn-primary:hover {
  background: hsl(var(--pp-primary-dark));
}

#pddeliverycostbydistancepro_modal #pddeliverycostbydistancepro_info {
  padding: 1rem;
  background: hsl(var(--pp-primary) / 0.1);
  border: 1px solid hsl(var(--pp-primary) / 0.2);
  border-radius: var(--pp-radius-lg);
  color: hsl(var(--pp-primary));
}

#pddeliverycostbydistancepro_modal #pddeliverycostbydistancepro_info .price {
  font-size: 1.25rem;
  font-weight: 700;
}

#pddeliverycostbydistancepro_modal #pddeliverycostbydistancepro_error {
  padding: 1rem;
  background: hsl(var(--pp-destructive) / 0.1);
  border: 1px solid hsl(var(--pp-destructive) / 0.2);
  border-radius: var(--pp-radius-lg);
  color: hsl(var(--pp-destructive));
}

/* Hide original trigger button from module - we use accordion button */
body#product #pddeliverycostbydistancepro_widget_btn {
  display: none !important;
}

/* Ensure accordion content is properly hidden */
body#product .pp-calc-accordion__content {
  visibility: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s 0.3s;
}

body#product .pp-calc-accordion__item.is-open .pp-calc-accordion__content {
  visibility: visible;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s 0s;
}

/* ============================================
   CROSSSELLING / UPSELLING SECTION
   Nowy design zgodny z wizualizacją
   ============================================ */

/* Sekcja główna */
body#product .pp-related-section {
  padding: 2rem 0;
  margin-top: 1.5rem;
}

body#product .pp-related-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
  margin-bottom: 1.5rem;
}

/* Grid produktów */
body#product .pp-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 576px) {
  body#product .pp-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  body#product .pp-related-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  body#product .pp-related-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
  }
}

/* Mini karta produktu */
body#product .pp-product-card-mini {
  background: hsl(var(--pp-card));
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pp-shadow);
  transition: var(--pp-transition-slow);
  display: flex;
  flex-direction: column;
}

body#product .pp-product-card-mini:hover {
  box-shadow: var(--pp-shadow-hover);
  transform: translateY(-4px);
}

/* Obrazek produktu */
body#product .pp-product-card-mini__image {
  position: relative;
  aspect-ratio: 1;
  background: hsl(var(--pp-muted));
  overflow: hidden;
}

body#product .pp-product-card-mini__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.5s ease;
}

body#product .pp-product-card-mini:hover .pp-product-card-mini__image img {
  transform: scale(1.1);
}

/* Badge promocji */
body#product .pp-product-card-mini__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--pp-radius-sm);
  background: hsl(var(--pp-accent));
  color: hsl(var(--pp-accent-foreground));
  font-size: 0.7rem;
  font-weight: 600;
  z-index: 2;
}

/* Overlay na hover z przyciskiem */
body#product .pp-product-card-mini__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body#product .pp-product-card-mini:hover .pp-product-card-mini__overlay {
  opacity: 1;
}

body#product .pp-product-card-mini__overlay-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--pp-radius);
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transform: translateY(1rem);
  transition: var(--pp-transition);
}

body#product .pp-product-card-mini:hover .pp-product-card-mini__overlay-btn {
  transform: translateY(0);
}

body#product .pp-product-card-mini__overlay-btn:hover {
  background: hsl(var(--pp-primary-dark));
}

/* Zawartość karty */
body#product .pp-product-card-mini__content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

body#product .pp-product-card-mini__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--pp-foreground));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.45rem;
  transition: color 0.2s ease;
  text-decoration: none;
}

body#product .pp-product-card-mini__name:hover {
  color: hsl(var(--pp-primary));
}

/* Cena i koszyk */
body#product .pp-product-card-mini__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

body#product .pp-product-card-mini__prices {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

body#product .pp-product-card-mini__price-old {
  font-size: 0.75rem;
  color: hsl(var(--pp-muted-foreground));
  text-decoration: line-through;
}

body#product .pp-product-card-mini__price {
  font-size: 1.1rem;
  font-weight: 700;
  color: hsl(var(--pp-foreground));
}

body#product .pp-product-card-mini__price--promo {
  color: hsl(var(--pp-accent));
}

body#product .pp-product-card-mini__cart-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pp-radius);
  background: hsl(var(--pp-primary));
  color: hsl(var(--pp-primary-foreground));
  border: none;
  cursor: pointer;
  transition: var(--pp-transition);
  flex-shrink: 0;
}

body#product .pp-product-card-mini__cart-btn:hover {
  background: hsl(var(--pp-primary-dark));
  transform: scale(1.1);
}

body#product .pp-product-card-mini__cart-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Ukryj stary styl sekcji produktów (fallback gdyby moduł nie użył override) */
body#product .products-section:not(.pp-related-section) .product_list:not(.pp-related-grid) {
  display: none !important;
}

/* Separator między sekcjami */
body#product .pp-related-section + .pp-related-section {
  border-top: 1px solid hsl(var(--pp-border));
  padding-top: 2rem;
}