/* HeyBro — per-page tweaks for ordinary Elementor pages (enqueued by heybro-pages.php). */

/* What we make (2476) and Shop by Product (2478): hero legibility, same treatment as News.
   The photo stays a clear Elementor image; a navy fade on the left carries the copy.
   The fade sits on the section itself (::before, inset 0) so it runs to the very edge —
   the overlay container is inset by the section's 10px padding. z-index 1 keeps it over
   the absolute photo; the overlay (also z-index 1, later in the DOM) stays above it. */
body.page-id-2476 .e-con.hb-hero-page::before,
body.page-id-2478 .e-con.hb-hero-page::before,
body.page-id-2637 .e-con.hb-hero-page::before,
body.page-id-2144 .e-con.hb-hero-page::before,
body.page-id-2143 .e-con.hb-hero-page::before,
body.page-id-2506 .e-con.hb-hero-page::before,
body.page-id-2504 .e-con.hb-hero-page::before,
body.page-id-2743 .e-con.hb-hero-page::before,
body.page-id-2756 .e-con.hb-hero-page::before,
body.page-id-2758 .e-con.hb-hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(4,32,46,.62) 0%, rgba(4,32,46,.5) 30%, rgba(4,32,46,.3) 46%, rgba(4,32,46,0) 60%);
}
/* Shop by Product and Build your own box: the heading and lede cross white bottles and mugs,
   so the middle of the fade holds a little firmer there. It still clears by 60%. */
body.page-id-2478 .e-con.hb-hero-page::before,
body.page-id-2637 .e-con.hb-hero-page::before,
body.page-id-2144 .e-con.hb-hero-page::before,
body.page-id-2506 .e-con.hb-hero-page::before {
  background-image: linear-gradient(90deg, rgba(4,32,46,.64) 0%, rgba(4,32,46,.56) 30%, rgba(4,32,46,.4) 46%, rgba(4,32,46,0) 60%);
}
/* About Us and Team Collections: the heading and intro run to ~48% of the width, over a bright
   laptop screen (About) or a white bottle and mug (Team Collections), so the fade holds further
   across. It clears by 64%, leaving the right of each photo untouched. */
body.page-id-2143 .e-con.hb-hero-page::before,
body.page-id-2504 .e-con.hb-hero-page::before,
body.page-id-2743 .e-con.hb-hero-page::before,
body.page-id-2756 .e-con.hb-hero-page::before,
body.page-id-2758 .e-con.hb-hero-page::before {
  background-image: linear-gradient(90deg, rgba(4,32,46,.66) 0%, rgba(4,32,46,.58) 30%, rgba(4,32,46,.46) 48%, rgba(4,32,46,0) 64%);
}
body.page-id-2476 .e-con.hb-hero-overlay-page,
body.page-id-2478 .e-con.hb-hero-overlay-page,
body.page-id-2637 .e-con.hb-hero-overlay-page,
body.page-id-2144 .e-con.hb-hero-overlay-page,
body.page-id-2143 .e-con.hb-hero-overlay-page,
body.page-id-2506 .e-con.hb-hero-overlay-page,
body.page-id-2504 .e-con.hb-hero-overlay-page,
body.page-id-2743 .e-con.hb-hero-overlay-page,
body.page-id-2756 .e-con.hb-hero-overlay-page,
body.page-id-2758 .e-con.hb-hero-overlay-page {
  background-image: none;
}

body.page-id-2476 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2476 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2478 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2478 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2637 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2637 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2144 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2144 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2143 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2143 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2506 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2506 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2504 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2504 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2743 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2743 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2756 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2756 .hb-hero-overlay-page .hb-h1-page,
body.page-id-2758 .hb-hero-overlay-page .hb-eyebrow-left,
body.page-id-2758 .hb-hero-overlay-page .hb-h1-page {
  text-shadow: 0 1px 2px rgba(4,32,46,.55), 0 2px 14px rgba(4,32,46,.5);
}
body.page-id-2476 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2478 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2637 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2144 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2143 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2506 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2504 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2743 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2756 .hb-hero-overlay-page .hb-hero-lead-page,
body.page-id-2758 .hb-hero-overlay-page .hb-hero-lead-page {
  text-shadow: 0 1px 3px rgba(4,32,46,.75), 0 0 16px rgba(4,32,46,.6);
}

/* "What we do." — About's text + photo split. The statement follows the red rule directly,
   so give it the 24px the lead paragraph gets on About. On desktop the photo is pinned to the
   right edge of the content, the text takes the rest of the width, and the columns are
   bottom-aligned so the photo ends level with the last line of the body. */
body.page-id-2476 .elementor-element-49af8db .hb-col-text .hb-statement {
  margin-top: 24px;
}
@media (min-width: 1025px) {
  body.page-id-2476 .elementor-element-49af8db .e-con.hb-split {
    column-gap: 80px;
    align-items: flex-end;
    flex-wrap: nowrap;
  }
  body.page-id-2476 .elementor-element-49af8db .e-con.hb-col-text {
    flex: 1 1 auto;
    max-width: none;
  }
  body.page-id-2476 .elementor-element-49af8db .e-con.hb-media-col {
    flex: 0 0 560px;
  }
}

/* Explore the range is a copy of the home tiles row; its carousel styles and arrows come from
   heybro-home.css/js, which heybro-home.php also loads on this page. The description under the
   heading is the home "What we make" text, kept to the same readable line length. */
body.page-id-2476 .elementor-element-f0bde68 .hb-body-para {
  max-width: 640px;
}

/* "Don't see it?" steps: a photo box above each number. Reuses hb-card-media / hb-card-img
   (the tile classes) but as a frameless 4:3 crop. */
body.page-id-2476 .elementor-element-1c88f14 .e-con.hb-card-media {
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  height: auto;
  padding: 0;
  border: 0;
  overflow: hidden;
  margin-bottom: 18px;
}
body.page-id-2476 .elementor-element-1c88f14 .hb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The intro (heading, text) sits on top, the steps run full width underneath so the photos
   can be bigger, and the button (moved out of the intro in Elementor) closes the section.
   The split already wraps; each child just takes a full row. */
body.page-id-2476 .elementor-element-85bdb3e > .e-con.hb-btn-row {
  flex: 1 1 100%;
  margin-top: 8px;
}
@media (min-width: 768px) {
  body.page-id-2476 .elementor-element-85bdb3e .e-con.hb-col-narrow {
    flex: 1 1 100%;
    max-width: 640px;
  }
  body.page-id-2476 .elementor-element-85bdb3e .e-con.hb-steps-grid {
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }
}
@media (min-width: 1025px) {
  body.page-id-2476 .elementor-element-85bdb3e .e-con.hb-steps-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Shop by Product: the intro above the tiles keeps a readable line length, as on the home page. */
body.page-id-2478 .hb-head-group .hb-body-para {
  max-width: 640px;
}

/* Build your own box (2637), plus the copies of that section at the bottom of Home (c7a8e83)
   and Shop by Product (13b8aae): "One box, made for them." uses the What we make steps layout —
   intro on top, four photo steps full width below, button last. Class-based: it is the only
   steps section on the page. */
body.page-id-2637 .hb-steps-grid .e-con.hb-card-media,
.elementor-element-c7a8e83 .hb-steps-grid .e-con.hb-card-media,
.elementor-element-13b8aae .hb-steps-grid .e-con.hb-card-media {
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  height: auto;
  padding: 0;
  border: 0;
  overflow: hidden;
  margin-bottom: 18px;
}
body.page-id-2637 .hb-steps-grid .hb-card-media img,
.elementor-element-c7a8e83 .hb-steps-grid .hb-card-media img,
.elementor-element-13b8aae .hb-steps-grid .hb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-id-2637 .e-con.hb-split-top > .e-con.hb-btn-row,
.elementor-element-c7a8e83 .e-con.hb-split-top > .e-con.hb-btn-row,
.elementor-element-13b8aae .e-con.hb-split-top > .e-con.hb-btn-row {
  flex: 1 1 100%;
  margin-top: 8px;
}
@media (min-width: 768px) {
  body.page-id-2637 .e-con.hb-split-top > .e-con.hb-col-narrow,
  .elementor-element-c7a8e83 .e-con.hb-split-top > .e-con.hb-col-narrow,
  .elementor-element-13b8aae .e-con.hb-split-top > .e-con.hb-col-narrow {
    flex: 1 1 100%;
    max-width: 640px;
  }
  body.page-id-2637 .e-con.hb-split-top > .e-con.hb-steps-grid,
  .elementor-element-c7a8e83 .e-con.hb-split-top > .e-con.hb-steps-grid,
  .elementor-element-13b8aae .e-con.hb-split-top > .e-con.hb-steps-grid {
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }
}
@media (min-width: 1025px) {
  body.page-id-2637 .e-con.hb-split-top > .e-con.hb-steps-grid,
  .elementor-element-c7a8e83 .e-con.hb-split-top > .e-con.hb-steps-grid,
  .elementor-element-13b8aae .e-con.hb-split-top > .e-con.hb-steps-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Home — "Trusted by" (88faf26): full-width navy band between the MVP gallery and One box,
   with past bulk-order clients as logos on white tiles (several logos are black or dark grey,
   so they need a light ground). Border Collie Rescue's logo is white-on-transparent, made for
   dark backgrounds, so on its white tile it is shown dark via a filter; the file is untouched. */
.elementor-element-88faf26 .hb-h2 { color: #fff; }
.elementor-element-88faf26 .hb-body-para { color: #B7CBD8; max-width: 640px; }
.elementor-element-88faf26 .hb-head-group .hb-btn-row { padding-inline: 0; }

.elementor-element-5a4f42a.e-con {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
  padding: 0;
}

.elementor-element-5a4f42a > .e-con {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 18px 20px;
  background: #fff;
}

.elementor-element-5a4f42a img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
}

.elementor-element-1bdb4dd img { filter: brightness(0); opacity: .82; }

@media (max-width: 1024px) {
  .elementor-element-5a4f42a.e-con { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .elementor-element-5a4f42a.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .elementor-element-5a4f42a > .e-con { height: 96px; padding: 14px 16px; }
  .elementor-element-5a4f42a img { max-height: 56px; }
}

/* Home — "Our work." (77d3c36): replaced the Who's your MVP? placeholder gallery with real client
   work. Photos were cropped to one 4:5 size before upload, so the Elementor Basic Gallery (894e440,
   lightbox on click) lays out as an even grid. */
.elementor-element-bb7390f.e-con,
.elementor-element-6522f6c.e-con { max-width: 640px; padding-inline: 0; }
.elementor-element-bb7390f .hb-body-dark,
.elementor-element-6522f6c .hb-body-dark { margin-top: 18px; }
.elementor-element-bb7390f .elementor-widget-e-button,
.elementor-element-bb7390f a.e-button-base,
.elementor-element-6522f6c .elementor-widget-e-button,
.elementor-element-6522f6c a.e-button-base { margin-top: 26px; }

.elementor-element-894e440 { margin-top: 40px; }
.elementor-element-894e440 .gallery-item,
.elementor-element-25c6f26 .gallery-item { margin-bottom: 0; }
.elementor-element-894e440 .gallery-icon a,
.elementor-element-25c6f26 .gallery-icon a { display: block; overflow: hidden; }
.elementor-element-894e440 .gallery-item img,
.elementor-element-25c6f26 .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 0 !important;
  transition: transform .35s ease;
}
.elementor-element-894e440 .gallery-icon a:hover img,
.elementor-element-894e440 .gallery-icon a:focus-visible img,
.elementor-element-25c6f26 .gallery-icon a:hover img,
.elementor-element-25c6f26 .gallery-icon a:focus-visible img { transform: scale(1.04); }
/* FAQs (2756): six groups of Elementor Toggle widgets (FAQ schema on). The theme styles the
   toggle titles as large headings, so they are reset to readable question rows here. */
body.page-id-2756 .elementor-element-2cf94f9.e-con {
  max-width: 860px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
body.page-id-2756 .elementor-element-2cf94f9 > .e-con { padding: 0; }
body.page-id-2756 .elementor-element-2cf94f9 h2.hb-card-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
  color: #05334A;
}
body.page-id-2756 .elementor-toggle .elementor-toggle-item { margin: 0; border: 0; }
body.page-id-2756 .elementor-toggle .elementor-tab-title {
  position: relative;
  margin: 0;
  padding: 18px 44px 18px 0;
  border: 0;
  border-bottom: 1px solid #D8DEE3;
  background: transparent;
  font-family: Poppins, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: #1B2A34;
  cursor: pointer;
}
body.page-id-2756 .elementor-toggle .elementor-tab-title a.elementor-toggle-title,
body.page-id-2756 .elementor-toggle .elementor-tab-title a {
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  text-decoration: none;
}
body.page-id-2756 .elementor-toggle .elementor-tab-title:hover,
body.page-id-2756 .elementor-toggle .elementor-tab-title.elementor-active { color: #B40023; }
/* Replace the caret icons with a red plus / minus on the right. */
body.page-id-2756 .elementor-toggle .elementor-toggle-icon { display: none; }
body.page-id-2756 .elementor-toggle .elementor-tab-title::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: Poppins, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #B40023;
}
body.page-id-2756 .elementor-toggle .elementor-tab-title.elementor-active::after { content: "\2212"; }
body.page-id-2756 .elementor-toggle .elementor-tab-content {
  padding: 14px 44px 22px 0;
  border: 0;
  border-bottom: 1px solid #D8DEE3;
  font-family: Poppins, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: #55646E;
}
body.page-id-2756 .elementor-toggle .elementor-tab-content p { margin: 0; }
body.page-id-2756 .elementor-toggle .elementor-tab-content a { color: #B40023; text-decoration: underline; }

/* Care Instructions (2758): six care cards as two even rows of three (the shared quality grid is
   four across, which left 4 + 2). */
@media (min-width: 1025px) {
  body.page-id-2758 .elementor-element-da7dad7.e-con { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-2758 .elementor-element-da7dad7.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* FAQs and Care Instructions: the closing cream band keeps the home intro's line length. */
body.page-id-2756 .hb-head-group .hb-body-para,
body.page-id-2758 .hb-head-group .hb-body-para { max-width: 640px; }
body.page-id-2756 .hb-head-group .hb-btn-row,
body.page-id-2758 .hb-head-group .hb-btn-row { padding-inline: 0; }
@media (max-width: 767px) {
  body.page-id-2476 .e-con.hb-hero-page::before,
  body.page-id-2478 .e-con.hb-hero-page::before,
  body.page-id-2637 .e-con.hb-hero-page::before,
  body.page-id-2144 .e-con.hb-hero-page::before,
  body.page-id-2143 .e-con.hb-hero-page::before,
  body.page-id-2506 .e-con.hb-hero-page::before,
  body.page-id-2504 .e-con.hb-hero-page::before,
  body.page-id-2743 .e-con.hb-hero-page::before,
  body.page-id-2756 .e-con.hb-hero-page::before,
  body.page-id-2758 .e-con.hb-hero-page::before {
    background-image: linear-gradient(rgba(4,32,46,.5), rgba(4,32,46,.5));
  }
}