/* =============================================================================
   unimissidecart — cross-sell block inside the native "added to cart" modal
   -----------------------------------------------------------------------------
   Owned file (CSS layer Ⓑ). Rendered by views/templates/hook/crosssell.tpl via
   the displayCartModalFooter hook, so it lives inside the Bootstrap modal:

     #blockcart-modal.modal > .modal-dialog.modal-lg > .modal-content
       > .modal-footer > .blockcart-modal__cart-footer-extra (width:100%)
         > section.unimis-xsell[data-unimis-xsell]
             > h2.unimis-xsell__title
             > div.unimis-xsell__grid
                 > div.unimis-xsell__item > .product-miniature (theme-styled)

   Everything is scoped under #blockcart-modal .unimis-xsell so nothing leaks
   into the rest of the theme. Brand tokens come from themes/unimis_theme
   custom.css (:root{ --unimis-* }) and are referenced with safe fallbacks —
   no hardcoded brand colors.

   Mobile-first: base rules target the narrow modal on small screens; wider
   layouts are layered in min-width media queries.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Local tokens — derived from brand tokens with fallbacks. One place to tune.
   -------------------------------------------------------------------------- */
#blockcart-modal .unimis-xsell {
  --xs-brand: var(--unimis-brand, #ea5e25);
  --xs-brand-rgb: var(--unimis-brand-rgb, 234, 94, 37);
  --xs-heading: var(--unimis-heading, #0e332f);

  --xs-radius: var(--unimis-radius, 10px);
  --xs-radius-sm: var(--unimis-radius-sm, 4px);

  --xs-border: #e6e6e6;
  --xs-text: #212121;
  --xs-muted: #757575;

  --xs-gap: 0.75rem;
  --xs-anim: 200ms;
}

/* -----------------------------------------------------------------------------
   The footer wrapper that holds our section is width:100% (theme), so the
   section already drops to its own row below the action buttons. Reset list
   defaults and give it room to breathe.
   -------------------------------------------------------------------------- */
#blockcart-modal .blockcart-modal__cart-footer-extra {
  /* Make sure our full-width row sits cleanly under the split buttons. */
  margin-top: 0.25rem;
}

/* =============================================================================
   Section: clearly separated block under the modal confirmation content
   ========================================================================== */
#blockcart-modal .unimis-xsell {
  display: block;
  width: 100%;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--xs-border);
  text-align: left;
  box-sizing: border-box;
}

#blockcart-modal .unimis-xsell *,
#blockcart-modal .unimis-xsell *::before,
#blockcart-modal .unimis-xsell *::after {
  box-sizing: border-box;
}

#blockcart-modal .unimis-xsell__title {
  margin: 0 0 0.85rem;
  padding: 0;
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--xs-heading);
  text-align: left;
  border: 0;
}

/* =============================================================================
   Grid — mobile-first. The modal is NARROW on phones, so default to a compact
   2-column grid. Items stretch to equal height.
   ========================================================================== */
#blockcart-modal .unimis-xsell__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--xs-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

#blockcart-modal .unimis-xsell__item {
  display: flex;
  min-width: 0; /* allow children to shrink + ellipsis to work */
  margin: 0;
  padding: 0;
}

/* The theme miniature fills its cell and keeps equal height across the row. */
#blockcart-modal .unimis-xsell__item > .product-miniature,
#blockcart-modal .unimis-xsell__item > .thumbnail-container,
#blockcart-modal .unimis-xsell__item > article,
#blockcart-modal .unimis-xsell__item > .js-product-miniature {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Compact the miniature so the modal does not grow too tall: smaller image,
   tighter padding, single-line ellipsised title, slimmer actions. We only
   nudge the theme-styled component; it remains recognisably the same card.
   -------------------------------------------------------------------------- */
#blockcart-modal .unimis-xsell__item .product-miniature__inner {
  height: 100%;
  border-radius: var(--xs-radius);
}

/* Smaller, contained product image. */
#blockcart-modal .unimis-xsell__item .product-miniature__image img,
#blockcart-modal .unimis-xsell__item .product-miniature__image-container img {
  max-height: 110px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Tighter card body. */
#blockcart-modal .unimis-xsell__item .product-miniature__bottom {
  padding: 0.6rem 0.6rem 0.7rem;
}

/* Single-line title with ellipsis to keep cards short and even. */
#blockcart-modal .unimis-xsell__item .product-miniature__title {
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact prices. */
#blockcart-modal .unimis-xsell__item .product-miniature__prices {
  margin-bottom: 0.3rem;
}
#blockcart-modal .unimis-xsell__item .product-miniature__price {
  font-size: 0.9rem;
}
#blockcart-modal .unimis-xsell__item .product-miniature__regular-price {
  font-size: 0.75rem;
}

/* Hide the optional short description — too tall for a modal card. */
#blockcart-modal .unimis-xsell__item .product-miniature__desc {
  display: none;
}

/* Keep the add-to-cart row compact and on one line. */
#blockcart-modal .unimis-xsell__item .product-miniature__form {
  gap: 0.35rem;
  flex-wrap: nowrap;
}
#blockcart-modal .unimis-xsell__item .product-miniature__add.btn,
#blockcart-modal .unimis-xsell__item .product-miniature__details.btn {
  padding-inline: 0.6rem;
  font-size: 0.8125rem;
}
#blockcart-modal .unimis-xsell__item .quantity-button__group .form-control {
  width: 36px;
}

/* Soften the lift-on-hover inside the cramped modal (no big shadow jumps). */
#blockcart-modal .unimis-xsell__item .product-miniature__inner {
  transition: box-shadow var(--xs-anim) ease, transform var(--xs-anim) ease;
}
#blockcart-modal .unimis-xsell__item .product-miniature__inner:hover {
  transform: none;
  box-shadow: 0 6px 16px rgba(var(--xs-brand-rgb), 0.12);
}

/* =============================================================================
   Optional horizontal scroller fallback for very tight viewports. On the
   smallest phones a 2-col grid can still be snug; let the grid scroll-snap
   horizontally instead so each card stays a comfortable size.
   ========================================================================== */
@media (max-width: 360px) {
  #blockcart-modal .unimis-xsell__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
    /* hide the scrollbar chrome where supported, keep it functional */
    scrollbar-width: thin;
  }
  #blockcart-modal .unimis-xsell__item {
    flex: 0 0 60%;
    scroll-snap-align: start;
  }
}

/* =============================================================================
   Tablet / small desktop: 3 across once there is room.
   ========================================================================== */
@media (min-width: 576px) {
  #blockcart-modal .unimis-xsell {
    padding-top: 1.5rem;
  }
  #blockcart-modal .unimis-xsell__title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  #blockcart-modal .unimis-xsell__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  #blockcart-modal .unimis-xsell__item .product-miniature__image img,
  #blockcart-modal .unimis-xsell__item .product-miniature__image-container img {
    max-height: 130px;
  }
}

/* =============================================================================
   Desktop: the modal is .modal-lg (--bs-modal-width: 800px). Widen it a touch
   (scoped) so 4 compact miniatures sit comfortably, and switch to a 4-column
   grid. max-width never exceeds the viewport — the modal-dialog itself stays
   responsive (width:auto + margins) on smaller screens, and 92vw caps it here.
   ========================================================================== */
@media (min-width: 992px) {
  /* Widen only THIS modal's dialog, scoped, responsive. */
  #blockcart-modal .modal-dialog.modal-lg {
    --bs-modal-width: 880px;
    max-width: min(880px, 92vw);
  }

  #blockcart-modal .unimis-xsell__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =============================================================================
   Reduced motion: drop hover transitions and scroller smoothing.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #blockcart-modal .unimis-xsell__item .product-miniature__inner {
    transition: none;
  }
  #blockcart-modal .unimis-xsell__item .product-miniature__inner:hover {
    box-shadow: none;
  }
  #blockcart-modal .unimis-xsell__grid {
    scroll-behavior: auto;
  }
}