/**
 * ATOM X desktop storefront layout pass.
 *
 * Keeps every homepage block and its native behaviour while removing clipped
 * cards, duplicate scrollbars and avoidable vertical gaps.
 *
 * @author Grupo Elite Murcia Business SL (ATOM X ELITE)
 * @copyright 2026 Grupo Elite Murcia Business SL
 * @license Academic Free License (AFL 3.0)
 */

/* The floating bxSlider items have no flow height before JavaScript starts.
 * Reserve the real 1900x700 desktop ratio so the rest of the homepage does not
 * jump down after first paint. */
@media (min-width: 768px) {
  body#index #homepage-slider {
    aspect-ratio: 19 / 7;
    max-height: 707px;
    min-height: 0;
    overflow: hidden;
  }
}

@media (min-width: 992px) {
  /* Put the sale controls on the same line as its title and centre the current
   * three-card promotion instead of leaving an empty fourth column. */
  body#index #angarspecials {
    position: relative;
  }

  body#index #angarspecials .atomxflashsales-specials__controls {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    margin: 0;
  }

  body#index #angarspecials .products:not(:has(> article:nth-child(4))) {
    justify-content: center;
  }

  /* Every rail keeps arrow, keyboard, wheel and drag navigation. The native
   * scrollbar duplicated those controls and made several sections look cut. */
  body#index #angarspecials .products,
  body#index .atomx-bestsellers-strip .products,
  body#index .atomx-top-rated-products__track,
  body#index #atomx-conventions-home .atomxch__rail {
    overflow-y: hidden;
    scrollbar-width: none;
  }

  body#index #angarspecials .products::-webkit-scrollbar,
  body#index .atomx-bestsellers-strip .products::-webkit-scrollbar,
  body#index .atomx-top-rated-products__track::-webkit-scrollbar,
  body#index #atomx-conventions-home .atomxch__rail::-webkit-scrollbar {
    display: none;
  }

  body#index #angarspecials .products,
  body#index .atomx-bestsellers-strip .products,
  body#index .atomx-top-rated-products__track {
    padding-bottom: 4px;
  }

  /* Preserve the editorial workstation, but join it more tightly to reviews
   * and brands so the lower homepage reads as one sequence. */
  body#index #atomx-home-workstation {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  body#index #atomx-home-brands {
    margin-bottom: 28px !important;
    padding-top: 20px;
    padding-bottom: 22px;
  }

  body#index #atomx-home-brands .atomx-home-brands__item,
  body#index #atomx-home-brands .atomx-home-brands__link {
    min-height: 110px;
  }

  body#index #atomx-home-brands .atomx-home-brands__logo {
    height: 80px;
  }

  body#index #atomx-conventions-home {
    margin-top: 24px;
    margin-bottom: 28px;
  }
}

@media (min-width: 1200px) {
  /* Four complete convention cards fit the fixed 1170px editorial canvas. */
  body#index #atomx-conventions-home .atomxch__rail {
    grid-auto-columns: calc((100% - 36px) / 4);
    padding-bottom: 4px;
  }

  body#index #atomx-conventions-home .atomxch__card-copy,
  body#index #atomx-conventions-home .atomxch__card-actions {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (min-width: 1500px) {
  /* Wide desktops show whole cards rather than a thin, accidental-looking
   * fragment of the next one. Smaller desktops keep the existing peek cue. */
  body#index #angarfeatured .products > article.product-miniature {
    flex: 0 0 calc((100% - 48px) / 4) !important;
    width: calc((100% - 48px) / 4) !important;
    min-width: calc((100% - 48px) / 4) !important;
    max-width: calc((100% - 48px) / 4) !important;
  }

  body#index .atomx-top-rated-products__track > .atomx-top-rated-review-shell {
    flex: 0 0 calc((100% - 28px) / 3);
  }
}

/* Readability fixes found by the live WCAG pass. */
body#index .axgc-message__content header time {
  color: #666 !important;
  font-size: 10px !important;
}

body#index #angarspecials .regular-price {
  color: #666 !important;
}

@media (prefers-reduced-motion: reduce) {
  body#index #angarspecials .products,
  body#index .atomx-bestsellers-strip .products,
  body#index .atomx-top-rated-products__track,
  body#index #atomx-conventions-home .atomxch__rail {
    scroll-behavior: auto !important;
  }
}

/* The four shopping rails use the compact Novedades card as their shared
 * presentation. Product choice, quick add and reorder actions remain native. */
body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature {
  box-sizing: border-box;
  height: auto !important;
  min-width: 0;
  border: 1px solid #dce0e3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 7px 21px rgb(18 23 28 / 8%) !important;
  overflow: hidden;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .thumbnail-container {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 354px;
  padding: 10px 10px 14px !important;
  background: #fff !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-left {
  float: none !important;
  flex: 0 0 auto;
  width: 100% !important;
  margin: 0 !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-image-container,
body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .thumbnail.product-thumbnail {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-thumbnail picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-thumbnail img {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 176px !important;
  object-fit: contain !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-right {
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  width: 100% !important;
  background: #fff !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-description {
  flex: 1 1 auto;
  min-height: 48px;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-title {
  display: -webkit-box !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 21px !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-title a {
  color: #161616 !important;
  line-height: inherit !important;
}

/* Best sellers expose extra catalogue metadata inside the card. Its own
 * section already states why those products are shown. */
body#index :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature :is(.pl_reference, .pl_manufacturer, .product-desc, .pl-reviews, .atomx-hot-anchor, .availability, .button-container > .lnk_view),
body#index #angarfeatured article.product-miniature .atomx-featured-review-slot {
  display: none !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-bottom {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  margin-top: auto !important;
  padding: 0 !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-price-and-shipping {
  min-height: 43px;
  margin: 0 0 9px !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.3;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-price-and-shipping .vat-line {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .button-container {
  box-sizing: border-box;
  display: block !important;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .add-to-cart-or-refresh {
  width: 100%;
  margin: 0;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .button-container .btn.add-to-cart:not(.ax-card-quickadd-native-hidden) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100% !important;
  min-height: 44px;
  padding: 6px !important;
  border: 1px solid #111 !important;
  border-radius: 4px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.2;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature :is(.ax-card-picker__trigger, .atomx-size-choice-button:not(.ax-card-quickadd-native-hidden)) {
  min-height: 44px;
  border-radius: 4px !important;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature :is(.ax-card-picker__actions, .ax-card-quickadd) {
  max-width: 100%;
}

/* Keep both variant actions readable inside the narrow home carousel cards. */
body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .ax-card-picker__actions {
  gap: 4px;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .ax-card-picker__actions > .ax-card-picker__trigger {
  flex: 1 1 60%;
  min-width: 0;
  gap: 3px;
  padding: 5px 4px;
  font-size: 11px;
  line-height: 1.15;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .ax-card-picker__trigger > span:first-child,
body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .ax-card-picker__details > span {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .ax-card-picker__actions > .ax-card-picker__details {
  flex: 0 0 auto;
  max-width: none;
  min-width: 44px;
  padding: 5px 6px;
  font-size: 11px;
  line-height: 1.15;
}

@media (min-width: 1200px) {
  body#index #wrapper #content-wrapper :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers) .products > article.product-miniature {
    flex: 0 0 calc((100% - 80px) / 6) !important;
    width: calc((100% - 80px) / 6) !important;
    min-width: calc((100% - 80px) / 6) !important;
    max-width: calc((100% - 80px) / 6) !important;
  }

  body#index .atomx-reorder-home__track {
    grid-auto-columns: calc((100% - 80px) / 6);
  }
}

@media (max-width: 1199px) and (min-width: 768px) {
  body#index #wrapper #content-wrapper :is(#angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers) .products > article.product-miniature {
    flex: 0 0 calc((100% - 32px) / 3) !important;
    width: calc((100% - 32px) / 3) !important;
    min-width: calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;
  }
}

@media (max-width: 767px) {
  body#index #wrapper #content-wrapper :is(#angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers) .products > article.product-miniature {
    flex: 0 0 calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    min-width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
  }

  body#index .atomx-reorder-home__track {
    grid-auto-columns: calc((100% - 12px) / 2);
  }

  body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .thumbnail-container {
    min-height: 300px;
    padding: 8px 8px 10px !important;
  }

  body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-image-container,
  body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .thumbnail.product-thumbnail {
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
  }

  body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-thumbnail img {
    max-height: 150px !important;
  }

  body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .product-title {
    font-size: 12px !important;
  }

  body#index :is(#angarnew, #angarfeatured, #angarbest, #atomxstockfresh-curated-bestsellers, #atomx-reorder-home) article.product-miniature .button-container .btn.add-to-cart:not(.ax-card-quickadd-native-hidden) {
    font-size: 11px !important;
  }
}

/* Curated best sellers use a separate module template whose centred catalogue
 * rules are more specific than the regular homepage card rules above. */
body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers).atomx-bestsellers-strip {
  box-sizing: border-box;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) .products {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature :is(.product-left, .product-right, .product-description, .product-bottom, .product-price-and-shipping, .product-title, .product-title a, .price, .vat-line) {
  box-sizing: border-box;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .product-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 21px !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature :is(.product-image-container, .thumbnail.product-thumbnail, .product-thumbnail picture, .product-thumbnail img) {
  border: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .product-image-container {
  padding: 0 !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .product-description {
  min-height: 42px !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .product-right,
body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .product-price-and-shipping {
  padding: 0 !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .product-price-and-shipping .price {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .product-price-and-shipping .vat-line {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .product-price-and-shipping small {
  font-size: 10px !important;
  font-weight: 500 !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .ax-card-quickadd {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .ax-card-quickadd__option {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 2px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 3px 4px !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #111 !important;
  white-space: normal !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .ax-card-quickadd__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 13px !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .ax-card-quickadd__label,
body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .ax-card-quickadd__price {
  display: block;
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left !important;
  line-height: 1.1 !important;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .ax-card-quickadd__label {
  grid-row: 1;
  font-size: 10px !important;
  font-weight: 600;
}

body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) article.product-miniature .ax-card-quickadd__price {
  grid-row: 2;
  margin: 2px 0 0 !important;
  font-size: 9px !important;
}

@media (max-width: 767px) {
  body#index #wrapper #content-wrapper :is(#angarbest, #atomxstockfresh-curated-bestsellers) .products > article.product-miniature {
    flex-basis: calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    min-width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
  }
}