/* ==========================================================================
   Mobile Responsive Fixes — euroshopkey.com
   Loaded after style.css to override desktop styles on small screens.
   ========================================================================== */

/* ==========================================================================
   A. HEADER & NOTIFICATION BANNER (< 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Reduce fixed header padding to save vertical space */
  #header {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  /* --- LOGO: compact on mobile --- */
  /* Key icon: smaller */
  #header .bg-blue-100.w-10.h-10 {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  #header .bg-blue-100 .fa-key {
    font-size: 0.875rem;
  }

  /* Logo text: smaller */
  #header .text-2xl.font-bold {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  /* Spacing between icon and text */
  #header .ml-2\.5 {
    margin-left: 0.375rem;
  }

  /* "Leader européen" subtitle: hidden on small mobile */
  #header .text-\[10px\].text-gray-500 {
    display: none;
  }

  /* Microsoft logo next to subtitle: also hide */
  #header .ml-2\.5 > div.flex.items-center {
    display: none;
  }

  /* --- RIGHT SIDE: reduce spacing between icons --- */
  #header .flex.items-center.space-x-5 {
    gap: 0.5rem;
  }

  /* Override Tailwind space-x-5 (20px) on mobile */
  #header .space-x-5 > * + * {
    margin-left: 0.5rem !important;
  }

  /* Cart & menu toggle icons — 40px touch target, not 44 (save space) */
  #header .w-10.h-10 {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  /* Account button: icon only, compact */
  #header .btn-md {
    min-height: 40px;
    min-width: 40px;
    padding: 0.5rem;
    border-radius: 9999px;
  }

  /* Touch targets: keep reasonable minimums */
  #header a,
  #header button {
    min-height: 40px;
  }

  /* Notification banner: more compact */
  #notification-banner {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  #notification-banner .text-sm {
    font-size: 0.7rem;
    line-height: 1.2;
  }
}

/* Very small phones (iPhone SE 375px): extra compact header */
@media (max-width: 400px) {
  /* Logo text even smaller */
  #header .text-2xl.font-bold {
    font-size: 1.05rem;
  }

  /* Key icon even smaller */
  #header .bg-blue-100.w-10.h-10 {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  #header .bg-blue-100 .fa-key {
    font-size: 0.75rem;
  }

  /* Tighter spacing */
  #header .space-x-5 > * + * {
    margin-left: 0.35rem !important;
  }

  /* Cart icon smaller */
  #header .w-10.h-10 {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  /* Account button smaller */
  #header .btn-md {
    min-height: 36px;
    min-width: 36px;
    padding: 0.375rem;
  }

  /* Reduce container padding */
  #header .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ==========================================================================
   B. HERO SECTIONS (< 768px)
   pt-36 = 144px, pt-32 = 128px — too much on mobile
   ========================================================================== */

@media (max-width: 768px) {
  /* All pages using pt-36 (home, blog, contact, about, legal pages) */
  .pt-36 {
    padding-top: 7rem !important; /* 112px instead of 144px */
  }

  /* Product page uses pt-32 */
  .pt-32 {
    padding-top: 6rem !important; /* 96px instead of 128px */
  }

  /* Reduce bottom padding on hero sections */
  .pb-20 {
    padding-bottom: 3rem !important;
  }

  .pb-16 {
    padding-bottom: 2.5rem !important;
  }

  /* Hero H1: slightly smaller on tablets */
  .text-4xl {
    font-size: 1.875rem; /* 30px instead of 36px */
    line-height: 1.2;
  }

  /* Hero H2 subtitle */
  .text-xl {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   C. SMALL SCREENS — TITLES, BADGES, CTAs (< 480px)
   ========================================================================== */

@media (max-width: 480px) {
  /* H1 on very small iPhones (SE, Mini) */
  .text-4xl {
    font-size: 1.625rem; /* 26px */
    line-height: 1.2;
  }

  /* Trust badges: stack vertically on very small screens */
  section .flex.flex-wrap.justify-center.items-center.gap-4 {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Trust badge items: full width */
  section .flex.flex-wrap.justify-center.items-center.gap-4 > div {
    width: 100%;
    justify-content: flex-start;
  }

  /* CTA buttons: full width */
  .btn-lg,
  .btn-primary.btn-lg,
  a.btn-lg {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Hero announcement badge: more compact */
  .inline-flex.items-center.px-4.py-2.bg-white\/90 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8rem;
  }

  /* Reduce container side padding slightly */
  .container.mx-auto.px-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ==========================================================================
   D. SINGLE PRODUCT PAGE — LAYOUT
   ========================================================================== */

/* Desktop (lg+): 2-column grid, left = image/apps/purchases, right = cart */
@media (min-width: 1024px) {
  .product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .product-image   { grid-column: 1; grid-row: 1; }
  .product-apps    { grid-column: 1; grid-row: 2; }
  .product-purchases { grid-column: 1; grid-row: 3; }
  #cartsection     { grid-column: 2; grid-row: 1 / span 3; }
}

/* Mobile (<1024px): flex column, reordered */
@media (max-width: 1023px) {
  .product-layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .product-image     { order: 1; }
  #cartsection       { order: 2; }
  .product-apps      { order: 3; }
  .product-purchases { order: 4; }
}

/* ==========================================================================
   D2. SINGLE PRODUCT PAGE — MOBILE COMPACT (< 768px)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- IMAGE: compact on mobile --- */
  .product-image .aspect-w-16.aspect-h-12 {
    max-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-image .aspect-w-16.aspect-h-12 img {
    max-height: 200px;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem !important;
  }

  .product-image .relative {
    margin-bottom: 0 !important;
  }

  /* Badges on image: smaller */
  .product-image .absolute.top-4.left-4 {
    top: 0.5rem;
    left: 0.5rem;
  }

  .product-image .absolute.top-4.left-4 > div {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }

  /* "X personnes consultent" badge: compact */
  .product-image .absolute.bottom-4.left-4 {
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    border-radius: 0.375rem;
  }

  /* --- BREADCRUMB: compact --- */
  .breadcrumb {
    font-size: 0.7rem;
    margin-bottom: 0.75rem;
  }

  .breadcrumb .breadcrumb-separator .mx-2 {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
  }

  /* --- PRODUCT TITLE: smaller --- */
  #cartsection .mb-5 h1 {
    font-size: 1.4rem !important;
    line-height: 1.25;
    margin-bottom: 0.25rem !important;
  }

  #cartsection .mb-5 > p.text-gray-600 {
    font-size: 0.8rem;
    margin-bottom: 0.25rem !important;
  }

  #cartsection .mb-5 .flex.items-center.space-x-2 {
    font-size: 0.8rem;
  }

  #cartsection .mb-5 .flex.items-center.space-x-2 .text-gray-500 {
    font-size: 0.7rem;
  }

  /* --- STATUS INDICATORS: compact --- */
  #cartsection > .flex.flex-wrap.gap-4.mb-5 {
    gap: 0.25rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  #cartsection > .flex.flex-wrap.gap-4.mb-5 .text-sm {
    font-size: 0.75rem;
  }

  /* --- PRICE BOX: prominent --- */
  #cartsection > .bg-white.rounded-xl.shadow-premium.p-5.mb-5 {
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .price-tag .price-current {
    font-size: 1.8rem !important;
  }

  .price-tag .price-original {
    font-size: 0.9rem;
  }

  .price-tag .price-discount {
    font-size: 0.8rem;
  }

  /* Stock bar */
  #cartsection .mb-3 .h-2\.5 {
    height: 0.5rem;
  }

  .satisfaction-guarantee {
    padding: 0.5rem !important;
    font-size: 0.8rem;
  }

  /* --- VARIATION CARDS: compact --- */
  .option-card {
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .option-card h4 {
    font-size: 0.9rem !important;
  }

  .option-card .text-xl {
    font-size: 1.1rem !important;
  }

  .option-card ul li {
    margin-bottom: 0.15rem !important;
  }

  .bundle-badge {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.5rem !important;
  }

  .cart_templatediv .mb-5 > h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* --- QUANTITY: compact --- */
  .quantity-selector { max-width: 140px; }
  .quantity-input { width: 40px !important; height: 36px !important; font-size: 0.9rem; }
  .quantity-button { width: 36px !important; height: 36px !important; }

  /* --- CTA BUTTONS --- */
  .addtocartbuttonsingle,
  .btn.btn-purchase {
    padding: 0.875rem !important;
    font-size: 1rem !important;
  }

  #cartsection .space-y-3.mb-5 {
    margin-bottom: 0.5rem !important;
  }

  /* --- SECURE PAYMENT: compact --- */
  .secure-payment {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .secure-payment img { height: 24px !important; }

  /* --- TRUST BADGES: compact --- */
  .trust-badge .text-xl { font-size: 1rem !important; }
  .trust-badge .font-medium { font-size: 0.8rem; }
  .trust-badge .text-xs { font-size: 0.65rem; }

  /* --- FEATURE LIST: compact --- */
  .feature-list li { font-size: 0.8rem; padding: 0.25rem 0; }

  /* --- APPS INCLUDED: compact --- */
  .product-apps .bg-white { padding: 0.75rem !important; margin-bottom: 0 !important; }
  .app-icon { width: 2rem !important; height: 2rem !important; }
  .app-item h4 { font-size: 0.85rem; }
  .app-feature-list { font-size: 0.75rem !important; }

  /* --- RECENT PURCHASES: compact --- */
  .product-purchases .bg-white { padding: 0.75rem !important; }
  .recent-purchase-item { padding: 0.4rem; }
  .recent-purchase-item .purchase-avatar { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; }
  .recent-purchase-item .text-sm.font-medium { font-size: 0.75rem; flex-wrap: wrap; }
  .recent-purchase-item .bg-green-100.text-green-800 { font-size: 0.55rem; padding: 0.1rem 0.3rem; }

  /* --- TABS: horizontal scroll --- */
  .tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { font-size: 0.8rem; padding: 0.6rem 0.75rem; white-space: nowrap; flex-shrink: 0; }

  .tab-content.bg-white.rounded-xl.shadow-premium.p-8 { padding: 1rem !important; }
  .tab-content .max-w-3xl { font-size: 0.85rem; }
  .mt-16.mb-12 { margin-top: 1.5rem !important; margin-bottom: 1rem !important; }

  /* --- COUNTDOWN: compact --- */
  .promo-counter { margin-bottom: 0.5rem !important; }
  .promo-counter .text-lg { font-size: 0.85rem; }
  .counter-value { font-size: 1.1rem; min-width: 2.5rem; }
  .counter-label { font-size: 0.55rem; }
}

/* Very small screens (< 400px) */
@media (max-width: 400px) {
  .product-image .aspect-w-16.aspect-h-12 { max-height: 180px; }
  .product-image .aspect-w-16.aspect-h-12 img { max-height: 160px; }
  #cartsection .mb-5 h1 { font-size: 1.25rem !important; }
  .option-card { padding: 0.5rem !important; }
  .option-card h4 { font-size: 0.85rem !important; }
}

/* ==========================================================================
   E. WOOCOMMERCE MESSAGES (< 768px)
   Fixed width: 300px & position: absolute in singleproduct.css
   ========================================================================== */

@media (max-width: 768px) {
  .woocommerce-info,
  .woocommerce-error,
  .woocommerce-message {
    width: 90vw !important;
    max-width: 90vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 0.85rem;
    top: 120px !important;
  }
}

/* ==========================================================================
   F. iOS FORM ZOOM FIX
   iOS Safari zooms in when inputs have font-size < 16px.
   ========================================================================== */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   G. FOOTER (< 480px)
   ========================================================================== */

@media (max-width: 480px) {
  /* Footer: reduce top padding */
  .bg-gray-900.text-white.pt-10.pb-6 {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }

  /* Footer columns: tighter gap */
  .bg-gray-900 .grid.gap-8 {
    gap: 1.5rem;
  }

  /* Footer titles */
  .footer-title {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }

  /* Footer links: larger touch targets */
  .footer-link {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.85rem;
  }

  /* Footer bottom bar */
  .footer-bottom {
    padding-top: 1rem;
    font-size: 0.75rem;
  }

  /* Payment methods: allow wrapping */
  .footer-bottom .flex.items-center.space-x-4 {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Newsletter form: stack on mobile */
  .footer-bottom input[type="email"] {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ==========================================================================
   H. BOUTIQUE / SHOP PAGE (< 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* --- Boutique: reduce top padding (pt-28 = 112px) --- */
  main.pt-28 {
    padding-top: 5.5rem !important; /* 88px */
  }

  /* --- Sidebar: hidden by default on mobile, revealed via JS toggle --- */
  .shop-sidebar-mobile-hidden {
    display: none !important;
  }

  .shop-sidebar-mobile-visible {
    display: block !important;
  }

  /* Sidebar wrapper: full width, not sticky on mobile */
  main .flex.flex-col.lg\:flex-row.gap-8 > aside {
    width: 100% !important;
    order: 2;
  }

  main .flex.flex-col.lg\:flex-row.gap-8 > aside > div {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 1rem;
  }

  /* Products area first on mobile */
  main .flex.flex-col.lg\:flex-row.gap-8 > .flex-1 {
    order: 1;
  }

  /* --- Page header banner: compact on mobile --- */
  main .bg-gradient-to-r.from-blue-600.to-indigo-700 {
    padding: 1.25rem !important;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
  }

  main .bg-gradient-to-r.from-blue-600.to-indigo-700 h1 {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem;
  }

  main .bg-gradient-to-r.from-blue-600.to-indigo-700 p {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
  }

  /* Search form: stack on mobile */
  main .bg-gradient-to-r.from-blue-600.to-indigo-700 form.flex {
    flex-direction: column;
  }

  main .bg-gradient-to-r.from-blue-600.to-indigo-700 form .relative.flex-1 input {
    border-radius: 0.75rem !important;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
  }

  main .bg-gradient-to-r.from-blue-600.to-indigo-700 form button[type="submit"] {
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem;
    width: 100%;
  }

  /* --- Toolbar: compact layout --- */
  main .bg-white.rounded-xl.shadow-sm.p-4.mb-6 {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
  }

  /* --- Product grid: 2 columns on mobile for phones >= 360px --- */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
  }

  /* Product cards: compact padding */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 > div .p-5 {
    padding: 0.75rem;
  }

  /* Product title: smaller */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 > div h3 {
    font-size: 0.8rem;
    min-height: 36px;
    line-height: 1.3;
    margin-bottom: 0.35rem;
  }

  /* Product rating: smaller */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 .text-yellow-400.text-sm {
    font-size: 0.6rem;
  }

  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 .text-yellow-400 + .text-xs {
    font-size: 0.6rem;
  }

  /* Product price: slightly smaller */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 .text-2xl.font-bold.text-blue-600 {
    font-size: 1.15rem;
  }

  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 .text-sm.text-gray-400.line-through {
    font-size: 0.7rem;
  }

  /* Product buy button: more compact */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 .space-y-2 a {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  /* Product trust badges at bottom: hide on mobile grid to save space */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 .border-t.border-gray-100.text-xs {
    display: none;
  }

  /* Product badges (ribbon & discount): smaller */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 .absolute.top-3 span {
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
  }

  /* Stock indicator: compact */
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 .text-orange-600.mb-3 {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
  }

  /* --- List view: compact on mobile --- */
  main .space-y-4.mb-8 > div.flex.flex-col.sm\:flex-row {
    flex-direction: column;
  }

  main .space-y-4.mb-8 > div .sm\:w-48 {
    width: 100%;
    height: 150px;
  }

  main .space-y-4.mb-8 > div .flex-1.p-5 {
    padding: 0.75rem;
  }

  /* --- Pagination: touch-friendly --- */
  .pagination-item a,
  .pagination-item span {
    min-width: 44px !important;
    height: 44px !important;
    font-size: 0.85rem;
  }

  /* --- SEO section: compact --- */
  main section.bg-white.rounded-2xl.shadow-sm.p-8.mt-12 {
    padding: 1.25rem !important;
    margin-top: 1.5rem;
    border-radius: 0.75rem;
  }

  main section.bg-white.rounded-2xl h2 {
    font-size: 1.25rem;
  }

  main section.bg-white.rounded-2xl h3 {
    font-size: 1rem;
  }

  main section.bg-white.rounded-2xl .prose {
    font-size: 0.85rem;
  }

  /* SEO price cards: 2 columns on mobile */
  main section.bg-white.rounded-2xl .grid.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  main section.bg-white.rounded-2xl .grid.md\:grid-cols-2.lg\:grid-cols-4 > div {
    padding: 0.75rem;
  }

  main section.bg-white.rounded-2xl .grid.md\:grid-cols-2.lg\:grid-cols-4 .text-2xl {
    font-size: 1.15rem;
  }

  /* --- Breadcrumb boutique: compact --- */
  main > .container > nav.mb-6.text-sm {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
  }

  /* --- Filter toggle button (added via JS) --- */
  .mobile-filter-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: white;
    border: 2px solid #3b82f6;
    color: #3b82f6;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .mobile-filter-toggle:active {
    background: #3b82f6;
    color: white;
  }

  .mobile-filter-toggle .filter-count {
    background: #3b82f6;
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    min-width: 1.25rem;
    text-align: center;
  }
}

/* Boutique: very small screens (< 360px) — single column fallback */
@media (max-width: 359px) {
  main .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Filter toggle: TOUJOURS cache par defaut, visible seulement en mobile via media query */
.mobile-filter-toggle {
  display: none !important;
}


/* ==========================================================================
   I. GENERAL MOBILE UTILITIES
   ========================================================================== */

@media (max-width: 768px) {
  /* Prevent horizontal overflow (safety net) */
  body {
    overflow-x: hidden;
  }

  /* Images: never overflow container */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Tables: horizontal scroll wrapper */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Smooth scrolling momentum on iOS */
  .overflow-auto,
  .overflow-x-auto,
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   J. PANIER / CART PAGE — MOBILE (< 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* --- Reduce page top padding --- */
  main.py-16.bg-gray-50 {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }

  /* --- Page Header: compact --- */
  main.py-16 .text-center.mb-12 {
    margin-bottom: 1.5rem !important;
  }

  main.py-16 .text-center.mb-12 h1 {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  main.py-16 .text-center.mb-12 p {
    font-size: 0.85rem;
    display: none; /* Cacher la description sur mobile — plus de place */
  }

  main.py-16 .text-center.mb-12 .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }

  /* --- Trust indicators: horizontal scroll au lieu de 3 colonnes --- */
  main.py-16 .grid.grid-cols-1.md\:grid-cols-3.gap-4.mb-8 {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  main.py-16 .grid.grid-cols-1.md\:grid-cols-3.gap-4.mb-8::-webkit-scrollbar {
    display: none;
  }

  main.py-16 .grid.grid-cols-1.md\:grid-cols-3.gap-4.mb-8 > .trust-indicator {
    min-width: max-content;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  /* --- Cart item cards: compact on mobile --- */
  .cartprodctslistitem.mb-4 {
    margin-bottom: 0.5rem !important;
  }

  .cartprodctslistitem .quantity-input {
    width: 36px !important;
    height: 32px !important;
    font-size: 0.85rem;
  }

  /* --- Order Summary sidebar: below cart on mobile --- */
  #order-summery {
    margin-top: 0.5rem;
  }

  #order-summery .card .p-6 {
    padding: 1rem !important;
  }

  #order-summery h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem !important;
  }

  /* Coupon form: tighter */
  #order-summery .couponcodesubmitter {
    gap: 0.5rem;
  }

  #order-summery .couponcodesubmitter .form-input {
    padding: 0.625rem 0.75rem;
  }

  /* Sticky summary: not sticky on mobile */
  #order-summery .sticky.top-8 {
    position: static !important;
  }

  /* Checkout button: big and prominent */
  #order-summery .btn.btn-primary.btn-lg {
    padding: 1rem !important;
    font-size: 1rem !important;
    font-weight: 700;
  }

  /* Security info: compact */
  #order-summery .border-t .text-xs {
    font-size: 0.7rem;
  }

  /* Payment methods grid: compact */
  #order-summery .grid.grid-cols-2.gap-3 {
    gap: 0.5rem;
  }

  #order-summery .grid.grid-cols-2 > div {
    padding: 0.5rem !important;
  }

  #order-summery .grid.grid-cols-2 img {
    height: 18px !important;
  }

  /* Continue shopping button: full width */
  main.py-16 .text-center .btn.btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Panier: tres petits ecrans (< 400px) */
@media (max-width: 400px) {
  .cartprodctslistitem .product-image {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ==========================================================================
   K. CHECKOUT / COMMANDE PAGE — MOBILE (< 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* --- Checkout main: reduce padding --- */
  .py-4.bg-gray-50 {
    padding-top: 0.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Grid: single column, order summary first then form */
  .py-4.bg-gray-50 .grid.grid-cols-1.lg\:grid-cols-3 {
    gap: 1rem !important;
  }

  /* Form sections: compact padding */
  .py-4.bg-gray-50 .card .p-6 {
    padding: 1rem !important;
  }

  /* Section headers: smaller */
  .py-4.bg-gray-50 .card h2 {
    font-size: 1rem !important;
  }

  /* Section number badges */
  .py-4.bg-gray-50 .card .w-8.h-8 {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem;
  }

  /* Form inputs: good size for touch */
  .py-4.bg-gray-50 .form-input,
  .py-4.bg-gray-50 select {
    padding: 0.75rem !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    border-radius: 0.5rem;
  }

  /* Labels: compact */
  .py-4.bg-gray-50 label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }

  /* 2-col form fields → 1 col on mobile */
  .py-4.bg-gray-50 .grid.grid-cols-2.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Express Pay buttons: full width */
  .py-4.bg-gray-50 #paypal-button-container,
  .py-4.bg-gray-50 #google-pay-container,
  .py-4.bg-gray-50 #apple-pay-container {
    width: 100% !important;
  }

  /* Card fields section */
  .card-fields-container .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* --- Order summary sidebar: compact on mobile --- */
  .py-4.bg-gray-50 .sticky.top-24 {
    position: static !important;
  }

  /* Order items: compact */
  .py-4.bg-gray-50 .order-item {
    padding: 0.5rem 0;
  }

  .py-4.bg-gray-50 .order-item img {
    width: 48px !important;
    height: 48px !important;
  }

  .py-4.bg-gray-50 .order-item .font-medium {
    font-size: 0.85rem;
  }

  /* Total highlight: prominent */
  .py-4.bg-gray-50 .price-highlight {
    font-size: 1.3rem !important;
  }

  /* Submit button: big and obvious */
  .py-4.bg-gray-50 #checkout-submit-btn {
    padding: 1rem 1.5rem !important;
    font-size: 1.05rem !important;
    min-height: 56px;
  }

  /* Trust badges grid: 2x2 */
  .py-4.bg-gray-50 .grid.grid-cols-2.gap-3 {
    gap: 0.5rem !important;
  }

  .py-4.bg-gray-50 .grid.grid-cols-2.gap-3 > div {
    padding: 0.75rem !important;
  }

  .py-4.bg-gray-50 .grid.grid-cols-2.gap-3 .text-sm.font-semibold {
    font-size: 0.7rem;
  }

  .py-4.bg-gray-50 .grid.grid-cols-2.gap-3 .text-xs {
    font-size: 0.6rem;
  }

  /* Terms checkbox: bigger touch area */
  .py-4.bg-gray-50 #terms {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
  }

  /* Trust mini section at bottom */
  .py-4.bg-gray-50 .text-xs.text-gray-400.flex {
    font-size: 0.65rem;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  /* 3DS Modal: full screen on mobile */
  #threeds-modal {
    padding: 0.5rem !important;
  }

  #threeds-modal iframe {
    width: 100% !important;
    height: 90vh !important;
  }

  /* Error boxes: full width */
  .checkout-error-box,
  #checkout-error,
  #card-error {
    font-size: 0.85rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
  }
}

/* Checkout: tres petits ecrans (< 400px) */
@media (max-width: 400px) {
  .py-4.bg-gray-50 .card .p-6 {
    padding: 0.75rem !important;
  }

  .py-4.bg-gray-50 .order-item img {
    width: 40px !important;
    height: 40px !important;
  }

  /* Payment method selector: stack */
  .payment-method {
    flex-direction: column;
    padding: 0.75rem !important;
    text-align: center;
  }
}

/* ==========================================================================
   L. SPONSORSHIP BETA BANNER — MOBILE (< 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Beta banner: stack icon and text */
  .min-h-screen.bg-gray-50.pt-28 .border-amber-300 .flex.items-start.gap-4 {
    flex-direction: column;
    gap: 0.5rem;
  }

  .min-h-screen.bg-gray-50.pt-28 .border-amber-300 {
    padding: 1rem !important;
  }

  .min-h-screen.bg-gray-50.pt-28 .border-amber-300 p {
    font-size: 0.8rem;
  }

  .min-h-screen.bg-gray-50.pt-28 .border-amber-300 .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .min-h-screen.bg-gray-50.pt-28 .border-amber-300 .flex.items-center.gap-4 span:first-of-type {
    display: none; /* Hide the | separator */
  }
}