/* ============================================================
   RESPONSIVE.CSS - Patch mobile pour ce template
   À charger APRÈS global.css (overrides en mobile uniquement)
   ============================================================ */

/* ============================================================
   MENU BURGER MOBILE
   ============================================================ */

/* Bouton burger : caché par défaut (desktop), affiché en mobile */
#mobile-burger {
	display: none;
}

/* Overlay et tiroir : cachés par défaut */
#mobile-menu-overlay {
	display: none;
}

/* Sur mobile/tablette : on active le burger et son tiroir */
@media screen and (max-width: 989px) {
	#mobile-burger {
		display: flex;
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 10001;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: none;
		border-radius: 6px;
		background: #fff;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		cursor: pointer;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 4px;
	}

	#mobile-burger span {
		display: block;
		width: 22px;
		height: 2px;
		background: #333;
		border-radius: 1px;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}

	/* Animation : burger -> croix quand le menu est ouvert */
	body.mobile-menu-open #mobile-burger span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	body.mobile-menu-open #mobile-burger span:nth-child(2) {
		opacity: 0;
	}
	body.mobile-menu-open #mobile-burger span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Overlay sombre derrière le tiroir */
	#mobile-menu-overlay {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		z-index: 9998;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s 0.3s;
	}

	body.mobile-menu-open #mobile-menu-overlay {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0s 0s;
	}

	/* Tiroir qui glisse depuis la gauche */
	#mobile-menu-drawer {
		position: fixed;
		top: 0;
		left: 0;
		width: 85%;
		max-width: 320px;
		height: 100%;
		background: #fff;
		z-index: 9999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		box-shadow: 2px 0 8px rgba(0,0,0,0.2);
	}

	body.mobile-menu-open #mobile-menu-drawer {
		transform: translateX(0);
	}

	/* Header du tiroir avec bouton fermer */
	#mobile-menu-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid #e0e0e0;
		background: #f7f7f7;
	}

	#mobile-menu-header span.title {
		font-weight: bold;
		font-size: 15px;
		color: #333;
	}

	#mobile-menu-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: none;
		background: transparent;
		font-size: 24px;
		line-height: 1;
		color: #555;
		cursor: pointer;
		text-decoration: none;
		padding: 0;
	}

	/* Contenu interne du tiroir */
	#mobile-menu-content {
		padding: 0;
	}

	/* Sections du menu (Navigation principale, Catégories, Blog, Participez) */
	#mobile-menu-content .menu-section {
		border-bottom: 6px solid #f7f7f7;
	}

	#mobile-menu-content .menu-section h3 {
		margin: 0;
		padding: 12px 16px;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: #888;
		background: #fafafa;
	}

	#mobile-menu-content ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#mobile-menu-content li {
		display: block;
		float: none !important;
		width: 100%;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #eee;
	}

	#mobile-menu-content li:last-child {
		border-bottom: none;
	}

	#mobile-menu-content li a {
		display: block;
		padding: 13px 16px;
		color: #333;
		text-decoration: none;
		font-size: 14px;
		line-height: 1.3;
		background: none !important;
		text-indent: 0 !important;
		height: auto !important;
		width: auto !important;
	}

	#mobile-menu-content li a:hover,
	#mobile-menu-content li a:active {
		background: #f0f0f0 !important;
	}

	#mobile-menu-content li a span {
		position: static !important;
		display: inline;
	}

	/* Catégories indentées (sous-niveaux) */
	#mobile-menu-content .menu-section .subMenu li a {
		padding-left: 28px;
		font-size: 13px;
		color: #555;
	}

	/* Empêcher le scroll de la page quand le menu est ouvert */
	body.mobile-menu-open {
		overflow: hidden;
	}
}


/* ============================================================
   STYLES MOBILES GÉNÉRAUX (existants)
   ============================================================ */

/* ---------- Box-sizing global pour faciliter les widths 100% ---------- */
@media screen and (max-width: 989px) {
	*, *::before, *::after {
		box-sizing: border-box;
	}
	
	body {
		font-size: 14px;
	}
	
	/* ---------- Containers principaux ---------- */
	#refhaut,
	#Ccontainer,
	#container,
	#Cheader,
	#header,
	#footer,
	#content,
	#Cfooter {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	
	/* Le top:130px du #Ccontainer pose problème en mobile car le header est plus haut */
	#Ccontainer {
		top: auto !important;
		position: relative !important;
	}
	
	#Cheader {
		position: static !important;
		height: auto !important;
	}
	
	#header {
		height: auto !important;
		min-height: auto !important;
		padding: 10px 10px 10px 64px !important; /* espace à gauche pour le burger */
		text-align: center;
		background-image: none !important;
	}
	
	/* Logo header */
	#header .logo {
		position: static !important;
		display: block;
		margin: 0 auto 10px auto !important;
		max-width: 70%;
		height: auto;
	}
	
	/* La nav du haut originelle est masquée en mobile (elle est répliquée dans le tiroir) */
	#nav1 {
		display: none !important;
	}
	
	/* SearchBox header */
	#searchbox {
		position: static !important;
		width: 100% !important;
		padding: 10px;
		box-sizing: border-box;
	}
	
	#searchbox input.kwords {
		width: calc(100% - 50px) !important;
		max-width: none !important;
		box-sizing: border-box;
	}
	
	/* ---------- Layout 3 colonnes -> empilées ---------- */
	#content {
		min-height: 0 !important;
	}
	
	#content .left,
	#content .middle,
	#content .right {
		position: static !important;
		float: none !important;
		width: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 10px !important;
		box-sizing: border-box;
	}
	
	#content .middle {
		order: 1;
	}
	
	#content .left {
		order: 2;
	}
	
	#content .right {
		order: 3;
	}
	
	/* Astuce flex pour réorganiser : middle en premier sur mobile */
	#content {
		display: flex;
		flex-direction: column;
	}
	
	/* ---------- Titres et contenus larges en mobile ---------- */
	#content .middle h1, #popup h1, #blog h2, #pinfo_nd h2,
	.middle, #plist, #mlist, #register, #pubM2,
	.blog_content, .auteur, #paginationB, #btmxref, .parts {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	
	/* ---------- Images responsives ---------- */
	#content img,
	#pinfo_d img,
	#pinfo_nd img,
	.middle img,
	#blog img {
		max-width: 100%;
		height: auto;
	}
	
	/* ---------- Menu gauche (catégories) ---------- */
	#navigation1, #navigation2, #navigation3 {
		width: 100% !important;
	}
	
	#navigation1 li,
	#navigation2 li,
	#navigation3 li {
		width: 100% !important;
	}
	
	#navigation1 a,
	#navigation2 a,
	#navigation3 a {
		display: block;
		padding: 10px 12px;
		font-size: 14px;
	}
	
	/* Sous-menus */
	.subMenu {
		width: 100% !important;
	}
	
	/* ---------- Liste produits ---------- */
	#plist .product,
	#mlist .product,
	#plist > div,
	#mlist > div {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 10px 0 !important;
		padding: 10px !important;
		box-sizing: border-box;
	}
	
	/* ---------- Fiche produit ---------- */
	#pinfo_d, #pinfo_nd {
		width: 100% !important;
		box-sizing: border-box;
	}
	
	#pinfo_d .illustrations,
	#pinfo_nd .illustrations,
	#pinfo_d .contenu,
	#pinfo_nd .contenu {
		float: none !important;
		width: 100% !important;
		margin: 0 0 15px 0 !important;
		padding: 0 !important;
	}
	
	/* ---------- Formulaires ---------- */
	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form input[type="number"],
	form select,
	form textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 8px;
		font-size: 14px;
	}
	
	form fieldset {
		width: 100% !important;
		box-sizing: border-box;
	}
	
	#register, #register fieldset {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	
	/* Boutons plus gros pour le tactile */
	form input[type="submit"],
	form input[type="button"],
	form button,
	a.btn,
	a.lnk {
		min-height: 44px;
		padding: 10px 16px;
		font-size: 14px;
	}
	
	/* ---------- Tableaux (panier, commande) ---------- */
	table {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	table.cart, #cart, .cart {
		display: block;
		width: 100% !important;
		overflow-x: auto;
	}
	
	/* ---------- Pubs cachées en mobile (souvent 728x90 etc) ---------- */
	#pubH1, #pubL1, #pubR1, #pubM1, #pubM2, #pubF1 {
		width: 100% !important;
		max-width: 100%;
		text-align: center;
		overflow: hidden;
	}
	
	#pubH1 img, #pubL1 img, #pubR1 img,
	#pubM1 img, #pubM2 img, #pubF1 img {
		max-width: 100%;
		height: auto;
	}
	
	/* ---------- Footer ---------- */
	#footer {
		padding: 15px !important;
		text-align: center;
	}
	
	#footer ul.infos1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		margin: 10px 0;
		list-style: none;
	}
	
	#footer ul.infos1 li {
		display: block;
		float: none !important;
		margin: 5px 0;
		padding: 0;
	}
	
	#footer .copy,
	#footer .stats {
		font-size: 11px;
		text-align: center;
		padding: 10px 5px;
	}
	
	/* ---------- Barre latérale fixe (rxs - réseaux sociaux) ---------- */
	#rxs {
		display: none !important; /* Cachée sur mobile, sinon ça flotte mal */
	}
	
	/* ---------- Slider home / carousel ---------- */
	#slider, #mycarousel,
	.jcarousel-container,
	.jcarousel-clip {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* ---------- Newsletter ---------- */
	#newsletterbox {
		width: 100% !important;
		box-sizing: border-box;
		padding: 10px;
	}
	
	#newsletterbox input[type="text"],
	#newsletterbox input[type="email"] {
		width: calc(100% - 100px) !important;
	}
	
	/* ---------- Breadcrumb ---------- */
	#breadcrumb {
		font-size: 11px;
		padding: 8px 10px;
		word-wrap: break-word;
	}
	
	/* ---------- Alertbox / messages ---------- */
	#alertbox {
		width: calc(100% - 20px) !important;
		max-width: 100%;
		margin: 10px;
		padding: 10px;
		box-sizing: border-box;
	}
	
	/* ---------- Blog ---------- */
	#blog {
		width: 100% !important;
		padding: 10px !important;
		box-sizing: border-box;
	}
	
	#blog .article,
	#blog > div {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	
	/* ---------- Cacher éléments inutiles en mobile ---------- */
	.raz {
		clear: both;
	}

	/* ============================================================
	   FIX SPÉCIFIQUE : LISTE DES PRODUITS (#plist)
	   Original : cartes de 580x100 avec visuel absolute + float right
	   Mobile   : cartes en pile, visuel/texte/bouton empilés verticalement
	   ============================================================ */
	#plist,
	#mlist {
		width: 100% !important;
		margin: 10px 0 !important;
		padding: 0 !important;
	}

	#plist > div,
	#mlist > div {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 10px !important;
		margin: 0 0 12px 0 !important;
		box-sizing: border-box;
		display: block;
	}

	/* Visuel : libéré de absolute, devient un bloc en haut */
	#plist div .visuel,
	#mlist div .visuel {
		position: static !important;
		display: block;
		width: 100% !important;
		max-width: 220px;
		height: auto !important;
		margin: 0 auto 10px auto !important;
		top: auto !important;
		left: auto !important;
	}

	/* Titre h2 : pleine largeur, plus de float */
	#plist div h2,
	#mlist div h2 {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		line-height: 1.3 !important;
		margin: 0 0 8px 0 !important;
		font-size: 15px !important;
		overflow: visible !important;
		white-space: normal !important;
	}

	/* Résumé : pleine largeur, hauteur libre */
	#plist div .resume,
	#mlist div .resume {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 0 10px 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		font-size: 13px;
		line-height: 1.4;
	}

	/* Bouton "Voir" : centré, sous le résumé, sans background image fixe */
	#plist div .nom,
	#mlist div .nom {
		float: none !important;
		display: block !important;
		width: auto !important;
		min-width: 120px;
		max-width: 200px;
		height: auto !important;
		min-height: 40px;
		line-height: 40px;
		margin: 8px auto 0 auto !important;
		padding: 0 16px !important;
		background-image: none !important;
		background-color: #a00057 !important;
		color: #fff !important;
		text-align: center;
		text-decoration: none !important;
		border-radius: 4px;
		font-size: 13px;
	}

	#plist div .nom span,
	#mlist div .nom span {
		visibility: visible !important;
		overflow: visible !important;
		color: #fff !important;
	}

	#plist div .nom:hover,
	#mlist div .nom:hover {
		background-position: 0 0 !important;
		background-color: #c91070 !important;
	}

	/* Badges (nouveauté, sélection, bestseller) : repositionnés en haut à droite */
	#plist .nouveaute,
	#plist .selection,
	#plist .bestseller,
	#mlist .nouveaute,
	#mlist .selection,
	#mlist .bestseller,
	#prodlie_middle .nouveaute,
	#prodlie_middle .selection,
	#prodlie_middle .bestseller {
		position: absolute !important;
		top: 8px !important;
		right: 8px !important;
		left: auto !important;
	}

	/* Home : liste produits home (#home #plist) */
	#home #plist > div {
		width: 100% !important;
		height: auto !important;
	}


	/* ============================================================
	   FIX SPÉCIFIQUE : FICHE SITE (#pinfo_nd)
	   Original : illustrations 600x285 + thumbs absolute + contenu 568px + marque absolute
	   Mobile   : tout empilé, plus de positionnement absolu
	   ============================================================ */
	#pinfo_nd,
	#pinfo_d {
		position: relative !important;
		width: 100% !important;
		padding: 0 !important;
	}

	#pinfo_nd .illustrations,
	#pinfo_d .illustrations {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		margin: 10px 0 !important;
		padding: 0 !important;
	}

	#pinfo_nd .photo,
	#pinfo_d .photo {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 0 10px 0 !important;
	}

	#pinfo_nd .photo img,
	#pinfo_d .photo img,
	#pinfo_nd .illustrations img,
	#pinfo_d .illustrations img {
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
	}

	/* Galerie de miniatures : libérée de absolute, en flexbox */
	#thumbs {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		padding: 8px !important;
		margin: 0 0 10px 0 !important;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: flex-start;
		box-sizing: border-box;
	}

	#thumb, #thumb0, #thumb1, #thumb2, #thumb3, #thumb4, #thumb5 {
		float: none !important;
		width: 60px !important;
		height: 40px !important;
		margin: 0 !important;
		flex: 0 0 auto;
	}

	#thumb img, #thumb0 img, #thumb1 img, #thumb2 img,
	#thumb3 img, #thumb4 img, #thumb5 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Pas d'effet hover qui agrandit en mobile (pas de souris) */
	#thumb:hover, #thumb0:hover, #thumb1:hover, #thumb2:hover,
	#thumb3:hover, #thumb4:hover, #thumb5:hover {
		width: 60px !important;
		height: 40px !important;
		border: 1px solid #999 !important;
		filter: none !important;
		opacity: 1 !important;
	}

	/* Bloc contenu (description) */
	#pinfo_nd .contenu,
	#pinfo_d .contenu {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 12px !important;
		margin: 10px 0 !important;
		box-sizing: border-box;
	}

	#pinfo_nd .description,
	#pinfo_d .description {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 13px !important;
		line-height: 1.5 !important;
	}

	/* Logo "marque" en absolute -> static */
	#pinfo_nd .marque,
	#pinfo_d .marque {
		position: static !important;
		display: block;
		width: auto !important;
		height: auto !important;
		max-width: 60px;
		margin: 10px 0 !important;
		top: auto !important;
		right: auto !important;
	}

	/* Titres */
	#pinfo_nd h1, #pinfo_nd h2,
	#pinfo_d h1, #pinfo_d h2 {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		font-size: 18px !important;
		line-height: 1.3 !important;
		word-wrap: break-word;
	}

	/* Liens / boutons fiche */
	#pinfo_nd .lnk,
	#pinfo_d .lnk {
		display: inline-block;
		min-height: 40px;
		line-height: 40px;
		padding: 0 16px !important;
	}

	/* ============================================================
	   FIX SPÉCIFIQUE : CARROUSEL JCAROUSEL EN MOBILE
	   Original : largeurs fixes 552-600px + JS qui calcule en pixels
	   Mobile   : on neutralise le JS en forçant un scroll horizontal CSS natif
	              (le doigt swipe les sites comme une story Instagram)
	   ============================================================ */

	/* Container externe : 100% de large */
	#wrap,
	#wrap.cpinfo {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 100px;
		margin: 15px 0 !important;
		padding: 0 !important;
		background-image: none !important;
		background-color: #f5f5f5;
		border-radius: 4px;
		overflow: hidden;
		box-sizing: border-box;
	}

	/* Titre du carrousel (h3) en relative, propre */
	#wrap h3 {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		width: 100% !important;
		text-align: left !important;
		font-size: 12px !important;
		color: #666 !important;
		margin: 0 !important;
		padding: 8px 12px !important;
		background: #444;
		color: #fff !important;
		box-sizing: border-box;
	}

	/* Container jcarousel : on annule le absolute et les widths fixes */
	.jcarousel-container,
	.jcarousel-container-horizontal {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		padding: 10px !important;
		box-sizing: border-box;
		/* Scroll horizontal natif tactile */
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
	}

	.jcarousel-clip,
	.jcarousel-clip-horizontal {
		position: relative !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		min-height: 60px;
		overflow: visible !important;
	}

	/* La liste devient une simple flexbox horizontale */
	.jcarousel-list,
	.jcarousel-list-horizontal {
		position: relative !important;
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		width: auto !important;
		height: auto !important;
		min-height: 60px;
		left: auto !important;
		top: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
		/* Annule la transition/translation que le JS jcarousel applique */
		transform: none !important;
		transition: none !important;
	}

	/* Items : taille fixe propre, ne se rétrécissent pas */
	.jcarousel-list li,
	.jcarousel-list-horizontal li {
		flex: 0 0 auto !important;
		display: block !important;
		position: relative !important;
		width: 70px !important;
		height: 52px !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		left: auto !important;
		top: auto !important;
		opacity: 1 !important;
		filter: none !important;
		box-sizing: border-box;
	}

	.jcarousel-list li img,
	.jcarousel-list-horizontal li img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		margin: 0 !important;
		padding: 0 !important;
		display: block;
	}

	/* Pas d'effet hover qui change la taille en mobile */
	.jcarousel-list li:hover,
	.jcarousel-list li img:hover,
	.jcarousel-list-horizontal li:hover,
	.jcarousel-list-horizontal li img:hover {
		width: 70px !important;
		height: 52px !important;
		opacity: 1 !important;
		filter: none !important;
		border: 1px solid #333 !important;
	}

	.jcarousel-list li img:hover {
		width: 100% !important;
		height: 100% !important;
	}

	.jcarousel-list .on,
	.jcarousel-list .on:hover {
		opacity: 1 !important;
		filter: none !important;
	}

	/* Boutons next/prev : cachés en mobile (le scroll tactile suffit) */
	.jcarousel-next-horizontal,
	.jcarousel-prev-horizontal,
	.jcarousel-next,
	.jcarousel-prev {
		display: none !important;
	}

	/* Indication visuelle qu'on peut scroller : ombre douce sur les bords */
	.jcarousel-container::before,
	.jcarousel-container::after {
		content: '';
		position: absolute;
		top: 10px;
		bottom: 10px;
		width: 15px;
		pointer-events: none;
		z-index: 2;
	}

	.jcarousel-container::before {
		left: 0;
		background: linear-gradient(to right, rgba(245,245,245,0.9), transparent);
	}

	.jcarousel-container::after {
		right: 0;
		background: linear-gradient(to left, rgba(245,245,245,0.9), transparent);
	}

	/* Empêcher tout débordement horizontal */
	html, body {
		overflow-x: hidden;
		max-width: 100vw;
	}
}

/* ============================================================
   TABLETTE / SMALL DESKTOP (768px à 989px)
   Petits ajustements supplémentaires
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 989px) {
	/* Sur tablette, on peut garder les colonnes mais redimensionnées */
	body {
		font-size: 13px;
	}
}

/* ============================================================
   MOBILE PORTRAIT (< 480px) — ajustements supplémentaires
   ============================================================ */
@media screen and (max-width: 479px) {
	body {
		font-size: 13px;
	}
	
	#content .middle h1, 
	#popup h1, 
	#blog h2, 
	#pinfo_nd h2 {
		font-size: 18px !important;
		line-height: 1.3 !important;
	}
	
	h2 {
		font-size: 16px !important;
	}
	
	h3 {
		font-size: 14px !important;
	}
	
	/* Encore plus compact */
	#content .left,
	#content .middle,
	#content .right {
		padding: 8px !important;
	}
}