/* Generated by scripts/build-performance-assets.mjs. Do not edit. */
/* source: blog-grid.css */
/* Blog Grid Component Styles */

.blog-grid-component {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* Prevent horizontal scroll */
}

/* News index -------------------------------------------------------------
 * The source BlogGrid shipped a visual-only dot control that never changed
 * the visible posts. WordPress owns the archive query here, so pagination is
 * real, keyboard-accessible, and durable as Larry publishes new articles.
 */
.solarwyse-blog-index .solarwyse-blog-banner-wrap {
  padding-inline: 0;
}

.solarwyse-blog-index .container,
.solarwyse-single-post .container {
  margin-inline: auto !important;
}

.solarwyse-blog-index .banner-row,
.solarwyse-single-post .banner-row {
  margin: 0;
}

.solarwyse-blog-index .news-bnr,
.solarwyse-single-post .solarwyse-post-hero {
  border-radius: 30px;
  overflow: hidden;
}

.solarwyse-blog-archive .wp-block-query-title,
.solarwyse-single-post .solarwyse-post-hero h1 {
  color: #fff !important;
  font-family: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 40px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.solarwyse-blog-index .news-bnr > .lc-block {
  max-width: none !important;
  padding-inline: 0 !important;
  width: 100%;
}

.solarwyse-blog-index .news-bnr h1 {
  color: #fff !important;
  font-family: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 40px;
  margin: 0;
  max-width: none;
  position: relative;
  z-index: 2;
}

.solarwyse-blog-index > *,
.solarwyse-blog-index .hm-blog-rows > *,
.solarwyse-blog-index .hm-blog-rows > .lc-block > *,
.solarwyse-blog-index .offering-col > .lc-block > *,
.solarwyse-blog-index .blog-card > *,
.solarwyse-blog-index .blog-card-body > * {
  margin-block-start: 0 !important;
}

.solarwyse-blog-index .hm-blog-sections {
  clear: both;
  float: none;
}

.solarwyse-blog-intro {
  align-items: center;
  display: grid;
  gap: clamp(28px, 5vw, 70px);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  padding-bottom: 65px;
}

.solarwyse-blog-intro .offer-heading h2 {
  color: #0f172a;
  font-family: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  position: relative;
}

.solarwyse-blog-intro .offer-heading h2::after {
  background: #757575;
  content: "";
  height: 100px;
  opacity: .3;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}

.solarwyse-blog-intro .con-text p {
  color: #757575;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.45;
  margin: 0;
  text-align: left;
}

.solarwyse-blog-index .blog-posts-grid.wp-block-post-template {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  max-width: none;
  padding: 0;
}

.solarwyse-blog-index .blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.solarwyse-blog-index .blog-card-image,
.solarwyse-blog-index .blog-card-image a,
.solarwyse-blog-index .blog-card-image img {
  display: block;
  margin: 0;
  width: 100%;
}

.solarwyse-blog-index figure.blog-card-image {
  margin-block: 0;
}

.solarwyse-blog-index .blog-card-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.solarwyse-blog-index .blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.solarwyse-blog-index .blog-card-title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 10px;
}

.solarwyse-blog-index .blog-meta {
  margin-bottom: 12px;
}

.solarwyse-blog-index .blog-meta .wp-block-post-date,
.solarwyse-blog-index .blog-meta .wp-block-post-terms {
  margin: 0;
}

.solarwyse-blog-index .blog-category {
  background: transparent;
  padding: 0;
}

.solarwyse-blog-index .blog-category a {
  background: #007ec5;
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: .75rem;
  padding: 4px 12px;
  text-decoration: none;
}

.solarwyse-blog-index .blog-excerpt {
  margin: 0 0 15px;
}

.solarwyse-blog-index .blog-excerpt .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  margin: 0;
  overflow: hidden;
}

.solarwyse-blog-index .blog-read-more {
  align-self: flex-start;
  margin-top: auto;
}

.blog-archive-pagination {
  gap: 8px;
  margin-top: 48px;
}

.blog-archive-pagination a,
.blog-archive-pagination .current {
  align-items: center;
  border: 2px solid #007ec5;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 42px;
  min-width: 42px;
  padding: 8px 14px;
  text-decoration: none;
}

.blog-archive-pagination .current,
.blog-archive-pagination a:hover {
  background: #007ec5;
  color: #fff;
}

.solarwyse-blog-cta {
  background: #f8f9fa;
  clear: both;
  margin-block-start: 0 !important;
}

/* Shared article template. The body remains normal native blocks. */
.single-post .solarwyse-post-hero {
  background-color: #1f2937;
  height: auto !important;
  min-height: 0;
  padding: 150px 0 !important;
}

.single-post .solarwyse-post-hero--modern {
  min-height: 380px;
}

.single-post .solarwyse-post-hero .lc-block {
  position: relative;
  z-index: 2;
}

.single-post .solarwyse-post-date .wp-block-post-date,
.single-post .solarwyse-post-date p,
.single-post .solarwyse-post-date .wp-block-post-author-name {
  margin: 0;
}

.single-post .solarwyse-single-post > .single-post-data,
.single-post .single-post-data .container > * {
  margin-block-start: 0;
}

.single-post .post-cont-txt > p {
  margin-block: 0 16px;
}

.single-post .post-cont-txt {
  display: block !important;
}

.single-post .post-cont-txt > ul,
.single-post .post-cont-txt > ol {
  margin-top: 0;
}

.single-post .post-cont-txt > p:empty {
  display: block;
  margin: 0 0 16px;
  min-height: 0;
}

.single-post .solarwyse-source-table {
  margin: 0 0 16px;
  max-width: 100%;
  overflow-x: auto;
}

.single-post .solarwyse-source-table table {
  height: var(--solarwyse-table-height, auto);
  width: var(--solarwyse-table-width, 100%);
}

.single-post .solarwyse-source-embed {
  margin: 0;
  width: 100%;
}

.single-post .solarwyse-source-embed .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
  position: relative;
}

.single-post .solarwyse-source-embed iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.single-post .post-cont-txt img.alignleft {
  float: left;
  margin: 0 30px 30px 0;
}

.solarwyse-post-design-modern .post-cont-txt > ul,
.solarwyse-post-design-modern .post-cont-txt > ol {
  margin: 0 0 1.35rem;
  padding-left: 1.9rem !important;
}

.solarwyse-post-design-modern .post-cont-txt li {
  line-height: 1.6;
  margin-bottom: .5rem;
  padding-left: .25rem;
}

.solarwyse-post-design-modern .post-cont-txt > h2 {
  margin-top: 2rem;
}

.solarwyse-post-design-modern .key-takeaway {
  background: #f1f7fb;
  padding: 1rem 1.25rem;
}

.solarwyse-post-design-modern .sw-cta h2 {
  margin: 0 0 .6rem !important;
}

.solarwyse-post-design-modern .sw-cta__buttons {
  margin-block-start: 0;
}

.solarwyse-post-design-modern .sw-cta__btn {
  display: block;
  line-height: inherit;
}

.single-post .solarwyse-post-date,
.single-post .solarwyse-post-date a,
.single-post .solarwyse-post-date time {
  color: #007ec5;
  font-family: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.single-post .solarwyse-post-heading .wp-block-post-title {
  margin: 10px 0;
}

.single-post .post-cont-txt > :first-child {
  margin-top: 0 !important;
}

.single-post .post-cont-txt > :last-child {
  margin-bottom: 0 !important;
}

.solarwyse-post-design-modern .sw-faq {
  display: grid;
  gap: .85rem;
  margin: 1rem 0 2rem;
}

.solarwyse-post-design-modern .sw-faq__item {
  margin: 0;
}

.solarwyse-post-design-modern .sw-faq__item h3 {
  margin: 0 0 .4rem !important;
}

.solarwyse-post-design-modern .sw-faq__item p {
  line-height: 1.6;
}

.single-post .post-cont-txt img {
  height: auto;
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .solarwyse-blog-index .blog-posts-grid.wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .solarwyse-blog-index .news-bnr {
    border-radius: 20px;
    padding: 100px 0 !important;
  }

  .solarwyse-blog-index .news-bnr h1 {
    font-size: 32px;
  }

  .solarwyse-single-post .solarwyse-post-hero {
    border-radius: 30px;
    height: auto !important;
    padding: 110px 0 !important;
  }

  .solarwyse-single-post .solarwyse-post-hero--modern {
    min-height: 380px;
  }

  .solarwyse-single-post .solarwyse-post-hero h1 {
    font-size: 28px;
    line-height: 40px;
  }

  .solarwyse-blog-index .hm-blog-sections {
    padding: 72px 0 !important;
  }

  .solarwyse-blog-intro {
    gap: 18px;
    grid-template-columns: 1fr;
    padding-bottom: 40px;
  }

  .solarwyse-blog-intro .offer-heading h2::after {
    display: none;
  }

  .solarwyse-blog-intro .con-text p {
    font-size: 18px;
  }

  /* One readable card per row fixes the source's cramped two-column mobile
     cards and their nearly unusable buttons. */
  .solarwyse-blog-index .blog-posts-grid.wp-block-post-template {
    gap: 22px;
    grid-template-columns: 1fr !important;
  }

  .solarwyse-blog-index .blog-card-body {
    padding: 18px;
  }

  .solarwyse-blog-index .blog-card-title {
    font-size: 1.2rem;
  }

  .solarwyse-blog-index .blog-meta {
    align-items: center;
    flex-direction: row;
  }

  .solarwyse-blog-index .blog-read-more {
    display: inline-block;
    width: auto;
  }

  .single-post .single-post-data {
    padding: 60px 0;
  }

  .single-post .post-cont-txt img.alignleft {
    float: none;
    margin: 0 0 24px;
  }
}

.blog-grid-component[data-mode="carousel"] {
  overflow: visible;
  /* Side gutters that hold the nav chevrons so they never overlap or get
     clipped. Sized to comfortably fit the circular buttons. */
  padding-inline: clamp(52px, 5vw, 68px);
}

/* Prevent CLS with explicit dimensions */
.blog-card-image {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

/* Grid mode */
.blog-posts-grid {
  display: grid;
  gap: 30px;
}

/* Default: 3 columns on desktop */
.blog-posts-grid:not([data-columns]) {
  grid-template-columns: repeat(3, 1fr);
}

.blog-posts-grid[data-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.blog-posts-grid[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.blog-posts-grid[data-columns="4"] {
  grid-template-columns: repeat(4, 1fr);
}

/* Tablet: 2 columns */
@media (max-width: 991.98px) {
  .blog-posts-grid,
  .blog-posts-grid[data-columns="3"],
  .blog-posts-grid[data-columns="4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
}

/* Mobile: 2 columns with tighter gap */
@media (max-width: 767.98px) {
  .blog-posts-grid,
  .blog-posts-grid[data-columns="2"],
  .blog-posts-grid[data-columns="3"],
  .blog-posts-grid[data-columns="4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px;
  }
}

/* Very small mobile: ensure cards don't overflow */
@media (max-width: 374.98px) {
  .blog-posts-grid {
    gap: 10px;
  }
}

/* Carousel mode */
.blog-posts-carousel {
  --carousel-gap: 30px;
  display: flex;
  gap: var(--carousel-gap);
  overflow-x: auto;
  scrollbar-width: none;
  /* overflow-x:auto also clips the Y axis, so the card box-shadows need room
     on every side. Pad the scroll container, then cancel the horizontal
     padding with a negative inline margin so exactly N cards still fill the
     track at full width (the component's padding-inline holds the chevrons). */
  padding: 22px 20px;
  margin-inline: -20px;
  -webkit-overflow-scrolling: touch;
}

.blog-posts-carousel::-webkit-scrollbar {
  display: none;
}

/* Desktop: exactly 3 cards fill the track (2 gaps). No max-width cap, so a
   4th card never peeks in on wide viewports. */
.blog-posts-carousel .blog-card {
  flex: 0 0 calc((100% - 2 * var(--carousel-gap)) / 3);
}

.blog-posts-carousel > .wp-block-post {
  flex: 0 0 calc((100% - 2 * var(--carousel-gap)) / 3);
  min-width: 0;
}

.blog-posts-carousel > .wp-block-post > .blog-card { height: 100%; }

/* Tablet: 2 cards */
@media (max-width: 991.98px) {
  .blog-posts-carousel {
    --carousel-gap: 20px;
  }

  .blog-posts-carousel .blog-card {
    flex: 0 0 calc((100% - var(--carousel-gap)) / 2);
  }

  .blog-posts-carousel > .wp-block-post {
    flex: 0 0 calc((100% - var(--carousel-gap)) / 2);
  }
}

/* Mobile: 1 card with a small peek of the next to signal swipeability */
@media (max-width: 767.98px) {
  .blog-posts-carousel {
    --carousel-gap: 16px;
  }

  .blog-posts-carousel .blog-card {
    flex: 0 0 88%;
  }

  .blog-posts-carousel > .wp-block-post { flex: 0 0 88%; }
}

/* Performance: Use transform for animations */
.blog-card {
  transition: transform 0.2s ease;
  will-change: transform;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 0; /* Allow cards to shrink below natural minimum */
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.blog-card-image { margin: 0; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-title.wp-block-post-title { margin: 0 0 10px; }
.blog-excerpt .wp-block-post-excerpt__excerpt { margin: 0; }

.blog-card-body {
  padding: 20px;
}

.blog-card-title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  line-height: 1.3;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 0.875rem;
  color: #666;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-category {
  background: #007ec5;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
}

.blog-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #333;
}

/* Mobile optimizations for blog cards */
@media (max-width: 767.98px) {
  .blog-card-body {
    padding: 12px;
  }

  .blog-card-title {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .blog-meta {
    font-size: 0.75rem;
    margin-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .blog-category {
    font-size: 0.625rem;
    padding: 3px 8px;
  }

  .blog-excerpt {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 10px;
    -webkit-line-clamp: 3;
  }
}

/* Navigation buttons — circular brand buttons seated inside the gutters so
   they flank the cards without overlapping them or getting clipped. */
.blog-nav-btn {
  background: #007ec5;
  border: none;
  color: #ffffff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 90, 139, 0.28);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.blog-nav { margin: 0; }
.blog-nav-btn .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 28px;
  text-decoration: none;
}
.blog-nav-btn .blog-nav-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: inherit;
}
.blog-read-more .screen-reader-text { display: none; }

.blog-nav-prev {
  left: 4px;
}

.blog-nav-next {
  right: 4px;
}

.blog-nav-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.blog-nav-btn:hover:not(:disabled) {
  background: #005a8b;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 90, 139, 0.4);
}

.blog-nav-btn:focus-visible {
  outline: 3px solid rgba(0, 126, 197, 0.45);
  outline-offset: 2px;
}

.blog-nav-btn:disabled {
  /* Keep the brand colour (faded) rather than inheriting a global gray
     button:disabled style. */
  background: #007ec5;
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .blog-grid-component[data-mode="carousel"] {
    padding-inline: 40px;
  }

  .blog-nav-btn {
    width: 38px;
    height: 38px;
  }

  .blog-nav-btn svg {
    width: 17px;
    height: 17px;
  }
}

/* Pagination dots */
.blog-pagination {
  margin-top: 30px;
  height: 12px;
  display: flex;
  justify-content: center;
}

.pagination-dots {
  display: flex;
  height: 12px;
  line-height: 0;
  gap: 8px;
}

.pagination-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #007ec5;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.pagination-dot.active {
  background: #007ec5;
}

.pagination-dot:hover:not(.active) {
  background: rgba(0, 126, 197, 0.3);
}

/* Read More Button - Primary Style */
.blog-read-more {
  display: inline-block;
  background-color: #ffd818;
  color: #1d1d1d;
  padding: 12px 28px;
  font-family: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid #ffd818;
  text-align: center;
  margin-top: 10px;
}

.blog-read-more:hover {
  background-color: #007ec5;
  color: #ffffff;
  border-color: #007ec5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 216, 24, 0.4);
}

/* Mobile: Smaller Read More button */
@media (max-width: 767.98px) {
  .blog-read-more {
    padding: 8px 16px;
    font-size: 0.875rem;
    margin-top: 8px;
    display: block;
    width: 100%;
  }
}

/* source: wp-adapter.css */
/*
 * WordPress adapter for the verbatim Solarwyse source CSS.
 *
 * Source selectors target the Picostrap/LiveCanvas DOM. This is the only file
 * allowed to map native block markup and existing sw-* component classes onto
 * that system. Do not patch selectors into the seven ported source files.
 */

:root {
  --sw-source-container: 1720px;
}

/* Smooth anchor scrolling without hiding content under a sticky header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keyboard focus that's always visible */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--solar-blue);
  outline-offset: 2px;
}

/* Images never blow out their container */
img, svg, video { max-width: 100%; }

/* Bootstrap supplies these inherited defaults on the source homepage. */
body.home .why-choose-section .section-header p,
body.home .benefit-card p,
body.home .faq-answer {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}
body.home .why-choose-section .section-header p {
  line-height: 1.5;
  margin: 0 0 1rem;
}
*, *::before, *::after { box-sizing: border-box; }
.d-none { display: none !important; }

/* Source pages are imported as complete Custom HTML blocks. Do not let the
   block template's default content constraint or Astro's static island tags
   alter their measured layout. */
.solarwyse-content-shell,
.solarwyse-content-shell > .wp-block-post-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.solarwyse-content-shell .wp-block-post-content > * { margin-block-start: 0; }
.solarwyse-content-shell .container {
  box-sizing: border-box;
  margin-inline: auto;
}
astro-island,
astro-slot { display: contents; }

/* Buttons lift slightly on hover — matches the brand feel */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 0;
  border-radius: 200px;
  font-family: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.wp-block-button__link:hover { transform: scale(1.02); }
.button-component > .wp-block-button__link { line-height: 20px; }

:where(.wp-block-group.alignwide, .wp-block-columns.alignwide) {
  width: 90% !important;
  max-width: var(--sw-source-container) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--solar-blue);
  border: 2px solid var(--wp--preset--color--solar-blue);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--solar-blue);
  color: var(--wp--preset--color--white);
}

/* Outline buttons on a dark section: solar-blue on a photo or a blue band is
   close to invisible, so flip them to white wherever they sit on one. Keeps
   the preset in charge -- no hardcoded colour. */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.has-solar-blue-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
}

.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-solar-blue-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink);
}

/* Skip link */
.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 999999;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--white);
  border-radius: 8px;
}

/* ---------------------------------------------------------------
 * Cognito Forms — brand the embed so it doesn't look bolted on.
 * Ported from the existing Solarwyse theme overrides.
 * ------------------------------------------------------------ */
.sw-cognito { min-height: 200px; }

.cog-cognito .cog-button--submit,
.cog-cognito .el-button {
  background-color: var(--wp--preset--color--solar-yellow) !important;
  color: var(--wp--preset--color--ink) !important;
  font-family: var(--wp--preset--font-family--outfit) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 0.9rem 2rem !important;
  border: none !important;
  border-radius: 999px !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}

.cog-cognito .cog-button--submit:hover,
.cog-cognito .el-button:hover {
  background-color: var(--wp--preset--color--solar-blue) !important;
  color: var(--wp--preset--color--white) !important;
  transform: translateY(-2px) !important;
}

.cog-cognito .cog-label,
.cog-cognito .cog-form__content {
  font-family: var(--wp--preset--font-family--outfit) !important;
}

/* The source page shell clips decorative pseudo-elements (for example the
   split CTA background) without hiding vertical content. WordPress does not
   have that extra shell, so apply the same boundary to the content wrapper. */
.solarwyse-content-shell,
.solarwyse-content-shell > .wp-block-post-content {
  overflow-x: clip;
}

/* Gravity Forms grid CSS used by the one retained legacy promotion form. */
.gform_fields {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gform_fields > .gfield--width-half { grid-column: span 6; }
.gform_fields > .gfield--width-full { grid-column: span 12; }

.ginput_complex {
  display: flex;
  flex-flow: row wrap;
  margin-inline: -6px;
}

.ginput_complex > .gform-grid-col {
  flex: 1 1 0;
  padding-inline: 6px;
}

.gform_wrapper input.large,
.ginput_complex input {
  width: 100%;
}

.gform_footer {
  display: flex;
  margin-top: 24px;
}

@media (max-width: 640px) {
  .gform_fields > .gfield--width-half,
  .gform_fields > .gfield--width-full {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------
 * Post content components carried over from the old site.
 * Preserved as group blocks by the importer so they stay editable.
 * ------------------------------------------------------------ */
.key-takeaway {
  background: var(--wp--preset--color--surface);
  border-left: 4px solid var(--wp--preset--color--solar-blue);
  border-radius: 8px;
  padding: 1.1rem 1.35rem;
  margin: 0 0 1.75rem;
}
.key-takeaway p:last-child { margin-bottom: 0; }

.sw-faq__item {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  padding: 1.1rem 1.35rem;
  background: #fff;
  box-shadow: var(--wp--preset--shadow--card);
  margin-bottom: 0.85rem;
}
.sw-faq__item h3,
.sw-faq__item h2 {
  font-size: 1.15rem !important;
  font-weight: 600;
  margin: 0 0 0.4rem;
  line-height: 1.35;
}
.sw-faq__item p { margin: 0; color: var(--wp--preset--color--muted); }

.sw-cta {
  text-align: center;
  background: var(--wp--preset--color--surface);
  border: 1px solid #d6e6f2;
  border-radius: 16px;
  padding: 2.25rem 1.5rem;
  margin: 2.75rem 0 0.5rem;
}
.sw-cta h2 { font-size: 1.7rem !important; margin: 0 0 0.6rem; }
.sw-cta p { max-width: 640px; margin: 0 auto 1.6rem; color: var(--wp--preset--color--muted); }
.sw-cta .sw-cta__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.sw-cta .sw-cta__btn {
  display: inline-flex;
  padding: 0.9rem 2.1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}
.sw-cta .sw-cta__btn--primary {
  background: var(--wp--preset--color--solar-yellow);
  border-color: var(--wp--preset--color--solar-yellow);
  color: var(--wp--preset--color--ink);
}
.sw-cta .sw-cta__btn--secondary {
  background: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--solar-blue);
  color: var(--wp--preset--color--solar-blue);
}
.sw-cta .sw-cta__btn:hover {
  background: var(--wp--preset--color--solar-blue);
  border-color: var(--wp--preset--color--solar-blue);
  color: var(--wp--preset--color--white);
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
 * Hero — direct port of src/styles/home-hero.css
 *
 * Values copied from the source stylesheet, not approximated. The panel is
 * WHITE; its warmth comes from a yellow radial glow overlay, and the photo is
 * blended in by a white gradient on the photo itself rather than by tinting
 * the panel.
 * ---------------------------------------------------------------------- */

.sw-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(440px, 44vw) 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 0;
  row-gap: clamp(16px, 2vw, 26px);
  min-height: max(560px, calc(100svh - var(--sw-header-h, 121px)));
  padding: clamp(36px, 4vw, 64px) 0 clamp(28px, 3vw, 48px) clamp(34px, 5vw, 88px);
  overflow: hidden;
  background: #ffffff;
}

/* Warm glow, top-left. This is where the hero's warmth comes from — the panel
   itself is pure white, matching the fade's first stop exactly. */
.sw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 46% 58% at 12% 22%,
    rgba(255, 216, 24, 0.2) 0%,
    rgba(255, 216, 24, 0.08) 52%,
    rgba(255, 216, 24, 0) 100%
  );
}

.sw-hero::after { content: none; }

/* Photo bleeds from 34% across to the right edge. */
.sw-hero__media {
  position: absolute;
  inset: 0 0 0 34%;
  z-index: 0;
  overflow: hidden;
  background: #e8f1f6;
}

/* WordPress wraps the image in a <figure>, which the source has no equivalent
   of -- without stretching it the photo sits at its natural height inside a
   full-height container. */
.sw-hero__media,
.sw-hero__media > .wp-block-image,
.sw-hero__media figure {
  margin: 0;
  height: 100%;
}

.sw-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

/* Wide eased white fade, on the photo rather than across the whole hero.
   Starts at pure white to match the panel exactly, so there is no cut line. */
.sw-hero__media::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: min(52%, 560px);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.985) 10%,
    rgba(255, 255, 255, 0.92) 22%,
    rgba(255, 255, 255, 0.78) 36%,
    rgba(255, 255, 255, 0.58) 50%,
    rgba(255, 255, 255, 0.38) 64%,
    rgba(255, 255, 255, 0.2) 77%,
    rgba(255, 255, 255, 0.08) 89%,
    rgba(255, 255, 255, 0) 100%
  );
}

.sw-hero__content {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 2;
  max-width: 620px;
  color: #101b31;
  text-align: left;
}

.sw-hero__badge { margin: 0; }

.sw-hero__badge img {
  display: block;
  width: clamp(96px, 7.4vw, 132px) !important;
  height: clamp(96px, 7.4vw, 132px);
  margin: 0 0 clamp(18px, 2.6vh, 32px);
  border-radius: 999px;
  object-fit: cover;
  filter: drop-shadow(0 18px 34px rgba(255, 216, 24, 0.24));
}

.sw-hero__content h1.wp-block-heading {
  max-width: 620px;
  margin: 0;
  color: #101b31;
  font-size: clamp(36px, 3.3vw, 54px) !important;
  font-weight: 700;
  line-height: 1.07;
  text-align: left;
}

/* Gold to yellow to transparent — not yellow to blue. */
.sw-hero__rule.wp-block-separator {
  display: block;
  width: clamp(130px, 12vw, 210px);
  height: 4px;
  margin: clamp(16px, 2vw, 24px) 0 clamp(18px, 2.2vw, 28px);
  border: 0;
  border-radius: 999px;
  opacity: 1;
  background: linear-gradient(90deg, #f4b400 0%, #ffd818 72%, rgba(255, 216, 24, 0) 100%);
}

.sw-hero__content p:not(.sw-hero__trust) {
  max-width: 540px;
  margin: 0;
  color: #101b31;
  font-size: clamp(16px, 1.22vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.sw-hero .wp-block-buttons {
  grid-column: 1;
  grid-row: 3;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: start;
  margin: 0;
}

.sw-hero .wp-block-button__link {
  min-height: 52px;
  padding: 13px 22px;
  border-width: 2px;
  border-radius: 200px;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 16px 36px rgba(16, 27, 49, 0.14);
}

.sw-hero__trust {
  grid-column: 1;
  grid-row: 4;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: end;
  width: max-content;
  margin: 0;
  color: #101b31;
  font-size: clamp(15px, 1vw, 18px) !important;
  font-weight: 600;
  line-height: 1.2;
}

/* Rotated red glyph, not a yellow square. */
.sw-hero__trust::before {
  content: "\25A0";
  color: #e01f2d;
  font-size: 22px;
  line-height: 1;
  transform: rotate(45deg);
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  flex: none;
}

@media (max-width: 1180px) {
  .sw-hero {
    grid-template-columns: minmax(380px, 50vw) 1fr;
    padding-left: clamp(28px, 4vw, 58px);
  }
  .sw-hero__media { inset-inline-start: 30%; }
  .sw-hero__media::before { width: min(56%, 480px); }
  .sw-hero__content h1.wp-block-heading { font-size: clamp(34px, 4.4vw, 48px) !important; }
}

/* Stacked mobile: photo on top, content below, hero still fills the viewport. */
@media (max-width: 820px) {
  .sw-hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--sw-header-h, 100px));
    padding: 0;
    gap: 0;
  }
  .sw-hero::before {
    background: radial-gradient(
      ellipse 80% 40% at 20% 62%,
      rgba(255, 216, 24, 0.1) 0%,
      rgba(255, 216, 24, 0) 100%
    );
  }
  .sw-hero__media {
    position: relative;
    inset: auto;
    order: 1;
    flex: 1 1 auto;
    width: 100%;
    min-height: clamp(220px, 34svh, 340px);
  }
  .sw-hero__media::before {
    inset: auto 0 0 0;
    width: auto;
    height: 72px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.45) 55%,
      #ffffff 100%
    );
  }
  .sw-hero__media img { position: absolute; inset: 0; object-position: center 38%; }
  .sw-hero__content { order: 2; align-self: auto; width: 100%; max-width: none; padding: 6px 20px 0; }
  .sw-hero__badge { display: none; }
  .sw-hero__content h1.wp-block-heading { max-width: 420px; font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.12; }
  .sw-hero__rule.wp-block-separator { margin: 14px 0; }
  .sw-hero__content p:not(.sw-hero__trust) { max-width: 420px; font-size: 16px; line-height: 1.45; }
  .sw-hero .wp-block-buttons {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    padding: 18px 20px 0;
  }
  .sw-hero .wp-block-button { width: 100%; }
  .sw-hero .wp-block-button__link {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 15px;
    white-space: nowrap;
  }
  .sw-hero__trust { order: 4; width: 100%; padding: 16px 20px 18px; font-size: 14px !important; }
}

@media (max-width: 430px) {
  .sw-hero__content h1.wp-block-heading { font-size: 26px !important; }
  .sw-hero__content p:not(.sw-hero__trust) { max-width: 340px; font-size: 15px; }
}

@media (max-width: 340px) {
  .sw-hero .wp-block-buttons { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Cards
 *
 * Default link styling inside a card reads as raw markup -- underlined blue
 * text in an otherwise designed surface. These make a card feel like one
 * clickable object and give its link a deliberate affordance.
 * ---------------------------------------------------------------------- */

.wp-block-group.is-style-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.wp-block-group.is-style-card:hover {
  box-shadow: var(--wp--preset--shadow--lift);
  transform: translateY(-2px);
}

/* Card headings that are themselves links. */
.wp-block-group.is-style-card h3 a {
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}

.wp-block-group.is-style-card:hover h3 a {
  color: var(--wp--preset--color--solar-blue);
}

/* "Learn more" style links: no underline, arrow that nudges on hover. */
.wp-block-group.is-style-card p > a:only-child {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--wp--preset--color--solar-blue);
  font-weight: 600;
  text-decoration: none;
}

.wp-block-group.is-style-card p > a:only-child::after {
  content: "→";
  transition: transform 0.18s ease;
}

.wp-block-group.is-style-card:hover p > a:only-child::after {
  transform: translateX(3px);
}

/* Category tiles: compact, evenly sized, whole tile reads as the target. */
.sw-category-tile.wp-block-group {
  padding: 1.25rem 1.35rem;
  display: flex;
  align-items: center;
  min-height: 74px;
}

.sw-category-tile h3 {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium);
}

.sw-category-tile h3 a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  color: var(--wp--preset--color--navy);
  text-decoration: none;
  font-weight: 600;
}

.sw-category-tile h3 a::after {
  content: "→";
  color: var(--wp--preset--color--solar-blue);
  transition: transform 0.18s ease;
}

.sw-category-tile:hover h3 a::after {
  transform: translateX(3px);
}

/* -------------------------------------------------------------------------
 * Featured product cards
 *
 * Catalogue photography arrives in mixed aspect ratios and on white or
 * transparent backgrounds, so the images must be normalised into a fixed frame
 * or the grid collapses into ragged cards. `contain` rather than `cover`:
 * these are product shots, and cropping a generator to fill a box loses the
 * product.
 * ---------------------------------------------------------------------- */

.sw-featured {
  background: linear-gradient(180deg, var(--wp--preset--color--surface) 0%, var(--wp--preset--color--white) 100%);
}

/* "Products" is picked out in blue in the source heading. */
.sw-featured .sw-accent {
  color: var(--wp--preset--color--solar-blue);
}

/* Equal-height cards regardless of title length. */
.sw-featured__grid .sw-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.sw-product-card__image {
  margin: 0;
  background: var(--wp--preset--color--white);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.sw-product-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 0.75rem;
}

/* Title block takes the remaining height so every card ends level. */
.sw-product-card > .wp-block-group:last-child {
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.sw-product-card__title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
}

.sw-product-card__title a {
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}

.sw-product-card:hover .sw-product-card__title a {
  color: var(--wp--preset--color--solar-blue);
}

/* Why Live Off-Grid: the source gives this section a 10% blue tint and a 20px
   radius, which is what separates it from the plain white sections around it. */
.sw-offgrid {
  background-color: rgb(0 126 197 / 10%);
  border-radius: 20px;
}

/* -------------------------------------------------------------------------
 * Homepage sections — measured from the source at 1280px
 *
 * Section chrome the source varies deliberately and the rebuild had flattened:
 * heading alignment alternates, card radii differ per section, and three
 * sections carry background gradients rather than flat fills.
 * ---------------------------------------------------------------------- */

/* Section headings: 36px/500, 30px below. The FAQ is its own treatment. */
/* Section-heading ladder, ported from theme-custom.css. The source steps this
   at breakpoints rather than interpolating; 36px is only correct around 1280.
   Note the line-heights are !important in the source specifically so they leak
   into the two Astro-scoped sections that override font-size alone. */
.sw-section h2.wp-block-heading,
.sw-offgrid h2.wp-block-heading {
  color: #1d1d1d;
  font-size: 50px !important;
  font-weight: 500;
  line-height: 60px;
  margin-bottom: 60px;
}

@media (max-width: 1620px) {
  .sw-section h2.wp-block-heading,
  .sw-offgrid h2.wp-block-heading { font-size: 40px !important; line-height: 48px; }
}
@media (max-width: 1280px) {
  .sw-section h2.wp-block-heading,
  .sw-offgrid h2.wp-block-heading { font-size: 36px !important; line-height: 46px; margin-bottom: 30px; }
}
@media (max-width: 1100px) {
  .sw-section h2.wp-block-heading,
  .sw-offgrid h2.wp-block-heading { font-size: 32px !important; line-height: 40px; margin-bottom: 30px; }
}
@media (max-width: 767px) {
  .sw-section h2.wp-block-heading,
  .sw-offgrid h2.wp-block-heading { font-size: 30px !important; line-height: 41px; margin-bottom: 30px; }
}
@media (max-width: 680px) {
  .sw-section h2.wp-block-heading,
  .sw-offgrid h2.wp-block-heading { font-size: 28px !important; line-height: 37px; margin-bottom: 25px; }
}
@media (max-width: 360px) {
  .sw-section h2.wp-block-heading,
  .sw-offgrid h2.wp-block-heading { font-size: 26px !important; line-height: 37px; margin-bottom: 25px; }
}

/* Featured Products and What You Should Know are Astro-scoped in the source:
   they pin font-size at 36px and inherit the ladder's line-height. */
.sw-featured h2.wp-block-heading,
.sw-tips h2.wp-block-heading {
  font-size: 36px !important;
  font-weight: 500;
  color: #1d1d1d;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .sw-featured h2.wp-block-heading,
  .sw-tips h2.wp-block-heading { font-size: 28px !important; }
}

/* Left-aligned section headings: Products & Services, Why Live Off-Grid,
   Our Blog. The source alternates alignment; the rebuild centred everything. */
.sw-align-left h2 {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* Product & Services card titles map to the source offer-card title rule. */
.sw-align-left .wp-block-column h3.wp-block-heading {
  color: #007ec5;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 20px;
  border-radius: 0 0 0 20px;
}

@media (max-width: 1550px) {
  .sw-align-left .wp-block-column h3.wp-block-heading {
    font-size: 16px !important;
  }
}

/* Featured Products */
.sw-featured {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.sw-featured .sw-product-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* What You Should Know: five fixed columns, tinted cards, no shadow. */
.sw-tips {
  background: #ffffff;
}
.sw-tips__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.sw-tips__grid > .wp-block-group {
  background: #f8fafc;
  border: 0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: none;
}

/* FAQ: distinct from the other section headings -- 32px/700 on slate. */
.sw-faq-section {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}
.sw-faq-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 32px;
}
/* The accordion column is narrower than the section container. */
.sw-faq-section .wp-block-details,
.sw-faq-section > .wp-block-heading,
.sw-faq-section > .wp-block-buttons {
  max-width: 900px;
  margin-inline: auto;
}

/* Testimonials: the quote module is a rounded tinted panel, not bare cards. */
.sw-testimonials__module {
  margin-top: 32px;
  padding: 36px 0 48px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(0, 126, 197, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* Blog cards sit at 8px, not the 12px used elsewhere. */
.sw-blog .is-style-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 980px) {
  .sw-tips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .sw-section h2, .sw-featured h2, .sw-offgrid h2 { font-size: 28px; line-height: 1.25; }
  .sw-tips__grid { grid-template-columns: 1fr; }
}

/* WordPress emits the font-size preset as a class that outranks the section
   rules above, so the two headings that deviate from the 36px norm need to
   win explicitly. */
.sw-faq-section h2.wp-block-heading { font-size: 32px !important; }
.sw-blog h2.wp-block-heading { margin-bottom: 0; }

/* -------------------------------------------------------------------------
 * Source chrome adapter — Header.astro and Footer.astro markup mapped to FSE.
 * ---------------------------------------------------------------------- */
html, body { overflow-x: hidden; overflow-x: clip; }
:root { --sw-header-h: 121px; }

.site-header { position: sticky; top: 0; z-index: 1100; background: #fff; border: 0; box-shadow: none; }
/* FSE wraps the template part in another <header>; that wrapper must carry
   sticky positioning or the inner source header is confined to an 84/148px
   containing block. */
.wp-site-blocks > header.wp-block-template-part:has(> #lc-header) { position: sticky; top: 0; z-index: 1100; }
.site-header .header-sections { padding: 0 0 0.75rem; }
.site-header .container, footer#lc-footer .container { margin-inline: auto !important; }
.site-header .header-rows { display: flex; align-items: center; width: 100%; gap: 0; padding: 12px 0 0; }
.site-header .navbar-brand { position: relative; z-index: 1100; flex: 0 0 auto; padding: 0; }
.site-header .logo-img { display: block; width: 77px; height: 77px; }
.header-desktop { flex: 0 1 1093px; width: 100%; min-width: 0; margin-inline: auto; }
.header-menus { width: 100%; }
.desktop-nav-row { display: flex; align-items: center; gap: 16px; }
.header-menus ul { list-style: none; }
.header-menus ul#menu-header-menu { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; margin: 0; padding: 0; }
.header-menus ul#menu-header-menu > li.menu-item { position: relative; margin: 0 13px; }
.header-menus ul#menu-header-menu > li.menu-item > a.nav-link { display: flex; align-items: center; color: #1d1d1d; font: 400 20px/20px "Outfit", sans-serif; padding: 20px 0; white-space: nowrap; }
.header-menus ul#menu-header-menu > li.menu-item > a.nav-link::before { content: ""; position: absolute; inset: auto 0 0; height: 3px; border-radius: 20px; background: transparent; }
.header-menus ul#menu-header-menu > li.menu-item:hover > a.nav-link,
.header-menus ul#menu-header-menu > li.menu-item > a.nav-link:focus-visible { color: #007ec5; }
.header-menus ul#menu-header-menu > li.menu-item:hover > a.nav-link::before,
.header-menus ul#menu-header-menu > li.menu-item:focus-within > a.nav-link::before { background: #007ec5; }
.dropdown-toggle::after { content: "⌄"; margin-left: 5px; font-size: 13px; line-height: 1; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1150; min-width: 240px; margin: 0; padding: 10px; list-style: none; border: 1px solid rgba(148,163,184,.28); border-radius: 14px; background: #fff; box-shadow: 0 22px 40px -18px rgba(15,23,42,.32); }
.dropdown:hover > .dropdown-menu, .dropdown:focus-within > .dropdown-menu { display: block; }
.dropdown-menu .dropdown { position: relative; }
.dropdown-menu .depth_1 { top: 0; left: 100%; }
.dropdown-item { display: block; padding: 8px 12px; border-radius: 8px; color: #334155; font: 400 15px/1.3 "Outfit", sans-serif; white-space: nowrap; }
.dropdown-item:hover, .dropdown-item:focus-visible { color: #007ec5; background: rgba(0,126,197,.07); }

.header-search-wrapper { position: relative; box-sizing: border-box; width: min(calc(100% - 2rem), 940px); margin-bottom: .75rem; margin-inline: auto; }
.header-search-form { position: relative; display: flex; box-sizing: border-box; align-items: center; min-height: 52px; overflow: visible; background: #fff; border: 2px solid #e5e7eb; border-radius: 999px; transition: border-color .2s ease, box-shadow .2s ease; }
.header-search-form:focus-within { border-color: #007ec5; box-shadow: 0 0 0 3px rgba(0,126,197,.15); }
.header-search-input { flex: 1; min-width: 0; padding: .75rem 1.25rem; border: 0; outline: 0; background: transparent; color: #0f172a; font-size: 1rem; }
.header-search-input::placeholder { color: #94a3b8; }
.header-search-btn { display: flex; align-items: center; justify-content: center; align-self: stretch; padding: .75rem 1.25rem; border: 0; border-radius: 0 999px 999px 0; background: #007ec5; color: #fff; cursor: pointer; }
.header-search-btn:hover { background: #0069a8; }

.nav-item-cart .cart-link, .nav-item-account > .nav-link { display: inline-flex !important; box-sizing: border-box; align-items: center; gap: .5rem; height: 60px !important; padding-block: 20px !important; }
.cart-icon, .account-icon { display: inline-flex; width: 24px; height: 24px; }
.cart-icon svg, .account-icon svg { width: 100%; height: 100%; }
.cart-count { min-width: 1.5rem; padding: 0 .35rem; border-radius: 999px; background: #007ec5; color: #fff; font-size: .75rem; line-height: 1.5rem; text-align: center; }
.cart-count.is-empty { display: none; }
.nav-item-account .account-dropdown-menu { right: 0; left: auto; min-width: 220px; }
.header-cta-group { display: flex; flex: 0 0 auto; flex-direction: column; gap: .5rem; }
.site-header .header-cta-button { box-sizing: border-box; width: 176px; min-height: 54px; padding: 10px 15px; font-size: 20px; font-weight: 600; line-height: 30px; box-shadow: 0 8px 18px rgba(15,23,42,.1); }
.site-header .header-cta-button span { margin-left: 6px; }

.mobile-menu-toggle, .mobile-header-ctas { display: none; }
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100vh; overflow-y: auto; transform: translateX(100%); background: rgba(255,255,255,.98); backdrop-filter: blur(10px); transition: transform 250ms ease-in-out; }
.mobile-nav-overlay.is-open { transform: translateX(0); }
.mobile-nav-content { display: flex; box-sizing: border-box; flex-direction: column; min-height: 100vh; padding: 70px 1.25rem 200px; }
.mobile-search-wrapper { position: relative; margin-bottom: 1rem; }
.mobile-search-wrapper .header-search-form { border-radius: 12px; }

/* Product autocomplete is part of the global chrome, so its geometry must not
   depend on Woo's route-only bundle. */
.product-search-results {
  position: absolute;
  z-index: 1200;
  inset: calc(100% + .4rem) 0 auto;
  max-height: min(62vh, 520px);
  overflow: auto;
  border: 1px solid #dbe3ea;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.16);
}
.product-search-result {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: .8rem;
  align-items: center;
  padding: .75rem;
  color: #1d1d1d;
  text-decoration: none;
}
.product-search-result:hover,
.product-search-result:focus,
.product-search-result.is-active { background: #e5f2f9; }
.product-search-result img,
.product-search-result__placeholder { width: 58px; height: 58px; border-radius: 10px; background: #f8fafc; object-fit: contain; }
.product-search-result__copy { display: grid; min-width: 0; gap: .15rem; }
.product-search-result__copy strong { overflow-wrap: anywhere; font-size: .95rem; line-height: 1.25; }
.product-search-result__copy span { color: #007ec5; font-size: .8rem; font-weight: 700; }
.mobile-search-wrapper .header-search-btn { border-radius: 0 10px 10px 0; }
.mobile-nav-menu { flex: 1; margin: 0 0 2rem; padding: 0; list-style: none; }
.mobile-menu-item { border-bottom: 1px solid rgba(148,163,184,.15); }
.mobile-menu-item-with-children { display: flex; flex-wrap: wrap; align-items: center; }
.mobile-menu-item > a, .mobile-menu-item-with-children > a { display: flex; flex: 1; align-items: center; gap: .5rem; padding: .75rem 0; color: #0f172a; font-size: 1rem; }
.mobile-submenu-toggle { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 50px; min-height: 50px; margin: 0; padding: .75rem; border: 0; background: none; color: #64748b; cursor: pointer; }
.mobile-submenu-toggle .chevron { width: 24px; height: 24px; transition: transform 250ms ease; }
.mobile-submenu-toggle .chevron.is-rotated { transform: rotate(180deg); }
.mobile-submenu { width: 100%; max-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; background: rgba(241,245,249,.5); transition: max-height 250ms ease; }
.mobile-submenu.is-open { padding-bottom: .5rem; }
.mobile-submenu > li { width: 100%; }
.mobile-submenu > li > a { display: block; padding: .65rem 1rem; color: #334155; font-size: .9375rem; }
.mobile-submenu > .mobile-menu-item-with-children > a { display: flex; }
.mobile-submenu-nested { background: rgba(226,232,240,.5); }
.mobile-submenu-nested > li > a { padding-left: 1.75rem; font-size: .875rem; }
.mobile-menu-cta { display: flex; flex-direction: column; gap: .625rem; margin-top: auto; padding: 1rem 0 0; border-top: 1px solid rgba(148,163,184,.2); }
.mobile-menu-cta a { box-sizing: border-box; width: 100%; }
.hamburger-icon { display: block; width: 34px; height: 34px; color: #007ec5; }
.hamburger-icon .line { transform-origin: center; transition: transform 250ms ease, opacity 250ms ease; }
.mobile-menu-toggle.is-open .line-top { transform: translateY(6px) rotate(45deg); }
.mobile-menu-toggle.is-open .line-middle { opacity: 0; }
.mobile-menu-toggle.is-open .line-bottom { transform: translateY(-6px) rotate(-45deg); }

footer#lc-footer { float: none; display: block; overflow: clip; }
footer#lc-footer .footer-bgs { background: rgb(0 126 197 / 10%) url("/wp-content/themes/solarwyse/assets/images/footer-bg-1-1.webp") top right / cover no-repeat !important; }
.footer-logo img { display: block; width: 152px; height: 152px; margin-inline: auto; }
.footer-row .lft-footer, .footer-row .rgt-footer { box-sizing: border-box; }
.footer-row .lft-footer { text-align: center; }
.footer-social img { display: block; width: 25px; height: 25px; }
.lft-footer .lc-block.text-body .footer-social ul li:last-child { margin-right: 0; }
.footer-menu ul { display: flex; margin: 0; padding: 0; list-style: none; }
.fotter-contact ul { margin: 0; list-style: none; }
.fotter-contact p { margin: 0; }
.rgt-text-img img { display: block; max-width: 110px; }

@media (min-width: 992px) and (max-width: 1280px) {
  .header-menus ul#menu-header-menu > li.menu-item > a.nav-link { font-size: 14px; }
  .site-header .header-cta-button { padding-inline: .85rem; font-size: 13px; }
}
@media (min-width: 992px) and (max-width: 1420px) {
  .site-header .header-rows { gap: 12px; }
  .site-header .header-menus ul#menu-header-menu { justify-content: space-between; gap: 0; }
  .site-header .header-menus ul#menu-header-menu > li.menu-item { margin: 0 !important; }
}
@media (max-width: 991.98px) {
  :root { --sw-header-h: 84px; }
  .site-header .header-sections { padding: 0 0 .75rem; }
  .site-header .header-rows { justify-content: space-between; gap: 10px; padding: 8px 0; }
  .site-header .logo-img { width: 56px; height: 56px; }
  .header-desktop { display: none !important; }
  .site-header > nav > .container > .header-rows > .header-cta-group { display: none; }
  .mobile-menu-toggle { display: block; position: relative; z-index: 1100; flex: 0 0 auto; margin: 0; padding: .25rem; border: 0; background: none; cursor: pointer; }
  .mobile-header-ctas { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .mobile-header-ctas .mobile-header-cta { min-height: 38px; padding: 8px 14px; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 14px rgba(15,23,42,.12); }
  .footer-logo img { margin-inline: auto; }
}
@media (max-width: 720px) {
  .footer-menu ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 430px) {
  .site-header .header-rows { gap: 6px; }
  .mobile-header-ctas { gap: 5px; }
  .mobile-header-ctas .mobile-header-cta { min-height: 36px; padding: 7px 10px; font-size: 12px; }
  .mobile-menu-toggle { padding: 0; }
  .hamburger-icon { width: 30px; height: 30px; }
}
@media (min-width: 992px) { .mobile-nav-overlay { display: none; } }

/* -------------------------------------------------------------------------
   Canonical public action system

   The header Shop and Get a Quote pills are the brand reference. Source-page
   fragments, Gutenberg, and WooCommerce all used to contribute competing
   radius, padding, and colour declarations. These rules intentionally sit at
   the end of the public cascade so an action cannot become a square when a
   late bundle arrives.
   ---------------------------------------------------------------------- */
:root {
  --sw-action-yellow: #ffd818;
  --sw-action-blue: #007ec5;
  --sw-action-ink: #1d1d1d;
  --sw-action-shadow: 0 8px 18px rgba(15, 23, 42, .1);
  --sw-action-hover-shadow: 0 12px 24px rgba(0, 126, 197, .22);
  --sw-action-hover-halo: rgba(0, 126, 197, .35);
  --sw-action-hover-glow: rgba(0, 126, 197, .16);
  --sw-action-hover-halo-ink: rgba(29, 29, 29, .27);
  --sw-action-hover-glow-ink: rgba(29, 29, 29, .13);
  --sw-action-focus-light: #fff;
  --sw-action-focus-dark: #1d1d1d;
}

/* Contact is the lone source page whose hero is authored directly under
   #theme-main instead of inside the shared .container. Keep its H1/banner on
   the same centred 90% rhythm as every other content-page hero. */
#theme-main > .banner-col.in-to.contact-bnr {
  box-sizing: border-box;
  width: min(90%, 1720px);
  margin-inline: auto;
}

:where(
  a.btn,
  button.btn,
  input.btn,
  a.button:not(.remove),
  button.button,
  input.button,
  .btn-primary-cta,
  .faq-btn-primary,
  .faq-btn-secondary,
  .request-call-button > .wp-block-button__link,
  .quote-button > .wp-block-button__link,
  input.gform_button,
  .wp-block-button__link,
  .button-component:not(.wp-block-button),
  .button-component > .wp-block-button__link,
  .button-lins > a,
  .btn-more a,
  .offer-more a,
  .cta-rgt-butt a,
  .blog-read-more,
  .sw-cta__button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .product-detail__add,
  .product-card__cta,
  .swp-button
) {
  --sw-hover-ring: var(--sw-action-hover-halo);
  --sw-hover-glow: var(--sw-action-hover-glow);
  display: inline-flex !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 52px !important;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--sw-action-yellow) !important;
  box-shadow: var(--sw-action-shadow);
  color: var(--sw-action-ink) !important;
  filter: none !important;
  font: 600 18px/1.25 "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

:where(
  a.btn,
  button.btn,
  input.btn,
  a.button:not(.remove),
  button.button,
  input.button,
  .btn-primary-cta,
  .faq-btn-primary,
  .faq-btn-secondary,
  .request-call-button > .wp-block-button__link,
  .quote-button > .wp-block-button__link,
  input.gform_button,
  .wp-block-button__link,
  .button-component:not(.wp-block-button),
  .button-component > .wp-block-button__link,
  .button-lins > a,
  .btn-more a,
  .offer-more a,
  .cta-rgt-butt a,
  .blog-read-more,
  .sw-cta__button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .product-detail__add,
  .product-card__cta,
  .swp-button
):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
:where(
  a.btn,
  button.btn,
  input.btn,
  a.button:not(.remove),
  button.button,
  input.button,
  .btn-primary-cta,
  .faq-btn-primary,
  .faq-btn-secondary,
  .request-call-button > .wp-block-button__link,
  .quote-button > .wp-block-button__link,
  input.gform_button,
  .wp-block-button__link,
  .button-component:not(.wp-block-button),
  .button-component > .wp-block-button__link,
  .button-lins > a,
  .btn-more a,
  .offer-more a,
  .cta-rgt-butt a,
  .blog-read-more,
  .sw-cta__button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .product-detail__add,
  .product-card__cta,
  .swp-button
):not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible {
  background: var(--sw-action-blue) !important;
  box-shadow:
    var(--sw-action-hover-shadow),
    0 0 18px 4px var(--sw-hover-glow) !important;
  color: #fff !important;
  filter: none !important;
  outline: 2px solid var(--sw-hover-ring) !important;
  outline-offset: 4px !important;
  transform: scale(1.02) !important;
}

:where(
  a.btn,
  button.btn,
  input.btn,
  a.button:not(.remove),
  button.button,
  input.button,
  .btn-primary-cta,
  .faq-btn-primary,
  .faq-btn-secondary,
  .request-call-button > .wp-block-button__link,
  .quote-button > .wp-block-button__link,
  input.gform_button,
  .wp-block-button__link,
  .button-component:not(.wp-block-button),
  .button-component > .wp-block-button__link,
  .button-lins > a,
  .btn-more a,
  .offer-more a,
  .cta-rgt-butt a,
  .blog-read-more,
  .sw-cta__button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .product-detail__add,
  .product-card__cta,
  .swp-button
):not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible {
  box-shadow: 0 0 0 6px var(--sw-action-focus-dark), var(--sw-action-hover-shadow) !important;
  outline: 3px solid var(--sw-action-focus-light) !important;
  outline-offset: 0 !important;
}

:where(
  .btn-secondary,
  .faq-btn-secondary,
  .request-call-button > .wp-block-button__link,
  .swp-button--secondary,
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .blog-read-more
) {
  --sw-hover-ring: var(--sw-action-hover-halo-ink);
  --sw-hover-glow: var(--sw-action-hover-glow-ink);
  background: var(--sw-action-blue) !important;
  color: #fff !important;
}

:where(
  .btn-secondary,
  .faq-btn-secondary,
  .request-call-button > .wp-block-button__link,
  .swp-button--secondary,
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .blog-read-more
):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
:where(
  .btn-secondary,
  .faq-btn-secondary,
  .request-call-button > .wp-block-button__link,
  .swp-button--secondary,
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .blog-read-more
):not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible {
  background: var(--sw-action-yellow) !important;
  color: var(--sw-action-ink) !important;
}

/* Legacy source actions carry their palette as inline custom properties.
   Explicit Gutenberg colour classes below intentionally outrank this tier. */
.button-component:not(.wp-block-button),
.button-component > .wp-block-button__link {
  background: var(--button-bg-color, var(--sw-action-yellow)) !important;
  color: var(--button-text-color, var(--sw-action-ink)) !important;
}
.button-component[style*="--button-hover-bg-color: #ffd818" i]:not(.wp-block-button),
.button-component[style*="--button-hover-bg-color:#ffd818" i]:not(.wp-block-button),
.button-component[style*="--button-hover-bg-color: #ffd818" i] > .wp-block-button__link,
.button-component[style*="--button-hover-bg-color:#ffd818" i] > .wp-block-button__link {
  --sw-hover-ring: var(--sw-action-hover-halo-ink);
  --sw-hover-glow: var(--sw-action-hover-glow-ink);
}
.button-component:not(.wp-block-button):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.button-component:not(.wp-block-button):not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible,
.button-component > .wp-block-button__link:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.button-component > .wp-block-button__link:not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible {
  background: var(--button-hover-bg-color, var(--sw-action-blue)) !important;
  color: var(--button-hover-text-color, #fff) !important;
}

.wp-block-button__link.has-solar-blue-background-color,
.button-component.has-solar-blue-background-color:not(.wp-block-button) {
  --sw-hover-ring: var(--sw-action-hover-halo-ink);
  --sw-hover-glow: var(--sw-action-hover-glow-ink);
  background: var(--sw-action-blue) !important;
  color: #fff !important;
}
.wp-block-button__link.has-solar-blue-background-color:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.wp-block-button__link.has-solar-blue-background-color:not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible,
.button-component.has-solar-blue-background-color:not(.wp-block-button):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.button-component.has-solar-blue-background-color:not(.wp-block-button):not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible {
  background: var(--sw-action-yellow) !important;
  color: var(--sw-action-ink) !important;
}

.wp-block-button__link.has-solar-yellow-background-color,
.button-component.has-solar-yellow-background-color:not(.wp-block-button) {
  background: var(--sw-action-yellow) !important;
  color: var(--sw-action-ink) !important;
}
.wp-block-button__link.has-solar-yellow-background-color:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.wp-block-button__link.has-solar-yellow-background-color:not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible,
.button-component.has-solar-yellow-background-color:not(.wp-block-button):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
.button-component.has-solar-yellow-background-color:not(.wp-block-button):not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible {
  background: var(--sw-action-blue) !important;
  color: #fff !important;
}

/* Ordinary Gutenberg button groups shrink-wrap their pills so the inherited
   text alignment positions the complete group. Explicit Gutenberg alignment
   classes retain full-width flex behaviour, and specialized higher-specificity
   grid layouts remain untouched. */
body .wp-block-buttons { display: inline-flex; max-width: 100%; vertical-align: middle; }
body .wp-block-buttons.is-content-justification-left { display: flex; width: 100%; justify-content: flex-start; text-align: left; }
body .wp-block-buttons.is-content-justification-center,
body .wp-block-buttons.aligncenter { display: flex; width: 100%; justify-content: center; text-align: center; }
body .wp-block-buttons.is-content-justification-right { display: flex; width: 100%; justify-content: flex-end; text-align: right; }
body .wp-block-buttons.is-content-justification-space-between { display: flex; width: 100%; }

/* Wrappers never paint their own square behind the pill. */
:where(.wp-block-button, .button-lins, .btn-more, .offer-more, .cta-rgt-butt) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Replace the source site's mixed circular-image arrows with the same simple
   directional cue used by the approved header pills. */
:where(.button-lins > a, .cta-rgt-butt a)::after {
  content: "\2192" !important;
  width: auto !important;
  height: auto !important;
  margin-left: .15rem !important;
  line-height: 1 !important;
}

:where(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .product-detail__add):disabled,
:where(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .product-detail__add).disabled,
:where(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .product-detail__add)[aria-disabled="true"] {
  background: var(--sw-action-blue) !important;
  box-shadow: none !important;
  color: #fff !important;
  cursor: not-allowed;
  filter: none !important;
  opacity: .42;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 640px) {
  :where(
    .wp-block-button__link,
    .btn-primary-cta,
    .faq-btn-primary,
    .faq-btn-secondary,
    .request-call-button > .wp-block-button__link,
    .quote-button > .wp-block-button__link,
    input.gform_button,
    .button-lins > a,
    .btn-more a,
    .offer-more a,
    .cta-rgt-butt a,
    .woocommerce a.button,
    .woocommerce button.button,
    .product-detail__add,
    .swp-button
  ) {
    min-height: 48px !important;
    padding: 9px 17px !important;
    font-size: 16px !important;
  }

  /* The compact header pair is the approved mobile reference and deliberately
     stays tighter than content and commerce calls-to-action. */
  .mobile-header-ctas .mobile-header-cta { min-height: 36px !important; }
}