/*
Theme Name: Blocksy Child - WiHuShop
Theme URI: https://wihushop.pl
Description: Sklep e-commerce WiHuShop zaprojektowany 1:1 zgodnie ze stylem Neumorphism z designprompts.dev/neumorphism - precyzyjna fizyka światłocienia Soft UI, powierzchnia #E0E5EC, fioletowe akcenty (#6C63FF), zaokrąglenia 24-48px oraz brak płaskich obramowań.
Author: WiHuShop
Template: blocksy
Version: 3.1.0
*/

/* ==========================================================================
   1. Design Tokens (1:1 from designprompts.dev/neumorphism)
   ========================================================================== */
:root {
  /* Surface Clay Tone */
  --neu-bg: #E0E5EC;
  
  /* Text Contrast Hierarchy (WCAG Compliant) */
  --neu-text-primary: #3D4852;   /* AAA contrast on #E0E5EC (7.5:1) */
  --neu-text-muted: #6B7280;     /* AA contrast on #E0E5EC (4.6:1) */
  --neu-text-placeholder: #9CA3AF;
  
  /* Brand Accents */
  --neu-accent: #6C63FF;         /* Soft Violet */
  --neu-accent-light: #8B84FF;   /* Light Violet */
  --neu-accent-hover: #5A52E0;
  --neu-accent-teal: #38B2AC;    /* Secondary Teal Accent */
  
  /* Typography */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  
  /* Radii */
  --neu-radius-sm: 12px;
  --neu-radius-md: 16px;
  --neu-radius-lg: 24px;
  --neu-radius-card: 32px;
  --neu-radius-sculpture: 48px;
  --neu-radius-pill: 9999px;
  
  /* EXACT Shadow Physics from designprompts.dev (RGB alpha transparency) */
  --neu-extruded: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
  --neu-extruded-hover: 12px 12px 20px rgb(163, 177, 198, 0.7), -12px -12px 20px rgba(255, 255, 255, 0.6);
  --neu-extruded-sm: 5px 5px 10px rgb(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.5);
  --neu-extruded-lg: 14px 14px 28px rgba(163, 177, 198, 0.65), -14px -14px 28px rgba(255, 255, 255, 0.6);
  
  --neu-inset: inset 6px 6px 10px rgb(163, 177, 198, 0.6), inset -6px -6px 10px rgba(255, 255, 255, 0.5);
  --neu-inset-deep: inset 10px 10px 20px rgb(163, 177, 198, 0.7), inset -10px -10px 20px rgba(255, 255, 255, 0.6);
  --neu-inset-sm: inset 3px 3px 6px rgb(163, 177, 198, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  
  /* Violet Button Shadows */
  --neu-btn-primary-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
  --neu-btn-primary-hover: 12px 12px 20px rgb(163, 177, 198, 0.7), -12px -12px 20px rgba(255, 255, 255, 0.6);
  --neu-btn-primary-active: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
  
  /* Transition Timing */
  --neu-ease: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Global Reset & Monochromatic Clay Surface
   ========================================================================== */
html {
  scroll-behavior: smooth;
  background-color: var(--neu-bg) !important;
}

body {
  background-color: var(--neu-bg) !important;
  color: var(--neu-text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  margin: 0;
  padding: 0;
}

#main-container,
.site-main,
.content-area,
.entry-content,
.ct-container {
  background-color: transparent !important;
}

/* Hide redundant page title on homepage */
.home .entry-header {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-display) !important;
  color: var(--neu-text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

a {
  color: var(--neu-accent);
  text-decoration: none;
  transition: var(--neu-ease);
}

a:hover {
  color: var(--neu-accent-hover);
}

::selection {
  background-color: rgba(108, 99, 255, 0.2) !important;
  color: #3D4852 !important;
}

/* Accessible Keyboard Focus Ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--neu-accent) !important;
  outline-offset: 2px !important;
}

/* Floating animation from designprompts.dev */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite !important;
}

/* ==========================================================================
   3. Header & Sticky Glass/Clay Navigation (1:1 designprompts.dev)
   ========================================================================== */
.neu-top-banner,
.apple-top-banner {
  background-color: var(--neu-bg) !important;
  padding: 10px 20px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--neu-text-muted) !important;
  box-shadow: var(--neu-inset-sm) !important;
  border: none !important;
  position: relative !important;
  z-index: 60 !important;
}

.neu-banner-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.neu-badge-teal {
  background: var(--neu-bg);
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-accent-teal);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--neu-radius-pill);
}

.neu-banner-link {
  color: var(--neu-accent) !important;
  font-weight: 600;
  margin-left: 4px;
}

.neu-banner-link:hover {
  text-decoration: underline;
}

header#header,
.ct-header,
.ct-header [data-row],
.ct-header [data-device],
.ct-header [data-row*="middle"],
.ct-header [data-device="desktop"] [data-row="middle"],
.ct-header-inner {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background-color: var(--neu-bg) !important;
  background: var(--neu-bg) !important;
}

header#header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 20px rgba(163, 177, 198, 0.25) !important;
}

header#header .ct-container {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1280px !important;
  background-color: transparent !important;
}

/* Extruded Logo Badge with Soft Violet Gradient Icon */
.site-branding,
.site-branding[data-id="logo"] {
  display: inline-flex !important;
  align-items: center !important;
}

.site-title, 
.site-title a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 48px !important;
  padding: 0 20px !important;
  border-radius: 16px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--neu-text-primary) !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: var(--neu-ease) !important;
}

.site-title a::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  box-shadow: var(--neu-extruded-sm);
  flex-shrink: 0;
}

.site-title a:hover {
  transform: translateY(-2px);
  box-shadow: var(--neu-extruded);
}

/* Extruded Pill Navigation Links */
#header-menu-1 ul.menu {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header-menu-1 ul.menu > li {
  margin: 0 !important;
  padding: 0 !important;
}

#header-menu-1 ul.menu > li > a.ct-menu-link,
.menu-item a {
  display: inline-flex !important;
  align-items: center !important;
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--neu-text-muted) !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  transition: var(--neu-ease) !important;
  text-decoration: none !important;
}

#header-menu-1 ul.menu > li > a.ct-menu-link:hover,
.menu-item a:hover {
  color: var(--neu-accent) !important;
  box-shadow: 6px 6px 12px rgb(163, 177, 198, 0.7), -6px -6px 12px rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px) !important;
}

#header-menu-1 ul.menu > li.current-menu-item > a.ct-menu-link,
#header-menu-1 ul.menu > li.current_page_item > a.ct-menu-link,
.menu-item.current-menu-item a,
.menu-item.current_page_item a {
  color: var(--neu-accent) !important;
  font-weight: 700 !important;
  box-shadow: var(--neu-inset-sm) !important;
  transform: translateY(1px) !important;
}

/* Header Search Toggle Button */
button.ct-header-search {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  border: none !important;
  color: var(--neu-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--neu-ease) !important;
  margin-left: 12px !important;
}

button.ct-header-search:hover {
  color: var(--neu-accent) !important;
  box-shadow: var(--neu-extruded) !important;
  transform: translateY(-2px) !important;
}

button.ct-header-search:active {
  box-shadow: var(--neu-inset-sm) !important;
  transform: translateY(1px) !important;
}

/* ==========================================================================
   4. Neumorphic Hero Section (1:1 matching designprompts.dev/neumorphism)
   ========================================================================== */
.neu-hero-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 64px 24px 96px 24px !important;
  background-color: var(--neu-bg) !important;
}

@media (min-width: 1024px) {
  .neu-hero-section {
    padding: 80px 24px 120px 24px !important;
  }
}

.neu-hero-section > div {
  max-width: 1280px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 10 !important;
}

.neu-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 64px !important;
}

@media (min-width: 1024px) {
  .neu-hero-grid {
    grid-template-columns: 1.2fr 0.8fr !important;
  }
}

/* Trust Indicator Pill Badge */
.neu-trust-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: var(--neu-radius-pill) !important;
  padding: 8px 24px 8px 10px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded) !important;
  margin-bottom: 32px !important;
}

.neu-trust-icon-well {
  display: flex !important;
  width: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset) !important;
}

.neu-teal-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: var(--neu-accent-teal) !important;
  box-shadow: 0 0 12px var(--neu-accent-teal) !important;
  display: inline-block !important;
}

/* Hero Typography */
.neu-hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(38px, 5.2vw, 68px) !important;
  font-weight: 800 !important;
  color: var(--neu-text-primary) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 28px 0 !important;
}

.neu-gradient-text {
  background: linear-gradient(135deg, #6C63FF 0%, #8B84FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}

.neu-hero-subtitle {
  font-family: var(--font-body) !important;
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: var(--neu-text-muted) !important;
  max-width: 580px !important;
  margin: 0 0 44px 0 !important;
}

/* Hero CTA Buttons */
.neu-hero-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

/* Primary Soft Violet Tactile Button */
.neu-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: max-content !important;
  gap: 12px !important;
  height: 64px !important;
  padding: 0 40px !important;
  border-radius: 20px !important;
  background-color: var(--neu-accent) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: var(--neu-btn-primary-shadow) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: var(--neu-ease) !important;
}

.neu-btn-primary svg,
.neu-btn-secondary svg {
  flex-shrink: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
}

.neu-btn-primary:hover {
  background-color: var(--neu-accent-hover) !important;
  box-shadow: var(--neu-btn-primary-hover) !important;
  transform: translateY(-4px) !important;
  color: #ffffff !important;
}

.neu-btn-primary:active {
  transform: translateY(2px) !important;
  box-shadow: var(--neu-btn-primary-active) !important;
}

/* Secondary Monochromatic Clay Button */
.neu-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: max-content !important;
  gap: 12px !important;
  height: 64px !important;
  padding: 0 38px !important;
  border-radius: 20px !important;
  background-color: var(--neu-bg) !important;
  color: var(--neu-text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: var(--neu-extruded) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: var(--neu-ease) !important;
}

.neu-btn-secondary:hover {
  color: var(--neu-accent) !important;
  box-shadow: var(--neu-extruded-hover) !important;
  transform: translateY(-4px) !important;
}

.neu-btn-secondary:active {
  transform: translateY(2px) !important;
  box-shadow: inset 4px 4px 8px rgb(163, 177, 198, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.5) !important;
}

/* Hero Inline Stats */
.neu-hero-stats {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 40px !important;
  margin-top: 56px !important;
}

.neu-hero-stat-item .font-display {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  color: var(--neu-accent) !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}

.neu-hero-stat-item div:last-child {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--neu-text-muted) !important;
}

/* Hero Right Column 3D Sculpture (1:1 from designprompts.dev) */
.neu-hero-col-right {
  position: relative !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.neu-sculpture-card {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  border-radius: 48px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset-deep) !important;
  padding: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Concentric Depth Circles */
.neu-concentric-outer {
  width: 192px !important;
  height: 192px !important;
  border-radius: 50% !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 10 !important;
  transition: var(--neu-ease) !important;
}

.neu-concentric-outer:hover {
  transform: scale(1.06) !important;
}

.neu-concentric-middle {
  width: 128px !important;
  height: 128px !important;
  border-radius: 50% !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset-deep) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--neu-ease) !important;
}

.neu-concentric-inner {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #6C63FF 0%, #8B84FF 100%) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.neu-concentric-inner:hover {
  transform: rotate(180deg) !important;
}

/* Floating Shapes in Sculpture */
.neu-float-square-1 {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 80px !important;
  height: 80px !important;
  transform: rotate(12deg) !important;
  border-radius: 24px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded) !important;
  z-index: 5 !important;
}

.neu-float-square-2 {
  position: absolute !important;
  bottom: 40px !important;
  left: 20px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

.neu-float-circle {
  position: absolute !important;
  top: 25% !important;
  left: 0 !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset) !important;
  z-index: 2 !important;
}

/* Floating Badge Card */
.neu-floating-badge {
  position: absolute !important;
  bottom: -32px !important;
  left: -36px !important;
  border-radius: 24px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 18px 24px !important;
  z-index: 20 !important;
  animation: float 3s ease-in-out infinite !important;
}

.neu-badge-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ambient Background Blobs */
.neu-ambient-bg {
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}

.neu-ambient-circle-1 {
  position: absolute !important;
  top: -128px !important;
  right: -128px !important;
  width: 384px !important;
  height: 384px !important;
  border-radius: 50% !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded) !important;
  opacity: 0.6 !important;
}

.neu-ambient-circle-2 {
  position: absolute !important;
  bottom: -80px !important;
  left: -80px !important;
  width: 256px !important;
  height: 256px !important;
  border-radius: 50% !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset) !important;
  opacity: 0.4 !important;
}

/* ==========================================================================
   5. Neumorphic Dedicated Stats Band ([neu_stats])
   ========================================================================== */
.neu-stats-section {
  max-width: 1280px !important;
  margin: 0 auto 64px auto !important;
  padding: 0 24px !important;
}

.neu-stats-wrapper {
  border-radius: 40px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset-deep) !important;
  padding: 40px !important;
}

@media (min-width: 768px) {
  .neu-stats-wrapper {
    padding: 48px !important;
  }
}

.neu-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

@media (min-width: 768px) {
  .neu-stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
  }
}

.neu-stat-card {
  border-radius: 28px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 32px 20px !important;
  text-align: center !important;
  transition: var(--neu-ease) !important;
}

.neu-stat-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 14px 14px 24px rgb(163, 177, 198, 0.8), -14px -14px 24px rgba(255, 255, 255, 0.7) !important;
}

.neu-stat-value {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  color: var(--neu-accent) !important;
  margin-bottom: 8px !important;
  line-height: 1.05 !important;
  transition: transform 0.3s ease !important;
}

.neu-stat-card:hover .neu-stat-value {
  transform: scale(1.08) !important;
}

.neu-stat-label {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--neu-text-primary) !important;
}

.neu-stat-trend {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--neu-text-muted) !important;
  margin-top: 6px !important;
}

/* ==========================================================================
   6. Neumorphic Segmented Category Navigation
   ========================================================================== */
.neu-category-bar,
.apple-category-bar {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 10px 14px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset) !important;
  border-radius: var(--neu-radius-pill) !important;
  max-width: 980px !important;
  margin: 0 auto 56px auto !important;
}

.neu-cat-pill,
.apple-cat-pill {
  display: inline-block !important;
  padding: 10px 24px !important;
  border-radius: var(--neu-radius-pill) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--neu-text-muted) !important;
  text-decoration: none !important;
  transition: var(--neu-ease) !important;
  background-color: transparent !important;
  border: none !important;
}

.neu-cat-pill:hover,
.apple-cat-pill:hover {
  color: var(--neu-text-primary) !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  transform: translateY(-2px) !important;
}

.neu-cat-pill.active,
.apple-cat-pill.active {
  background-color: var(--neu-bg) !important;
  color: var(--neu-accent) !important;
  box-shadow: var(--neu-inset-sm) !important;
  font-weight: 700 !important;
  transform: translateY(1px) !important;
}

/* Section Header styling */
.apple-section-header,
.neu-section-header {
  text-align: left !important;
  max-width: 1280px !important;
  margin: 0 auto 36px auto !important;
  padding: 0 24px !important;
}

.apple-section-header h2,
.neu-section-header h2 {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--neu-text-primary) !important;
  margin: 0 0 6px 0 !important;
}

.apple-section-header p,
.neu-section-header p {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--neu-text-muted) !important;
  margin: 0 !important;
}

/* ==========================================================================
   7. Product Grid & Cards (CRITICAL: Multiply mix-blend-mode inside insetDeep well)
   ========================================================================== */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 32px !important;
  max-width: 1280px !important;
  margin: 0 auto 72px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.ct-container[data-sidebar="left"] ul.products {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 28px !important;
  padding: 0 !important;
  margin: 0 0 56px 0 !important;
}

[data-hero],
[data-hero-type],
.woocommerce-products-header,
.page-header,
.woocommerce-products-header .ct-container {
  background-color: var(--neu-bg) !important;
  background: var(--neu-bg) !important;
  border: none !important;
}

ul.products::before, ul.products::after {
  display: none !important;
}

/* Extruded Soft Clay Card (1:1 designprompts.dev Card) */
ul.products li.product {
  background-color: var(--neu-bg) !important;
  border: none !important;
  border-radius: var(--neu-radius-card) !important;
  padding: 28px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-shadow: var(--neu-extruded) !important;
  transition: var(--neu-ease) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--neu-extruded-hover) !important;
}

/* Inset Deep Picture Well (1:1 designprompts.dev CardInset) */
ul.products li.product figure {
  order: 1 !important;
  margin: 0 0 20px 0 !important;
  padding: 16px !important;
  background-color: var(--neu-bg) !important; /* Clay tone matches background perfectly */
  border-radius: var(--neu-radius-lg) !important;
  box-shadow: var(--neu-inset-deep) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 210px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: var(--neu-ease) !important;
}

ul.products li.product figure a.ct-media-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Multiply mix-blend-mode melts white JPEG backgrounds into clay tone with zero border artifacts */
ul.products li.product figure img {
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
  background: transparent !important;
  mix-blend-mode: multiply !important;
  margin: 0 !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

ul.products li.product:hover figure img {
  transform: scale(1.08) !important;
}

/* Category Eyebrow Tag - ORDER 2 */
ul.products li.product .entry-meta,
ul.products li.product ul.entry-meta {
  order: 2 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.products li.product .entry-meta li,
ul.products li.product .entry-meta a {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--neu-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

ul.products li.product .entry-meta a:hover {
  color: var(--neu-accent) !important;
}

/* Stock Pill - ORDER 3 (Inset Pill with Teal Glowing Indicator) */
ul.products li.product .neu-stock-pill,
ul.products li.product .apple-stock-pill {
  order: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset-sm) !important;
  padding: 4px 12px !important;
  border-radius: var(--neu-radius-pill) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--neu-accent-teal) !important;
  margin-bottom: 12px !important;
  align-self: flex-start !important;
}

.neu-stock-dot,
.apple-stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--neu-accent-teal);
  box-shadow: 0 0 8px var(--neu-accent-teal);
  display: inline-block;
}

/* Product Title - ORDER 4 */
ul.products li.product .woocommerce-loop-product__title {
  order: 4 !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--neu-text-primary) !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 40px !important;
  letter-spacing: -0.015em !important;
}

ul.products li.product .woocommerce-loop-product__title a {
  color: var(--neu-text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

ul.products li.product .woocommerce-loop-product__title a:hover {
  color: var(--neu-accent) !important;
}

/* Price - ORDER 5 */
ul.products li.product .price {
  order: 5 !important;
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--neu-text-primary) !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: -0.02em !important;
}

ul.products li.product .price .woocommerce-Price-currencySymbol {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--neu-text-muted) !important;
  margin-left: 3px !important;
}

/* Add to Cart CTA - ORDER 6 (Physical Press Response) */
ul.products li.product .ct-woo-card-actions {
  order: 6 !important;
  margin-top: auto !important;
  width: 100% !important;
}

ul.products li.product .button,
ul.products li.product a.button.add_to_cart_button {
  width: 100% !important;
  height: 48px !important;
  background-color: var(--neu-bg) !important;
  color: var(--neu-text-primary) !important;
  border: none !important;
  box-shadow: var(--neu-extruded-sm) !important;
  border-radius: 16px !important;
  padding: 0 18px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--neu-ease) !important;
  margin: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

ul.products li.product .button:hover,
ul.products li.product a.button.add_to_cart_button:hover {
  color: var(--neu-accent) !important;
  box-shadow: var(--neu-extruded) !important;
  transform: translateY(-2px) !important;
}

ul.products li.product .button:active,
ul.products li.product a.button.add_to_cart_button:active {
  transform: translateY(1px) !important;
  box-shadow: var(--neu-inset-sm) !important;
  color: var(--neu-accent) !important;
}

/* ==========================================================================
   8. Neumorphic Shop Sidebar (Left Column on /sklep/)
   ========================================================================== */
.ct-container[data-sidebar="left"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 40px !important;
  max-width: 1320px !important;
  margin: 36px auto !important;
  padding: 0 24px !important;
}

.ct-container[data-sidebar="left"] > aside#sidebar {
  order: 1 !important;
  width: 290px !important;
  min-width: 270px !important;
  max-width: 320px !important;
  flex-shrink: 0 !important;
}

.ct-container[data-sidebar="left"] > section {
  order: 2 !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#sidebar {
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
  width: 290px !important;
  min-width: 270px !important;
  max-width: 320px !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

#sidebar .ct-sidebar {
  background-color: var(--neu-bg) !important;
  border: none !important;
  border-radius: var(--neu-radius-card) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 32px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

#sidebar .ct-widget {
  background: transparent !important;
  border-bottom: 1px solid rgba(163, 177, 198, 0.25) !important;
  padding: 0 0 28px 0 !important;
  margin: 0 !important;
}

#sidebar .ct-widget:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

#sidebar .widget-title {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--neu-text-primary) !important;
  margin: 0 0 18px 2px !important;
  padding: 0 !important;
}

/* --- Search Widget (Carved Inset Deep Field + Extruded Button) --- */
#sidebar .widget_product_search form,
.widget_product_search form.woocommerce-product-search,
.widget_product_search form.ct-search-form {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#sidebar .widget_product_search label.screen-reader-text {
  display: none !important;
}

#sidebar .widget_product_search input.search-field,
.widget_product_search form input[type="search"],
.widget_product_search form .search-field {
  width: 100% !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 50px 0 18px !important;
  background-color: var(--neu-bg) !important;
  border: none !important;
  box-shadow: var(--neu-inset-deep) !important;
  border-radius: 16px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--neu-text-primary) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: var(--neu-ease) !important;
  -webkit-appearance: none !important;
}

#sidebar .widget_product_search input.search-field::placeholder,
.widget_product_search form input[type="search"]::placeholder {
  color: var(--neu-text-placeholder) !important;
}

#sidebar .widget_product_search input.search-field:focus,
.widget_product_search form input[type="search"]:focus {
  outline: 2px solid var(--neu-accent) !important;
  outline-offset: 2px !important;
}

#sidebar .widget_product_search button,
#sidebar .widget_product_search button.wp-element-button,
.widget_product_search form button[type="submit"],
.widget_product_search form button.wp-element-button {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--neu-text-muted) !important;
  transition: var(--neu-ease) !important;
  z-index: 5 !important;
}

#sidebar .widget_product_search button:hover,
.widget_product_search form button[type="submit"]:hover {
  color: var(--neu-accent) !important;
  box-shadow: var(--neu-extruded) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

#sidebar .widget_product_search button:active,
.widget_product_search form button[type="submit"]:active {
  box-shadow: var(--neu-inset-sm) !important;
  transform: translateY(-50%) scale(0.96) !important;
}

#sidebar .widget_product_search button svg {
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
}

#sidebar .widget_product_search .ct-ajax-loader {
  display: none !important;
}

/* --- Category Navigation (Tactile Finder List with Inset Badges) --- */
#sidebar ul.product-categories {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#sidebar ul.product-categories li.cat-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  transition: var(--neu-ease) !important;
}

#sidebar ul.product-categories li.cat-item:hover {
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  transform: translateY(-2px) !important;
}

#sidebar ul.product-categories li.cat-item.current-cat {
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset-sm) !important;
  transform: translateY(1px) !important;
}

#sidebar ul.product-categories li.cat-item a {
  flex: 1 !important;
  padding: 9px 14px !important;
  color: var(--neu-text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

#sidebar ul.product-categories li.cat-item:hover a {
  color: var(--neu-accent) !important;
}

#sidebar ul.product-categories li.cat-item.current-cat a {
  color: var(--neu-accent) !important;
  font-weight: 700 !important;
}

/* Carved Inset Count Badge */
#sidebar ul.product-categories .apple-cat-count,
#sidebar ul.product-categories span.count {
  margin-right: 10px !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--neu-text-muted) !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset-sm) !important;
  padding: 3px 9px !important;
  border-radius: var(--neu-radius-pill) !important;
  transition: var(--neu-ease) !important;
  flex-shrink: 0 !important;
}

#sidebar ul.product-categories li.cat-item.current-cat .apple-cat-count,
#sidebar ul.product-categories li.cat-item.current-cat span.count {
  color: var(--neu-accent) !important;
  font-weight: 800 !important;
}

/* --- Price Filter (Carved Track + Tactile Extruded Handles) --- */
#sidebar .widget_price_filter form {
  margin: 0 !important;
}

#sidebar .widget_price_filter .price_slider_wrapper {
  padding: 10px 4px 0 4px !important;
}

/* Carved Inset Track */
#sidebar .widget_price_filter .price_slider_wrapper .ui-widget-content,
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset-sm) !important;
  height: 10px !important;
  border: none !important;
  border-radius: var(--neu-radius-pill) !important;
  margin: 20px 8px 20px 8px !important;
  position: relative !important;
}

/* Selected Range Highlight */
#sidebar .widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-range {
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%) !important;
  height: 100% !important;
  top: 0 !important;
  border-radius: var(--neu-radius-pill) !important;
  position: absolute !important;
}

/* Extruded Circular Knobs */
#sidebar .widget_price_filter .ui-slider .ui-slider-handle,
.widget_price_filter .ui-slider .ui-slider-handle {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  border: none !important;
  cursor: grab !important;
  outline: none !important;
  margin: 0 !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
}

#sidebar .widget_price_filter .ui-slider .ui-slider-handle:hover,
#sidebar .widget_price_filter .ui-slider .ui-slider-handle:focus,
#sidebar .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active,
.widget_price_filter .ui-slider .ui-slider-handle:hover,
.widget_price_filter .ui-slider .ui-slider-handle:focus,
.widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
  transform: translate(-50%, -50%) scale(1.18) !important;
  box-shadow: var(--neu-extruded-hover) !important;
  cursor: grabbing !important;
}

/* Price Label and Filter Button */
#sidebar .widget_price_filter .price_slider_amount,
.widget_price_filter .price_slider_amount {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding: 0 !important;
}

#sidebar .widget_price_filter .price_label,
.widget_price_filter .price_label {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--neu-text-muted) !important;
  font-weight: 500 !important;
  order: 1 !important;
  margin: 0 !important;
}

#sidebar .widget_price_filter .price_label span,
#sidebar .widget_price_filter .price_label .from,
#sidebar .widget_price_filter .price_label .to {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--neu-text-primary) !important;
}

#sidebar .widget_price_filter .price_slider_amount button.button,
.widget_price_filter .price_slider_amount button.button {
  order: 2 !important;
  background-color: var(--neu-accent) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: var(--neu-btn-primary-shadow) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 20px !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--neu-ease) !important;
}

#sidebar .widget_price_filter .price_slider_amount button.button:hover,
.widget_price_filter .price_slider_amount button.button:hover {
  background-color: var(--neu-accent-hover) !important;
  box-shadow: var(--neu-btn-primary-hover) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

#sidebar .widget_price_filter .price_slider_amount button.button:active,
.widget_price_filter .price_slider_amount button.button:active {
  box-shadow: var(--neu-btn-primary-active) !important;
  transform: translateY(1px) !important;
}

#sidebar .widget_price_filter .clear,
.widget_price_filter .clear {
  display: none !important;
}

/* ==========================================================================
   9. Shop Toolbar, Ordering & Pagination
   ========================================================================== */
.woo-listing-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.woocommerce-result-count {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--neu-text-muted) !important;
  margin: 0 !important;
}

.woocommerce-ordering select {
  background-color: var(--neu-bg) !important;
  border: none !important;
  box-shadow: var(--neu-inset-sm) !important;
  border-radius: 14px !important;
  padding: 10px 18px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--neu-text-primary) !important;
  outline: none !important;
  cursor: pointer !important;
  transition: var(--neu-ease) !important;
}

.woocommerce-ordering select:focus {
  outline: 2px solid var(--neu-accent) !important;
  outline-offset: 2px !important;
}

/* Neumorphic Pagination */
nav.woocommerce-pagination ul {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  border: none !important;
  margin: 56px 0 !important;
  padding: 0 !important;
}

nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 !important;
}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  color: var(--neu-text-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: var(--neu-ease) !important;
  text-decoration: none !important;
}

nav.woocommerce-pagination ul li a:hover {
  color: var(--neu-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--neu-extruded) !important;
}

nav.woocommerce-pagination ul li span.current {
  box-shadow: var(--neu-inset-sm) !important;
  color: var(--neu-accent) !important;
  font-weight: 800 !important;
  transform: translateY(1px) !important;
}

/* Blocksy pagination (Tactile squircle buttons) */
.ct-pagination {
  margin: 56px 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.ct-pagination > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ct-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-extruded-sm) !important;
  color: var(--neu-text-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: var(--neu-ease) !important;
  text-decoration: none !important;
}

.ct-pagination .page-numbers:hover {
  color: var(--neu-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--neu-extruded) !important;
}

.ct-pagination .page-numbers.current {
  box-shadow: var(--neu-inset-sm) !important;
  color: var(--neu-accent) !important;
  font-weight: 800 !important;
  transform: translateY(1px) !important;
}

.ct-pagination a.next.page-numbers,
.ct-pagination a.prev.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
}


/* ==========================================================================
   10. Neumorphic Values Strip (4 Extruded Cards with Inset Icon Wells)
   ========================================================================== */
.neu-values-strip,
.apple-values-strip {
  background-color: transparent !important;
  border: none !important;
  padding: 48px 0 !important;
  margin: 72px 0 !important;
}

.neu-values-grid,
.apple-values-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 32px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.neu-value-card,
.apple-value-item {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius-card) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 36px 28px !important;
  transition: var(--neu-ease) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.neu-value-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--neu-extruded-hover) !important;
}

.neu-icon-well {
  width: 60px !important;
  height: 60px !important;
  border-radius: 20px !important;
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--neu-accent) !important;
  margin-bottom: 24px !important;
}

.neu-value-card h3,
.apple-value-item h3 {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--neu-text-primary) !important;
  margin: 0 0 10px 0 !important;
}

.neu-value-card p,
.apple-value-item p {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--neu-text-muted) !important;
  margin: 0 !important;
}

/* ==========================================================================
   11. Single Product Page (1:1 Neumorphic Sculpted Gallery & Summary)
   ========================================================================== */
.single-product div.product {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 48px 24px 80px 24px !important;
}

.single-product .product-entry-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: flex-start !important;
}

@media (max-width: 900px) {
  .single-product .product-entry-wrapper {
    grid-template-columns: 1fr !important;
  }
}

.single-product div.product .woocommerce-product-gallery {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius-card) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 32px !important;
  margin-bottom: 0 !important;
}

.single-product .ct-media-container,
.single-product div.product .woocommerce-product-gallery__image {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius-lg) !important;
  box-shadow: var(--neu-inset-deep) !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.single-product .ct-media-container img,
.single-product div.product .woocommerce-product-gallery__image img {
  mix-blend-mode: multiply !important;
  object-fit: contain !important;
  max-height: 440px !important;
  width: 100% !important;
}

.single-product .summary.entry-summary {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius-card) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 40px !important;
  display: flex !important;
  flex-direction: column !important;
}

.single-product div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  color: var(--neu-text-primary) !important;
  margin-bottom: 16px !important;
}

.single-product div.product p.price {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--neu-text-primary) !important;
  margin-bottom: 24px !important;
}

.single-product div.product form.cart .single_add_to_cart_button {
  background-color: var(--neu-accent) !important;
  color: #ffffff !important;
  border-radius: 18px !important;
  padding: 16px 40px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: var(--neu-btn-primary-shadow) !important;
  transition: var(--neu-ease) !important;
  cursor: pointer !important;
}

.single-product div.product form.cart .single_add_to_cart_button:hover {
  background-color: var(--neu-accent-hover) !important;
  box-shadow: var(--neu-btn-primary-hover) !important;
  transform: translateY(-2px) !important;
}

.single-product div.product form.cart .single_add_to_cart_button:active {
  box-shadow: var(--neu-btn-primary-active) !important;
  transform: translateY(1px) !important;
}

.single-product div.product form.cart .quantity input.qty {
  background-color: var(--neu-bg) !important;
  box-shadow: var(--neu-inset-sm) !important;
  border: none !important;
  border-radius: 14px !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--neu-text-primary) !important;
  padding: 14px !important;
  width: 76px !important;
  margin-right: 16px !important;
}

/* ==========================================================================
   12. Cart & Checkout (Extruded Cards & Inset Form Fields)
   ========================================================================== */
.woocommerce-cart table.shop_table,
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius-card) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 36px !important;
  border: none !important;
}

.woocommerce-cart-form__contents thead th {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--neu-text-muted) !important;
  border-bottom: 1px solid rgba(163, 177, 198, 0.25) !important;
  padding-bottom: 16px !important;
}

/* Form Controls (Inputs, Selects, Textareas - Inset Deep) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background-color: var(--neu-bg) !important;
  border: none !important;
  box-shadow: var(--neu-inset-deep) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--neu-text-primary) !important;
  outline: none !important;
  transition: var(--neu-ease) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus {
  outline: 2px solid var(--neu-accent) !important;
  outline-offset: 2px !important;
}

.woocommerce-checkout .woocommerce-checkout-payment {
  background-color: var(--neu-bg) !important;
  border-radius: 20px !important;
  box-shadow: var(--neu-inset) !important;
  border: none !important;
  padding: 24px !important;
  margin-top: 24px !important;
}

#place_order {
  background-color: var(--neu-accent) !important;
  color: #ffffff !important;
  border-radius: 18px !important;
  padding: 18px 36px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  width: 100% !important;
  border: none !important;
  box-shadow: var(--neu-btn-primary-shadow) !important;
  transition: var(--neu-ease) !important;
  cursor: pointer !important;
  margin-top: 20px !important;
}

#place_order:hover {
  background-color: var(--neu-accent-hover) !important;
  box-shadow: var(--neu-btn-primary-hover) !important;
  transform: translateY(-2px) !important;
}

#place_order:active {
  box-shadow: var(--neu-btn-primary-active) !important;
  transform: translateY(1px) !important;
}

/* ==========================================================================
   13. Neumorphic Contact Page (/kontakt/)
   ========================================================================== */
.apple-contact-container,
.neu-contact-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 56px 24px 80px 24px !important;
}

.apple-contact-header,
.neu-contact-header {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 48px auto !important;
}

.apple-contact-grid,
.neu-contact-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 28px !important;
  margin-bottom: 56px !important;
}

.apple-contact-card,
.neu-contact-card {
  background-color: var(--neu-bg) !important;
  border: none !important;
  border-radius: var(--neu-radius-card) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 32px !important;
  transition: var(--neu-ease) !important;
}

.apple-contact-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--neu-extruded-hover) !important;
}

.apple-contact-card .contact-label {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--neu-accent) !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 12px !important;
}

.apple-contact-card h3 {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--neu-text-primary) !important;
  margin: 0 0 8px 0 !important;
}

.apple-contact-card p {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--neu-text-muted) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

.apple-contact-form-section,
.neu-contact-form-section {
  background-color: var(--neu-bg) !important;
  border: none !important;
  border-radius: var(--neu-radius-card) !important;
  box-shadow: var(--neu-extruded) !important;
  padding: 48px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

.apple-contact-form-section h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  margin: 0 0 28px 0 !important;
  letter-spacing: -0.02em !important;
}

.apple-minimal-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.apple-minimal-form .form-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

@media (max-width: 640px) {
  .apple-minimal-form .form-row-2 {
    grid-template-columns: 1fr !important;
  }
}

.apple-minimal-form .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.apple-minimal-form label {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--neu-text-primary) !important;
}

.apple-minimal-form input,
.apple-minimal-form textarea {
  background-color: var(--neu-bg) !important;
  border: none !important;
  box-shadow: var(--neu-inset-deep) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  color: var(--neu-text-primary) !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  transition: var(--neu-ease) !important;
}

.apple-minimal-form input:focus,
.apple-minimal-form textarea:focus {
  outline: 2px solid var(--neu-accent) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   14. Footer (1:1 designprompts.dev Neumorphic Footer)
   ========================================================================== */
footer.site-footer {
  background-color: var(--neu-bg) !important;
  color: var(--neu-text-muted) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 -8px 24px rgba(163, 177, 198, 0.25) !important;
  font-size: 14px !important;
  padding: 56px 0 !important;
  margin-top: 96px !important;
}

footer.site-footer a {
  color: var(--neu-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

footer.site-footer a:hover {
  color: var(--neu-accent) !important;
}