/* Mobile basket refinement from the supplied 2026-10-28 screenshot.
   Reopen the existing important layers: unlayered specificity alone cannot
   override their important declarations. Desktop, markup and commerce stay put. */
@layer rtf-basket-compact {
  @media (max-width: 900px) {
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-mini-cart-product {
      gap: 4px 10px !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-mini-cart-head .rtf-mini-cart-name {
      font-size: .875rem !important;
      font-weight: 600 !important;
      line-height: 1.4 !important;
      overflow-wrap: anywhere !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer ul.woocommerce-mini-cart > li.woocommerce-mini-cart-item {
      padding-bottom: 10px !important;
      margin-bottom: 10px !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer ul.woocommerce-mini-cart > li.woocommerce-mini-cart-item:last-child {
      margin-bottom: 0 !important;
    }
    /* Replace the heavy full-width outlined box with two clear touch targets
       and a two-line quantity summary. Long values can still wrap naturally. */
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-mini-cart-qty-stepper {
      display: grid !important;
      grid-template-columns: 44px minmax(0, 1fr) 44px !important;
      align-items: center !important;
      gap: 6px !important;
      min-height: 44px !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-mini-cart-qty-button {
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      align-self: center !important;
      border: 1px solid var(--line) !important;
      border-radius: 10px !important;
      background: var(--surface-sunken) !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-mini-cart-measure.rtf-cart-qty-measure.has-quantity-price[aria-live][aria-label] {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: baseline !important;
      justify-content: center !important;
      gap: 0 8px !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: 44px !important;
      padding: 4px 0 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      border: 0 !important;
      background: transparent !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-cart-qty-primary {
      order: 0 !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      max-width: 100% !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-cart-qty-count {
      font-size: .9375rem !important;
      line-height: 1.4 !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-cart-qty-price {
      order: 1 !important;
      max-width: 100% !important;
      font-size: .8125rem !important;
      font-weight: 600 !important;
      line-height: 1.4 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-cart-qty-calculation {
      order: 2 !important;
      flex: 0 1 100% !important;
      min-width: 0 !important;
      font-size: .75rem !important;
      font-weight: 400 !important;
      line-height: 1.4 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      color: var(--ink-muted) !important;
    }
    /* Keep the existing separately scrollable footer, safe-area padding and
       full-size actions. Only quieten the destructive secondary action. */
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-empty-button {
      font-weight: 500 !important;
      color: var(--ink-muted) !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-empty-button:hover {
      color: var(--ink) !important;
    }
    html body #cartDrawer.cart-drawer.rtf-cart-drawer .rtf-mini-cart-qty-button:focus-visible {
      outline: 2px solid var(--brand-strong) !important;
      outline-offset: -4px !important;
    }
  }
}
@layer rtf-variants {
  @media (max-width: 900px) {
    html body #cartDrawer.cart-drawer.rtf-cart-drawer dl.rtf-mini-cart-options .rtf-variant-value {
      font-weight: 500 !important;
      font-size: .8125rem !important;
      line-height: 1.5 !important;
    }
  }
}