/* Consistent shopping surfaces. Scope these rules to inventory and published
   Specials; do not change the VDP, calculator, global header, or footer. */
.shopping-container,
#inventory-hero > .shopping-container,
.shopping-inventory > .shopping-container,
.deals-section > .shopping-container {
  box-sizing: border-box;
  width: min(1400px, calc(100% - 40px)) !important;
  max-width: min(1400px, calc(100% - 40px)) !important;
  margin-inline: auto;
}
.shopping-inventory .inv-layout { gap: 24px !important; }
.shopping-inventory .inv-layout > div { min-width: 0; }
.shopping-inventory .inv-grid,
#hb-specials-content .hb-specials-v1__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  gap: 20px !important;
  align-items: stretch;
}
.shopping-inventory .inv-card { min-width: 0; height: auto; }
.shopping-inventory .inv-photo { height: auto !important; aspect-ratio: 4 / 3; }
/* Match the feed's 4:3 photography and the VDP gallery. Letterbox other
   proportions instead of cropping vehicle edges or stretching the image. */
.shopping-inventory .inv-photo-link { position: absolute; inset: 0; }
.shopping-inventory .inv-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}
.shopping-inventory .inv-card:hover .inv-photo img { transform: none !important; }
.shopping-inventory .inv-grid { gap: 16px !important; }
.shopping-inventory .inv-body { flex: 1 1 auto; min-width: 0; padding: 14px; }
.shopping-inventory .inv-name,
.shopping-inventory .inv-details,
#hb-specials-content .hb-specials-v1__vehicle,
#hb-specials-content .hb-specials-v1__identity {
  min-width: 0;
  height: auto;
  max-height: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.shopping-inventory .inv-name { min-height: 0; line-height: 1.3; margin-bottom: 6px; }
.shopping-inventory .inv-details { min-height: 0; line-height: 1.4; margin-bottom: 8px; }
.shopping-inventory .inv-body > .inv-actions { margin-top: auto !important; }
.shopping-inventory .inv-actions .btn { min-height: 44px; white-space: normal; line-height: 1.3; }
.shopping-inventory .hp-options { min-width: 0; }
.shopping-inventory .hp-options { margin: 4px 0 8px; padding: 8px; }
.shopping-inventory .hp-option { padding: 8px; }
.shopping-inventory .hp-assumptions { margin-top: 3px; }
.shopping-inventory .hp-assumptions summary { padding: 6px 0; min-height: 32px; }
.shopping-inventory .hp-option { min-width: 0; }
.shopping-inventory .hp-option-title,
.shopping-inventory .hp-option-meta,
.shopping-inventory .hp-option-request { overflow-wrap: anywhere; }
.shopping-inventory .hp-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shopping-inventory .hp-options-grid-single { grid-template-columns: 1fr; }

/* A finance-only estimate uses the available width instead of a tall nested
   tile. Keep paired finance/lease options and missing-year prompts unchanged. */
.shopping-inventory .hp-options-grid-single .hp-option:has(.hp-option-value) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  padding: 4px 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.shopping-inventory .hp-options-grid-single .hp-option:has(.hp-option-value):hover {
  background: #eef5fb;
  box-shadow: none;
  transform: none;
}
.shopping-inventory .hp-options-grid-single .hp-option-title { grid-column: 1; grid-row: 1; }
.shopping-inventory .hp-options-grid-single .hp-option-value {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.shopping-inventory .hp-options-grid-single .hp-option:has(.hp-option-value) .hp-option-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
  line-height: 1.5;
}
.shopping-inventory .hp-options:has(.hp-options-grid-single .hp-option-value) .hp-assumptions {
  margin-top: 2px;
  border-top: 1px solid #d6e2ee;
}
.shopping-inventory .hp-options:has(.hp-options-grid-single .hp-option-value) .hp-assumptions summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 2px 6px;
}

/* Also used inside the script-free published Specials document. The server
   inlines this file after uploaded styles without rewriting the saved offers. */
#hb-specials-content .hb-specials-v1 { width: 100%; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#hb-specials-content .hb-specials-v1__card { display: flex; flex-direction: column; min-width: 0; }
#hb-specials-content .hb-specials-v1__media { flex: 0 0 auto; aspect-ratio: 16 / 10; }
#hb-specials-content .hb-specials-v1__content { display: flex; flex-direction: column; min-width: 0; padding: 16px; }
#hb-specials-content .hb-specials-v1__terms { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
#hb-specials-content .hb-specials-v1__term-list { text-align: left; }
#hb-specials-content .hb-specials-v1__payment { white-space: normal; overflow-wrap: anywhere; }
#hb-specials-content .hb-specials-v1__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
#hb-specials-content .hb-specials-v1__button { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px; white-space: normal; overflow-wrap: anywhere; }

/* Each visual row shares content-driven tracks. Nothing is truncated or given
   a fixed height; expanded disclosures grow the whole row and the iframe. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 660px) {
    .shopping-inventory .inv-card { display: grid; grid-template-rows: subgrid; grid-row: span 9; row-gap: 0; }
    .shopping-inventory .inv-photo { grid-row: 1; }
    .shopping-inventory .inv-body { display: grid; grid-template-rows: subgrid; grid-row: 2 / span 8; row-gap: 0; }
    .shopping-inventory .inv-body > .inv-name { grid-row: 1; }
    .shopping-inventory .inv-body > .inv-details { grid-row: 2; align-content: start; }
    .shopping-inventory .inv-body > .healey-srp-price-stack { grid-row: 3; align-self: end; }
    .shopping-inventory .inv-body > .inv-price { grid-row: 4; align-self: start; }
    .shopping-inventory .inv-body > .srp-price-details { grid-row: 5; }
    .shopping-inventory .inv-body > .hp-options { grid-row: 6; align-self: start; }
    .shopping-inventory .inv-body > .inv-actions { grid-row: 7; align-self: start; margin-top: 0 !important; }
    .shopping-inventory .inv-body > .inv-more-actions { grid-row: 8; }
  }
  /* Specials are inside an iframe: its width already excludes page gutters. */
  @media (min-width: 620px) {
    #hb-specials-content .hb-specials-v1__card { display: grid; grid-template-rows: subgrid; grid-row: span 10; row-gap: 0; }
    #hb-specials-content .hb-specials-v1__media { grid-row: 1; }
    #hb-specials-content .hb-specials-v1__content { display: grid; grid-template-rows: subgrid; grid-row: 2 / span 9; row-gap: 0; }
    #hb-specials-content .hb-specials-v1__content > .hb-specials-v1__make { grid-row: 1; }
    #hb-specials-content .hb-specials-v1__content > .hb-specials-v1__vehicle { grid-row: 2; }
    #hb-specials-content .hb-specials-v1__content > .hb-specials-v1__terms { grid-row: 3; }
    #hb-specials-content .hb-specials-v1__content > .hb-specials-v1__due { grid-row: 4; }
    #hb-specials-content .hb-specials-v1__content > .hb-specials-v1__expires { grid-row: 5; }
    #hb-specials-content .hb-specials-v1__content > .hb-specials-v1__actions { grid-row: 6 / span 2; grid-template-rows: subgrid; row-gap: 10px; }
    #hb-specials-content .hb-specials-v1__actions > .hb-specials-v1__button { grid-row: 1; }
    #hb-specials-content .hb-specials-v1__actions > .hb-specials-v1__button--secondary { grid-row: 2; }
    #hb-specials-content .hb-specials-v1__content > .hb-specials-v1__disclosure { grid-row: 8; }
    #hb-specials-content .hb-specials-v1__content > .hb-specials-v1__identity { grid-row: 9; }
  }
}

@media (max-width: 659px) {
  .shopping-container,
  #inventory-hero > .shopping-container,
  .shopping-inventory > .shopping-container,
  .deals-section > .shopping-container { width: calc(100% - 28px) !important; max-width: calc(100% - 28px) !important; }
  .shopping-inventory .inv-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .shopping-inventory .hp-options-grid:not(.hp-options-grid-single) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .shopping-inventory .hp-options-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 619px) {
  #hb-specials-content .hb-specials-v1__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  /* Normalize uploaded button sizing on phones without changing its font or
     colors. Natural height still allows long labels and enlarged text to wrap. */
  #hb-specials-content .hb-specials-v1__actions { gap: 8px; margin: 12px 0; }
  #hb-specials-content .hb-specials-v1__button {
    box-sizing: border-box;
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.25;
  }
  #hb-specials-content .hb-specials-v1__disclosure-toggle {
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.3;
  }
}
@media (min-width: 340px) and (max-width: 619px) {
  /* The embedded document already excludes page gutters. Typical phones have
     room for both actions in one row; very narrow screens keep stacked links. */
  #hb-specials-content .hb-specials-v1__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hb-specials-content .hb-specials-v1__actions > .hb-specials-v1__button:only-child { grid-column: 1 / -1; }
}