/* ==========================================================================
   Personnalisations PergolaSwiss — chargé automatiquement par PrestaShop
   (FrontController : theme-custom, priorité 1000, après theme.css).
   Ne pas mettre ces règles dans theme.css : il est régénéré par webpack (_dev).
   ========================================================================== */

/* --------------------------------------------------------------------------
   « Pergola sur mesure » en bandeau pleine largeur.
   S'applique sur l'accueil (.home-featured-products__list) ET sur la catégorie
   Pergolas bioclimatiques (.products-list) : les deux sont des grilles à 3
   colonnes et partagent la même vignette (specialproduct.tpl).
   Le produit sur-mesure n'a pas de photo (le rendu se fait dans le
   configurateur 3D) : plutôt qu'une image, on assume un parti pris « plan
   technique » (trame blueprint + pergola cotée), qui dit le sur-mesure.
   Le <a> de la carte enveloppe déjà tout → le bandeau entier est cliquable.
   -------------------------------------------------------------------------- */
.products-list__block--wide {
  grid-column: 1 / -1;
  height: auto;
}

.product-special-miniature--wide {
  background: none;
  border: 0;
}

.product-special-miniature--wide > a {
  align-items: center;
  background:
    radial-gradient(120% 150% at 88% 8%, rgba(168, 200, 168, 0.28) 0%, rgba(168, 200, 168, 0) 60%),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 40px),
    linear-gradient(100deg, #1b2f20 0%, #2c4a32 52%, #3c5f41 100%);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  min-height: 300px;
  overflow: hidden;
  padding: 48px 52px;
  position: relative;
  text-decoration: none;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.product-special-miniature--wide > a:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 20px 56px rgba(27, 47, 32, 0.3);
  transform: translateY(-2px);
}

/* Pergola cotée, en plan, à droite. */
.product-special-miniature--wide > a::after {
  background: url("/themes/falcon/assets/img/pergola-blueprint.svg") no-repeat center right / contain;
  bottom: 14px;
  content: "";
  opacity: 0.42;
  pointer-events: none;
  position: absolute;
  right: 44px;
  top: 14px;
  width: 52%;
}

.product-special-miniature--wide .product-special-miniature__bottom {
  max-width: 48%;
  padding: 0;
  position: relative;
  z-index: 1;
}

.product-special-miniature__eyebrow {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  margin-bottom: 16px;
  padding: 5px 13px;
  text-transform: uppercase;
}

.product-special-miniature--wide .product-special-miniature__title {
  color: #fff;
  font-size: 2.4rem;
  line-height: 1.05;
  margin-bottom: 12px;
}

.product-special-miniature__pitch {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 34ch;
}

.product-special-miniature--wide .product-special-miniature__pricing {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-special-miniature--wide .product-special-miniature__pricingmention {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
}

.product-special-miniature--wide .price {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
}

.product-special-miniature--wide .price--regular {
  color: rgba(255, 255, 255, 0.55);
}

.product-special-miniature--wide .product-indication {
  color: rgba(255, 255, 255, 0.75);
}

.product-special-miniature--wide .product-indication-icon {
  fill: rgba(255, 255, 255, 0.75);
}

.product-special-miniature__cta {
  align-items: center;
  background: #fff;
  border-radius: 999px;
  color: #1b2f20;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 26px;
  transition: background 0.15s ease-out, gap 0.15s ease-out;
}

.product-special-miniature--wide > a:hover .product-special-miniature__cta {
  background: #eef3ee;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   Mobile — bouton flottant « Besoin d'aide ? » (module pleasecallme).
   En 375px il fait 207x59 à bottom:16px, donc il se pose PAR-DESSUS la barre
   d'ajout au panier (.kln-sticky-atc, 61px de haut, collée en bas) et masque le
   CTA principal. On le remonte au-dessus d'elle et on le réduit à sa pastille :
   le libellé mangeait 129px de large sur un écran qui en fait 375.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .link_show_please_call_me.newton_callback_phone {
    bottom: 74px !important;
    right: 12px !important;
  }

  .link_show_please_call_me .newton__chat-text {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .product-special-miniature--wide > a {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 32px;
  }

  .product-special-miniature--wide > a::after {
    display: none;
  }

  .product-special-miniature--wide .product-special-miniature__bottom {
    max-width: none;
  }

  .product-special-miniature--wide .product-special-miniature__title {
    font-size: 1.75rem;
  }
}