/* jp-quickview-20261113
   Vista rápida no estilo Classic PrestaShop 9.2 (classic-theme 3.1.2,
   _dev/css/components/featuredproducts.scss).
   Shop 1 only (body.jp-shop-1). Does not change product.tpl or custom.css.
   qv3: after the listing-box change the description is in normal flow and
   the card height is auto, so the old bottom: 3.125rem offset no longer
   lands on the image. The bar is now overlaid on the image grid cell and
   slides up there only, still behind name / ISO yield / price / JetCart.
   qv5: description uses position: relative !important so the Classic
   hover line stays at the top of the title block, not the card. */

/* Description (title, ISO pages, price, JetCart) always above the bar */
body.jp-shop-1 #products .product-description,
body.jp-shop-1 .featured-products .product-description,
body.jp-shop-1 .product-accessories .product-description {
  z-index: 1;
}

body.jp-shop-1 #products .highlighted-informations .quick-view,
body.jp-shop-1 .featured-products .highlighted-informations .quick-view,
body.jp-shop-1 .product-accessories .highlighted-informations .quick-view {
  font-size: 1rem;
  color: #7a7a7a;
  text-decoration: none;
}

body.jp-shop-1 #products .highlighted-informations .quick-view .material-icons,
body.jp-shop-1 .featured-products .highlighted-informations .quick-view .material-icons,
body.jp-shop-1 .product-accessories .highlighted-informations .quick-view .material-icons {
  vertical-align: middle;
}

body.jp-shop-1 #products .highlighted-informations .quick-view:hover,
body.jp-shop-1 .featured-products .highlighted-informations .quick-view:hover,
body.jp-shop-1 .product-accessories .highlighted-informations .quick-view:hover {
  color: #2fb5d2;
}

/* Desktop/tablet: stack the bar on the image cell (any image height).
   Mobile listing stays on the flex column; the bar is hidden below 768px. */
@media (min-width: 768px) {
  body.jp-shop-1 #products .thumbnail-container,
  body.jp-shop-1 .featured-products .thumbnail-container,
  body.jp-shop-1 .product-accessories .thumbnail-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  body.jp-shop-1 #products .thumbnail-container > .product-thumbnail,
  body.jp-shop-1 .featured-products .thumbnail-container > .product-thumbnail,
  body.jp-shop-1 .product-accessories .thumbnail-container > .product-thumbnail {
    grid-area: 1 / 1;
  }

  /* Keep flags on the image cell so they do not create a third row */
  body.jp-shop-1 #products .thumbnail-container > .product-flags,
  body.jp-shop-1 .featured-products .thumbnail-container > .product-flags,
  body.jp-shop-1 .product-accessories .thumbnail-container > .product-flags {
    grid-area: 1 / 1;
  }

  body.jp-shop-1 #products .thumbnail-container > .product-description,
  body.jp-shop-1 .featured-products .thumbnail-container > .product-description,
  body.jp-shop-1 .product-accessories .thumbnail-container > .product-description {
    grid-area: 2 / 1;
    z-index: 1;
  }

  body.jp-shop-1 #products .highlighted-informations,
  body.jp-shop-1 .featured-products .highlighted-informations,
  body.jp-shop-1 .product-accessories .highlighted-informations {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: stretch;
    position: relative;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 3.125rem;
    z-index: 0;
    box-shadow: none;
    background: #fff;
    text-align: center;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s, box-shadow 0.3s;
  }

  body.jp-shop-1 #products .thumbnail-container:hover .highlighted-informations,
  body.jp-shop-1 #products .thumbnail-container:focus .highlighted-informations,
  body.jp-shop-1 #products .thumbnail-container:hover .highlighted-informations.no-variants,
  body.jp-shop-1 #products .thumbnail-container:focus .highlighted-informations.no-variants,
  body.jp-shop-1 .featured-products .thumbnail-container:hover .highlighted-informations,
  body.jp-shop-1 .featured-products .thumbnail-container:focus .highlighted-informations,
  body.jp-shop-1 .featured-products .thumbnail-container:hover .highlighted-informations.no-variants,
  body.jp-shop-1 .featured-products .thumbnail-container:focus .highlighted-informations.no-variants,
  body.jp-shop-1 .product-accessories .thumbnail-container:hover .highlighted-informations,
  body.jp-shop-1 .product-accessories .thumbnail-container:focus .highlighted-informations,
  body.jp-shop-1 .product-accessories .thumbnail-container:hover .highlighted-informations.no-variants,
  body.jp-shop-1 .product-accessories .thumbnail-container:focus .highlighted-informations.no-variants {
    top: auto;
    bottom: auto; /* overrides custom.css bottom: 3.125rem, now meaningless */
    box-shadow: none;
    background: #fff;
    z-index: 0;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Classic 9.2 line at the top of the title block */
  body.jp-shop-1 #products .thumbnail-container:hover .product-description::after,
  body.jp-shop-1 #products .thumbnail-container:focus .product-description::after,
  body.jp-shop-1 .featured-products .thumbnail-container:hover .product-description::after,
  body.jp-shop-1 .featured-products .thumbnail-container:focus .product-description::after,
  body.jp-shop-1 .product-accessories .thumbnail-container:hover .product-description::after,
  body.jp-shop-1 .product-accessories .thumbnail-container:focus .product-description::after {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    content: "";
    border-top: 1px solid #7a7a7a;
    opacity: 0.25;
  }

  /* description must be a positioning context for the ::after line.
     listing-box sets position: static !important at 992px+, which made
     the hover line (absolute; top: 0) sit at the top of the card. */
  body.jp-shop-1 #products .product-description,
  body.jp-shop-1 .featured-products .product-description,
  body.jp-shop-1 .product-accessories .product-description {
    position: relative !important;
  }
}

@media (max-width: 767px) {
  body.jp-shop-1 #products .highlighted-informations,
  body.jp-shop-1 .featured-products .highlighted-informations,
  body.jp-shop-1 .product-accessories .highlighted-informations,
  body.jp-shop-1 #products .thumbnail-container:hover .product-description::after,
  body.jp-shop-1 .featured-products .thumbnail-container:hover .product-description::after,
  body.jp-shop-1 .product-accessories .thumbnail-container:hover .product-description::after {
    display: none;
  }
}

/* jp-equalcards-20261113
   Equal-height listing cards on shop 1 (category, search, homepage, accessories).
   Title clamped to 2 lines with reserved height; reserved line for ISO yield /
   capacity (even when missing); price + JetCart + stars stay aligned.
   Does not change product.tpl or custom.css. Keeps qv3 bar on the image cell. */
body.jp-shop-1 #products .products,
body.jp-shop-1 .featured-products .products,
body.jp-shop-1 .product-accessories .products {
  align-items: stretch;
}

body.jp-shop-1 #products .products > .js-product,
body.jp-shop-1 #products .products > div,
body.jp-shop-1 .featured-products .products > .js-product,
body.jp-shop-1 .featured-products .products > div,
body.jp-shop-1 .product-accessories .products > .js-product,
body.jp-shop-1 .product-accessories .products > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.jp-shop-1 #products .product-miniature,
body.jp-shop-1 .featured-products .product-miniature,
body.jp-shop-1 .product-accessories .product-miniature {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}

body.jp-shop-1 #products .thumbnail-container,
body.jp-shop-1 .featured-products .thumbnail-container,
body.jp-shop-1 .product-accessories .thumbnail-container {
  height: 100% !important;
  box-sizing: border-box;
}

/* From 768px the card stays the qv3 2-row grid; description row fills leftover height. */
@media (min-width: 768px) {
  body.jp-shop-1 #products .thumbnail-container,
  body.jp-shop-1 .featured-products .thumbnail-container,
  body.jp-shop-1 .product-accessories .thumbnail-container {
    grid-template-rows: auto 1fr;
  }

  body.jp-shop-1 #products .product-description,
  body.jp-shop-1 .featured-products .product-description,
  body.jp-shop-1 .product-accessories .product-description {
    align-self: stretch;
  }
}

@media (max-width: 767px) {
  body.jp-shop-1 #products .thumbnail-container,
  body.jp-shop-1 .featured-products .thumbnail-container,
  body.jp-shop-1 .product-accessories .thumbnail-container {
    display: flex;
    flex-direction: column;
  }

  body.jp-shop-1 #products .product-description,
  body.jp-shop-1 .featured-products .product-description,
  body.jp-shop-1 .product-accessories .product-description {
    flex: 1 1 auto;
  }
}

/* Inner column: reserved 2-line title + reserved yield slot, then price / button / stars. */
body.jp-shop-1 #products .product-description,
body.jp-shop-1 .featured-products .product-description,
body.jp-shop-1 .product-accessories .product-description,
body.jp-shop-1 .products .product-description {
  display: flex;
  flex-direction: column;
}

body.jp-shop-1 #products .product-title,
body.jp-shop-1 .featured-products .product-title,
body.jp-shop-1 .product-accessories .product-title,
body.jp-shop-1 .products .product-title {
  height: auto !important;
  min-height: calc(2 * 1.35em);
  margin: 0 10px 6px !important;
  line-height: 1.35;
  overflow: hidden;
}

body.jp-shop-1 #products .product-title a,
body.jp-shop-1 .featured-products .product-title a,
body.jp-shop-1 .product-accessories .product-title a,
body.jp-shop-1 .products .product-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
}

/* Yield / capacity always occupies one line so prices line up when a neighbour has none. */
body.jp-shop-1 #products .product-page-yield,
body.jp-shop-1 .featured-products .product-page-yield,
body.jp-shop-1 .product-accessories .product-page-yield,
body.jp-shop-1 .products .product-page-yield,
body.jp-shop-1 .product-miniature .product-page-yield,
body.jp-shop-1 .js-product-miniature .product-page-yield {
  min-height: calc(12px * 1.3);
  margin: 0 10px 6px;
}

body.jp-shop-1 #products .product-description:not(:has(.product-page-yield)) .product-title,
body.jp-shop-1 .featured-products .product-description:not(:has(.product-page-yield)) .product-title,
body.jp-shop-1 .product-accessories .product-description:not(:has(.product-page-yield)) .product-title,
body.jp-shop-1 .products .product-description:not(:has(.product-page-yield)) .product-title {
  margin-bottom: calc(6px + 12px * 1.3 + 6px) !important;
}



/* Discounted cards: old (struck) price inline to the left of the current
   price, centred as a pair. Overrides the desktop custom.css rule
   (display:block; margin-top:-19px) that pulled the old price up over
   the ISO yield line after equal-height cards put the price in normal flow. */
body.jp-shop-1 #products .product-price-and-shipping,
body.jp-shop-1 .featured-products .product-price-and-shipping,
body.jp-shop-1 .product-accessories .product-price-and-shipping,
body.jp-shop-1 .products .product-price-and-shipping {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.4em;
}

body.jp-shop-1 #products .product-price-and-shipping .regular-price,
body.jp-shop-1 .featured-products .product-price-and-shipping .regular-price,
body.jp-shop-1 .product-accessories .product-price-and-shipping .regular-price,
body.jp-shop-1 .products .product-price-and-shipping .regular-price {
  display: inline !important;
  position: static !important;
  margin: 0 !important;
  line-height: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #acaaa6;
  text-decoration: line-through;
  white-space: nowrap;
}

body.jp-shop-1 #products .product-price-and-shipping .price,
body.jp-shop-1 .featured-products .product-price-and-shipping .price,
body.jp-shop-1 .product-accessories .product-price-and-shipping .price,
body.jp-shop-1 .products .product-price-and-shipping .price {
  white-space: nowrap;
}

/* jp-qv-topline-20261113
   qv5: keep the Classic hover line on the title block, not the card top.
   Relies on position: relative !important in the jp-quickview-20261113
   768px block above (overrides listing-box position: static !important).
   Equal-height cards and the qv3 bar behaviour are unchanged. */