.bf-wrap {
  max-width: 1160px;
  margin: 0 auto 48px;
  padding: 0 18px;
}

.bf-hero {
  min-height: 430px;
  margin: 20px 0 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.bf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 12, 8, 0.08) 0%, rgba(30, 12, 8, 0.78) 100%);
}

.bf-hero-back {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #26333c;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.bf-hero-panel {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding: 0 30px 34px;
  color: #fff;
}

.bf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.bf-hero h1 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 46px;
  line-height: 1.03;
  letter-spacing: 0;
}

.bf-hero p {
  max-width: 710px;
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.bf-tool {
  margin: 24px 0 0;
  padding: 22px;
  border: 1px solid #dfe2de;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(45, 35, 28, 0.08);
}

.bf-tool-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 18px;
}

.bf-tool-head h2 {
  margin: 0 0 4px;
  color: #26333c;
  font-size: 24px;
  line-height: 1.2;
}

.bf-tool-head p {
  margin: 0;
  color: #5c6870;
  font-size: 15px;
  line-height: 1.5;
}

.bf-guide-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 8px;
  background: #26333c;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}

.bf-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bf-filter {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bf-filter legend {
  margin: 0 0 7px;
  color: #293a44;
  font-size: 13px;
  font-weight: 800;
}

.bf-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.bf-segments button,
.bf-reset {
  min-height: 36px;
  border: 1px solid #d8d4ce;
  border-radius: 8px;
  background: #faf9f7;
  color: #26333c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.bf-segments button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
}

.bf-segments button.is-active {
  border-color: #f27a24;
  background: #f27a24;
  color: #fff;
}

.bf-segments[data-filter="island"] button[data-value="oahu"] i {
  color: #f27a24;
}

.bf-segments[data-filter="island"] button[data-value="maui"] i {
  color: #1866b4;
}

.bf-segments[data-filter="island"] button[data-value="big-island"] i {
  color: #c3232f;
}

.bf-segments[data-filter="island"] button[data-value="kauai"] i {
  color: #1d9771;
}

.bf-segments[data-filter="island"] button[data-value="oahu"].is-active {
  border-color: #f27a24;
  background: #f27a24;
}

.bf-segments[data-filter="island"] button[data-value="maui"].is-active {
  border-color: #1866b4;
  background: #1866b4;
}

.bf-segments[data-filter="island"] button[data-value="big-island"].is-active {
  border-color: #c3232f;
  background: #c3232f;
}

.bf-segments[data-filter="island"] button[data-value="kauai"].is-active {
  border-color: #1d9771;
  background: #1d9771;
}

.bf-segments[data-filter="island"] button.is-active i {
  color: #fff;
}

.bf-extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #ece4dc;
}

.bf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #26333c;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

.bf-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bf-toggle-ui {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #d9e1e5;
  position: relative;
  transition: background 0.15s ease;
}

.bf-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease;
}

.bf-toggle input:checked + .bf-toggle-ui {
  background: #f27a24;
}

.bf-toggle input:checked + .bf-toggle-ui::after {
  transform: translateX(20px);
}

.bf-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.bf-summary {
  margin: 18px 0 0;
  padding: 13px 15px;
  border-radius: 8px;
  background: #fff8f0;
  color: #5d3517;
  font-size: 14px;
  font-weight: 800;
}

.bf-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0 0;
}

.bf-card {
  min-width: 0;
  border: 1px solid #e4dfd9;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bf-img {
  min-height: 178px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.bf-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(38, 51, 60, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.bf-photo-credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(38, 51, 60, 0.76);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.bf-body {
  padding: 16px;
  min-width: 0;
}

.bf-card h3 {
  margin: 0 0 6px;
  color: #26333c;
  font-size: 20px;
  line-height: 1.22;
}

.bf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 11px;
}

.bf-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #f2f5f5;
  color: #344c5c;
  font-size: 12px;
  font-weight: 800;
}

.bf-island-pill {
  color: #fff;
}

.bf-island-oahu {
  background: #f27a24;
}

.bf-island-maui {
  background: #1866b4;
}

.bf-island-big-island {
  background: #c3232f;
}

.bf-island-kauai {
  background: #1d9771;
}

.bf-card p {
  margin: 0 0 12px;
  color: #4e5e68;
  font-size: 14px;
  line-height: 1.5;
}

.bf-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 13px;
}

.bf-detail {
  padding: 9px 10px;
  border-radius: 8px;
  background: #faf9f7;
}

.bf-detail span {
  display: block;
  margin: 0 0 2px;
  color: #74808a;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.bf-detail strong {
  color: #223844;
  font-size: 13px;
  line-height: 1.3;
}

.bf-note-line {
  margin: 13px 0 0;
  padding: 10px 11px;
  border-radius: 8px;
  background: #f4f9ff;
  color: #244563;
  font-size: 13px;
  line-height: 1.4;
}

.bf-avoid {
  margin: 0 16px 13px;
  padding: 10px 11px;
  border-radius: 8px;
  background: #fff8f0;
  color: #5d3517;
  font-size: 13px;
  line-height: 1.4;
}

.bf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: auto 16px 16px;
}

.bf-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: #1866b4;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
}

.bf-btn:hover,
.bf-btn:focus {
  background: #145697;
  color: #fff;
  text-decoration: none;
}

.bf-btn-book {
  background: #f27a24;
}

.bf-btn-book:hover,
.bf-btn-book:focus {
  background: #d96317;
  color: #fff;
}

.bf-btn-secondary {
  background: #eef4f7;
  color: #26333c;
}

.bf-btn-secondary:hover,
.bf-btn-secondary:focus {
  background: #dfe8ee;
  color: #26333c;
}

.bf-btn:focus-visible {
  outline: 3px solid rgba(24, 102, 180, 0.32);
  outline-offset: 2px;
}

.bf-btn-book:focus-visible {
  outline-color: rgba(242, 122, 36, 0.38);
}

.bf-btn-secondary:focus-visible {
  outline-color: rgba(38, 51, 60, 0.2);
}

.bf-btn-map {
  background: #1d9771;
}

.bf-btn-map:hover,
.bf-btn-map:focus {
  background: #14735a;
  color: #fff;
}

.bf-btn-map:focus-visible {
  outline-color: rgba(29, 151, 113, 0.34);
}

.bf-map-panel {
  margin: 0 16px 16px;
  padding: 12px;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  background: #f7fbf9;
}

.bf-map-panel[hidden] {
  display: none;
}

.bf-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: #26333c;
  font-size: 13px;
}

.bf-map-head a,
.bf-map-panel p a {
  color: #14735a;
  font-weight: 800;
  text-decoration: none;
}

.bf-map-head a:hover,
.bf-map-panel p a:hover {
  text-decoration: underline;
}

.bf-map-panel iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 8px;
  background: #e8f0ec;
}

.bf-map-panel p {
  margin: 10px 0 0;
  font-size: 13px;
}

.bf-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed #d4d7d7;
  border-radius: 8px;
  background: #f8fafb;
  text-align: center;
}

.bf-empty h3 {
  margin: 0 0 6px;
  color: #26333c;
}

.bf-empty p {
  margin: 0;
  color: #60717d;
}

.bf-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 24px 0 0;
  padding: 22px;
  border-radius: 8px;
  background: #26333c;
  color: #fff;
}

.bf-note h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 22px;
}

.bf-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  line-height: 1.5;
}

.bf-note a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #fff;
  color: #26333c;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 900px) {
  .bf-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 721px) {
  .bf-hero {
    margin-top: 20px;
  }
}

@media (max-width: 720px) {
  .bf-wrap {
    padding: 0 12px;
  }

  .bf-hero {
    margin-top: 24px;
    min-height: 360px;
  }

  .bf-hero-panel {
    padding: 0 20px 24px;
  }

  .bf-hero h1 {
    font-size: 36px;
  }

  .bf-hero p {
    font-size: 16px;
  }

  .bf-tool {
    padding: 16px;
  }

  .bf-tool-head,
  .bf-extra-row,
  .bf-note {
    display: block;
  }

  .bf-guide-link,
  .bf-reset,
  .bf-note a {
    margin-top: 12px;
  }

  .bf-filter-grid,
  .bf-results {
    grid-template-columns: 1fr;
  }

  .bf-map-head {
    display: block;
  }

  .bf-map-head a {
    display: inline-block;
    margin-top: 6px;
  }
}

/* Beach-finder-specific overrides: make image + heading clickable without
   adding underline noise, and let the vibe filter pill row breathe. */
a.bf-img {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.bf-img:hover,
a.bf-img:focus {
  text-decoration: none;
}

.bf-card h3 a {
  color: inherit;
  text-decoration: none;
}

.bf-card h3 a:hover,
.bf-card h3 a:focus {
  color: #1866b4;
  text-decoration: none;
}

.bf-segments[data-filter="vibe"] {
  /* vibe row has more options than other filters; tighten button padding */
  gap: 6px;
}

.bf-segments[data-filter="vibe"] button {
  padding: 8px 10px;
}

/* ========== Print stylesheet for "Print my list" ==========
   When the user prints (or "Save as PDF" via the browser dialog),
   strip everything but the filtered result list so they can take
   the curated picks to the beach with them. */
@media print {
  /* Hide site chrome */
  body > header,
  body > footer,
  nav,
  .site-header,
  .site-footer,
  .nav-drill-modals,
  .modal,
  #raptive-anchor,
  .hgads,
  .raptive-sticky-sidebar-ad,
  .raptive-video-player,
  .hg-aff-wrap,
  .feedback-fab,
  .hg-trip-drawer,
  .leaflet-map-modal,
  .free-guide-modal,
  .corrections-link,
  .author-byline-bottom,
  .related-items,
  .content-nav-bar-links,
  .mobile-email-bar { display: none !important; }

  /* Trim the finder UI — keep only the filter summary + cards */
  .bf-hero,
  .bf-tool-head,
  .bf-filter-grid,
  .bf-extra-row,
  .bf-note { display: none !important; }

  .bf-wrap {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .bf-tool {
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  .bf-summary {
    background: none;
    color: #000;
    padding: 0 0 12px;
    border-bottom: 1px solid #999;
    margin: 0 0 14px;
    font-size: 12pt;
  }

  .bf-summary::before {
    content: "Hawaii Beach Finder \2014  ";
    font-weight: 900;
  }

  /* Card layout for print: stack 1-up, no shadows, no fancy backgrounds */
  .bf-results {
    display: block !important;
    margin: 0;
  }

  .bf-card {
    display: block !important;
    border: 1px solid #aaa;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none !important;
    margin: 0 0 12px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .bf-img {
    display: none !important;        /* skip the photo to save ink */
  }

  .bf-body {
    padding: 10px 12px 6px;
  }

  .bf-card h3 {
    font-size: 14pt;
    color: #000;
    margin: 0 0 6px;
  }

  .bf-card h3 a {
    color: #000;
    text-decoration: none;
  }

  .bf-card p {
    color: #000;
    font-size: 10pt;
    line-height: 1.35;
    margin: 0 0 8px;
  }

  /* Inline pills as plain text for print */
  .bf-meta { gap: 4px 8px; margin: 0 0 6px; }
  .bf-pill,
  .bf-island-pill {
    background: none !important;
    color: #000 !important;
    padding: 0 !important;
    border: 0;
    font-size: 9pt;
    font-weight: 700;
  }
  .bf-pill::after { content: " \00B7  "; }
  .bf-pill:last-child::after { content: ""; }
  .bf-pill i { display: none; }

  .bf-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px;
    margin: 0 0 8px;
  }
  .bf-detail {
    background: none;
    padding: 0;
    border: 0;
  }
  .bf-detail span { font-size: 8pt; }
  .bf-detail strong { font-size: 9pt; color: #000; }


  .bf-note-line,
  .bf-avoid {
    background: none;
    color: #000;
    padding: 4px 0;
    margin: 4px 0;
    font-size: 9pt;
    border-top: 1px dashed #ccc;
  }

  .bf-actions { display: none; }
  .bf-map-panel { display: none !important; }

  /* Add a tiny URL marker so the print is useful offline */
  .bf-card .bf-body::after {
    content: "hawaii-guide.com" attr(data-url);
    display: block;
    font-size: 8pt;
    color: #555;
    margin-top: 6px;
  }
}

/* The Print button mirrors .bf-reset visually */
.bf-segments button#bf-print,
button#bf-print { /* no extra rules needed; .bf-reset handles styling */ }

/* ───────── Save-to-MyTrip heart button ─────────
   Sits in the top-right of each card image. Sibling of .bf-img inside
   the .bf-media wrapper so the button click doesn't trigger the image
   link. .bf-media is position:relative so the absolute-positioned
   button anchors against the image, not the article. */
.bf-media {
  position: relative;
  display: block;
  min-height: 178px;
}

.bf-save-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(38, 51, 60, 0.78);
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.bf-save-btn:hover,
.bf-save-btn:focus {
  background: rgba(38, 51, 60, 0.94);
  color: #fff;
  transform: scale(1.06);
  outline: none;
}

.bf-save-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.bf-save-btn.is-saved {
  background: #e74c3c;
  color: #fff;
}

.bf-save-btn.is-saved:hover,
.bf-save-btn.is-saved:focus {
  background: #c0392b;
  color: #fff;
}

.bf-save-btn i {
  pointer-events: none;
}

/* Hide save button in print — printed list is its own offline copy */
@media print {
  .bf-save-btn,
  .bf-media { /* media wrapper is fine; just keep print rules tidy */ }
  .bf-save-btn { display: none !important; }
}