/* Page-specific styles migrated from static HTML <style> blocks */

/* === From wellness-devices.html === */
/* ── Fix: prevent dark body bg showing above hero on mobile ── */
      body.page-slug-wellness-devices, body.page-slug-wellness-devices.light-hero { background: #f0f4ff !important; }

      /* Single-line product titles with ellipsis — full name on product page */
      .raw-catalog-card .raw-catalog-product-name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        margin: 0 0 0.25rem;
        line-height: 1.35;
      }

      /* ── Product card image covers top half edge-to-edge ── */
      .prod-card-img {
        width: 100%;
        height: 240px;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .prod-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
      }
      .prod-card-img.dark-bg { background: #0a0e1a; }
      .prod-card-img.light-bg { background: #f4f6f9; }
      /* Category tabs — single-line labels; scroll horizontally on narrow screens */
      .cat-tab {
        flex: 0 0 auto;
        min-width: max-content;
      }
      .cat-tab span {
        white-space: nowrap;
      }
      #catTabsRow {
        justify-content: flex-start;
        width: max-content;
        min-width: 100%;
      }
      @media (min-width: 900px) {
        .cat-tab { flex: 1; min-width: 0; }
        #catTabsRow { justify-content: space-evenly; width: 100%; }
      }
      .wd-hero-section {
        background: url("../images/wellnesshero.jpeg"), linear-gradient(135deg, #f0f4ff 0%, #e8eef8 40%, #edf5f0 100%);
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        min-height: auto;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        /* Extend under fixed navbar so hero blends (no white band) */
        padding-top: 170px;
        padding-bottom: 3rem;
        margin-top: 0;
      }
      body.light-hero .wd-hero-section {
        margin-top: 0;
      }
      @media (max-width: 767px) {
        .wd-hero-section {
          background: linear-gradient(135deg, #f0f4ff 0%, #e8eef8 40%, #edf5f0 100%), url("../images/wellnesshero.jpeg");
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          min-height: auto;
          align-items: flex-start;
          padding-top: 80px;
          padding-bottom: 2rem;
        }
      }

      /* Subtle dot/mesh bg pattern */
      .wd-hero-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(20,82,177,0.06) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
      }

      /* Right product image area */
      .wd-hero-products-wrap {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 52%;
        pointer-events: none;
        display: none !important;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
      }
      
      @media (min-width: 1024px) {
        .wd-hero-products-wrap {
          display: flex !important;
        }
      }
      .wd-hero-products-wrap img {
        width: 100%;
        max-width: 660px;
        object-fit: contain;
        object-position: center bottom;
        filter: drop-shadow(0 20px 40px rgba(20,82,177,0.15));
      }

      /* OUR PRODUCTS badge */
      .wd-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        border-radius: 999px;
        background: white;
        border: 1px solid rgba(20,82,177,0.2);
        color: var(--accent-blue);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(20,82,177,0.08);
      }

      /* Feature icon badges */
      .wd-hero-feat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
      }
      .wd-hero-feat-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1.5px solid rgba(20,82,177,0.2);
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      }

      /* Search bar */
      .wd-search-bar {
        display: flex;
        align-items: center;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.10);
        overflow: hidden;
        max-width: 380px;
        border: 1px solid rgba(20,82,177,0.12);
      }
      .wd-search-input {
        flex: 1;
        border: none;
        outline: none;
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
        color: #374151;
        background: transparent;
        font-family: var(--font-body, 'Montserrat', sans-serif);
      }
      .wd-search-input::placeholder { color: #9ca3af; }
      .wd-search-btn {
        width: 42px;
        height: 42px;
        background: var(--accent-blue);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        margin: 3px;
        border-radius: 8px;
        transition: background 0.2s;
      }
      .wd-search-btn:hover { background: #0e3d8a; }

      /* Ecosystem Ring Section */
      .wd-ecosystem-section {
        background: var(--bg-dark);
        padding: 7rem 0;
      }
      .wd-ecosystem-ring {
        position: relative;
        width: 320px;
        height: 320px;
        flex-shrink: 0;
      }
      .wd-ecosystem-ring-inner {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      .wd-ecosystem-node {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        width: 90px;
      }
      .wd-ecosystem-node-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
        font-size: 16px;
      }
      .wd-ecosystem-node-label {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(255,255,255,0.75);
      }
      .wd-ecosystem-node-sub {
        font-size: 8px;
        color: rgba(255,255,255,0.45);
        margin-top: -4px;
      }

      /* Testimonials Slider */
      .wd-testimonials-section {
        background: var(--bg-dark);
        padding: 6rem 0;
        overflow: hidden;
      }
      .wd-testimonials-track {
        display: flex;
        gap: 1.25rem;
        transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
      }
      .wd-testimonial-card {
        flex: 0 0 280px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 16px;
        padding: 1.5rem;
      }

      /* CTA Banner */
      .wd-cta-section {
        position: relative;
        overflow: hidden;
        background: var(--bg-dark);
      }
      .wd-cta-bg {
        position: absolute;
        inset: 0;
        background-image: url('images/slider2.png');
        background-size: cover;
        background-position: center;
        opacity: 0.3;
      }
      .wd-cta-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(5,14,23,0.98) 40%, rgba(5,14,23,0.6) 100%);
      }

      /* Tech Tabs / Product Detail Sections */
      .wd-product-section {
        background: var(--bg-dark);
        padding: 7rem 0;
        border-top: 1px solid rgba(255,255,255,0.06);
      }
      .wd-product-section:nth-child(even) {
        background: rgba(8,18,36,0.98);
      }
      .wd-product-visual {
        position: relative;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(9,19,36,1) 0%, rgba(5,11,21,0.95) 100%);
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 380px;
        overflow: hidden;
      }
      .wd-product-visual img {
        max-height: 320px;
        max-width: 90%;
        object-fit: contain;
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 0 30px rgba(20,82,177,0.3));
      }
      .wd-product-visual-glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, rgba(20,82,177,0.15) 0%, transparent 65%);
        pointer-events: none;
      }
      .wd-feature-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.65rem 1rem;
        border-radius: 999px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.88);
        font-size: 0.8rem;
        font-weight: 500;
      }
      .wd-feature-pill i {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(20,82,177,0.18);
        color: var(--accent-blue);
        font-size: 12px;
        flex-shrink: 0;
      }
      .wd-feature-pill.green i {
        background: rgba(66,132,31,0.18);
        color: var(--accent-green);
      }
      .wd-feature-pill.yellow i {
        background: rgba(255,192,10,0.15);
        color: var(--accent-yellow);
      }
      .wd-counter {
        font-size: 4rem;
        font-weight: 900;
        color: rgba(255,255,255,0.04);
        line-height: 1;
        position: absolute;
        top: -1rem;
        left: 0;
        pointer-events: none;
        font-variant-numeric: tabular-nums;
      }

      /* Why It Works Section */
      .wd-science-section {
        background: var(--bg-dark);
        padding: 5rem 0;
      }
      .wd-science-card {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 16px;
        padding: 1.75rem;
        position: relative;
        overflow: hidden;
        transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1);
      }
      .wd-science-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.4);
      }
      .wd-science-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        border-radius: 2px 2px 0 0;
      }
      .wd-science-card.blue::before { background: var(--accent-blue); }
      .wd-science-card.green::before { background: var(--accent-green); }
      .wd-science-card.yellow::before { background: var(--accent-yellow); }
      .wd-science-card.purple::before { background: #8b5cf6; }

      /* â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?
         LIGHT MODE OVERRIDES
         Hero stays dark always. All other sections
         flip to white/light backgrounds with dark text.
      â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•?â•? */

      /* --- Section backgrounds --- */
      html.light #terahertz,
      html.light #terahertz > div.grid,
      html.light #terahertz > div.grid > div:last-child {
        background: #f0f4ff !important;
      }
      html.light #terahertz > div:first-child { /* eyebrow bar */
        background: #e8eef8 !important;
        border-color: rgba(20,82,177,0.12) !important;
      }
      html.light #terahertz > div.grid > div:last-child { /* right image panel */
        background: linear-gradient(135deg, #e8eef8 0%, #dce6f5 50%, #e8eef8 100%) !important;
      }
      html.light .product-category-showcase,
      html.light section[style*="background:#07111e"] {
        background: #1a2a4a !important; /* keep card strip always dark — matches design */
      }
      html.light #ecosystem {
        background: #f0f4ff !important;
      }
      html.light #ecosystem > div[style*="background:radial"] {
        background: radial-gradient(ellipse 80% 100% at 60% 50%, rgba(20,82,177,0.06) 0%, transparent 70%) !important;
      }
      html.light .wd-testimonials-section,
      html.light section[style*="background:var(--bg-dark)"][style*="overflow:hidden"] {
        background: #f8f9fb !important;
      }

      /* --- Terahertz left copy text --- */
      html.light #terahertz p[style*="color:#1a6cff"] { color: var(--accent-blue) !important; }
      html.light #terahertz h2 span { color: var(--text-primary) !important; }
      html.light #terahertz h2 { color: var(--text-primary) !important; }
      html.light #terahertz p[style*="rgba(255,255,255,0.62)"] { color: #4b5563 !important; }
      html.light #terahertz div[style*="color:white"] > div { color: var(--text-primary) !important; }
      html.light #terahertz div[style*="rgba(255,255,255,0.5)"] { color: #6b7280 !important; }
      html.light #terahertz .wd-counter { color: rgba(5,14,23,0.04) !important; }

      /* Terahertz eyebrow bar text */
      html.light #terahertz p[style*="color:rgba(255,255,255,0.85)"] { color: rgba(5,14,23,0.6) !important; }
      html.light #terahertz p[style*="color:rgba(255,255,255,0.85)"] span { color: var(--accent-green) !important; }

      /* Terahertz feature icon circles */
      html.light #terahertz .flex.items-center.gap-2 > div[style*="border:1px solid rgba(30,100,220"] {
        background: rgba(20,82,177,0.08) !important;
        border-color: rgba(20,82,177,0.25) !important;
      }

      /* Thin divider in terahertz */
      html.light #terahertz div[style*="background:rgba(255,255,255,0.15)"] {
        background: rgba(5,14,23,0.15) !important;
      }

      /* Right placeholder text */
      html.light #terahertz p[style*="rgba(255,255,255,0.2)"] { color: rgba(5,14,23,0.2) !important; }

      /* --- Ecosystem section text --- */
      html.light #ecosystem h2[style*="color:white"] { color: var(--text-primary) !important; }
      html.light #ecosystem p[style*="rgba(255,255,255,0.6)"] { color: #4b5563 !important; }
      html.light #ecosystem button[style*="border:1.5px solid rgba(255,255,255"] {
        border-color: rgba(5,14,23,0.35) !important;
        color: var(--text-primary) !important;
      }

      /* Ecosystem hub nodes */
      html.light #ecosystem div[style*="color:white;font-size:11px"] { color: var(--text-primary) !important; }
      html.light #ecosystem div[style*="color:rgba(255,255,255,0.45)"] { color: #6b7280 !important; }
      html.light #ecosystem div[style*="background:rgba(10,25,60"] {
        background: white !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      html.light #ecosystem .absolute.inset-0.rounded-full { opacity: 0.4; }
      html.light #ecosystem svg line { stroke: rgba(20,82,177,0.2) !important; }

      /* --- Testimonials section text --- */
      html.light section[style*="padding:6rem 0;overflow:hidden"] p[style*="color:white"] { color: var(--text-primary) !important; }
      html.light .wd-testimonial-card,
      html.light div[style*="background:rgba(255,255,255,0.04)"][style*="border:1px solid rgba(255,255,255,0.08)"][style*="border-radius:12px"] {
        background: white !important;
        border-color: rgba(20,82,177,0.12) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
      }
      html.light div[style*="border-radius:12px"] p[style*="rgba(255,255,255,0.82)"] { color: #4b5563 !important; }
      html.light div[style*="border-radius:12px"] div[style*="color:white;font-size:0.82rem"] { color: var(--text-primary) !important; }

      /* Testimonial slider arrows */
      html.light #wdTestiPrev,
      html.light #wdTestiNext {
        background: white !important;
        border-color: rgba(20,82,177,0.2) !important;
        color: var(--text-primary) !important;
      }

      /* Testimonial dots */
      html.light .wd-dot[style*="background:#1a6cff"] { background: var(--accent-blue) !important; }
      html.light .wd-dot[style*="background:rgba(255,255,255,0.25)"] { background: rgba(5,14,23,0.2) !important; }

      /* --- Footer CTA banner in light mode --- */
      html.light .footer-cta-banner-wd {
        background: #0a1628 !important; /* keep dark by design */
      }

/* Catalog filters - list view + mobile toolbar */
/* Force catalog visible on all breakpoints (animation must not blank the page) */
.raw-catalog-root,
.raw-catalog-root * {
  visibility: visible;
}
.raw-catalog-root .raw-catalog-section,
.raw-catalog-root .raw-catalog-card,
.raw-catalog-root .raw-catalog-filters,
.raw-catalog-root .raw-catalog-grid {
  opacity: 1 !important;
  transform: none !important;
}
.raw-catalog-root .raw-catalog-card[data-filtered-out="1"] {
  display: none !important;
}
.raw-catalog-view--list .raw-catalog-grid {
  grid-template-columns: 1fr !important;
}
.raw-catalog-view--list .raw-catalog-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: stretch;
}
.raw-catalog-view--list .raw-catalog-card > div:first-child {
  min-height: 160px !important;
}
.raw-catalog-root .raw-catalog-filters {
  max-width: 100%;
}
@media (max-width: 1023px) {
  .raw-catalog-root .lg\:w-56 {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .raw-catalog-root .raw-catalog-filters {
    position: static !important;
  }
  .raw-catalog-root #rawCatalogSort {
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .raw-catalog-view--list .raw-catalog-card {
    grid-template-columns: 1fr;
  }
  .raw-catalog-root .raw-catalog-grid {
    grid-template-columns: 1fr !important;
  }
  .raw-catalog-root #productSearch,
  .raw-catalog-root #rawCatalogSort {
    font-size: 16px;
  }
}