input,
.select,
textarea {
  display: inline-block;
  border-radius: 0.25rem;
  border: 2px solid var(--clr-primary);
  transition: 0.3s ease background-color, 0.3s ease border-color;

  color: inherit;
}

/* Header nav readability: add spacing between items */
.menu__nav-list {
  gap: 1.25rem; /* space between topics */
}

/* Cart link styled like Fortunamats (icon + badge) */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 6px;
}
.cart-link__icon { display: inline-block; }
.cart-link__text { font-size: 1.1rem; }
.cart-link__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--clr-primary);
  color: #fff;
  border-radius: 9999px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  min-width: 18px;
  text-align: center;
}

/* Mobile-only cart icon next to burger */
.mobile-cart { display: none; margin-right: 12px; }
.mobile-cart.cart-link { border-color: rgba(255,255,255,.35); padding: 4px 8px; }
.mobile-cart .cart-link__badge { top: -8px; right: -8px; }
@media (max-width: 980px) {
  .mobile-cart { display: inline-block; }
}

/* Wrap cart + burger at header end */
.header__actions { display: inline-flex; align-items: center; gap: 12px; }

/* Hero selector fixes */
/* Align GO button with selects and unify control sizes */
.hero-selector .constructor-step__fields {
  align-items: stretch; /* ensure equal heights */
}
.hero-selector .button#hero-go {
  height: 56px; 
  line-height: 56px;
  margin: 0; /* remove auto-center to align grid */
}
.hero-selector .nice-select,
.hero-selector select {
  height: 56px;
  line-height: 56px;
}

/* Ensure Make, Year, Model same width; prevent Year from being wider */
.hero-selector .constructor-step__field {
  min-width: 0; /* allow grid items to shrink evenly */
}
.hero-selector .nice-select { width: 100% !important; }

/* --- Products section cards (uniform size, aligned text/button) --- */
#products .advantage__items { align-items: stretch; }
#products .advantage__item { display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; height: 460px; }
#products .advantage__item > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
#products .advantage__item-desc { position: static; opacity: 1; background: #fff; color: #000; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: space-between; flex: 1 1 auto; }
#products .advantage__item-desc h3 { margin: 0; }
#products .advantage__item-desc p { margin: 0; text-align: center; }
#products .advantage__item-desc .button { margin-top: auto; min-width: 140px; }

@media (max-width: 1024px) {
  /* #products .advantage__item { height: 420px; } */
  /* #products .advantage__item > img { height: 220px; } */
}

@media (max-width: 640px) {
  #products .advantage__item { height: auto; }
  #products .advantage__item > img { height: auto; }
}


/* Fix horizontal scroll caused by large images in Products section */
#products .advantage__items { overflow-x: hidden; }
#products .advantage__item { overflow: hidden; }
#products .advantage__item img { width: 100%; max-width: 100%; display: block; }

/* Mobile: make advantages descriptions flex and wrap */
@media (max-width: 540px) {
  .advantage__item-desc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

input,
textarea {
  padding: 0.625rem 1.25rem;
}

input:active,
input:focus-visible,
input:focus,
textarea:active,
textarea:focus-visible,
textarea:focus,
.select:active,
.select:focus-visible {
  outline: 2px solid #e1817c;
  outline-offset: 2px;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  padding: 0;
  font: inherit;
  color: currentColor;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: inline-grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  clip-path: circle(50%);
  transform: scale(0);
  transform-origin: center;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--clr-primary);
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
}


@media (max-width: 900px) {
  .hero { padding: 10rem 0 0.5rem 0; }
  .hero__title { margin-bottom: 1.5rem; }
  .hero__sub-title { margin-bottom: 2rem; }
  .hero-selector { margin-top: 0.5rem; }
  .hero-scroll-down { margin-top: 0.75rem; }
  .hero__text { margin-bottom: 2rem; }
}

/* On very small screens, hide the scroll arrows to reclaim space */
@media (max-width: 560px) {
  .hero-scroll-down { display: none; }
}

/* === Configurator description: align images and cards (tab 0) === */
/* Make the two side-by-side images the same height and properly cropped */
#tab0 .row > [class*="col-"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Grid for feature cards and equalize card heights */
.widgetblock-preimdesc181 ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.widgetblock-preimdesc181 .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
}
.widgetblock-preimdesc181 .item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}
.widgetblock-preimdesc181 .item .title { margin: 10px 0 4px; font-weight: 700; }
.widgetblock-preimdesc181 .item .desc { margin: 0; }

@media (max-width: 992px) {
  .widgetblock-preimdesc181 ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .widgetblock-preimdesc181 ul { grid-template-columns: 1fr; }
}

/* === Products section: layout + spacing tweaks === */
/* Goal: Card 1 full-width on top; cards 2 and 3 side-by-side below. */
section#products { padding-top: 1.25rem; padding-bottom: 1.25rem; }
#products .section__title { margin-bottom: 0.75rem; }

/* Define grid with template areas; default stack for very small screens */
#products .advantage__items {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "item1"
    "item2"
    "item3";
  gap: 12px;
  align-items: stretch;
}

/* Ensure auto height and moderate image heights to fit all on one screen */
#products .advantage__item { height: auto; }
/* #products .advantage__item > img { height: 220px; } */

/* Place items into grid areas */
#products .advantage__item:nth-child(1) { grid-area: item1; }
#products .advantage__item:nth-child(2) { grid-area: item2; }
#products .advantage__item:nth-child(3) { grid-area: item3; }

@media (min-width: 560px) {
  #products .advantage__items {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "item1 item1"
      "item2 item3";
    gap: 14px; /* slightly larger gap when there is room */
  }
  /* Give the hero card a slightly taller visual */
  /* Removed fixed height override for first card image to improve responsiveness */
}

/* Desktop: reduce width of products grid and center */
@media (min-width: 1024px) {
  #products .advantage__items {
    width: 50%;
    margin: 0 auto;
  }
}

/* FAQ mobile tweaks: make question titles smaller on small screens */
@media (max-width: 768px) {
  .faq__item-title { font-size: 16px; }
}
@media (max-width: 560px) {
  .faq__item-title { font-size: 14px; }
}
@media (max-width: 400px) {
  .faq__item-title { font-size: 13px; }
}