/* ==========================================================================
   PassiveWP — Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Light Theme Default)
   -------------------------------------------------------------------------- */
:root {
  /* Brand — Smooth Green */
  --pwp-primary:         #2ECC71;
  --pwp-primary-dark:    #27AE60;
  --pwp-primary-light:   #A9DFBF;
  --pwp-primary-xlight:  #EAFAF1;

  /* Secondary */
  --pwp-secondary:       #2C3E50;
  --pwp-secondary-light: #34495E;

  /* Neutrals */
  --pwp-white:           #FFFFFF;
  --pwp-gray-50:         #F9FAFB;
  --pwp-gray-100:        #F3F4F6;
  --pwp-gray-200:        #E5E7EB;
  --pwp-gray-300:        #D1D5DB;
  --pwp-gray-400:        #9CA3AF;
  --pwp-gray-500:        #6B7280;
  --pwp-gray-600:        #4B5563;
  --pwp-gray-700:        #374151;
  --pwp-gray-800:        #1F2937;
  --pwp-gray-900:        #111827;
  --pwp-black:           #000000;

  /* Semantic */
  --pwp-text-primary:    var(--pwp-gray-900);
  --pwp-text-secondary:  var(--pwp-gray-600);
  --pwp-text-muted:      var(--pwp-gray-400);
  --pwp-text-inverse:    var(--pwp-white);
  --pwp-bg-body:         var(--pwp-white);
  --pwp-bg-alt:          var(--pwp-gray-50);
  --pwp-bg-card:         var(--pwp-white);
  --pwp-border:          var(--pwp-gray-200);
  --pwp-border-dark:     var(--pwp-gray-300);
  --pwp-shadow-sm:       0 1px 2px rgba(0,0,0,0.05);
  --pwp-shadow:          0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
  --pwp-shadow-md:       0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --pwp-shadow-lg:       0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --pwp-shadow-xl:       0 25px 50px rgba(0,0,0,0.15);

  /* Typography */
  --pwp-font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pwp-font-heading:    'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pwp-font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes — Breakpoint-based, set at each breakpoint */
  --pwp-text-xs:    0.75rem;   /* 12px */
  --pwp-text-sm:    0.875rem;  /* 14px */
  --pwp-text-base:  1rem;      /* 16px */
  --pwp-text-lg:    1.125rem;  /* 18px */
  --pwp-text-xl:    1.25rem;   /* 20px */
  --pwp-text-2xl:   1.5rem;    /* 24px */
  --pwp-text-3xl:   1.875rem;  /* 30px */
  --pwp-text-4xl:   2.25rem;   /* 36px */
  --pwp-text-5xl:   3rem;      /* 48px */
  --pwp-text-6xl:   3.75rem;   /* 60px */
  --pwp-text-7xl:   4.5rem;    /* 72px */

  /* Spacing */
  --pwp-space-1:   0.25rem;
  --pwp-space-2:   0.5rem;
  --pwp-space-3:   0.75rem;
  --pwp-space-4:   1rem;
  --pwp-space-5:   1.25rem;
  --pwp-space-6:   1.5rem;
  --pwp-space-8:   2rem;
  --pwp-space-10:  2.5rem;
  --pwp-space-12:  3rem;
  --pwp-space-16:  4rem;
  --pwp-space-20:  5rem;
  --pwp-space-24:  6rem;
  --pwp-space-32:  8rem;

  /* Layout */
  --pwp-container:     1280px;
  --pwp-container-sm:  960px;
  --pwp-container-lg:  1440px;
  --pwp-gutter:        1.5rem;

  /* Border Radius */
  --pwp-radius-sm:  0.25rem;
  --pwp-radius:     0.5rem;
  --pwp-radius-md:  0.75rem;
  --pwp-radius-lg:  1rem;
  --pwp-radius-xl:  1.5rem;
  --pwp-radius-2xl: 2rem;
  --pwp-radius-full: 9999px;

  /* Transitions */
  --pwp-transition:       all 0.25s ease;
  --pwp-transition-fast:  all 0.15s ease;
  --pwp-transition-slow:  all 0.4s ease;

  /* Header */
  --pwp-header-height:        80px;
  --pwp-header-height-scroll: 64px;
  --pwp-header-bg:            var(--pwp-white);
  --pwp-header-border:        var(--pwp-border);
  --pwp-header-shadow:        var(--pwp-shadow);

  /* Z-index scale */
  --pwp-z-dropdown:    1000;
  --pwp-z-sticky:      1020;
  --pwp-z-overlay:     1030;
  --pwp-z-modal:       1040;
  --pwp-z-toast:       1050;
}

/* --------------------------------------------------------------------------
   2. Demo Color Palettes
   -------------------------------------------------------------------------- */

/* HVAC */
.pwp-demo-hvac {
  --pwp-primary:       #E85D04;
  --pwp-primary-dark:  #C84B02;
  --pwp-secondary:     #023E8A;
}

/* Construction */
.pwp-demo-construction {
  --pwp-primary:       #F4A261;
  --pwp-primary-dark:  #E07B3A;
  --pwp-secondary:     #2D2D2D;
}

/* Cleaning */
.pwp-demo-cleaning {
  --pwp-primary:       #00B4D8;
  --pwp-primary-dark:  #0096C7;
  --pwp-secondary:     #03045E;
}

/* Pest Control */
.pwp-demo-pest-control {
  --pwp-primary:       #2D6A4F;
  --pwp-primary-dark:  #1B4332;
  --pwp-secondary:     #F4D03F;
}

/* Car Wash */
.pwp-demo-car-wash {
  --pwp-primary:       #0077B6;
  --pwp-primary-dark:  #005A8E;
  --pwp-secondary:     #00B4D8;
}

/* Plumbing */
.pwp-demo-plumbing {
  --pwp-primary:       #1B4F72;
  --pwp-primary-dark:  #154060;
  --pwp-secondary:     #E74C3C;
}

/* Electrical */
.pwp-demo-electrical {
  --pwp-primary:       #F39C12;
  --pwp-primary-dark:  #D68910;
  --pwp-secondary:     #2C3E50;
}

/* Steel & Fabrication */
.pwp-demo-fabrication {
  --pwp-primary:       #5D6D7E;
  --pwp-primary-dark:  #4A5568;
  --pwp-secondary:     #E74C3C;
}

/* Kitchen Cabinets */
.pwp-demo-kitchen {
  --pwp-primary:       #8B6914;
  --pwp-primary-dark:  #7A5C10;
  --pwp-secondary:     #5D4037;
  --pwp-bg-body:       #FAF7F2;
}

/* Renovation */
.pwp-demo-renovation {
  --pwp-primary:       #27AE60;
  --pwp-primary-dark:  #1E8449;
  --pwp-secondary:     #E67E22;
}

/* Roller Shutters */
.pwp-demo-shutters {
  --pwp-primary:       #2C3E50;
  --pwp-primary-dark:  #1A252F;
  --pwp-secondary:     #3498DB;
}

/* Car Tinting */
.pwp-demo-tinting {
  --pwp-primary:       #C0392B;
  --pwp-primary-dark:  #A93226;
  --pwp-secondary:     #1A1A2E;
  --pwp-bg-body:       #F8F8F8;
}

/* Building Maintenance */
.pwp-demo-maintenance {
  --pwp-primary:       #16A085;
  --pwp-primary-dark:  #117A65;
  --pwp-secondary:     #F39C12;
}

/* Gates & Shades */
.pwp-demo-gates {
  --pwp-primary:       #6C3483;
  --pwp-primary-dark:  #5B2C6F;
  --pwp-secondary:     #AF7AC5;
}

/* Blacksmith */
.pwp-demo-blacksmith {
  --pwp-primary:       #D4AC0D;
  --pwp-primary-dark:  #B7950B;
  --pwp-secondary:     #1C1C1C;
  --pwp-bg-body:       #F5F5F5;
}

/* --------------------------------------------------------------------------
   3. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--pwp-font-body);
  font-size: var(--pwp-text-base);
  line-height: 1.7;
  color: var(--pwp-text-primary);
  background-color: var(--pwp-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--pwp-primary);
  text-decoration: none;
  transition: var(--pwp-transition-fast);
}

a:hover {
  color: var(--pwp-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pwp-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pwp-text-primary);
}

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.5em; }

blockquote {
  border-left: 4px solid var(--pwp-primary);
  padding-left: var(--pwp-space-6);
  margin: var(--pwp-space-6) 0;
  font-style: italic;
  color: var(--pwp-text-secondary);
}

code {
  font-family: var(--pwp-font-mono);
  font-size: 0.875em;
  background: var(--pwp-gray-100);
  padding: 0.2em 0.4em;
  border-radius: var(--pwp-radius-sm);
}

pre {
  font-family: var(--pwp-font-mono);
  background: var(--pwp-gray-900);
  color: var(--pwp-gray-100);
  padding: var(--pwp-space-6);
  border-radius: var(--pwp-radius);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  padding: var(--pwp-space-3) var(--pwp-space-4);
  border: 1px solid var(--pwp-border);
  text-align: left;
}

th {
  background: var(--pwp-gray-50);
  font-weight: 600;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--pwp-primary);
  outline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
   4. Layout Utilities
   -------------------------------------------------------------------------- */
.pwp-container {
  width: 100%;
  max-width: var(--pwp-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pwp-gutter);
  padding-right: var(--pwp-gutter);
}

.pwp-container--sm  { max-width: var(--pwp-container-sm); }
.pwp-container--lg  { max-width: var(--pwp-container-lg); }
.pwp-container--full { max-width: 100%; }

.pwp-section {
  padding-top: var(--pwp-space-20);
  padding-bottom: var(--pwp-space-20);
}

.pwp-section--sm {
  padding-top: var(--pwp-space-12);
  padding-bottom: var(--pwp-space-12);
}

.pwp-section--lg {
  padding-top: var(--pwp-space-32);
  padding-bottom: var(--pwp-space-32);
}

/* Grid */
.pwp-grid {
  display: grid;
  gap: var(--pwp-space-6);
}

.pwp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pwp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pwp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pwp-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Flex */
.pwp-flex         { display: flex; }
.pwp-flex--center { justify-content: center; align-items: center; }
.pwp-flex--between { justify-content: space-between; align-items: center; }
.pwp-flex--wrap   { flex-wrap: wrap; }
.pwp-flex--col    { flex-direction: column; }
.pwp-flex--gap    { gap: var(--pwp-space-4); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.pwp-header {
  position: relative;
  z-index: var(--pwp-z-sticky);
  background: var(--pwp-header-bg);
  border-bottom: 1px solid var(--pwp-header-border);
  transition: var(--pwp-transition);
}

.pwp-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: var(--pwp-header-shadow);
  height: var(--pwp-header-height-scroll);
}

.pwp-header.is-transparent {
  position: absolute;
  background: transparent;
  border-bottom-color: transparent;
}

.pwp-header.is-transparent.is-scrolled {
  background: var(--pwp-header-bg);
  border-bottom-color: var(--pwp-header-border);
}

.pwp-header__inner {
  display: flex;
  align-items: center;
  height: var(--pwp-header-height);
  gap: var(--pwp-space-8);
  transition: height 0.3s ease;
}

.is-sticky .pwp-header__inner {
  height: var(--pwp-header-height-scroll);
}

.pwp-header__logo {
  flex-shrink: 0;
}

.pwp-header__logo img {
  height: 48px;
  width: auto;
  transition: var(--pwp-transition);
}

.is-sticky .pwp-header__logo img {
  height: 38px;
}

.pwp-header__logo-text {
  font-family: var(--pwp-font-heading);
  font-size: var(--pwp-text-xl);
  font-weight: 800;
  color: var(--pwp-text-primary);
}

.pwp-header__nav {
  flex: 1;
}

.pwp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--pwp-space-3);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.pwp-nav > ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pwp-nav > ul > li {
  position: relative;
}

.pwp-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: var(--pwp-space-1);
  padding: var(--pwp-space-3) var(--pwp-space-4);
  font-size: var(--pwp-text-sm);
  font-weight: 600;
  color: var(--pwp-text-primary);
  white-space: nowrap;
  transition: var(--pwp-transition-fast);
}

.pwp-nav > ul > li > a:hover,
.pwp-nav > ul > li.current-menu-item > a,
.pwp-nav > ul > li.current-menu-ancestor > a {
  color: var(--pwp-primary);
}

/* Dropdown */
.pwp-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--pwp-bg-card);
  border: 1px solid var(--pwp-border);
  border-radius: var(--pwp-radius);
  box-shadow: var(--pwp-shadow-md);
  padding: var(--pwp-space-2) 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--pwp-transition-fast);
  z-index: var(--pwp-z-dropdown);
}

.pwp-nav li:hover > .sub-menu,
.pwp-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pwp-nav .sub-menu a {
  display: block;
  padding: var(--pwp-space-2) var(--pwp-space-4);
  font-size: var(--pwp-text-sm);
  color: var(--pwp-text-primary);
  transition: var(--pwp-transition-fast);
}

.pwp-nav .sub-menu a:hover {
  color: var(--pwp-primary);
  background: var(--pwp-gray-50);
  padding-left: calc(var(--pwp-space-4) + 4px);
}

/* Mega Menu */
.pwp-nav .pwp-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(900px, 90vw);
  background: var(--pwp-bg-card);
  border: 1px solid var(--pwp-border);
  border-radius: var(--pwp-radius-lg);
  box-shadow: var(--pwp-shadow-xl);
  padding: var(--pwp-space-8);
  opacity: 0;
  visibility: hidden;
  transition: var(--pwp-transition-fast);
  z-index: var(--pwp-z-dropdown);
}

.pwp-nav li:hover > .pwp-mega-menu,
.pwp-nav li:focus-within > .pwp-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.pwp-mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pwp-space-8);
}

.pwp-mega-menu__col-title {
  font-size: var(--pwp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pwp-text-muted);
  margin-bottom: var(--pwp-space-3);
}

.pwp-mega-menu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pwp-space-3);
  padding: var(--pwp-space-2);
  border-radius: var(--pwp-radius);
  transition: var(--pwp-transition-fast);
  text-decoration: none;
  color: var(--pwp-text-primary);
}

.pwp-mega-menu__item:hover {
  background: var(--pwp-gray-50);
  color: var(--pwp-primary);
}

.pwp-mega-menu__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pwp-primary-xlight);
  color: var(--pwp-primary);
  border-radius: var(--pwp-radius);
  flex-shrink: 0;
  font-size: 18px;
}

.pwp-mega-menu__label {
  font-size: var(--pwp-text-sm);
  font-weight: 600;
  line-height: 1.3;
}

.pwp-mega-menu__desc {
  font-size: var(--pwp-text-xs);
  color: var(--pwp-text-muted);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   7. Mobile Navigation
   -------------------------------------------------------------------------- */
.pwp-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.pwp-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pwp-text-primary);
  border-radius: 2px;
  transition: var(--pwp-transition-fast);
  transform-origin: center;
}

.pwp-mobile-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.pwp-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.pwp-mobile-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.pwp-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--pwp-bg-card);
  z-index: calc(var(--pwp-z-overlay) + 10);
  overflow-y: auto;
  padding: var(--pwp-space-6);
}

.pwp-mobile-nav.is-open {
  display: block;
}

.pwp-mobile-nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--pwp-space-6);
  padding-bottom: var(--pwp-space-4);
  border-bottom: 1px solid var(--pwp-border);
}

.pwp-mobile-nav ul {
  list-style: none;
  padding: 0;
}

.pwp-mobile-nav ul li a {
  display: block;
  padding: var(--pwp-space-3) 0;
  font-size: var(--pwp-text-base);
  font-weight: 600;
  color: var(--pwp-text-primary);
  border-bottom: 1px solid var(--pwp-border);
}

.pwp-mobile-nav ul li a:hover {
  color: var(--pwp-primary);
}

.pwp-mobile-nav .sub-menu {
  padding-left: var(--pwp-space-4);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.pwp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pwp-space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--pwp-font-body);
  font-size: var(--pwp-text-sm);
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--pwp-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--pwp-transition-fast);
}

.pwp-btn--primary {
  background: var(--pwp-primary);
  color: var(--pwp-white);
  border-color: var(--pwp-primary);
}

.pwp-btn--primary:hover {
  background: var(--pwp-primary-dark);
  border-color: var(--pwp-primary-dark);
  color: var(--pwp-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46,204,113,0.35);
}

.pwp-btn--secondary {
  background: var(--pwp-secondary);
  color: var(--pwp-white);
  border-color: var(--pwp-secondary);
}

.pwp-btn--outline {
  background: transparent;
  color: var(--pwp-primary);
  border-color: var(--pwp-primary);
}

.pwp-btn--outline:hover {
  background: var(--pwp-primary);
  color: var(--pwp-white);
}

.pwp-btn--ghost {
  background: transparent;
  color: var(--pwp-text-primary);
  border-color: var(--pwp-border);
}

.pwp-btn--ghost:hover {
  border-color: var(--pwp-primary);
  color: var(--pwp-primary);
}

.pwp-btn--white {
  background: var(--pwp-white);
  color: var(--pwp-primary);
  border-color: var(--pwp-white);
}

.pwp-btn--sm  { padding: 0.5rem 1.25rem; font-size: var(--pwp-text-xs); }
.pwp-btn--lg  { padding: 1rem 2.5rem; font-size: var(--pwp-text-base); }
.pwp-btn--xl  { padding: 1.25rem 3rem; font-size: var(--pwp-text-lg); }
.pwp-btn--full { width: 100%; }

.pwp-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--pwp-radius-full);
}

/* --------------------------------------------------------------------------
   9. Cards (base)
   -------------------------------------------------------------------------- */
.pwp-card {
  background: var(--pwp-bg-card);
  border: 1px solid var(--pwp-border);
  border-radius: var(--pwp-radius-lg);
  overflow: hidden;
  transition: var(--pwp-transition);
}

.pwp-card:hover {
  box-shadow: var(--pwp-shadow-md);
  transform: translateY(-2px);
}

.pwp-card__media {
  position: relative;
  overflow: hidden;
}

.pwp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pwp-card:hover .pwp-card__media img {
  transform: scale(1.04);
}

.pwp-card__body {
  padding: var(--pwp-space-6);
}

.pwp-card__title {
  font-family: var(--pwp-font-heading);
  font-size: var(--pwp-text-xl);
  font-weight: 700;
  margin-bottom: var(--pwp-space-3);
}

.pwp-card__desc {
  color: var(--pwp-text-secondary);
  font-size: var(--pwp-text-sm);
  line-height: 1.7;
  margin-bottom: var(--pwp-space-4);
}

/* --------------------------------------------------------------------------
   10. Section Heading
   -------------------------------------------------------------------------- */
.pwp-section-heading {
  margin-bottom: var(--pwp-space-12);
}

.pwp-section-heading--center {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.pwp-section-heading__label {
  display: inline-flex;
  align-items: center;
  gap: var(--pwp-space-2);
  font-size: var(--pwp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pwp-primary);
  margin-bottom: var(--pwp-space-3);
}

.pwp-section-heading__label::before,
.pwp-section-heading__label::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pwp-primary);
}

.pwp-section-heading__title {
  font-size: var(--pwp-text-4xl);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--pwp-space-4);
}

.pwp-section-heading__desc {
  font-size: var(--pwp-text-lg);
  color: var(--pwp-text-secondary);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.pwp-footer {
  background: var(--pwp-secondary);
  color: var(--pwp-gray-300);
}

.pwp-footer__main {
  padding: var(--pwp-space-20) 0;
}

.pwp-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--pwp-space-12);
}

.pwp-footer__brand {
  max-width: 300px;
}

.pwp-footer__logo {
  margin-bottom: var(--pwp-space-4);
}

.pwp-footer__desc {
  font-size: var(--pwp-text-sm);
  line-height: 1.8;
  margin-bottom: var(--pwp-space-6);
}

.pwp-footer__social {
  display: flex;
  gap: var(--pwp-space-3);
}

.pwp-footer__social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: var(--pwp-radius-full);
  color: var(--pwp-gray-300);
  transition: var(--pwp-transition-fast);
  font-size: 16px;
}

.pwp-footer__social-link:hover {
  background: var(--pwp-primary);
  color: var(--pwp-white);
}

.pwp-footer__col-title {
  font-family: var(--pwp-font-heading);
  font-size: var(--pwp-text-base);
  font-weight: 700;
  color: var(--pwp-white);
  margin-bottom: var(--pwp-space-5);
}

.pwp-footer__links {
  list-style: none;
  padding: 0;
}

.pwp-footer__links li {
  margin-bottom: var(--pwp-space-2);
}

.pwp-footer__links a {
  font-size: var(--pwp-text-sm);
  color: var(--pwp-gray-400);
  transition: var(--pwp-transition-fast);
}

.pwp-footer__links a:hover {
  color: var(--pwp-primary);
  padding-left: 4px;
}

.pwp-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--pwp-space-6) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pwp-space-4);
  font-size: var(--pwp-text-sm);
  color: var(--pwp-gray-500);
}

/* --------------------------------------------------------------------------
   12. Page Title Bar
   -------------------------------------------------------------------------- */
.pwp-page-title {
  background: var(--pwp-gray-50);
  border-bottom: 1px solid var(--pwp-border);
  padding: var(--pwp-space-12) 0;
}

.pwp-page-title__heading {
  font-size: var(--pwp-text-4xl);
  font-weight: 800;
  margin-bottom: var(--pwp-space-3);
}

/* --------------------------------------------------------------------------
   13. Breadcrumb
   -------------------------------------------------------------------------- */
.pwp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pwp-space-2);
  font-size: var(--pwp-text-sm);
  color: var(--pwp-text-muted);
}

.pwp-breadcrumb a {
  color: var(--pwp-text-secondary);
}

.pwp-breadcrumb a:hover {
  color: var(--pwp-primary);
}

.pwp-breadcrumb__sep {
  color: var(--pwp-gray-300);
}

/* --------------------------------------------------------------------------
   14. WooCommerce Disabled Overlay
   -------------------------------------------------------------------------- */
.pwp-wc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}

.pwp-wc-overlay__inner {
  text-align: center;
  padding: var(--pwp-space-8);
  background: var(--pwp-white);
  border-radius: var(--pwp-radius-lg);
  max-width: 280px;
}

.pwp-wc-overlay__icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--pwp-space-3);
}

.pwp-wc-overlay__text {
  font-size: var(--pwp-text-sm);
  font-weight: 600;
  color: var(--pwp-text-primary);
  margin-bottom: var(--pwp-space-4);
}

.pwp-wc-overlay__btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--pwp-primary);
  color: var(--pwp-white);
  border-radius: var(--pwp-radius);
  font-size: var(--pwp-text-sm);
  font-weight: 600;
}

.pwp-wc-overlay__btn:hover {
  background: var(--pwp-primary-dark);
  color: var(--pwp-white);
}

/* --------------------------------------------------------------------------
   15. Dark Mode Toggle Button
   -------------------------------------------------------------------------- */
.pwp-dark-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pwp-gray-100);
  border: none;
  border-radius: var(--pwp-radius-full);
  cursor: pointer;
  transition: var(--pwp-transition-fast);
  color: var(--pwp-text-primary);
  font-size: 18px;
}

.pwp-dark-toggle:hover {
  background: var(--pwp-primary-xlight);
  color: var(--pwp-primary);
}

/* --------------------------------------------------------------------------
   16. Skeleton / Loading States
   -------------------------------------------------------------------------- */
.pwp-skeleton {
  background: linear-gradient(90deg, var(--pwp-gray-100) 25%, var(--pwp-gray-200) 50%, var(--pwp-gray-100) 75%);
  background-size: 200% 100%;
  animation: pwp-skeleton 1.5s infinite;
  border-radius: var(--pwp-radius);
}

@keyframes pwp-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   17. Search Overlay
   -------------------------------------------------------------------------- */
.pwp-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--pwp-z-overlay);
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.pwp-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.pwp-search-overlay__inner {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 var(--pwp-gutter);
}

.pwp-search-form {
  display: flex;
  align-items: center;
  background: var(--pwp-white);
  border-radius: var(--pwp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pwp-shadow-xl);
}

.pwp-search-form__input {
  flex: 1;
  border: none;
  padding: 1rem 1.25rem;
  font-size: var(--pwp-text-lg);
  background: transparent;
  color: var(--pwp-text-primary);
  outline: none;
}

.pwp-search-form__submit {
  padding: 0 1.25rem;
  background: transparent;
  border: none;
  color: var(--pwp-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: var(--pwp-transition-fast);
}

.pwp-search-form__submit:hover { color: var(--pwp-primary); }

.pwp-search-overlay__close {
  position: absolute;
  top: -3rem;
  right: 0;
  background: transparent;
  border: none;
  color: var(--pwp-white);
  cursor: pointer;
  opacity: 0.7;
  transition: var(--pwp-transition-fast);
}

.pwp-search-overlay__close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   18. Main Content Layout
   -------------------------------------------------------------------------- */
.pwp-main {
  padding: var(--pwp-space-12) 0;
  min-height: 50vh;
}

.pwp-layout {
  display: grid;
  gap: var(--pwp-space-8);
}

.pwp-layout--right  { grid-template-columns: 1fr 300px; }
.pwp-layout--left   { grid-template-columns: 300px 1fr; }
.pwp-layout--none   { grid-template-columns: 1fr; }

.pwp-layout--left .pwp-layout__sidebar  { order: -1; }

.pwp-layout__content {}
.pwp-layout__sidebar {}

/* Blog card (post-card template part) */
.pwp-blog-card {
  background: var(--pwp-bg-card);
  border: 1px solid var(--pwp-border);
  border-radius: var(--pwp-radius-lg);
  overflow: hidden;
  transition: var(--pwp-transition);
  margin-bottom: var(--pwp-space-6);
}

.pwp-blog-card:hover {
  box-shadow: var(--pwp-shadow-md);
  transform: translateY(-2px);
}

.pwp-blog-card__thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.pwp-blog-card__body {
  padding: var(--pwp-space-5) var(--pwp-space-6);
}

.pwp-blog-card__title {
  font-size: var(--pwp-text-xl);
  font-weight: 700;
  margin-bottom: var(--pwp-space-2);
  line-height: 1.3;
}

.pwp-blog-card__title a {
  color: var(--pwp-text-primary);
}

.pwp-blog-card__title a:hover { color: var(--pwp-primary); }

.pwp-blog-card__excerpt {
  color: var(--pwp-text-secondary);
  font-size: var(--pwp-text-sm);
  margin-bottom: var(--pwp-space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pwp-blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pwp-space-3) var(--pwp-space-6);
  border-top: 1px solid var(--pwp-border);
}

/* Post Card */
.pwp-post-card {
  background: var(--pwp-bg-card);
  border: 1px solid var(--pwp-border);
  border-radius: var(--pwp-radius-lg);
  overflow: hidden;
  transition: var(--pwp-transition);
  margin-bottom: var(--pwp-space-6);
}

.pwp-post-card:hover {
  box-shadow: var(--pwp-shadow-md);
  transform: translateY(-2px);
}

.pwp-post-card__media {
  position: relative;
  overflow: hidden;
}

.pwp-post-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pwp-post-card:hover .pwp-post-card__img { transform: scale(1.03); }

.pwp-post-card__cat {
  position: absolute;
  top: var(--pwp-space-3);
  left: var(--pwp-space-3);
  background: var(--pwp-primary);
  color: var(--pwp-white);
  padding: 2px 10px;
  border-radius: var(--pwp-radius-full);
  font-size: var(--pwp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pwp-post-card__body {
  padding: var(--pwp-space-5) var(--pwp-space-6);
}

.pwp-post-card__title {
  font-size: var(--pwp-text-xl);
  font-weight: 700;
  margin-bottom: var(--pwp-space-2);
  line-height: 1.3;
}

.pwp-post-card__title a { color: var(--pwp-text-primary); }
.pwp-post-card__title a:hover { color: var(--pwp-primary); }

.pwp-post-card__excerpt {
  color: var(--pwp-text-secondary);
  font-size: var(--pwp-text-sm);
  margin-bottom: var(--pwp-space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pwp-post-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pwp-space-1);
  font-size: var(--pwp-text-sm);
  font-weight: 600;
  color: var(--pwp-primary);
}

.pwp-post-card__link:hover { color: var(--pwp-primary-dark); }

/* Post meta */
.pwp-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pwp-space-3);
  font-size: var(--pwp-text-xs);
  color: var(--pwp-text-muted);
  margin-bottom: var(--pwp-space-4);
}

.pwp-post-meta__date,
.pwp-post-meta__author,
.pwp-post-meta__reading-time { display: flex; align-items: center; gap: 0.25rem; }

/* Widget */
.widget { margin-bottom: var(--pwp-space-8); }
.widget-title {
  font-size: var(--pwp-text-base);
  font-weight: 700;
  margin-bottom: var(--pwp-space-4);
  padding-bottom: var(--pwp-space-2);
  border-bottom: 2px solid var(--pwp-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pwp-text-primary);
}

/* Back to top */
.pwp-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--pwp-primary);
  color: var(--pwp-white);
  border: none;
  border-radius: var(--pwp-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--pwp-transition);
  z-index: var(--pwp-z-sticky);
  box-shadow: var(--pwp-shadow-md);
}

.pwp-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pwp-back-to-top:hover {
  background: var(--pwp-primary-dark);
  box-shadow: var(--pwp-shadow-lg);
}

/* Notification bar */
.pwp-notification-bar {
  background: var(--pwp-primary);
  color: var(--pwp-white);
  text-align: center;
  padding: 0.5rem var(--pwp-gutter);
  font-size: var(--pwp-text-sm);
  font-weight: 500;
  position: relative;
}

.pwp-notification-bar__close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}

.pwp-notification-bar__close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   19. Breakpoints
   -------------------------------------------------------------------------- */
/* XL: 1280px */
@media (max-width: 1280px) {
  :root { --pwp-container: 1140px; }
  .pwp-mega-menu__grid { grid-template-columns: repeat(3, 1fr); }
}

/* LG: 1024px */
@media (max-width: 1024px) {
  :root {
    --pwp-text-5xl: 2.5rem;
    --pwp-text-6xl: 3rem;
    --pwp-text-7xl: 3.5rem;
    --pwp-gutter: 1.25rem;
  }

  .pwp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pwp-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--pwp-space-8); }
  .pwp-header__nav { display: none; }
  .pwp-mobile-toggle { display: flex; }
}

/* MD: 768px */
@media (max-width: 768px) {
  :root {
    --pwp-text-4xl: 1.875rem;
    --pwp-text-5xl: 2.25rem;
    --pwp-text-6xl: 2.75rem;
    --pwp-section: 4rem;
    --pwp-gutter: 1rem;
  }

  .pwp-grid--3 { grid-template-columns: 1fr 1fr; }
  .pwp-grid--2 { grid-template-columns: 1fr; }
  .pwp-section-heading__title { font-size: var(--pwp-text-3xl); }
  .pwp-footer__grid { grid-template-columns: 1fr; }
  .pwp-footer__bottom { flex-direction: column; text-align: center; }
  .pwp-page-title__heading { font-size: var(--pwp-text-3xl); }
  .pwp-layout--right,
  .pwp-layout--left { grid-template-columns: 1fr; }
  .pwp-layout--left .pwp-layout__sidebar { order: 0; }
}

/* SM: 480px */
@media (max-width: 480px) {
  :root {
    --pwp-text-3xl: 1.5rem;
    --pwp-text-4xl: 1.75rem;
  }

  .pwp-grid--3,
  .pwp-grid--4 { grid-template-columns: 1fr; }
  .pwp-btn--lg { padding: 0.875rem 1.75rem; }
}