/* ==========================================================
   GESMART PRODUCT CARD MOBILE - CANONICAL C1
   Unica sorgente custom per il layout delle card <= 767.98px.
   ========================================================== */

@media (max-width: 767.98px) {

  /* ========================================================
     CARD / COLONNA
     ======================================================== */

  #js-product-list .products > article,
  #js-product-list .products > .product-miniature,
  #js-product-list .products > [class*="col-"],
  #js-product-list .products > .product,
  .featured-products .products > .product,
  .product-accessories .products > .product,
  .products > .product {
    display: block !important;
    float: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .products .product-miniature {
    display: flex !important;
    align-self: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
  }

  .products .product-miniature > .thumbnail-container {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 250px 0px auto 36px !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
  }

  .products .product-miniature .thumbnail-top {
    position: relative !important;
    display: block !important;

    grid-row: 1 !important;

    flex: none !important;
    order: initial !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }

  .products .product-miniature .product-thumbnail {
    height: 210px !important;
    max-height: 210px !important;
  }

  .products .product-miniature .product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-height: 210px !important;
    object-fit: contain !important;
  }

  .products .product-miniature > .thumbnail-container > .product-description {
    position: relative !important;
    display: block !important;

    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    flex: none !important;
    order: initial !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding-top: 0 !important;

    transform: none !important;
    text-align: left !important;
  }

  /* Annulla in mobile il layout desktop LIST/COMPACT memorizzato.
     La card mobile deve restare una sola, indipendentemente dalla vista desktop. */
  #js-product-list
  .products:is(.st-catalog-view--list, .st-catalog-view--compact)
  .product-miniature .thumbnail-top,

  #js-product-list
  .products:is(.st-catalog-view--list, .st-catalog-view--compact)
  .product-miniature > .thumbnail-container > .product-description,

  #js-product-list
  .products:is(.st-catalog-view--list, .st-catalog-view--compact)
  .product-miniature .product-price-and-shipping,

  #js-product-list
  .products:is(.st-catalog-view--list, .st-catalog-view--compact)
  .product-miniature form.product-miniature-add-to-cart {
    position: static !important;

    flex: none !important;
    order: initial !important;

    width: 100% !important;
    max-width: 100% !important;

    transform: none !important;
    text-align: left !important;
  }

  /* ========================================================
     PREZZO
     ======================================================== */

  .products .product-miniature .product-price-and-shipping {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-top: 12px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    text-align: left !important;
  }

  .products .product-miniature
  .product-price-and-shipping
  .discount-product {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: 100% !important;

    margin-top: 4px !important;
    margin-bottom: 0 !important;

    padding: 4px 8px !important;
    min-height: 22px !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    border-radius: 3px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .products .product-miniature .product-manufacturer-logo {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  /* ========================================================
     PROMO
     ======================================================== */

  .products .product-miniature .product-flags {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .products .product-miniature .product-flags li.product-flag {
    position: static !important;
    margin-top: 5px !important;
  }

  .products .product-miniature .product-flags li.product-flag.new {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin-top: 5px !important;
  }

  .products .product-miniature .product-flags li.product-flag.online-only {
    position: absolute !important;

    top: 11rem !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;

    width: 178px !important;
    max-width: 178px !important;

    margin: 0 !important;

    transform: none !important;
    z-index: 8 !important;

    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .products .product-miniature .gs-product-promo-badge {
    position: absolute !important;

    top: 12px !important;
    left: auto !important;
    right: 68px !important;

    z-index: 7 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    pointer-events: none !important;
  }

  .products .product-miniature .gs-product-promo-badge__tag {
    position: relative;
    z-index: 2;

    display: flex;

    width: 48px;
    height: 48px;

    align-items: center;
    justify-content: center;

    background: var(--gs-promo-badge-bg);
    color: var(--gs-promo-badge-icon);

    clip-path: polygon(
      8% 12%,
      70% 12%,
      92% 34%,
      92% 92%,
      8% 92%
    );

    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
  }

  .products .product-miniature .gs-product-promo-badge__tag::before {
    content: "";

    position: absolute;

    top: 8px;
    right: 8px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--gs-promo-badge-icon);
    opacity: .9;
  }

  .products .product-miniature .gs-product-promo-badge__percent {
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
  }

  .products .product-miniature .gs-product-promo-badge__ribbon {
    position: relative;
    z-index: 3;

    min-width: 58px;

    margin-top: -5px;
    padding: 4px 8px 5px;

    background: var(--gs-promo-ribbon-bg);
    color: var(--gs-promo-ribbon-text);

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
  }

  /* ========================================================
     LOGISTICA - MICRO BADGE 34x34
     ======================================================== */

  .products .product-miniature
  .product-qty-container.gs-availability-stack[data-gs-card-logistics="B2"] {
    position: static !important;
    inset: auto !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    transform: none !important;
  }

  .products .product-miniature
  .product-qty-container.gs-availability-stack[data-gs-card-logistics="B2"]
  > .gs-logistics-badge {
    position: relative !important;
    inset: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 2px !important;
    gap: 1px !important;

    box-sizing: border-box !important;
    border-radius: 4px !important;

    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-align: center !important;

    white-space: nowrap !important;
    overflow: visible !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge > .gs-cbl__icon {
    display: block !important;

    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex: 0 0 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    color: inherit !important;
    pointer-events: none !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge .gs-cbl__label,
  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge .gs-cbl__colon {
    display: none !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge > .gs-cbl__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;

    color: inherit !important;
    text-align: center !important;
    overflow: visible !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge .gs-cbl__value {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 10px !important;

    color: inherit !important;
    text-align: center !important;
    white-space: nowrap !important;

    overflow: visible !important;
    text-overflow: clip !important;
    font-variant-numeric: tabular-nums !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge[data-gs-card-kind="availability"].gs-product-availability--stock {
    background: #e8f5e4 !important;
    border-color: #d0e9c8 !important;
    color: #237529 !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge[data-gs-card-kind="availability"].gs-product-availability--zero {
    background: #fff5d8 !important;
    border-color: #fff0bf !important;
    color: #795900 !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge[data-gs-card-kind="reorder"] {
    background: #f3f5f7 !important;
    border-color: #e2e6ea !important;
    color: #46515b !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge[data-gs-card-kind="incoming"] {
    background: #e0f1ff !important;
    border-color: #d3eafb !important;
    color: #0064ae !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge.gs-product-availability--order,
  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge.gs-product-availability--unavailable {
    background: #eef2f6 !important;
    border-color: #d8dde2 !important;
    color: #46515b !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge.gs-product-availability--order
  > .gs-cbl__copy,
  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge.gs-product-availability--unavailable
  > .gs-cbl__copy {
    display: none !important;
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge.gs-product-availability--order::after {
    content: "SO";
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge.gs-product-availability--unavailable::after {
    content: "ND";
  }

  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge.gs-product-availability--order::after,
  .products .product-miniature
  [data-gs-card-logistics="B2"]
  > .gs-logistics-badge.gs-product-availability--unavailable::after {
    display: block !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 10px !important;

    color: inherit !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* RI3: elimina eventuali celle/clearfix fantasma nello stack. */
  .product-miniature[data-gs-mobile-home-h1-ri3-stack-fix]
  .product-qty-container.gs-availability-stack[data-gs-card-logistics="B2"]::before,
  .product-miniature[data-gs-mobile-home-h1-ri3-stack-fix]
  .product-qty-container.gs-availability-stack[data-gs-card-logistics="B2"]::after {
    display: none !important;
    content: none !important;
  }

  .product-miniature[data-gs-mobile-home-h1-ri3-stack-fix]
  .product-qty-container.gs-availability-stack[data-gs-card-logistics="B2"]
  > [data-gs-mobile-home-h1-ghost] {
    display: none !important;
  }

  /* ========================================================
     ACQUISTO - QUANTITA + AGGIUNGI SULLA STESSA RIGA
     ======================================================== */

  .products .product-miniature form.product-miniature-add-to-cart {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 9px 0 0 !important;
    padding: 0 !important;
  }

  .products .product-miniature
  form.product-miniature-add-to-cart > .row {
    display: grid !important;
    grid-template-columns: 102px max-content !important;
    justify-content: space-between !important;
    align-items: stretch !important;

    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 4px !important;

    box-sizing: border-box !important;
  }

  .products .product-miniature
  form.product-miniature-add-to-cart > .row::before,
  .products .product-miniature
  form.product-miniature-add-to-cart > .row::after {
    display: none !important;
    content: none !important;
  }

  .products .product-miniature
  form.product-miniature-add-to-cart > .row > [class*="col-"] {
    float: none !important;
    flex: none !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .products .product-miniature
  form.product-miniature-add-to-cart .product-miniature-qty {
    display: grid !important;
    grid-template-columns: 34px 34px 34px !important;

    justify-content: start !important;
    align-items: stretch !important;

    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .products .product-miniature
  form.product-miniature-add-to-cart .btn-touchspin,
  .products .product-miniature
  form.product-miniature-add-to-cart .js-miniature-qty-input {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    text-align: center !important;
  }

  .products .product-miniature
  form.product-miniature-add-to-cart .add-to-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    padding: 7px 12px !important;

    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* ========================================================
     RI3 MOBILE
     ======================================================== */

  .products .product-miniature .gs-mobile-home-h1-request-slot {
    position: static !important;
    inset: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 9px 0 0 !important;
    padding: 0 !important;
  }

  .products .product-miniature
  .gs-mobile-home-h1-request-slot
  > button.js-gesmart-request-info {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    min-height: 40px !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    box-sizing: border-box !important;

    background: #f7f9fc !important;
    color: #0f5ea8 !important;

    border: 1px solid #cfd8e3 !important;
    border-radius: 6px !important;
    box-shadow: none !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-transform: none !important;
    white-space: normal !important;
  }

  .products .product-miniature .gs-mobile-home-h1-price-note {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #4c5968 !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

    background: none !important;
    border: 0 !important;
  }

  .products .product-miniature .gs-mobile-home-h1-arrow {
    flex: 0 0 auto !important;
    font-size: 16px !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================
   END GESMART PRODUCT CARD MOBILE - CANONICAL C1
   ========================================================== */

/* ==========================================================
   GESMART MOBILE CARD TITLE 2L DYNAMIC V1 - 2026-09-19

   Mobile <= 767.98px:
   - massimo 2 righe, NON altezza fissa
   - usa tutta la larghezza disponibile
   - se il testo supera le 2 righe: ellissi finale
   ========================================================== */
@media (max-width: 767.98px) {

  .products .product-miniature .product-title {
    width: 100% !important;
    max-width: 100% !important;

    margin-bottom: 0 !important;

    line-height: 1.22 !important;

    overflow: hidden !important;
  }

  .products .product-miniature .product-title > a {
    display: -webkit-box !important;

    width: 100% !important;
    max-width: 100% !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    line-height: 1.22 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}
/* ==========================================================
   FINE GESMART MOBILE CARD TITLE 2L DYNAMIC V1
   ========================================================== */

/* GESMART MOBILE STOCK INFO FIX V1 - 2026-09-19
   ----------------------------------------------------------
   La i del dettaglio disponibilità diventa un micro-trigger
   sovrapposto all'angolo superiore destro del badge 34x34.

   Solo mobile.
   Nessuna modifica a:
   - logica disponibilità
   - contenuto popup
   - dimensioni badge
   - desktop/list/compact
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {

    html body
    .products .product-miniature
    [data-gs-card-logistics="B2"]
    > .gs-logistics-badge[data-gs-card-kind="availability"] {
        position: relative !important;
        overflow: visible !important;
    }

    /*
     * Il <details> non deve più partecipare al layout verticale
     * del micro-badge.
     */
    html body
    .products .product-miniature
    [data-gs-card-logistics="B2"]
    > .gs-logistics-badge[data-gs-card-kind="availability"]
    > .gs-stock-popover {
        position: static !important;

        display: block !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 0 !important;

        pointer-events: none !important;
    }

    /*
     * Micro-bollino "i".
     */
    html body
    .products .product-miniature
    [data-gs-card-logistics="B2"]
    > .gs-logistics-badge[data-gs-card-kind="availability"]
    > .gs-stock-popover
    > .gs-stock-info {
        position: absolute !important;

        top: -5px !important;
        right: -5px !important;
        bottom: auto !important;
        left: auto !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 13px !important;
        min-width: 13px !important;
        max-width: 13px !important;

        height: 13px !important;
        min-height: 13px !important;
        max-height: 13px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid currentColor !important;
        border-radius: 50% !important;

        background: #fff !important;
        color: inherit !important;

        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 11px !important;

        text-align: center !important;

        opacity: 1 !important;

        cursor: pointer !important;
        pointer-events: auto !important;

        box-shadow: 0 1px 2px rgba(0, 0, 0, .14) !important;

        z-index: 20 !important;
    }

    /*
     * Il pannello continua a essere interattivo.
     */
    html body
    .products .product-miniature
    [data-gs-card-logistics="B2"]
    > .gs-logistics-badge[data-gs-card-kind="availability"]
    .gs-stock-popover-panel {
        pointer-events: auto !important;
        z-index: 1000 !important;
    }
}
/* FINE GESMART MOBILE STOCK INFO FIX V1 */