/** * Theme Name: Djewno Child * Description: This is a child theme of Djewno, generated by Merlin WP. * Author: KlbTheme (Sinan ISIK) * Template: djewno * Version: 1.3.1 */ /* Couleur de fond de la barre de notification du header (Top Notification 2) */ .site-global-notification { background-color: #7c5126 !important; } /* * Suppression de l'ascenseur horizontal sur desktop. * Les flèches des sliders ".site-slider" sont décalées de -3rem (48px) hors du * slider, mais la gouttière Elementor n'est que de 40px : la flèche droite * dépasse de ~8px et fait apparaître la barre de défilement horizontale. * On confine le débordement sur le wrapper #page (clip n'affecte ni les * en-têtes position:fixed ni le scroll vertical). Fallback "hidden" pour les * navigateurs sans support de "clip". */ #page { overflow-x: hidden; overflow-x: clip; } /* * Centrage du menu principal horizontal sur desktop. * Le menu est seul dans une colonne flex "flex-1" alignée à gauche * (justify-content-start) : des marges auto le centrent dans la barre. * Limité au header-bottom (visible uniquement en >= xl) pour ne pas * affecter le menu mobile (drawer). */ @media (min-width: 1200px) { .header-bottom .header-inner .site-menu.menu-horizontal.primary-menu { margin-left: auto; margin-right: auto; } } /* * Bloc "Banner box" TYPE 1 uniquement : image toujours en ratio 1:1. * Le widget n'ajoute pas de classe de type ; le type1 se reconnait à son * ".entry-media.image-overlay" SANS sous-titre (le type3 a aussi l'overlay * mais possede un ".entry-subtitle"). On cible donc via :has()/:not(). * Limite au widget Elementor "Banner box" (pas au slider d'accueil). * * Sur mobile/tablette, ne pas utiliser "height: auto" : Elementor impose * "height: 100%" sur .elementor-widget-container dans les flex containers, * ce qui effondre la hauteur du widget et fait chevaucher les bannieres. * On conserve la hauteur explicite du theme (--banner-mobile/tablet-height) * tout en gardant le ratio 1:1 via aspect-ratio. */ .elementor-widget-djewno-banner-box .site-banner:has(> .entry-media.image-overlay):not(:has(.entry-subtitle)) .entry-media { position: relative; width: 100%; height: var(--banner-mobile-height); aspect-ratio: 1 / 1; } @media screen and (min-width: 768px) { .elementor-widget-djewno-banner-box .site-banner:has(> .entry-media.image-overlay):not(:has(.entry-subtitle)) .entry-media { height: var(--banner-tablet-height); } } @media screen and (min-width: 1024px) { .elementor-widget-djewno-banner-box .site-banner:has(> .entry-media.image-overlay):not(:has(.entry-subtitle)) .entry-media { height: auto; } } .elementor-widget-djewno-banner-box .site-banner:has(> .entry-media.image-overlay):not(:has(.entry-subtitle)) .entry-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .elementor-widget-djewno-banner-box .elementor-widget-container { height: auto !important; } /* * Accueil mobile : deux "Banner box" côte à côte (50 % chacun) dans une * ligne Elementor — empiler en colonne et annuler les marges négatives qui * superposent les blocs. */ @media (max-width: 767px) { .e-con-inner:has(> .e-con > .elementor-widget-djewno-banner-box) { flex-direction: column !important; height: auto !important; } .e-con-inner:has(> .e-con > .elementor-widget-djewno-banner-box) > .e-con { width: 100% !important; --width: 100% !important; height: auto !important; margin-top: 0 !important; } } /* * Barre de notification : centrer l'unique row sur desktop. * Le slider (slick) utilise centerMode + slidesToShow:3 ; avec une seule row * (un seul ".slick-slide", sans clone), slick applique un padding "centerMode" * et un translate qui decalent le slide au lieu de le centrer. * On neutralise ce decalage et on centre le slide, uniquement dans ce cas * (selecteur :only-child) et a partir de 576px (en dessous, centerMode est * desactive et le slide est deja centre). */ @media (min-width: 576px) { .site-global-notification .slick-list:has(> .slick-track > .slick-slide:only-child) { padding-left: 0 !important; padding-right: 0 !important; } .site-global-notification .slick-track:has(> .slick-slide:only-child) { transform: none !important; width: 100% !important; justify-content: center; } } /* * Notice "Encore X pour beneficier de la livraison gratuite" (panier) : * le theme l'affiche en rouge (etat "warning"). On l'harmonise avec la * couleur de marque marron (#7c5126), comme la variante ".success" du theme. */ .klb-cart-free-shipping.mini-cart-notice.warning { background-color: rgba(124, 81, 38, 0.07) !important; border-color: rgba(124, 81, 38, 0.25) !important; } .klb-cart-free-shipping.mini-cart-notice.warning p, .klb-cart-free-shipping.mini-cart-notice.warning p .amount { color: #7c5126 !important; } .klb-cart-free-shipping.mini-cart-notice.warning .cart-notice-progress span { background-color: #7c5126 !important; } /* * Archives produits : vignettes à hauteur uniforme (ratio 1:1). * IMPORTANT : ce thème utilise
(pas