/**
 * Mobile cart + checkout identity — max-width 900px.
 * White / navy / red. Green only on success (see mobile-checkout-confirm.css).
 * Does not copy the desktop two-column layout.
 */
@media (max-width: 900px) {
  html body #cartOverlay {
    background: rgba(16, 37, 81, 0.42) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  html body #cartDrawer.cart-drawer {
    background: #eef1f5 !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: 0 0 40px rgba(16, 37, 81, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #102551 !important;
  }
  html body #cartDrawer.cart-drawer.cart-drawer--confirm {
    animation: none !important;
  }

  html body #cartDrawer .cart-header {
    background: #eef1f5 !important;
    border-bottom: 1px solid #e4eaf1 !important;
    padding: 14px 16px !important;
  }
  html body #cartDrawer .cart-header::before,
  html body #cartDrawer .cart-header::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
    height: 0 !important;
  }
  html body #cartDrawer .cart-header-title > svg {
    stroke: #102551 !important;
    filter: none !important;
  }
  html body #cartDrawer .cart-title-text {
    color: #102551 !important;
    font: 800 17px/1.2 Cairo, Inter, Arial, sans-serif !important;
  }
  html body #cartDrawer .cart-count-text {
    color: #5b6b82 !important;
  }
  html body #cartDrawer .cart-close-btn {
    background: #fff !important;
    border: 1px solid #e4eaf1 !important;
  }
  html body #cartDrawer .cart-close-btn svg {
    stroke: #5b6b82 !important;
  }

  html body #cartDrawer .cart-body {
    background: transparent !important;
    padding: 12px 12px 16px !important;
  }

  html body #cartDrawer .cart-empty {
    color: #5b6b82 !important;
  }
  html body #cartDrawer .cart-empty svg {
    stroke: #102551 !important;
    opacity: 0.35;
  }
  html body #cartDrawer .cart-empty p {
    color: #5b6b82 !important;
  }
  html body #cartDrawer .cart-empty-cta {
    background: #102551 !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  html body #cartDrawer .cart-item {
    background: #fff !important;
    border: 1px solid #e4eaf1 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body #cartDrawer .cart-item:hover {
    border-color: #c5d0de !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body #cartDrawer .cart-item-img {
    background: #fff !important;
    border: 1px solid #edf0f4 !important;
  }
  html body #cartDrawer .cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  html body #cartDrawer .cart-item-name {
    color: #102551 !important;
  }
  html body #cartDrawer .cart-item-name-en {
    color: #6b7a90 !important;
  }
  html body #cartDrawer .cart-item-brand {
    background: #f7f9fb !important;
    border: 1px solid #e4eaf1 !important;
    color: #102551 !important;
  }
  html body #cartDrawer .cart-item-price {
    color: #102551 !important;
    font-size: 16px !important;
  }
  html body #cartDrawer .cart-item-price span {
    color: #d71920 !important;
  }

  html body #cartDrawer .cart-qty-row {
    background: #f7f9fb !important;
    border: 1px solid #e4eaf1 !important;
    border-radius: 8px !important;
  }
  html body #cartDrawer .cart-qty-btn {
    background: #fff !important;
    border: 1px solid #c5d0de !important;
    color: #102551 !important;
    border-radius: 6px !important;
  }
  html body #cartDrawer .cart-qty-val {
    color: #102551 !important;
  }
  html body #cartDrawer .cart-item-remove {
    background: #fff !important;
    border: 1px solid #e4eaf1 !important;
    color: #5b6b82 !important;
  }

  html body #cartDrawer .cart-footer {
    background: #eef1f5 !important;
    border-top: 1px solid #e4eaf1 !important;
  }
  html body #cartDrawer .cart-summary-row {
    color: #5b6b82 !important;
  }
  html body #cartDrawer .cart-summary-row span:last-child {
    color: #102551 !important;
  }
  html body #cartDrawer .cart-summary-row.total {
    color: #102551 !important;
    border-top: 1px solid #e4eaf1 !important;
  }
  html body #cartDrawer .cart-summary-row.total .total-val {
    color: #d71920 !important;
  }

  html body #cartDrawer .btn-checkout,
  html body #cartDrawer .cart-footer:has(.btn-continue-shopping:hover) .btn-checkout,
  html body #cartDrawer .cart-footer:has(.btn-checkout:hover) .btn-checkout {
    background: #102551 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }
  html body #cartDrawer .btn-checkout svg,
  html body #cartDrawer .cart-footer:has(.btn-checkout:hover) .btn-checkout svg {
    stroke: #fff !important;
  }
  html body #cartDrawer .btn-continue-shopping,
  html body #cartDrawer .cart-footer:has(.btn-checkout:hover) .btn-continue-shopping {
    background: #fff !important;
    border: 1px solid #c5d0de !important;
    color: #102551 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body #cartDrawer .btn-clear-cart {
    background: #fff !important;
    border: 1px solid #e4eaf1 !important;
    color: #5b6b82 !important;
    border-radius: 8px !important;
  }

  html body .product-preview-cart-toast,
  html body .qv-cart-toast {
    background: #102551 !important;
    border: 1px solid #102551 !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(16, 37, 81, 0.28) !important;
  }

  html body .checkout-overlay {
    background: rgba(16, 37, 81, 0.42) !important;
  }

  html body #checkoutModal.checkout-modal:not(.is-confirm) {
    background: #eef1f5 !important;
    background-image: none !important;
    border: 0 !important;
    color: #102551 !important;
    box-shadow: 0 -12px 40px rgba(16, 37, 81, 0.16) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-header {
    background: #eef1f5 !important;
    border-bottom: 1px solid #e4eaf1 !important;
    padding: 12px 16px !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-header::after {
    display: none !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-header h2 {
    color: #102551 !important;
    font: 800 17px/1.2 Cairo, Inter, Arial, sans-serif !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-close {
    background: #fff !important;
    border: 1px solid #e4eaf1 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-close svg {
    stroke: #5b6b82 !important;
  }

  html body #checkoutModal:not(.is-confirm) .checkout-progress {
    background: #fff;
    border-bottom: 1px solid #e4eaf1;
    color: #6b7a90;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-progress span {
    color: #6b7a90 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-progress span.is-active,
  html body #checkoutModal:not(.is-confirm) .checkout-progress span.is-complete {
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-progress span.is-complete::before,
  html body #checkoutModal:not(.is-confirm) .checkout-progress span.is-active::before {
    background: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-progress span.is-complete::after {
    background: #102551 !important;
  }

  html body #checkoutModal:not(.is-confirm) .checkout-body {
    background: transparent !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-section,
  html body #checkoutModal:not(.is-confirm) .checkout-step3-card,
  html body #checkoutModal:not(.is-confirm) .checkout-review-card,
  html body #checkoutModal:not(.is-confirm) .checkout-garage-confirm,
  html body #checkoutModal:not(.is-confirm) .checkout-selected-address,
  html body #checkoutModal:not(.is-confirm) .checkout-shipping-summary,
  html body #checkoutModal:not(.is-confirm) .checkout-summary,
  html body #checkoutModal:not(.is-confirm) .checkout-payment-block,
  html body #checkoutModal:not(.is-confirm) .checkout-payment-confirm {
    background: #fff !important;
    border: 1px solid #e4eaf1 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-section-head h3,
  html body #checkoutModal:not(.is-confirm) .checkout-review-card h3 {
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-section-head p,
  html body #checkoutModal:not(.is-confirm) .checkout-selected-address p,
  html body #checkoutModal:not(.is-confirm) .checkout-shipping-summary p,
  html body #checkoutModal:not(.is-confirm) .checkout-review-card p,
  html body #checkoutModal:not(.is-confirm) .checkout-review-card small {
    color: #5b6b82 !important;
  }

  html body #checkoutModal:not(.is-confirm) .checkout-field label,
  html body #checkoutModal:not(.is-confirm) .checkout-field-label {
    color: #5b6b82 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-field input,
  html body #checkoutModal:not(.is-confirm) .checkout-field textarea,
  html body #checkoutModal:not(.is-confirm) .checkout-field select,
  html body #checkoutModal:not(.is-confirm) .checkout-prepaid-input {
    background: #fff !important;
    border: 1px solid #c5d0de !important;
    color: #102551 !important;
    border-radius: 8px !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-field input:focus,
  html body #checkoutModal:not(.is-confirm) .checkout-field textarea:focus,
  html body #checkoutModal:not(.is-confirm) .checkout-field select:focus,
  html body #checkoutModal:not(.is-confirm) .checkout-prepaid-input:focus {
    border-color: #102551 !important;
    box-shadow: 0 0 0 3px rgba(16, 37, 81, 0.12) !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-link-btn {
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-save-address {
    color: #5b6b82 !important;
  }

  html body #checkoutModal:not(.is-confirm) .checkout-pay-option {
    background: #f7f9fb !important;
    border: 1px solid #e4eaf1 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-pay-option.is-selected,
  html body #checkoutModal:not(.is-confirm) .checkout-pay-option:has(input:checked) {
    background: #fff !important;
    border-color: #102551 !important;
    box-shadow: 0 0 0 1px #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-pay-option input {
    accent-color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-pay-option-icon {
    background: #eef1f5 !important;
    border-color: #e4eaf1 !important;
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-pay-option-text {
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-pay-option-hint,
  html body #checkoutModal:not(.is-confirm) .checkout-pay-instructions,
  html body #checkoutModal:not(.is-confirm) .checkout-pay-confirm-line {
    color: #5b6b82 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-pay-confirm-line code,
  html body #checkoutModal:not(.is-confirm) .checkout-pay-tel {
    color: #d71920 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-proof-zone {
    border-color: #c5d0de !important;
    background: #f7f9fb !important;
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-proof-btn,
  html body #checkoutModal:not(.is-confirm) .checkout-copy-btn,
  html body #checkoutModal:not(.is-confirm) .checkout-promo-btn {
    background: #fff !important;
    border: 1px solid #c5d0de !important;
    color: #102551 !important;
  }

  html body #checkoutModal:not(.is-confirm) .checkout-item,
  html body #checkoutModal:not(.is-confirm) .checkout-summary {
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-summary strong,
  html body #checkoutModal:not(.is-confirm) .checkout-total-row strong,
  html body #checkoutModal:not(.is-confirm) .checkout-total-row:has(strong) span:last-child {
    color: #d71920 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-item-name,
  html body #checkoutModal:not(.is-confirm) .checkout-item-price,
  html body #checkoutModal:not(.is-confirm) .checkout-total-row {
    color: #102551 !important;
  }

  html body #checkoutModal:not(.is-confirm) .checkout-footer {
    background: #eef1f5 !important;
    border-top: 1px solid #e4eaf1 !important;
  }
  html body #checkoutModal:not(.is-confirm) .btn-checkout {
    background: #102551 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body #checkoutModal:not(.is-confirm) .btn-checkout svg {
    stroke: #fff !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-item {
    background: transparent !important;
    border-bottom: 1px solid #edf0f4 !important;
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .checkout-item-name,
  html body #checkoutModal:not(.is-confirm) .checkout-item-price {
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .order-qty-row--checkout {
    background: #f7f9fb !important;
    border: 1px solid #e4eaf1 !important;
  }
  html body #checkoutModal:not(.is-confirm) .order-qty-row--checkout .order-qty-btn {
    background: #fff !important;
    border: 1px solid #c5d0de !important;
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .order-qty-row--checkout .order-qty-val {
    color: #102551 !important;
  }
  html body #checkoutModal:not(.is-confirm) .btn-checkout:hover:not(:disabled) {
    background: #102551 !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body #checkoutModal:not(.is-confirm) .btn-continue-shopping {
    background: #fff !important;
    border: 1px solid #c5d0de !important;
    color: #102551 !important;
    border-radius: 8px !important;
  }
  html body #checkoutModal:not(.is-confirm) .btn-continue-shopping:hover {
    background: #fff !important;
    border-color: #102551 !important;
    color: #102551 !important;
  }

  html body .checkout-toast {
    background: #102551 !important;
    border: 1px solid #102551 !important;
    color: #fff !important;
  }
}