/* ══════════════════════════════════════════
   CRITICAL BUG FIXES — rendering patches
   Applied: nav/trustbar overlap, hero collapse,
   pcard floating badge, page padding offsets
══════════════════════════════════════════ */

/* Ensure all page sections that use padding-top
   for fixed nav offset are correct now nav is top:0 */
.cart-page,.co-page,.det-page{padding-top:80px}
@media(max-width:768px){
  .cart-page,.co-page,.det-page{padding-top:66px}
}
@media(max-width:480px){
  .cart-page,.co-page,.det-page{padding-top:60px}
}

/* Hero must never collapse on any screen */
.hero{min-height:70svh}
@media(max-width:768px){.hero{min-height:65svh}}
@media(max-width:480px){.hero{min-height:60svh}}

/* pcard-info must fill remaining flex space
   so card has visible body even without image */
.pcard-info{flex:1;padding:14px 14px 16px}

/* pgrid container always fills its parent */
.pgrid{width:100%}

/* Sections with .pg.on must display block */
.pg.on{display:block !important}

/* Mobile trust bar — no sticky, just flows */
@media(max-width:768px){
  .trust-bar{
    position:relative;
    justify-content:flex-start;
    gap:20px;font-size:10px;padding:7px 16px;
  }
}

/* ══════════════════════════════════════════
   HERO — PURE CSS BACKGROUND (no img tag)
   Works with or without a JS-set bg-image
══════════════════════════════════════════ */
.hero-immersive {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--navy);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 0;
  grid-template-columns: unset;
}

/* Dark overlay — always on so text is readable with or without bg image */
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(201,168,76,0.10) 0%,
    rgba(10,10,10,0.65) 40%,
    rgba(15,15,15,0.85) 100%
  );
  z-index: 1;
}

/* Remove the old hero-photo-bg img wrapper — not needed */
.hero-photo-bg { display: none !important; }

/* Content always centered on top of overlay */
.hero-photo-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 800px;
  margin: 0 auto;
}

/*  giant title */
.hero-main-title {
  font-family: var(--f-display);
  font-size: clamp(64px, 14vw, 140px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -2px;
  line-height: 0.9;
  margin-bottom: 20px;
  text-shadow: 0 4px 40px rgba(0,0,0,0.4);
}

/* Tagline under  */
.hero-tagline {
  font-family: var(--f-body);
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 36px;
}

/* CTA button */
.hero-cta {
  font-size: 14px;
  padding: 15px 40px;
  letter-spacing: 2px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-immersive { min-height: 85svh; }
  .hero-main-title { letter-spacing: -1px; margin-bottom: 14px; }
  .hero-tagline { letter-spacing: 2px; margin-bottom: 28px; }
  .hero-cta { width: 100%; max-width: 320px; justify-content: center; }
}