/*
 * TLSHOP — Mobile CSS
 * S'applique sur tous les écrans < 480px
 * Enqueued via functions.php
 */

@media (max-width: 480px) {

/* =====================================================
   BASE GLOBALE
   ===================================================== */
body {
  font-size: 14px !important;
}

.mh-page-wrapper {
  padding: 20px 16px 40px !important;
}

.mh-page-title {
  font-size: 28px !important;
}

.mh-page-sub {
  font-size: 13px !important;
  margin-bottom: 24px !important;
}

/* =====================================================
   PAGE PRODUIT
   ===================================================== */
.mhp-layout {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  margin-bottom: 36px !important;
}

.mhp-gallery-main {
  aspect-ratio: 4/3 !important;
}

.mhp-title {
  font-size: 28px !important;
  margin-bottom: 12px !important;
}

.mhp-price {
  font-size: 32px !important;
  margin-bottom: 18px !important;
}

.mhp-badges {
  gap: 6px !important;
}

.mhp-thumb {
  width: 56px !important;
  height: 56px !important;
}

.mhp-gallery-thumbs {
  gap: 8px !important;
}

/* ATC mobile */
.mhp-add-to-cart .cart {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mhp-add-to-cart .quantity {
  margin-right: 0 !important;
}

.mhp-add-to-cart input.qty {
  width: 100% !important;
  height: 48px !important;
}

.mhp-add-to-cart button.single_add_to_cart_button {
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
}

/* Variations mobile */
.mhp-add-to-cart table.variations tr {
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-bottom: 16px !important;
}

.mhp-add-to-cart table.variations td.value {
  width: 100% !important;
}

.mhp-add-to-cart .variations select {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Shipping box mobile */
.mhp-shipping-box {
  padding: 14px 16px !important;
}

/* Onglets mobile */
.mhp-tabs-nav {
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 0 !important;
}

.mhp-tab {
  padding: 12px 16px !important;
  font-size: 12px !important;
}

/* Fiche technique mobile */
.mhp-spec-row {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 12px 0 !important;
}

/* Produits liés mobile */
.mhp-related-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.mhp-related-title {
  font-size: 20px !important;
}

.mhp-related-img {
  height: 120px !important;
}

/* =====================================================
   PAGE CATÉGORIE / ARCHIVE
   ===================================================== */
#tlshop-archive-wrapper {
  padding: 0 16px 40px !important;
}

.tlshop-arch-title {
  font-size: 26px !important;
}

.tlshop-arch-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  margin-bottom: 16px !important;
}

.tlshop-toolbar {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.tlshop-filters {
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  padding-bottom: 4px !important;
}

.tlshop-filter {
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.tlshop-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.tlshop-card-img {
  height: 140px !important;
}

.tlshop-card-info {
  padding: 12px 14px !important;
}

.tlshop-card-name {
  font-size: 14px !important;
}

.tlshop-card-price {
  font-size: 18px !important;
}

/* =====================================================
   PANIER
   ===================================================== */
.mh-cart-table-header {
  display: none !important;
}

.mh-cart-row {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.mh-cart-product {
  flex-direction: row !important;
  align-items: center !important;
}

.mh-cart-thumb {
  width: 60px !important;
  height: 60px !important;
}

.mh-cart-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mh-cart-cell::before {
  content: attr(data-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #54595f;
}

.mh-cart-line-total {
  font-size: 16px !important;
}

.mh-cart-actions {
  flex-direction: column !important;
  gap: 10px !important;
}

.mh-cart-actions a,
.mh-cart-actions button {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

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

.mh-cart-summary-total span:last-child {
  font-size: 22px !important;
}

/* Empty cart mobile */
.mh-cart-empty {
  padding: 48px 16px !important;
}

/* =====================================================
   CHECKOUT
   ===================================================== */
.mh-checkout-layout {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

.mh-checkout-steps {
  font-size: 10px !important;
  gap: 6px !important;
}

.mhco-logged-user {
  padding: 12px 16px !important;
}

.mhco-total-grand span:last-child {
  font-size: 20px !important;
}

#payment #place_order {
  font-size: 16px !important;
  padding: 14px 20px !important;
}

/* =====================================================
   ORDER RECEIVED / THANKYOU
   ===================================================== */
.mhty-title {
  font-size: 26px !important;
}

.mhty-code {
  font-size: 72px !important;
}

.mhty-layout {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.mhty-steps {
  gap: 2px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.mhty-step-line {
  width: 24px !important;
}

.mhty-step span {
  font-size: 9px !important;
}

.mhty-actions {
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.mhty-actions a {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

/* =====================================================
   VIEW ORDER
   ===================================================== */
.mhvo-layout {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.mhvo-header {
  flex-direction: column !important;
  gap: 16px !important;
}

.mhvo-items-header {
  display: none !important;
}

.mhvo-item-row {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.mhvo-item-qty,
.mhvo-item-total {
  font-size: 14px !important;
}

/* =====================================================
   MON COMPTE
   ===================================================== */
.mh-account-wrapper {
  grid-template-columns: 1fr !important;
}

.mh-sidebar {
  height: auto !important;
  position: static !important;
  border-radius: 0 !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 20px 0 !important;
}

.mh-user-block {
  padding: 0 16px 20px !important;
}

.mh-nav-item {
  padding: 10px 16px !important;
  font-size: 11px !important;
}

.mh-main {
  padding: 24px 16px !important;
}

.mh-stats {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.mh-section-title {
  font-size: 26px !important;
}

.mh-section-sub {
  font-size: 13px !important;
}

.mh-addr-grid {
  grid-template-columns: 1fr !important;
}

.mh-helmets-grid {
  grid-template-columns: 1fr !important;
}

.mh-form-grid {
  grid-template-columns: 1fr !important;
}

/* Table commandes mobile */
.mh-table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* =====================================================
   CONNEXION / INSCRIPTION
   ===================================================== */
.mhli-wrapper {
  margin: 0 !important;
  border-radius: 8px !important;
}

.mhli-panel {
  padding: 20px 16px !important;
}

.mhli-logo {
  font-size: 22px !important;
}

/* =====================================================
   PAGE 404
   ===================================================== */
.mh404-code {
  font-size: 72px !important;
}

.mh404-title {
  font-size: 26px !important;
}

.mh404-actions {
  flex-direction: column !important;
  align-items: center !important;
}

.mh404-actions a {
  width: 100% !important;
  justify-content: center !important;
}

/* =====================================================
   MODAL ADRESSE
   ===================================================== */
.mh-modal {
  padding: 20px 16px !important;
  margin: 0 8px !important;
  border-radius: 12px !important;
  max-height: 95vh !important;
}

.mh-modal-title {
  font-size: 18px !important;
}

.mh-form-grid {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* =====================================================
   BREADCRUMB GLOBAL
   ===================================================== */
.mh-breadcrumb {
  font-size: 11px !important;
  margin-bottom: 16px !important;
  gap: 5px !important;
}

/* =====================================================
   BOUTONS GLOBAUX
   ===================================================== */
.mh-btn {
  padding: 12px 20px !important;
  font-size: 14px !important;
}

.mh-btn-ghost {
  padding: 10px 16px !important;
  font-size: 12px !important;
}

} /* END @media (max-width: 480px) */