/*
Theme Name:   Xstore Child
Template:     xstore
Description:  Child theme Velo Shop — palette vert citron
Version:      1.0.0
*/

/* ══════════════════════════════════════════
   BODY / PAGE LAYOUT (header.php override)
   ══════════════════════════════════════════ */
/* Supprime les wrappers Xstore qui dupliquent header/footer */
.et-main-header,
.et-main-footer,
.header-wrapper,
.footer-wrapper {
  display: none !important;
}
/* Contenu Xstore : espacement sous le sticky header */
.page-wrapper,
.woocommerce-page .page-wrapper,
#page,
.site {
  padding-top: 0 !important;
}
/* Xstore ajoute souvent un wrapper interne */
.woocommerce-products-header,
.woocommerce-breadcrumb {
  margin-top: 16px;
}

/* ══════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════ */
:root {
  --lime:       #C6F135;
  --lime-dark:  #A8CC1A;
  --dark:       #1A1A1A;
  --gray-50:    #F7F7F7;
  --gray-200:   #E4E4E4;
  --gray-500:   #737373;
}

/* ══════════════════════════════════════════
   COULEUR PRIMAIRE — surcharge Xstore
   ══════════════════════════════════════════ */
a,
.color-active,
.et-desktop .navigation-style-underline .menu > li.current-menu-item > a,
.et-desktop .navigation-style-underline .menu > li:hover > a {
  color: var(--lime);
}

/* Boutons principaux */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.btn-primary,
.et_button-type-filled,
.dark-skin .et_button-type-filled {
  background-color: var(--lime) !important;
  color: var(--dark) !important;
  border-color: var(--lime) !important;
  font-weight: 700;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--lime-dark) !important;
  border-color: var(--lime-dark) !important;
}

/* ── Bouton panier : Doorgaan naar afrekenen ─────────────── */
.woocommerce .cart .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
a.checkout-button {
  background-color: var(--lime) !important;
  color: var(--dark) !important;
  border-color: var(--lime) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  transition: background-color .15s !important;
  text-decoration: none !important;
}
.woocommerce .cart .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
a.checkout-button:hover {
  background-color: var(--lime-dark) !important;
  color: var(--dark) !important;
}

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
.header-main,
.et-desktop .header-main {
  background-color: var(--dark) !important;
}

/* Logo */
.logo-wrap .logo,
.custom-logo-link {
  color: #fff !important;
}

/* Navigation */
.et-desktop .main-nav > ul > li > a {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
}
.et-desktop .main-nav > ul > li:hover > a,
.et-desktop .main-nav > ul > li.current-menu-item > a {
  color: var(--lime) !important;
}

/* Icônes header (panier, recherche…) */
.header-icons-wrapper .et-icon,
.header-icons-wrapper span {
  color: rgba(255,255,255,0.8) !important;
}
.header-icons-wrapper .et-icon:hover {
  color: var(--lime) !important;
}

/* Cart badge */
.cart-widget-count,
.et-cart-info span.count {
  background-color: var(--lime) !important;
  color: var(--dark) !important;
}

/* ══════════════════════════════════════════
   USP BAR (top bar)
   ══════════════════════════════════════════ */
.header-top,
.top-bar-wrapper {
  background-color: var(--lime) !important;
  color: var(--dark) !important;
  font-weight: 600;
  font-size: 12px;
}
.header-top a,
.top-bar-wrapper a {
  color: var(--dark) !important;
}

/* ══════════════════════════════════════════
   CARTES PRODUITS
   ══════════════════════════════════════════ */
.product-inner,
.woocommerce ul.products li.product .product-element-bottom {
  border-radius: 10px;
}

/* Hover border lime */
.woocommerce ul.products li.product:hover .product-inner {
  border-color: var(--lime);
  box-shadow: 0 8px 24px rgba(198, 241, 53, 0.15);
}

/* Bouton "Add to cart" au hover */
.woocommerce ul.products li.product:hover .button {
  background-color: var(--lime) !important;
  color: var(--dark) !important;
}

/* Prix */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--dark);
  font-weight: 800;
}

/* Prix barré */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--gray-500);
}

/* Sale badge */
.woocommerce span.onsale,
.label-sale {
  background-color: #FF4444 !important;
  border-radius: 4px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .04em;
}

/* New badge */
.label-new {
  background-color: var(--dark) !important;
  border-radius: 4px;
  font-weight: 800;
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.footer-area,
.footer-main {
  background-color: var(--dark) !important;
  color: rgba(255,255,255,0.7) !important;
}
.footer-area a,
.footer-main a {
  color: rgba(255,255,255,0.7) !important;
}
.footer-area a:hover,
.footer-main a:hover {
  color: var(--lime) !important;
}
.footer-area h3,
.footer-area h4,
.footer-main h3,
.footer-main h4 {
  color: #fff !important;
}

/* ══════════════════════════════════════════
   DIVERS
   ══════════════════════════════════════════ */

/* Pagination active */
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--lime) !important;
  color: var(--dark) !important;
  border-color: var(--lime) !important;
}

/* Checkbox & radio focus */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--lime) !important;
  outline: none;
}

/* Widget titres */
.widget-title {
  font-weight: 800;
}

/* Scrollbar subtile */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--lime); border-radius: 3px; }


/* ══════════════════════════════════════════
   /* vp-pages */ — Pages internes
   ══════════════════════════════════════════ */
.vp-page-hero {
  background: var(--dark); padding: 72px 40px 64px;
  text-align: center; color: #fff;
}
.vp-page-hero h1 {
  font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 800;
  letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 14px;
}
.vp-page-hero h1 em { color: var(--lime); font-style: normal; }
.vp-page-hero p { font-size: 17px; color: rgba(255,255,255,.55); max-width: 560px; margin: 0 auto; line-height: 1.65; }

.vp-page-wrap { max-width: 1100px; margin: 0 auto; padding: 60px 40px; }
@media(max-width:768px){ .vp-page-wrap { padding: 40px 20px; } }

/* Prose */
.vp-prose h2 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; margin: 40px 0 12px; color: var(--dark); }
.vp-prose h3 { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; margin: 24px 0 8px; color: var(--dark); }
.vp-prose p { font-size: 15px; line-height: 1.75; color: #444; margin-bottom: 16px; }
.vp-prose ul, .vp-prose ol { padding-left: 22px; margin-bottom: 20px; }
.vp-prose li { font-size: 15px; line-height: 1.75; color: #444; margin-bottom: 6px; }
.vp-prose a { color: var(--dark); border-bottom: 1.5px solid var(--lime); }
.vp-prose a:hover { color: var(--lime-dark); }
.vp-legal { max-width: 820px; }
.vp-cta-inline { margin: 40px 0 0; }

/* Contact */
.vp-contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
@media(max-width:860px){ .vp-contact-grid { grid-template-columns: 1fr; } }
.vp-contact-form h2 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; margin-bottom: 24px; }
.vp-form-note { font-size: 12px; color: var(--g500); margin-top: 12px; }
.vp-info-block { margin-bottom: 28px; }
.vp-info-block h3 { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--dark); }
.vp-info-block p, .vp-info-block a { font-size: 14px; color: #444; line-height: 1.7; }
.vp-info-block a:hover { color: var(--lime); }
.vp-hours { border-collapse: collapse; font-size: 13px; width: 100%; }
.vp-hours td { padding: 4px 12px 4px 0; color: #444; }
.vp-hours td:last-child { font-weight: 600; color: var(--dark); }

/* À propos */
.vp-usps-list { display: flex; flex-direction: column; gap: 20px; margin: 24px 0; }
.vp-usp-row { display: flex; align-items: flex-start; gap: 16px; }
.vp-usp-icon-lg { font-size: 28px; flex-shrink: 0; line-height: 1.2; }
.vp-usp-row strong { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; display: block; margin-bottom: 4px; }
.vp-usp-row p { font-size: 14px; color: var(--g500); margin: 0; }

/* Btn inline */
.vp-btn-lime {
  background: var(--lime); color: var(--dark); padding: 13px 26px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px; transition: background .15s;
  text-decoration: none !important; border: none !important;
}
.vp-btn-lime:hover { background: var(--lime-dark, #A8CC1A); color: var(--dark); }