/* ==========================================================================
   Meyazon Category Section — mzzppt
   Scoped & protected against Electro theme / global CSS leakage
   ========================================================================== */

#mzzppt-category-section.mzzppt-category-section {
  all: initial !important;
  display: block !important;
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 16px !important;
  background: var(--mzzppt-section-bg, #ffffff) !important;
  background-image: none !important;
  color: #0f172a !important;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  float: none !important;
  clear: both !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip: auto !important;
  clip-path: none !important;

  --mzzppt-base: #0749C4;
  --mzzppt-base-rgb: 7, 73, 196;
  --mzzppt-container: 1400px;
  --mzzppt-gap: 16px;
  --mzzppt-cols: 4;
  --mzzppt-section-bg: #ffffff;
  --mzzppt-radius-panel: 22px;
  --mzzppt-radius-card: 16px;
  --mzzppt-radius-btn: 999px;
  --mzzppt-white: #ffffff;
  --mzzppt-title: #ffffff;
  --mzzppt-label: #1e293b;
  --mzzppt-shadow-card: 0 4px 14px rgba(15, 23, 42, 0.08);
  --mzzppt-shadow-card-hover: 0 10px 28px rgba(15, 23, 42, 0.14);
  --mzzppt-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#mzzppt-category-section.mzzppt-category-section *,
#mzzppt-category-section.mzzppt-category-section *::before,
#mzzppt-category-section.mzzppt-category-section *::after {
  box-sizing: border-box !important;
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  float: none !important;
  clear: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  max-width: none;
}

#mzzppt-category-section.mzzppt-category-section--hidden-preview {
  min-height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px dashed rgba(7, 73, 196, 0.35) !important;
  background: #f8fafc !important;
}

#mzzppt-category-section .mzzppt-hidden-notice {
  color: #0749C4 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

#mzzppt-category-section #mzzppt-category-container.mzzppt-category-container {
  display: block !important;
  width: 100% !important;
  max-width: var(--mzzppt-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#mzzppt-category-section #mzzppt-category-grid.mzzppt-category-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--mzzppt-cols), minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: var(--mzzppt-gap) !important;
  width: 100% !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
}

#mzzppt-category-section .mzzppt-panel {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 18px 16px 16px !important;
  border: 0 !important;
  border-radius: var(--mzzppt-radius-panel) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
  color: #ffffff !important;
}

#mzzppt-category-section .mzzppt-panel__pattern {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.45 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.1) 0 1px, transparent 1.5px),
    linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 18px,
      rgba(255, 255, 255, 0.03) 18px,
      rgba(255, 255, 255, 0.03) 19px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 18px,
      rgba(255, 255, 255, 0.03) 18px,
      rgba(255, 255, 255, 0.03) 19px
    ) !important;
  background-size: 40px 40px, 55px 55px, 100% 100%, 100% 100%, 100% 100% !important;
}

#mzzppt-category-section .mzzppt-panel--light .mzzppt-panel__pattern {
  opacity: 0.7 !important;
  background-image:
    radial-gradient(ellipse 80% 70% at 15% 85%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
    linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%) !important;
  background-size: 100% 100% !important;
}

#mzzppt-category-section .mzzppt-panel--light {
  background-color: #5b8ef0 !important;
  background-image: linear-gradient(
    145deg,
    #8eb4f8 0%,
    #5b8ef0 35%,
    #3d78e8 65%,
    var(--mzzppt-base) 100%
  ) !important;
}

#mzzppt-category-section .mzzppt-panel--mid {
  background-color: var(--mzzppt-base) !important;
  background-image:
    radial-gradient(ellipse 90% 80% at 100% 0%, rgba(90, 150, 255, 0.45) 0%, transparent 55%),
    linear-gradient(160deg, #1a62e0 0%, var(--mzzppt-base) 45%, #063a9e 100%) !important;
}

#mzzppt-category-section .mzzppt-panel--deep {
  background-color: #053a9c !important;
  background-image:
    radial-gradient(ellipse 80% 70% at 0% 100%, rgba(var(--mzzppt-base-rgb), 0.55) 0%, transparent 55%),
    linear-gradient(165deg, var(--mzzppt-base) 0%, #053a9c 50%, #042d7a 100%) !important;
}

#mzzppt-category-section .mzzppt-panel--navy {
  background-color: #03245f !important;
  background-image:
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(var(--mzzppt-base-rgb), 0.4) 0%, transparent 50%),
    linear-gradient(170deg, #053a9c 0%, #03245f 55%, #021a47 100%) !important;
}

#mzzppt-category-section .mzzppt-panel__header {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  background: transparent !important;
  border: 0 !important;
}

#mzzppt-category-section .mzzppt-panel__title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mzzppt-title) !important;
  font-family: inherit !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-text-fill-color: var(--mzzppt-title) !important;
}

#mzzppt-category-section .mzzppt-panel__viewall {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  gap: 4px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--mzzppt-radius-btn) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background var(--mzzppt-transition), border-color var(--mzzppt-transition),
    transform var(--mzzppt-transition) !important;
}

#mzzppt-category-section .mzzppt-panel__viewall--solid {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--mzzppt-base) !important;
  -webkit-text-fill-color: var(--mzzppt-base) !important;
}

#mzzppt-category-section .mzzppt-panel__viewall--ghost {
  background: transparent !important;
  border-color: transparent !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

#mzzppt-category-section .mzzppt-panel__viewall:hover,
#mzzppt-category-section .mzzppt-panel__viewall:focus-visible {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

#mzzppt-category-section .mzzppt-panel__viewall--solid:hover,
#mzzppt-category-section .mzzppt-panel__viewall--solid:focus-visible {
  background: #f1f5f9 !important;
  color: var(--mzzppt-base) !important;
  -webkit-text-fill-color: var(--mzzppt-base) !important;
}

#mzzppt-category-section .mzzppt-panel__arrow {
  display: inline-block !important;
  font-size: 0.85em !important;
  line-height: 1 !important;
  color: inherit !important;
  transform: translateX(0) !important;
  transition: transform var(--mzzppt-transition) !important;
}

#mzzppt-category-section .mzzppt-panel__viewall:hover .mzzppt-panel__arrow {
  transform: translateX(3px) !important;
}

#mzzppt-category-section .mzzppt-panel--light .mzzppt-panel__viewall--outline {
  border-color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

#mzzppt-category-section .mzzppt-products {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#mzzppt-category-section .mzzppt-product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  border-radius: var(--mzzppt-radius-card) !important;
  background: var(--mzzppt-white) !important;
  background-image: none !important;
  box-shadow: var(--mzzppt-shadow-card) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: var(--mzzppt-label) !important;
  transition: box-shadow var(--mzzppt-transition), transform var(--mzzppt-transition) !important;
}

#mzzppt-category-section .mzzppt-product-card:hover,
#mzzppt-category-section .mzzppt-product-card:focus-visible {
  box-shadow: var(--mzzppt-shadow-card-hover) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  color: var(--mzzppt-label) !important;
}

#mzzppt-category-section .mzzppt-product-card__media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 16px 16px 0 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  flex: 0 0 auto !important;
}

#mzzppt-category-section .mzzppt-product-card__img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  transition: transform var(--mzzppt-transition) !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

#mzzppt-category-section .mzzppt-product-card:hover .mzzppt-product-card__img,
#mzzppt-category-section .mzzppt-product-card:focus-visible .mzzppt-product-card__img {
  transform: scale(1.12) !important;
}

#mzzppt-category-section .mzzppt-product-card__label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 2px 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mzzppt-label) !important;
  -webkit-text-fill-color: var(--mzzppt-label) !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Visibility helpers (WordPress / Elementor) */
@media (min-width: 1101px) {
  #mzzppt-category-section.mzzppt-hide-desktop {
    display: none !important;
  }
}

@media (min-width: 641px) and (max-width: 1100px) {
  #mzzppt-category-section.mzzppt-hide-tablet {
    display: none !important;
  }

  #mzzppt-category-section:not([data-mzzppt-device]) {
    --mzzppt-cols: var(--mzzppt-cols-tablet, 2) !important;
    --mzzppt-gap: var(--mzzppt-gap-tablet, 14px) !important;
  }
}

@media (max-width: 640px) {
  #mzzppt-category-section.mzzppt-hide-mobile {
    display: none !important;
  }

  #mzzppt-category-section.mzzppt-category-section {
    padding: 16px 12px !important;
  }

  #mzzppt-category-section:not([data-mzzppt-device]) {
    --mzzppt-cols: var(--mzzppt-cols-mobile, 1) !important;
    --mzzppt-gap: var(--mzzppt-gap-mobile, 12px) !important;
  }

  #mzzppt-category-section .mzzppt-panel {
    padding: 16px 14px 14px !important;
    border-radius: 18px !important;
  }

  #mzzppt-category-section .mzzppt-panel__title {
    font-size: 1rem !important;
  }

  #mzzppt-category-section .mzzppt-product-card {
    padding: 0 0 8px !important;
  }

  #mzzppt-category-section .mzzppt-product-card__label {
    font-size: 0.78rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mzzppt-category-section .mzzppt-product-card,
  #mzzppt-category-section .mzzppt-product-card__img,
  #mzzppt-category-section .mzzppt-panel__viewall,
  #mzzppt-category-section .mzzppt-panel__arrow {
    transition: none !important;
  }

  #mzzppt-category-section .mzzppt-product-card:hover .mzzppt-product-card__img,
  #mzzppt-category-section .mzzppt-product-card:focus-visible .mzzppt-product-card__img {
    transform: scale(1) !important;
  }
}