/* Phone-sized storefront controls and prices; keep the reference detail typography. */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .site-header.compact-header .search-form input {
    font-size: 16px;
  }

  .site-header.compact-header .header-inner .compact-primary-nav {
    font-size: 14px;
  }

  .detail-page .card-field-label,
  .detail-page .card-menu-group-title {
    font-size: 16px;
  }

  .detail-page .card-menu > summary {
    font-size: 16px;
    line-height: 1.5;
  }

  .detail-page .card-menu > summary > span {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .detail-page .card-menu-option {
    font-size: 16px;
    line-height: 1.6;
  }

  .detail-page .card-menu-option strong {
    font-size: 14px;
  }

  .detail-page .card-menu-option small {
    font-size: 13px;
    line-height: 1.7;
  }

  .detail-page .rental-config .basic-price-panel .price-line {
    gap: 8px;
    font-size: 16px;
  }

  .detail-page .rental-config .basic-price-panel .price-line > span:first-child {
    min-width: 0;
    font-size: 16px;
    line-height: 1.6;
  }

  .detail-page .rental-config .basic-price-panel .price-line #base-price,
  .detail-page .rental-config .basic-price-panel .price-line #base-card-price {
    flex: none;
    font-size: 27px;
    line-height: 1.5;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    font-variant-numeric: tabular-nums;
  }

  .detail-page .additional-benefit-choice > span,
  .detail-page .additional-benefit-copy,
  .detail-page .additional-benefit-choice strong,
  .detail-page .additional-benefit-copy strong {
    font-size: 16px;
    line-height: 1.6;
  }

  .detail-page .additional-card-copy > strong {
    font-size: 16px;
  }

  .detail-page .additional-card-copy #additional-card-selection {
    font-size: 14px;
    line-height: 1.7;
  }

  .detail-page .additional-card-copy #additional-card-benefit {
    font-size: 15px;
  }

  .detail-page .rental-config .additional-discounts #additional-payment-schedule th,
  .detail-page .rental-config .additional-discounts #additional-payment-schedule td {
    font-size: 14px;
    line-height: 1.65;
  }

  .detail-page .discount-help > summary {
    font-size: 13px;
  }

  .detail-page .rental-config .additional-discounts .additional-price-panel .best-price > span {
    font-size: 15px;
    line-height: 1.6;
  }

  .detail-page .rental-config .additional-discounts .additional-price-panel .best-price > span > small {
    font-size: 13px;
  }

  .detail-page .rental-config .additional-discounts .additional-price-panel .best-price > strong {
    font-size: clamp(21px, 6.4vw, 24px);
    line-height: 1.6;
  }

  .product-grid .product-card .model {
    font-size: 23px;
    line-height: 1.35;
  }

  .product-grid .product-card .card-color {
    font-size: 17px;
    line-height: 1.6;
  }

  .product-grid .product-card .card-pricing .fine {
    font-size: 14px;
    line-height: 1.7;
  }

  .product-grid .product-card .tags span {
    font-size: 13px;
    line-height: 1.6;
  }

  .product-grid .product-card .card-pricing strong {
    font-size: 23px;
    line-height: 1.5;
  }

  .hero-description {
    font-size: 15px;
    line-height: 1.8;
  }

  .hero-price small {
    font-size: 13px;
    line-height: 1.7;
  }

  .footer p {
    font-size: 13px;
    line-height: 1.9;
  }
}

/* Let a complete price range fit before placing its conditions link. */
@media (max-width: 380px) {
  .detail-page .rental-config .additional-discounts .additional-result-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-page .rental-config .additional-discounts .additional-result-row > .discount-help {
    justify-self: end;
  }
}