/**
 * Monitor Market v3 — Comprehensive UI/UX Enhancement
 * ===================================================
 * Farsi typography, color system, spacing, content pages,
 * product cards, checkout, mobile responsive.
 *
 * Loaded via Design_System_V3 on frontend only.
 * Scoped under .mmc-v3-ui to avoid conflicts.
 */

/* ============================================
   1. DESIGN TOKENS — Enhanced
   ============================================ */
:root {
  /* Typography Scale (Farsi-optimized) */
  --mmc-fs-xs:    0.75rem;    /* 12px — captions, badges */
  --mmc-fs-sm:    0.8125rem;  /* 13px — small text, meta */
  --mmc-fs-base:  0.9375rem;  /* 15px — body text (Farsi reads better at 15-16px) */
  --mmc-fs-md:    1.0625rem;  /* 17px — emphasized body */
  --mmc-fs-lg:    1.25rem;    /* 20px — h4, section titles */
  --mmc-fs-xl:    1.5rem;     /* 24px — h3 */
  --mmc-fs-2xl:   1.875rem;   /* 30px — h2 */
  --mmc-fs-3xl:   2.375rem;   /* 38px — h1 */
  --mmc-fs-4xl:   3rem;       /* 48px — hero */

  /* Line Heights (Farsi needs more breathing room) */
  --mmc-lh-tight:   1.3;
  --mmc-lh-normal:  1.7;
  --mmc-lh-relaxed: 1.9;

  /* Spacing Scale */
  --mmc-sp-1:  4px;
  --mmc-sp-2:  8px;
  --mmc-sp-3:  12px;
  --mmc-sp-4:  16px;
  --mmc-sp-5:  20px;
  --mmc-sp-6:  24px;
  --mmc-sp-8:  32px;
  --mmc-sp-10: 40px;
  --mmc-sp-12: 48px;
  --mmc-sp-16: 64px;
  --mmc-sp-20: 80px;

}

/* ============================================
   2. BASE TYPOGRAPHY — Farsi Optimized
   ============================================ */
.mmc-v3-ui {
  font-family: 'Vazirmatn', 'Tahoma', 'Arial', sans-serif !important;
  font-size: var(--mmc-fs-base) !important;
  line-height: var(--mmc-lh-normal) !important;
  color: var(--mmc-v3-ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on, 'ss02' on;
}

/* Headings — bolder, tighter for Farsi */
.mmc-v3-ui h1, .mmc-v3-ui .entry-title,
.mmc-v3-ui h2, .mmc-v3-ui .section-title,
.mmc-v3-ui h3, .mmc-v3-ui h4, .mmc-v3-ui h5, .mmc-v3-ui h6 {
  font-family: 'Vazirmatn', 'Tahoma', sans-serif !important;
  color: var(--mmc-v3-navy) !important;
  line-height: var(--mmc-lh-tight) !important;
  letter-spacing: -0.01em;
  font-weight: 900 !important;
}

.mmc-v3-ui h1, .mmc-v3-ui .entry-title {
  font-size: clamp(var(--mmc-fs-2xl), 4vw, var(--mmc-fs-3xl)) !important;
  margin-bottom: var(--mmc-sp-6) !important;
}

.mmc-v3-ui h2, .mmc-v3-ui .section-title {
  font-size: clamp(var(--mmc-fs-xl), 3vw, var(--mmc-fs-2xl)) !important;
  margin-bottom: var(--mmc-sp-5) !important;
}

.mmc-v3-ui h3 {
  font-size: clamp(var(--mmc-fs-lg), 2.5vw, var(--mmc-fs-xl)) !important;
  margin-bottom: var(--mmc-sp-4) !important;
}

.mmc-v3-ui h4 {
  font-size: var(--mmc-fs-lg) !important;
  margin-bottom: var(--mmc-sp-3) !important;
}

/* Body text */
.mmc-v3-ui p {
  font-size: var(--mmc-fs-base) !important;
  line-height: var(--mmc-lh-relaxed) !important;
  color: var(--mmc-v3-body) !important;
  margin-bottom: var(--mmc-sp-4) !important;
}

/* Small/meta text */
.mmc-v3-ui small, .mmc-v3-ui .woocommerce-review-meta,
.mmc-v3-ui .star-rating, .mmc-v3-ui .woocommerce-product-details__short-description {
  font-size: var(--mmc-fs-sm) !important;
  color: var(--mmc-v3-muted) !important;
}

/* Links */
.mmc-v3-ui a {
  color: var(--mmc-v3-red) !important;
  text-decoration: none !important;
  transition: color .15s ease, opacity .15s ease;
}
.mmc-v3-ui a:hover {
  opacity: .85;
}

/* ============================================
   3. WOOCOMMERCE PRODUCT CARDS — Enhanced
   ============================================ */
.mmc-v3-ui .woocommerce ul.products {
  gap: var(--mmc-sp-6) !important;
}

.mmc-v3-ui .woocommerce ul.products li.product {
  border: 1px solid var(--mmc-v3-border) !important;
  border-radius: var(--mmc-r-xl) !important;
  background: var(--mmc-v3-card) !important;
  box-shadow: var(--mmc-shadow-sm) !important;
  padding: var(--mmc-sp-4) !important;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.mmc-v3-ui .woocommerce ul.products li.product:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--mmc-shadow-lg) !important;
  border-color: var(--mmc-v3-red) !important;
}

/* Product image */
.mmc-v3-ui .woocommerce ul.products li.product a img {
  aspect-ratio: 1/1 !important;
  object-fit: contain !important;
  background: linear-gradient(135deg, #FAFBFC 0%, #F0F2F5 100%) !important;
  border-radius: var(--mmc-r-lg) !important;
  padding: var(--mmc-sp-3) !important;
  margin-bottom: var(--mmc-sp-3) !important;
  transition: transform .3s ease !important;
}

.mmc-v3-ui .woocommerce ul.products li.product:hover a img {
  transform: scale(1.03) !important;
}

/* Product title */
.mmc-v3-ui .woocommerce-loop-product__title,
.mmc-v3-ui ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--mmc-fs-base) !important;
  font-weight: 800 !important;
  color: var(--mmc-v3-navy) !important;
  line-height: 1.5 !important;
  min-height: 3em !important;
  max-height: 3em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-bottom: var(--mmc-sp-2) !important;
}

/* Product price */
.mmc-v3-ui .woocommerce ul.products li.product .price {
  font-size: var(--mmc-fs-md) !important;
  font-weight: 900 !important;
  color: var(--mmc-v3-red) !important;
  margin: var(--mmc-sp-2) 0 !important;
}

.mmc-v3-ui .woocommerce ul.products li.product .price del {
  color: var(--mmc-v3-light) !important;
  font-size: var(--mmc-fs-sm) !important;
  font-weight: 500 !important;
}

/* Add to cart button */
.mmc-v3-ui .woocommerce ul.products li.product .button,
.mmc-v3-ui .add_to_cart_button {
  border-radius: var(--mmc-r-pill) !important;
  background: linear-gradient(135deg, var(--mmc-v3-red), var(--mmc-v3-red-dark)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: var(--mmc-fs-sm) !important;
  padding: 10px var(--mmc-sp-5) !important;
  min-height: 42px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(220,38,38,.25) !important;
  transition: all .2s ease !important;
  width: 100% !important;
  margin-top: auto !important;
}

.mmc-v3-ui .woocommerce ul.products li.product .button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(220,38,38,.35) !important;
}

/* ============================================
   4. SINGLE PRODUCT PAGE — Enhanced
   ============================================ */
/* Product title */
.mmc-v3-ui .product_title {
  font-size: clamp(var(--mmc-fs-xl), 3vw, var(--mmc-fs-2xl)) !important;
  font-weight: 900 !important;
  color: var(--mmc-v3-navy) !important;
  line-height: 1.35 !important;
  margin-bottom: var(--mmc-sp-4) !important;
}

/* Price on single product */
.mmc-v3-ui .summary .price {
  font-size: var(--mmc-fs-2xl) !important;
  font-weight: 950 !important;
  color: var(--mmc-v3-red) !important;
}

/* Add to cart form */
.mmc-v3-ui .cart .qty {
  border-radius: var(--mmc-r-md) !important;
  border: 2px solid var(--mmc-v3-border) !important;
  min-height: 48px !important;
  font-size: var(--mmc-fs-md) !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 80px !important;
}

.mmc-v3-ui .single_add_to_cart_button {
  border-radius: var(--mmc-r-pill) !important;
  min-height: 52px !important;
  font-size: var(--mmc-fs-md) !important;
  font-weight: 900 !important;
  padding: 14px var(--mmc-sp-8) !important;
}

/* Product description */
.mmc-v3-ui .woocommerce-product-details__short-description {
  font-size: var(--mmc-fs-base) !important;
  line-height: var(--mmc-lh-relaxed) !important;
  color: var(--mmc-v3-body) !important;
  margin-bottom: var(--mmc-sp-6) !important;
}

/* Tabs */
.mmc-v3-ui .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  margin: 0 0 var(--mmc-sp-6) !important;
  border-bottom: 2px solid var(--mmc-v3-border) !important;
}

.mmc-v3-ui .woocommerce-tabs ul.tabs li {
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mmc-v3-ui .woocommerce-tabs ul.tabs li a {
  padding: var(--mmc-sp-3) var(--mmc-sp-5) !important;
  font-weight: 700 !important;
  font-size: var(--mmc-fs-base) !important;
  color: var(--mmc-v3-muted) !important;
  border-bottom: 3px solid transparent !important;
  transition: all .2s ease !important;
}

.mmc-v3-ui .woocommerce-tabs ul.tabs li.active a {
  color: var(--mmc-v3-red) !important;
  border-bottom-color: var(--mmc-v3-red) !important;
}

.mmc-v3-ui .woocommerce-Tabs-panel {
  padding: var(--mmc-sp-6) 0 !important;
  font-size: var(--mmc-fs-base) !important;
  line-height: var(--mmc-lh-relaxed) !important;
}

/* ============================================
   5. CART & CHECKOUT — Enhanced
   ============================================ */
/* Cart table */
.mmc-v3-ui .woocommerce-cart-form table.cart {
  border-collapse: separate !important;
  border-spacing: 0 var(--mmc-sp-2) !important;
}

.mmc-v3-ui .woocommerce-cart-form table.cart th {
  font-weight: 800 !important;
  font-size: var(--mmc-fs-sm) !important;
  color: var(--mmc-v3-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: var(--mmc-sp-3) var(--mmc-sp-4) !important;
  border: none !important;
}

.mmc-v3-ui .woocommerce-cart-form table.cart td {
  padding: var(--mmc-sp-4) !important;
  border: 1px solid var(--mmc-v3-border-lt) !important;
  vertical-align: middle !important;
}

.mmc-v3-ui .woocommerce-cart-form table.cart td:first-child {
  border-radius: var(--mmc-r-md) 0 0 var(--mmc-r-md) !important;
}
.mmc-v3-ui .woocommerce-cart-form table.cart td:last-child {
  border-radius: 0 var(--mmc-r-md) var(--mmc-r-md) 0 !important;
}

/* Product name in cart */
.mmc-v3-ui .woocommerce-cart-form .product-name a {
  font-weight: 800 !important;
  font-size: var(--mmc-fs-base) !important;
  color: var(--mmc-v3-navy) !important;
}

/* Checkout form fields */
.mmc-v3-ui .woocommerce form .form-row label {
  font-weight: 700 !important;
  font-size: var(--mmc-fs-sm) !important;
  color: var(--mmc-v3-ink) !important;
  margin-bottom: var(--mmc-sp-1) !important;
}

.mmc-v3-ui .woocommerce form .form-row input.input-text,
.mmc-v3-ui .woocommerce form .form-row textarea,
.mmc-v3-ui .woocommerce form .form-row select {
  border-radius: var(--mmc-r-md) !important;
  border: 2px solid var(--mmc-v3-border) !important;
  min-height: 48px !important;
  padding: var(--mmc-sp-3) var(--mmc-sp-4) !important;
  font-size: var(--mmc-fs-base) !important;
  font-weight: 600 !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.mmc-v3-ui .woocommerce form .form-row input.input-text:focus,
.mmc-v3-ui .woocommerce form .form-row textarea:focus,
.mmc-v3-ui .woocommerce form .form-row select:focus {
  border-color: var(--mmc-v3-red) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}

/* Place order button */
.mmc-v3-ui #place_order {
  border-radius: var(--mmc-r-pill) !important;
  min-height: 56px !important;
  font-size: var(--mmc-fs-lg) !important;
  font-weight: 950 !important;
  padding: 16px var(--mmc-sp-10) !important;
  width: 100% !important;
}

/* Order summary */
.mmc-v3-ui .woocommerce-checkout-review-order-table {
  border-radius: var(--mmc-r-lg) !important;
  overflow: hidden !important;
}

/* ============================================
   6. TRUST STRIP — Enhanced
   ============================================ */
.mmc-v3-trust-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: var(--mmc-sp-3) !important;
  padding: var(--mmc-sp-4) !important;
  margin: var(--mmc-sp-6) 0 !important;
  background: var(--mmc-v3-card) !important;
  border: 1px solid var(--mmc-v3-border) !important;
  border-radius: var(--mmc-r-xl) !important;
  box-shadow: var(--mmc-shadow-xs) !important;
}

.mmc-v3-trust-strip span {
  display: flex !important;
  align-items: center !important;
  gap: var(--mmc-sp-2) !important;
  padding: var(--mmc-sp-3) !important;
  border-radius: var(--mmc-r-md) !important;
  font-size: var(--mmc-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--mmc-v3-ink) !important;
  background: var(--mmc-v3-bg) !important;
  border: 1px solid var(--mmc-v3-border-lt) !important;
}

.mmc-v3-trust-strip b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--mmc-r-sm) !important;
  background: var(--mmc-v3-green-bg) !important;
  color: var(--mmc-v3-green) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

/* ============================================
   7. BUTTONS — Unified System
   ============================================ */
.mmc-v3-btn,
.mmc-v3-ui .button.mmc-v3-btn,
.mmc-v3-ui input[type="submit"],
.mmc-v3-ui .wc-block-components-button {
  border-radius: var(--mmc-r-pill) !important;
  font-family: 'Vazirmatn', sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--mmc-fs-base) !important;
  min-height: 46px !important;
  padding: var(--mmc-sp-3) var(--mmc-sp-6) !important;
  transition: all .2s ease !important;
  cursor: pointer !important;
}

.mmc-v3-btn-primary,
.mmc-v3-ui .single_add_to_cart_button,
.mmc-v3-ui #place_order {
  background: linear-gradient(135deg, var(--mmc-v3-red), var(--mmc-v3-red-dark)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220,38,38,.28) !important;
  border: none !important;
}

.mmc-v3-btn-primary:hover,
.mmc-v3-ui .single_add_to_cart_button:hover,
.mmc-v3-ui #place_order:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(220,38,38,.35) !important;
}

.mmc-v3-btn-ghost {
  background: var(--mmc-v3-card) !important;
  color: var(--mmc-v3-ink) !important;
  border: 2px solid var(--mmc-v3-border) !important;
  box-shadow: var(--mmc-shadow-xs) !important;
}

.mmc-v3-btn-ghost:hover {
  border-color: var(--mmc-v3-red) !important;
  color: var(--mmc-v3-red) !important;
}

/* ============================================
   8. BADGES & CHIPS — Enhanced
   ============================================ */
.mmc-v3-ui .mmc-chip,
.mmc-v3-ui .mmc-mini-badge,
.mmc-v3-ui .woocommerce span.onsale {
  border-radius: var(--mmc-r-pill) !important;
  font-family: 'Vazirmatn', sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--mmc-fs-xs) !important;
  padding: 4px 10px !important;
}

/* Sale badge */
.mmc-v3-ui .woocommerce span.onsale {
  background: var(--mmc-v3-red) !important;
  color: #fff !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  inset: var(--mmc-sp-3) var(--mmc-sp-3) auto auto !important;
}

/* ============================================
   9. FORMS — Better RTL Farsi
   ============================================ */
.mmc-v3-ui input,
.mmc-v3-ui textarea,
.mmc-v3-ui select {
  font-family: 'Vazirmatn', 'Tahoma', sans-serif !important;
  font-size: var(--mmc-fs-base) !important;
  direction: rtl !important;
  text-align: right !important;
}

.mmc-v3-ui input::placeholder,
.mmc-v3-ui textarea::placeholder {
  color: var(--mmc-v3-light) !important;
  font-weight: 500 !important;
}

/* ============================================
   10. WOOCOMMERCE MESSAGES — Better
   ============================================ */
.mmc-v3-ui .woocommerce-message,
.mmc-v3-ui .woocommerce-info,
.mmc-v3-ui .woocommerce-error {
  border-radius: var(--mmc-r-lg) !important;
  padding: var(--mmc-sp-4) var(--mmc-sp-5) !important;
  font-size: var(--mmc-fs-base) !important;
  font-weight: 600 !important;
  border: 1px solid !important;
  box-shadow: var(--mmc-shadow-sm) !important;
}

.mmc-v3-ui .woocommerce-message {
  background: var(--mmc-v3-green-bg) !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}

.mmc-v3-ui .woocommerce-info {
  background: var(--mmc-v3-blue-bg) !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}

.mmc-v3-ui .woocommerce-error {
  background: var(--mmc-v3-red-light) !important;
  border-color: #FECACA !important;
  color: #991B1B !important;
}

/* ============================================
   11. BREADCRUMBS — Cleaner
   ============================================ */
.mmc-v3-ui .woocommerce-breadcrumb,
.mmc-v3-ui .woocommerce .woocommerce-breadcrumb {
  font-size: var(--mmc-fs-sm) !important;
  color: var(--mmc-v3-muted) !important;
  margin-bottom: var(--mmc-sp-5) !important;
}

.mmc-v3-ui .woocommerce-breadcrumb a {
  color: var(--mmc-v3-muted) !important;
}
.mmc-v3-ui .woocommerce-breadcrumb a:hover {
  color: var(--mmc-v3-red) !important;
}

/* ============================================
   12. STAR RATING — Better
   ============================================ */
.mmc-v3-ui .star-rating {
  color: #F59E0B !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

/* ============================================
   13. PAGINATION — Modern
   ============================================ */
.mmc-v3-ui .woocommerce-pagination {
  display: flex !important;
  justify-content: center !important;
  gap: var(--mmc-sp-2) !important;
  margin: var(--mmc-sp-8) 0 !important;
}

.mmc-v3-ui .woocommerce-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: var(--mmc-r-md) !important;
  font-weight: 700 !important;
  font-size: var(--mmc-fs-sm) !important;
  color: var(--mmc-v3-body) !important;
  background: var(--mmc-v3-card) !important;
  border: 1px solid var(--mmc-v3-border) !important;
  transition: all .15s ease !important;
}

.mmc-v3-ui .woocommerce-pagination .page-numbers.current,
.mmc-v3-ui .woocommerce-pagination .page-numbers:hover {
  background: var(--mmc-v3-red) !important;
  color: #fff !important;
  border-color: var(--mmc-v3-red) !important;
}

/* ============================================
   14. FOOTER — Better
   ============================================ */
.mmc-v3-ui footer,
.mmc-v3-ui .site-footer {
  font-size: var(--mmc-fs-sm) !important;
  color: var(--mmc-v3-muted) !important;
}

/* ============================================
   15. CONTENT PAGES — Better readability
   ============================================ */
.mmc-v3-ui .entry-content,
.mmc-v3-ui .page-content,
.mmc-v3-ui .elementor-widget-theme-post-content {
  font-size: var(--mmc-fs-base) !important;
  line-height: var(--mmc-lh-relaxed) !important;
}

.mmc-v3-ui .entry-content ul,
.mmc-v3-ui .entry-content ol {
  padding-right: var(--mmc-sp-6) !important;
  padding-left: 0 !important;
  margin-bottom: var(--mmc-sp-5) !important;
}

.mmc-v3-ui .entry-content li {
  margin-bottom: var(--mmc-sp-2) !important;
  line-height: var(--mmc-lh-normal) !important;
}

.mmc-v3-ui .entry-content blockquote {
  border-right: 4px solid var(--mmc-v3-red) !important;
  border-left: none !important;
  padding: var(--mmc-sp-4) var(--mmc-sp-6) !important;
  margin: var(--mmc-sp-6) 0 !important;
  background: var(--mmc-v3-red-light) !important;
  border-radius: 0 var(--mmc-r-md) var(--mmc-r-md) 0 !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* ============================================
   16. MOBILE RESPONSIVE — Enhanced
   ============================================ */
@media (max-width: 1024px) {
  .mmc-v3-ui {
    font-size: 15px !important;
  }
  .mmc-v3-trust-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .mmc-v3-ui .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--mmc-sp-4) !important;
  }
}

@media (max-width: 768px) {
  .mmc-v3-trust-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mmc-sp-2) !important;
    padding: var(--mmc-sp-3) !important;
  }

  .mmc-v3-trust-strip span {
    font-size: var(--mmc-fs-xs) !important;
    padding: var(--mmc-sp-2) !important;
  }

  .mmc-v3-ui .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mmc-sp-3) !important;
  }

  .mmc-v3-ui .woocommerce ul.products li.product {
    padding: var(--mmc-sp-3) !important;
    border-radius: var(--mmc-r-lg) !important;
  }

  .mmc-v3-ui .product_title {
    font-size: var(--mmc-fs-xl) !important;
  }

  .mmc-v3-ui .summary .price {
    font-size: var(--mmc-fs-xl) !important;
  }

  .mmc-v3-ui .single_add_to_cart_button,
  .mmc-v3-ui #place_order {
    width: 100% !important;
    font-size: var(--mmc-fs-md) !important;
  }

  /* Cart mobile */
  .mmc-v3-ui .woocommerce-cart-form table.cart {
    display: block !important;
  }
  .mmc-v3-ui .woocommerce-cart-form table.cart thead {
    display: none !important;
  }
  .mmc-v3-ui .woocommerce-cart-form table.cart tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--mmc-sp-2) !important;
    padding: var(--mmc-sp-4) !important;
    border: 1px solid var(--mmc-v3-border) !important;
    border-radius: var(--mmc-r-lg) !important;
    margin-bottom: var(--mmc-sp-3) !important;
  }
  .mmc-v3-ui .woocommerce-cart-form table.cart td {
    border: none !important;
    padding: var(--mmc-sp-1) !important;
    border-radius: 0 !important;
  }

  /* Checkout mobile */
  .mmc-v3-ui .col2-set,
  .mmc-v3-ui .woocommerce-checkout .col-1,
  .mmc-v3-ui .woocommerce-checkout .col-2 {
    width: 100% !important;
    float: none !important;
  }
}

@media (max-width: 480px) {
  .mmc-v3-ui .woocommerce ul.products {
    grid-template-columns: 1fr !important;
    gap: var(--mmc-sp-3) !important;
  }

  .mmc-v3-trust-strip {
    grid-template-columns: 1fr !important;
  }

  .mmc-v3-ui h1 {
    font-size: var(--mmc-fs-2xl) !important;
  }

  .mmc-v3-ui h2 {
    font-size: var(--mmc-fs-xl) !important;
  }

  /* Compact product card on small mobile */
  .mmc-v3-ui .woocommerce ul.products li.product {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: var(--mmc-sp-3) !important;
    padding: var(--mmc-sp-3) !important;
  }

  .mmc-v3-ui .woocommerce ul.products li.product a img {
    margin-bottom: 0 !important;
    height: 120px !important;
  }
}

/* ============================================
   17. ACCESSIBILITY — Focus, Reduced Motion
   ============================================ */
.mmc-v3-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--mmc-v3-red) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mmc-v3-ui *,
  .mmc-v3-ui *::before,
  .mmc-v3-ui *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   18. DARK MODE PREP (future)
   ============================================ */
.mmc-v3-ui.mm-dark {
  --mmc-v3-bg: #0F1117;
  --mmc-v3-card: #1A1F2E;
  --mmc-v3-ink: #E5E7EB;
  --mmc-v3-body: #D1D5DB;
  --mmc-v3-muted: #9CA3AF;
  --mmc-v3-border: #2D3344;
  --mmc-v3-border-lt: #232838;
}

/* ============================================
   19. LOADING STATES
   ============================================ */
.mmc-v3-ui .is-loading,
.mmc-v3-ui .loading {
  opacity: 0.6 !important;
  pointer-events: none !important;
  position: relative !important;
}

.mmc-v3-ui .is-loading::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,.5) !important;
  border-radius: inherit !important;
}

/* ============================================
   20. UTILITY CLASSES
   ============================================ */
.mmc-v3-ui .mmc-text-center { text-align: center !important; }
.mmc-v3-ui .mmc-text-right { text-align: right !important; }
.mmc-v3-ui .mmc-mt-0 { margin-top: 0 !important; }
.mmc-v3-ui .mmc-mb-0 { margin-bottom: 0 !important; }
.mmc-v3-ui .mmc-mb-4 { margin-bottom: var(--mmc-sp-4) !important; }
.mmc-v3-ui .mmc-mb-6 { margin-bottom: var(--mmc-sp-6) !important; }
.mmc-v3-ui .mmc-mb-8 { margin-bottom: var(--mmc-sp-8) !important; }
.mmc-v3-ui .mmc-gap-4 { gap: var(--mmc-sp-4) !important; }
.mmc-v3-ui .mmc-gap-6 { gap: var(--mmc-sp-6) !important; }