/*
Theme Name: neocraftbeer
Template: astra
Author: Vincent Vivien
Description: Theme enfant personnalise pour neocraftbeer base sur Astra.
Date : 04/06/2026
Version: 6.1
_____________________________________________________________________________________

	#Products - Catalog
	#Products - Catalog ordering
	#Products - Catalog filter
	#Single product
	#Single product - attibute table
	#Cart
	#Checkout
	#MyAccount
	#Contact
	#FAQ
_____________________________________________________________________________________ */


/* #Products - Catalog
_____________________________________________________________________________________ */

/* Personnalisation du bouton ajouter au panier */
.woocommerce ul.products li.product .button {
    width: 100%;
}

/* Réduire l'espace entre les produits sur le catalogue */
.ast-article-post{
    margin-bottom: 1em !important;
}

/* Début résumé bière au survol de l'image*/
/* On positionne l'overlay au-dessus de l'image uniquement */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  position: relative;
  display: block;
}

/* On force la custom-hover-info à prendre la taille de l'image */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  display: block;
}

/* Mise en forme de la zone d'affichage de l'overlay */
.woocommerce ul.products li.product .custom-hover-info {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s;
	padding: 5px;
	box-sizing: border-box;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	pointer-events: none;
	font-size: clamp(8px, 2vw, 14px);
}


.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link img {
    backface-visibility: visible !important;
} 

/* Description limitée à la hauteur disponible, avec scroll si besoin */
.product-full-description {
  max-height: 300px; /* Ajustez selon la place dispo dans l'overlay */
  overflow: auto;
  margin-top: 10px;
  width: 100%;
  text-align: center;
  font-size: clamp(6px, 2vw, 12px);
}

/* On cible le survol de l'image */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap:hover .custom-hover-info {
  opacity: 1;
  pointer-events: auto;
}
/* Fin Résumé bière au survol de l'image*/

/* Début note untappd entre image et titre */
/* Note Untappd sur catalogue produits*/
.untappd-rating-catalog {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
	transition: background 0.5s;
    border-radius: 99px;
	border: 1px solid #5b3a0a;
    padding: 4px 8px;
    box-sizing: border-box;
    min-height: 30px;
	cursor: help;
	position: relative;
}

/* Le message caché par défaut */
.untappd-rating-catalog:hover::after {
    content: "Untappd est un réseau social pour noter les bières.\A Retrouvez plus d'informations sur notre page FAQ.";
	white-space: pre-line;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 10px;
    width: 100%;
    z-index: 100;
    text-align: center;
}

/* Personnalisation logo */
.untappd-logo img {
    height: 20px !important;
    width: 20px !important;
	margin : 0px !important; 
    display: block;
}

.untappd-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Personnalisation note */
.untappd-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    font-size: 12px;
}

.untappd-note a {
    text-decoration: none;
    color: #222;
}
/* Fin note untappd entre image et titre */

/* Supprimer le breakpoint sur mobile pour la barre d'outils du catalogue produits */
@media (max-width: 544px) {
    .ast-header-break-point .ast-shop-toolbar-container {
        flex-direction: row !important;
        display: flex !important;
    }
}

/* Personnalisation et animation de l'affichage rupture de stock */
.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    background: rgba(200, 0, 0, 0.9) !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 4px 0 !important;
    z-index: 5 !important;
    text-align: center !important;
    white-space: nowrap !important;
}
/* On ajoute un conteneur interne pour le texte via un pseudo-élément
   pour éviter de déplacer l'élément existant hors du cadre */
.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock {
    overflow: hidden !important;      /* masque ce qui dépasse */
}

/* Le texte réel reste centré, fixe */
.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock {
    text-align: center !important;
	color: transparent !important;
}

/* Texte défilant par-dessus, en pseudo-élément */
.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock::after,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock::after {
    content: "Rupture de stock";     /* même texte que celui affiché */
    position: absolute;
    white-space: nowrap;
    left: 5%;                      /* démarre à droite, hors cadre */
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    animation: rupture-marquee 8s linear infinite;
	padding-left: 100%;
}

/* Animation du texte (pseudo-élément) */
@keyframes rupture-marquee {
    0%   { transform: translate(0, -50%); }
    100% { transform: translate(-105%, -50%); }
}

/* Fin personnalisation et animation de l'affichage rupture de stock */

/* Badge VIP sur catalogue */
.vip-badge {
    position: absolute;
    top: 0.8em;
    left: 0.8em;
    z-index: 10;
    background: #c00;
    color: #fff;
    padding: 2px 6px;
    font-size: 0.7em;
    font-weight: bold;
    border-radius: 3px;
}

/* Réduire l'espacement entre les catégories du méga menu Astra */
.ast-builder-menu .astra-megamenu .menu-item > a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.2 !important;
}

/* Position du méga menu avec l'en-tête sticky réduit */
.ast-sticky-shrunk .main-header-menu .astra-megamenu,
.ast-sticky-shrunk .main-header-menu .sub-menu {
    top: 100% !important;
}

/* Position du méga menu par rapport à la barre sticky */
.ast-sticky-shrunk .main-header-menu > .menu-item:hover > .astra-megamenu,
.ast-sticky-shrunk .main-header-menu > .menu-item:hover > .sub-menu {
    margin-top: 0 !important;
}

/* Hauteur du sous menu en mode sticky */
.ast-sticky-below-shrink .ast-sticky-shrunk .site-navigation {
    line-height: 30px !important;
}
.ast-desktop.ast-sticky-header-shrink :is(.ast-below-header-bar.ast-header-sticked,.ast-header-sticked .ast-below-header-bar) .main-header-menu > .menu-item {
    line-height: 30px !important;
}

/* Hauteur de la flèche dans le sous menu des catégories sur mobile et tablette */
.ast-header-break-point .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle {
	line-height : 22px;
}

/* Retirer la marge inférieure du titre et de la description */
.woocommerce-products-header__title,
.woocommerce-products-header__description {
    margin-bottom: 0;
}

.woocommerce-products-header .term-description p {
    margin-bottom: 0.5em;
}

.woocommerce .ast-shop-toolbar-container {
    margin-bottom: 1.5em !important;
}

/* Badge "Promo" en haut à droite sur les produits */
.woocommerce.archive ul.products li.product .onsale {
    top: 10px;
    right: 10px;
    left: auto;
}

.woocommerce div.product.ast-product-gallery-with-no-image .onsale {
        top: 10px !important;
        left: 10px !important;
}

/* #Products - Catalog ordering
_____________________________________________________________________________________ */

/* Style moderne pour la liste déroulante de tri WooCommerce */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background: #fff;
    color: #79b62a;
    border: 1px solid #79b62a;
    border-radius: 6px;
    padding: 8px 24px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(121,182,42,0.15);
    transition: background 0.2s, color 0.2s;
    appearance: none;
    cursor: pointer;
}

.woocommerce .orderby:focus,
.woocommerce-page .orderby:focus {
    outline: none;
    background: #5c8c1e;
    color: #fff;
}

.woocommerce .orderby option,
.woocommerce-page .orderby option {
    background: #fff;
    color: #79b62a;
    font-weight: 500;
}

/* Petit triangle custom pour la dropdown (optionnel) */
.woocommerce .woocommerce-ordering select.orderby {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2379b62a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 40px;
} 


/* #Products - Catalog filter
_____________________________________________________________________________________ */

/* Personnalisation des puces de filtres */
.wc-block-product-filter-chips__items button {
    background: #fff;
    color: #222;
    border: 2px solid #79b62a;
    border-radius: 24px;
    padding: 4px 10px; 
    font-family: inherit;
    box-shadow: 0 1px 4px rgba(121, 182, 42, 0.08);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    outline: none;
}

.wc-block-product-filter-chips__items button:hover,
.wc-block-product-filter-chips__items button:focus {
    background: #f7fff2;
    color: #222;
    box-shadow: 0 2px 6px rgba(121, 182, 42, 0.12);
}

/* Bouton sélectionné (WooCommerce Blocks utilise aria-pressed="true") */
.wc-block-product-filter-chips__items button[aria-checked="true"] {
    background: #79b62a !important;
    color: #fff !important;
    border-color: #79b62a !important;
    box-shadow: 0 1px 4px rgba(121, 182, 42, 0.15);
} 

/* personalisation du filtre par marques */
.wc-block-product-filter-checkbox-list__items {
	max-height: calc(8 * 26.5px); /* 8 lignes, 26px chacune */
	overflow-y: auto;
}
.wc-block-product-filter-checkbox-list__text {
	font-size: 1.2em;
}

/* Masquer barre latérale sur tablette et mobile */
@media (max-width: 921px) {
	#secondary {
		display: none;
	}
}

/* Masquer le bouton filtre sur PC (largeur ≥ 921px) */
@media (min-width: 922px) {
  .astra-shop-filter-button.ast-flyout-filter {
    display: none !important;
  }
}

/* Ajuster la taille du logo à 922px de large */
@media (max-width: 922px) {
  .ast-builder-layout-element img {
    width: 60px;
    max-width: 60px;
  }
}

/* Personnaliser la taile de la sidebar sur tablette et mobile */
.woocommerce .astra-off-canvas-sidebar-wrapper .astra-off-canvas-sidebar, .woocommerce-page .astra-off-canvas-sidebar-wrapper .astra-off-canvas-sidebar {
	width : 400px !important;
}

/* Personnaliser le menu des filtres sur tablette et mobile */
	:where(.wc-block-product-filters),:where(.wc-block-product-filters).is-overlay-opened
		{
		display:flex !important;
		}
	:where(.wc-block-product-filters) .wc-block-product-filters__open-overlay,:where(.wc-block-product-filters) .wc-block-product-filters__overlay-footer,:where(.wc-block-product-filters) .wc-block-product-filters__overlay-header,:where(.wc-block-product-filters).is-overlay-opened .wc-block-product-filters__open-overlay,:where(.wc-block-product-filters).is-overlay-opened .wc-block-product-filters__overlay-footer,:where(.wc-block-product-filters).is-overlay-opened .wc-block-product-filters__overlay-header
		{
		display:none !important;
		}
	:where(.wc-block-product-filters) .wc-block-product-filters__overlay,:where(.wc-block-product-filters).is-overlay-opened .wc-block-product-filters__overlay
		{
		background:inherit !important;
		color:inherit !important;
		inset:0 !important;
		pointer-events:auto !important;
		position:relative !important;
		transition:none !important;
		}
	:where(.wc-block-product-filters) .wc-block-product-filters__overlay-wrapper,:where(.wc-block-product-filters).is-overlay-opened .wc-block-product-filters__overlay-wrapper
		{
		background:inherit !important;
		color:inherit !important;
		height:auto !important;
		width:auto !important;
		}
	:where(.wc-block-product-filters) .wc-block-product-filters__overlay-dialog,:where(.wc-block-product-filters).is-overlay-opened .wc-block-product-filters__overlay-dialog
		{
		background:inherit !important;
		color:inherit !important;
		position:relative !important;
		transform:none !important;
		}
	:where(.wc-block-product-filters) .wc-block-product-filters__overlay-content,:where(.wc-block-product-filters).is-overlay-opened .wc-block-product-filters__overlay-content
		{
		background:inherit !important;
		color:inherit !important;
		flex-grow:1 !important;
		overflow:visible !important;
		padding:0 !important;
		}
		

/* Cible uniquement l'attribut VIP */
.wc-block-product-filter-checkbox-list__item[data-wp-key="attribute/vip-vip"] {
    /* optionnel : pour l'alignement */
}

/* On masque la checkbox native */
.wc-block-product-filter-checkbox-list__item[data-wp-key="attribute/vip-vip"]
  .wc-block-product-filter-checkbox-list__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Le conteneur visuel du toggle */
.wc-block-product-filter-checkbox-list__item[data-wp-key="attribute/vip-vip"]
  .wc-block-product-filter-checkbox-list__input-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 40px;
    height: 20px;
    border-radius: 999px;
    background: #ccc;
    position: relative;
    transition: background 0.2s;
    cursor: pointer;
}

.wc-block-product-filter-checkbox-list__item[data-wp-key="attribute/vip-vip"]
  .wc-block-product-filter-checkbox-list__input-wrapper:before {
	top : 3px;
	border-radius: 999px;
}

/* Le "knob" (on réutilise l’icône, mais on peut aussi le remplacer) */
.wc-block-product-filter-checkbox-list__item[data-wp-key="attribute/vip-vip"]
  .wc-block-product-filter-checkbox-list__mark {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: #fff;
    color: transparent; /* on masque le check */
    transition: transform 0.2s;
}

/* État actif : quand la checkbox est cochée */
.wc-block-product-filter-checkbox-list__item[data-wp-key="attribute/vip-vip"]
  .wc-block-product-filter-checkbox-list__input:checked
  + svg.wc-block-product-filter-checkbox-list__mark {
    transform: translateX(20px);
}

/* Masquer le bouton Afficher plus dans le filtre */
.wc-block-product-filter-checkbox-list__show-more-button {
    display: none !important;
}

/* #Single product
_____________________________________________________________________________________ */


/* Lien produit précédent et suivant */
.product-navigation {
    font-size: 1rem;
    font-weight: 500;
}
.product-navigation a {
    color: #222;
    padding: 6px 18px;
    border-radius: 30px;
    background: #f5f5f5;
    transition: background 0.2s;
}
.product-navigation a:hover {
    background: #e0e0e0;
    color: #79b62a;
    text-decoration: none;
}


/* #Single product - attibute table
_____________________________________________________________________________________ */

/* Bordure autour du tableau */
.woocommerce-product-attributes, 
.shop_attributes {
    border: 1px solid #ccc !important;
    border-collapse: separate;
    border-spacing: 0;
	max-width: 80%;
}

/* Style des cellules du tableau */
.woocommerce-product-attributes th, 
.shop_attributes th,
.woocommerce-product-attributes td, 
.shop_attributes td {
    padding: 10px 16px;
}

/* Texte de la 1ère colonne (th) sur une seule ligne, pas de retour à la ligne */
.woocommerce-product-attributes th, 
.shop_attributes th {
    white-space: nowrap;
	padding-right: 50px !important;
}

/* Espace supplémentaire à gauche de la 2ème colonne (td) */
.woocommerce-product-attributes td, 
.shop_attributes td {
    padding-left: 8px !important;
}


/* #Cart
_____________________________________________________________________________________ */

/* Sauter l'étape de demande de coupon dans le panier */
#ast-checkout-coupon .coupon {
    display: flex !important; 
}
#ast-checkout-coupon #ast-coupon-trigger {
    display: none;
}

/* Masquer la 1ère colonne Expédition */
.shop_table tr.shipping th {
    display: none;
}

/* Aligner le sous total à droite */
.cart-collaterals .shop_table tr.cart-subtotal td {
    text-align: right;
}

/*
.woocommerce-shipping-methods,
.woocommerce-shipping-methods *,
.woocommerce-shipping-methods label {
	font-size : 12px !important;
	font-weight : 400 !important;
} */

/* Police du texte expédition */
.nm-shipping-th-title {
    color: #4a5467 !important;
    margin-bottom: 0 !important;
	font-weight: 500 !important;
	text-align: left !important;
	}

@media (max-width: 921px) {
.nm-shipping-th-title {
	opacity: 0;
	}
.woocommerce-cart .cross-sells {
    display: none !important;
    }
}

/* Conteneur de la méthode d'expédition */
.woocommerce-shipping-methods li {
    text-align: left !important;
}

body.woocommerce-cart #shipping_method li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
	padding-left: 0px !important;
}

body.woocommerce-cart #shipping_method li > input[type="radio"] {
    flex: 0 0 auto;
    margin-top: 4px;
}

body.woocommerce-cart #shipping_method li > label {
    display: flex !important;
    flex: 1;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
	text-indent: 0 !important;
    min-width: 0;
}

#shipping_method .amount {
    float: none;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* #Checkout
_____________________________________________________________________________________ */

body.woocommerce-checkout #shipping_method li {
    display: flex;
	flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
	padding-left: 0px !important;
}

body.woocommerce-checkout #shipping_method li > input[type="radio"] {
    flex: 0 0 auto;
    margin-top: 4px;
}

body.woocommerce-checkout #shipping_method li > label {
    display: flex !important;
    flex: 1 1 89%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
	text-indent: 0 !important;
    min-width: 0;
}

body.woocommerce-checkout #shipping_method li > button {
    flex: 0 0 auto;
    width: auto;
    margin-top: 8px;
    margin-left: 100%;
}

.woocommerce-shipping-destination {
	text-indent: 0 !important;
}

/* #Myaccount
_____________________________________________________________________________________ */

/* Début Carte VIP */
.nc-vip-card {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.08);
    margin-bottom: 25px;
    overflow: hidden;
    font-size: 14px;
}

.nc-vip-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    color: #fff;
}

.nc-vip-card-header.nc-vip--yes {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.nc-vip-card-header.nc-vip--no {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.nc-vip-title {
    font-weight: 600;
    font-size: 15px;
}

.nc-vip-badge {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.15);
}

.nc-vip-card-body {
    padding: 15px 18px 18px;
}

.nc-vip-status-text {
    margin: 0 0 6px;
    font-weight: 500;
    color: #1e293b;
}

.nc-vip-amounts {
    margin: 0 0 12px;
    color: #475569;
}

.nc-vip-progress {
    margin-top: 5px;
}

.nc-vip-progress-bar {
    position: relative;
    width: 100%;
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.nc-vip-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.nc-vip-progress-meta {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
}

/* Fin Carte VIP */

/* #Contact
_____________________________________________________________________________________ */

.form-hauteur-limite {
  max-height: 200px;
  overflow-y: auto;
}

/* Aligne le bouton sur toute la largeur du formulaire Jetpack */
.contact-form button.pushbutton-wide, 
.wp-block-jetpack-contact-form .wp-block-button__link,
.wp-block-jetpack-contact-form .wp-block-button {
    padding: 15px 0px !important; /* Ajuste l'espace intérieur */
	width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* #FAQ
_____________________________________________________________________________________ */

/* Gèrer les retours à la ligne des titres de la FAQ */
.page-id-550 .faq-title,
.page-id-550 .sp-eab-accordion-title-text {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: auto;
}

/* Retirer la marge supérieur de la faq */
.wp-block-spectra-container[data-spectra-id='spectra-mdwx1eyr-zlqqcn'] {
    padding-top: 10px !important;
}