/*
 * Leñas Solórzano — Mobile Fixes
 * Correctifs responsive mobile uniquement.
 * Desktop (>= 769px) non impacté.
 * Priorité enqueue 999 → override thème + WooCommerce.
 */

/* ═══════════════════════════════════════════════════════════════════
   #1 — BANDE BLANCHE ~25% À DROITE (CRITIQUE)
   Cause : éléments avec width/min-width fixes créent un scroll
   horizontal. Fix global : html + body contraints à 100vw max.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Tous les wrappers de premier niveau */
  .site-header,
  .header-top-row,
  .site-nav,
  .site-main,
  .site-footer,
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* container-main : déjà width:100% dans le thème, mais s'assurer du padding */
  .container-main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #10 — HEADER MOBILE
   Logo + icônes sur une ligne propre, zones tactiles ≥ 44×44 px.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header {
    width: 100% !important;
  }

  .header-top-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-main-row {
    height: 60px !important;
    padding: 0 !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-logo img {
    height: 44px !important;
    width: auto !important;
  }

  /* Icônes — zones tactiles 44×44 */
  .header-action-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }

  /* Masquer le bouton Categorías sur mobile (il existe dans le drawer) */
  .btn-categorias {
    display: none !important;
  }

  /* Masquer la search bar desktop (déjà cachée normalement) */
  .header-search-wrap {
    display: none !important;
    position: static !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Nav secondaire navy — masquée sur mobile sauf si drawer open */
  .site-nav:not(.is-open) {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #8 — FOOTER PLEIN LARGEUR + COMPACT
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-footer {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 32px 0 16px !important;
    margin-top: 40px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Réduire espacement entre sections footer */
  .footer-widget {
    padding: 0 !important;
  }

  .footer-widget-title {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  .footer-widget li {
    margin-bottom: 6px !important;
  }

  .footer-widget a {
    font-size: 13px !important;
  }

  /* Section entreprise (widget 1) — plus compacte */
  .footer-widget--company p {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 11px !important;
    text-align: center !important;
    padding-top: 16px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #9 — ESPACE VIDE BAR CUPÓN → TITRE "REALIZAR PEDIDO"
   WooCommerce génère une .woocommerce-info avec marge excessive.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lenas-checkout .woocommerce-info,
  .woocommerce-checkout .woocommerce-info,
  .woocommerce-form-coupon-toggle,
  .checkout_coupon {
    margin-bottom: 12px !important;
    margin-top: 0 !important;
  }

  .lenas-checkout__title {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #2 — FORMULAIRE CHECKOUT : 1 COLONNE SUR MOBILE
   WC génère .form-row-first et .form-row-last en float côte à côte.
   Override pour les empiler en 1 colonne sur < 768px.
   Exception : CP + Ville peuvent rester sur 2 colonnes.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Reset floats WC natifs */
  .lenas-checkout .form-row-first,
  .lenas-checkout .form-row-last,
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    float: none !important;
    width: 100% !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Grid WC billing fields → 1 colonne */
  .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields .shipping_address {
    grid-template-columns: 1fr !important;
  }

  /* Tous les form-row en block full-width */
  .lenas-checkout p.form-row,
  .lenas-checkout .form-row {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Exception CP + Ville : on les laisse côte à côte (si souhaité) */
  /* Décommentez si vous voulez cette exception :
  .lenas-checkout #billing_postcode_field,
  .lenas-checkout #billing_city_field {
    width: 48% !important;
    float: left !important;
  }
  .lenas-checkout #billing_city_field {
    float: right !important;
  }
  */
}

/* ═══════════════════════════════════════════════════════════════════
   #3 — CARTE SEPA : TITRE SUR 1 LIGNE
   Label du payment method = flex. Le texte + icône doivent tenir.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lenas-checkout__payment li.wc_payment_method > label {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* L'icône reste fixe à gauche */
  .lenas-checkout__payment .lenas-pay-icon {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Le texte label : colonne pour titre + sous-titre */
  .lenas-checkout__payment li.wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
  }

  /* Forcer le texte à tenir sur 1 ou 2 lignes max, pas 3 */
  .lenas-checkout__payment li.wc_payment_method > label > span:not(input):not(.lenas-pay-icon) {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* Padding réduit pour gagner de la place */
  .lenas-checkout__payment li.wc_payment_method {
    padding: 14px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #5 — RÉSUMÉ COMMANDE : WRAP DU NOM PRODUIT
   .lenas-review__name avait white-space:nowrap → overflow horizontal.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lenas-review__name {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Prix sur la même ligne à droite, ou en dessous si nécessaire */
  .lenas-review__item {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .lenas-review__price {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Le résumé complet ne déborde pas */
  .lenas-checkout-review,
  .lenas-checkout__side {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Tables dans le résumé */
  .lenas-checkout-review table,
  .woocommerce-checkout-review-order table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  .lenas-checkout-review td,
  .lenas-checkout-review th {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #6 — BOUTON "CONFIRMAR PEDIDO" : COULEUR BRAND + PLEINE LARGEUR
   Actuellement : background navy (#3D2010).
   Cible : background teal (#C4561A), pleine largeur.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lenas-checkout .place-order button[type="submit"],
  .lenas-checkout #place_order,
  #place_order {
    background: #C4561A !important;
    color: #ffffff !important;
    width: 100% !important;
    display: block !important;
    padding: 18px 24px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .lenas-checkout .place-order button[type="submit"]:hover,
  .lenas-checkout #place_order:hover,
  #place_order:hover {
    background: #A8461A !important;
  }

  /* Section place-order pleine largeur */
  .lenas-checkout .place-order,
  .woocommerce-checkout .place-order {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #7 — RÉSUMÉ COMMANDE SOUS LE BOUTON SUR MOBILE
   La grille checkout est déjà 1 colonne sur mobile (CSS thème).
   Le résumé (.lenas-checkout__side) est déjà APRÈS le main dans le DOM.
   On s'assure qu'il apparaît bien en dessous.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .lenas-checkout__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .lenas-checkout__main {
    order: 1 !important;
    width: 100% !important;
  }

  .lenas-checkout__side {
    order: 2 !important;
    width: 100% !important;
    position: static !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FIXES GÉNÉRAUX MOBILE — checkout + cart pleine largeur
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lenas-checkout,
  .lenas-cart {
    padding: 20px 0 40px !important;
  }

  .lenas-checkout__section {
    padding: 16px !important;
    border-radius: 10px !important;
  }

  /* Cart items compacts sur mobile */
  .lenas-cart__grid,
  form.lenas-cart__grid {
    gap: 16px !important;
  }

  /* Panier récapitulatif */
  .lenas-cart-recap {
    padding: 16px !important;
  }

  /* Sections thank-you */
  .lenas-thankyou__card {
    padding: 20px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PROTECTION OVERFLOW GLOBAL (toutes pages mobile)
   Empêche tout élément à width fixe de casser le layout.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Images et médias */
  img, video, iframe, table {
    max-width: 100% !important;
  }

  /* WooCommerce fallback tables */
  .woocommerce table.shop_table,
  .woocommerce-page table.shop_table {
    width: 100% !important;
    table-layout: auto !important;
  }

  /* Texte légal footer et autres longs strings */
  p, span, a, li, td, th {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}