/* === T-SHIRT COCKTAILS MOBILE FIXES === */
/* Based on desktop responsive + Figma mobile inspiration */

@media (max-width: 768px) {

  /* === GLOBAL === */
  html, body { overflow-x: hidden !important; }
  .container { padding: 0 16px !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; }
  h1 { font-size: 32px !important; letter-spacing: -1.2px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 22px !important; }
  .section { padding: 48px 0; }

  /* === TOPBAR === */
  .site-topbar { padding: 10px 20px; }
  .site-topbar__info { font-size: 12px; text-align: center; }
  .site-topbar__links { display: none; }

  /* === HEADER === */
  .site-header__inner { padding: 13px 20px 14px; }
  .site-header__logo img { height: 55px; width: 55px; }
  .site-header__nav { display: none; }
  .site-header__icons { gap: 8px; }
  .site-header__icons a, .site-header__icons button { width: 36px; height: 36px; }
  .site-header__icons svg { width: 20px; height: 20px; }

  /* === HOMEPAGE === */
  .hero-home { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; min-height: 380px !important; border-radius: 20px !important; margin: 20px auto 0 !important; }
  .hero-home__title { font-size: 42px !important; line-height: 44px !important; letter-spacing: -1.68px !important; }
  .hero-home__content { padding: 20px; align-items: center; justify-content: center; }
  .hero-home__text { max-width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-home__label { font-size: 11px; letter-spacing: 1.32px; }
  .hero-home__cta { width: auto; padding: 0 32px; align-self: center; }

  .products-section { padding: 0 20px; }
  .products-section__header { text-align: left; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-card { overflow: hidden; border-radius: 12px !important; }

  .section-title { font-size: 32px !important; line-height: 35px; letter-spacing: -0.96px; }
  .section-desc { font-size: 15px; }

  .usp-grid { grid-template-columns: 1fr; gap: 12px; }
  .usp-section { max-width: calc(100% - 40px) !important; width: calc(100% - 40px) !important; margin: 0 auto !important; padding: 16px 0 !important; gap: 8px !important; }
  .usp-card { padding: 20px 16px !important; }
  .recipe-link-section .container { flex-direction: column; }
  .recipe-link-section__image { width: 100%; height: 300px; border-radius: 20px; }
  .recipe-link-section__content { padding: 0; }

  .features-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  .video-section { flex-direction: column; }
  .video-section__player { width: 100%; border-radius: 16px; }
  .video-section__overlay { border-radius: 16px; }

  .blog-section__grid { grid-template-columns: 1fr; gap: 20px; }
  .story-section .container { flex-direction: column; }
  .story-section__image { width: 100%; height: 300px; }

  .faq-home-grid { grid-template-columns: 1fr; }

  /* === BOUTIQUE === */
  .shop-hero { padding: 48px 0 40px; }
  .shop-hero h1 { font-size: 36px !important; letter-spacing: -1.5px !important; }
  .shop-hero__desc { font-size: 16px; }
  .shop-filters .container { flex-direction: column; gap: 16px; align-items: flex-start; }
  .shop-filters__left { flex-wrap: wrap; gap: 8px; }
  .filter-pill { padding: 8px 14px; font-size: 13px; }
  .shop-filters__right { width: 100%; justify-content: space-between; }
  .shop-grid { padding: 40px 20px 60px; }
  .shop-products { grid-template-columns: 1fr; gap: 20px; }
  .pcard__img img { height: 400px; }
  .shop-seo { padding: 48px 20px; }
  .shop-seo__inner { padding: 0; }
  .shop-seo h2 { font-size: 20px; }

  /* === FICHE PRODUIT === */
  .product-section .container { grid-template-columns: 1fr; gap: 24px; }
  .product-gallery { position: static; }
  .product-gallery__main img { height: 400px; }
  .product-gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .product-gallery__thumb img { height: 80px; }
  .product-details { padding-top: 0; }
  .product-details__name { font-size: 32px !important; letter-spacing: -1.2px !important; }
  .product-details__header { flex-direction: row; }
  .product-sizes__grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .add-to-cart { height: 56px; font-size: 15px; }

  .product-story { padding: 60px 20px; }
  .product-story .container { grid-template-columns: 1fr; gap: 32px; }
  .product-story__img img { height: 400px; }
  .product-story__title { font-size: 28px !important; }

  .recipe-cta-section { padding: 40px 20px; }
  .recipe-cta { padding: 48px 24px; border-radius: 20px; }
  .recipe-cta h2 { font-size: 28px !important; }
  .recipe-cta p { font-size: 16px; }

  .related-section { padding: 40px 20px 60px; }
  .related-header { flex-direction: column; gap: 16px; align-items: flex-start; }
  .related-grid { grid-template-columns: 1fr; gap: 20px; }
  .related-card__img img { height: 400px; }

  /* === RECETTE === */
  .recipe-section .container { grid-template-columns: 1fr; gap: 32px; }
  .recipe-photo img { height: 400px; }
  .recipe-tshirt { grid-template-columns: 1fr; }
  .recipe-tshirt__img img { height: 280px; }
  .recipe-right h1 { font-size: 36px !important; }
  .recipe-ingredients h2, .recipe-steps h2 { font-size: 28px !important; }
  .recipe-history { padding: 24px; }
  .recipe-history h2 { font-size: 24px !important; }

  /* === WISHLIST === */
  .wishlist-section { padding: 48px 0 80px; }
  .wishlist-header h1 { font-size: 32px !important; }
  .wishlist-grid { grid-template-columns: 1fr; gap: 20px; }
  .wcard__img img { height: 400px; }

  /* === FAQ === */
  .faq-page .container { flex-direction: column; }
  .faq-sidebar { width: 100%; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 16px; }
  .faq-sidebar button { white-space: nowrap; }

  /* === CONTACT === */
  .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .contact-info-section { padding: 24px !important; }
  .contact-form-wrap { padding: 24px !important; }
  .contact-form-grid { grid-template-columns: 1fr !important; }
  .contact-form textarea { min-height: 120px !important; }

  /* === AVIS === */
  .avis-grid { grid-template-columns: 1fr; }
  .avis-header__score { font-size: 64px; }

  /* === GUIDE TAILLES === */
  .size-guide-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .size-guide-left { order: 1; }
  .size-guide-right { order: 2; }
  .size-table { overflow-x: auto !important; }
  .size-table table { min-width: 300px; }
  .size-cta-box { flex-direction: column !important; gap: 16px !important; padding: 24px !important; }
  .size-cta-text { max-width: 100% !important; }

  /* === PANIER === */
  .cart-layout { flex-direction: column; }
  .cart-summary { width: 100%; }

  /* === 404 === */
  .error-page { padding: 80px 0 100px; }
  .error-page__code { font-size: 80px; }
  .error-page__title { font-size: 24px !important; }

  /* === FOOTER === */
  .site-footer { padding: 40px 20px 20px !important; }
  .site-footer .container { padding: 0 !important; width: 100% !important; max-width: 100% !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; width: 100% !important; }
  .footer-brand p { max-width: 100% !important; }
  .footer-newsletter__form { flex-direction: column; }
  .footer-newsletter__form input { width: 100%; }
  .footer-newsletter__form button { width: 100%; }
  .footer-bottom { padding: 16px 20px !important; border-top: 1px solid rgba(0,0,0,0.06); }
  .footer-bottom .container { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: center !important; text-align: center !important; }
  .footer-copyright { font-size: 11px !important; line-height: 1.5 !important; color: #758694 !important; }
  .footer-legal { display: flex !important; gap: 16px !important; justify-content: center !important; }
  .footer-legal a { font-size: 12px !important; color: #405d72 !important; }
}

  /* === MENU MOBILE === */
  .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; padding: 80px 24px 40px; }
  .mobile-menu__close { position: absolute; top: 20px; right: 20px; }
  .mobile-menu a { display: block; padding: 16px 0; font-size: 18px; border-bottom: 1px solid #f0f0f0; }

  /* === AVIS MOBILE === */
  .avis-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .avis-card { padding: 20px !important; }
  .avis-card__photo { height: 200px !important; }





  /* === PANIER MOBILE === */
  .cart-layout { flex-direction: column !important; gap: 24px; }
  .cart-summary { width: 100% !important; position: static !important; }
  .cart-item { flex-direction: row; gap: 12px; }
  .cart-item__img { width: 80px; height: 80px; flex-shrink: 0; }
  .cart-cross-sell .product-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }

@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
  .product-gallery__thumbs { gap: 6px; }
  .product-gallery__thumb img { height: 70px; }

  /* === BANDEAU MARQUEE (v5.2) === */
  .top-bar { position: static !important; overflow: hidden !important; height: 40px !important; }
  .top-bar .container {
    display: flex !important; white-space: nowrap !important; max-width: none !important;
    width: max-content !important; animation: tsc-scroll 12s linear infinite !important;
    padding: 0 !important; gap: 0 !important; flex-wrap: nowrap !important;
    align-items: center !important; height: 40px !important;
  }
  .top-bar .container > .top-bar__info {
    display: inline !important; width: auto !important; max-width: none !important;
    flex: none !important; padding: 0 30px !important; font-size: 12px !important;
  }
  .top-bar .container > .top-bar__info > * { display: inline !important; }
  .top-bar .top-bar__links { display: none !important; }

  /* === RELATED PRODUCTS HORIZONTAL SCROLL (v5.2) === */
  .sp-related .product-grid,
  .sp-related .product-grid--3 {
    display: flex !important; overflow-x: auto !important; overflow-y: hidden !important;
    flex-wrap: nowrap !important; gap: 12px !important; padding: 0 16px !important;
    scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sp-related .product-grid::-webkit-scrollbar,
  .sp-related .product-grid--3::-webkit-scrollbar { display: none; }
  .sp-related .product-grid > .product-card,
  .sp-related .product-grid--3 > .product-card {
    flex: 0 0 60% !important; min-width: 60% !important; max-width: 60% !important;
    scroll-snap-align: start !important; background: transparent !important;
    border: none !important; box-shadow: none !important;
  }
  .sp-related .product-card__image {
    background: transparent !important; overflow: hidden !important;
    aspect-ratio: 3/5 !important; height: auto !important;
  }
  body.single-product .sp-related .product-card__image.product-card__image img {
    object-fit: cover !important; width: 100% !important; height: 100% !important;
  }
  body .sp-related .product-card__image.product-card__image {
    background: transparent !important;
  }

  /* === PRODUCT PAGE LAYOUT (v5.2) === */
  .single-product-page > .container { padding-left: 16px !important; padding-right: 16px !important; }
  .sp-layout { width: 100% !important; }
  .sp-gallery { width: 100% !important; }
  .sp-gallery__thumbs {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px !important;
  }
  .sp-gallery__thumbs::-webkit-scrollbar { display: none; }
  .sp-gallery__thumbs .sp-thumb { flex-shrink: 0 !important; width: 72px !important; height: 72px !important; }
  .sp-gallery__thumbs .sp-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

  
  
  /* Override cached #27 block */
  body .product-card__image {
    overflow: hidden !important;
    border-radius: 16px !important;
  }
  body .product-card__image img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }

  
  /* Related products: hide emojis, name + price stacked */
  .sp-related .product-card__emojis { display: none !important; }
  .sp-related .product-card__header { flex-direction: column !important; gap: 2px !important; }
  .sp-related .product-card__name { font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .sp-related .product-card__price { font-size: 14px !important; color: #758694 !important; }
  .sp-related .product-card__variant { display: none !important; }

  
  /* Hide footer keyword tags on mobile */
  .footer-tags { display: none !important; }

  
  /* Cart page: reduce padding + fix cross-sell overflow */
  .woocommerce-cart .container { padding-left: 16px !important; padding-right: 16px !important; }
  .cart-cross-sell .product-grid { display: flex !important; overflow-x: auto !important; flex-wrap: nowrap !important; gap: 12px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cart-cross-sell .product-grid::-webkit-scrollbar { display: none; }
  .cart-cross-sell .product-grid > * { flex: 0 0 45% !important; min-width: 45% !important; scroll-snap-align: start; }

  
  /* Cart item thumbnail: reset aspect-ratio and cover */
  .cart-item .product-card__image,
  .cart-items .product-card__image,
  .cart-item a[class*="image"],
  .cart-items a img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    overflow: visible !important;
  }

  /* === EMOJI FIX (v5.2) === */
  .product-card__emoji img {
    width: 18px !important; height: 18px !important;
    object-fit: contain !important; max-height: 18px !important;
  }

}


/* === RECETTE MOBILE — ESPRIT & HISTOIRE DU COCKTAIL v3 === */
/* Desktop uniquement : masquer les icones SVG sur ces 2 blocs */
@media (min-width: 769px) {
  .sr-spirit__icon,
  .sr-history__icon {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* L'esprit du cocktail : meme design que "Recette proposee par" (.sr-author) */
  /* Structure HTML: .sr-spirit > .sr-spirit__icon + .sr-spirit__header + p.sr-spirit__text */
  .sr-spirit {
    background: #eef5f8 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    padding: 21px !important;
    display: grid !important;
    grid-template-columns: 52px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    color: inherit !important;
    box-shadow: none !important;
    align-items: start !important;
  }
  .sr-spirit__icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    background: #1f8ca5 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    align-self: start !important;
  }
  .sr-spirit__icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
    fill: none !important;
  }
  .sr-spirit__header {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }
  .sr-spirit__badge {
    color: #1f8ca5 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: block !important;
    order: -1 !important;
  }
  .sr-spirit__title {
    color: #173042 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: block !important;
  }
  .sr-spirit__text {
    grid-column: 2 !important;
    grid-row: 2 !important;
    color: #405d72 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
  }

  /* L'histoire du cocktail : fond bleu, 1 SVG livre, texte a gauche */
  .sr-history {
    background: #1f8ca5 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: left !important;
    display: block !important;
    color: #ffffff !important;
  }
  .sr-history__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 50% !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
  }
  .sr-history__icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: rgba(255, 255, 255, 0.95) !important;
    fill: none !important;
  }
  .sr-history__label {
    color: rgba(255, 255, 255, 0.8) !important;
    display: block !important;
    text-align: left !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
  .sr-history__title {
    color: #ffffff !important;
    font-size: 22px !important;
    letter-spacing: -0.5px !important;
    text-align: left !important;
    margin: 0 0 14px !important;
  }
  .sr-history__text {
    color: rgba(255, 255, 255, 0.88) !important;
    text-align: left !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  .sr-history__text:last-child {
    margin-bottom: 0 !important;
  }
}
/* Hide badges until JS verifies */
.cart-count, .wishlist-count { display: none !important; }