/*
Theme Name: Astra Child - Drippizy
Template: astra
Version: 1.0
*/

:root {
  --drip-lime: #74FF20;
  --drip-green: #0B3D00;
  --drip-cream: #EAFFB4;
  --drip-ink: #0A0B0A;
}

/* ===== MEGA MENU DRIPPIZY ===== */

/* Fond sombre sur tout le dropdown */
.main-header-menu .sub-menu {
    background-color: #0A0B0A !important;
    border-top: 2px solid #74FF20 !important;
    border-radius: 0 !important;
    padding: 24px 32px !important;
    min-width: 500px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Liens en blanc */
.main-header-menu .sub-menu li a {
    color: #ffffff !important;
    font-size: 14px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 6px 0 !important;
    background: transparent !important;
}

/* Hover vert lime */
.main-header-menu .sub-menu li a:hover {
    color: #74FF20 !important;
    background: transparent !important;
}

/* Séparateurs SNEAKERS DE LUXE / VÊTEMENTS DE LUXE en vert lime */
.main-header-menu .sub-menu .menu-item-separator > a {
    color: #74FF20 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    cursor: default !important;
    pointer-events: none !important;
    margin-top: 16px !important;
    display: block !important;
    border-bottom: 1px solid #74FF20 !important;
    padding-bottom: 8px !important;
}

/* Items du menu principal en blanc */
.main-header-menu > li > a {
    color: #ffffff !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Item actif/hover en vert lime */
.main-header-menu > li > a:hover,
.main-header-menu > li.current-menu-item > a {
    color: #74FF20 !important;
}

/* Header fond noir sur toutes les pages */
#masthead,
.site-header,
.main-header-bar,
.ast-primary-header-bar {
    background-color: #0A0B0A !important;
}

.main-header-menu > li > a,
.ast-header-break-point .main-header-menu > li > a {
    color: #ffffff !important;
}

/* ===== HERO PLEIN ÉCRAN SANS MARGES ===== */

.elementor-widget-html .drip-hero {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
}

.elementor section.elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== ITEMS PARENTS DU MENU NON CLIQUABLES ===== */

.main-header-menu > li > a[href="/product-category/sneakers/"],
.main-header-menu > li > a[href="/product-category/vetements/"],
.main-header-menu > li > a[href="/product-category/luxe/"],
.main-header-menu > li > a[href="/product-category/sport/"],
.main-header-menu > li > a[href="/product-category/high-tech/"] {
    pointer-events: none;
    cursor: default;
}

/* ===== ICÔNES HEADER BLANCHES ===== */

/* Icônes réseaux sociaux header — blanc sur toutes les pages */
.ast-header-social-wrap .ast-builder-social-element svg,
.ast-header-social-wrap .ast-builder-social-element svg path {
    fill: #FFFFFF !important;
}

/* Icône panier — blanc sur toutes les pages */
.ast-site-header-cart .ast-icon svg path,
.ast-addon-cart-wrap .ast-icon svg path {
    fill: #FFFFFF !important;
}

/* Badge compteur panier */
.ast-site-header-cart .ast-cart-product-count {
    color: #0A0B0A !important;
    background-color: #74FF20 !important;
}

/* ===== HEADER MOBILE (≤768px) — fond blanc style Shopify ===== */
/* N'affecte que le header mobile ; le header desktop (fond noir) reste inchangé. */

/* 1. Fond blanc + vrai flex 3 colonnes (burger | logo | icônes) sur
   .ast-builder-grid-row. display:contents sur .site-header-primary-section-right
   fait "remonter" ses enfants (burger et .drip-mobile-icons) comme flex-items
   directs du grid-row, pour pouvoir les positionner via order autour du logo. */
@media (max-width: 768px) {
  .site-header-wrap,
  .ast-primary-header-bar,
  #masthead {
    background: #ffffff !important;
  }

  .ast-builder-grid-row.ast-builder-grid-row-has-sides {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 16px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
  }

  /* Logo : colonne centrale flex auto */
  .site-header-primary-section-left {
    position: static !important;
    transform: none !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    order: 2 !important;
  }

  /* Section right (burger + icônes) : ses enfants directs participent
     directement au flex du grid-row */
  .site-header-primary-section-right {
    display: contents !important;
  }

  /* Burger → colonne gauche */
  .site-header-primary-section-right .ast-button-wrap,
  .site-header-primary-section-right > div:first-child {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  /* Icônes → colonne droite */
  .drip-mobile-icons {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .drip-mobile-icons a {
    color: #0A0B0A !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .drip-mobile-icons svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #0A0B0A !important;
  }

  /* Burger : noir, sans bordure pointillée.
     Spécificité boostée via "body" car le CSS dynamique Astra se charge
     après style.css dans le <head> et gagnerait sinon à specificité égale. */
  body .ast-mobile-menu-trigger-outline {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  body button.menu-toggle.main-header-menu-toggle,
  body button.menu-toggle.main-header-menu-toggle .ast-mobile-svg {
    color: #0A0B0A !important;
    fill: #0A0B0A !important;
  }
}

/* 3. Menu mobile ouvert (fond blanc, items noirs) */
@media (max-width: 768px) {
  #ast-hf-mobile-menu,
  .ast-mobile-popup-drawer,
  .ast-mobile-menu-trigger {
    background: #ffffff !important;
  }
  #ast-hf-mobile-menu .menu-item a,
  .ast-mobile-popup-drawer .menu-item a {
    color: #000000 !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #eeeeee !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
  }
  /* Header du drawer : "Menu" + X */
  .ast-mobile-popup-header {
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeee !important;
    padding: 16px 20px !important;
  }
}

/* ===== CARDS PRODUIT DRIPPIZY (style Shopify) ===== */
/* S'applique globalement à toutes les pages catégories WooCommerce (niveau 3,
   boucle produits native) présentes et futures — via content-product.php +
   ces règles CSS, sans aucune modification page par page. */

/* 1. Grille : 4 colonnes desktop / 2 colonnes mobile (override Astra) */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
}
.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}
@media (max-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
}

/* 2. Card — style général */
.woocommerce ul.products li.product {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	overflow: hidden;
	border: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.woocommerce ul.products li.product .ast-woo-product-category {
	display: none !important;
}

/* 3. Image — ratio 1:1 forcé */
.astra-shop-thumbnail-wrap {
	position: relative;
}
.astra-shop-thumbnail-wrap a {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.astra-shop-thumbnail-wrap a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.product:hover .astra-shop-thumbnail-wrap a img {
	transform: scale(1.04);
}

/* 4. Badge "ÉCONOMIE X%" Drippizy (remplace .ast-onsale-card d'Astra) */
.ast-onsale-card {
	display: none !important;
}
.drip-badge-economie {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
	background: #74FF20;
	color: #0A0B0A;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 12px;
	border-radius: 4px;
	padding: 4px 10px;
	line-height: 1.2;
	pointer-events: none;
}

/* 5. Titre produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #0A0B0A;
	text-align: center;
	margin-top: 10px;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	text-decoration: underline;
	text-decoration-color: #74FF20;
}
@media (max-width: 768px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
	}
}

/* 6. Prix */
.woocommerce ul.products li.product .price {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 700;
	color: #0A0B0A;
	font-size: 15px;
}
.woocommerce ul.products li.product .price del {
	color: #999999;
	font-size: 13px;
	text-decoration: line-through;
}

/* 7. Bouton "Choix des options" */
.astra-shop-thumbnail-wrap .ast-select-options-trigger {
	position: absolute;
	bottom: 10px;
	right: 10px;
	left: auto;
	top: auto;
	background: #74FF20;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.astra-shop-thumbnail-wrap .ast-select-options-trigger .ast-icon,
.astra-shop-thumbnail-wrap .ast-select-options-trigger svg {
	color: #0A0B0A;
	fill: #0A0B0A;
}
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap .ast-select-options-trigger {
	opacity: 1;
}

/* ===== PAGES CATÉGORIES / PRODUITS MOBILE (≤768px) ===== */
/* S'applique à la branche "boucle produits WooCommerce standard" de
   archive-product.php (catégorie feuille, niveau 3), qui charge le template
   WooCommerce natif et n'exécute jamais le <style> propre à ce fichier. */
@media (max-width: 768px) {
    /* Titre de page */
    .woocommerce-products-header__title,
    .page-title {
        font-size: 28px;
        text-align: center;
        padding: 20px 16px 8px;
    }

    /* Grille produits (niveau 3) */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 0 16px;
    }
    .woocommerce ul.products li.product {
        margin: 0;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
    }
    .woocommerce ul.products li.product .price {
        font-size: 14px;
    }

    /* Fil d'Ariane */
    .woocommerce-breadcrumb {
        font-size: 12px;
        padding: 12px 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ===== FICHE PRODUIT DRIPPIZY (style Shopify) ===== */
/* Scopé à body.single-product pour ne jamais affecter les pages
   catégories/archive (styles déjà gérés séparément ci-dessus). */

/* 0. Catégorie native Astra (span avant le H1) — masquée définitivement */
.single-product-category {
	display: none !important;
}

/* Ancien wrapper badge+prix flex — neutralisé (chaque élément a maintenant
   sa propre ligne, voir sections 1/3/4/5 ci-dessous). */
.drip-price-row {
	display: block !important;
}

/* 0bis. Ordre vertical réel des blocs de la colonne droite.
   Astra regroupe titre/prix/avis/meta dans UN seul hook (priorité 10,
   single_product_content_structure) : impossible de les entrelacer avec
   nos blocs custom via des priorités WordPress classiques. Tous ces
   éléments restent cependant des enfants DIRECTS de .summary, donc on
   pilote l'ordre visuel avec flex + order plutôt qu'avec les hooks. */
body.single-product .summary {
	display: flex;
	flex-direction: column;
}
body.single-product .summary .drip-rating-bar {
	order: 1;
}
body.single-product .summary .product_title.entry-title {
	order: 2;
}
body.single-product .summary .drip-trust-bar {
	order: 3;
}
body.single-product .summary .drip-badge-single {
	order: 4;
}
body.single-product .summary > .price {
	order: 5;
}
body.single-product .summary .woocommerce-product-details__short-description {
	order: 6;
}
body.single-product .summary form.cart {
	order: 7;
}

/* 1. Barre avis / social proof (au-dessus du titre) */
body.single-product .summary .woocommerce-product-rating,
body.single-product .summary > .star-rating {
	display: none !important;
}
body.single-product .drip-rating-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-family: 'Space Grotesk', sans-serif;
	margin-bottom: 8px;
}
body.single-product .drip-rating-count,
body.single-product .drip-rating-score {
	color: #333;
}
body.single-product .drip-rating-score {
	font-weight: 700;
}
body.single-product .drip-rating-bestseller {
	display: flex;
	align-items: center;
	gap: 5px;
	background: #f0faf8;
	padding: 3px 8px;
	border-radius: 4px;
	color: #333;
}

/* 2. Titre — seul, pleine largeur */
body.single-product .product_title.entry-title {
	font-family: 'Anton', sans-serif !important;
	font-size: 3.9rem !important;
	text-transform: uppercase !important;
	line-height: 1.1 !important;
	color: #0A0B0A !important;
	display: block !important;
	width: 100% !important;
	margin: 8px 0 12px 0 !important;
}
@media (max-width: 768px) {
	body.single-product .product_title.entry-title {
		font-size: 2.8rem !important;
	}
}

/* 3. Trust bar (photos clients) */
body.single-product .drip-trust-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #f3f3f3;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 12px;
}
body.single-product .drip-trust-avatars {
	display: flex;
	flex-shrink: 0;
}
body.single-product .drip-trust-avatars img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #f3f3f3;
	margin-left: -12px;
}
body.single-product .drip-trust-avatars img:first-child {
	margin-left: 0;
}
body.single-product .drip-trust-text {
	font-size: 13px;
	line-height: 1.4;
	color: #111;
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
}
@media (max-width: 480px) {
	body.single-product .drip-trust-avatars img {
		width: 34px;
		height: 34px;
	}
	body.single-product .drip-trust-text {
		font-size: 12px;
	}
}

/* 4. Badge — sa propre ligne, largeur intrinsèque (pas étirée).
   Root cause de la version précédente : .summary est en
   `display:flex; flex-direction:column` (voir 0bis) et l'`align-items`
   par défaut est `stretch`, qui étire tout enfant dont la largeur vaut
   `auto` — donc `width:auto` seul ne suffit pas à empêcher l'étirement,
   il faut sortir le badge de l'alignement stretch avec `align-self`. */
body.single-product .drip-badge-single {
	align-self: flex-start;
	display: inline-block;
	width: auto;
	background: #74FF20;
	color: #0A0B0A;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 12px;
	border-radius: 20px;
	padding: 5px 14px;
	white-space: nowrap;
	margin-bottom: 10px;
}

/* 5. Prix — sa propre ligne */
body.single-product .summary .price {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
body.single-product .summary .price ins {
	text-decoration: none;
	font-weight: 800;
	font-size: 26px;
	color: #0A0B0A;
}
body.single-product .summary .price del {
	font-size: 17px;
	color: #999999;
	text-decoration: line-through;
}

/* 5. Description courte */
body.single-product .summary .woocommerce-product-details__short-description {
	font-size: 14px;
	color: #444444;
	line-height: 1.6;
}
body.single-product .summary .woocommerce-product-details__short-description p {
	margin: 0;
}

/* 6. Sélecteur de taille — boutons custom (le <select> natif reste caché) */
body.single-product table.variations {
	display: none !important;
}
body.single-product .drip-size-selector {
	margin: 16px 0;
}
body.single-product .drip-size-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #0A0B0A;
	margin-bottom: 10px;
	transition: color 0.2s ease;
}
body.single-product .drip-size-label--error {
	color: #E53935;
}
body.single-product .drip-size-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.single-product .drip-size-btn {
	min-width: 52px;
	height: 44px;
	padding: 0 8px;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 8px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	color: #0A0B0A;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
body.single-product .drip-size-btn:hover {
	border-color: #0A0B0A;
}
body.single-product .drip-size-btn.is-selected {
	border: 2px solid #0A0B0A;
	font-weight: 700;
}

/* 7. Éléments masqués */
body.single-product .ast-shipping-text,
body.single-product .summary .single_variation .ast-stock-detail,
body.single-product .summary .single_variation .stock,
body.single-product .summary .product_meta,
body.single-product .ast-single-product-payments {
	display: none !important;
}

/* Tabs WooCommerce (déjà retirées côté PHP via woocommerce_product_tabs,
   filet de sécurité CSS si un thème/plugin les réaffiche autrement) */
body.single-product .woocommerce-tabs,
body.single-product .wc-tabs-wrapper {
	display: none !important;
}

/* Sections Drippizy sous la fiche produit (reassurance, avis, FAQ...) :
   filet de sécurité défensif. Vérifié dans le code source du shortcode
   [reassurance_drippizy] (functions.php) : .drip-reassurance n'a ni
   position absolute/fixed, ni z-index, ni margin-top négatif — ces
   propriétés ne sont donc pas la cause du chevauchement. On les neutralise
   quand même ici au cas où, et .drip-product-sections (nouveau wrapper,
   cf. content-single-product.php) garantit un flux/clear propre. */
body.single-product .drip-product-sections,
body.single-product .drip-product-sections [class*="reassurance"] {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	z-index: auto !important;
	margin-top: 0 !important;
	clear: both !important;
}

/* 7bis. Sélecteur de quantité (boutons − / + custom, cf. script).
   .woocommerce-variation-add-to-cart est le vrai conteneur de quantité+bouton
   (Astra/WC l'affiche en row par défaut, d'où le côte-à-côte signalé). */
body.single-product .summary .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}
body.single-product .drip-qty-label {
	display: block;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #666666;
	margin-bottom: 8px;
}
body.single-product div.quantity {
	display: flex !important;
	align-items: center !important;
	border: 1px solid #dddddd !important;
	border-radius: 30px !important;
	overflow: hidden !important;
	width: fit-content !important;
	height: 48px !important;
	margin-bottom: 0 !important;
}
body.single-product div.quantity input.qty {
	width: 48px !important;
	text-align: center !important;
	border: none !important;
	font-size: 16px !important;
	font-family: 'JetBrains Mono', monospace !important;
	background: transparent !important;
	-moz-appearance: textfield !important;
}
body.single-product div.quantity input.qty::-webkit-outer-spin-button,
body.single-product div.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}
body.single-product div.quantity .qty-minus,
body.single-product div.quantity .qty-plus {
	width: 48px !important;
	height: 48px !important;
	background: transparent !important;
	border: none !important;
	font-size: 20px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #0A0B0A !important;
	flex-shrink: 0 !important;
}

/* 8-9. Boutons Ajouter au panier / Acheter maintenant */
body.single-product .summary form.cart {
	display: flex;
	flex-direction: column;
}
body.single-product .summary .single_add_to_cart_button,
body.single-product .summary .drip-buy-now-button {
	width: 100%;
	height: 56px;
	border-radius: 30px;
	font-family: 'Anton', Impact, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
body.single-product .summary .single_add_to_cart_button {
	background: #74FF20 !important;
	color: #0A0B0A !important;
	border: none !important;
	margin-top: 8px;
}
body.single-product .summary .drip-buy-now-button {
	background: #ffffff;
	color: #0A0B0A;
	border: 2px solid #0A0B0A;
	margin-top: 10px;
}
body.single-product .summary .single_add_to_cart_button:hover,
body.single-product .summary .drip-buy-now-button:hover {
	opacity: 0.85;
}
body.single-product .summary .drip-buy-now-button:disabled {
	opacity: 0.6;
	cursor: default;
}