/*
Theme Name: naXios boutique
Theme URI: https://shop.naxios.fr
Description: Boutique de materiel informatique professionnel, aux couleurs de naxios.fr. Theme enfant de Storefront.
Author: naXios
Template: storefront
Version: 1.0
Text Domain: naxios-shop
*/

/* ==================================================================
   Palette, reprise telle quelle du theme de naxios.fr
   ================================================================== */

:root{
	--bg:#0a0b0d;
	--bg2:#0f1114;
	--surf:#141719;
	--surf2:#181c20;
	--line:rgba(255,255,255,.08);
	--line2:rgba(255,255,255,.14);
	--wht:#f4f6f7;
	--mut:#9aa2ab;
	--mut2:#6f7780;
	--acc:#ff7a1a;
	--acc2:#ff9647;
	--accdk:#c95c07;
	--vert:#39d98a;
	--rouge:#ff8a8a;
	--disp:'Space Grotesk',system-ui,sans-serif;
	--body:'IBM Plex Sans',system-ui,sans-serif;
	--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

body,
body.woocommerce,
.site{
	background:var(--bg);
	color:var(--wht);
	font-family:var(--body);
}

h1,h2,h3,h4,h5,h6,
.site-title,
.woocommerce-loop-product__title,
.entry-title,
.product_title{
	font-family:var(--disp);
	color:var(--wht);
	letter-spacing:-.01em;
}

a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc2)}

p,li,td,th,label,.woocommerce-result-count{color:var(--mut)}

/* ==================================================================
   En-tete
   ================================================================== */

.site-header{
	background:var(--bg2);
	border-bottom:1px solid var(--line);
	padding-top:.9em;
	padding-bottom:.9em;
}

.site-header .site-branding .site-title,
.site-header .site-branding .site-description{display:none}

.nx-marque{display:flex;align-items:center;gap:14px;text-decoration:none}
/* Le logo du site principal, deja dessine pour un fond sombre : aucun filtre. */
.nx-marque img{
	height:46px;
	width:auto;
	display:block;
}
.main-navigation ul li a{
	color:var(--mut);
	font-family:var(--disp);
	font-weight:500;
	padding-top:.8em;
	padding-bottom:.8em;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{color:var(--acc)}

.site-header-cart .cart-contents{color:var(--wht);font-family:var(--mono);font-size:.9em}
.site-header-cart .cart-contents:hover{color:var(--acc)}
.site-header-cart .count{background:var(--acc);color:#0a0b0d;font-weight:700}
.site-header-cart .widget_shopping_cart{background:var(--surf);border:1px solid var(--line)}

/* ==================================================================
   Boutons
   ================================================================== */

button,
input[type=button],
input[type=submit],
.button,
.added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
	background:var(--acc);
	color:#0a0b0d;
	font-family:var(--disp);
	font-weight:600;
	border:0;
	border-radius:6px;
	padding:.74em 1.3em;
	transition:background .14s ease;
}

button:hover,
.button:hover,
.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
	background:var(--acc2);
	color:#0a0b0d;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{background:var(--acc);color:#0a0b0d}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{background:var(--acc2);color:#0a0b0d}

/* ==================================================================
   Formulaires
   ================================================================== */

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=search],
textarea,
select,
.select2-container .select2-selection--single{
	background:var(--surf);
	border:1px solid var(--line2);
	color:var(--wht);
	border-radius:6px;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc)}
::placeholder{color:var(--mut2)}

/* ==================================================================
   Catalogue
   ================================================================== */

.storefront-breadcrumb{
	background:transparent;
	margin-bottom:0;
	padding:1.1em 0 0;
}
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a{color:var(--mut2);font-size:.88em}
.woocommerce-breadcrumb a:hover{color:var(--acc)}

.woocommerce-products-header{margin:0 0 1.1em;padding:0}
.woocommerce-products-header__title.page-title,
.woocommerce-page .entry-title{
	font-size:2.1em;
	line-height:1.2;
	text-align:left;
	margin:.7em 0 .4em;
}
.site-content .col-full{padding-top:0}

/* Rappel du cadre de vente, pose par le mu-plugin. */
.naxios-rappel-ht{
	background:var(--surf);
	border:1px solid var(--line);
	border-left:3px solid var(--acc);
	padding:12px 16px;
	margin:0 0 1.6em;
	border-radius:0 6px 6px 0;
	font-size:.94em;
	color:var(--mut);
}

.woocommerce ul.products li.product{
	background:var(--surf);
	border:1px solid var(--line);
	border-radius:10px;
	padding:18px;
	text-align:left;
	transition:border-color .15s ease,transform .15s ease;
}
.woocommerce ul.products li.product:hover{
	border-color:var(--line2);
	transform:translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-size:.98em;
	line-height:1.38;
	padding:0;
	margin:0 0 .5em;
	color:var(--wht);
}

/* La reference est ce que cherche un acheteur professionnel. */
.nx-sku{
	display:block;
	font-family:var(--mono);
	font-size:.76em;
	color:var(--mut2);
	letter-spacing:.03em;
	margin:0 0 .5em;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
	font-family:var(--mono);
	color:var(--acc);
	font-weight:600;
	font-size:1.12em;
}
.woocommerce div.product p.price{font-size:1.5em}
.woocommerce .price .woocommerce-Price-currencySymbol{font-weight:500}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del{color:var(--mut2);font-weight:400}

.woocommerce span.onsale{
	background:var(--acc);
	color:#0a0b0d;
	font-family:var(--disp);
	font-weight:600;
}

/* Pastille d etat du materiel : neuf, occasion, reconditionne. */
.nx-etat{
	display:inline-block;
	font-family:var(--disp);
	font-size:.72em;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:3px 9px;
	border-radius:4px;
	margin:0 .4em .6em 0;
	border:1px solid var(--line2);
}
.nx-etat-neuf{background:rgba(57,217,138,.12);color:var(--vert);border-color:rgba(57,217,138,.3)}
.nx-etat-occasion{background:rgba(255,122,26,.12);color:var(--acc);border-color:rgba(255,122,26,.3)}
.nx-etat-reconditionne{background:rgba(255,150,71,.12);color:var(--acc2);border-color:rgba(255,150,71,.3)}

.nx-grade{
	display:inline-block;
	font-family:var(--mono);
	font-size:.72em;
	font-weight:600;
	padding:3px 8px;
	border-radius:4px;
	margin:0 0 .6em;
	background:var(--surf2);
	color:var(--mut);
	border:1px solid var(--line2);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin-bottom:1.2em}
.woocommerce ul.products{margin-top:0}

.woocommerce nav.woocommerce-pagination ul{border-color:var(--line)}
.woocommerce nav.woocommerce-pagination ul li{border-color:var(--line)}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{color:var(--mut)}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--acc);color:#0a0b0d}

/* ==================================================================
   Fiche produit
   ================================================================== */

.woocommerce div.product .product_title{font-size:2em;line-height:1.22;margin-bottom:.3em}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--mut);line-height:1.7}
.woocommerce div.product form.cart{margin-top:1.4em}

.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--line);padding-left:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
	background:transparent;
	border:0;
	border-bottom:2px solid transparent;
	border-radius:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--mut);font-family:var(--disp)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--acc)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--wht)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--line)}

.woocommerce table.shop_attributes{border:1px solid var(--line)}
.woocommerce table.shop_attributes th{color:var(--wht);background:var(--surf)}
.woocommerce table.shop_attributes td{color:var(--mut);background:var(--bg2)}

.woocommerce .product_meta{color:var(--mut2);font-size:.88em;font-family:var(--mono)}
.woocommerce .product_meta a{color:var(--mut)}

/* ==================================================================
   Panier, commande, messages
   ================================================================== */

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{
	border-color:var(--line);
	color:var(--wht);
	background:transparent;
}
.woocommerce table.shop_table thead th{color:var(--mut);font-family:var(--disp)}
.woocommerce-cart table.cart img{border-radius:6px}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error{
	background:var(--surf);
	border-top:2px solid var(--acc);
	color:var(--wht);
}
.woocommerce-error{border-top-color:var(--rouge)}
.woocommerce-info::before,
.woocommerce-message::before{color:var(--acc)}
.woocommerce-info a,.woocommerce-message a{color:var(--acc)}

.naxios-pro{border-top-color:var(--acc)}
.naxios-pro strong{color:var(--wht)}

#order_review,
.woocommerce-checkout #payment{background:var(--surf);border:1px solid var(--line);border-radius:10px}
.woocommerce-checkout #payment div.payment_box{background:var(--surf2);color:var(--mut)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--surf2)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)}

/* ==================================================================
   Barre laterale et pied
   ================================================================== */

.widget{color:var(--mut)}
.widget h2,.widget .widget-title{font-family:var(--disp);color:var(--wht);font-size:1.05em}
.widget ul li a{color:var(--mut)}
.widget ul li a:hover{color:var(--acc)}

.site-footer{
	background:var(--bg2);
	border-top:1px solid var(--line);
	color:var(--mut2);
}
.site-footer a{color:var(--mut)}
.site-footer a:hover{color:var(--acc)}
.site-footer h1,.site-footer h2,.site-footer h3{color:var(--wht)}
.site-info{font-size:.88em}

/* ==================================================================
   Petits ecrans
   ================================================================== */

@media(max-width:768px){
	.nx-marque img{height:38px}
	.woocommerce-products-header__title.page-title{font-size:1.6em}
	.woocommerce div.product .product_title{font-size:1.5em}
}

/* ==================================================================
   Resserrage general
   Storefront respire beaucoup. Sur un catalogue de 722 references,
   ce vide fait descendre les produits sous la ligne de flottaison.
   ================================================================== */

.site-content .col-full{padding-top:0}
.site-content{padding-bottom:1.6em}

.storefront-breadcrumb{padding:.9em 0 0;margin:0}
.woocommerce-breadcrumb{margin:0;padding:0}

.woocommerce-products-header{margin:0 0 .7em;padding:0}
.woocommerce-products-header__title.page-title,
.woocommerce-page .entry-title{margin:.45em 0 .3em;padding:0}
.woocommerce-products-header__subtitle{margin:0 0 .6em}

/* Storefront laisse la place d une description de categorie meme vide. */
.term-description{margin:0 0 .8em}
.term-description:empty,
.woocommerce-products-header__subtitle:empty,
.entry-content:empty{display:none}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin-bottom:.9em}

.woocommerce ul.products{margin-bottom:1.4em}
.woocommerce-page .site-main{margin-bottom:1.4em}
.woocommerce nav.woocommerce-pagination{margin-bottom:1.4em}

/* Rythme du texte : moins d air entre les blocs. */
.site-main > :first-child,
.entry-content > :first-child{margin-top:0}
.entry-content h2,.entry-content h3{margin-top:1.2em;margin-bottom:.4em}
.entry-content p,.entry-content ul{margin:0 0 .9em}

/* Fiche produit */
.woocommerce div.product{margin-bottom:1.4em}
.woocommerce div.product .product_title{margin:.2em 0 .25em}
.woocommerce div.product p.price{margin:0 0 .7em}
.woocommerce div.product .woocommerce-product-details__short-description{margin-bottom:1em}
.woocommerce div.product form.cart{margin:1em 0 1.2em}
.woocommerce div.product .woocommerce-tabs{padding-top:1.2em}
.woocommerce div.product .woocommerce-tabs .panel{margin-bottom:1.2em;padding-top:.8em}

/* Panier et commande */
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #customer_details{margin-top:.8em}
.woocommerce form .form-row{margin-bottom:.9em}
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3{margin:.6em 0 .6em}

/* ==================================================================
   Champs de saisie : reprendre la main sur Storefront
   Storefront injecte un style EN LIGNE sur les champs au focus, qui
   les repeint en clair. Charge apres la feuille du theme, il gagnait,
   et le texte restait blanc : blanc sur blanc.
   ================================================================== */

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
input[type=password],
input[type=search],
textarea,
select,
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
textarea:focus,
select:focus,
.woocommerce-product-search .search-field,
.site-search .search-field{
	background-color:var(--surf) !important;
	color:var(--wht) !important;
	border:1px solid var(--line2) !important;
	box-shadow:none !important;
}

input:focus,
textarea:focus,
select:focus{border-color:var(--acc) !important}

::placeholder{color:var(--mut2) !important;opacity:1}

/* Chrome repeint de lui-meme les champs qu il pre-remplit. La seule facon
   de l en empecher est une ombre interne de la couleur voulue. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
	-webkit-text-fill-color:var(--wht) !important;
	-webkit-box-shadow:0 0 0 1000px var(--surf) inset !important;
	caret-color:var(--wht);
	transition:background-color 9999s ease-in-out 0s;
}

/* La loupe du champ de recherche WooCommerce. */
.woocommerce-product-search button[type=submit]{
	background:var(--acc);
	color:#0a0b0d;
}

/* ==================================================================
   Resserrage, seconde passe
   Storefront pose « padding: 0 0 5.99em » sur l en-tete de catalogue,
   via un selecteur a deux classes qui l emportait sur le mien.
   ================================================================== */

.storefront-full-width-content .woocommerce-products-header,
.storefront-full-width-content.woocommerce-cart .entry-header,
.storefront-full-width-content.woocommerce-checkout .entry-header,
.storefront-full-width-content.woocommerce-account .entry-header,
.woocommerce-products-header{
	padding:0 0 .5em !important;
	margin:0 0 .6em !important;
	text-align:left !important;
	max-width:none;
}

.storefront-full-width-content .woocommerce-products-header h1,
.woocommerce-products-header__title.page-title,
.entry-header h1{
	font-size:2.1em !important;
	margin:.3em 0 .25em !important;
	text-align:left !important;
}

.entry-header{max-width:none;text-align:left}

/* Storefront espace chaque article de 4,2 em. */
.hentry{margin:0 0 1.4em}
.site-main{margin-bottom:1.2em}

.site-content > .col-full{padding-top:.4em;padding-bottom:.4em}

/* ==================================================================
   Resserrage, troisieme passe
   Storefront ajoute 4,23 em sous le bandeau quand il n y a pas de fil
   d Ariane, ce qui est le cas sur l accueil et les archives produit.
   ================================================================== */

.no-wc-breadcrumb .site-header,
.home.post-type-archive-product .site-header,
.woocommerce-active .site-header{margin-bottom:.8em !important}


/* ==================================================================
   Tableau des caracteristiques
   WooCommerce alterne les lignes avec un fond clair : illisible ici.
   ================================================================== */

.woocommerce table.shop_attributes,
.woocommerce table.shop_attributes tr,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th,
.woocommerce table.shop_attributes tr:nth-child(odd) td,
.woocommerce table.shop_attributes tr:nth-child(odd) th{
	background:var(--bg2) !important;
	border-color:var(--line) !important;
	color:var(--mut) !important;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes tr:nth-child(even) th,
.woocommerce table.shop_attributes tr:nth-child(odd) th{
	background:var(--surf) !important;
	color:var(--wht) !important;
	font-family:var(--disp);
}
.woocommerce table.shop_attributes td p{color:var(--mut) !important;margin:0}

/* Meme traitement pour les tableaux du panier et de la commande. */
.woocommerce table.shop_table tbody tr:nth-child(even) td,
.woocommerce table.shop_table tbody tr:nth-child(odd) td{background:transparent !important}

/* ==================================================================
   Licences rattachees au boitier
   ================================================================== */

.nx-licences{
	margin:1.6em 0 .6em;
	padding:1.2em 1.3em 1em;
	background:var(--surf);
	border:1px solid var(--line);
	border-left:3px solid var(--acc);
	border-radius:0 8px 8px 0;
}
.nx-licences h2{font-size:1.15em;margin:0 0 .35em}
.nx-licences-intro{margin:0 0 1em;font-size:.94em;color:var(--mut)}

.nx-licences-liste{list-style:none;margin:0;padding:0}
.nx-licence{
	display:grid;
	grid-template-columns:1fr auto auto auto;
	align-items:center;
	gap:12px;
	padding:.6em 0;
	border-top:1px solid var(--line);
}
.nx-licence:first-child{border-top:0}
.nx-licence-nom{color:var(--wht);font-size:.94em;line-height:1.35}
.nx-licence-nom:hover{color:var(--acc)}
.nx-licence-ref{font-family:var(--mono);font-size:.78em;color:var(--mut2);white-space:nowrap}
.nx-licence-prix{font-family:var(--mono);font-size:.92em;color:var(--acc);white-space:nowrap}
.nx-licence-prix .woocommerce-Price-amount{color:var(--acc)}
.nx-licence-ajout{padding:.42em .95em !important;font-size:.84em !important;white-space:nowrap}
.nx-licences-pied{margin:1em 0 0;font-size:.88em;color:var(--mut2)}

.nx-boitier-lie{
	margin:1em 0;
	padding:.8em 1em;
	background:var(--surf);
	border-left:3px solid var(--acc);
	border-radius:0 6px 6px 0;
	font-size:.94em;
}

.naxios-livraison{font-size:.92em}

@media(max-width:768px){
	.nx-licence{grid-template-columns:1fr auto;row-gap:6px}
	.nx-licence-ref{grid-column:1}
}

/* ==================================================================
   Controle humain a la validation
   ================================================================== */

.nx-controle{
	margin:1em 0 1.2em;
	padding:.9em 1em;
	background:var(--surf2);
	border:1px solid var(--line2);
	border-radius:7px;
}
.nx-controle label{
	display:block;
	margin:0 0 .5em;
	color:var(--mut);
	font-size:.94em;
}
.nx-controle label strong{color:var(--wht);font-family:var(--mono)}
.nx-controle input[type=text]{width:7em;text-align:center;font-family:var(--mono)}

/* Le piege a robot ne doit pas se voir, sans etre retire du document. */
.nx-piege{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* Le numero de commande, la ou il est repris. */
.woocommerce-order-overview__order strong,
.woocommerce-table--order-details .woocommerce-orders-table__cell-order-number{
	font-family:var(--mono);
	letter-spacing:.04em;
	color:var(--acc);
}

/* Le bloc materiel, sur une fiche de licence. */
.nx-materiel{border-left-color:var(--vert)}
.nx-materiel h2{color:var(--wht)}

/* ==================================================================
   En-tete sur une seule ligne

   Storefront defend son gabarit avec des selecteurs a trois classes :
   .woocommerce-active .site-header .site-branding{width:73,9%}
   .site-header .site-branding img{height:auto;max-width:230px}
   Un simple .site-header .site-branding ne passe pas devant, d ou les
   surcharges appuyees ci-dessous. Elles sont volontairement limitees aux
   proprietes de gabarit : tout le reste reste a Storefront.
   ================================================================== */

.site-header{padding-top:.5em;padding-bottom:.5em}

.site-header .site-branding img{
	height:34px !important;
	width:auto !important;
	max-width:none !important;
	max-height:none !important;
	display:block;
}

.site-header .site-branding,
.site-header .main-navigation{margin-bottom:0 !important}

@media(min-width:768px){

	.site-header > .col-full{
		display:flex;
		align-items:center;
		gap:24px;
	}

	.site-header .site-branding{
		width:auto !important;
		max-width:none !important;
		float:none !important;
		clear:none !important;
		margin:0 !important;
		padding:0;
		flex:0 0 auto;
	}

	.site-header .main-navigation{
		width:auto !important;
		max-width:none !important;
		float:none !important;
		clear:none !important;
		margin:0 !important;
		padding:0;
		flex:1 1 auto;
		min-width:0;
	}

	.site-header .main-navigation ul.menu{
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-end;
		align-items:center;
		gap:0 2px;
		margin:0;
		padding:0;
		float:none;
	}

	.site-header .main-navigation ul.menu > li{float:none;margin:0}

	.site-header .main-navigation ul li a{
		padding:.5em .55em;
		font-size:.92em;
		white-space:nowrap;
	}
}

@media(max-width:767px){
	.site-header .site-branding img{height:30px !important}
}

/* ==================================================================
   Recherche et panier sur la ligne du fil d Ariane

   En quittant .site-header, ces deux blocs perdent les regles que
   Storefront leur reserve la-bas. On les redonne ici, y compris la
   mecanique d ouverture du panier : Storefront le cache avec
   left:-999em, il ne faut donc surtout pas lui imposer un left.
   ================================================================== */

.nx-rang > .col-full{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	padding-top:.5em;
	padding-bottom:.5em;
}

.nx-rang-fil{flex:1 1 auto;min-width:0}
.nx-rang-outils{flex:0 0 auto;display:flex;align-items:center;gap:18px}

.nx-rang-outils .site-search{
	float:none !important;
	width:270px !important;
	margin:0 !important;
	padding:0;
	clear:none;
}
.nx-rang-outils .site-search .widget{margin:0;padding:0}
.nx-rang-outils .site-search form{margin:0}
.nx-rang-outils .site-search input[type=search]{
	width:100%;
	padding:.4em .75em;
	font-size:.9em;
}

.nx-rang-outils .site-header-cart{
	float:none !important;
	width:auto !important;
	position:relative;
	display:flex;
	align-items:center;
	list-style:none;
	margin:0 !important;
	padding:0;
}
.nx-rang-outils .site-header-cart > li{
	float:none;
	list-style:none;
	margin:0;
	padding:0;
}
.nx-rang-outils .site-header-cart .cart-contents{padding:.45em 0}

/* Le deroulant : cache par defaut, ouvert au survol, cale a droite car
   il est bien plus large que le bouton et frole le bord de la page. */
.nx-rang-outils .site-header-cart .widget_shopping_cart{
	display:none;
	position:absolute;
	top:100%;
	right:0;
	left:auto;
	width:320px;
	z-index:999999;
	font-size:.875em;
}
.nx-rang-outils .site-header-cart:hover .widget_shopping_cart,
.nx-rang-outils .site-header-cart:focus-within .widget_shopping_cart{display:block}

.nx-rang-outils .widget_shopping_cart p.total,
.nx-rang-outils .widget_shopping_cart p.buttons,
.nx-rang-outils .widget_shopping_cart li{padding-left:1.2em;padding-right:1.2em}

@media(max-width:767px){
	.nx-rang > .col-full{flex-wrap:wrap;gap:8px}
	/* Sur petit ecran Storefront pose deja une barre fixe en bas avec la
	   recherche et le panier : la rangee ferait double emploi. */
	.nx-rang-outils{display:none}
}

/* ==================================================================
   Finitions de la rangee
   ================================================================== */

/* Le titre de rubrique partage la ligne avec la recherche. */
.nx-rang-titre{
	font-family:var(--disp);
	font-weight:700;
	font-size:2.1em;
	line-height:1.15;
	color:var(--wht);
	margin:.1em 0 0;
	padding:0;
}
.nx-rang-fil .woocommerce-breadcrumb{margin:0 0 .15em}

/* WooCommerce garde son bandeau de titre, desormais vide. */
.woocommerce-products-header{margin:0 !important;padding:0 !important}
.woocommerce-products-header:empty{display:none}

/* La loupe : Storefront la cale a 1,15 em du haut, ce qui visait un champ
   deux fois plus haut que le notre. On la recentre et on lui laisse la
   place a gauche du texte saisi. */
.nx-rang-outils .site-search .widget_product_search form{position:relative}
.nx-rang-outils .site-search .widget_product_search form::before{
	top:50%;
	left:.85em;
	transform:translateY(-50%);
	font-size:.95em;
	color:var(--mut2);
}
.nx-rang-outils .site-search .widget_product_search form input[type=search],
.nx-rang-outils .site-search .widget_product_search form input[type=text]{
	padding:.45em .8em .45em 2.4em;
	font-size:.9em;
}
.nx-rang-outils .site-search .widget_product_search form button[type=submit]{
	position:absolute;
	clip:rect(1px,1px,1px,1px);
	width:1px;
	height:1px;
	overflow:hidden;
}

/* Le panier : montant, compteur et corbeille avaient fini colles. */
.nx-rang-outils .site-header-cart .cart-contents{
	display:inline-flex;
	align-items:center;
	gap:.55em;
	padding:.45em 0;
}
.nx-rang-outils .site-header-cart .cart-contents .amount{margin-right:0}
.nx-rang-outils .site-header-cart .cart-contents .count{
	opacity:1;
	padding:.12em .5em;
	border-radius:3px;
	font-size:.8em;
}
/* La corbeille est mise a la hauteur du titre de rubrique : 33,6 px de
   police donnent une capitale d environ 24 px, soit une icone de 28 px. */
.nx-rang-outils .site-header-cart .cart-contents::after{
	margin-left:.15em;
	font-size:28px;
	line-height:1;
}

@media(max-width:767px){
	.nx-rang-titre{font-size:1.6em}
}

/* Le bouton du menu mobile arrivait en blanc sur noir, hors palette. */
@media(max-width:767px){
	.site-header .menu-toggle{
		background:var(--surf) !important;
		color:var(--wht) !important;
		border:1px solid var(--line2) !important;
		border-radius:4px;
		font-family:var(--disp);
		font-weight:600;
		/* L icone est posee en absolu a gauche : il lui faut sa place,
		   sinon elle se superpose au mot Menu. */
		padding:.5em .9em .5em 2.5em;
	}
	.site-header .menu-toggle::before{
		left:.95em;
		top:50%;
		transform:translateY(-50%);
	}
	.site-header .menu-toggle:hover{border-color:var(--acc) !important;color:var(--acc) !important}
}