/**
 * Pharmacie de l'Institut — child theme custom overrides.
 *
 * Loaded AFTER child-theme.css (see config/theme.yml → child-custom-style), so
 * these rules win on equal specificity. Keep everything additive and scoped:
 * nothing here should fight the Avanam parent theme's own styling.
 *
 * Palette mirrors the module front layer (modules/pharmacycore/.../pharmacy-front.css)
 * and the integrated avaAllySettings theme:
 *   green #60b88f · green-dark #2f7d5b · navy #103178 · orange accent #e95a26.
 */
:root {
    --ph-green: #60b88f;
    --ph-green-dark: #2f7d5b;
    --ph-green-darker: #245c44;
    --ph-green-soft: #eef7f2;
    --ph-ink: #103178;
    --ph-accent: #e95a26;
    --ph-border: #e4ebe7;
    --ph-shadow: 0 6px 22px rgba(16, 49, 120, .08);
}

/* ================================================================== *
 *  Product tiles (catalog grid, home product carousels, category pages)
 *  Scoped to .product-miniature so it only affects product cards.
 * ================================================================== */
.product-miniature {
    border: 1px solid var(--ph-border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.product-miniature:hover {
    transform: translateY(-4px);
    box-shadow: var(--ph-shadow);
    border-color: var(--ph-green);
}

.product-miniature .thumbnail-container,
.product-miniature .thumbnail-top {
    position: relative;
}

/* Keep tile images a consistent size so the grid lines up. */
.product-miniature .thumbnail.product-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

/* Title: navy, clamp to two lines so cards stay even height. */
.product-miniature .product-title,
.product-miniature .product-title a {
    color: var(--ph-ink);
    font-weight: 600;
}

.product-miniature .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
}

.product-miniature .product-title a:hover {
    color: var(--ph-green-dark);
}

.product-miniature .product-title {
    min-height: 40px;
}

/* Price: brand green, prominent; strike the crossed-out regular price. */
.product-miniature .product-price-and-shipping .price {
    color: var(--ph-green-dark);
    font-weight: 700;
}

.product-miniature .product-price-and-shipping .regular-price {
    color: #9aa4a0;
    text-decoration: line-through;
    font-weight: 400;
}

/* Discount flash uses the orange accent, consistent with the pharmacy language. */
.product-miniature .discount-product,
.product-miniature .product-flag.discount {
    background: var(--ph-accent);
    color: #fff;
}

/* ================================================================== *
 *  Bouton « Ajouter au panier » — libellé jamais tronqué
 * ================================================================== */
/* ================================================================== *
 *  Mobile — pas de défilement horizontal
 * ================================================================== */
@media (max-width: 991px) {
    .elementor-nav--dropdown {
        max-width: calc(100vw - 24px);
        overflow: hidden;
    }
}

/* ================================================================== *
 *  Barre de recherche — sélecteur de catégories contenu dans sa zone
 * ================================================================== */
.ava-search-bar .search-category-field {
    width: 210px;
    min-width: 210px;
    flex: 0 0 210px;
}

.ava-search-bar .search-category-field select {
    width: 100%;
    max-width: 100%;
}

/* ================================================================== *
 *  Bouton « Ajouter au panier » — libellé jamais tronqué
 * ================================================================== */
.product-miniature {
    --btn-cart-height: none;
    --btn-height: none;
}

.product-miniature .add-to-cart {
    height: auto;
    min-height: 42px;
    overflow: visible;
}

/* ================================================================== *
 *  Liste d'envies — cartes alignées sur celles du catalogue
 * ================================================================== */
.wishlist-products-list .wishlist-product {
    background: #fff;
    border: 1px solid var(--ph-border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wishlist-products-list .wishlist-product:hover {
    transform: translateY(-4px);
    box-shadow: var(--ph-shadow);
    border-color: var(--ph-green);
}

.wishlist-products-list .wishlist-product .wishlist-product-title,
.wishlist-products-list .wishlist-product .wishlist-product-title a {
    color: var(--ph-ink);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-products-list .wishlist-product,
    .wishlist-products-list .wishlist-product:hover {
        transform: none;
        transition: none;
    }
}

/* ================================================================== *
 *  Mini-panier — boutons de pied jamais tronqués et de hauteur égale
 * ================================================================== */
.elementor-cart__footer-buttons {
    --btn-height: none;
    align-items: stretch;
}

.elementor-cart__footer-buttons > * {
    display: flex;
}

.elementor-cart__footer-buttons .elementor-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: auto;
    min-height: 45px;
    max-height: none;
    line-height: 1.25;
    padding: 10px 12px;
    overflow: visible;
}

/* ================================================================== *
 *  Section « Nos Catégories » — lien « Découvrir »
 * ================================================================== */
.nos-categories .cat-des .button {
    margin-top: 8px;
}

.nos-categories .cat-des .button .widget-image-button-text {
    display: inline;
    padding: 0;
    background: none;
    border: 0;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    line-height: inherit;
    text-decoration: underline;
    text-transform: uppercase;
}

.nos-categories .cat-des .button a:hover .widget-image-button-text {
    color: var(--ph-green-dark);
}

/* ================================================================== *
 *  Accessibility & consistency niceties (additive, low risk)
 * ================================================================== */

/* Visible keyboard focus ring in brand green across interactive elements. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ph-green-dark);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .product-miniature {
        transition: none;
    }
    .product-miniature:hover {
        transform: none;
    }
}

/* ================================================================== *
 *  En-tête — panneau de sous-menu : marges haute et basse égales
 * ================================================================== */
.main-menu .avaorg-menu-horizontal .menu-content .menu-item .menu-dropdown .avaorg-menu-col > .column_title {
    margin-bottom: 0;
}

/* ================================================================== *
 *  Accueil — « Nos Catégories » : « Découvrir » en bas de carte
 * ================================================================== */
.category-section .nos-categories .item-inner .cat-des {
    bottom: 50px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
}

.nos-categories .cat-des a,
.nos-categories .cat-des .widget-image-button-text {
    pointer-events: auto;
}

.category-section .nos-categories .item-inner .cat-des .button {
    margin-top: auto;
}

/* ================================================================== *
 *  Accueil — « Nos Sélections » : visuel à la hauteur des cartes
 *  Le visuel reprend la gouttiere basse des slides produits (30 px sur
 *  le palier ou les deux colonnes sont cote a cote) pour finir
 *  exactement sur la meme ligne que les cartes.
 * ================================================================== */
@media (min-width: 1200px) {
    .product-banner .elementor-widget-wrap {
        height: 100%;
        padding-bottom: 30px;
    }

    .product-banner .elementor-widget-image,
    .product-banner .elementor-widget-image > .elementor-widget-container,
    .product-banner .elementor-widget-image .elementor-image,
    .product-banner .elementor-widget-image .elementor-image > a {
        display: block;
        height: 100%;
    }

    .product-banner .elementor-widget-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
}

/* Entre 768 et 1200 px le thème refuse d'etirer la colonne du visuel :
   la hauteur y est recopiee sur la carte par pharmacy-front.js. Sous
   768 px les deux colonnes s'empilent, il n'y a plus rien a egaliser. */

.product-banner img.ph-banner-synced {
    object-fit: cover;
    border-radius: 5px;
}

/* ================================================================== *
 *  Accueil — « Le blog santé » : grille de 4 articles
 * ================================================================== */
.ets_block_latest.page_home,
.ets_block_latest.page_home .block_content {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.ph-blog-carousel {
    position: relative;
}

.ph-blog-carousel .swiper-container {
    overflow: hidden;
}

.ets_block_latest.page_home ul.ets-home-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ets_block_latest.page_home ul.ets-home-posts > li {
    height: auto;
    padding: 0;
}

.ets_block_latest.page_home .ets_item_img,
.ets_block_latest.page_home .ets_item_img img {
    border-radius: 5px;
}

/* Fleches calquees sur celles des carrousels produits du thème. */
.ph-blog-arrow {
    position: absolute;
    top: 38%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #333;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.ph-blog-arrow svg {
    width: 16px;
    height: 16px;
}

.ph-blog-arrow--prev {
    left: -6px;
}

.ph-blog-arrow--next {
    right: -6px;
}

.ph-blog-arrow:hover {
    background: #ff4d00;
    color: #fff;
}

.ph-blog-arrow--disabled {
    opacity: .3;
    pointer-events: none;
}

/* ================================================================== *
 *  Pied de page — bouton « S'inscrire » désactivé, sans transparence
 * ================================================================== */
.footer-newsletter .btn.disabled,
.footer-newsletter .btn:disabled {
    opacity: 1;
    color: #fff;
    cursor: not-allowed;
}

/* ================================================================== *
 *  Bandeau de titre / fil d'Ariane
 * ================================================================== */
#hero_section.hero-section .page-title-wrapper {
    text-align: left;
    min-height: 0;
    padding: 32px 0;
}

body#product .hero-section .page-title-wrapper,
body#cart .hero-section .page-title-wrapper,
body#checkout .hero-section .page-title-wrapper {
    align-items: flex-start;
}

/* ================================================================== *
 *  Fiche produit
 * ================================================================== */
@media (min-width: 1200px) {
    /* Les colonnes du thème sont flottantes : on passe le conteneur en flex
       pour que la colonne reassurance descende naturellement sous les deux
       autres au lieu de flotter a cote. */
    .product-container {
        display: flex;
        flex-wrap: wrap;
    }

    /* Les trois colonnes sont en position:sticky dans le thème : sur une
       deuxieme ligne flex, l'image debordait sur le bloc reassurance. */
    .product-container > .images,
    .product-container > .summary {
        width: 50%;
        float: none;
        position: static;
    }

    .product-container > .sidebar {
        width: 100%;
        float: none;
        margin-top: 40px;
    }
}

.product-container > .sidebar,
.product-container > .sidebar .sidebar-wrapper {
    position: static;
    top: auto;
}

/* Sur toute la largeur, les 3 garanties se lisent mieux cote a cote. */
@media (min-width: 768px) {
    .product-container > .sidebar .blockreassurance_product {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 30px;
    }

    .product-container > .sidebar .blockreassurance_product > div:not(.clearfix) {
        flex: 1 1 240px;
        min-width: 0;
        margin: 0;
    }

    .product-container > .sidebar .blockreassurance_product > .clearfix {
        display: none;
    }
}

#products .products-section-title,
.featured-products .products-section-title,
.product-accessories .products-section-title,
.products-section-title {
    text-align: left;
}

/* ================================================================== *
 *  Comparateur — cartes sans bordure
 * ================================================================== */
.wrapper-compare-table .product-miniature {
    border: 0;
    border-radius: 0;
}

.wrapper-compare-table .product-miniature:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

/* ================================================================== *
 *  Accueil — « Nos Catégories » : état survol
 * ================================================================== */
.category-section .nos-categories .item-inner {
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .25s ease;
}

.category-section .nos-categories .item-inner .image img {
    transition: transform .4s ease;
}

.category-section .nos-categories .item-inner:hover {
    box-shadow: 0 8px 24px rgba(16, 49, 120, .12);
}

.category-section .nos-categories .item-inner:hover .image img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .category-section .nos-categories .item-inner .image img,
    .category-section .nos-categories .item-inner:hover .image img {
        transform: none;
        transition: none;
    }
}

/* ================================================================== *
 *  En-tête — barre de recherche fluide, panneau de suggestions aligne
 *  !important : le page builder ecrit les memes regles dans un <style>
 *  place apres nos feuilles, a specificite egale.
 * ================================================================== */
.header-middle .col-2 .elementor-widget-wrap .header--sb {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.header-middle .header--sb #avasearch_block {
    width: min(580px, 100%);
    margin: 0 auto;
}

.header-middle .header--sb #avasearch_block #searchbox {
    width: 100% !important;
}

.header-middle .header--sb #avasearch_block:not(.box-search) .search-dropdown {
    width: auto !important;
}

/* Rangee de droite : on passe a la version sans libelle avant que les
   icones ne se replient sur deux lignes (~1200-1365 px). */
@media (min-width: 1200px) and (max-width: 1365px) {
    .header-middle .col-3 .label-content {
        display: none;
    }
}

/* ================================================================== *
 *  Pied de page — case de consentement newsletter alignee a gauche
 *  Le module la centre (custom-checkbox en flex + label centre) : elle
 *  ne tombait pas sous le bord gauche du champ e-mail.
 * ================================================================== */
.footer-newsletter .newsletter-condition .custom-checkbox {
    justify-content: flex-start;
}

.footer-newsletter .newsletter-condition .psgdpr_consent_message {
    text-align: left;
}

/* child-theme.css centre la ligne entiere sous 992 px : meme specificite. */
@media (max-width: 991px) {
    .block_newsletter .newsletter-form .newsletter-condition .custom-checkbox {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .block_newsletter .newsletter-form .newsletter-condition .custom-checkbox label {
        text-align: left;
    }
}

/* ================================================================== *
 *  Liste par catégorie — barre de tri
 *  Select a sa taille ; sous 992 px « Trier par » a gauche et
 *  « Filtrer » a droite (le bouton n'apparait qu'en dessous).
 * ================================================================== */
.products-selection .sort-by-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin-left: 0;
    margin-right: 0;
}

.products-selection .sort-by-row > .sort-by,
.products-selection .sort-by-row > .products-sort-order,
.products-selection .sort-by-row > .filter-button {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.products-selection .sort-by-row > .products-sort-order {
    flex: 0 1 auto;
    min-width: 150px;
    max-width: 240px;
}

@media (min-width: 992px) {
    .products-selection .sort-by-row {
        justify-content: flex-end;
    }
}

@media (max-width: 991px) {
    .products-selection .sort-by-row > .filter-button {
        margin-left: auto;
    }
}

/* ================================================================== *
 *  En-tête mobile — logo a 80 px
 *  child-theme.css impose 150 px sous 540 px avec un selecteur a #id :
 *  meme specificite ici, mais notre feuille est chargee apres.
 * ================================================================== */
@media screen and (max-width: 767px) {
    #header .elementor-widget-ava-site-logo .elementor-image img {
        width: 80px;
    }
}

/* ================================================================== *
 *  Fiche produit — « Déjà vus » / « Autres produits de la même
 *  catégorie » : rangee incomplete calee a gauche.
 *  Le thème centre la derniere rangee sous 1200 px ; au-dessus il la
 *  cale deja a gauche, on n'y touche pas.
 * ================================================================== */
@media (max-width: 1199px) {
    #product .featured-products .products.product-loop {
        justify-content: flex-start;
    }
}

/* ================================================================== *
 *  Fiche produit — « Ajouter au panier » et « Acheter maintenant »
 *  prennent toute la largeur disponible (le thème plafonne le bloc
 *  .product-quantity a 500 px).
 * ================================================================== */
.product-actions .product-quantity {
    max-width: none;
}

/* ================================================================== *
 *  Liste par catégorie — bouton « Filtrer » jusqu'a 1200 px
 *  custom.css du thème masque le bouton des 992 px en !important ;
 *  le tiroir lui-meme est le mode « filter-offcanvas » du thème,
 *  active par pharmacy-front.js sur ce palier.
 * ================================================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    .products-selection .filter-button.sidebar {
        display: block !important;
    }

    #left-column #search_filters_wrapper {
        margin-bottom: 0;
    }

    .products-selection > .total-products {
        width: 40%;
        max-width: 40%;
    }

    .products-selection > .product-sort {
        width: 60%;
        max-width: 60%;
    }
}

/* ================================================================== *
 *  Accueil — « Nos Catégories » : titre et lien dans la carte
 *  Sous 1200 px le visuel est plus etroit que sa colonne ; le bloc de
 *  texte est en absolu sur la diapositive, donc il debordait a gauche.
 *  On le rattache a la carte, qui se limite au visuel.
 * ================================================================== */
@media (max-width: 1199px) {
    .nos-categories .item-inner {
        position: relative;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ================================================================== *
 *  Accueil — « Nos Sélections » : visuel cale en haut
 *  child-theme.css applique margin:auto a la colonne sous 1200 px, ce
 *  qui la centre verticalement et la decale de quelques pixels.
 * ================================================================== */
@media (max-width: 1199px) {
    .product-banner.elementor-column {
        margin-top: 0;
    }
}

/* ================================================================== *
 *  En-tête — menu principal : espacement fluide, bascule hamburger
 *  Les 9 entrées occupent ~1090 px de texte. Le texte de la premiere
 *  entree est aligne sur le logo et l'espacement se resserre avec la
 *  largeur (23 px -> 5 px), puis le texte passe de 15 a 14 px entre
 *  1230 et 1160 px ; en dessous il ne tient plus et on affiche
 *  l'en-tête mobile (hamburger), que le builder reserve normalement
 *  aux ecrans < 992 px.
 *  Calcul : 1090 (texte a 15 px) + 16 x padding + 30 (conteneur) + 27
 *  (marge, dont ~17 px de barre de defilement Windows).
 *  !important : le builder ecrit le padding dans un <style> place apres
 *  nos feuilles, a specificite egale.
 * ================================================================== */
#header .elementor-element-6e969459 > .elementor-widget-container {
    padding-left: 0 !important;
}

#header .elementor-element-6e969459 .avaorg-menu-horizontal .menu-item > a {
    padding-left: clamp(5px, calc((100vw - 1146px) / 16), 23px) !important;
    padding-right: clamp(5px, calc((100vw - 1146px) / 16), 23px) !important;
}

#header .elementor-element-6e969459 .avaorg-menu-horizontal .menu-content > li > a {
    font-size: clamp(14px, calc(14px + (100vw - 1160px) / 70), 15px) !important;
}

#header .elementor-element-6e969459 .avaorg-menu-horizontal .menu-content > li:first-child > a {
    padding-left: 0 !important;
}

#header .elementor-element-6e969459 .avaorg-menu-horizontal .menu-content > li:last-child > a {
    padding-right: 0 !important;
}

/* Entre 992 et 1159 px : on reproduit le palier tablette du builder et
   les regles < 992 px du thème pour l'en-tête mobile et son tiroir. */
@media (min-width: 992px) and (max-width: 1159px) {
    #header .elementor-hidden-tablet {
        display: none !important;
    }

    #header .elementor-element-4891f371 {
        display: block !important;
    }

    #header .elementor-element-4891f371 > .elementor-container {
        min-height: 64px;
    }

    #header .elementor-element-4891f371 .elementor-row {
        flex-wrap: wrap;
    }

    #header #mobile-menu-icon {
        display: block;
        font-size: 0;
    }

    #header .elementor-element-31d16847 .elementor-image img {
        width: 80px;
    }

    #header .elementor-element-55f842f8 .ava-search-bar .search-category-field {
        display: block;
    }

    #header .elementor-element-1e9c647d .elementor-account .elementor-button {
        gap: 0;
    }

    #header .elementor-element-1e9c647d .elementor-nav--main {
        font-size: 0;
    }

    #header .elementor-element-1e9c647d .elementor-nav--main .elementor-item {
        padding: 20px 0;
    }

    #header .elementor-element-50bfeb11 .elementor-cart__toggle .elementor-button {
        font-size: 0;
    }

    /* Tiroir */
    .mobile-lang-cur {
        color: var(--palette3);
    }

    #mobile_menu_wrapper .avaorg-menu-horizontal .hidden-mobile {
        display: none;
    }

    #mobile_menu_wrapper .avaorg-sub-menu .avaorg-menu-col.hidden-mobile {
        display: block !important;
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #mobile_menu_wrapper .avaorg-sub-menu .avaorg-menu-col > .column_title,
    #mobile_menu_wrapper .avaorg-sub-menu .avaorg-menu-col > .column_title + .icon-drop-mobile {
        display: none !important;
    }

    #mobile_menu_wrapper .avaorg-sub-menu .avaorg-menu-col > ul.ul-column.column_dropdown {
        display: block !important;
        height: auto !important;
    }

    #mobile_menu_wrapper .nav-mobile-menu,
    #mobile_menu_wrapper #tab-mobile-vegamenu {
        display: none !important;
    }
}