/* Mobile overrides collected separately for easier iteration */

/* Slightly larger base font for readability on small screens */
html, body { font-size: 16px; }

/* Improve line-height for paragraphs */
p, li { line-height: 1.45; }

/* Make large hero CTAs full-width on mobile */
.home-content .btn.cta { display: block; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }

/* Reduce heavy box-shadows on mobile to reduce GPU work */
.card, .home-card { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

/* Ensure images never overflow touch area */
img { max-width: 100%; height: auto; display: block; }

/* Slightly larger form controls for tapping */
input[type="text"], input[type="email"], input[type="password"], select, button {
  font-size: 16px;
  padding: 10px 12px;
}

/* Make footer columns stack nicely */
.footer-col { width: 100%; display: block; margin-bottom: 12px; }

/* Prevent map interfering with page scroll when narrow: show a small hint */
.map-column { touch-action: pan-y; }

/* Reduce generous radii on very small screens */
@media (max-width: 420px) {
  .home-illu img { border-radius: 12px; }
}

/* Stack and center the ygm-steps pills on narrow screens so all items are visible */
@media (max-width: 600px) {
  .ygm-steps {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 0 !important;
    overflow-x: visible !important;
  }
  .ygm-steps li {
    display: inline-block !important;
    width: auto !important;
    max-width: 92% !important;
    text-align: center !important;
    white-space: normal !important;
    padding: 8px 12px !important;
  }
}

/* Promo bundle: center all text in the promo container and keep prices readable */
/* Make promo content centered at all sizes (user request) */
.ygb-promo, .ygb-promo .ygb-promo-content { text-align: center; }
.ygb-promo-prices {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
  flex-wrap: wrap; /* allow wrapping to avoid overlap */
}
.ygb-price-original, .ygb-price-new {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}
.ygb-price-original strong, .ygb-price-new strong { display: block; text-align: center; }

/* Desktop / large screens: make original smaller & struck-through, new price larger and gold */
@media (min-width: 901px) {
  .ygb-price-original strong {
    font-size: 1.1rem;
    color: #6b7280; /* muted grey */
    text-decoration: line-through;
    display: block;
    margin: 0 auto;
  }
  .ygb-price-new strong {
    font-size: 2rem;
    color: var(--gold, #c9a227);
    font-weight: 700;
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  /* Expand centering to tablets and larger phones */
  .ygb-promo .ygb-promo-content { text-align: center; }
  .ygb-promo-prices { flex-direction: column; gap: 8px; justify-content: center; align-items: center; }
  .ygb-price-original, .ygb-price-new { min-width: 0; }
  .ygb-price-original strong { font-size: 1rem; color: #6b7280; text-decoration: line-through; }
  .ygb-price-new strong { font-size: 1.4rem; color: var(--gold, #c9a227); font-weight:700; }
}