/*
 * fotoluminescente.it — retouches du thème phospho (chargé automatiquement par PrestaShop après theme.css, priorité 1000).
 * Ce fichier n'est touché ni par les mises à jour des modules ni par celles de PrestaShop.
 */
/* Les trois blocs suivants viennent de PHDE (nachleucht.de, retouches des 21 et 29/10), repris pour le .it le 2026-10-30. */
/* Catégories principales (#featured_categories), écran large : hauteur des cases strictement identique (2026-10-21).
   La case double (1re, sur 2 colonnes, format 2/1) dépassait les cases carrées quand son texte était long : toutes les rangées
   ont maintenant la même hauteur (celle de la case carrée la plus haute), chaque case remplit sa rangée, et la case double ne
   pèse plus dans le calcul (contain: size) : son image s'ajuste à la hauteur, son texte est coupé en fondu s'il dépasse. */
@media screen and (min-width: 1025px) {
    #featured_categories .featured_categories_list {
        grid-auto-rows: 1fr;
        align-items: stretch;
    }
    /* Le clearfix Bootstrap de .row (::after) est un élément de grille : avec grid-auto-rows 1fr, il créait une 3e rangée
       vide aussi haute que les autres (~345 px de marge sous le bloc, 2026-10-29). */
    #featured_categories .featured_categories_list::after {
        content: none;
    }
    #featured_categories .fcl-item {
        aspect-ratio: auto;
        height: auto;
        align-self: stretch;
    }
    #featured_categories .fcl-item:first-child {
        contain: size;
        overflow: hidden;
        grid-template-rows: 100%;
    }
    #featured_categories .fcl-item:first-child .imagecatlarge {
        aspect-ratio: auto;
        height: 100%;
        width: auto;
        min-height: 0;
    }
    #featured_categories .fcl-item:first-child .imagecatlarge > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    #featured_categories .fcl-item:first-child .imagecatlarge .fcl-image {
        width: auto;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
    }
    #featured_categories .fcl-item:first-child .description_catrigth {
        min-height: 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent);
        mask-image: linear-gradient(to bottom, #000 85%, transparent);
    }
}

/* Bloc produit à droite du diaporama (#selectprod), écran large : description et photo côte à côte, centrées verticalement
   l'une par rapport à l'autre sous le titre (2026-10-21) ; titre en casse normale. */
@media screen and (min-width: 1025px) {
    #selectprod .product-selection {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 12px;
    }
    #selectprod .product-selection > .bloctitle,
    #selectprod .product-selection > h2 {
        grid-column: 1 / -1;
    }
    #selectprod .product-selection > h2 {
        text-transform: none;
    }
    #selectprod .detail,
    #selectprod .imagesprod {
        float: none;
        width: auto;
        align-self: center;
    }
    #selectprod .imagesprod {
        text-align: center;
    }
    #selectprod .imagesprod img {
        max-width: 100%;
        height: auto;
    }
}

/* Méga-menu, 1er niveau : séparateur vertical (::after du lien) placé à droite du BLOC du libellé, centré verticalement, et non plus
   juste après la dernière ligne du texte (2026-10-21). Les libellés sur 2 lignes de longueurs différentes (PHDE : « PHOTOLUMINESZIERENDE / BESCHILDERUNG » ; .it :
   « PIGMENTI E RESINE / FOSFORESCENTI ») faisaient retomber le trait sur la première ligne. Écarts d'origine gardés
   (26 px, 6 px sur tablette). Le lien devient le repère (position: relative) ; le <li>, lui, reste non positionné pour que le
   sous-menu garde toute la largeur. */
.st_mega_menu .ml_level_0 > .ma_level_0 {
    display: inline-block;
    position: relative;
}
.st_mega_menu_container .st_mega_menu li:not(#st_menu_12) .ma_level_0:after {
    position: absolute;
    top: 50%;
    left: calc(100% + 26px);
    margin: 0;
    transform: translateY(-50%);
}
@media screen and (min-width: 421px) and (max-width: 1024px) {
    .st_mega_menu_container .st_mega_menu li:not(#st_menu_12) .ma_level_0:after {
        left: calc(100% + 6px);
        margin: 0;
    }
}


/* En-tête : barre de recherche (#search_widget, module ps_searchbar) à la hauteur des boutons alignés à sa droite (contact,
   compte, panier : 60 px), bas alignés (2026-10-21, reprise de la correction faite sur nachleucht.de). Ici et non dans
   modules/ps_searchbar/ps_searchbar.css, que les mises à jour du module écrasent.
   Écran ≥ 421 px (sur mobile la recherche est seule sur sa ligne, réglages du thème gardés). */
@media screen and (min-width: 421px) {
    #header #search_widget {
        margin-bottom: 0;
        height: 60px;
        overflow: visible;
    }
    #header #search_widget form {
        height: 60px;
    }
    #header #search_widget form input[type=text] {
        box-sizing: border-box;
        height: 60px;
        padding-top: 0;
        padding-bottom: 0;
    }
    /* Icônes loupe / effacer : le thème leur donne une boîte de 1em (24 px) marges comprises (box-sizing: border-box) ; le
       glyphe de 24 px débordait alors de 8 px vers le bas et le centrage visait la boîte, pas le glyphe. Boîte = glyphe + marges. */
    #header #search_widget form i {
        box-sizing: content-box;
        line-height: 1;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Panier : bloc « Da scoprire » du module sdcartcrossselling (2026-10-28). Mise en forme reprise du .com (thème panda,
   « Cros-selling panier »), aux couleurs de phospho (#0DABF5, survol #1d93ab) ; le module n'apporte que l'alignement des cartes. */
.cross-selling-container {
    background: #fff;
    box-shadow: 0 2px 20px rgba(0,0,0,.1);
    border: 0 !important;
    margin: 6px auto 24px auto;
    padding: 12px;
    width: 100%;
}
.cross-selling-title {
    display: block;
    font-size: 22px;
    margin: 12px;
    color: #0DABF5;
}
.cross-selling-products {
    width: 100%;
    overflow-x: auto;
    display: flex;
    gap: 7px;
}
.cr-product-box {
    width: 174.8px;
    height: fit-content;
    border: 1px solid #d4d1d1;
    padding: 6px;
    min-width: 166px;
    margin: 0 0 12px 0;
}
.cr-product-box-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
}
.cr-product-box-txt a {
    line-height: 16px;
    font-size: 14px;
}
.cr-product-box-txt .ajax_add_to_cart_button .cr-add-to-cart {
    background-color: #0DABF5;
    color: #fff;
    padding: 6px;
    text-align: center;
    margin: 6px auto 0 auto;
}
.cr-product-box-txt .ajax_add_to_cart_button:hover .cr-add-to-cart {
    background-color: #1d93ab;
}

/* Étape de paiement : acceptation des CGV au-dessus des moyens de paiement, dans l'encadré vert des sites ST (2026-10-28).
   Règles reprises du .pt (elles-mêmes reprises du .com, thème panda) : cadre vert #489548, fond #ddffb445, case native de 24 px,
   texte vert, lien bleu. Le déplacement est fait dans templates/checkout/_partials/steps/payment.tpl. */
body#checkout section.checkout-step #conditions-to-approve {
    display: block;
    padding: 0.6rem 0.5rem;
    margin: 12px auto 20px auto;
    border: 1px solid #489548;
    border-radius: 4px;
    background-color: #ddffb445;
}
body#checkout #conditions-to-approve ul {
    margin: 0;
}
body#checkout #conditions-to-approve li {
    display: flex;
    align-items: center;
}
body#checkout #conditions-to-approve li + li {
    margin-top: 0.5rem;
}
body#checkout #conditions-to-approve .custom-checkbox input[type="checkbox"] {
    position: static;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    opacity: 1;
    cursor: pointer;
}
body#checkout #conditions-to-approve .condition-label {
    padding-left: 0;
    margin-top: 0;
}
body#checkout #conditions-to-approve label {
    margin: 0;
    color: green;
}
body#checkout #conditions-to-approve #cta-terms-and-conditions-0 {
    color: blue;
}

/* En-tête : logo limité à 240 px de large (2026-10-28, demande de l'utilisateur) ; la hauteur suit (height: auto du thème).
   Le fichier WebP fait 96 px de haut : il reste net sur les écrans haute densité. */
#header .logo {
    max-width: 290px;
    margin: -4px auto 0 0;
}

/* Fiche produit : référence (ou référence de la déclinaison) entre le nom et le prix, en gris (2026-10-28).
   Ajoutée en tête de templates/catalog/_partials/product-prices.tpl. */
/* Avec une référence, la marge haute du bloc prix (1.25rem dans le thème) passe sous la référence : collée au titre (2026-10-28). */
.product-prices.with-reference {
    margin-top: 0;
}
.product-prices .product-reference-top {
    margin: 0 0 1.25rem 0;
    font-size: .875rem;
    color: #7a7a7a;
}

/* Topbar (2026-10-29) : liens vers les autres sites PH à gauche (.worldweb, comme sur les sites ST), société + dépôt à droite */
.info-row .header-info {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
}
.header-info .worldweb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.header-info .worldweb .material-icons {
    font-size: 22px;
    margin-right: 4px;
    color: #fff;
}
.header-info .worldweb a {
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    padding: 0 3px;
}
.header-info .worldweb a:not(:last-child) {
    border-right: 1px solid lightgray;
}
.header-info .worldweb a:hover,
.header-info .worldweb a:focus {
    color: #eb7b54;
}
.header-info .worldweb .lang-short {
    display: none;
}
.header-info .head-support {
    text-align: right;
}
@media (max-width: 991px) {
    .info-row .header-info {
        justify-content: center;
    }
    .header-info .worldweb {
        justify-content: center;
    }
    .header-info .head-support {
        text-align: center;
    }
}
@media (max-width: 768px) {
    .header-info .worldweb .lang-short {
        display: inline;
    }
    .header-info .worldweb .lang-full {
        display: none;
    }
}

/* 2026-10-30 — En-tête des pages catégorie : image à gauche, 180 px au lieu de 140 (taille réelle des vignettes
   category_default), titre puis description à droite. Gabarit : templates/catalog/_partials/category-header.tpl.
   Le bouton « Tout voir » (theme.js, initToggleCateg) bascule toujours block-category-minus / block-category-maxi sur
   .block-category-inner : seule la description est tronquée, plus le titre. Image masquée ≤ 767 px (theme.css). */
.block-category .block-category-inner,
.block-category .block-category-inner.block-category-minus,
.block-category .block-category-inner.block-category-maxi {
    max-height: none;
    overflow: visible;
    justify-content: flex-start;
    align-items: flex-start;
}
.block-category .block-category-inner .category-cover {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    margin: 0 24px 0 0;
}
.block-category .block-category-inner .category-cover img {
    width: 180px;
    height: 180px;
    object-fit: contain;
}
.block-category .category-text {
    flex: 1 1 auto;
    min-width: 0;
}
.block-category .category-text h1 {
    margin-top: 0;
}
/* Déplié : sans plafond (theme.css limite à 2000 px, trop court pour les longues descriptions dans la colonne de droite). */
.block-category .block-category-maxi #category-description {
    max-height: none;
}
@media (min-width: 768px) and (max-width: 991px) {
    .block-category .category-text h1 {
        font-size: 1.5rem;
    }
}
@media (max-width: 991px) {
    .block-category .block-category-inner .category-cover {
        flex-basis: 140px;
        width: 140px;
        height: 140px;
        margin-right: 16px;
    }
    .block-category .block-category-inner .category-cover img {
        width: 140px;
        height: 140px;
    }
}

/* 2026-10-30 — Trois visuels à texte figé remplacés par du texte traduisible (BO > International > Traductions > Traductions du
   thème, domaine Shop.Theme.Global) ou issu du catalogue. Avant : question.webp, facebook.png, resines-epoxy-et-table-riviere-*.webp
   (images gardées dans assets/img). */
/* 1. Titre du bloc FAQ de l'accueil : deux étiquettes inclinées, à la place exacte de l'image (184×96, top -15 / left 9). */
.titlefaq .faq-labels {
    position: absolute;
    top: -15px;
    left: 9px;
    width: 184px;
    height: 96px;
    pointer-events: none;
}
.titlefaq .faq-labels span {
    position: absolute;
    background: #fff;
    color: #f6a33b;
    font: 800 21px/1 "Manrope", sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 6px 10px 5px;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, .35);
    white-space: nowrap;
}
.titlefaq .faq-labels .l1 { left: 0; top: 12px; transform: rotate(-6deg); }
.titlefaq .faq-labels .l2 { left: 22px; top: 50px; transform: rotate(-4deg); }
/* 2. Bandeau Facebook (colonne gauche, pages CMS) : lien vers la page Facebook sur toute la surface. */
.fb .fb-header.fb-text {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    background: #3d5893;
    color: #fff;
    text-decoration: none;
}
.fb-text .fb-follow {
    max-width: 6.5em;
    font: 800 10px/1.15 "Manrope", sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fb-text .fb-word {
    font: 700 31px/1 "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -1px;
}
/* 3. Résines (colonne droite) : photo sans texte + légende = nom de la catégorie 89, partie entre guillemets en turquoise. */
.resine .resine-link { display: block; text-decoration: none; }
.resine .resine-caption {
    display: block;
    background: #ba7c58;
    padding: 6px 6px 7px;
    color: #fff;
    text-align: center;
    font: 800 16px/1.15 "Manrope", sans-serif;
}
.resine .resine-caption .l2 { display: block; color: #3fe0e0; }