/* ==========================================================================
   HeyBro Home
   Two carousels: Shop by MVP (Elementor markup, enhanced in place) and The
   Line-up (rendered by [heybro_lineup]). Both share card sizing and controls.
   ========================================================================== */

:root {
  --hb-navy: #05334A;
  --hb-red: #B40023;
  --hb-text-muted: #55646E;
  --hb-surface-grey: #F2F4F6;
  --hb-border-grey: #D8DEE3;
  --hb-muted-navy: #9FB4C1;
  --hb-font-display: Anton, 'Arial Narrow', sans-serif;
  --hb-font-body: Poppins, 'Segoe UI', Helvetica, Arial, sans-serif;
  --hb-card-w: 230px;
  --hb-gap: 18px;
}

/* --------------------------------------------------------------------------
   Shared track behaviour
   Elementor's global class also lands on .hb-scroll-row, so rules carry .e-con
   to win the specificity tie rather than reaching for !important.
   -------------------------------------------------------------------------- */

/* The MVP row is itself the scroller. The Line-up row only wraps a carousel,
   so it must stay visible or it would clip that carousel's arrows. */
.e-con.hb-scroll-row:has(> .hb-card) {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--hb-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.e-con.hb-scroll-row:has(> .hb-card)::-webkit-scrollbar { display: none; }

.e-con.hb-scroll-row:has(> .elementor-widget) {
  overflow: visible;
}

.e-con.hb-scroll-row > .elementor-widget-shortcode,
.e-con.hb-scroll-row > .elementor-widget {
  flex: 1 1 100%;
  min-width: 0;
}

/* Snapping cancels a scroll driven from script, so it is suspended while the
   arrows move the track. */
.hb-scroll-row.is-animating,
.hb-carousel__track.is-animating { scroll-snap-type: none; }

.hb-scroll-row.is-dragging,
.hb-carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.hb-scroll-row.is-dragging img,
.hb-carousel__track.is-dragging img { pointer-events: none; }

/* --------------------------------------------------------------------------
   Shop by MVP cards — sized and cropped to match The Line-up
   -------------------------------------------------------------------------- */

.e-con.hb-scroll-row > .hb-card {
  flex: 0 0 var(--hb-card-w);
  max-width: var(--hb-card-w);
  min-width: 0;
  scroll-snap-align: start;
  padding: 0 0 10px;
}

.e-con.hb-scroll-row > .hb-card .hb-card-media {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hb-surface-grey);
  /* The image fills the frame, as it does in The Line-up. */
  padding: 0;
  border: 0;
}

.e-con.hb-scroll-row > .hb-card .hb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Arrows — injected into .hb-scroll-clip for MVP, built in for The Line-up
   -------------------------------------------------------------------------- */

.hb-carousel { position: relative; width: 100%; }
.hb-carousel--host { position: relative; overflow: visible; }

.hb-carousel__btn {
  position: absolute;
  top: calc(var(--hb-card-w) / 2);
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--hb-border-grey);
  background: #fff;
  color: var(--hb-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 6px 18px rgba(4, 32, 46, .14);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.hb-carousel__btn:hover {
  background: var(--hb-red);
  border-color: var(--hb-red);
  color: #fff;
}

.hb-carousel__btn:focus-visible {
  outline: 2px solid var(--hb-red);
  outline-offset: 2px;
}

.hb-carousel__btn[hidden] { display: none; }
.hb-carousel__btn--prev { left: -14px; }
.hb-carousel__btn--next { right: -14px; }

/* --------------------------------------------------------------------------
   The Line-up track
   -------------------------------------------------------------------------- */

.hb-carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--hb-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.hb-carousel__track::-webkit-scrollbar { display: none; }

.hb-lineup__item {
  flex: 0 0 var(--hb-card-w);
  max-width: var(--hb-card-w);
  scroll-snap-align: start;
  margin: 0;
}

.hb-lineup__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hb-lineup__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(4, 32, 46, .12);
}

.hb-lineup__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--hb-surface-grey);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hb-lineup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

.hb-lineup__ph {
  font-family: var(--hb-font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-muted-navy);
  text-align: center;
  padding: 0 12px;
}

.hb-lineup__body { padding: 14px 2px 0; }

.hb-lineup__eyebrow {
  margin: 0;
  font-family: var(--hb-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}

.hb-lineup__name {
  margin: 8px 0 0;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000;
}

.hb-lineup__price {
  margin: 8px 0 0;
  font-family: var(--hb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--hb-navy);
}

.hb-lineup__price del { opacity: .55; font-weight: 400; margin-right: 6px; }
.hb-lineup__price ins { text-decoration: none; color: var(--hb-red); }

.hb-lineup__rating {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hb-font-body);
  font-size: 11.5px;
  color: var(--hb-text-muted);
}

.hb-lineup__rating .star-rating { color: var(--hb-red); font-size: 12px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --hb-card-w: 210px; }
  .hb-carousel__btn--prev { left: -8px; }
  .hb-carousel__btn--next { right: -8px; }
}

@media (max-width: 600px) {
  :root { --hb-card-w: 62vw; --hb-gap: 14px; }

  .e-con.hb-scroll-row:has(> .hb-card),
  .hb-carousel__track { scroll-snap-type: x mandatory; }

  /* Touch swipes; arrows would only crowd the cards. */
  .hb-carousel__btn { display: none; }

  .hb-lineup__name { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   Hero legibility — same treatment as the News hero
   The photo is the Elementor background of .hb-hero-overlay, so it stays
   editable there. A light fade sits between that background and the copy, and
   the copy carries a soft navy halo. The right side of the photo stays clear.
   .hb-hero-overlay is position:absolute, so it is not given position:relative;
   isolation makes the z-index:-1 layer paint above its background but below
   its content.
   -------------------------------------------------------------------------- */

.e-con.hb-hero-overlay { isolation: isolate; }

.e-con.hb-hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* The copy spans ~5-35% of the width here, over bright mugs. Darkened
     18 Sep 2026 at the client's request: firm behind the text, then clearing
     by 70% so the bottle, cap and bag on the right stay bright. */
  background: linear-gradient(90deg,
    rgba(4, 32, 46, .82) 0%,
    rgba(4, 32, 46, .74) 34%,
    rgba(4, 32, 46, .5) 48%,
    rgba(4, 32, 46, .18) 60%,
    rgba(4, 32, 46, 0) 70%);
}

.e-con.hb-hero-overlay .hb-hero-copy {
  text-shadow: 0 1px 2px rgba(4, 32, 46, .55), 0 2px 14px rgba(4, 32, 46, .5);
}

/* Smaller body text needs a firmer halo than the heading. */
.e-con.hb-hero-overlay .hb-hero-lead {
  text-shadow: 0 1px 3px rgba(4, 32, 46, .75), 0 0 16px rgba(4, 32, 46, .6);
}

/* On phones the copy spans the full width of a cropped, busy image. */
@media (max-width: 767px) {
  .e-con.hb-hero-overlay::before { background: rgba(4, 32, 46, .62); }
}

/* What we make intro: keep the description to a readable line length, and drop
   the button row's default 10px inset so the button lines up with the text. */
#what-we-make .hb-head-group .hb-body-para { max-width: 640px; }
#what-we-make .hb-head-group .hb-btn-row { padding-inline: 0; }

/* The Line-up intro: the description under the tagline keeps the same line length. */
.elementor-element-78cb953 .hb-body-para { max-width: 640px; margin-top: 12px; }