/* ==========================================================================
   GREENLYTES — CATEGORY PAGES
   File: /assets/css/category.css

   Purpose
   -------
   Shared presentation for individual category landing pages.
   This stylesheet owns category-specific layout and components only.

   Dependencies
   ------------
   1. base.css
   2. components.css
   3. category.css

   Design-system rule
   ------------------
   Shared typography primitives such as .section-summary remain defined in
   components.css. This file only controls their placement inside category
   layouts.
   ========================================================================== */


/* =========================================================
   01. CATEGORY HERO
   ========================================================= */

.category-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 0 70px;
  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(218, 228, 211, 0.72),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #f7f9f5 0%,
      #ffffff 100%
    );
}

.category-hero__inner {
  margin: 0 auto;
}


/* =========================================================
   HERO LAYOUT
   ========================================================= */

.category-hero__layout {
  display: grid;
  grid-template-columns:
    minmax(560px, 1fr)
    minmax(500px, 1.08fr);
  align-items: center;
  gap: clamp(54px, 5.5vw, 88px);
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.category-hero__content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.category-hero__signature {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: var(--green-700);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.category-hero__signature span {
  width: 23px;
  height: 1px;
  background: currentColor;
}

.category-hero__content h1 {
  max-width: 680px;
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(3.65rem, 5vw, 5.55rem);
  line-height: 0.92;
  letter-spacing: -0.064em;
}

.category-hero__content h1 span {
  display: block;
}

.category-hero__lead {
  max-width: 600px;
  margin: 38px 0 0;
  color: var(--ink-600);
  font-size: clamp(1rem, 1.28vw, 1.12rem);
  line-height: 1.82;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.category-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 41px;
}

.category-hero__actions .button {
  min-height: 51px;
  padding-inline: 24px;
}


/* =========================================================
   HERO ASSURANCES
   ========================================================= */

.category-hero__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.category-hero__assurances li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(46, 76, 57, 0.1);
  border-radius: 999px;
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 6px 20px rgba(31, 51, 39, 0.045);
  font-size: 0.73rem;
  font-weight: 750;
  line-height: 1.35;
  backdrop-filter: blur(8px);
}

.category-assurance__icon {
  position: relative;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(77, 126, 87, 0.14);
}

.category-assurance__icon::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--green-700);
  border-bottom: 2px solid var(--green-700);
  transform: rotate(45deg);
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.category-hero__visual {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border-radius: 30px;
  background: #dce5d8;
  box-shadow:
    0 32px 80px rgba(26, 43, 34, 0.16),
    0 8px 24px rgba(26, 43, 34, 0.07);
}

.category-hero__visual img {
  width: 100%;
  height: 100%;
  min-height: 610px;
  object-fit: cover;
  object-position: center;
  transition:
    transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.category-hero__visual:hover img,
.category-hero__visual:focus-within img {
  transform: scale(1.025);
}

.category-hero__image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(10, 22, 16, 0) 58%,
      rgba(10, 22, 16, 0.48) 100%
    );
}


/* =========================================================
   IMAGE NOTE
   ========================================================= */

.category-hero__image-note {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  color: #fff;
  background: rgba(14, 28, 20, 0.38);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
}

.category-hero__image-note span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.category-hero__image-note strong {
  max-width: 260px;
  color: #fff;
  font-size: 0.84rem;
  line-height: 1.35;
  text-align: right;
}


/* ==========================================================================
   02. CATEGORY FEATURED PRODUCT
   Reusable editorial spotlight for category pages.
   ==========================================================================

   DESIGN PRINCIPLE
   ----------------
   The Featured Product is a balanced editorial split:
   - on desktop, the media column stretches to the full height of the card;
   - the image fills that media area with object-fit: cover;
   - tablet and mobile return to the shared 4:3 image ratio when stacked;
   - product-specific differences remain in HTML content.

   Product-specific differences remain in HTML content.
   No per-category layout variants are required.
   ========================================================================== */

.category-featured-product {
  padding: 88px 0 94px;
  background: var(--color-bg);
}

.category-featured-product__inner {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */

.category-featured-product__header {
  display: flex;
  max-width: 820px;
  margin: 0 auto 42px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.category-featured-product__heading-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.category-featured-product__heading-mark > span:first-child,
.category-featured-product__heading-mark > span:last-child {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(49, 91, 58, 0.42);
}

.category-featured-product__heading-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-green-dark);
  font-size: 0.71rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.category-featured-product__heading-eyebrow > span {
  font-size: 0.72rem;
  line-height: 1;
}

.category-featured-product__header h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 4.5vw, 4.6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.category-featured-product__header .section-summary {
  max-width: 560px;
  margin-top: 16px;
  text-align: center;
}


/* --------------------------------------------------------------------------
   Main spotlight
   -------------------------------------------------------------------------- */

.category-featured-product__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(420px, 0.88fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(21, 35, 28, 0.08);
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 22px 54px rgba(27, 48, 34, 0.055);
}


/* --------------------------------------------------------------------------
   Product image
   -------------------------------------------------------------------------- */

.category-featured-product__media {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: #eef2ec;
}

.category-featured-product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* --------------------------------------------------------------------------
   Editorial content
   -------------------------------------------------------------------------- */

.category-featured-product__content {
  display: flex;
  min-width: 0;
  min-height: 100%;
  padding: clamp(34px, 3.2vw, 48px) clamp(36px, 3.6vw, 52px);
  flex-direction: column;
  justify-content: center;
}

.category-featured-product__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 14px;
  color: var(--color-green-dark);
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.category-featured-product__eyebrow > span {
  font-size: 0.7rem;
  line-height: 1;
}

.category-featured-product__title {
  max-width: 520px;
  margin: 0;
  color: var(--color-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.95rem, 2.55vw, 2.82rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.category-featured-product__title-accent {
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 15px;
  border-radius: 999px;
  background: var(--color-green-dark);
}

.category-featured-product__description {
  max-width: 520px;
  margin: 18px 0 0;
  color: var(--color-text-muted);
  font-size: 0.94rem;
  line-height: 1.65;
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   Standardized comparison data
   -------------------------------------------------------------------------- */

.category-featured-product__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0 0;
  padding: 20px 0;
  border-top: 1px solid rgba(21, 35, 28, 0.1);
  border-bottom: 1px solid rgba(21, 35, 28, 0.1);
}

.category-featured-product__spec {
  min-width: 0;
  margin: 0;
  padding: 0 15px;
}

.category-featured-product__spec:first-child {
  padding-left: 0;
}

.category-featured-product__spec:last-child {
  padding-right: 0;
}

.category-featured-product__spec + .category-featured-product__spec {
  border-left: 1px solid rgba(21, 35, 28, 0.1);
}

.category-featured-product__spec dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.57rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.category-featured-product__spec dd {
  margin: 9px 0 0;
}

.category-featured-product__spec dd strong,
.category-featured-product__spec dd span {
  display: block;
}

.category-featured-product__spec dd strong {
  color: var(--color-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.65vw, 1.55rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}

.category-featured-product__spec dd span {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}


/* --------------------------------------------------------------------------
   Editorial CTA
   -------------------------------------------------------------------------- */

.category-featured-product__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 16px;
  width: fit-content;
  min-width: 152px;
  margin-top: 24px;
  padding: 0 3px 9px 0;
  color: var(--color-green-dark);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.category-featured-product__cta::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition:
    transform var(--transition-fast);
}

.category-featured-product__cta > span:last-child {
  font-size: 1.08rem;
  line-height: 1;
  transition:
    transform var(--transition-fast);
}


/* --------------------------------------------------------------------------
   Interaction
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .category-featured-product__cta:hover > span:last-child,
  .category-featured-product__cta:focus-visible > span:last-child {
    transform: translateX(4px);
  }

  .category-featured-product__cta:hover::after,
  .category-featured-product__cta:focus-visible::after {
    transform: scaleX(0.72);
  }
}


/* --------------------------------------------------------------------------
   Responsive — tablet
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .category-featured-product {
    padding: 74px 0 78px;
  }

  .category-featured-product__inner {
    width: min(100% - 40px, 760px);
  }

  .category-featured-product__header {
    margin-bottom: 36px;
  }

  .category-featured-product__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-featured-product__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .category-featured-product__content {
    min-height: 0;
    padding: 44px 44px 42px;
  }

  .category-featured-product__title,
  .category-featured-product__description {
    max-width: 620px;
  }
}


/* --------------------------------------------------------------------------
   Responsive — mobile
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  .category-featured-product {
    padding: 56px 0 60px;
  }

  .category-featured-product__inner {
    width: min(100% - 24px, 560px);
  }

  .category-featured-product__header {
    margin-bottom: 28px;
  }

  .category-featured-product__heading-mark {
    gap: 11px;
    margin-bottom: 12px;
  }

  .category-featured-product__heading-mark > span:first-child,
  .category-featured-product__heading-mark > span:last-child {
    width: 24px;
  }

  .category-featured-product__header h2 {
    font-size: clamp(2.45rem, 12vw, 3.4rem);
  }

  .category-featured-product__header .section-summary {
    max-width: 360px;
    margin-top: 14px;
    font-size: 0.9rem;
  }

  .category-featured-product__layout {
    border-radius: 16px;
  }

  .category-featured-product__content {
    padding: 32px 22px 28px;
  }

  .category-featured-product__eyebrow {
    margin-bottom: 13px;
    font-size: 0.62rem;
  }

  .category-featured-product__title {
    font-size: clamp(1.95rem, 9vw, 2.65rem);
  }

  .category-featured-product__title-accent {
    margin-top: 14px;
  }

  .category-featured-product__description {
    margin-top: 18px;
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .category-featured-product__specs {
    margin-top: 24px;
    padding: 18px 0;
  }

  .category-featured-product__spec {
    padding-inline: 9px;
  }

  .category-featured-product__spec dt {
    font-size: 0.51rem;
  }

  .category-featured-product__spec dd {
    margin-top: 8px;
  }

  .category-featured-product__spec dd strong {
    font-size: clamp(1.05rem, 5vw, 1.28rem);
  }

  .category-featured-product__spec dd span {
    margin-top: 5px;
    font-size: 0.6rem;
  }

  .category-featured-product__cta {
    margin-top: 24px;
    font-size: 0.8rem;
  }
}



/* =========================================================
   03. CATEGORY PRODUCTS
   =========================================================

   COMPONENT PRINCIPLE
   -------------------
   This is a comparison surface, not a miniature product page.

   Every product uses the same visual grammar:
   image → use case → title → summary → 3 specs → price/action.

   Product-specific differences belong in HTML content.
   Do not create per-product layout classes.
   ========================================================= */

.category-products {
  padding: 76px 0 82px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9f5 100%
    );
}

.category-products__inner {
  margin: 0 auto;
}


/* =========================================================
   COLLECTION HEADER
   ========================================================= */

.category-products__header {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(320px, 0.75fr);
  align-items: end;
  gap: clamp(48px, 7vw, 110px);
  margin-bottom: 42px;
}

.category-products__header .eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
}

.category-products__header h2 {
  max-width: 720px;
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(2.6rem, 4.3vw, 4.35rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.category-products__header > .section-summary {
  justify-self: end;
}


/* =========================================================
   PRODUCT GRID
   =========================================================

   The 3px gutter is deliberate:
   enough white space to separate products, but too small to
   break the collection into unrelated standalone cards.

   Additional products flow automatically onto the next row.
   ========================================================= */

.category-product-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  column-gap: 3px;
  row-gap: 56px;
  background: #ffffff;
  border-top: 1px solid rgba(38, 62, 47, 0.11);
  border-bottom: 1px solid rgba(38, 62, 47, 0.11);
}




/* =========================================================
   PRODUCT GRID — SMART FINAL ROW
   =========================================================

   Six internal desktop tracks preserve the visual three-card row:
   each standard card spans two tracks.

   Incomplete final rows balance automatically:
   - one remaining card spans the full row;
   - two remaining cards split the row 50 / 50;
   - three cards keep the standard three-column layout.

   This behavior is generic. It is not tied to a category or product.
   ========================================================= */

.category-product-grid > .category-product-card {
  grid-column: span 2;
}

/* Two cards remaining: each occupies half the collection width. */
.category-product-grid
> .category-product-card:nth-child(3n + 1):nth-last-child(2),
.category-product-grid
> .category-product-card:nth-child(3n + 2):last-child {
  grid-column: span 3;
}

/* One card remaining: full-width horizontal presentation. */
.category-product-grid
> .category-product-card:nth-child(3n + 1):last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.category-product-grid
> .category-product-card:nth-child(3n + 1):last-child
.category-product-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 430px;
}

.category-product-grid
> .category-product-card:nth-child(3n + 1):last-child
.category-product-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4vw, 54px);
}

.category-product-grid
> .category-product-card:nth-child(3n + 1):last-child
.category-product-card__content::before {
  display: none;
}

.category-product-grid
> .category-product-card:nth-child(3n + 1):last-child
.category-product-card__summary {
  max-width: 62ch;
  margin-top: 16px;
}

.category-product-grid
> .category-product-card:nth-child(3n + 1):last-child
.category-product-card__specs {
  width: 100%;
  margin-top: 28px;
}

.category-product-grid
> .category-product-card:nth-child(3n + 1):last-child
.category-product-card__footer {
  width: 100%;
  margin-top: 0;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.category-product-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #ffffff;
}


/* =========================================================
   TEXT-AREA COLUMN SEPARATOR
   =========================================================

   A 1px editorial hairline sits inside the existing 3px gutter.
   It begins below the image and runs only through the content area.

   Desktop: every card except the first card of each 3-column row.
   Tablet:  every card except the first card of each 2-column row.
   Mobile:  removed because cards stack vertically.
   ========================================================= */

.category-product-card__content {
  position: relative;
}

.category-product-card:not(:nth-child(3n + 1))
.category-product-card__content::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 1px;
  content: "";
  background: rgba(38, 62, 47, 0.10);
  pointer-events: none;
}


/* =========================================================
   PRODUCT MEDIA
   ========================================================= */

.category-product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 0.75;
  overflow: hidden;
  color: inherit;
  background:
    linear-gradient(
      145deg,
      #f2f0ec 0%,
      #e8e5df 100%
    );
  text-decoration: none;
}

.category-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* =========================================================
   PRODUCT NUMBER
   ========================================================= */

.category-product-card__number {
  position: absolute;
  top: 18px;
  left: 21px;
  z-index: 2;
  color: rgba(241, 247, 238, 0.72);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.65rem, 2.3vw, 2.35rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

.category-product-card__number::after {
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 9px;
  content: "";
  background: var(--green-700);
}


/* =========================================================
   PRODUCT CONTENT
   =========================================================

   Shared minimum content heights keep cards aligned while allowing
   longer titles and summaries to grow naturally. The specification block
   and footer remain in normal document flow so no artificial vertical gap
   is created between comparison data and the next-step action.
   ========================================================= */

.category-product-card__content {
  display: flex;
  flex: 1;
  min-width: 0;
  padding: 24px 26px 0;
  flex-direction: column;
}


/* =========================================================
   USE CASE
   ========================================================= */

.category-product-card__use-case {
  margin: 0 0 14px;
  color: var(--green-700);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}


/* =========================================================
   PRODUCT TITLE
   ========================================================= */

.category-product-card__title {
  margin: 0 0 16px;
  color: var(--ink-900);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.48rem, 1.8vw, 1.82rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.category-product-card__title a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   ONE-SENTENCE SUMMARY
   ========================================================= */

.category-product-card__summary {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.84rem;
  line-height: 1.62;
}


/* =========================================================
   STANDARDIZED PRODUCT SPECS
   ========================================================= */

.category-product-card__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin: 24px 0 0;
  padding: 18px 0;
  border-top: 1px solid rgba(38, 62, 47, 0.11);
  border-bottom: 1px solid rgba(38, 62, 47, 0.11);
  box-sizing: border-box;
}

.category-product-card__spec {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0 13px;
  flex-direction: column;
  text-align: center;
}

.category-product-card__spec:first-child {
  padding-left: 0;
}

.category-product-card__spec:last-child {
  padding-right: 0;
}

.category-product-card__spec + .category-product-card__spec {
  border-left: 1px solid rgba(38, 62, 47, 0.11);
}

.category-product-card__spec dt {
  margin: 0;
  color: var(--green-700);
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.category-product-card__spec dd {
  margin: 10px 0 0;
}

.category-product-card__spec dd strong,
.category-product-card__spec dd span {
  display: block;
}

.category-product-card__spec dd strong {
  color: var(--ink-900);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.category-product-card__spec dd span {
  margin-top: 6px;
  color: var(--ink-600);
  font-size: 0.63rem;
  line-height: 1.3;
}


/* =========================================================
   PRICE + NEXT STEP
   ========================================================= */

.category-product-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 0;
  padding: 19px 5px 22px 0;
}

.category-product-card__price {
  margin: 0;
  color: var(--ink-900);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.34rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.category-product-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 40px;
  color: var(--green-800);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.015em;
  text-decoration: none;
}

.category-product-card__cta > span:last-child {
  font-size: 1.05rem;
  transition:
    transform 180ms ease;
}


/* =========================================================
   INTERACTION
   ========================================================= */

.category-product-card__media:focus-visible,
.category-product-card__title a:focus-visible,
.category-product-card__cta:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .category-product-card:hover
  .category-product-card__media img,
  .category-product-card:focus-within
  .category-product-card__media img {
    transform: scale(1.025);
  }

  .category-product-card:hover
  .category-product-card__title a,
  .category-product-card:focus-within
  .category-product-card__title a {
    color: var(--green-700);
  }

  .category-product-card:hover
  .category-product-card__cta > span:last-child,
  .category-product-card:focus-within
  .category-product-card__cta > span:last-child {
    transform: translateX(4px);
  }
}


/* =========================================================
   PRODUCT RESPONSIVE — TABLET
   =========================================================

   The collection moves from three desktop columns to two
   tablet columns.

   Desktop final-row rules are reset because they are based
   on groups of three. Tablet final rows then follow their
   own generic two-column logic:
   - two remaining cards keep the standard two-column layout;
   - one remaining card spans the full row and becomes horizontal.
   ========================================================= */

@media (max-width: 1050px) {

  /* Reset desktop three-column placement. */
  .category-product-grid > .category-product-card,
  .category-product-grid
  > .category-product-card:nth-child(3n + 1):nth-last-child(2),
  .category-product-grid
  > .category-product-card:nth-child(3n + 2):last-child,
  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child {
    grid-column: auto;
  }

  .category-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Reset the desktop one-card horizontal presentation. */
  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child {
    display: flex;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__media {
    aspect-ratio: 1 / 0.75;
    height: auto;
    min-height: 0;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__content {
    display: flex;
    min-width: 0;
    padding: 24px 26px 0;
    flex-direction: column;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__summary {
    max-width: none;
    margin-top: 0;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__specs {
    width: auto;
    margin-top: 22px;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__footer {
    width: auto;
  }

  /*
     Smart tablet final row:
     in a two-column grid, an odd-numbered last child means
     exactly one card remains on the final row.
  */
  .category-product-grid
  > .category-product-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 340px;
  }

  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__content {
    display: flex;
    min-width: 0;
    padding: clamp(30px, 4vw, 42px);
    flex-direction: column;
    justify-content: center;
  }

  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__content::before {
    display: none;
  }

  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__summary {
    max-width: 62ch;
    margin-top: 16px;
  }

  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__specs {
    width: 100%;
    margin-top: 28px;
  }

  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__footer {
    width: 100%;
    margin-top: 0;
  }

  /* Tablet text-area column separators. */
  .category-product-card__content::before {
    display: none;
  }

  .category-product-card:nth-child(even)
  .category-product-card__content::before {
    display: block;
  }
}


/* =========================================================
   PRODUCT RESPONSIVE — MOBILE
   =========================================================

   Mobile always uses one normal vertical product card per row.

   This section explicitly resets both desktop and tablet final-row
   presentations before applying mobile card styles. Product count
   therefore cannot change the mobile geometry.
   ========================================================= */

@media (max-width: 680px) {
  .category-products {
    padding: 48px 0 54px;
  }

  .category-products__header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    margin-bottom: 30px;
  }

  .category-products__header > div,
  .category-products__header > .section-summary {
    width: 100%;
    min-width: 0;
  }

  .category-products__header h2 {
    max-width: none;
    font-size: clamp(2.25rem, 10.5vw, 3.35rem);
    line-height: 1.02;
  }

  .category-products__header > .section-summary {
    justify-self: start;
  }

  .category-product-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 34px;
  }

  /*
     Reset every desktop/tablet final-row geometry.
     On mobile, every product is the same vertical card.
  */
  .category-product-grid > .category-product-card,
  .category-product-grid
  > .category-product-card:nth-child(3n + 1):nth-last-child(2),
  .category-product-grid
  > .category-product-card:nth-child(3n + 2):last-child,
  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child,
  .category-product-grid
  > .category-product-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    display: flex;
    min-width: 0;
    max-width: 100%;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__media,
  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__media,
  .category-product-card__media {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 0.78;
  }

  .category-product-card__content::before {
    display: none;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__content,
  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__content,
  .category-product-card__content {
    display: flex;
    width: 100%;
    min-width: 0;
    padding: 22px 20px 0;
    flex-direction: column;
    justify-content: flex-start;
  }

  .category-product-card__use-case {
    margin-bottom: 0;
  }

  .category-product-card__title {
    margin-top: 10px;
    font-size: clamp(1.55rem, 7vw, 1.95rem);
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__summary,
  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__summary,
  .category-product-card__summary {
    max-width: none;
    margin-top: 8px;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__specs,
  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__specs,
  .category-product-card__specs {
    width: auto;
    min-height: 0;
    margin-top: 20px;
  }

  .category-product-grid
  > .category-product-card:nth-child(3n + 1):last-child
  .category-product-card__footer,
  .category-product-grid
  > .category-product-card:nth-child(odd):last-child
  .category-product-card__footer,
  .category-product-card__footer {
    width: auto;
    margin-top: auto;
    padding-bottom: 21px;
  }
}


/* =========================================================
   04. CATEGORY BUYING GUIDE
   Shared "How to Choose" component for category pages
   ========================================================= */

.category-buying-guide {
  padding: 96px 0;
  background: var(--color-white);
}

.category-buying-guide__inner {
  width: 100%;
}

/* ---------------------------------------------------------
   Section heading
   --------------------------------------------------------- */

.category-buying-guide__header {
  max-width: 760px;
  margin: 0 auto 54px;
  text-align: center;
}

.category-buying-guide__heading-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.category-buying-guide__heading-mark > span:first-child,
.category-buying-guide__heading-mark > span:last-child {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(49, 91, 58, 0.42);
}

.category-buying-guide__eyebrow {
  color: var(--color-green-dark);
  font-size: 0.71rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.category-buying-guide__header h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 4vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.category-buying-guide__intro {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: balance;
}

/* ---------------------------------------------------------
   Criteria grid
   --------------------------------------------------------- */

.category-buying-guide__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.category-buying-guide__item {
  position: relative;
  min-width: 0;
  padding: 34px 28px 36px;
}

.category-buying-guide__item + .category-buying-guide__item {
  border-left: 1px solid var(--color-border);
}

/* ---------------------------------------------------------
   Criterion icon
   --------------------------------------------------------- */

.category-buying-guide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;
  margin-bottom: 22px;

  border: 1px solid rgba(77, 126, 87, 0.08);
  border-radius: 50%;

  color: var(--green-700);
  background:
    linear-gradient(
      145deg,
      rgba(232, 242, 227, 0.96),
      rgba(246, 250, 243, 0.98)
    );
}

.category-buying-guide__icon svg {
  display: block;
  width: 27px;
  height: 27px;

  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------
   Criterion copy
   --------------------------------------------------------- */

.category-buying-guide__item h3 {
  margin: 0 0 10px;
  color: var(--color-ink);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.25;
}

.category-buying-guide__item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   Closing takeaway
   --------------------------------------------------------- */

.category-buying-guide__closing {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 38px auto 0;
  padding: 20px 24px;

  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-soft);
}

.category-buying-guide__closing-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-green-dark);
}

.category-buying-guide__closing-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-buying-guide__closing p {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.55;
}


/* ---------------------------------------------------------
   Responsive — tablet
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .category-buying-guide {
    padding: 78px 0;
  }

  .category-buying-guide__header {
    margin-bottom: 42px;
  }

  .category-buying-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-buying-guide__item {
    padding: 30px 26px 32px;
  }

  .category-buying-guide__item + .category-buying-guide__item {
    border-left: 0;
  }

  .category-buying-guide__item:nth-child(even) {
    border-left: 1px solid var(--color-border);
  }

  .category-buying-guide__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }

  .category-buying-guide__item:last-child {
    grid-column: 1 / -1;
  }

  .category-buying-guide__closing {
    max-width: 680px;
    margin-top: 32px;
  }
}


/* ---------------------------------------------------------
   Responsive — mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {
  .category-buying-guide {
    padding: 64px 0;
  }

  .category-buying-guide__header {
    max-width: none;
    margin-bottom: 34px;
    padding-inline: 22px;
  }

  .category-buying-guide__heading-mark {
    gap: 12px;
    margin-bottom: 13px;
  }

  .category-buying-guide__heading-mark > span:first-child,
  .category-buying-guide__heading-mark > span:last-child {
    width: 28px;
  }

  .category-buying-guide__header h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 0.98;
  }

  .category-buying-guide__intro {
    max-width: 34rem;
    margin-top: 16px;
  }

  .category-buying-guide .category-buying-guide__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-buying-guide .category-buying-guide__item {
  grid-column: 1 / -1;
  padding: 20px 22px 22px;
  border-left: 0;
  border-top: 1px solid var(--color-border);
}

  .category-buying-guide .category-buying-guide__item:first-child {
    border-top: 0;
  }

  .category-buying-guide__icon {
    margin-bottom: 15px;
  }

  .category-buying-guide__item h3 {
    margin-bottom: 7px;
  }

  .category-buying-guide__closing {
    max-width: none;
    margin: 28px 18px 0;
    padding: 18px 20px;
  }
}

/* =========================================================
   05. CATEGORY-SPECIFIC SOLAR GUIDE
   Shared layout with category-specific editorial content.
   ========================================================= */

.solar-guide {
  position: relative;
  padding-bottom: 68px;
  overflow: hidden;
  background: var(--color-page);
}


/* =========================================================
   DARK INTRODUCTION
   ========================================================= */

.solar-guide__hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 82px;
  color: var(--color-white);
  background:
    radial-gradient(
      circle at 10% 18%,
      rgba(169, 205, 157, 0.14),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #102419 0%,
      #173522 58%,
      #102419 100%
    );
}

.solar-guide__hero::before,
.solar-guide__hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(183, 220, 169, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.solar-guide__hero::before {
  top: -265px;
  right: -190px;
  width: 510px;
  height: 510px;
}

.solar-guide__hero::after {
  bottom: -390px;
  left: -285px;
  width: 650px;
  height: 650px;
}

.solar-guide__hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(340px, 0.9fr)
    minmax(430px, 1.1fr);
  align-items: center;
  gap: clamp(64px, 7vw, 116px);
  margin-inline: auto;
}


/* =========================================================
   GUIDE HEADING
   ========================================================= */

.solar-guide__heading .eyebrow {
  margin-bottom: 18px;
  color: #b8dba9;
}

.solar-guide__heading h2 {
  max-width: 700px;
  margin: 0;
  color: var(--color-white);
  font-size: clamp(3.1rem, 5vw, 5.35rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.solar-guide__heading h2 span {
  display: block;
  color: #c7e4b9;
}

.solar-guide__heading > p {
  max-width: 610px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1rem;
  line-height: 1.76;
}


/* =========================================================
   SOLAR ENERGY FLOW
   ========================================================= */

.solar-guide__flow {
  display: grid;
  gap: 17px;
}

.solar-guide__flow-row {
  display: grid;
  grid-template-columns:
    68px
    minmax(48px, 1fr)
    minmax(210px, 0.92fr);
  align-items: center;
  gap: 17px;
}

.solar-guide__flow-visual {
  display: grid;
  place-items: center;
  width: 66px;
  height: 56px;
  color: #b8dba9;
}

.solar-guide__flow-visual svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.solar-guide__flow-line {
  position: relative;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(183, 220, 169, 0.08),
      rgba(183, 220, 169, 0.4)
    );
}

.solar-guide__flow-line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9fc497;
  transform: translateY(-50%);
}

.solar-guide__flow-copy {
  display: grid;
  gap: 4px;
}

.solar-guide__flow-copy strong {
  color: #c7e4b9;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.solar-guide__flow-copy span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.5;
}


/* =========================================================
   LIGHT GUIDE PANEL
   ========================================================= */

.solar-guide__panel-wrap {
  position: relative;
  z-index: 2;
  margin-top: -44px;
}

.solar-guide__panel {
  overflow: hidden;
  border: 1px solid rgba(32, 73, 44, 0.1);
  border-radius: 34px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.99),
      rgba(248, 251, 247, 0.98)
    );
  box-shadow:
    0 28px 74px rgba(21, 50, 31, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


/* =========================================================
   GUIDE TIMELINE
   ========================================================= */

.solar-guide__timeline {
  position: relative;
  padding: 30px 54px 20px;
}

.solar-guide__timeline::before {
  content: "";
  position: absolute;
  top: 65px;
  bottom: 65px;
  left: 91px;
  width: 1px;
  background:
    linear-gradient(
      180deg,
      rgba(101, 150, 79, 0.1),
      rgba(101, 150, 79, 0.5),
      rgba(101, 150, 79, 0.1)
    );
}

.solar-guide__step {
  position: relative;
  display: grid;
  grid-template-columns:
    76px
    90px
    minmax(280px, 1fr)
    minmax(260px, 0.8fr);
  align-items: center;
  gap: 28px;
  min-height: 152px;
  padding: 28px 0;
}

.solar-guide__step:not(:last-child) {
  border-bottom: 1px solid rgba(32, 73, 44, 0.075);
}


/* =========================================================
   NUMBER MARKER
   ========================================================= */

.solar-guide__marker {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  justify-self: center;
  border: 2px solid #78a96a;
  border-radius: 50%;
  color: #173522;
  background: var(--color-white);
  box-shadow:
    0 0 0 7px rgba(101, 150, 79, 0.055),
    0 8px 22px rgba(31, 63, 39, 0.08);
  font-size: 0.88rem;
  font-weight: 850;
}


/* =========================================================
   STEP ICON
   ========================================================= */

.solar-guide__step-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(101, 150, 79, 0.14);
  border-radius: 20px;
  color: #5f9454;
  background:
    linear-gradient(
      145deg,
      rgba(221, 237, 213, 0.8),
      rgba(239, 246, 235, 0.98)
    );
  transition:
    transform 240ms ease,
    box-shadow 240ms ease;
}

.solar-guide__step:hover .solar-guide__step-icon,
.solar-guide__step:focus-within .solar-guide__step-icon {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(31, 63, 39, 0.09);
}

.solar-guide__step-icon svg {
  width: 37px;
  height: 37px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   STEP CONTENT
   ========================================================= */

.solar-guide__step-content {
  min-width: 0;
}

.solar-guide__step-label {
  display: block;
  margin-bottom: 8px;
  color: #4c8245;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.solar-guide__step-content h3 {
  margin: 0;
  color: #102017;
  font-size: clamp(1.28rem, 2vw, 1.65rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.solar-guide__step-content p {
  max-width: 650px;
  margin: 12px 0 0;
  color: rgba(16, 32, 23, 0.74);
  font-size: 0.87rem;
  line-height: 1.68;
}


/* =========================================================
   GREENLYTES TIP
   ========================================================= */

.solar-guide__tip {
  min-width: 0;
  align-self: center;
  padding: 19px 21px;
  border: 1px solid rgba(101, 150, 79, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(246, 250, 243, 0.99),
      rgba(237, 246, 232, 0.95)
    );
}

.solar-guide__tip strong {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #4c8245;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.solar-guide__tip strong span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--color-white);
  background: #72a665;
  font-size: 0.66rem;
}

.solar-guide__tip p {
  margin: 11px 0 0 30px;
  color: rgba(16, 32, 23, 0.76);
  font-size: 0.78rem;
  line-height: 1.55;
}


/* =========================================================
   FINAL BENEFITS
   ========================================================= */

.solar-guide__benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 25px 42px;
  border-top: 1px solid rgba(32, 73, 44, 0.075);
  list-style: none;
}

.solar-guide__benefits li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding-inline: 18px;
}

.solar-guide__benefit-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  color: #609653;
}

.solar-guide__benefit-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.solar-guide__benefits li > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.solar-guide__benefits strong {
  color: #132219;
  font-size: 0.81rem;
  font-weight: 820;
  line-height: 1.3;
}

.solar-guide__benefits small {
  color: rgba(19, 34, 25, 0.64);
  font-size: 0.7rem;
  line-height: 1.4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
  .solar-guide {
    padding-bottom: 62px;
  }

  .solar-guide__hero {
    padding: 58px 0 74px;
  }

  .solar-guide__hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .solar-guide__heading {
    max-width: 780px;
  }

  .solar-guide__heading h2 {
    max-width: 760px;
  }

  .solar-guide__flow {
    max-width: 720px;
  }

  .solar-guide__panel-wrap {
    margin-top: -40px;
  }

  .solar-guide__timeline {
    padding-inline: 42px;
  }

  .solar-guide__step {
    grid-template-columns:
      64px
      76px
      minmax(0, 1fr);
    gap: 23px;
  }

  .solar-guide__tip {
    grid-column: 3;
    margin-top: -4px;
  }

  .solar-guide__timeline::before {
    left: 74px;
  }

  .solar-guide__step-icon {
    width: 70px;
    height: 70px;
  }

  .solar-guide__step-icon svg {
    width: 33px;
    height: 33px;
  }

  .solar-guide__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 0;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
  .solar-guide {
    padding-bottom: 48px;
  }

  .solar-guide__hero {
    padding: 50px 0 64px;
  }

  .solar-guide__hero-inner {
    gap: 40px;
  }

  .solar-guide__heading h2 {
    font-size: clamp(2.65rem, 13vw, 4.1rem);
  }

  .solar-guide__heading > p {
    margin-top: 21px;
    font-size: 0.94rem;
  }

  .solar-guide__flow {
    gap: 15px;
  }

  .solar-guide__flow-row {
    grid-template-columns:
      52px
      minmax(24px, 1fr)
      minmax(150px, 1.45fr);
    gap: 11px;
  }

  .solar-guide__flow-visual {
    width: 50px;
    height: 46px;
  }

  .solar-guide__flow-visual svg {
    width: 39px;
    height: 39px;
  }

  .solar-guide__flow-copy strong {
    font-size: 0.68rem;
  }

  .solar-guide__flow-copy span {
    font-size: 0.72rem;
  }

  .solar-guide__panel-wrap {
    margin-top: -34px;
  }

  .solar-guide__panel {
    border-radius: 24px;
  }

  .solar-guide__timeline {
    padding: 16px 19px 6px;
  }

  .solar-guide__timeline::before {
    top: 52px;
    bottom: 52px;
    left: 42px;
  }

  .solar-guide__step {
    grid-template-columns:
      46px
      minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 25px 0;
  }

  .solar-guide__marker {
    width: 38px;
    height: 38px;
    justify-self: start;
    font-size: 0.78rem;
  }

  .solar-guide__step-icon {
    grid-column: 2;
    width: 60px;
    height: 60px;
    margin-bottom: 3px;
    border-radius: 17px;
  }

  .solar-guide__step-icon svg {
    width: 29px;
    height: 29px;
  }

  .solar-guide__step-content {
    grid-column: 2;
  }

  .solar-guide__step-content h3 {
    font-size: 1.34rem;
  }

  .solar-guide__step-content p {
    font-size: 0.84rem;
  }

  .solar-guide__tip {
    grid-column: 2;
    width: 100%;
    margin-top: 2px;
    padding: 16px 17px;
  }

  .solar-guide__tip p {
    margin-left: 29px;
    font-size: 0.75rem;
  }

  .solar-guide__benefits {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 23px 23px 26px;
  }

  .solar-guide__benefits li {
    padding-inline: 0;
  }
}


/* =========================================================
   06. GREENLYTES SELECTION METHOD
   ========================================================= */

.why-greenlytes {
  position: relative;
  padding: 68px 0 78px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(126, 167, 111, 0.10),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(177, 205, 164, 0.13),
      transparent 30%
    ),
    #f8faf6;
}

.why-greenlytes::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -110px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(35, 78, 47, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.why-greenlytes::after {
  content: "";
  position: absolute;
  bottom: -190px;
  left: -130px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(35, 78, 47, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.why-greenlytes__container {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}

.why-greenlytes__heading {
  max-width: 800px;
  margin: 0 auto 38px;
  text-align: center;
}

.why-greenlytes__heading .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 20px;
  color: #477a4e;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.why-greenlytes__heading .section-eyebrow::before,
.why-greenlytes__heading .section-eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(71, 122, 78, 0.38);
}

.why-greenlytes__heading h2 {
  max-width: 880px;
  margin: 0 auto;
  color: #15321f;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.2rem, 3.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.048em;
}

.why-greenlytes__heading p {
  max-width: 680px;
  margin: 25px auto 0;
  color: #617064;
  font-size: 0.98rem;
  line-height: 1.78;
}

.why-greenlytes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.why-card {
  position: relative;
  min-height: 225px;
  padding: 31px 30px 29px;
  overflow: hidden;
  border: 1px solid rgba(32, 73, 44, 0.10);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.80);
  box-shadow:
    0 16px 42px rgba(31, 63, 39, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  transition:
    transform 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    background-color 240ms ease;
}

.why-card::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -88px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(106, 156, 96, 0.055);
  transition:
    transform 300ms ease,
    background-color 300ms ease;
}

.why-card:hover,
.why-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(53, 111, 63, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 56px rgba(31, 63, 39, 0.095),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.why-card:hover::after,
.why-card:focus-within::after {
  transform: scale(1.12);
  background: rgba(106, 156, 96, 0.08);
}

.why-card__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border: 1px solid rgba(57, 108, 65, 0.10);
  border-radius: 15px;
  color: #3f7848;
  background:
    linear-gradient(
      145deg,
      rgba(226, 240, 220, 0.95),
      rgba(244, 249, 241, 0.95)
    );
  box-shadow: 0 8px 20px rgba(53, 91, 58, 0.07);
  transition:
    transform 250ms ease,
    background-color 250ms ease;
}

.why-card:hover .why-card__icon,
.why-card:focus-within .why-card__icon {
  transform: scale(1.06);
  background: #eef8e8;
}

.why-card__icon svg {
  width: 22px;
  height: 22px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #1c3824;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.why-card p {
  position: relative;
  z-index: 1;
  margin: 13px 0 0;
  color: #69756b;
  font-size: 0.84rem;
  line-height: 1.68;
}

.greenlytes-quote {
  position: relative;
  max-width: 890px;
  margin: 44px auto 0;
  padding: 46px 58px 42px;
  border: 1px solid rgba(41, 82, 51, 0.11);
  border-radius: 28px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(240, 247, 237, 0.92)
    );
  box-shadow: 0 22px 60px rgba(28, 61, 37, 0.07);
  text-align: center;
}

.greenlytes-quote::before {
  content: "“";
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(66, 117, 73, 0.18);
  font-family: Georgia, serif;
  font-size: 5.6rem;
  line-height: 1;
}

.greenlytes-quote p {
  position: relative;
  z-index: 1;
  max-width: 690px;
  margin: 0 auto;
  color: #1b3823;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.55rem, 2.6vw, 2.25rem);
  line-height: 1.28;
  letter-spacing: -0.035em;
}

.greenlytes-quote footer {
  margin-top: 22px;
  color: #718074;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


/* =========================================================
   07. CATEGORY FAQ
   ========================================================= */

.category-faq {
  position: relative;
  overflow: clip;
  padding: 78px 0 84px;
  color: #17341f;
  background:
    radial-gradient(
      circle at 4% 12%,
      rgba(170, 213, 150, 0.13),
      transparent 29%
    ),
    radial-gradient(
      circle at 96% 92%,
      rgba(91, 151, 98, 0.10),
      transparent 30%
    ),
    #ffffff;
}

.category-faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1180px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(44, 87, 52, 0.18),
    transparent
  );
}

.category-faq__container {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.category-faq__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.45fr);
  gap: clamp(64px, 8vw, 118px);
  align-items: start;
  overflow-anchor: none;
}


/* =========================================================
   FAQ — LEFT INTRO
   ========================================================= */

.category-faq__intro {
  position: sticky;
  top: clamp(90px, 10vh, 110px);
  align-self: start;
  height: fit-content;
  overflow-anchor: none;
}

.category-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #4c8052;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.category-faq__eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}

.category-faq__title {
  max-width: 470px;
  margin: 0;
  color: #17341f;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.15rem, 3.5vw, 3.7rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.category-faq__lead {
  max-width: 430px;
  margin: 27px 0 0;
  color: #647268;
  font-size: 1rem;
  line-height: 1.78;
}

.category-faq__review-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 430px;
  margin-top: 38px;
  padding: 21px 22px;
  border: 1px solid rgba(65, 111, 70, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(244, 249, 241, 0.95),
      rgba(255, 255, 255, 0.96)
    );
  box-shadow:
    0 14px 36px rgba(37, 73, 43, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.category-faq__review-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #ffffff;
  background: #4f8757;
  box-shadow: 0 8px 20px rgba(58, 112, 66, 0.18);
}

.category-faq__review-card strong {
  display: block;
  margin-bottom: 6px;
  color: #294c30;
  font-size: 0.91rem;
  line-height: 1.35;
}

.category-faq__review-card p {
  margin: 0;
  color: #6a776d;
  font-size: 0.82rem;
  line-height: 1.62;
}


/* =========================================================
   FAQ — ACCORDION
   ========================================================= */

.category-faq__questions {
  border-top: 1px solid rgba(37, 68, 42, 0.17);
  min-width: 0;
  overflow-anchor: none;
}

.category-faq-item {
  border-bottom: 1px solid rgba(37, 68, 42, 0.17);
  overflow-anchor: none;
}

.category-faq-item__question {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 34px;
  gap: 18px;
  align-items: center;
  min-height: 96px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  color: #24452a;
  transition:
    color 220ms ease,
    padding-left 220ms ease;
}

.category-faq-item__question::-webkit-details-marker {
  display: none;
}

.category-faq-item__question::marker {
  display: none;
  content: "";
}

.category-faq-item__number {
  align-self: start;
  padding-top: 7px;
  color: #7fa283;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.13em;
}

.category-faq-item__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.35rem, 2.15vw, 1.87rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.category-faq-item__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(52, 91, 57, 0.16);
  border-radius: 50%;
  background: rgba(247, 250, 245, 0.9);
  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.category-faq-item__toggle::before,
.category-faq-item__toggle::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.category-faq-item__toggle::after {
  transform: rotate(90deg);
}

.category-faq-item__question:hover {
  color: #4d8054;
}

.category-faq-item__question:hover .category-faq-item__toggle {
  color: #ffffff;
  border-color: #4f8757;
  background: #4f8757;
  box-shadow: 0 9px 22px rgba(56, 103, 63, 0.18);
}

.category-faq-item[open] .category-faq-item__question {
  color: #47794e;
}

.category-faq-item[open] .category-faq-item__toggle {
  color: #ffffff;
  border-color: #4f8757;
  background: #4f8757;
  transform: rotate(45deg);
  box-shadow: 0 9px 22px rgba(56, 103, 63, 0.18);
}

.category-faq-item__answer {
  overflow: hidden;
}

.category-faq-item__answer-inner {
  max-width: 690px;
  padding:
    0 50px 42px
    calc(44px + 18px);
}

.category-faq-item__answer p {
  margin: 0;
  color: #667269;
  font-size: 0.97rem;
  line-height: 1.82;
}

.category-faq-item__answer p + p {
  margin-top: 18px;
}

.category-faq-item__insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 25px;
  padding: 17px 18px;
  border: 1px solid rgba(80, 132, 86, 0.11);
  border-radius: 15px;
  background: rgba(242, 248, 239, 0.82);
}

.category-faq-item__insight strong {
  color: #47794e;
  font-size: 0.71rem;
  font-weight: 850;
  line-height: 1.55;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.category-faq-item__insight span {
  color: #58675c;
  font-size: 0.84rem;
  line-height: 1.62;
}


/* =========================================================
   FAQ — FINAL CTA
   ========================================================= */

.category-faq__cta {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 390px;
  margin-top: 70px;
  padding: 54px 40px;
  border: 1px solid rgba(154, 206, 132, 0.18);
  border-radius: 36px;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(177, 225, 151, 0.20),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 95%,
      rgba(111, 173, 113, 0.22),
      transparent 34%
    ),
    linear-gradient(145deg, #173d24 0%, #245331 52%, #173d24 100%);
  box-shadow:
    0 32px 70px rgba(25, 65, 35, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.category-faq__cta::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 25px;
  pointer-events: none;
}

.category-faq__cta-decoration span {
  position: absolute;
  border: 1px solid rgba(205, 234, 190, 0.11);
  border-radius: 50%;
}

.category-faq__cta-decoration span:nth-child(1) {
  top: -100px;
  left: -70px;
  width: 310px;
  height: 310px;
}

.category-faq__cta-decoration span:nth-child(2) {
  right: -130px;
  bottom: -150px;
  width: 390px;
  height: 390px;
}

.category-faq__cta-decoration span:nth-child(3) {
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  transform: translate(-50%, -50%);
  border-color: rgba(205, 234, 190, 0.045);
}

.category-faq__cta-content {
  position: relative;
  z-index: 2;
  max-width: 770px;
}

/* CTA glow */
.category-faq__cta-content::before {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: -1;
  width: 620px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(205, 239, 190, 0.12) 0%,
    rgba(175, 220, 157, 0.055) 38%,
    transparent 72%
  );
  filter: blur(10px);
  pointer-events: none;
}

.category-faq__cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
  color: #cce9c0;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.category-faq__cta-eyebrow::before,
.category-faq__cta-eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}

.category-faq__cta h3 {
  max-width: 700px;
  margin: 0 auto;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.category-faq__cta p {
  max-width: 630px;
  margin: 25px auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.75;
}

.category-faq__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin-top: 33px;
}

.category-faq__cta-primary,
.category-faq__cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 25px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

.category-faq__cta-primary {
  gap: 10px;
  color: #1c4628;
  background: #edf8e8;
  box-shadow: 0 12px 30px rgba(10, 36, 18, 0.18);
}

.category-faq__cta-primary svg {
  transition: transform 220ms ease;
}

.category-faq__cta-secondary {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.category-faq__cta-primary:hover {
  transform: translateY(-3px);
  background: #ffffff;
  box-shadow: 0 17px 36px rgba(10, 36, 18, 0.24);
}

.category-faq__cta-primary:hover svg {
  transform: translateX(4px);
}

.category-faq__cta-secondary:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 14px 30px rgba(8, 31, 16, 0.18);
}

/* =========================================================
   08. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1050px) {
  /* Hero */
  .category-hero {
    padding-bottom: 58px;
  }

  .category-hero__layout {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .category-hero__content {
    max-width: 780px;
  }

  .category-hero__content h1 {
    max-width: 760px;
  }

  .category-hero__lead {
    max-width: 680px;
  }

  .category-hero__visual,
  .category-hero__visual img {
    min-height: 560px;
  }

}


/* =========================================================
   09. RESPONSIVE — FAQ TABLET
   ========================================================= */

@media (max-width: 960px) {
  .category-faq {
    padding: 66px 0 74px;
  }

  .category-faq__layout {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .category-faq__intro {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.65fr);
    column-gap: 44px;
    align-items: end;
    min-height: 0;
  }

  .category-faq__eyebrow,
  .category-faq__title,
  .category-faq__lead {
    grid-column: 1;
  }

  .category-faq__review-card {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
  }

  .category-faq__title {
    max-width: 650px;
    font-size: clamp(2.7rem, 7vw, 4.2rem);
  }

  .category-faq__cta {
    min-height: 360px;
    margin-top: 58px;
  }
}


/* =========================================================
   10. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 680px) {
  /* Hero */
  .category-hero {
    padding: 22px 0 42px;
  }

  .category-hero__layout {
    gap: 40px;
  }

  .category-hero__signature {
    margin-bottom: 20px;
    font-size: 0.62rem;
  }

  .category-hero__content h1 {
    font-size: clamp(3.2rem, 15vw, 4.9rem);
    line-height: 0.92;
  }

  .category-hero__lead {
    margin-top: 26px;
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .category-hero__actions {
    flex-direction: column;
    margin-top: 31px;
  }

  .category-hero__actions .button {
    width: 100%;
  }

  .category-hero__assurances {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 32px;
  }

  .category-hero__assurances li {
    width: 100%;
    border-radius: 14px;
  }

  .category-hero__visual,
  .category-hero__visual img {
    min-height: 430px;
  }

  .category-hero__visual {
    border-radius: 22px;
  }

  .category-hero__image-note {
    right: 13px;
    bottom: 13px;
    left: 13px;
    display: block;
    padding: 14px 16px;
  }

  .category-hero__image-note strong {
    display: block;
    max-width: none;
    margin-top: 5px;
    text-align: left;
  }


  /* Products */
  .category-products {
    padding: 48px 0 54px;
  }

  .category-products__header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
    margin-bottom: 30px;
  }

  .category-products__header > div {
    width: 100%;
    min-width: 0;
  }

  .category-products__header h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(2.25rem, 10.5vw, 3.35rem);
    line-height: 1.02;
  }

  .category-products__header > .section-summary {
    width: 100%;
    justify-self: start;
  }

  /* Why Greenlytes */
  .why-greenlytes {
    padding: 50px 0 56px;
  }

  .why-greenlytes__heading {
    margin-bottom: 28px;
  }

  .why-greenlytes__heading h2 {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }

  .why-greenlytes__heading p {
    margin-top: 20px;
    font-size: 0.94rem;
  }

  .why-greenlytes__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .why-card {
    min-height: 0;
    padding: 26px 24px;
  }

  .why-card__icon {
    margin-bottom: 20px;
  }

  .why-card h3 {
    font-size: 1.4rem;
  }

  .why-card p {
    font-size: 0.9rem;
  }

  .greenlytes-quote {
    margin-top: 32px;
    padding: 36px 22px 30px;
    border-radius: 22px;
  }

  .greenlytes-quote p {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  /* FAQ */
  .category-faq {
    padding: 52px 0 58px;
  }

  .category-faq__container {
    width: min(100% - 30px, 1180px);
  }

  .category-faq::before {
    width: calc(100% - 30px);
  }

  .category-faq__layout {
    gap: 38px;
  }

  .category-faq__intro {
    display: block;
  }

  .category-faq__eyebrow {
    margin-bottom: 18px;
  }

  .category-faq__title {
    font-size: clamp(2.4rem, 12vw, 3.5rem);
  }

  .category-faq__lead {
    margin-top: 22px;
    font-size: 0.94rem;
  }

  .category-faq__review-card {
    margin-top: 28px;
    padding: 18px;
    border-radius: 17px;
  }

  .category-faq-item__question {
    grid-template-columns: 32px minmax(0, 1fr) 38px;
    gap: 11px;
    min-height: 96px;
    padding: 21px 0;
  }

  .category-faq-item__number {
    padding-top: 5px;
    font-size: 0.66rem;
  }

  .category-faq-item__title {
    font-size: 1.25rem;
    line-height: 1.28;
  }

  .category-faq-item__toggle {
    width: 36px;
    height: 36px;
  }

  .category-faq-item__toggle::before,
  .category-faq-item__toggle::after {
    width: 12px;
  }

  .category-faq-item__answer-inner {
    padding:
      0 0 32px
      calc(32px + 11px);
  }

  .category-faq-item__answer p {
    font-size: 0.9rem;
    line-height: 1.75;
  }

  .category-faq-item__insight {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 21px;
    padding: 15px;
  }

  .category-faq-item__insight strong {
    white-space: normal;
  }

  .category-faq__cta {
    min-height: 0;
    margin-top: 46px;
    padding: 52px 20px;
    border-radius: 25px;
  }

  .category-faq__cta::before {
    inset: 10px;
    border-radius: 18px;
  }

  .category-faq__cta h3 {
    font-size: clamp(2.35rem, 12vw, 3.45rem);
  }

  .category-faq__cta p {
    margin-top: 21px;
    font-size: 0.92rem;
  }

  /* CTA glow */
  .category-faq__cta-content::before {
    top: 38%;
    width: 380px;
    height: 260px;
    opacity: 0.8;
  }

  .category-faq__cta-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 29px;
  }

  .category-faq__cta-primary,
  .category-faq__cta-secondary {
    width: 100%;
  }
}


/* =========================================================
   11. ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .category-hero__visual img,
  .category-product-card__media img,
  .solar-guide__step-icon,
  .why-card,
  .why-card::after,
  .why-card__icon,
  .category-faq-item__question,
  .category-faq-item__toggle,
  .category-faq-item__toggle::before,
  .category-faq-item__toggle::after,
  .category-faq__cta-primary,
  .category-faq__cta-secondary,
  .category-faq__cta-primary svg {
    transition: none;
  }

  .category-hero__visual:hover img,
  .category-product-card:hover .category-product-card__media img,
  .solar-guide__step:hover .solar-guide__step-icon,
  .why-card:hover,
  .why-card:hover::after,
  .why-card:hover .why-card__icon,
  .category-faq__cta-primary:hover,
  .category-faq__cta-secondary:hover {
    transform: none;
  }
}