/* ============================================
   BRAND LANDING PAGES — Turtlebox / Costa Del Mar
   Shared premium landing chrome + per-brand accents.
   ============================================ */

.hh-bl { --bl-accent: var(--hh-yellow); --bl-accent-ink: var(--hh-black); }
.hh-bl--turtlebox { --bl-accent: #FF5A1E; --bl-accent-ink: #FFFFFF; }
.hh-bl--costa { --bl-accent: #3EB6C9; --bl-accent-ink: #06222E; }
.hh-bl--bge { --bl-accent: #1F8A4C; --bl-accent-ink: #FFFFFF; }

/* ---------- Hero ---------- */
.bl-hero {
  position: relative;
  background: var(--hh-black-deep);
  color: var(--hh-white);
  overflow: hidden;
  border-bottom: 3px solid var(--bl-accent);
}

.hh-bl--costa .bl-hero {
  background: linear-gradient(150deg, #051E2A 0%, #0A3245 55%, #0D4256 100%);
}

.hh-bl--turtlebox .bl-hero {
  background: linear-gradient(150deg, #0D0D0D 0%, #1F1B18 55%, #2B1A10 100%);
}

.bl-hero::after {
  content: '';
  position: absolute;
  right: -12%;
  top: -30%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--bl-accent) 0%, transparent 68%);
  opacity: 0.16;
  pointer-events: none;
}

.bl-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  position: relative;
  z-index: 1;
}

.bl-hero .eyebrow { color: var(--bl-accent); }
.bl-hero .eyebrow::before { background: var(--bl-accent); }

.bl-hero h1 {
  color: var(--hh-white);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
  margin: 0 0 1rem;
}

.bl-hero h1 .bl-accent { color: var(--bl-accent); }

.bl-hero-sub {
  color: var(--hh-gray-300);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 54ch;
  margin: 0 0 1.75rem;
}

.bl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.9rem;
}

.bl-hero-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bl-hero-media img {
  width: 100%;
  max-width: 470px;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

/* A photographic hero rather than a cutout. The drop-shadow treatment above
   only reads on a transparent PNG -- on a rectangular photo it just smears the
   edges -- so a photo fills its column and gets a framed card instead. */
.bl-hero-media--photo img {
  max-width: 560px;
  filter: none;
  border-radius: 3px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Proof photo inside a dark section -- one wide image carrying its own caption. */
.bl-proof {
  margin: 2.5rem 0 0;
}

.bl-proof img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 3px;
}

.bl-proof figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

/* ---------- Family jump chips ---------- */
.bl-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.bl-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--hh-white);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.bl-jump a small {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--hh-gray-500);
}

.bl-jump a:hover {
  background: var(--bl-accent);
  border-color: var(--bl-accent);
  color: var(--bl-accent-ink);
}

.bl-jump a:hover small { color: var(--bl-accent-ink); }

/* ---------- Section heads ---------- */
.bl-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2.25rem;
}

.bl-sechead h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  margin: 0;
}

.bl-sechead .eyebrow { margin-bottom: 0.4rem; }

.bl-sechead-lede {
  color: var(--hh-gray-700);
  max-width: 58ch;
  margin: 0.6rem 0 0;
}

.bl-sechead-from {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hh-black);
  white-space: nowrap;
}

.bl-sechead-from span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

/* ---------- Product cards ---------- */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: var(--gap);
}

.bl-card {
  display: flex;
  flex-direction: column;
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  transition: border-color var(--transition-fast), transform var(--transition), box-shadow var(--transition);
}

.section--gray .bl-card { border-color: var(--hh-gray-200); }

.bl-card:hover {
  border-color: var(--hh-black);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.bl-card__img {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--hh-gray-100);
  overflow: hidden;
}

.bl-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.1rem;
  transition: transform var(--transition);
}

.bl-card:hover .bl-card__img img { transform: scale(1.05); }

.bl-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem 1.3rem;
  border-top: 2px solid var(--bl-accent);
}

.bl-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bl-card__name a { color: var(--hh-black); }
.bl-card__name a:hover { color: var(--hh-gray-700); }

.bl-card__meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

.bl-card__stores {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a7d36;
  margin-top: 0.2rem;
}

.bl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.7rem;
}

.bl-card__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hh-black);
}

.bl-card__price del { color: var(--hh-gray-500); font-weight: 500; margin-right: 0.4rem; }
.bl-card__price ins { text-decoration: none; }

.bl-card__cta {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hh-black);
  border-bottom: 2px solid var(--bl-accent);
  padding-bottom: 1px;
  white-space: nowrap;
}

.bl-card__cta:hover { color: var(--hh-gray-700); }

/* ---------- Feature band ---------- */
.bl-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 2.5rem;
}

.bl-feature {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--hh-black-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--bl-accent);
}

.bl-feature h3 {
  color: var(--hh-white);
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.bl-feature p { color: var(--hh-gray-300); margin: 0; font-size: 0.95rem; }

.bl-feature .bl-feature__stat {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--bl-accent);
  margin-bottom: 0.35rem;
  line-height: 1;
}

/* ---------- In-store strip ---------- */
.bl-instore {
  background: var(--bl-accent);
  color: var(--bl-accent-ink);
}

.bl-instore-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.5rem 0;
}

.bl-instore-inner h2 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin: 0;
  color: inherit;
}

.bl-instore-inner p {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

.bl-instore .btn.btn--dark {
  background: var(--hh-black);
  color: var(--hh-white);
}

.bl-instore .btn.btn--dark:hover {
  background: var(--hh-black-soft);
  color: var(--hh-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .bl-hero-inner { grid-template-columns: 1fr; }
  .bl-hero-media { order: -1; }
  .bl-hero-media img { max-width: 320px; }
  .bl-hero-media--photo img { max-width: 100%; }
  .bl-features { grid-template-columns: 1fr; }
}

/* Card description. The brand pages that came off the Divi builder carry a
   sentence per card, where Turtlebox and Costa only needed a stock line. */
.bl-card__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--hh-gray-700);
}

/* Four reasons rather than three. A modifier so the Turtlebox and Costa
   pages, which have three, keep the layout they were designed around. */
@media (min-width: 900px) {
  .bl-features--4up { grid-template-columns: repeat(4, 1fr); }
}

/* Exactly five Egg sizes. auto-fill lands on four across at the container's
   widest, leaving the MiniMax stranded on its own row, so the lineup asks
   for five tracks once there is room for them. */
@media (min-width: 1120px) {
  .bl-grid--5up { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Grills: recteq / Yoder / the hub ---------- */

.hh-bl--recteq { --bl-accent: #C8102E; --bl-accent-ink: #FFFFFF; }
.hh-bl--yoder  { --bl-accent: #FF6B35; --bl-accent-ink: #1A1A1A; }

/* The grills hub hero uses .bl-hero-media--photo, defined with the hero rules
   above -- it has no single product to show, so it carries a photograph. */

/* recteq sells us exactly two grills. auto-fill leaves them as two narrow
   cards against a half-empty row, so a lineup that short asks for tracks that
   fill the width instead. */
@media (min-width: 700px) {
  .bl-grid--2up { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Photo band ----------
   A photograph beside a block of copy, for the sections that are about the
   cook rather than about a SKU. Lives inside .container like everything else
   so it lines up with the sections above and below it. */
.bl-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}

.bl-band.is-flipped .bl-band__media { order: 2; }

.bl-band__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 430px;
  object-fit: cover;
  border-top: 3px solid var(--bl-accent);
}

.bl-band__body h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  margin: 0 0 0.85rem;
}

.bl-band__body p {
  color: var(--hh-gray-700);
  margin: 0 0 0.9rem;
}

.bl-band__body p:last-child { margin-bottom: 0; }

.section--dark .bl-band__body p { color: var(--hh-gray-300); }

@media (max-width: 900px) {
  .bl-band { grid-template-columns: 1fr; }
  .bl-band.is-flipped .bl-band__media { order: 0; }
  .bl-band__media img { max-height: 280px; }
}

/* ---------- Sheds: a whole building, not a cut-out ---------- */
/* Every other hero on this sheet carries a product photographed on a
   transparent background, so .bl-hero-media caps the image narrow and floats
   it on a drop shadow. The shed heroes carry a photograph of a building
   standing on a lawn: it wants the width, and it reads as a print rather than
   as an object hanging in the dark. */
.hh-bl--sheds .bl-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
}

.hh-bl--sheds .bl-hero-media img {
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-top: 3px solid var(--bl-accent);
  filter: none;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.45);
}

@media (max-width: 900px) {
  .hh-bl--sheds .bl-hero-media img { max-width: 100%; }
}

/* ---------- Best seller badges, stock state, stock filter ----------------
   Added with the popularity ranking. The badge is deliberately scarce -- top
   three of a grid, capped at a quarter of it -- so it still reads as a claim
   rather than as decoration, and the four stock pills are colour-separated by
   how close the thing is to the customer, not by good/bad. */

.hh-cardflags {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  pointer-events: none;
}

.bl-card__img { position: relative; }

.hh-seller {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--hh-black);
  color: var(--hh-white);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.hh-seller--best {
  background: var(--bl-accent, #cd0006);
  color: var(--bl-accent-ink, #fff);
}

/* Stock pill. Four states, each naming its own signal -- see
   HH_Store_Availability::stock_state() and the bridge's STOCK-CONCEPTS.md.
   Nothing here ever says a bare "in stock". */
.hh-stockpill {
  display: inline-block;
  padding: 0.24rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid currentColor;
}

.hh-stockpill--shelf     { color: #1a7d36; }
.hh-stockpill--warehouse { color: #1d5fa8; }
.hh-stockpill--order     { color: #8a6100; }
.hh-stockpill--special   { color: var(--hh-gray-500); }

.bl-card__stockline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0.1rem;
}

.bl-card__stockline small {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

/* The WooCommerce cards in [hh_product_grid] get the same two flags, but they
   sit in normal flow above the title rather than over the image -- the loop
   hook fires after the thumbnail, and absolutely positioning into somebody
   else's template is how a badge ends up on top of a price. */
.woocommerce ul.products li.product .hh-cardflags {
  position: static;
  margin: 0.5rem 0 0.25rem;
}

/* ---------- Filter bar ---------- */
.bl-stockbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: -0.75rem 0 1.75rem;
}

.bl-stockbar__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  margin-right: 0.15rem;
}

.bl-stockbar button {
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: 1px solid var(--hh-gray-200);
  color: var(--hh-gray-700);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.bl-stockbar button:hover { border-color: var(--hh-black); color: var(--hh-black); }

.bl-stockbar button.is-on {
  background: var(--hh-black);
  border-color: var(--hh-black);
  color: var(--hh-white);
}

/* The filtering itself. One attribute on the grid, set by
   assets/js/brand-stock-filter.js, and the cards already know which state
   they are in -- so the bar can never show something the pills contradict.

   Only the cards are addressed, never `> *`: the WooCommerce grid arrives
   wrapped in its own <ul>, which carries no state class of its own, so a
   child-universal selector hid the entire list and left the page looking
   like nothing matched. */
.hh-stockscope[data-hh-stock-filter="shelf"]     .bl-card:not(.hh-stock--shelf),
.hh-stockscope[data-hh-stock-filter="warehouse"] .bl-card:not(.hh-stock--warehouse),
.hh-stockscope[data-hh-stock-filter="order"]     .bl-card:not(.hh-stock--order),
.hh-stockscope[data-hh-stock-filter="special"]   .bl-card:not(.hh-stock--special),
.hh-stockscope[data-hh-stock-filter="shelf"]     li.product:not(.hh-stock--shelf),
.hh-stockscope[data-hh-stock-filter="warehouse"] li.product:not(.hh-stock--warehouse),
.hh-stockscope[data-hh-stock-filter="order"]     li.product:not(.hh-stock--order),
.hh-stockscope[data-hh-stock-filter="special"]   li.product:not(.hh-stock--special) {
  display: none;
}