/* Project styles layered on top of Bootstrap. Kept minimal — the design system
   is Bootstrap's default palette (UI §3). */

.object-fit-cover {
  object-fit: cover;
}

/* Brand logo. The SVGs carry their own aspect ratio, so only the height is
   set; `width: auto` overrides the intrinsic width attribute. */
.brand-logo {
  height: 2.25rem;
  width: auto;
}

.brand-logo-lg {
  height: 3rem;
}

@media (max-width: 575.98px) {
  .brand-logo,
  .brand-logo-lg {
    height: 1.85rem;
  }
}

.footer-logo {
  height: 4.5rem;
  width: auto;
}

/* Category carousel (storefront/partials/_category_nav.html).
   `--category-item-size` is the one knob: it drives the pictogram box, and the
   labels and arrows follow from it. Bigger than an icon, smaller than a card. */
:root {
  --category-item-size: 3.25rem;
}

.category-icon {
  display: block;
  width: var(--category-item-size);
  height: var(--category-item-size);
  object-fit: contain;
  color: inherit;
  font-size: calc(var(--category-item-size) * 0.55);
}

/* Bundled pictograms are monochrome SVGs painted with the current text colour,
   so they follow the theme; an <img> could not (it is an isolated document). */
.category-icon-mask {
  background-color: currentColor;
  -webkit-mask: var(--category-icon-url) center / contain no-repeat;
  mask: var(--category-icon-url) center / contain no-repeat;
}

.category-carousel {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 0.5rem 0;
}

.category-carousel::-webkit-scrollbar {
  display: none;
}

.category-carousel-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: calc(var(--category-item-size) + 2.5rem);
  color: var(--bs-secondary-color);
}

.category-carousel-item:hover,
.category-carousel-item:focus-within {
  color: var(--bs-primary);
}

.category-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: 0;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 0 0 1px var(--bs-border-color);
}

@media (min-width: 992px) {
  .product-purchase-column {
    position: sticky;
    top: 1rem;
  }
}

/* Product gallery (catalog/_product_media.html). A square stage so switching
   photos never makes the page jump, with `contain` so no photo is cropped. */
.product-gallery-zoom {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.product-gallery-img,
.product-gallery-fullscreen-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The photos are mostly light, so Bootstrap's white arrows would vanish. */
.product-gallery .carousel-control-prev-icon,
.product-gallery .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}

/* The thumbnails ARE the carousel's `.carousel-indicators` — that is what makes
   Bootstrap move the `active` mark on swipe too — restyled from the default
   overlaid dashes into a static row under the stage. */
.product-gallery-thumbs {
  position: static;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.product-gallery-thumbs [data-bs-target] {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  padding: 0;
  text-indent: 0;
  overflow: hidden;
  background-color: var(--bs-body-bg);
  border: 2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  opacity: 0.6;
}

.product-gallery-thumbs .active {
  border-color: var(--bs-primary);
  opacity: 1;
}

.product-gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product description: sanitized editor HTML (catalog/richtext.py). The
   sanitizer strips `class`, so Bootstrap's `.table` cannot be used and every
   rule hangs off this wrapper, reusing Bootstrap's theme variables. */
.product-description h3 {
  font-size: 1.1rem;
  margin-top: 1.25rem;
}

.product-description h4 {
  font-size: 1rem;
  margin-top: 1rem;
}

.product-description > :first-child {
  margin-top: 0;
}

.product-description > :last-child {
  margin-bottom: 0;
}

/* ProseMirror wraps every list item and table cell content in a <p>. */
.product-description li > p,
.product-description th > p,
.product-description td > p {
  margin-bottom: 0;
}

/* `display: block` + `overflow-x: auto`: a wide comparison table scrolls inside
   its own box on a phone instead of widening the page. */
.product-description table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.product-description th,
.product-description td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  vertical-align: top;
}

.product-description th {
  background-color: var(--bs-secondary-bg);
  font-weight: 600;
}

.product-description tr:nth-child(even) td {
  background-color: var(--bs-tertiary-bg);
}

/* The navbar search lives outside the offcanvas: on mobile it wraps onto its
   own row under the brand (a drawer would hide it), and at ≥lg it rejoins the
   bar and takes the stretch the offcanvas used to hand it. */
.navbar-search {
  width: 100%;
}

/* One block of marca/modelo/año selects, in two guises: open inside the menu
   on mobile — where `.collapse` would hide them — and a dropdown panel at ≥lg,
   positioned so it never pushes the account/cart icons around. */
@media (max-width: 991.98px) {
  .vehicle-filter-panel {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .navbar-search {
    width: auto;
    flex: 1 1 auto;
  }

  .navbar-search .input-group > .form-control,
  .navbar-search .input-group > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  .navbar-expand-lg .offcanvas {
    flex-grow: 0;
  }

  .vehicle-filter-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
  }
}

/* Login social (spec social login §6.1). Colores de las pautas de marca de
   Google para el botón claro: no se adaptan al tema del sitio. */
.btn-social-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background-color: #fff;
  border: 1px solid #747775;
  color: #1f1f1f;
}

.btn-social-google:hover,
.btn-social-google:focus-visible,
.btn-social-google:active {
  background-color: #f2f2f2;
  border-color: #747775;
  color: #1f1f1f;
}

.social-login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-login-divider::before,
.social-login-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--bs-border-color);
}

/* Catalog category filter (catalog/_filters.html). A flat list-group: the
   parent of the active subcategory stays tinted, children are indented rows. */
.category-filter-open {
  color: var(--bs-primary);
  font-weight: 600;
}

.category-filter-child {
  padding-left: 2rem;
}

/* Footer "Síguenos" icons: fixed round buttons, one glyph each. */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

/* Navbar dropdowns (language, account, cart) inside the mobile offcanvas.
   Bootstrap skips Popper for dropdowns in a `.navbar` (it marks the menu
   `data-bs-popper="static"`), so `dropdown-menu-end` pinned each menu to its
   button's right edge and it spilled off the left of the screen. Below lg the
   button row itself becomes the containing block: every menu drops right under
   it, spanning the full panel width. */
@media (max-width: 991.98px) {
  .navbar-actions {
    position: relative;
  }

  .navbar-actions .dropdown {
    position: static;
  }

  .navbar-actions .dropdown-menu[data-bs-popper] {
    left: 0;
    right: 0;
    min-width: 0 !important; /* the cart menu carries an inline 20rem */
  }
}

/* Search suggestions (catalog/_search_suggestions.html): a dropdown hanging
   from the navbar search, full width of the search box at every size. It
   collapses to nothing when the server sends an empty fragment. */
.navbar-search {
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  margin-top: 0.25rem;
  max-height: 70vh;
  overflow-y: auto;
}

.search-suggestions:empty {
  display: none;
}

.search-suggestion-thumb {
  display: inline-block;
  width: 40px;
  height: 40px;
}