/* Products Page Styles */
/* Uses px for font sizes per site rules (html { font-size: 62.5% } makes rem unreliable) */

/* Clean up hero-to-content transition on product pages */
.article-header {
  border-bottom: none !important;
}

#hawaii-top .article-header {
  border: none !important;
}

#hawaii-top + .wrapper-sides {
  margin-top: -5px;
}

.products-text {
  color: #1a5276;
}

.products-border {
  border-color: #1a5276 !important;
}

.text-products {
  color: #1a5276;
}

/* Product card hover states */
.hg-product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hg-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Guidebook feature list */
.guidebook-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guidebook-features li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}

.guidebook-features li:last-child {
  border-bottom: none;
}

.guidebook-features li i {
  color: #27ae60;
  margin-right: 8px;
  width: 20px;
  text-align: center;
}

/* Table of contents styling */
.guidebook-toc {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px 0;
}

.guidebook-toc h4 {
  margin: 0 0 12px;
  color: #1a5276;
}

.guidebook-toc ol {
  margin: 0;
  padding-left: 20px;
}

.guidebook-toc li {
  padding: 4px 0;
  font-size: 15px;
  color: #333;
}

/* Purchase section sticky on desktop */
@media (min-width: 768px) {
  .product-purchase-sidebar {
    position: sticky;
    top: 100px;
  }
}

/* Hide the inline island buttons on desktop — sidebar handles it */
@media (min-width: 640px) {
  .hg-island-btn-row {
    display: none !important;
  }
  .hg-island-btn-row-label {
    display: none !important;
  }
}

/* Island button active/selected state */
.hg-island-btn.is-selected {
  background: rgba(240,192,64,0.25) !important;
  border-color: #f0c040 !important;
  box-shadow: 0 0 0 2px #f0c040;
  font-weight: bold;
}

/* Island button hover in sidebar */
#island-planner-buttons .hg-island-btn:hover {
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.7) !important;
}

/* Island button hover in inline row */
.hg-island-btn-row .hg-island-btn:hover {
  opacity: 0.85;
}

/* Download page styles */
.download-card {
  background: #fff;
  border: 2px solid #27ae60;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  margin: 24px 0;
}

.download-card h2 {
  color: #27ae60;
  margin: 0 0 12px;
}

.download-card .download-link {
  display: inline-block;
  background: #27ae60;
  color: #fff;
  padding: 14px 36px;
  border-radius: 30px;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  margin: 16px 0;
  transition: background 0.2s ease;
}

.download-card .download-link:hover {
  background: #219a52;
  color: #fff;
}

/* Print styles */
@media print {
  .hg-product-card,
  .hg-quiz-cta,
  .hg-buy-btn,
  .content-nav-bar-links {
    display: none !important;
  }
}

/* 2026 product cover tiles — show natural portrait cover art instead of a cropped landscape tile */
.hg-cover-tile {
  position: relative;
  display: block;
  text-align: center;
  padding: 12px 8px 4px;
  text-decoration: none;
  background: transparent;
}
.hg-cover-tile .hg-cover-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  margin: 0 auto 10px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hg-cover-tile:hover .hg-cover-img {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
}
.hg-cover-label {
  text-align: center;
  margin: 6px 0 0;
  line-height: 1.3;
}
.hg-cover-label strong {
  color: #1a5276;
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
}
.hg-cover-label .hg-cover-price {
  color: #777;
  font-size: 13px;
}
.hg-cover-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #27ae60;
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 2;
}
/* Planner-tile QUIZ badge — uses the products brand orange so it reads as
   a distinct product category from the green +PLANNER combo badge. */
.hg-cover-badge--planner {
  background: #F27A24;
}

/* Combo tile — no anchor, no hover lift. Cover image stays static so the
   single Add to Cart button below is unambiguously the action. */
.hg-cover-tile--static {
  cursor: default;
}
.hg-cover-tile--static:hover .hg-cover-img {
  transform: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

/* "Updated April 2026" freshness line under the price. Subtle gray italic
   so it's a trust signal, not a competing CTA. */
.hg-cover-label .hg-cover-updated {
  display: block;
  margin-top: 2px;
  color: #888;
  font-size: 12px;
  font-style: italic;
}

/* Tighter on phones so two tiles fit cleanly per row */
@media (max-width: 640px) {
  .hg-cover-tile .hg-cover-img {
    max-height: 240px;
  }
  .hg-cover-label strong {
    font-size: 15px;
  }
  .hg-cover-label .hg-cover-updated {
    font-size: 11px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Tier comparison table — at-a-glance "what's in each tier" matrix
   shown above the Pocket Editions row on /products. Buyers can scan
   horizontally instead of reading every section's body copy.

   The Complete column is highlighted because it's the flagship SKU.
   Mobile (<700px) gets horizontal scroll on the wrapper rather than
   a stacked-card rewrite — the grid is still legible at narrower
   widths and the alternative (stacking) makes feature-by-feature
   scanning impossible.
   ────────────────────────────────────────────────────────────── */

.hg-tier-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  max-width: 1100px;
  border-radius: 12px;
  border: 1px solid #e0ddd6;
  background: #fff;
}
.hg-tier-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}
.hg-tier-compare thead th {
  background: #f7f7f5;
  padding: 14px 12px;
  text-align: center;
  border-bottom: 2px solid #e0ddd6;
  vertical-align: top;
}
.hg-tier-compare thead .hg-tier-compare__feature {
  background: #fff;
  border-bottom-color: #fff;
}
.hg-tier-compare__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1a5276;
  margin-bottom: 2px;
}
.hg-tier-compare__price {
  display: block;
  font-size: 13px;
  color: #555;
  font-weight: normal;
}
.hg-tier-compare tbody th {
  text-align: left;
  font-weight: 600;
  color: #333;
  padding: 12px 14px;
  border-bottom: 1px solid #efece4;
  background: #fafaf8;
  white-space: normal;
  width: 38%;
}
.hg-tier-compare tbody td {
  text-align: center;
  padding: 12px 10px;
  border-bottom: 1px solid #efece4;
  color: #333;
  vertical-align: middle;
}
.hg-tier-compare tbody tr:last-child th,
.hg-tier-compare tbody tr:last-child td {
  border-bottom: none;
}
.hg-tier-yes {
  color: #27ae60;
  font-size: 18px;
}
.hg-tier-no {
  color: #bbb;
  font-weight: bold;
}
.hg-tier-compare .hg-tier-compare__highlight {
  background: #fff8e6;
  position: relative;
}
.hg-tier-compare thead th.hg-tier-compare__highlight {
  border-bottom-color: #f0c040;
  box-shadow: inset 0 -3px 0 #f0c040;
}

@media (max-width: 700px) {
  .hg-tier-compare {
    font-size: 13px;
  }
  .hg-tier-compare thead th,
  .hg-tier-compare tbody th,
  .hg-tier-compare tbody td {
    padding: 10px 8px;
  }
  .hg-tier-compare__name {
    font-size: 14px;
  }
}