/* =========================================================
   HIGH HEADBOARD BEDS — PAGE-SPECIFIC STYLESHEET
   ---------------------------------------------------------
   Only contains styles for high-headboard-beds.html. Relies
   on style.css (loaded first) for design tokens and shared
   components (.btn, .product-card, .grid--products,
   .bb-toolbar__view-btn) — nothing there is duplicated here.
   ========================================================= */

/* ---- Hero ---- */
.hh-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 48vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-forest-dark);
}

.hh-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hh-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 40, 31, 0.52) 0%, rgba(18, 40, 31, 0.4) 45%, rgba(18, 40, 31, 0.6) 100%);
  z-index: 1;
}

.hh-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 3.5rem;
}

.hh-hero__content {
  max-width: 34rem;
  color: var(--color-ivory-soft);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hh-hero__heading {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1.05;
  color: var(--color-ivory-soft);
}

@media (min-width: 768px) {
  .hh-hero__heading {
    font-size: 3.5rem;
  }
}

.hh-hero__body {
  margin-top: 1rem;
  max-width: 30rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(248, 244, 235, 0.9);
}

.hh-hero__content .btn {
  margin-top: 1.75rem;
}

/* ---- Breadcrumb ---- */
.hh-breadcrumb,
.hh-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1.1rem;
  font-size: 0.8rem;
  color: rgba(35, 35, 32, 0.55);
}

.hh-breadcrumb a,
.hh-detail__breadcrumb a {
  color: var(--color-forest);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hh-breadcrumb a:hover,
.hh-detail__breadcrumb a:hover {
  color: var(--color-brass);
}

/* ---- Introduction ---- */
.hh-intro {
  padding-block: 2.5rem;
}

.hh-intro__inner {
  max-width: 42rem;
  text-align: center;
  margin-inline: auto;
}

.hh-intro__inner h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-forest-dark);
}

.hh-intro__inner p {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(35, 35, 32, 0.72);
}

/* ---- Toolbar ---- */
.hh-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.hh-toolbar-row__count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(35, 35, 32, 0.6);
}

.hh-toolbar-row__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hh-view-toggle,
.hh-columns-toggle {
  display: none;
}

@media (min-width: 640px) {
  .hh-view-toggle,
  .hh-columns-toggle {
    display: flex;
  }
}

/* ---- Product grid: default 4/row desktop, switchable to 5/row,
   with list view — fully responsive at every breakpoint ---- */
.hh-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 480px) {
  .hh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .hh-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .hh-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hh-grid.hh-grid--cols-5 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .hh-grid.hh-grid--cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .hh-grid.hh-grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.hh-grid.is-list-view {
  grid-template-columns: 1fr;
}

.hh-grid.is-list-view .product-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.25rem;
}

@media (max-width: 639px) {
  .hh-grid.is-list-view .product-card {
    grid-template-columns: 120px 1fr;
  }
}

.hh-grid.is-list-view .product-card__image-wrap {
  aspect-ratio: 1 / 1;
}

.hh-product-card[hidden] {
  display: none;
}

.hh-product-card {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.hh-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.hh-product-card .product-card__image-wrap {
  overflow: hidden;
}

.hh-product-card .product-card__image-wrap img {
  transition: transform 0.5s var(--ease);
}

.hh-product-card:hover .product-card__image-wrap img {
  transform: scale(1.06);
}

.hh-product-card__cta {
  margin-top: 0.85rem;
  width: 100%;
  height: 42px;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- FAQ accordion ---- */
.hh-faq__inner {
  max-width: 42rem;
}

.hh-faq-list {
  margin-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.hh-faq-item {
  border-bottom: 1px solid var(--color-border);
}

.hh-faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 1.1rem;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-forest-dark);
  background: none;
  border: none;
  cursor: pointer;
}

.hh-faq-item__toggle svg {
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.2s ease;
}

.hh-faq-item__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.hh-faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}

.hh-faq-item.is-open .hh-faq-item__panel {
  grid-template-rows: 1fr;
}

.hh-faq-item__panel p {
  overflow: hidden;
  padding-bottom: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(35, 35, 32, 0.68);
}

/* ---- Detail view ---- */
.hh-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .hh-detail__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
  }
}

.hh-detail__main-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-sage);
}

.hh-detail__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

/* ---- Animated highlight on the main product image — the exact
   same image already loaded above simply gets a soft, pulsing
   glow ring around it; no separate/extra image is used. ---- */
.hh-detail__main-wrap--glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 0 rgba(164, 123, 76, 0.55);
  animation: hhGlowPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hhGlowPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(164, 123, 76, 0.45);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(164, 123, 76, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(164, 123, 76, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hh-detail__main-wrap--glow::after {
    animation: none;
  }
}

.hh-detail__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-forest-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.hh-detail__nav--prev {
  left: 0.75rem;
}

.hh-detail__nav--next {
  right: 0.75rem;
}

.hh-detail__thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.hh-detail__thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
}

.hh-detail__thumbs img.is-active {
  border-color: var(--color-brass);
}

.hh-detail__title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-forest-dark);
}

.hh-detail__rating {
  margin-top: 0.6rem;
}

.hh-detail__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.hh-detail__price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--color-forest-dark);
}

.hh-detail__description {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(35, 35, 32, 0.72);
}

.hh-detail__section-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(35, 35, 32, 0.55);
  margin-bottom: 0.6rem;
}

.hh-detail__option-block {
  margin-top: 1.5rem;
}

.hh-option-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hh-option-pill {
  height: 42px;
  padding-inline: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-forest-dark);
  background-color: var(--color-white);
  cursor: pointer;
}

.hh-option-pill[aria-pressed="true"] {
  background-color: var(--color-forest);
  border-color: var(--color-forest);
  color: var(--color-ivory-soft);
}

/* ---- Fabric Colour selector (new on this page — same shared
   component/markup already used on Blanket Boxes, Sofas, Bed Frames
   and Solid Base Ottoman, not a new design) ---- */
.bb-modal__fabric-collections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
}

.bb-modal__fabric-collection-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-forest-dark);
  margin-bottom: 0.75rem;
}

.bb-modal__fabric-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.bb-modal__fabric-grid .fabric-swatch__ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}

.bb-modal__fabric-grid .fabric-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  width: 68px;
}

.bb-modal__fabric-grid .fabric-swatch__name {
  font-size: 0.66rem;
  line-height: 1.25;
}

.bb-modal__fabric-grid .fabric-swatch__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.bb-modal__fabric-grid .fabric-swatch[aria-pressed="true"] .fabric-swatch__ring {
  border-color: var(--color-brass);
  box-shadow: 0 0 0 2px rgba(164, 123, 76, 0.2);
}

.bb-modal__fabric-grid .fabric-swatch__check {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background-color: rgba(18, 40, 31, 0.72);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.bb-modal__fabric-grid .fabric-swatch[aria-pressed="true"] .fabric-swatch__check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hh-detail__fabric-selected {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-forest);
}

.hh-detail__fabric-selected.is-empty {
  color: rgba(35, 35, 32, 0.5);
}

/* ---- New configuration option cards (Ottoman Storage, Footstool,
   Headboard customisation, Assembly, Delivery Delay) ---- */
.hh-option-heading {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-forest-dark);
  margin-bottom: 0.5rem;
}

.hh-option-image {
  display: block;
  width: 100%;
  max-width: 240px;
  border-radius: var(--radius-md);
  margin-bottom: 0.85rem;
  border: 1px solid var(--color-border);
}

.hh-option-sub {
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(35, 35, 32, 0.55);
}

.hh-option-message {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--color-clay);
  min-height: 1.2em;
}

.hh-custom-request {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-ink);
  background-color: var(--color-white);
  resize: vertical;
  min-height: 90px;
}

.hh-custom-request:focus {
  outline: none;
  border-color: var(--color-brass);
}

.hh-delay-date-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.hh-delay-date-wrap label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(35, 35, 32, 0.6);
}

.hh-delay-date-wrap input[type="date"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-ink);
  background-color: var(--color-white);
  max-width: 220px;
  box-sizing: border-box;
}

.so-image-placeholder.hh-option-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 240px;
  height: 160px;
  margin-bottom: 0.85rem;
  background-color: var(--color-ivory);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(35, 35, 32, 0.4);
}

.hh-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.hh-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(35, 35, 32, 0.75);
}

.hh-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--color-brass);
}

/* ---- Purchase panel ---- */
.hh-detail__purchase {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.hh-detail__qty {
  margin-bottom: 1rem;
}

.hh-detail__qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hh-detail__qty-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-forest-dark);
  background: none;
  border: none;
  cursor: pointer;
}

.hh-detail__qty-value {
  width: 44px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.hh-detail__purchase-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.hh-detail__add-basket,
.hh-detail__buy-now {
  flex: 1 1 auto;
  min-width: 140px;
}

.hh-detail__wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-forest-dark);
  background-color: var(--color-white);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.hh-detail__wishlist-btn:hover {
  border-color: var(--color-brass-light);
  background-color: var(--color-ivory-soft);
}

.hh-detail__wishlist-btn[aria-pressed="true"] {
  color: var(--color-clay);
  border-color: var(--color-clay);
}

.hh-detail__wishlist-btn[aria-pressed="true"] svg path {
  fill: currentColor;
}

.hh-detail__message {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--color-forest);
  min-height: 1.2em;
}

.hh-detail__message.is-error {
  color: var(--color-clay);
}

.hh-detail__delivery-info {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding-left: 0;
}

.hh-detail__delivery-info li {
  font-size: 0.8125rem;
  color: rgba(35, 35, 32, 0.7);
}

.hh-detail__related {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ---- Dimensions table ---- */
.hh-dimensions__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.hh-dimensions__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.hh-dimensions__table th,
.hh-dimensions__table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.hh-dimensions__table thead th {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(35, 35, 32, 0.55);
  background-color: var(--color-ivory-soft);
}

.hh-dimensions__table tbody tr:last-child td {
  border-bottom: none;
}

/* ---- Not found ---- */
.hh-not-found {
  padding-block: 6rem;
}

.hh-not-found__inner {
  max-width: 30rem;
  text-align: center;
  margin-inline: auto;
}

.hh-not-found__inner h1 {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--color-forest-dark);
}

.hh-not-found__inner p {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(35, 35, 32, 0.68);
}

.hh-not-found__inner .btn {
  margin-top: 2rem;
}

/* ---- Honest "no reviews yet" label for product card grids ---- */
.product-card__no-reviews {
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(35, 35, 32, 0.4);
}

/* ---- Bottom story/editorial section: centered, comfortable reading
   width, elegant paragraph rhythm (matching the TV Beds / Kids Beds
   editorial treatment) ---- */
.hh-info .bb-info__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.hh-info .bb-info__inner h2 {
  margin-bottom: 1.5rem;
}

.hh-info .bb-info__inner p {
  text-align: justify;
  line-height: 1.75;
  margin-top: 1.25rem;
}

.hh-info .bb-info__inner p:first-of-type {
  margin-top: 0;
}

@media (max-width: 639px) {
  .hh-info .bb-info__inner {
    padding-inline: 0.5rem;
  }
}


/* ---- Page navigation between High Headboard Beds Page 1 / Page 2 ---- */
.hh-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.hh-page-nav__current {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(35, 35, 32, 0.6);
}

/* ---- Gallery zoom button + fullscreen lightbox ---- */
.bb-modal__zoom {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-forest-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: none;
  cursor: pointer;
  z-index: 2;
}

.bb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-color: rgba(18, 40, 31, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.bb-lightbox[hidden] {
  display: none;
}

.bb-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.bb-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-ivory-soft);
  border: none;
  cursor: pointer;
}

.bb-lightbox__close:hover {
  background-color: rgba(255, 255, 255, 0.28);
}


/* ---- High Headboard only: view-toggle and columns-toggle buttons.
   Scoped so other pages sharing .bb-toolbar__view-btn are unaffected. ---- */
.hh-view-toggle,
.hh-columns-toggle {
  gap: 0.4rem;
}

.hh-view-toggle .bb-toolbar__view-btn:not(.is-active),
.hh-columns-toggle .bb-toolbar__view-btn:not(.is-active) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: 0.6rem;
  border: 1px solid #d8d2c4;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #23231f;
  background-color: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.hh-view-toggle .bb-toolbar__view-btn.is-active,
.hh-columns-toggle .bb-toolbar__view-btn.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: 0.6rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.hh-view-toggle .bb-toolbar__view-btn:hover,
.hh-columns-toggle .bb-toolbar__view-btn:hover {
  border-color: var(--color-brass);
}

/* ---- Mobile hero (768px and below ONLY — desktop is untouched) ----
   The photo now fills the whole hero edge to edge (cover), so there are
   no dark green bands above/below it. The slow zoom animation is off on
   phones (scaling the photo up made it look soft), the overlay is
   lighter so the photo reads clearly, and the hero height follows its
   content instead of a tall fixed minimum. Text stays readable through
   its existing text-shadow and the light overlay. */
@media (max-width: 768px) {
  .hh-hero {
    min-height: 0;
  }

  .hh-hero__image {
    object-fit: cover;
    object-position: center center;
    animation: none;
    transform: none;
    opacity: 1;
    filter: none;
  }

  .hh-hero__overlay {
    background: linear-gradient(180deg, rgba(18, 40, 31, 0.32) 0%, rgba(18, 40, 31, 0.2) 45%, rgba(18, 40, 31, 0.4) 100%);
  }
}