/**
 * Prime Lens — Main Theme Stylesheet
 * Mobile-first. All brand colors via CSS custom properties.
 * @package prime-lens
 */

/* ═══════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (Design Tokens)
══════════════════════════════════════════════════════════ */
:root {
  /* Brand Colors */
  --pl-primary:        #53B1E4;
  --pl-primary-dark:   #3a9fd0;
  --pl-secondary:      #454AA0;
  --pl-secondary-dark: #353980;

  /* WhatsApp */
  --pl-whatsapp:       #25D366;
  --pl-whatsapp-dark:  #128C7E;

  /* Backgrounds */
  --pl-bg:             #ffffff;
  --pl-bg-muted:       #f8f9fa;
  --pl-bg-accent:      #f0f8fc;

  /* Text */
  --pl-text:           #1a1a1a;
  --pl-text-muted:     #6c757d;
  --pl-text-light:     #adb5bd;

  /* UI */
  --pl-border:         rgba(0, 0, 0, 0.08);
  --pl-border-solid:   #e9ecef;
  --pl-price:          #454AA0;
  --pl-success:        #22c55e;
  --pl-danger:         #d4183d;

  /* Gradients */
  --pl-gradient-main:       linear-gradient(to right, #53B1E4, #454AA0);
  --pl-gradient-hero-1:     linear-gradient(to right, rgba(83,177,228,0.90), rgba(69,74,160,0.90));
  --pl-gradient-hero-2:     linear-gradient(to right, rgba(69,74,160,0.90), rgba(83,177,228,0.90));
  --pl-gradient-hero-3:     linear-gradient(to right, rgba(83,177,228,0.85), rgba(147,51,234,0.85));
  --pl-gradient-whatsapp:   linear-gradient(to right, #25D366, #128C7E);

  /* Shadows */
  --pl-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --pl-shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --pl-shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
  --pl-shadow-xl:  0 20px 50px rgba(0,0,0,0.15);

  /* Border Radius */
  --pl-radius-sm:   0.375rem;
  --pl-radius:      0.5rem;
  --pl-radius-lg:   0.75rem;
  --pl-radius-xl:   1rem;
  --pl-radius-2xl:  1.5rem;
  --pl-radius-full: 9999px;

  /* Spacing */
  --pl-space-1:  0.25rem;
  --pl-space-2:  0.5rem;
  --pl-space-3:  0.75rem;
  --pl-space-4:  1rem;
  --pl-space-6:  1.5rem;
  --pl-space-8:  2rem;
  --pl-space-12: 3rem;
  --pl-space-16: 4rem;
  --pl-space-24: 6rem;

  /* Container */
  --pl-container-max: 1280px;
  --pl-container-pad: 1rem;

  /* Transitions */
  --pl-transition:      all 0.3s ease;
  --pl-transition-slow: all 0.5s ease;
  --pl-transition-fast: all 0.15s ease;
}

/* ═══════════════════════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--pl-text);
  background: var(--pl-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; line-height: 1.2; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════════
   3. TYPOGRAPHY
══════════════════════════════════════════════════════════ */
h1 { font-size: 2.25rem; font-weight: 600; }
h2 { font-size: 1.75rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 500; }
h4 { font-size: 1rem;    font-weight: 500; }
small { font-size: 0.875rem; }

@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.5rem; }
}

.pl-section-header   { text-align: center; margin-bottom: 3rem; }
.pl-section-title    { font-size: 1.75rem; font-weight: 600; color: var(--pl-text); margin-bottom: 1rem; }
.pl-section-subtitle { font-size: 1.125rem; color: var(--pl-text-muted); }

@media (min-width: 768px) {
  .pl-section-title { font-size: 2.25rem; }
}

/* ═══════════════════════════════════════════════════════
   4. LAYOUT UTILITIES
══════════════════════════════════════════════════════════ */
.pl-container {
  max-width: var(--pl-container-max);
  margin: 0 auto;
  padding: 0 var(--pl-container-pad);
}
@media (min-width: 768px)  { .pl-container { padding: 0 1.5rem; } }
@media (min-width: 1280px) { .pl-container { padding: 0 2rem; } }

.pl-section { padding: 4rem 1rem; }
@media (min-width: 768px)  { .pl-section { padding: 6rem 1.5rem; } }

.hidden { display: none !important; }
.pl-no-scroll { overflow: hidden; }

/* ═══════════════════════════════════════════════════════
   5. BUTTONS
══════════════════════════════════════════════════════════ */
.pl-btn-primary {
  background-color: var(--pl-primary);
  color: #ffffff;
  padding: 0.75rem 2rem;
  border-radius: var(--pl-radius-full);
  border: none;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--pl-transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.pl-btn-primary:hover {
  background-color: var(--pl-secondary);
  transform: translateY(-1px);
  box-shadow: var(--pl-shadow-lg);
  color: #fff;
}

.pl-btn-secondary {
  background: transparent;
  color: var(--pl-primary);
  border: 2px solid var(--pl-primary);
  padding: 0.75rem 2rem;
  border-radius: var(--pl-radius-full);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--pl-transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.pl-btn-secondary:hover {
  background: var(--pl-primary);
  color: #ffffff;
}

.pl-btn-white {
  background: #ffffff;
  color: var(--pl-secondary);
  padding: 1rem 2.5rem;
  border-radius: var(--pl-radius-full);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pl-transition);
  box-shadow: var(--pl-shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.pl-btn-white:hover {
  background: #f1f5f9;
  box-shadow: var(--pl-shadow-xl);
  transform: scale(1.03);
  color: var(--pl-secondary);
}

/* ═══════════════════════════════════════════════════════
   6. BADGES
══════════════════════════════════════════════════════════ */
.pl-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--pl-radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}
.pl-badge-primary   { background: var(--pl-primary);   color: #fff; }
.pl-badge-secondary { background: var(--pl-secondary); color: #fff; }
.pl-badge-success   { background: #dcfce7; color: #166534; }
.pl-badge-sale      { background: #fef3c7; color: #92400e; }

/* ═══════════════════════════════════════════════════════
   7. CARDS
══════════════════════════════════════════════════════════ */
.pl-card {
  background: #ffffff;
  border-radius: var(--pl-radius-2xl);
  overflow: hidden;
  box-shadow: var(--pl-shadow-sm);
  transition: var(--pl-transition);
}
.pl-card:hover {
  box-shadow: var(--pl-shadow-xl);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════
   8. FORM INPUTS
══════════════════════════════════════════════════════════ */
.pl-input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--pl-border-solid);
  border-radius: var(--pl-radius-lg);
  font-size: 1rem;
  background: #ffffff;
  color: var(--pl-text);
  outline: none;
  transition: var(--pl-transition-fast);
}
.pl-input:focus {
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px rgba(83, 177, 228, 0.15);
}

/* ═══════════════════════════════════════════════════════
   9. STARS
══════════════════════════════════════════════════════════ */
.pl-stars { display: inline-flex; gap: 2px; }
.pl-star  { color: #d1d5db; font-size: 1rem; line-height: 1; }
.pl-star.filled { color: #FBBF24; }

/* ═══════════════════════════════════════════════════════
   10. TOP BAR
══════════════════════════════════════════════════════════ */
.pl-topbar {
  background: var(--pl-secondary);
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.pl-topbar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: var(--pl-container-max);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) {
  .pl-topbar__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}
.pl-topbar__shipping { display: flex; align-items: center; gap: 0.5rem; }
.pl-topbar__right    { display: flex; align-items: center; gap: 1.5rem; }
.pl-topbar__whatsapp {
  display: flex; align-items: center; gap: 0.5rem;
  color: #fff; text-decoration: none;
  transition: opacity 0.2s;
}
.pl-topbar__whatsapp:hover { opacity: 0.8; }
.pl-topbar__socials { display: flex; align-items: center; gap: 0.75rem; }
.pl-topbar__social-link {
  color: #fff; opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.2s;
  display: flex; align-items: center;
}
.pl-topbar__social-link:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   11. MAIN NAV
══════════════════════════════════════════════════════════ */
.pl-main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--pl-shadow-sm);
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
  will-change: transform;
}

/* Scrolled state — subtle blur + stronger shadow */
.pl-main-nav--scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.10);
}

/*
 * Offset everything below the fixed nav.
 * Nav height: 80px (5rem). Topbar height: ~36px (2.25rem).
 * Total offset = 80px. Topbar scrolls naturally above the fixed nav.
 */
body {
  padding-top: 80px;
}

.pl-main-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  max-width: var(--pl-container-max);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) { .pl-main-nav__inner { padding: 0 1.5rem; } }

/* Logo */
.pl-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}
.pl-nav-logo__circle {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--pl-gradient-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pl-nav-logo__letters {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.pl-nav-logo__name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pl-text);
  white-space: nowrap;
}

/* Left group */
.pl-nav-left { display: flex; align-items: center; gap: 2rem; }

/* Desktop nav links */
.pl-nav-links {
  display: none;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}
@media (min-width: 1024px) { .pl-nav-links { display: flex; } }

.pl-nav-links li { position: relative; }

.pl-nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0;
  color: var(--pl-text);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  white-space: nowrap;
}
.pl-nav-link:hover { color: var(--pl-primary); }
.pl-nav-link svg   { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 0.2s; }

/* Dropdown */
.pl-nav-dropdown-wrap { position: relative; }
.pl-nav-dropdown-trigger { cursor: pointer; }
.pl-nav-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 14rem;
  background: #fff;
  border-radius: var(--pl-radius-lg);
  box-shadow: var(--pl-shadow-xl);
  border: 1px solid var(--pl-border-solid);
  padding: 0.5rem 0;
  z-index: 100;
}
.pl-nav-dropdown-panel--open { display: block; }
.pl-nav-dropdown-panel a {
  display: block;
  padding: 0.625rem 1rem;
  color: var(--pl-text);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background 0.15s;
  white-space: nowrap;
}
.pl-nav-dropdown-panel a:hover { background: var(--pl-bg-muted); color: var(--pl-primary); }

/* Right group */
.pl-nav-right { display: flex; align-items: center; gap: 0.75rem; }

.pl-nav-search-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--pl-text);
  background: none;
  border: none;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: color 0.2s;
}
@media (min-width: 768px) { .pl-nav-search-btn { display: flex; } }
.pl-nav-search-btn:hover { color: var(--pl-primary); }
.pl-nav-search-btn svg { width: 1.25rem; height: 1.25rem; }

.pl-nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--pl-text);
  background: none;
  border: none;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
  position: relative;
}
.pl-nav-icon-btn:hover { color: var(--pl-primary); }
.pl-nav-icon-btn svg { width: 1.25rem; height: 1.25rem; }

.pl-cart-count {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--pl-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pl-nav-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--pl-text);
  cursor: pointer;
}
@media (min-width: 1024px) { .pl-nav-hamburger { display: none; } }
.pl-nav-hamburger svg { width: 1.5rem; height: 1.5rem; }

/* Mobile menu */
.pl-mobile-menu {
  display: none;
  border-top: 1px solid var(--pl-border-solid);
  padding: 1rem 0;
  background: #fff;
}
.pl-mobile-menu--open { display: block; }
.pl-mobile-menu__inner {
  max-width: var(--pl-container-max);
  margin: 0 auto;
  padding: 0 1rem;
}
.pl-mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}
.pl-mobile-menu__links a,
.pl-mobile-menu__links .pl-mobile-link {
  display: block;
  padding: 0.75rem 0;
  color: var(--pl-text);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid var(--pl-border-solid);
  transition: color 0.2s;
}
.pl-mobile-menu__links a:hover,
.pl-mobile-menu__links .pl-mobile-link:hover { color: var(--pl-primary); }

/* ═══════════════════════════════════════════════════════
   12. HERO CAROUSEL
══════════════════════════════════════════════════════════ */
.pl-hero-carousel {
  position: relative;
  height: 500px;
  overflow: hidden;
}
@media (min-width: 768px)  { .pl-hero-carousel { height: 600px; } }
@media (min-width: 1024px) { .pl-hero-carousel { height: 700px; } }

.pl-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.pl-hero-slide--active {
  opacity: 1;
  pointer-events: auto;
}

.pl-hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pl-hero-slide__gradient {
  position: absolute;
  inset: 0;
}
.pl-hero-slide__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pl-hero-content-box {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);
  padding: 2rem;
  text-align: center;
  max-width: 56rem;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px)  { .pl-hero-content-box { padding: 3rem; } }
@media (min-width: 1024px) { .pl-hero-content-box { padding: 4rem; } }

.pl-hero-title {
  font-size: 2.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.1;
}
@media (min-width: 768px)  { .pl-hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .pl-hero-title { font-size: 3.75rem; } }

.pl-hero-subtitle {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.95);
  margin-bottom: 2rem;
}
@media (min-width: 768px)  { .pl-hero-subtitle { font-size: 1.25rem; } }
@media (min-width: 1024px) { .pl-hero-subtitle { font-size: 1.5rem; } }

/* Prev / Next buttons */
.pl-hero-prev,
.pl-hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 10;
}
.pl-hero-prev { left: 1rem; }
.pl-hero-next { right: 1rem; }
.pl-hero-prev:hover,
.pl-hero-next:hover { background: rgba(255,255,255,0.35); }
.pl-hero-prev svg,
.pl-hero-next svg { width: 1.5rem; height: 1.5rem; }

/* Dots */
.pl-hero-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}
.pl-hero-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.50);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.pl-hero-dot--active {
  width: 2rem;
  background: #fff;
}
.pl-hero-dot:hover { background: rgba(255,255,255,0.75); }

/* ═══════════════════════════════════════════════════════
   13. FEATURED CATEGORIES
══════════════════════════════════════════════════════════ */
.pl-categories { background: var(--pl-bg); padding: 4rem 1rem; }
@media (min-width: 768px) { .pl-categories { padding: 6rem 1.5rem; } }

.pl-categories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .pl-categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pl-categories-grid { grid-template-columns: repeat(4, 1fr); } }

.pl-category-card {
  position: relative;
  height: 20rem;
  border-radius: var(--pl-radius-2xl);
  overflow: hidden;
  box-shadow: var(--pl-shadow-md);
  display: block;
  text-decoration: none;
  transition: box-shadow 0.5s ease;
}
.pl-category-card:hover { box-shadow: var(--pl-shadow-xl); }

.pl-category-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.pl-category-card:hover .pl-category-card__img { transform: scale(1.1); }

.pl-category-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.70), rgba(0,0,0,0.20), transparent);
}
.pl-category-card__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
}
.pl-category-card__title {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.pl-category-card__underline {
  height: 4px;
  background: var(--pl-primary);
  width: 3rem;
  transition: width 0.3s ease;
  transform-origin: left;
  border-radius: 2px;
}
.pl-category-card:hover .pl-category-card__underline { width: 6rem; }

.pl-category-card__border-glow {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: var(--pl-radius-2xl);
  transition: border-color 0.3s;
  pointer-events: none;
}
.pl-category-card:hover .pl-category-card__border-glow {
  border-color: var(--pl-primary);
}

/* ═══════════════════════════════════════════════════════
   14. PRODUCT CARD
══════════════════════════════════════════════════════════ */
.pl-product-card {
  background: #fff;
  border-radius: var(--pl-radius-2xl);
  overflow: hidden;
  box-shadow: var(--pl-shadow-sm);
  transition: var(--pl-transition);
  cursor: pointer;
  list-style: none;
}
.pl-product-card:hover {
  box-shadow: var(--pl-shadow-xl);
  transform: translateY(-3px);
}

.pl-product-card__link { display: block; text-decoration: none; color: inherit; }

.pl-product-card__image-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--pl-bg-muted);
}
.pl-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pl-product-card:hover .pl-product-card__img { transform: scale(1.1); }

.pl-product-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}
.pl-product-card__quick-add {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  background: #fff;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pl-shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: var(--pl-transition);
  cursor: pointer;
  color: var(--pl-text);
}
.pl-product-card:hover .pl-product-card__quick-add {
  opacity: 1;
  transform: translateY(0);
}
.pl-product-card__quick-add:hover {
  background: var(--pl-primary);
  color: #fff;
}
.pl-product-card__quick-add.pl-loading { opacity: 0.7; }

.pl-product-card__body { padding: 1.25rem; }
.pl-product-card__category {
  font-size: 0.875rem;
  color: var(--pl-text-muted);
  margin-bottom: 0.25rem;
}
.pl-product-card__title {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--pl-text);
  transition: color 0.2s;
  line-height: 1.3;
}
.pl-product-card:hover .pl-product-card__title { color: var(--pl-primary); }
.pl-product-card__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pl-product-card__rating-num,
.pl-product-card__review-count { font-size: 0.875rem; color: var(--pl-text-muted); }
.pl-product-card__price { font-size: 1.25rem; color: var(--pl-price); }
.pl-product-card__price del { font-size: 0.875rem; color: var(--pl-text-muted); margin-left: 0.5rem; }
.pl-product-card__price ins { text-decoration: none; }

/* Product grids */
.pl-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px)  { .pl-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pl-product-grid { grid-template-columns: repeat(4, 1fr); } }

/* ═══════════════════════════════════════════════════════
   15. BEST SELLERS SECTION
══════════════════════════════════════════════════════════ */
.pl-best-sellers {
  background: var(--pl-bg-muted);
  padding: 4rem 1rem;
}
@media (min-width: 768px) { .pl-best-sellers { padding: 6rem 1.5rem; } }

/* ═══════════════════════════════════════════════════════
   16. PROMO BANNER
══════════════════════════════════════════════════════════ */
.pl-promo-banner {
  background: var(--pl-gradient-main);
  padding: 4rem 1rem;
}
@media (min-width: 768px) { .pl-promo-banner { padding: 5rem 1.5rem; } }

.pl-promo-banner__inner { text-align: center; color: #fff; }
.pl-promo-banner__tag {
  display: inline-block;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.375rem 1rem;
  border-radius: var(--pl-radius-full);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.pl-promo-banner__title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}
@media (min-width: 768px) { .pl-promo-banner__title { font-size: 3rem; } }

.pl-promo-banner__desc {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.90);
  max-width: 40rem;
  margin: 0 auto 2rem;
}
.pl-promo-banner__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 640px) {
  .pl-promo-banner__cta-row { flex-direction: row; justify-content: center; }
}
.pl-countdown { color: rgba(255,255,255,0.90); text-align: center; }
.pl-countdown__label { font-size: 0.875rem; margin-bottom: 0.25rem; }
.pl-countdown__time  { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════
   17. WHY CHOOSE US
══════════════════════════════════════════════════════════ */
.pl-why-choose {
  background: var(--pl-bg);
  padding: 4rem 1rem;
}
@media (min-width: 768px) { .pl-why-choose { padding: 6rem 1.5rem; } }

.pl-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px)  { .pl-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pl-features-grid { grid-template-columns: repeat(4, 1fr); } }

.pl-feature-item { text-align: center; }
.pl-feature-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--pl-gradient-main);
  color: #fff;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}
.pl-feature-item:hover .pl-feature-icon-wrap { transform: scale(1.1); }
.pl-feature-icon-wrap svg { width: 2.5rem; height: 2.5rem; }
.pl-feature-item h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.pl-feature-item p  { color: var(--pl-text-muted); }

/* ═══════════════════════════════════════════════════════
   18. INSTAGRAM GALLERY
══════════════════════════════════════════════════════════ */
.pl-instagram { background: var(--pl-bg-muted); padding: 4rem 1rem; }
@media (min-width: 768px) { .pl-instagram { padding: 6rem 1.5rem; } }

.pl-instagram__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.pl-instagram__header svg { width: 2rem; height: 2rem; color: var(--pl-primary); }

.pl-instagram-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px)  { .pl-instagram-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pl-instagram-grid { grid-template-columns: repeat(6, 1fr); } }

.pl-instagram-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--pl-radius-xl);
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.pl-instagram-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pl-instagram-item:hover .pl-instagram-item__img { transform: scale(1.1); }
.pl-instagram-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(83,177,228,0.80), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-instagram-item:hover .pl-instagram-item__overlay { opacity: 1; }
.pl-instagram-item__overlay svg { width: 2rem; height: 2rem; color: #fff; }

.pl-instagram__follow {
  text-align: center;
}
.pl-instagram__follow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pl-primary);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s;
}
.pl-instagram__follow-link:hover { color: var(--pl-secondary); }
.pl-instagram__follow-link svg { width: 1.25rem; height: 1.25rem; }

/* ═══════════════════════════════════════════════════════
   19. TESTIMONIALS
══════════════════════════════════════════════════════════ */
.pl-testimonials { background: var(--pl-bg); padding: 4rem 1rem; }
@media (min-width: 768px) { .pl-testimonials { padding: 6rem 1.5rem; } }

.pl-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) { .pl-testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

.pl-testimonial-card {
  background: var(--pl-bg-muted);
  border-radius: var(--pl-radius-2xl);
  padding: 2rem;
  position: relative;
  transition: box-shadow 0.3s;
}
.pl-testimonial-card:hover { box-shadow: var(--pl-shadow-lg); }

.pl-testimonial-card__quote-icon {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  color: rgba(83,177,228,0.20);
}
.pl-testimonial-card__stars { margin-bottom: 1rem; }
.pl-testimonial-card__text {
  color: var(--pl-text);
  margin-bottom: 1.5rem;
  line-height: 1.7;
  font-style: italic;
}
.pl-testimonial-card__footer {
  border-top: 1px solid var(--pl-border-solid);
  padding-top: 1rem;
}
.pl-testimonial-card__name { font-weight: 600; color: var(--pl-text); margin-bottom: 0.125rem; }
.pl-testimonial-card__role { font-size: 0.875rem; color: var(--pl-text-muted); }
.pl-testimonial-card__date { font-size: 0.875rem; color: var(--pl-text-light); margin-top: 0.25rem; }

.pl-testimonials__aggregate {
  text-align: center;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--pl-text-muted);
}

/* ═══════════════════════════════════════════════════════
   20. WHATSAPP BANNER
══════════════════════════════════════════════════════════ */
.pl-whatsapp-banner {
  background: var(--pl-gradient-whatsapp);
  padding: 4rem 1rem;
}
.pl-whatsapp-banner__inner { text-align: center; color: #fff; }
.pl-whatsapp-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
  margin-bottom: 1.5rem;
  color: #fff;
}
.pl-whatsapp-banner__icon svg { width: 2.5rem; height: 2.5rem; }
.pl-whatsapp-banner__title {
  font-size: 1.875rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .pl-whatsapp-banner__title { font-size: 2.5rem; } }
.pl-whatsapp-banner__desc {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.90);
  max-width: 40rem;
  margin: 0 auto 2rem;
}
.pl-btn-whatsapp {
  background: #fff;
  color: var(--pl-whatsapp-dark);
  padding: 1rem 2.5rem;
  border-radius: var(--pl-radius-full);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pl-transition);
  box-shadow: var(--pl-shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.pl-btn-whatsapp:hover {
  background: #f1f5f9;
  box-shadow: var(--pl-shadow-xl);
  transform: scale(1.03);
  color: var(--pl-whatsapp-dark);
}

/* ═══════════════════════════════════════════════════════
   21. FOOTER
══════════════════════════════════════════════════════════ */
.pl-footer {
  background: var(--pl-bg-muted);
  border-top: 1px solid var(--pl-border-solid);
}
.pl-footer__top {
  padding: 4rem 1rem;
}
@media (min-width: 768px) { .pl-footer__top { padding: 4rem 1.5rem; } }

.pl-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px)  { .pl-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pl-footer-grid { grid-template-columns: repeat(4, 1fr); } }

/* Brand column */
.pl-footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.pl-footer-brand__circle {
  width: 4rem;
  height: 4rem;
  background: var(--pl-gradient-main);
  border-radius: var(--pl-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pl-shadow-lg);
  flex-shrink: 0;
}
.pl-footer-brand__letters {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}
.pl-footer-brand__name {
  font-size: 1.875rem;
  color: var(--pl-text);
  font-weight: 600;
}
.pl-footer-brand__tagline {
  color: var(--pl-text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.pl-footer-social {
  display: flex;
  gap: 0.75rem;
}
.pl-footer-social__link {
  width: 2.75rem;
  height: 2.75rem;
  background: #fff;
  border: 1px solid var(--pl-border-solid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pl-text-muted);
  text-decoration: none;
  transition: var(--pl-transition);
  box-shadow: var(--pl-shadow-sm);
}
.pl-footer-social__link:hover {
  background: var(--pl-primary);
  color: #fff;
  border-color: var(--pl-primary);
}
.pl-footer-social__link svg { width: 1.25rem; height: 1.25rem; }

/* Footer nav columns */
.pl-footer-nav h3 {
  font-size: 1.125rem;
  color: var(--pl-text);
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.pl-footer-nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.pl-footer-nav a {
  color: var(--pl-text-muted);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 0.9375rem;
}
.pl-footer-nav a:hover { color: var(--pl-primary); }

/* Newsletter column */
.pl-footer-newsletter h3 {
  font-size: 1.125rem;
  color: var(--pl-text);
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.pl-footer-newsletter p { color: var(--pl-text-muted); margin-bottom: 1rem; font-size: 0.9375rem; }
.pl-newsletter-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.pl-newsletter-input {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1px solid var(--pl-border-solid);
  border-radius: var(--pl-radius-lg);
  font-size: 0.9375rem;
  outline: none;
  background: #fff;
  transition: border-color 0.2s;
}
.pl-newsletter-input:focus { border-color: var(--pl-primary); }
.pl-newsletter-btn {
  padding: 0.625rem 1rem;
  background: var(--pl-primary);
  color: #fff;
  border: none;
  border-radius: var(--pl-radius-lg);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-newsletter-btn:hover { background: var(--pl-secondary); }
.pl-newsletter-btn svg { width: 1.25rem; height: 1.25rem; }

.pl-footer-contact { display: flex; flex-direction: column; gap: 0.75rem; }
.pl-footer-contact__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--pl-text-muted);
}
.pl-footer-contact__item svg { width: 1rem; height: 1rem; color: var(--pl-primary); flex-shrink: 0; }

/* Footer bottom */
.pl-footer__bottom {
  border-top: 1px solid var(--pl-border-solid);
  padding: 2rem 1rem;
}
@media (min-width: 768px) { .pl-footer__bottom { padding: 2rem 1.5rem; } }
.pl-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: var(--pl-container-max);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .pl-footer__bottom-inner { flex-direction: row; justify-content: space-between; }
}
.pl-footer__copyright { font-size: 0.875rem; color: var(--pl-text-muted); }
.pl-footer__legal-links { display: flex; gap: 1.5rem; }
.pl-footer__legal-links a {
  font-size: 0.875rem;
  color: var(--pl-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.pl-footer__legal-links a:hover { color: var(--pl-primary); }

/* ═══════════════════════════════════════════════════════
   22. FLOATING WHATSAPP BUTTON
══════════════════════════════════════════════════════════ */
.pl-whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--pl-whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  z-index: 999;
  text-decoration: none;
  transition: var(--pl-transition);
}
.pl-whatsapp-float:hover {
  background: var(--pl-whatsapp-dark);
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37,211,102,0.5);
  color: #fff;
}
.pl-whatsapp-float svg { width: 1.75rem; height: 1.75rem; }

/* ═══════════════════════════════════════════════════════
   23. BREADCRUMB
══════════════════════════════════════════════════════════ */
.pl-breadcrumb { padding: 1.5rem 0; }
.pl-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.875rem;
  color: var(--pl-text-muted);
}
.pl-breadcrumb__link {
  color: var(--pl-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.pl-breadcrumb__link:hover { color: var(--pl-primary); }
.pl-breadcrumb__item--current { color: var(--pl-text); }
.pl-breadcrumb__sep { color: var(--pl-text-light); }

/* ═══════════════════════════════════════════════════════
   24. SHOP PAGE
══════════════════════════════════════════════════════════ */
.pl-shop-header {
  background: var(--pl-gradient-main);
  padding: 4rem 1rem;
  text-align: center;
  color: #fff;
}
.pl-shop-header__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) { .pl-shop-header__title { font-size: 3rem; } }
.pl-shop-header__subtitle {
  color: rgba(255,255,255,0.90);
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

/* Shop search bar */
.pl-shop-search { max-width: 48rem; margin: 0 auto; }
.pl-shop-search__form {
  position: relative;
  display: flex;
  align-items: center;
}
.pl-shop-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--pl-text-muted);
  pointer-events: none;
}
.pl-shop-search__input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: none;
  border-radius: var(--pl-radius-xl);
  font-size: 1rem;
  background: #fff;
  color: var(--pl-text);
  box-shadow: var(--pl-shadow-lg);
  outline: none;
}
.pl-shop-search__input:focus { box-shadow: var(--pl-shadow-xl); }

/* Shop filter bar */
.pl-shop-filters {
  padding: 2rem 1rem;
  border-bottom: 1px solid var(--pl-border-solid);
  background: #fff;
}
.pl-shop-filters__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--pl-container-max);
  margin: 0 auto;
}

.pl-category-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; flex: 1; }
.pl-category-pill {
  padding: 0.5rem 1.5rem;
  border-radius: var(--pl-radius-full);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--pl-transition);
  background: var(--pl-bg-muted);
  color: var(--pl-text);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.pl-category-pill:hover {
  background: var(--pl-bg-accent);
  color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.pl-category-pill--active {
  background: var(--pl-primary);
  color: #fff;
  box-shadow: var(--pl-shadow-md);
}

.pl-shop-sort select {
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 1.5px solid var(--pl-border-solid);
  border-radius: var(--pl-radius-lg);
  font-size: 0.9375rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.75rem center;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.pl-shop-sort select:focus { border-color: var(--pl-primary); }

.pl-shop-results-count {
  padding: 1rem 0;
  color: var(--pl-text-muted);
  font-size: 0.9375rem;
}

/* ═══════════════════════════════════════════════════════
   25. SINGLE PRODUCT
══════════════════════════════════════════════════════════ */
.pl-single-product { padding: 0 0 4rem; }

.pl-product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 2rem 0;
}
@media (min-width: 1024px) {
  .pl-product-detail { grid-template-columns: 1fr 1fr; }
}

/* Gallery */
.pl-product-gallery__main {
  aspect-ratio: 1;
  border-radius: var(--pl-radius-2xl);
  overflow: hidden;
  background: var(--pl-bg-muted);
  margin-bottom: 1rem;
}
.pl-product-gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}
.pl-product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.pl-product-gallery__thumb {
  aspect-ratio: 1;
  border-radius: var(--pl-radius-xl);
  overflow: hidden;
  border: 2px solid var(--pl-border-solid);
  background: none;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pl-product-gallery__thumb:hover { border-color: var(--pl-primary); }
.pl-product-gallery__thumb--active {
  border-color: var(--pl-primary);
  box-shadow: var(--pl-shadow-md);
}
.pl-product-gallery__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product info */
.pl-product-info {}
.pl-product-info__badge { margin-bottom: 1rem; }
.pl-product-info__title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--pl-text);
  line-height: 1.2;
}
@media (min-width: 768px) { .pl-product-info__title { font-size: 2.5rem; } }

.pl-product-info__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  color: var(--pl-text-muted);
}
.pl-product-info__in-stock {
  color: var(--pl-success);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.pl-product-info__in-stock svg { width: 1rem; height: 1rem; }

.pl-product-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.pl-product-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--pl-price);
}
.pl-product-price-old {
  font-size: 1.5rem;
  color: var(--pl-text-muted);
  text-decoration: line-through;
}
.pl-product-save-badge {
  background: #dcfce7;
  color: #166534;
  padding: 0.25rem 0.75rem;
  border-radius: var(--pl-radius-full);
  font-size: 0.875rem;
  font-weight: 500;
}

.pl-product-divider { border: 0; border-top: 1px solid var(--pl-border-solid); margin: 1.5rem 0; }

.pl-product-short-desc { color: var(--pl-text); line-height: 1.7; margin-bottom: 1rem; }
.pl-product-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.pl-product-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pl-text);
  font-size: 0.9375rem;
}
.pl-product-feature svg { width: 1.25rem; height: 1.25rem; color: var(--pl-primary); flex-shrink: 0; }

/* Variation/power select */
.pl-product-variation {
  margin-bottom: 1.5rem;
}
.pl-product-variation label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--pl-text);
}
.pl-product-variation select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--pl-border-solid);
  border-radius: var(--pl-radius-lg);
  font-size: 1rem;
  background: #fff;
  color: var(--pl-text);
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.pl-product-variation select:focus { border-color: var(--pl-primary); }

/* Quantity label */
.pl-qty-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--pl-text);
}

/* Quantity stepper */
.pl-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--pl-border-solid);
  border-radius: var(--pl-radius-lg);
  overflow: hidden;
}
.pl-qty-stepper__btn {
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  color: var(--pl-text);
}
.pl-qty-stepper__btn:hover { background: var(--pl-bg-muted); }
.pl-qty-stepper__btn svg { width: 1rem; height: 1rem; }
.pl-qty-stepper__input {
  width: 3.5rem;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--pl-border-solid);
  border-right: 1.5px solid var(--pl-border-solid);
  padding: 0.75rem 0.5rem;
  font-size: 1rem;
  outline: none;
  background: transparent;
  color: var(--pl-text);
  -moz-appearance: textfield;
}
.pl-qty-stepper__input::-webkit-outer-spin-button,
.pl-qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Add to cart row */
.pl-product-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.pl-product-actions .pl-btn-primary { flex: 1; min-width: 200px; justify-content: center; }
.pl-product-action-icon {
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--pl-border-solid);
  border-radius: var(--pl-radius-xl);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--pl-transition);
  color: var(--pl-text);
  flex-shrink: 0;
}
.pl-product-action-icon:hover {
  border-color: var(--pl-primary);
  color: var(--pl-primary);
}
.pl-product-action-icon svg { width: 1.25rem; height: 1.25rem; }

/* Trust badges */
.pl-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.pl-trust-badge {
  text-align: center;
  padding: 1rem;
  background: var(--pl-bg-muted);
  border-radius: var(--pl-radius-xl);
}
.pl-trust-badge svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--pl-primary);
  margin: 0 auto 0.5rem;
}
.pl-trust-badge p { font-size: 0.875rem; color: var(--pl-text); margin: 0; }

/* Related products */
.pl-related-products { padding: 4rem 0; }
.pl-related-products h2 { font-size: 1.875rem; margin-bottom: 2rem; }
.pl-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 1024px) { .pl-related-grid { grid-template-columns: repeat(4, 1fr); } }

/* ═══════════════════════════════════════════════════════
   26. CART PAGE
══════════════════════════════════════════════════════════ */
.pl-cart-header {
  background: var(--pl-gradient-main);
  padding: 3rem 1rem;
  text-align: center;
}
.pl-cart-header__title { font-size: 2.25rem; color: #fff; margin: 0; }

.pl-cart-body { background: var(--pl-bg-muted); min-height: 60vh; padding: 3rem 1rem; }

.pl-cart-empty { text-align: center; padding: 4rem 0; }
.pl-cart-empty svg { width: 6rem; height: 6rem; color: #d1d5db; margin: 0 auto 1.5rem; }
.pl-cart-empty h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.pl-cart-empty p  { color: var(--pl-text-muted); margin-bottom: 2rem; }

.pl-cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) { .pl-cart-layout { grid-template-columns: 2fr 1fr; } }

.pl-cart-items-card {
  background: #fff;
  border-radius: var(--pl-radius-2xl);
  overflow: hidden;
  box-shadow: var(--pl-shadow-sm);
}
.pl-cart-items-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--pl-border-solid);
  font-size: 1.5rem;
  font-weight: 600;
}
.pl-cart-row {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--pl-border-solid);
}
.pl-cart-row:last-child { border-bottom: none; }
.pl-cart-row__img {
  width: 7rem;
  height: 7rem;
  border-radius: var(--pl-radius-xl);
  overflow: hidden;
  background: var(--pl-bg-muted);
  flex-shrink: 0;
}
.pl-cart-row__img img { width: 100%; height: 100%; object-fit: cover; }
.pl-cart-row__info { flex: 1; min-width: 0; }
.pl-cart-row__top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.pl-cart-row__name { font-size: 1.125rem; font-weight: 500; margin: 0 0 0.25rem; }
.pl-cart-row__cat, .pl-cart-row__meta { font-size: 0.875rem; color: var(--pl-text-muted); margin: 0; }
.pl-cart-row__remove {
  background: none;
  border: none;
  color: var(--pl-text-light);
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.pl-cart-row__remove:hover { color: var(--pl-danger); }
.pl-cart-row__remove svg { width: 1.25rem; height: 1.25rem; }
.pl-cart-row__bottom { display: flex; align-items: center; justify-content: space-between; }
.pl-cart-row__price { font-size: 1.25rem; color: var(--pl-price); font-weight: 600; }
.pl-cart-row__price-each { font-size: 0.875rem; color: var(--pl-text-muted); }

.pl-cart-continue { margin-top: 1rem; width: 100%; justify-content: center; }

/* Order summary card */
.pl-order-summary-card {
  background: #fff;
  border-radius: var(--pl-radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--pl-shadow-sm);
  position: sticky;
  top: 6rem;
}
.pl-order-summary-card h2 { font-size: 1.5rem; margin-bottom: 1.5rem; font-weight: 600; }
.pl-summary-rows { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.pl-summary-row { display: flex; justify-content: space-between; align-items: center; color: var(--pl-text-muted); font-size: 0.9375rem; }
.pl-summary-row--total { font-size: 1.25rem; font-weight: 600; color: var(--pl-text); }
.pl-summary-row--total .pl-summary-total-price { color: var(--pl-price); }
.pl-summary-shipping-free { color: var(--pl-success); font-weight: 500; }
.pl-summary-divider { border: 0; border-top: 1px solid var(--pl-border-solid); margin: 1rem 0; }

/* Promo code */
.pl-promo-row { margin-bottom: 1.5rem; }
.pl-promo-row label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; }
.pl-promo-input-wrap { display: flex; gap: 0.5rem; }
.pl-promo-input {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1.5px solid var(--pl-border-solid);
  border-radius: var(--pl-radius-lg);
  font-size: 0.9375rem;
  outline: none;
}
.pl-promo-input:focus { border-color: var(--pl-primary); }
.pl-promo-apply-btn {
  padding: 0.625rem 0.875rem;
  background: var(--pl-bg-muted);
  border: 1.5px solid var(--pl-border-solid);
  border-radius: var(--pl-radius-lg);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}
.pl-promo-apply-btn:hover { background: #e9ecef; }
.pl-promo-apply-btn svg { width: 1.25rem; height: 1.25rem; }

/* Free shipping notice */
.pl-free-shipping-notice {
  background: var(--pl-bg-accent);
  border: 1px solid rgba(83,177,228,0.3);
  border-radius: var(--pl-radius-lg);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--pl-secondary);
  margin-bottom: 1.5rem;
}

.pl-checkout-btn { width: 100%; justify-content: center; margin-bottom: 1.5rem; }

.pl-cart-trust { display: flex; flex-direction: column; gap: 0.625rem; }
.pl-cart-trust p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--pl-text-muted);
  margin: 0;
}
.pl-cart-trust__dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--pl-success);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   27. CHECKOUT PAGE
══════════════════════════════════════════════════════════ */
.pl-checkout-header {
  background: var(--pl-gradient-main);
  padding: 3rem 1rem;
  text-align: center;
}
.pl-checkout-header__title { font-size: 2.25rem; color: #fff; margin-bottom: 2rem; }

/* Step indicator */
.pl-checkout-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 36rem;
  margin: 0 auto;
}
.pl-checkout-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}
.pl-checkout-step__circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.70);
  font-size: 1.125rem;
  font-weight: 600;
  background: transparent;
  transition: var(--pl-transition);
}
.pl-checkout-step--active .pl-checkout-step__circle,
.pl-checkout-step--done .pl-checkout-step__circle {
  background: #fff;
  color: var(--pl-primary);
  border-color: #fff;
}
.pl-checkout-step__label {
  color: rgba(255,255,255,0.90);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  white-space: nowrap;
}
.pl-checkout-step__line {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.30);
}
.pl-checkout-step--done .pl-checkout-step__line { background: #fff; }

.pl-checkout-body { background: var(--pl-bg-muted); padding: 3rem 1rem; }
.pl-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  max-width: var(--pl-container-max);
  margin: 0 auto;
}
@media (min-width: 1024px) { .pl-checkout-layout { grid-template-columns: 2fr 1fr; } }

.pl-checkout-form-card {
  background: #fff;
  border-radius: var(--pl-radius-2xl);
  padding: 2rem;
  box-shadow: var(--pl-shadow-sm);
}
.pl-checkout-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.pl-checkout-section-title svg { width: 1.5rem; height: 1.5rem; color: var(--pl-primary); }
.pl-checkout-section-title h2 { font-size: 1.5rem; margin: 0; }
.pl-ssl-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--pl-text-muted);
  margin-top: 1.5rem;
}
.pl-ssl-badge svg { width: 1rem; height: 1rem; }

/* ═══════════════════════════════════════════════════════
   28. NOTICES
══════════════════════════════════════════════════════════ */
.pl-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--pl-radius-lg);
  margin-bottom: 1rem;
}
.pl-notice svg   { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; }
.pl-notice p     { margin: 0; }
.pl-notice--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.pl-notice--error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.pl-notice--info    { background: var(--pl-bg-accent); border: 1px solid rgba(83,177,228,0.3); color: var(--pl-secondary); }

/* ═══════════════════════════════════════════════════════
   29. THANK YOU PAGE
══════════════════════════════════════════════════════════ */
.pl-thankyou { padding: 6rem 1rem; text-align: center; }
.pl-thankyou__icon {
  width: 6rem;
  height: 6rem;
  background: linear-gradient(135deg, var(--pl-success), #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  color: #fff;
}
.pl-thankyou__icon svg { width: 3rem; height: 3rem; }
.pl-thankyou h1 { font-size: 2.25rem; margin-bottom: 1rem; }
.pl-thankyou__order-num {
  display: inline-block;
  background: var(--pl-bg-accent);
  color: var(--pl-secondary);
  padding: 0.5rem 1.5rem;
  border-radius: var(--pl-radius-full);
  font-weight: 600;
  margin-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════
   30. 404 PAGE
══════════════════════════════════════════════════════════ */
.pl-404 { padding: 6rem 1rem; text-align: center; }
.pl-404__number {
  font-size: 8rem;
  font-weight: 700;
  background: var(--pl-gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 1rem;
}
.pl-404 h1 { font-size: 2rem; margin-bottom: 1rem; }
.pl-404 p  { color: var(--pl-text-muted); margin-bottom: 2rem; font-size: 1.125rem; }

/* ═══════════════════════════════════════════════════════
   31. SEARCH RESULTS PAGE
══════════════════════════════════════════════════════════ */
.pl-search-header { background: var(--pl-gradient-main); padding: 3rem 1rem; color: #fff; text-align: center; }
.pl-search-header h1 { color: #fff; margin-bottom: 0.5rem; }
.pl-search-header p  { color: rgba(255,255,255,0.90); }
.pl-search-results { padding: 3rem 1rem; }

/* ═══════════════════════════════════════════════════════
   32. MY ACCOUNT PAGE
══════════════════════════════════════════════════════════ */
.pl-account-header { background: var(--pl-gradient-main); padding: 3rem 1rem; text-align: center; }
.pl-account-header h1 { color: #fff; }
.pl-account-body { padding: 3rem 1rem; background: var(--pl-bg-muted); min-height: 60vh; }

/* ═══════════════════════════════════════════════════════
   33. CHECKOUT STEPS ORDER ITEMS (sidebar)
══════════════════════════════════════════════════════════ */
.pl-checkout-order-items { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.pl-checkout-order-item { display: flex; justify-content: space-between; align-items: flex-start; }
.pl-checkout-order-item__name { font-weight: 500; }
.pl-checkout-order-item__qty  { font-size: 0.875rem; color: var(--pl-text-muted); }
.pl-checkout-order-item__price{ font-weight: 500; }

/* ═══════════════════════════════════════════════════════
   34. GENERIC PAGE
══════════════════════════════════════════════════════════ */
.pl-page { padding: 3rem 1rem; }
.pl-page-header { background: var(--pl-bg-muted); border-bottom: 1px solid var(--pl-border-solid); padding: 3rem 1rem; }
.pl-page-header h1 { font-size: 2rem; }
.pl-entry-content { max-width: 48rem; margin: 0 auto; }
.pl-entry-content h2 { font-size: 1.5rem; margin-top: 2rem; }
.pl-entry-content p  { color: var(--pl-text-muted); line-height: 1.8; }
.pl-entry-content ul { list-style: disc; padding-left: 1.5rem; color: var(--pl-text-muted); }
.pl-entry-content a  { color: var(--pl-primary); }

/* ═══════════════════════════════════════════════════════
   35. UTILITY CLASSES
══════════════════════════════════════════════════════════ */
.pl-text-center { text-align: center; }
.pl-mt-4  { margin-top: 1rem; }
.pl-mt-8  { margin-top: 2rem; }
.pl-mt-12 { margin-top: 3rem; }
.pl-mb-4  { margin-bottom: 1rem; }
.pl-mb-8  { margin-bottom: 2rem; }
.pl-w-full { width: 100%; }