/*
|--------------------------------------------------------------------------
| Block: Cross selling
|--------------------------------------------------------------------------
| @see https://www.figma.com/design/T4xyIDJNe1gxxxS2UFbdYr?node-id=11538-24055
*/

/* L'altezza degli SVG (aspect-ratio fluido) cade su valori frazionari: senza
   1px di sovrapposizione la rasterizzazione lascia una hairline chiara alla
   giunzione cuneo/card. Il bottom sovrappone la card; per il top e' la card
   (successiva nel DOM) a coprire l'ultimo pixel del cuneo. */
.block-crossselling__top {
  margin-bottom: -1px;
}

.block-crossselling__bottom {
  margin-top: -1px;
}

.block-crossselling[data-color-variant="white"] .block-crossselling__top,
.block-crossselling[data-color-variant="white"] .block-crossselling__polygon--left {
  position: relative;
  z-index: 1;
}

/* Allineato a lg (1024px): essendo CSS fuori layer vincerebbe sulla utility
   `hidden` di Tailwind e mostrerebbe prematuramente i polygon laterali. */
@media (min-width: 1024px) {
  .block-crossselling__polygon {
    /* Prevent SVG intrinsic ratio from forcing the row height. */
    height: 0;
    min-height: 100%;
    align-self: stretch;
    display: block;
  }
}

@media (max-width: 1023.98px) {
  .block-crossselling .price-component [data-price-starting-from],
  .block-crossselling .price-component [data-price-previous],
  .block-crossselling .price-component [data-price-previous] > span,
  .block-crossselling .price-component [data-price-description-under-price] {
    font-size: 12px;
    line-height: 16px;
  }

  .block-crossselling .price-component [data-price-major] {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
  }

  .block-crossselling .price-component [data-price-minor],
  .block-crossselling .price-component [data-price-vat-suffix],
  .block-crossselling .price-component [data-price-vat-included] {
    font-size: 14px;
    line-height: 20px;
  }
}