/* ==========================================================================
   WALKER — Home-B: core module overrides (featured/bestseller/latest/special, banner, blog, html) and the
   walker_categories / walker_image_text / walker_faq modules. Loaded by event/home_b.php after walker.css + home.css.
   Desktop --per-view values sit in min-width media queries (see the note at the top of home.css).

   Index
   B1 Product carousels .... .walker-products (__head __foot) — uses .walker-bleed from home.css; .hb-stack (vertical axis)
   B2 Brands box ........... .walker-brands (__box __title __carousel __item __link __img)
   B3 Image banner ......... .hb-banner (__carousel __slide __link __img __nav), .hb-dots
   B4 Blog ................. .walker-blog (__head __all __grid __list), .walker-post(--feature) (__link __img __overlay __date
                             __cal __title __excerpt __more)
   B5 Category tiles ....... .walker-cats (--N) (__carousel __head), .walker-cat (__media __img __info __text __name __count __arrow)
   B6 Service panel ........ .walker-service(--green|--light, --image-left|right) (__panel __head __title __subtitle __media
                             __img __body __text __button __features __feature __icon __note)
   B7 FAQ .................. .walker-faq (__grid __intro __title __button __list)
   B8 HTML ................. .walker-html (__title __body)
   ========================================================================== */


/* == B1 Product carousels ================================================== */
.walker-products__head {
  margin-bottom: 2.5rem;
}

.hb-products--stack {
  margin-bottom: 2.5rem;
}

.hb-stack__title {
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(var(--color-border));
  font-size: 1.5rem;
}

.hb-stack {
  display: grid;
  gap: 2rem;
}


/* == B2 Brands box ========================================================= */
.walker-brands__box {
  padding: 34px 50px 38px;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-panel);
  background: rgb(var(--color-bg));
}

.walker-brands__title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem);
  text-align: center;
}

.walker-brands__carousel {
  --per-view-md: 4;
  --per-view-sm: 2.5;
  --carousel-gap: 24px;
}

@media (min-width: 992px) {
  .walker-brands__carousel {
    --per-view: var(--brands-per-view, 6);
  }
}

.walker-brands__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.walker-brands__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  border-radius: var(--radius-card);
  transition: transform var(--duration-default) var(--ease);
}

.walker-brands__link:hover {
  transform: translateY(-3px);
}

.walker-brands__img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 96px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Dark mode: logos (white backgrounds) sit on light tiles */
[data-scheme="dark"] .walker-brands__link {
  padding: 8px 14px;
  background: rgb(var(--color-tile));
}

@media (max-width: 575.98px) {
  .walker-brands__box {
    padding: 28px 18px 24px;
  }

  .walker-brands__link {
    height: 84px;
  }

  .walker-brands__img {
    max-height: 72px;
  }
}


/* == B3 Image banner ======================================================= */
.hb-banner__carousel {
  --per-view-md: min(var(--hb-cols, 1), 2.2);
  --per-view-sm: 1.15;
  position: relative;
}

.hb-banner:not(.hb-banner--multi) .hb-banner__carousel {
  --per-view-md: 1;
  --per-view-sm: 1;
}

@media (min-width: 992px) {
  .hb-banner__carousel {
    --per-view: var(--hb-cols, 1);
  }
}

.hb-banner__slide {
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: rgb(var(--color-surface));
}

.hb-banner__link {
  display: block;
}

.hb-banner__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s var(--ease);
}

.hb-banner__link:hover .hb-banner__img {
  transform: scale(1.02);
}

.hb-banner__nav {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
}

.hb-banner__nav .walker-carousel__nav {
  background: rgba(17, 17, 17, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hb-banner__carousel.is-static .hb-banner__nav,
.hb-banner__carousel.is-static .hb-dots {
  display: none;
}

.hb-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.hb-dots__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  cursor: pointer;
  transition: width var(--duration-default), background-color var(--duration-default);
}

.hb-dots__dot.is-active {
  width: 24px;
  background: rgb(var(--color-gold));
}

.hb-dots__dot[hidden] {
  display: none;
}

@media (max-width: 575.98px) {
  .hb-banner__nav {
    display: none;
  }

  .hb-dots {
    bottom: 10px;
  }
}


/* == B4 Blog =============================================================== */
.walker-blog__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.walker-blog__grid > .walker-post--feature:only-child {
  grid-column: 1 / -1;
}

.walker-post {
  margin: 0;
}

.walker-post__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--color-text-muted));
  font-size: 16px;
  font-weight: 500;
}

.walker-post__cal {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.walker-post__title {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
}

.walker-post__title a {
  color: rgb(var(--color-text));
  text-decoration: none;
}

.walker-post__title a:hover {
  color: rgb(var(--color-gold));
}

.walker-post__excerpt {
  display: -webkit-box;
  margin: 10px 0 0;
  overflow: hidden;
  color: rgb(var(--color-text));
  font-size: 17px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.walker-post__more {
  display: inline-block;
  margin-top: 10px;
  color: rgb(var(--color-gold));
  font-weight: 600;
  text-decoration: none;
}

.walker-post__more:hover {
  color: rgb(var(--color-gold-dark));
}

/* Feature post: big image card, date + title over a dark wash */
.walker-post--feature .walker-post__link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: rgb(var(--color-surface));
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.walker-post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.walker-post--feature .walker-post__link:hover .walker-post__img {
  transform: scale(1.04);
}

.walker-post--feature .walker-post__link:focus-visible {
  outline: 2px solid rgb(var(--color-gold));
  outline-offset: 3px;
}

.walker-post__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 56px;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 35%, rgba(17, 17, 17, .78) 100%);
}

.walker-post--feature .walker-post__date {
  color: #fff;
}

.walker-post--feature .walker-post__title {
  color: #fff;
  font-size: clamp(1.4rem, 1.05rem + 1vw, 2rem);
  line-height: 1.25;
}

.walker-blog__list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 1.5rem;
}

@media (max-width: 991.98px) {
  .walker-blog__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .walker-blog__list {
    padding-top: 0;
  }

  .walker-post__overlay {
    padding: 26px 24px;
  }
}

@media (max-width: 575.98px) {
  .walker-post--feature .walker-post__link {
    aspect-ratio: 4 / 3.4;
    border-radius: 24px;
  }
}


/* == B5 Category tiles ===================================================== */
.walker-cats__carousel {
  --per-view-md: 2.2;
  --per-view-sm: 1.3;
}

@media (min-width: 992px) {
  .walker-cats__carousel { --per-view: 4; }
  .walker-cats--2 { --per-view: 2; }
  .walker-cats--3 { --per-view: 3; }
  .walker-cats--5 { --per-view: 5; }
  .walker-cats--6 { --per-view: 6; }
}

.walker-cat {
  display: block;
  color: rgb(var(--color-text));
  text-decoration: none;
}

.walker-cat__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: radial-gradient(circle at 50% 42%, #fbfaf7 0%, rgb(var(--color-tile)) 75%);
}

.walker-cat__img {
  width: 100%;
  height: 100%;
  padding: 14%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .6s var(--ease);
}

.walker-cat:hover .walker-cat__img {
  transform: scale(1.06);
}

.walker-cat:focus-visible {
  outline: none;
}

.walker-cat:focus-visible .walker-cat__media {
  outline: 2px solid rgb(var(--color-gold));
  outline-offset: 3px;
}

.walker-cat__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.walker-cat__name {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.15rem + .5vw, 1.65rem);
  line-height: 1.15;
}

.walker-cat__count {
  display: block;
  margin-top: 4px;
  color: rgb(var(--color-text-muted));
  font-size: 15px;
}

.walker-cat__arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--color-gold), .55);
  border-radius: 50%;
  color: rgb(var(--color-gold));
  transition: background-color var(--duration-default), color var(--duration-default);
}

.walker-cat__arrow .walker-icon {
  width: 20px;
  height: 20px;
}

.walker-cat:hover .walker-cat__arrow {
  background: rgb(var(--color-gold));
  color: rgb(17, 17, 17);
}


/* == B6 Service panel ====================================================== */
.walker-service__panel {
  position: relative;
  display: grid;
  grid-template-areas: "head media body";
  grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr);
  column-gap: 44px;
  min-height: 540px;
  padding: 70px 64px 0 72px;
  overflow: hidden;
  border-radius: var(--radius-panel-lg);
}

.walker-service--image-left .walker-service__panel {
  grid-template-areas: "media head body";
  grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr);
}

.walker-service--light .walker-service__panel {
  background: rgb(var(--color-surface));
}

.walker-service__panel--noimage {
  grid-template-areas: "head body";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.walker-service__head {
  grid-area: head;
  padding-bottom: 70px;
}

.walker-service__title {
  margin: 0;
  color: inherit;
  font-size: clamp(2.4rem, 1.5rem + 2.3vw, 3.4rem);
  line-height: 1.08;
}

.walker-service__subtitle {
  margin: 2.25rem 0 0;
  color: rgb(var(--color-gold));
  font-size: clamp(1.35rem, 1.05rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
}

/* Image column sits on the bottom edge of the panel */
.walker-service__media {
  display: flex;
  grid-area: media;
  align-items: flex-end;
  align-self: end;
  justify-content: center;
  height: 100%;
  min-height: 420px;
}

.walker-service__media--contain {
  height: auto;
  justify-self: center;
  width: min(100%, 360px);
  min-height: 0;
  aspect-ratio: 4 / 4.6;
  padding: 18% 12% 6%;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: radial-gradient(circle at 50% 40%, #fdfcf9 0%, #ebe8df 65%, #dcd8cc 100%);
}

.walker-service__media--cover {
  overflow: hidden;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

.walker-service__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.walker-service__media--contain .walker-service__img {
  mix-blend-mode: multiply;
}

.walker-service__media--cover .walker-service__img {
  object-fit: cover;
}

.walker-service__body {
  grid-area: body;
  align-self: center;
  padding-bottom: 64px;
  font-size: 17px;
}

.walker-service__text p {
  margin: 0 0 1.25rem;
}

.walker-service__button {
  margin-top: .25rem;
}

.walker-service__features {
  display: flex;
  gap: 8px;
  margin: 2.25rem 0 0;
  padding: 18px 22px;
  border-radius: var(--radius-panel);
  background: rgba(0, 0, 0, .2);
  list-style: none;
}

.walker-service--light .walker-service__features {
  background: rgb(var(--color-bg));
}

.walker-service__feature {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.walker-service__icon {
  flex: none;
  width: 40px;
  height: 40px;
}

.walker-service__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgb(var(--color-gold));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.walker-service__note {
  margin: 1.25rem 0 0;
  color: rgb(var(--color-text-muted));
  font-size: 15px;
}

@media (max-width: 1199.98px) {
  .walker-service__panel,
  .walker-service--image-left .walker-service__panel {
    grid-template-areas: "head body" "media body";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    padding: 56px 48px 0;
  }

  .walker-service__head {
    padding-bottom: 2rem;
  }

  .walker-service__media {
    min-height: 0;
  }

  .walker-service__media--contain {
    width: min(100%, 340px);
    justify-self: center;
  }

  .walker-service__features {
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 767.98px) {
  .walker-service__panel,
  .walker-service--image-left .walker-service__panel,
  .walker-service__panel--noimage {
    grid-template-areas: "head" "body" "media";
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 44px 24px 0;
    border-radius: var(--radius-panel);
  }

  .walker-service__subtitle {
    margin-top: 1.25rem;
  }

  .walker-service__body {
    padding-bottom: 2.5rem;
  }

  .walker-service__media--contain {
    width: min(78%, 300px);
  }

  .walker-service__media--cover {
    height: 280px;
  }
}


/* == B7 FAQ ================================================================ */
.walker-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 4rem;
  align-items: start;
}

.walker-faq__intro {
  position: sticky;
  top: calc(var(--header-space) + 2rem);
}

.walker-faq__title {
  margin-top: .25rem;
}

.walker-faq__button {
  margin-top: 2rem;
}

@media (max-width: 991.98px) {
  .walker-faq__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .walker-faq__intro {
    position: static;
  }

  .walker-faq__button {
    margin-top: 1.25rem;
  }
}


/* == B8 HTML =============================================================== */
.walker-html__title {
  margin-bottom: 1.5rem;
}