/**
 * Product category landing layout
 * templates/partials/category-landing.php, inc/category-landing.php
 *
 * Headings and body copy keep the site's default sizes; only small labels are sized here.
 */

.b-cat-landing {
  --cl-navy: #20243f;
  --cl-muted: #556677;
  --cl-line: #e3e6ea;
  --cl-soft: #f7f8f9;
  --cl-teal: #00b097;
  --cl-teal-dark: #007d6b;
  --cl-teal-darker: #00665a;
  --cl-radius: 16px;
  color: var(--cl-navy);
}

.b-cat-landing.p-archive-store {
  padding-bottom: 72px;
  padding-top: 8px;
}

.b-cat-landing .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}

.b-cat-landing a:focus-visible,
.b-cat-landing summary:focus-visible {
  outline: 3px solid var(--cl-teal-dark);
  outline-offset: 3px;
}

.b-cat-landing [tabindex="-1"]:focus {
  outline: none;
}

.b-cat-landing [id] {
  scroll-margin-top: 120px;
}

.b-cat-landing ul,
.b-cat-landing ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.b-cat-landing h1,
.b-cat-landing h2,
.b-cat-landing h3 {
  color: var(--cl-navy);
  font-weight: 700;
  line-height: 1.25;
}

.b-cat-landing__arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Hero gallery (shown when a category has no video): swipe, arrows and dots, no autoplay */

.b-cat-landing__gallery {
  position: relative;
}

.b-cat-landing__gallery-track {
  background: #fff;
  border-radius: var(--cl-radius);
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.b-cat-landing__gallery-track::-webkit-scrollbar {
  display: none;
}

.b-cat-landing__gallery-slide {
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  flex: 0 0 100%;
  margin: 0;
  padding: 24px;
  scroll-snap-align: start;
}

.b-cat-landing__gallery--photos .b-cat-landing__gallery-slide {
  aspect-ratio: 5 / 3;
  padding: 0;
}

.b-cat-landing__gallery--photos .b-cat-landing__gallery-slide img {
  object-fit: cover;
}

.b-cat-landing__gallery-slide picture,
.b-cat-landing__gallery-slide img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.b-cat-landing__gallery-arrow {
  align-items: center;
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(32, 36, 63, 0.1);
  color: var(--cl-navy);
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: absolute;
  /* Centre on the picture, above the dots row (24px dots + 12px gap) */
  top: calc(50% - 18px);
  transform: translateY(-50%);
  transition: opacity 0.2s ease, background-color 0.2s ease;
  width: 44px;
}

.b-cat-landing__gallery-arrow--prev {
  left: 12px;
}

.b-cat-landing__gallery-arrow--next {
  right: 12px;
}

.b-cat-landing__gallery-arrow:hover {
  background: var(--cl-soft);
}

.b-cat-landing__gallery-arrow:disabled {
  cursor: default;
  opacity: 0;
  pointer-events: none;
}

.b-cat-landing__gallery-track:focus-visible,
.b-cat-landing__gallery-arrow:focus-visible,
.b-cat-landing__gallery-dot:focus-visible {
  outline: 3px solid var(--cl-teal-dark);
  outline-offset: 2px;
}

.b-cat-landing__gallery-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 12px;
}

.b-cat-landing__gallery-dot {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.b-cat-landing__gallery-dot::before {
  background: #c9ccd3;
  border-radius: 999px;
  content: "";
  height: 8px;
  transition: width 0.2s ease, background-color 0.2s ease;
  width: 8px;
}

.b-cat-landing__gallery-dot[aria-current="true"]::before {
  background: var(--cl-navy);
  width: 20px;
}

/* Shared actions: one filled button, one quiet text link
   ========================================================================== */

.b-cat-landing__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.b-cat-landing__actions--center {
  justify-content: center;
}

.b-cat-landing__btn {
  align-items: center;
  background: var(--cl-teal-dark);
  border: 1px solid var(--cl-teal-dark);
  border-radius: 50px;
  color: #fff;
  display: inline-flex;
  font-weight: 500;
  justify-content: center;
  min-height: 50px;
  padding: 8px 32px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.b-cat-landing__btn:hover {
  background: var(--cl-teal-darker);
  border-color: var(--cl-teal-darker);
  color: #fff;
}

.b-cat-landing__btn--light {
  background: var(--cl-teal);
  border-color: var(--cl-teal);
  color: var(--cl-navy);
}

.b-cat-landing__btn--light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--cl-navy);
}

.b-cat-landing__btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.b-cat-landing__btn--outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--cl-navy);
}

.b-cat-landing__link {
  align-items: center;
  color: var(--cl-teal-dark);
  display: inline-flex;
  font-weight: 700;
  gap: 6px;
  text-decoration: none;
}

.b-cat-landing__link:hover {
  color: var(--cl-teal-darker);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.b-cat-landing__link:hover .b-cat-landing__arrow {
  transform: translateX(2px);
}

/* Hero
   ========================================================================== */

.b-cat-landing__hero {
  align-items: center;
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 8px 0 56px;
}

.b-cat-landing__hero--text-only {
  grid-template-columns: minmax(0, 1fr);
}

.b-cat-landing .breadcrumb.breadcrumbs.woo-breadcrumbs {
  margin-bottom: 20px;
  padding-bottom: 0;
}

.b-cat-landing .breadcrumb-trail {
  padding: 0;
}

.b-cat-landing .breadcrumb-trail,
.b-cat-landing .breadcrumb_last {
  color: var(--cl-muted);
}

/* The theme sets breadcrumb links to grey with !important; make them distinguishable from plain text */
.b-cat-landing .breadcrumb-trail a {
  color: var(--cl-navy) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(85, 102, 119, 0.45) !important;
  text-underline-offset: 3px;
}

.b-cat-landing .breadcrumb-trail a:hover {
  text-decoration-color: currentColor !important;
}

.b-cat-landing__title {
  margin: 0 0 16px;
}

.b-cat-landing__intro {
  color: var(--cl-muted);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 34em;
}

.b-cat-landing__highlights,
.b-cat-landing__facts {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 6px 20px;
}

.b-cat-landing__highlights {
  color: var(--cl-muted);
  margin-top: 28px !important;
}

.b-cat-landing__highlights li,
.b-cat-landing__facts li {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.b-cat-landing__highlights li::before,
.b-cat-landing__facts li::before {
  background: var(--cl-teal);
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}

.b-cat-landing__video {
  margin: 0;
}

.b-cat-landing__video-link,
.b-cat-landing__video-frame {
  aspect-ratio: 16 / 9;
  background: var(--cl-navy);
  border: 0;
  border-radius: var(--cl-radius);
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.b-cat-landing__video-link .b-cat-landing__video-poster {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform 0.4s ease;
  width: 100%;
}

.b-cat-landing__play {
  align-items: center;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: var(--cl-navy);
  display: flex;
  height: 68px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, background-color 0.2s ease;
  width: 68px;
}

.b-cat-landing__video-link:hover .b-cat-landing__play,
.b-cat-landing__video-link:focus-visible .b-cat-landing__play {
  background: var(--cl-teal);
  transform: translate(-50%, -50%) scale(1.05);
}

.b-cat-landing__video-link:hover .b-cat-landing__video-poster {
  transform: scale(1.02);
}

.b-cat-landing__video-caption {
  color: var(--cl-muted);
  font-size: 14px;
  margin-top: 12px;
}

/* Most popular
   ========================================================================== */

.b-cat-landing__spotlight {
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  box-shadow: 0 10px 30px rgba(32, 36, 63, 0.06);
  /* Sits over the top of the white section below, so that section starts right under it */
  margin-bottom: -48px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.b-cat-landing__spotlight-main {
  align-items: center;
  display: grid;
  gap: 48px;
  grid-template-columns: 200px minmax(0, 1fr);
  padding: 32px 48px 32px 40px;
}

.b-cat-landing__spotlight-media {
  display: block;
  height: 220px;
}

.b-cat-landing__spotlight-media picture,
.b-cat-landing__spotlight-media img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.b-cat-landing__eyebrow {
  color: var(--cl-teal-darker);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.b-cat-landing__spotlight-title {
  margin: 0 0 10px;
}

.b-cat-landing__spotlight-title a {
  color: inherit;
  text-decoration: none;
}

.b-cat-landing__spotlight-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.b-cat-landing__spotlight-text {
  color: var(--cl-muted);
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 40em;
}

.b-cat-landing__facts {
  color: var(--cl-navy);
  font-weight: 500;
  margin-bottom: 24px !important;
}

.b-cat-landing__spotlight-more {
  align-items: center;
  border-top: 1px solid var(--cl-line);
  color: var(--cl-teal-dark);
  display: flex;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  padding: 14px 24px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.b-cat-landing__spotlight-more:hover {
  background: var(--cl-soft);
  color: var(--cl-teal-darker);
}

.b-cat-landing__spotlight-more:hover .b-cat-landing__arrow {
  transform: translateY(2px);
}

.b-cat-landing .b-cat-landing__spotlight-more:focus-visible {
  outline-offset: -4px;
}

/* Sections
   ========================================================================== */

.b-cat-landing__section {
  padding: 88px 0;
}

.b-cat-landing__section--white {
  background: #fff;
  /* Full-bleed white band inside the page container */
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}

/* Extra room when the "most popular" card overlaps the top of this band */
.b-cat-landing__spotlight + .b-cat-landing__section--white {
  padding-top: 136px;
}

.b-cat-landing__section-head {
  margin: 0 auto 48px;
  max-width: 640px;
  text-align: center;
}

.b-cat-landing__section-head .pretitle {
  color: var(--cl-teal-darker);
  margin-bottom: 14px;
}

.b-cat-landing__heading {
  margin: 0;
}

.b-cat-landing__section-intro {
  color: var(--cl-muted);
  line-height: 1.6;
  margin: 12px 0 0;
}

/* Help me choose */

.b-cat-landing__grid {
  --cl-cols: 3;
  --cl-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl-gap);
  justify-content: center;
}

.b-cat-landing__grid > li {
  flex: 0 0 calc((100% - (var(--cl-cols) - 1) * var(--cl-gap)) / var(--cl-cols));
  min-width: 0;
}

.b-cat-landing__needs {
  margin: 0 auto !important;
  max-width: 1080px;
}

.b-cat-landing__need {
  align-items: center;
  border-top: 1px solid var(--cl-line);
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  padding: 36px 0;
}

.b-cat-landing__need:last-child {
  border-bottom: 1px solid var(--cl-line);
}

.b-cat-landing__need-title {
  margin: 0 0 8px;
}

.b-cat-landing__need-text {
  color: var(--cl-muted);
  line-height: 1.6;
  margin: 0;
}

.b-cat-landing__need-intro .b-cat-landing__link {
  margin-top: 12px;
}

.b-cat-landing__need-products {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.b-cat-landing__need-product {
  color: var(--cl-navy);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
}

.b-cat-landing__need-thumb {
  background: var(--cl-soft);
  border-radius: 14px;
  display: block;
  height: 168px;
  padding: 16px;
  position: relative;
  transition: background-color 0.2s ease;
}

.b-cat-landing__need-thumb picture,
.b-cat-landing__need-thumb img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* Blend white photo backgrounds into the tile */
.b-cat-landing__need-thumb img {
  mix-blend-mode: multiply;
}

.b-cat-landing__need-thumb .b-cat-landing-card__popular {
  left: 10px;
  top: 10px;
}

.b-cat-landing__need-product:hover .b-cat-landing__need-thumb {
  background: #eef0f2;
}

.b-cat-landing__need-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.b-cat-landing__need-product:hover .b-cat-landing__need-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Named specialist under "Help me choose" */
.b-cat-landing__specialist {
  align-items: center;
  background: var(--cl-soft);
  border-radius: var(--cl-radius);
  display: flex;
  gap: 28px;
  margin: 48px auto 0;
  max-width: 1080px;
  padding: 28px 32px;
}

.b-cat-landing__specialist-photo {
  border-radius: 50%;
  flex-shrink: 0;
  height: 112px;
  object-fit: cover;
  object-position: top;
  width: 112px;
}

.b-cat-landing__specialist-title {
  color: var(--cl-navy);
  font-size: 1.17em;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px;
}

.b-cat-landing__specialist-text {
  color: var(--cl-muted);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 44em;
}

.b-cat-landing__not-sure {
  color: var(--cl-muted);
  margin: 40px 0 0;
  text-align: center;
}

.b-cat-landing__not-sure a {
  color: var(--cl-teal-dark);
  font-weight: 700;
}

/* All products */

.b-cat-landing__grid {
  --cl-gap: 30px;
}

.b-cat-landing__grid-item {
  display: flex;
}

.b-cat-landing-card {
  background: #fff;
  border-radius: var(--cl-radius);
  box-shadow: 0 4px 8px -2px rgba(10, 13, 18, 0.08), 0 2px 4px -2px rgba(10, 13, 18, 0.04);
  color: var(--cl-navy);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.b-cat-landing-card:hover {
  box-shadow: 0 16px 32px -8px rgba(10, 13, 18, 0.16);
  color: var(--cl-navy);
  transform: translateY(-2px);
}

.b-cat-landing-card__media {
  display: block;
  height: 280px;
  padding: 28px 28px 0;
  position: relative;
}

.b-cat-landing-card__media picture,
.b-cat-landing-card__media img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.b-cat-landing-card__popular {
  background: var(--cl-navy);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  left: 16px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  position: absolute;
  top: 16px;
  white-space: nowrap;
}

.b-cat-landing-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 28px 28px;
}

.b-cat-landing-card__label {
  color: var(--cl-teal-darker);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.b-cat-landing-card__title {
  font-size: 1.17em;
  font-weight: 700;
  line-height: 1.3;
}

.b-cat-landing-card__summary {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--cl-muted);
  display: -webkit-box;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 8px;
  overflow: hidden;
}

.b-cat-landing-card__meta {
  color: var(--cl-navy);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 2px;
  margin-top: 12px;
}

.b-cat-landing-card__price {
  font-weight: 700;
}

.b-cat-landing-card__go {
  align-items: center;
  color: var(--cl-teal-dark);
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
}

.b-cat-landing-card:hover .b-cat-landing__arrow {
  transform: translateX(2px);
}

/* Help */

.b-cat-landing__help {
  background: var(--cl-navy);
  border-radius: 24px;
  color: #fff;
  margin: 0 auto 88px;
  max-width: 1080px;
  padding: 64px 56px 56px;
  text-align: center;
}

.b-cat-landing__steps {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 40px 0 44px !important;
  text-align: left;
}

.b-cat-landing__step-number {
  align-items: center;
  border: 1.5px solid var(--cl-teal);
  border-radius: 50%;
  color: var(--cl-teal);
  display: flex;
  font-size: 15px;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  margin-bottom: 16px;
  width: 36px;
}

.b-cat-landing .b-cat-landing__step-title {
  color: #fff;
  margin: 0 0 8px;
}

.b-cat-landing__steps p {
  color: #d1d7df;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.b-cat-landing .b-cat-landing__help-title {
  color: #fff;
  margin: 0 0 12px;
}


.b-cat-landing__help-phone {
  color: #d1d7df;
  font-size: 15px;
  margin: 20px 0 0;
}

.b-cat-landing__help-phone a {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.b-cat-landing__help-phone a + a {
  margin-left: 12px;
}

/* Floating "View all" shortcut, shown while "Help me choose" is on screen */
.b-cat-landing__float {
  align-items: center;
  background: var(--cl-navy);
  border-radius: 999px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 10px 28px rgba(32, 36, 63, 0.28);
  color: #fff;
  display: inline-flex;
  font-weight: 600;
  gap: 10px;
  left: 50%;
  min-height: 48px;
  opacity: 0;
  padding: 10px 22px 10px 24px;
  pointer-events: none;
  position: fixed;
  text-decoration: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background-color 0.2s ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 90;
}

.b-cat-landing__float.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s, background-color 0.2s ease;
  visibility: visible;
}

.b-cat-landing__float:hover,
.b-cat-landing__float:focus-visible {
  background: #2f3558;
  color: #fff;
}

.b-cat-landing__float .b-cat-landing__arrow {
  color: var(--cl-teal);
}

.b-cat-landing__float:hover .b-cat-landing__arrow {
  transform: translateY(2px);
}

.b-cat-landing a.b-cat-landing__float:focus-visible {
  outline-color: #fff;
  outline-offset: -5px;
}

/* Existing description accordion, darkened for contrast on the grey page */
.b-cat-landing .p-archive-store__accordion-summary,
.b-cat-landing .p-archive-store__accordion-summary span {
  color: var(--cl-teal-darker);
}

/* Responsive
   ========================================================================== */

@media only screen and (max-width: 67.5rem) {
  .b-cat-landing__hero {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
  }

  .b-cat-landing__video {
    max-width: 640px;
  }

  .b-cat-landing__need {
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
  }

  .b-cat-landing__steps {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 520px;
  }

  .b-cat-landing__grid {
    --cl-cols: 2;
  }

  .b-cat-landing__spotlight-main {
    gap: 32px;
    grid-template-columns: 160px minmax(0, 1fr);
    padding: 28px 32px;
  }
}

@media only screen and (max-width: 47.5rem) {
  .b-cat-landing__gallery-slide {
    padding: 16px;
  }

  .b-cat-landing [id] {
    scroll-margin-top: 90px;
  }

  .b-cat-landing__hero {
    gap: 32px;
    padding-bottom: 40px;
  }

  .b-cat-landing__intro {
    margin-bottom: 24px;
  }

  .b-cat-landing__actions {
    gap: 16px 24px;
  }

  .b-cat-landing__highlights {
    margin-top: 20px !important;
  }

  .b-cat-landing__spotlight {
    margin-bottom: -32px;
  }

  .b-cat-landing__spotlight-main {
    gap: 0 16px;
    grid-template-areas:
      "media eyebrow"
      "media title"
      "text text"
      "facts facts"
      "actions actions";
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    padding: 24px 20px;
  }

  .b-cat-landing__spotlight-body {
    display: contents;
  }

  .b-cat-landing__spotlight-media {
    grid-area: media;
    height: 104px;
    margin-bottom: 16px;
  }

  .b-cat-landing__eyebrow {
    align-self: end;
    grid-area: eyebrow;
    margin-bottom: 4px;
  }

  .b-cat-landing__spotlight-title {
    align-self: start;
    font-size: 1.25em;
    grid-area: title;
  }

  .b-cat-landing__spotlight-text {
    grid-area: text;
  }

  .b-cat-landing__facts {
    grid-area: facts;
  }

  .b-cat-landing__spotlight-body .b-cat-landing__actions {
    grid-area: actions;
  }

  .b-cat-landing__spotlight-body .b-cat-landing__btn {
    flex-grow: 1;
  }

  .b-cat-landing__section {
    padding: 64px 0;
  }

  .b-cat-landing__spotlight + .b-cat-landing__section--white {
    padding-top: 88px;
  }

  .b-cat-landing__section-head {
    margin-bottom: 32px;
  }

  .b-cat-landing__need {
    gap: 16px;
    padding: 28px 0;
  }

  .b-cat-landing__need-products {
    gap: 10px;
  }

  .b-cat-landing__specialist {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    margin-top: 36px;
    padding: 24px 20px;
  }

  .b-cat-landing__specialist-photo {
    height: 88px;
    width: 88px;
  }

  .b-cat-landing__need-thumb {
    border-radius: 12px;
    height: 112px;
    padding: 10px;
  }

  .b-cat-landing__need-thumb .b-cat-landing-card__popular {
    font-size: 10px;
    left: 5px;
    padding: 3px 7px;
    top: 5px;
  }

  .b-cat-landing__need-name {
    font-size: 14px;
  }

  /* A single recommendation reads better as a full-width row */
  .b-cat-landing__need-products li:only-child {
    grid-column: 1 / -1;
  }

  .b-cat-landing__need-products li:only-child .b-cat-landing__need-product {
    align-items: center;
    flex-direction: row;
    gap: 16px;
  }

  .b-cat-landing__need-products li:only-child .b-cat-landing__need-thumb {
    flex-shrink: 0;
    width: 132px;
  }

  .b-cat-landing__need-products li:only-child .b-cat-landing__need-name {
    font-size: 16px;
  }

  .b-cat-landing__help {
    border-radius: 20px;
    margin-bottom: 64px;
    padding: 44px 24px 36px;
  }

  .b-cat-landing__steps {
    margin: 32px 0 36px !important;
  }

  .b-cat-landing__help .b-cat-landing__btn {
    width: 100%;
  }
}

@media only screen and (max-width: 37.5rem) {
  .b-cat-landing__grid {
    --cl-cols: 1;
    --cl-gap: 16px;
  }

  .b-cat-landing-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .b-cat-landing-card__media {
    align-self: center;
    height: 130px;
    padding: 12px 0 12px 14px;
  }

  .b-cat-landing-card__popular {
    font-size: 10px;
    left: 6px;
    padding: 3px 7px;
    top: 6px;
  }

  .b-cat-landing-card__body {
    padding: 18px 18px 18px 14px;
  }

  .b-cat-landing-card__label {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .b-cat-landing-card__summary {
    display: none;
  }

  .b-cat-landing-card__meta {
    margin-top: 6px;
  }

  .b-cat-landing-card__go {
    padding-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-cat-landing__float {
    transform: translate(-50%, 0);
  }

  .b-cat-landing__gallery-track {
    scroll-behavior: auto;
  }

  .b-cat-landing *,
  .b-cat-landing *::before,
  .b-cat-landing *::after {
    transition: none !important;
  }

  .b-cat-landing-card:hover {
    transform: none;
  }
}