/* Daylight colour and real solar photography beneath the commerce heroes.
   Desktop presentation only; original images, content and interactions stay intact. */
@media (min-width: 1001px) {
  .commerce-catalogue .catalog-section {
    position: relative;
    isolation: isolate;
    padding: 30px 28px 34px;
    margin-top: 14px;
    margin-bottom: 46px;
    background: #dfeaf3;
    border: 1px solid #cadce8;
    border-radius: 30px;
    box-shadow: 0 12px 34px #355f7807;
  }
  .commerce-catalogue .catalog-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 540px;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg,#dfebf2dc 0%,#dfebf2eb 62%,#dfeaf3 100%),url('/assets/hero-real.jpeg') center 60% / cover no-repeat;
    pointer-events: none;
  }
  .commerce-catalogue .catalog-search {
    background: #f5e4bf;
    border-color: #e4cfa6;
    box-shadow: 0 4px 18px #80684208;
  }
  .commerce-catalogue .catalog-search input { border-color: #e2d3b6; background: #fffdf5; }
  .commerce-catalogue .catalog-search .button { background: #2a5277; color: #fffaf0; }
  .commerce-catalogue .catalog-search .button:hover { background: #1c4267; color: #fffaf0; }
  .commerce-catalogue .catalog-sidebar { background: #f6ecd6; border-color: #e6d9b9; }
  .commerce-catalogue .commerce-filter-label { color: #7b6338; }
  .commerce-catalogue .catalog-sidebar h2 { color: #574a30; }
  .commerce-catalogue .catalog-category { color: #635439; }
  .commerce-catalogue .catalog-category:hover { background: #ebdcb9; }
  .commerce-catalogue .catalog-category[aria-pressed=true] { color: #fffaf0; background: #335b78; }
  .commerce-catalogue .catalog-category[aria-pressed=true] span { color: #fffaf0; background: #ffffff20; }
  .commerce-catalogue .catalog-sidebar label { color: #645334; }
  .commerce-catalogue .catalog-sidebar select { border-color: #ded0b0; color: #5b4c34; background: #fffaf0; }
  .commerce-catalogue #clear-filters { color: #4f5c3a; }
  .commerce-catalogue .catalog-advice {
    background: #e5cbae url('/assets/home-visuals/energy-lines.svg') right -110px top 25px / 310px no-repeat;
    border: 1px solid #d8b995;
    padding-top: 22px;
  }
  .commerce-catalogue .catalog-advice h3 { color: #61432f; }
  .commerce-catalogue .catalog-advice p { color: #694f37; }
  .commerce-catalogue .catalog-advice .text-link { color: #345541; }
  .commerce-catalogue .catalog-toolbar { border-color: #bbd0de; }
  .commerce-catalogue .catalog-toolbar p { color: #34566e; }
  .commerce-catalogue .catalog-toolbar label { color: #4a6172; }
  .commerce-catalogue .catalog-toolbar select { background: #f9fcff; border-color: #bfd3e1; color: #355570; }

  /* A light product stage keeps source photography accurate while the surrounding
     colour makes each row feel connected to the page. */
  .commerce-catalogue .catalog-card {
    --card-tint: #ebdfbd;
    --card-color: #655434;
    background: #fff5de;
    border-color: #e0d3ad;
  }
  .commerce-catalogue .catalog-card:nth-child(3n + 2) {
    --card-tint: #cfdfec;
    --card-color: #325c7a;
    background: #edf5fd;
    border-color: #c6d9e9;
  }
  .commerce-catalogue .catalog-card:nth-child(3n) {
    --card-tint: #eacdb8;
    --card-color: #75503a;
    background: #faeadd;
    border-color: #e6cdbb;
  }
  .commerce-catalogue .catalog-card:nth-child(6n + 4) {
    --card-tint: #d3dfc0;
    --card-color: #49613d;
    background: #edf2df;
    border-color: #cedbbb;
  }
  .commerce-catalogue .catalog-card:hover { border-color: #7395ab; box-shadow: 0 9px 24px #315e7b13; }
  .commerce-catalogue .catalog-copy h3 { color: #344b45; }
  .commerce-catalogue .catalog-copy .catalog-price { color: #355677; }
  .commerce-catalogue .catalog-card:nth-child(3n) .catalog-price { color: #7b5036; }
  .commerce-catalogue .catalog-card-bottom { border-color: #9d9f822e; }
  .commerce-catalogue .catalog-card-bottom .text-link { color: #3d5b67; }
  .commerce-catalogue .catalog-card-bottom .add-product:hover { background: #315979; color: #fffaf0; }
  .commerce-catalogue .catalog-note { color: #4c6475; border-color: #bdcfdd; }
  .commerce-catalogue .pagination button { background: #f7fbfe; color: #355b77; border-color: #bacfdf; }
  .commerce-catalogue .pagination button[aria-current=page] { background: #315a7c; color: #fffaf0; border-color: #315a7c; }
  .commerce-catalogue .pagination button[aria-current=page]:hover { background: #244b6c; color: #fffaf0; }
  .commerce-catalogue .catalog-empty { background: #f9e2b2; border-color: #dec28a; }

  /* Existing installation photo gives the next step a real setting. */
  .commerce-catalogue .commerce-support {
    min-height: 288px;
    padding: 44px 48px;
    background: linear-gradient(90deg,#e6f0f8fc 0%,#e6f0f8f5 45%,#e6f0f891 69%,#e6f0f829 100%),url('/assets/hero-real.jpeg') center 61% / cover no-repeat;
    border: 1px solid #c4d8e6;
    color: #24465f;
    margin-bottom: 70px;
  }
  .commerce-catalogue .commerce-support::before { content: none; }
  .commerce-catalogue .commerce-support .commerce-eyebrow { color: #506778; }
  .commerce-catalogue .commerce-support h2 { color: #264b67; }
  .commerce-catalogue .commerce-support h2 em { color: #36749a; }
  .commerce-catalogue .commerce-support p { color: #47667c; max-width: 500px; }
  .commerce-catalogue .commerce-support > .button {
    background: #f6dea2;
    color: #534627;
    border: 1px solid #fcecc9;
    box-shadow: 0 7px 24px #18384e25;
  }
  .commerce-catalogue .commerce-support > .button:hover { background: #ffedc2; color: #534627; }

  /* The detail hero remains unchanged. The long-form content gets its own warm
     canvas, blue specifications and a peach source-information side panel. */
  .commerce-product .detail-lower {
    position: relative;
    isolation: isolate;
    padding: 27px;
    background: #eee0c5;
    border: 1px solid #dfd0ae;
    border-radius: 30px;
    gap: 26px;
  }
  .commerce-product .detail-lower::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: url('/assets/home-visuals/sun-orbits.svg') right -155px top -155px / 570px no-repeat;
    opacity: .3;
    pointer-events: none;
  }
  .commerce-product .detail-lower > .rich-content {
    background: #e6eff6;
    border-color: #c7dbe8;
    padding: 31px 33px;
    box-shadow: 0 5px 20px #70654507;
  }
  .commerce-product .rich-content > h2:first-child { color: #294f6a; border-color: #bfd3e1; }
  .commerce-product .rich-content h2,
  .commerce-product .rich-content h3,
  .commerce-product .rich-content h4 { color: #2e5874; }
  .commerce-product .rich-content p,
  .commerce-product .rich-content ul,
  .commerce-product .rich-content ol { color: #425f72; }
  .commerce-product .rich-content table { background: #fff9ed; border-color: #bfd1dc; }
  .commerce-product .rich-content th { color: #294d66; background: #cbdfea; }
  .commerce-product .rich-content td { background: #fff8e9; border-color: #dce1d8; color: #465f6a; }
  .commerce-product .rich-content td:first-child { background: #dce8e1; color: #3e5d4b; }
  .commerce-product .rich-content tr:nth-child(even) td:not(:first-child) { background: #f8efd9; }
  .commerce-product .rich-content blockquote { background: #ead5b8; color: #644f34; }
  .commerce-product .listing-terms { background: #f3d8c4; border-color: #dbbba2; }
  .commerce-product .listing-terms h2 { color: #714d35; }
  .commerce-product .listing-terms ul { color: #73563e; }
  .commerce-product .listing-terms li::marker { color: #94714a; }
  .commerce-product .listing-terms .source-note { color: #72583d; border-color: #d5b495; }
  .commerce-product .listing-terms .source-note a { color: #5f4e2e; }
  .commerce-product .listing-terms .small { color: #76583e; }

  .commerce-product .closing-cta {
    min-height: 226px;
    background: linear-gradient(90deg,#f5e4c8fc 0%,#f5e4c8f5 48%,#f5e4c88c 75%,#f5e4c822),url('/assets/hero-real.jpeg') center 63% / cover no-repeat;
    border-color: #ddc8a8;
  }
  .commerce-product .closing-cta::before { content: none; }
  .commerce-product .closing-cta h2 { color: #5f4e34; max-width: 600px; }
  .commerce-product .closing-cta p { color: #6d5b40; max-width: 540px; }
  .commerce-product .closing-cta .button { color: #fffaf0; background: #315775; border-color: #456d8a; box-shadow: 0 6px 20px #384e5e20; }
  .commerce-product .closing-cta .button:hover { color: #fffaf0; background: #234760; }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .commerce-catalogue .catalog-section { padding: 24px 22px 30px; }
  .commerce-catalogue .catalog-layout { grid-template-columns: 210px minmax(0,1fr); gap: 22px; }
  .commerce-catalogue .catalog-photo { height: 190px; }
  .commerce-catalogue .commerce-support { padding: 38px 36px; }
  .commerce-catalogue .commerce-support p { max-width: 460px; }
  .commerce-product .detail-lower { padding: 23px; grid-template-columns: minmax(0,1fr) 270px; gap: 22px; }
  .commerce-product .detail-lower > .rich-content { padding: 27px; }
}