/*********************************
Header Vehicle (YMM) Dropdown
*********************************/
/* Standalone accent color owned by this stylesheet (not the theme's
   --color-primary/--color-tertiary/--color-accent tokens in stylesheet.css)
   so the trigger stands out from the muted wishlist/compare icons next to
   it and stays this color even if the theme's own palette changes later. */
:root {
  --ymm-accent: #ff6a00;
  --ymm-accent-hover: #e05e00;
}
/* USED: Header vehicle dropdown button. Color is set explicitly here (not
   inherited from the theme's ".header-icon { color: var(--color-tertiary) }"
   wrapper rule) because <button> elements don't inherit text color from
   ancestors the way the wishlist/compare <a> tags next to this do - without
   this the icon/label would render in the browser's default button color
   instead of matching (or in this case, standing out from) the theme. */
.vehicle-button {
  margin: 0;
  overflow: visible;
  text-transform: none;
  background: none;
  border: none;
  line-height: 26px;
  color: var(--ymm-accent);
}
.vehicle-button:hover {
  background: none;
  border: none;
  color: var(--ymm-accent-hover);
}
/* USED: Header vehicle dropdown container */
.vehicle-dropdown-container {
  background: #f8f8f9;
  z-index: 99;
  padding: 28px;
}
/* USED: Mobile/tablet panel positioning. #vehicle isn't the right-most
   header item (cart is), so the default pull-right/right:0 anchor (which
   works for cart because it IS flush against the viewport's right edge)
   would hang a wide panel far off the left edge of the screen. left/right
   here can't just be set in CSS though - #vehicle has position:relative
   (from Bootstrap's ".dropdown" rule), so percentages/lengths on the menu
   would resolve against the narrow button's own box, not the viewport.
   ymm_header.js switches the menu to position:fixed with a JS-computed top
   on open at this breakpoint instead; these are just its base/reset values. */
@media (max-width: 991px) {
  #vehicle .dropdown-menu {
    width: auto;
    max-width: none;
  }
}
@media (min-width: 992px) {
  .vehicle-dropdown-container {
    min-width: 700px;
    max-width: 780px;
  }
}
/* USED: Keep the vehicle icon visible on mobile/tablet (overrides the
   blanket ".header-icon { display: none }" mobile rule in the theme's
   own stylesheet, which hides phone/wishlist/compare below 992px) */
@media (max-width: 991px) {
  .header-vehicle {
    display: block;
  }
}
/* USED: "ADD A VEHICLE"-style panel heading/instruction */
.vehicle-panel-title {
  margin: 0 0 5px;
  font-weight: bold;
}
.vehicle-panel-instruction {
  margin: 0 0 5px;
  color: #666;
}
.vehicle-panel-required-note {
  margin: 0 0 15px;
  font-size: 12px;
  color: #666;
}
/* USED: Saved-vehicle select + "or" divider above the Make/Model/Engine/Year row */
.vehicle-panel-divider {
  text-align: center;
  font-style: italic;
  color: #555;
  margin: 15px 0;
}
/* USED: Make/Model/Engine/Year row, each field label-above-select */
.vehicle-panel-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}
.vehicle-panel-field {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
}
/* Labels and checkbox text get an explicit color - otherwise they inherit the
   dropdown's light grey (#bababa), barely visible on the panel background.
   #444 = the panel heading. */
.vehicle-panel-field label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #444;
}
/* USED: Remember/save-vehicle checkboxes */
.vehicle-panel-options {
  margin-bottom: 15px;
}
.vehicle-panel-checkbox {
  display: block;
  font-weight: normal;
  margin-bottom: 8px;
  color: #444;
}
/* USED: Standalone spaced-out submit row (not btn-block) */
.vehicle-panel-submit {
  text-align: right;
}
.vehicle-panel-submit .btn {
  min-width: 160px;
}
/* USED: Selected-vehicle summary row (Make/Model/Engine/Year side by side) */
.vehicle-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 15px;
}
.vehicle-summary-item {
  display: flex;
  flex-direction: column;
}
.vehicle-summary-label {
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  color: #777;
}
.vehicle-summary-value {
  font-size: 15px;
}
.vehicle-panel-garage-link {
  margin-left: 15px;
}
/* USED: "Your Vehicle" state - the selected vehicle as one prominent line,
   then Manage My Garage (left) and Clear / Change Vehicle (right). */
.vehicle-current-name {
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: bold;
  /* Same as the panel heading - otherwise it inherits the dropdown's light grey. */
  color: #444;
}
.vehicle-current-name .fa {
  margin-right: 4px;
}
.vehicle-current-engine {
  font-weight: normal;
}
.vehicle-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.vehicle-panel-actions .btn {
  min-width: 0;
}
/* USED: one bottom button row - Manage My Garage / Save to My Garage on the
   left (logged-in only), Clear / Change Vehicle on the right. */
.vehicle-panel-actions-left {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-right: auto;
}
#vehicle-panel-summary .vehicle-panel-field {
  margin-bottom: 15px;
}
/* USED: "Saved in your garage" badge on the vehicle-name line. */
.vehicle-garage-saved {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: #3c763d;
  vertical-align: middle;
}
.vehicle-garage-saved .fa {
  margin-right: 3px;
}
/* In the picker (no vehicle yet), Manage My Garage sits left of Submit. */
.vehicle-panel-submit .vehicle-panel-garage-btn-form {
  float: left;
  min-width: 0;
  margin-top: 2px;
}
/* USED: Colored action buttons - Manage My Garage green, Clear Vehicle red,
   white text. Hardcoded (not the theme's --color-* tokens), like the fitment
   box colors below, so they stay green/red whatever the theme palette does.
   Shades are dark enough for white text to stay readable. */
.vehicle-dropdown-container .vehicle-panel-garage-btn {
  background: #218838;
  border-color: #1e7e34;
  color: #fff;
}
.vehicle-dropdown-container .vehicle-panel-garage-btn:hover,
.vehicle-dropdown-container .vehicle-panel-garage-btn:focus,
.vehicle-dropdown-container .vehicle-panel-garage-btn:active {
  background: #1a6e2e;
  border-color: #175f27;
  color: #fff;
}
.vehicle-dropdown-container #clear-vehicle {
  background: #c9302c;
  border-color: #ac2925;
  color: #fff;
}
.vehicle-dropdown-container #clear-vehicle:hover,
.vehicle-dropdown-container #clear-vehicle:focus,
.vehicle-dropdown-container #clear-vehicle:active {
  background: #ac2925;
  border-color: #8b211e;
  color: #fff;
}
/* USED: Phones only (tablet/desktop keep the single left/right button row).
   The one-row layout doesn't fit, and letting it wrap scattered the buttons
   unevenly - so lay them out as an even 2-column grid in the same order:
   Manage | Save, then Clear | Change. */
@media (max-width: 767px) {
  /* A bit more width for the 2-column buttons, so "Manage My Garage" /
     "Save to My Garage" stay on one line down to 360px screens. */
  .vehicle-dropdown-container {
    padding: 18px;
  }
  /* 12px = the theme's own .btn size. */
  .vehicle-panel-actions .btn,
  .vehicle-panel-form .vehicle-panel-submit .btn {
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.4;
  }
  /* One field per row, as before the padding change let two squeeze in. */
  .vehicle-panel-fields .vehicle-panel-field {
    flex: 1 1 100%;
  }
  .vehicle-panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Its buttons become grid cells alongside Clear/Change. */
  .vehicle-panel-actions-left {
    display: contents;
  }
  /* Once saved (no Save button), Manage My Garage takes the whole top row. */
  .vehicle-panel-actions-left > :only-child {
    grid-column: 1 / -1;
  }
  .vehicle-panel-actions .btn {
    width: 100%;
    white-space: normal;
  }
  .vehicle-garage-saved {
    display: block;
    margin: 4px 0 0;
  }
  /* Picker footer: Manage My Garage (or Cancel) and Submit share the row. */
  .vehicle-panel-form .vehicle-panel-submit {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .vehicle-panel-form .vehicle-panel-submit .vehicle-panel-garage-btn-form {
    float: none;
    flex: 1;
    margin: 0;
  }
  .vehicle-panel-form .vehicle-panel-submit #ymm-submit {
    flex: 1;
    min-width: 0;
  }
  .vehicle-panel-form .vehicle-panel-submit .vehicle-panel-cancel {
    flex: 1;
    min-width: 0;
    margin: 0;
  }
}
/* USED: Cancel (picker opened via Change Vehicle) - white button, black text. */
.vehicle-dropdown-container .vehicle-panel-cancel {
  margin-right: 10px;
  background: #fff;
  border: 1px solid #bbb;
  color: #000;
}
.vehicle-dropdown-container .vehicle-panel-cancel:hover,
.vehicle-dropdown-container .vehicle-panel-cancel:focus,
.vehicle-dropdown-container .vehicle-panel-cancel:active {
  background: #f0f0f0;
  border-color: #999;
  color: #000;
}
/* USED: On mobile, the vehicle icon was sandwiched between the category/search
   toggle buttons and the cart (visual DOM order: cats, search, vehicle, cart).
   It should stay grouped with the other icons on the right, just as the
   leftmost item in that group instead of the third. All four are already
   siblings within the same flex section, so a plain order swap is enough -
   no need to touch the logo or search sections at all. */
@media (max-width: 991px) {
  .header-vehicle {
    order: -1;
  }
}
/*********************************
Product Page Fitment Box
*********************************/
/* USED: "This part fits/doesn't fit/check fit" box on the product page,
   just above the price box. Colors are hardcoded here (not the theme's
   --color-* tokens) so fit/no-fit/check-fit stay green/red/orange
   regardless of the theme's own palette - reuses --ymm-accent(-hover)
   for the "check fit" prompt to match the header trigger's standout color. */
.ymm-fitment-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 15px 0;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}
.ymm-fitment-box i {
  font-size: 16px;
}
.ymm-fitment-fits {
  background: #eafaf0;
  border: 1px solid #2ecc71;
  color: #1e8449;
}
.ymm-fitment-no-fit {
  background: #fdecea;
  border: 1px solid #e74c3c;
  color: #c0392b;
}
/* USED: Clickable - opens the header's vehicle dropdown (see ymm_header.js) */
.ymm-fitment-check {
  background: #fff4ea;
  border: 1px solid var(--ymm-accent);
  color: var(--ymm-accent);
  cursor: pointer;
}
.ymm-fitment-check:hover {
  background: #ffe9d6;
  color: var(--ymm-accent-hover);
  border-color: var(--ymm-accent-hover);
}