/**
 * Rabindra Medical Hall — Mobile Responsive UI & Design System
 * 
 * Production-ready mobile design system and layout cleanup:
 * 1. Global Reset & Link Styling (eliminates default browser blue/underlines)
 * 2. Prescription Upload Component (single clean UI, visually hides native file inputs)
 * 3. Manufacturer Cards (responsive 2-column mobile grid, equal height, centered logos)
 * 4. Pharmacy Benefits (consistent premium promo cards, no distorted layouts)
 * 5. Product Cards (1:1 aspect ratio, clean typography, prominent price & Rx badge)
 * 6. Mobile Bottom Navigation (fixed, safe-area aware, 44px+ tap targets)
 * 7. Cart & Slide-out Mini-Cart Positioning (sits above bottom nav without collision)
 * 8. Typography, Spacing & Responsive Breakpoints
 */

/* ==========================================================================
   1. GLOBAL RESET & DESIGN SYSTEM LINK STYLING
   ========================================================================== */

/* Prevent default browser blue/underlined links across all RMH cards */
.rmh-product-card a,
.rmh-product-card h3 a,
.rmh-brand-card,
.rmh-brand-card a,
.rmh-brand-card__name,
.rmh-brand-card__count,
.rmh-brand-card__link,
.rmh-promo-card a,
.rmh-qs-card a,
.rmh-step-link,
.rmh-view-all,
.rmh-btn,
.rmh-mobile-nav a {
    text-decoration: none !important;
}

.rmh-product-card h3 a {
    color: #1a202c !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.rmh-product-card h3 a:hover,
.rmh-product-card h3 a:focus-visible {
    color: #007a48 !important;
}

.rmh-view-all {
    color: #007a48 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.rmh-view-all:hover,
.rmh-view-all:focus-visible {
    text-decoration: underline !important;
}

.rmh-qs-btn {
    color: #007a48 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.rmh-qs-btn:hover,
.rmh-qs-btn:focus-visible {
    text-decoration: underline !important;
}

/* RMH Primary and Secondary Button System */
.rmh-btn-primary,
button.rmh-form-button,
a.rmh-btn-primary {
    background-color: #007a48 !important;
    color: #ffffff !important;
    border: 1px solid #007a48 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.rmh-btn-primary:hover,
.rmh-btn-primary:focus-visible,
button.rmh-form-button:hover,
button.rmh-form-button:focus-visible {
    background-color: #006339 !important;
    border-color: #006339 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 122, 72, 0.25) !important;
}

.rmh-btn-secondary,
a.rmh-btn-secondary {
    background-color: #f0f7f3 !important;
    color: #007a48 !important;
    border: 1px solid #c2e2d3 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.rmh-btn-secondary:hover,
.rmh-btn-secondary:focus-visible {
    background-color: #e2f1ea !important;
    border-color: #007a48 !important;
    color: #005a33 !important;
}

.rmh-btn-whatsapp,
a.rmh-btn-whatsapp {
    background-color: #25d366 !important;
    color: #ffffff !important;
    border: 1px solid #20bd5a !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    text-decoration: none !important;
}

.rmh-btn-whatsapp:hover,
.rmh-btn-whatsapp:focus-visible {
    background-color: #20bd5a !important;
    color: #ffffff !important;
}

/* ==========================================================================
   2. PRESCRIPTION UPLOAD COMPONENT (SINGLE CLEAN UI)
   ========================================================================== */

/* Visually hide native file inputs without breaking file picker activation */
.rmh-visually-hidden-file,
.rmh-prescription-file-input,
.rmh-camera-input,
input#prescriptionFile,
input#rmhPrescriptionCamera,
input#modalRxFile,
input#modalRxCamera {
    position: absolute !important;
    width: 0.1px !important;
    height: 0.1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    z-index: -10 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    min-height: 0 !important;
    max-height: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

.rmh-form-field--upload {
    display: flex !important;
    flex-direction: column !important;
    background: #f7faf8 !important;
    border: 1.5px dashed #b2d8c5 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.rmh-upload-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin-bottom: 2px !important;
}

.rmh-upload-subtitle {
    font-size: 13px !important;
    color: #4a5568 !important;
    margin-bottom: 14px !important;
}

.rmh-prescription-file-actions {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.rmh-file-action {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #1a202c !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.rmh-file-action:hover,
.rmh-file-action:focus-visible {
    border-color: #007a48 !important;
    color: #007a48 !important;
    background: #f0fdf4 !important;
}

.rmh-file-action svg {
    flex-shrink: 0 !important;
    stroke: currentColor !important;
}

.rmh-file-status {
    font-size: 12px !important;
    color: #007a48 !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
}

/* ==========================================================================
   3. MANUFACTURER CARDS (RESPONSIVE GRID)
   ========================================================================== */

.rmh-brands-section {
    padding: 24px 0 !important;
}

.rmh-brands-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

@media (min-width: 600px) {
    .rmh-brands-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}

@media (min-width: 900px) {
    .rmh-brands-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

@media (min-width: 1200px) {
    .rmh-brands-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 18px !important;
    }
}

.rmh-brand-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 10px 12px !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.rmh-brand-card:hover,
.rmh-brand-card:focus-visible {
    border-color: #007a48 !important;
    box-shadow: 0 4px 14px rgba(0, 122, 72, 0.08) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.rmh-brand-card__logo-wrap {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
}

.rmh-brand-card__logo {
    width: 100% !important;
    height: 100% !important;
    max-width: 120px !important;
    max-height: 46px !important;
    aspect-ratio: 140 / 48 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
}

.rmh-brand-card__emblem {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #e6f4ea !important;
    color: #007a48 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.rmh-brand-card__name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 34px !important;
}

.rmh-brand-card__count {
    font-size: 11.5px !important;
    color: #718096 !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
}

.rmh-brand-card__link {
    margin-top: auto !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #007a48 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* ==========================================================================
   4. PHARMACY BENEFITS (CONSISTENT PROMO CARDS)
   ========================================================================== */

.rmh-promotion-section {
    padding: 24px 0 !important;
}

.rmh-promo-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

@media (min-width: 768px) {
    .rmh-promo-cards {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

.rmh-promo-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.rmh-promo-card__image-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
}

.rmh-promo-card__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

.rmh-promo-card__content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 16px !important;
}

.rmh-promo-badge {
    align-self: flex-start !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: #e6f4ea !important;
    color: #007a48 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
}

.rmh-promo-card h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
}

.rmh-promo-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #4a5568 !important;
    margin: 0 0 14px 0 !important;
    flex-grow: 1 !important;
}

.rmh-promo-card .rmh-btn {
    margin-top: auto !important;
    width: 100% !important;
    text-align: center !important;
}

/* ==========================================================================
   5. PRODUCT CARDS & GRID
   ========================================================================== */

.rmh-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

@media (min-width: 768px) {
    .rmh-product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
}

@media (min-width: 1024px) {
    .rmh-product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

.rmh-product-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    position: relative !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.rmh-product-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.rmh-product-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    margin-bottom: 10px !important;
}

.rmh-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 6px !important;
    box-sizing: border-box !important;
}

.rmh-rx-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
}

.rmh-otc-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
}

.rmh-product-info {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.rmh-product-card__meta--brand {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

.rmh-product-card__meta--comp {
    font-size: 11px !important;
    color: #718096 !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.rmh-price-block {
    margin-top: auto !important;
    padding-top: 8px !important;
    margin-bottom: 10px !important;
}

.rmh-price-block .price,
.rmh-product-card .price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #007a48 !important;
}

.rmh-product-card__actions {
    margin-top: auto !important;
}

.rmh-product-card__actions .rmh-btn {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
}

/* ==========================================================================
   6. MOBILE BOTTOM NAVIGATION (FIXED & SAFE-AREA AWARE)
   ========================================================================== */

@media (max-width: 768px) {
    body {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .rmh-mobile-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.06) !important;
        z-index: 9999 !important;
        box-sizing: border-box !important;
    }

    .rmh-mobile-nav > a {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        min-width: 44px !important;
        padding: 6px 2px !important;
        color: #64748b !important;
        text-decoration: none !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        position: relative !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .rmh-mobile-nav > a:hover,
    .rmh-mobile-nav > a:focus-visible,
    .rmh-mobile-nav > a[aria-current="page"] {
        color: #007a48 !important;
        text-decoration: none !important;
    }

    .rmh-mobile-nav > a svg {
        width: 22px !important;
        height: 22px !important;
        stroke: currentColor !important;
        stroke-width: 2px !important;
        margin-bottom: 2px !important;
        transition: transform 0.15s ease !important;
    }

    .rmh-mobile-nav > a[aria-current="page"] svg {
        stroke: #007a48 !important;
    }

    .rmh-mobile-nav__cart-badge {
        position: absolute !important;
        top: 4px !important;
        right: calc(50% - 18px) !important;
        background: #dc2626 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        min-width: 17px !important;
        height: 17px !important;
        line-height: 17px !important;
        border-radius: 9px !important;
        text-align: center !important;
        padding: 0 4px !important;
    }

    .rmh-mobile-nav__cart-badge[data-count="0"],
    .rmh-mobile-nav__cart-badge:empty {
        display: none !important;
    }
}

/* ==========================================================================
   7. FLOATING CART & MINI-CART DRAWER POSITIONING
   ========================================================================== */

@media (max-width: 768px) {
    /* Position ModernCart floating bubble above bottom navigation */
    .moderncart-toggle-slide-out,
    #moderncart-floating-cart {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
        left: auto !important;
        z-index: 9995 !important;
        width: 54px !important;
        height: 54px !important;
    }

    .moderncart-floating-cart-button {
        width: 54px !important;
        height: 54px !important;
    }

    /* ModernCart drawer sits above bottom navigation and covers screen properly */
    .moderncart-plugin.moderncart-modal {
        z-index: 100000 !important;
    }

    .moderncart-default-slide-out {
        max-width: 90vw !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}

/* ==========================================================================
   8. PHASE 1 — COMPACT MOBILE HEADER & STORE BRANDING
   - Row 1: Green logo mark + "Rabindra Medical Hall" on left, hamburger on right.
   - Row 2: Search bar full width directly below branding row.
   - Removes empty header space while maintaining 44x44 touch targets.
   ========================================================================== */

@media (max-width: 768px) {
    .rmh-site-header__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding: 8px 12px 10px 12px !important;
        gap: 8px 10px !important;
        min-height: 0 !important;
    }

    /* Brand link container */
    .rmh-site-header__brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        min-width: 0 !important;
        text-decoration: none !important;
    }

    /* Existing green medical logo */
    .rmh-site-header__mark {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 8px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Store name text container */
    .rmh-site-header__brand-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }

    /* Store name: Rabindra Medical Hall */
    .rmh-site-header__name {
        display: block !important;
        font-size: clamp(14px, 4.3vw, 17px) !important;
        font-weight: 800 !important;
        color: #007a48 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: -0.01em !important;
        margin: 0 !important;
    }

    /* Keep tagline hidden on mobile to avoid overcrowding */
    .rmh-site-header__tagline {
        display: none !important;
    }

    /* Hamburger menu toggle on right */
    .rmh-menu-toggle {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        z-index: 56 !important;
    }

    /* Search bar row below branding */
    .rmh-site-header__inner .rmh-site-search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Hide desktop actions from mobile header row */
    .rmh-header-loc-badge,
    .rmh-site-header__actions {
        display: none !important;
    }
}

/* ==========================================================================
   9. PHASE 2 — WHATSAPP TOUCH TARGET (34px → 44px minimum)
   .rmh-header-whatsapp lives inside the off-canvas drawer on mobile.
   It receives a min-height override to meet WCAG 2.5.5 / 2.5.8.
   The rule in custom.css declares min-height: 34px — this overrides it.
   The @media (max-width: 767px) in custom.css line 10552 sets min-height: 46px
   already, but the inline wp-custom-css restores 34px — this block wins.
   ========================================================================== */

@media (max-width: 767px) {
    .rmh-header-whatsapp {
        min-height: 46px !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   10. PHASE 3 — ANNOUNCEMENT RIBBON LEGIBILITY (add min-height, not font-size)
   Font-size was fixed directly in custom.css (0.68rem → 0.78rem).
   This block ensures the ribbon is tall enough to display text and reinforces
   strict overflow containment to prevent ghost scroll on iOS.
   ========================================================================== */

@media (max-width: 767px) {
    .rmh-announcement-ribbon {
        min-height: 34px !important;
        contain: strict !important;
        overflow: clip !important;
    }

    /* Reinforce ribbon items legibility */
    .rmh-announcement-ribbon__item {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 6px 0 !important;
    }
}

/* ==========================================================================
   11. PHASE 4 — OFF-CANVAS DRAWER: CONTAIN HEADER SCROLL-WIDTH
   The drawer (translateX 105% offscreen) inflates #masthead scrollWidth to
   744px, enabling rubber-band ghost scrolling on iOS. Adding contain: layout
   to the sticky header prevents child overflow contributing to parent layout.
   ========================================================================== */

@media (max-width: 767px) {
    .rmh-site-header,
    #masthead.site-header {
        contain: layout paint !important;
        overflow: clip !important;
    }
}

/* ==========================================================================
   12. PHASE 5 — SYNCHRONIZED SAFE-AREA BODY PADDING
   Previously: body padding-bottom: 66px (static)
   Now: body padding-bottom = nav visible height (62px) + safe-area
   This prevents footer content from being hidden behind the bottom nav
   on devices with home indicators (iPhone 12/13/14/15/16 etc.).
   ========================================================================== */

@media (max-width: 767px) {
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Synchronized nav height: 62px content + safe-area padding-bottom */
    .rmh-mobile-nav {
        min-height: 0 !important;
        height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Float cart bubble repositioned above the 62px nav bar */
    .moderncart-toggle-slide-out,
    #moderncart-floating-cart {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ==========================================================================
   13. PHASE 5B — HONEYPOT MODERNIZATION (eliminate -9999px ghost boundary)
   The anti-spam honeypot uses left: -9999px which extends the virtual page
   canvas far left, causing touch gesture normalization issues on Android.
   Replace with accessible zero-clip pattern (invisible to users + ATs ignore).
   ========================================================================== */

.rmh-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   14. RIBBON FONT-SIZE OVERRIDE (beats wp-custom-css inline 0.68rem)
   The WordPress Customizer Additional CSS copies the 0.68rem rule into an
   inline <style id="wp-custom-css"> block that loads AFTER all stylesheets,
   giving it priority without !important. Use !important here to override it.
   ========================================================================== */

@media (max-width: 768px) {
    .rmh-announcement-ribbon {
        font-size: 13px !important;
    }
    .rmh-announcement-ribbon__item {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}


/* ==========================================================================
   15. MOBILE UX/UI OVERHAUL — PHASE 6
   Comprehensive mobile readability, tap-target, and layout improvements.
   Written: 2026-10-11

   Priority fixes:
   A. Typography — section labels, eyebrow badges, btn-light text too small
   B. Tap targets — cart remove, pagination, quick-store button
   C. Cart page — remove button, quantity stepper, totals table, CTAs
   D. Shop page — sort select, product list items, result count
   E. Checkout — form inputs 16px (prevent iOS zoom), GPS, WhatsApp section
   F. Homepage hero — stack buttons on 480px, trust bar
   G. Shop product rows — RMH epharmacy list
   H. WooCommerce notices legibility
   I. My Account tabs — finger-friendly nav
   J. Global interactive element floor — all WC buttons ≥44px
   ========================================================================== */

/* ------------------------------------------------------------------
   A. TYPOGRAPHY — Minimum readable font sizes on mobile
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    /* Section label pills: explicit 13px */
    body.home .rmh-section-label,
    .rmh-section-label {
        font-size: 13px !important;
        min-height: 26px !important;
        line-height: 1.4 !important;
        letter-spacing: 0.06em !important;
    }

    /* Hero eyebrow: explicit 13px */
    .rmh-home-hero .rmh-eyebrow,
    .rmh-eyebrow {
        font-size: 13px !important;
        min-height: 26px !important;
        line-height: 1.4 !important;
        letter-spacing: 0.1em !important;
    }

    /* Upload Prescription btn-light */
    .rmh-btn.rmh-btn-light,
    .rmh-btn-light {
        font-size: 13px !important;
        min-height: 44px !important;
        padding: 10px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* WooCommerce breadcrumb links */
    .woocommerce-breadcrumb,
    .woocommerce-breadcrumb a {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .woocommerce-breadcrumb a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 2px !important;
    }
}

/* ------------------------------------------------------------------
   B. TAP TARGETS
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    /* Cart remove button: 20x20 → 44x44px touch area */
    .woocommerce-cart-form td.product-remove {
        width: 50px !important;
        min-width: 50px !important;
        padding: 8px 4px !important;
        vertical-align: middle !important;
    }

    .woocommerce-cart-form td.product-remove a.remove,
    .woocommerce table.cart td.product-remove a.remove {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        background: #fff0f0 !important;
        color: #dc2626 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        margin: 0 auto !important;
        text-decoration: none !important;
        transition: background 0.15s ease !important;
    }

    .woocommerce-cart-form td.product-remove a.remove:hover,
    .woocommerce-cart-form td.product-remove a.remove:focus-visible {
        background: #fee2e2 !important;
        color: #b91c1c !important;
    }

    /* Pagination — 44×44px minimum */
    .woocommerce-pagination ul.page-numbers li a.page-numbers,
    .woocommerce-pagination ul.page-numbers li span.page-numbers {
        min-width: 44px !important;
        height: 44px !important;
        font-size: 14px !important;
        padding: 0 10px !important;
    }

    /* Quick store button */
    .rmh-qs-btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 14px !important;
    }

    /* Cart quantity stepper */
    .woocommerce-cart-form .quantity input[type="number"],
    .woocommerce-cart .quantity input[type="number"] {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        text-align: center !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        min-width: 56px !important;
        max-width: 72px !important;
        box-sizing: border-box !important;
    }

    /* View-all links */
    .rmh-view-all {
        min-height: 44px !important;
        padding: 8px 4px !important;
    }
}

/* ------------------------------------------------------------------
   C. CART PAGE — layout polish
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    /* Cart product name */
    .woocommerce-cart-form td.product-name a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1a202c !important;
        line-height: 1.4 !important;
        display: block !important;
        padding: 4px 0 !important;
    }

    /* Price labels in cart */
    .woocommerce-cart-form td.product-price,
    .woocommerce-cart-form td.product-subtotal {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #007a48 !important;
    }

    /* Coupon form clean mobile stack */
    .woocommerce-cart-form .coupon {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .woocommerce-cart-form .coupon input#coupon_code {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        box-sizing: border-box !important;
    }

    .woocommerce-cart-form .coupon button[name="apply_coupon"],
    .woocommerce-cart-form .coupon .button {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Update cart button */
    .woocommerce-cart-form .actions .button[name="update_cart"],
    .woocommerce-cart .actions .button {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 12px !important;
    }

    /* Proceed to Checkout button */
    .wc-proceed-to-checkout .checkout-button,
    .woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 52px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        letter-spacing: 0.02em !important;
    }

    /* Cart totals table */
    .woocommerce .cart-collaterals .cart_totals table th,
    .woocommerce .cart-collaterals .cart_totals table td {
        font-size: 14px !important;
        padding: 10px 8px !important;
        vertical-align: middle !important;
    }

    .woocommerce .cart-collaterals .cart_totals table tr.order-total th,
    .woocommerce .cart-collaterals .cart_totals table tr.order-total td {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1a202c !important;
    }

    /* WhatsApp + Call CTA grid on cart */
    .rmh-cart-cta-row,
    .rmh-cart-whatsapp-cta {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }

    .rmh-cart-cta-row > *,
    .rmh-cart-whatsapp-cta > * {
        min-height: 52px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 6px !important;
        padding: 10px 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
    }
}

/* ------------------------------------------------------------------
   D. SHOP PAGE — sort bar, result count
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    /* Sort select */
    .woocommerce-ordering select.orderby {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
    }

    .woocommerce-ordering {
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* Result count text */
    .woocommerce-result-count {
        font-size: 13px !important;
        color: #64748b !important;
        margin-bottom: 8px !important;
    }

    /* Product title + price in WC default loop */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }

    .woocommerce ul.products li.product .price {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #007a48 !important;
    }
}

/* ------------------------------------------------------------------
   E. CHECKOUT PAGE — prevent iOS zoom (16px inputs), GPS, WhatsApp
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    /* Form labels */
    .woocommerce-checkout .form-row label,
    .woocommerce-checkout .form-row label span {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        margin-bottom: 5px !important;
        display: block !important;
    }

    /* Inputs — 16px prevents iOS auto-zoom on focus */
    .woocommerce-checkout input[type="text"],
    .woocommerce-checkout input[type="email"],
    .woocommerce-checkout input[type="tel"],
    .woocommerce-checkout input[type="number"],
    .woocommerce-checkout input[type="password"],
    .woocommerce-checkout textarea,
    .woocommerce-checkout select {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        line-height: 1.4 !important;
    }

    .woocommerce-checkout textarea {
        min-height: 88px !important;
    }

    /* Section headings */
    .woocommerce-billing-fields h3,
    .woocommerce-shipping-fields h3,
    #order_review_heading {
        font-size: 17px !important;
        font-weight: 700 !important;
        margin-bottom: 16px !important;
        color: #1a202c !important;
    }

    /* GPS location section */
    #rmh-gps-section,
    .rmh-gps-section {
        background: #f0fdf4 !important;
        border: 1px solid #bbf7d0 !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin: 16px 0 !important;
    }

    #rmh-use-gps-btn,
    .rmh-gps-btn,
    button[id*="gps"] {
        min-height: 48px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Order review table on checkout */
    .woocommerce-checkout-review-order-table {
        font-size: 14px !important;
        width: 100% !important;
    }

    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td {
        padding: 10px 8px !important;
        font-size: 14px !important;
        vertical-align: middle !important;
    }

    .woocommerce-checkout-review-order-table tfoot tr.order-total th,
    .woocommerce-checkout-review-order-table tfoot tr.order-total td {
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    /* Place Order button */
    #place_order,
    .woocommerce-checkout #payment #place_order {
        min-height: 54px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em !important;
        border-radius: 10px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* WhatsApp order section on checkout */
    .rmh-checkout-whatsapp-section,
    #rmh-checkout-whatsapp-section {
        background: #f0fdf9 !important;
        border: 1.5px solid #6ee7b7 !important;
        border-radius: 14px !important;
        padding: 18px 16px !important;
        margin-top: 20px !important;
    }

    .rmh-checkout-whatsapp-section h3,
    #rmh-checkout-whatsapp-section h3 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #065f46 !important;
        margin-bottom: 8px !important;
    }

    #rmh-send-whatsapp-order,
    .rmh-send-whatsapp-btn,
    a[id*="whatsapp"][href*="wa.me"],
    button[id*="whatsapp"] {
        min-height: 54px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

/* ------------------------------------------------------------------
   F. HOMEPAGE HERO — stack buttons on very small screens
   ------------------------------------------------------------------ */
@media (max-width: 480px) {

    .rmh-home-hero .rmh-hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .rmh-home-hero .rmh-hero-buttons .rmh-btn {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 15px !important;
        justify-content: center !important;
    }

    /* Hero trust items text */
    .rmh-home-hero__trust-item {
        font-size: 12px !important;
    }

    /* Section headings smaller viewport */
    .rmh-section-heading h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .rmh-section-subheading,
    .rmh-section-heading p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
}

/* ------------------------------------------------------------------
   G. SHOP — RMH epharmacy product list rows
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    .rmh-epharmacy-product-row,
    .rmh-product-list-item {
        min-height: 80px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    .rmh-epharmacy-product-row .rmh-btn,
    .rmh-product-list-item .rmh-btn {
        min-height: 44px !important;
        font-size: 13px !important;
        padding: 8px 14px !important;
        white-space: nowrap !important;
    }

    .rmh-epharmacy-product-row .rmh-product-meta,
    .rmh-product-list-item .rmh-product-meta {
        font-size: 12px !important;
        color: #64748b !important;
    }
}

/* ------------------------------------------------------------------
   H. WOOCOMMERCE NOTICES — legibility
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    .woocommerce-notices-wrapper .woocommerce-message,
    .woocommerce-notices-wrapper .woocommerce-error,
    .woocommerce-notices-wrapper .woocommerce-info,
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        font-size: 14px !important;
        padding: 14px 16px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        line-height: 1.5 !important;
    }

    .woocommerce-message .button,
    .woocommerce-error .button,
    .woocommerce-info .button {
        min-height: 44px !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ------------------------------------------------------------------
   I. MY ACCOUNT — tab nav + content
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        list-style: none !important;
        margin-bottom: 20px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 8px 16px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        color: #374151 !important;
        background: #ffffff !important;
        transition: border-color 0.15s, color 0.15s !important;
        white-space: nowrap !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
    .woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible,
    .woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
        border-color: #007a48 !important;
        color: #007a48 !important;
        background: #f0fdf4 !important;
    }
}

/* ------------------------------------------------------------------
   J. GLOBAL — WooCommerce button and select2 floor
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .woocommerce .button.alt {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 10px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* Select2 dropdowns */
    .select2-container--default .select2-selection--single {
        min-height: 48px !important;
        height: 48px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 48px !important;
        font-size: 15px !important;
        padding-left: 14px !important;
        padding-right: 30px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 48px !important;
    }
}

/* ==========================================================================
   PHASE 7 — COMPREHENSIVE MOBILE REPAIR (2026-10-12)
   1. Hero image & caption — normal flow, full visibility, unclipped branding.
   2. Trusted Manufacturers — smooth horizontal scroll carousel (1.2–1.4 cards).
   3. Floating Cart — brand green button, crisp white cart glyph, top-right red badge.
   4. Services, tools, delivery tracking & footer padding coordination.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7A. BODY BOTTOM PADDING — single authoritative clearance (74px + safe-area).
   Ensures bottom nav (60px) + comfort gap never obscures interactive cards.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* --------------------------------------------------------------------------
   7B. HERO SECTION — CLEAN VERTICAL FLOW & FULL MEDICINE BOX VISIBILITY
   - Normal document flow (no fixed/max-height clipping).
   - Container grows naturally to fit content across 320, 360, 375, 391, 430, 480px.
   - Complete pharmacy delivery box visible without cropping box branding.
   - figcaption ("Trusted care, packed for your doorstep.") fully visible.
   - Balanced transition to next section.
   - Desktop 2-column layout preserved.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .rmh-home-hero,
    .rmh-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin: 12px auto 28px auto !important;
        padding: 18px 16px 20px 16px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .rmh-home-hero::before,
    .rmh-home-hero::after {
        display: none !important;
    }

    .rmh-home-hero__content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    .rmh-home-hero h1 {
        font-size: clamp(1.5rem, 7vw, 2.1rem) !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .rmh-home-hero p {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
        color: #4b6358 !important;
        margin: 0 !important;
    }

    .rmh-home-hero .rmh-hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    .rmh-home-hero .rmh-hero-buttons .rmh-btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .rmh-home-hero__trust {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 4px !important;
        padding: 10px 0 !important;
        border-top: 1px solid rgba(0, 122, 72, 0.12) !important;
    }

    .rmh-hero-art {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .rmh-hero-art__frame {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        border: 1px solid #d9e5df !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 16px rgba(23, 73, 53, 0.08) !important;
        box-sizing: border-box !important;
    }

    .rmh-hero-art img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        display: block !important;
        border-radius: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .rmh-hero-art figcaption {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #4b6358 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* --------------------------------------------------------------------------
   7C. TRUSTED MANUFACTURERS — SMOOTH HORIZONTAL SCROLLING ROW
   - Section heading wraps naturally on narrow screens (never clipped).
   - Horizontal scrolling row at ≤768px (replaces cramped 2-column grid).
   - Shows ~1.2–1.4 cards at a time on 391px viewport (clear scrolling cue).
   - Consistent card widths, heights, padding, gaps, and corner radii.
   - Logos centered with object-fit: contain.
   - Long manufacturer names wrap sensibly; medicine counts & links fully visible.
   - Horizontal scrolling stays STRICTLY inside row (no body overflow).
   - Subtle, discoverable scrollbar with touch & keyboard scroll support.
   - Preserves multi-column grid on desktop (>768px).
   -------------------------------------------------------------------------- */
.rmh-brands-section {
    margin-top: 24px !important;
    margin-bottom: 32px !important;
    box-sizing: border-box !important;
}

.rmh-brands-section .rmh-section-heading h2,
#rmh-brands-heading {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.25 !important;
}

@media (max-width: 768px) {
    .rmh-brands-section {
        padding-inline: 16px !important;
        overflow: visible !important;
    }

    .rmh-brands-section .rmh-section-heading {
        margin-bottom: 14px !important;
    }

    .rmh-brands-section .rmh-section-heading h2 {
        font-size: 1.35rem !important;
    }

    .manufacturer-grid,
    .rmh-brands-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 16px !important;
        overscroll-behavior-x: contain !important;
        gap: 12px !important;
        width: calc(100% + 32px) !important;
        max-width: calc(100% + 32px) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 4px 16px 14px 16px !important;
        box-sizing: border-box !important;
        scrollbar-width: thin !important;
        scrollbar-color: #007a48 #f1f5f9 !important;
    }

    /* Subtle discoverable scrollbar for webkit */
    .manufacturer-grid::-webkit-scrollbar,
    .rmh-brands-grid::-webkit-scrollbar {
        height: 5px !important;
        display: block !important;
    }

    .manufacturer-grid::-webkit-scrollbar-track,
    .rmh-brands-grid::-webkit-scrollbar-track {
        background: #f1f5f9 !important;
        border-radius: 99px !important;
        margin: 0 16px !important;
    }

    .manufacturer-grid::-webkit-scrollbar-thumb,
    .rmh-brands-grid::-webkit-scrollbar-thumb {
        background: #007a48 !important;
        border-radius: 99px !important;
    }

    /* Card sizing: shows ~1.2 to 1.4 cards at a time across 320px–480px */
    .manufacturer-card,
    .rmh-brand-card {
        flex: 0 0 clamp(240px, 72vw, 275px) !important;
        width: clamp(240px, 72vw, 275px) !important;
        max-width: 80vw !important;
        min-height: 154px !important;
        height: auto !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 14px 12px !important;
        background: #ffffff !important;
        border: 1px solid #dcebe2 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(16, 37, 27, 0.05) !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }

    .rmh-brand-card:focus-visible {
        outline: 2px solid #007a48 !important;
        outline-offset: 2px !important;
    }

    .manufacturer-logo-wrap,
    .rmh-brand-card__logo-wrap {
        width: 100% !important;
        height: 44px !important;
        max-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 8px auto !important;
        overflow: hidden !important;
    }

    .manufacturer-logo,
    .rmh-brand-card__logo {
        max-height: 40px !important;
        max-width: 110px !important;
        width: auto !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .rmh-brand-card__name {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #10251b !important;
        line-height: 1.3 !important;
        margin: 0 0 3px 0 !important;
        text-align: center !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        display: block !important;
    }

    .rmh-brand-card__count {
        font-size: 12px !important;
        color: #587065 !important;
        line-height: 1.2 !important;
        margin: 0 0 6px 0 !important;
        display: block !important;
    }

    .rmh-brand-card__link {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #007a48 !important;
        line-height: 1.2 !important;
        margin-top: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }
}

/* Desktop layout preservation (>768px) */
@media (min-width: 769px) {
    .manufacturer-grid,
    .rmh-brands-grid {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 20px 0 0 0 !important;
    }

    @media (max-width: 1024px) {
        .rmh-brands-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 12px !important;
        }
    }
}

/* --------------------------------------------------------------------------
   7D. FLOATING CART — BRAND GREEN CIRCLE, CRISP WHITE CART ICON & RED BADGE
   - Compact circular cart button (52px x 52px, WCAG touch target).
   - Pharmacy green branding (#007a48) with subtle elevation shadow.
   - Recognizable crisp white shopping cart glyph, clearly visible.
   - Red item-count badge (#dc2626) in TOP-RIGHT corner.
   - Badge never covers the cart icon.
   - Cleared above fixed bottom navigation (calc(74px + safe-area)).
   - Accessible keyboard focus and ARIA styling.
   -------------------------------------------------------------------------- */
#moderncart-floating-cart,
.moderncart-toggle-slide-out {
    position: fixed !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    left: auto !important;
    top: auto !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 9995 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* The circular button itself — white background with dark charcoal cart icon */
#moderncart-floating-cart button,
.moderncart-floating-cart-button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

#moderncart-floating-cart button:hover,
.moderncart-floating-cart-button:hover {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13) !important;
}

#moderncart-floating-cart button:active,
.moderncart-floating-cart-button:active {
    transform: scale(0.95) !important;
}

#moderncart-floating-cart button:focus-visible,
.moderncart-floating-cart-button:focus-visible {
    outline: 3px solid #007a48 !important;
    outline-offset: 3px !important;
}

/* Icon container inside button: perfectly centered */
#moderncart-floating-cart .moderncart-floating-cart-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1e293b !important;
}

/* The cart SVG symbol: charcoal, well-proportioned, completely separated from badge */
#moderncart-floating-cart .moderncart-floating-cart-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    margin: 0 !important;
    fill: none !important;
    stroke: #1e293b !important;
    color: #1e293b !important;
    transform: none !important;
}

#moderncart-floating-cart .moderncart-floating-cart-icon svg path {
    fill: none !important;
    stroke: #1e293b !important;
    color: #1e293b !important;
}

#moderncart-floating-cart .moderncart-floating-cart-icon svg circle {
    fill: #1e293b !important;
    stroke: #1e293b !important;
}

/* Item count badge: RED, in TOP-RIGHT corner */
#moderncart-floating-cart .moderncart-floating-cart-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    left: auto !important;
    bottom: auto !important;
    background-color: #dc2626 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    min-width: 19px !important;
    height: 19px !important;
    line-height: 15px !important;
    border-radius: 999px !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

#moderncart-floating-cart .moderncart-floating-cart-count span {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Drawer modal overlay & panel: hidden by default, shown when open */
#moderncart-slide-out-modal:not(.moderncart-show),
.moderncart-plugin.moderncart-modal:not(.moderncart-show) {
    display: none !important;
}

#moderncart-slide-out-modal.moderncart-show,
.moderncart-plugin.moderncart-modal.moderncart-show {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100000 !important;
}

#moderncart-slide-out,
.moderncart-default-slide-out {
    position: fixed !important;
    top: 0 !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: min(380px, 92vw) !important;
    box-sizing: border-box !important;
}

/* On desktop (>768px), keep floating cart accessible at bottom right */
@media (min-width: 769px) {
    #moderncart-floating-cart,
    .moderncart-toggle-slide-out {
        bottom: 24px !important;
        right: 24px !important;
    }
}

/* --------------------------------------------------------------------------
   7E. QUICK SERVICES CARDS — single-column on mobile, readable button targets.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .rmh-qs-card {
        height: auto !important;
        min-height: 0 !important;
        padding: 18px 16px !important;
        gap: 10px !important;
    }

    .rmh-qs-card__kicker {
        font-size: 11px !important;
    }

    .rmh-qs-card h3 {
        font-size: 1rem !important;
    }

    .rmh-qs-card p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .rmh-qs-btn,
    .rmh-qs-card .rmh-btn,
    .rmh-qs-card a.rmh-btn {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .rmh-qs-card .rmh-btn-outline,
    .rmh-qs-card .rmh-btn-primary,
    .rmh-qs-card .rmh-btn-light {
        min-height: 44px !important;
        font-size: 13px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
    }
}

/* --------------------------------------------------------------------------
   7F. PHARMACY TOOLS CARDS (.rmh-tool-card)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .rmh-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .rmh-tool-card {
        min-height: 64px !important;
    }

    .rmh-tool-content p {
        display: none !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin: 0 0 2px 0 !important;
    }
}

/* --------------------------------------------------------------------------
   7G. DELIVERY FEEDBACK & LIVE ORDER TRACKING SECTION
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .rmh-delivery-tracking-section,
    #rmh-delivery-section {
        padding: 20px 16px !important;
        box-sizing: border-box !important;
    }

    .rmh-delivery-tracking-section .rmh-section-inner,
    .rmh-delivery-tracking-section .rmh-tracking-grid,
    .rmh-delivery-tracking-section .rmh-tracking-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .rmh-delivery-tracking-section .rmh-tracking-col,
    .rmh-delivery-tracking-section .rmh-tracking-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rmh-rating-btn,
    .rmh-feedback-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* --------------------------------------------------------------------------
   7H. TRUST BADGES & FOOTER OVERFLOW
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .rmh-trust-badges,
    .rmh-trust-bar,
    .rmh-trust-regulatory-section {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .rmh-trust-badge,
    .rmh-trust-item {
        flex: 1 1 calc(50% - 8px) !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .site-footer,
    .ast-footer-overlay {
        font-size: 13px !important;
        overflow-x: hidden !important;
    }

    .site-footer * {
        max-width: 100% !important;
        word-break: break-word !important;
    }
}

/* --------------------------------------------------------------------------
   7I. HORIZONTAL OVERFLOW SENTINEL — prevents page-wide horizontal scroll
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #page,
    .ast-container,
    .entry-content,
    .wp-block-group,
    .woocommerce {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* === END PHASE 7 === */

/* ==========================================================================
   PHASE 8: MOBILE HOMEPAGE UI, PHARMACY SERVICES, MEDICINES & CTA REFINEMENTS
   ========================================================================== */

/* ── 8A. PHARMACY SERVICES CARDS (.rmh-tools-section) ── */
@media (max-width: 768px) {
    body.home .rmh-tools-section,
    .rmh-tools-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.home .rmh-tools-grid,
    .rmh-tools-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.home .rmh-tool-card,
    .rmh-tool-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 10px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        text-decoration: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }

    body.home .rmh-tool-card:active,
    .rmh-tool-card:active {
        transform: scale(0.99) !important;
    }

    body.home .rmh-tool-icon,
    .rmh-tool-icon {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background: #f1f5f9 !important;
        margin: 0 !important;
    }

    .rmh-tool-whatsapp .rmh-tool-icon {
        background: #e8f9ef !important;
    }

    .rmh-tool-phone .rmh-tool-icon {
        background: #eff6ff !important;
    }

    .rmh-tool-icon img.emoji {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
    }

    body.home .rmh-tool-content,
    .rmh-tool-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        overflow: visible !important;
    }

    body.home .rmh-tool-content span,
    .rmh-tool-content span {
        display: inline-block !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
        color: #007a48 !important;
    }

    body.home .rmh-tool-content h3,
    .rmh-tool-content h3 {
        display: block !important;
        font-size: clamp(12.5px, 3.5vw, 15px) !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        color: #0f172a !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    body.home .rmh-tool-content p,
    .rmh-tool-content p {
        display: none !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin: 0 0 6px 0 !important;
        color: #475569 !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    body.home .rmh-tool-content strong,
    .rmh-tool-content strong {
        display: inline-flex !important;
        align-items: center !important;
        font-size: clamp(11.5px, 3.2vw, 13px) !important;
        font-weight: 700 !important;
        min-height: 32px !important;
        color: #007a48 !important;
        margin-top: 2px !important;
        white-space: normal !important;
    }

    .rmh-tool-phone .rmh-tool-content strong {
        color: #0a6f44 !important;
    }

    body.home .rmh-tool-card,
    .rmh-tool-card {
        min-height: 96px !important;
        height: 100% !important;
    }

    body.home .rmh-tool-content > span,
    .rmh-tool-content > span,
    body.home .rmh-tool-content p,
    .rmh-tool-content p {
        display: none !important;
    }

    /* Prescription service card and form */
    .rmh-quick-services-section,
    .rmh-quick-services-grid,
    .rmh-home-prescription-section,
    #rmh-prescription,
    .rmh-pharmacy-form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .rmh-quick-services-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .rmh-home-prescription-section {
        padding: 24px 16px !important;
    }

    .rmh-home-prescription-section__form input,
    .rmh-home-prescription-section__form button,
    .rmh-home-prescription-section__form textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ── 8B. THE FOUR HOMEPAGE MEDICINE IMAGES ONLY ── */
.rmh-product-card .rmh-product-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 6px !important;
}

.rmh-product-card .rmh-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* ── 8C. FOUR-STEP ORDERING SECTION (.rmh-steps-grid) ── */
@media (max-width: 768px) {
    .rmh-steps-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .rmh-step-card {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 20px 18px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid #dcebe2 !important;
        box-shadow: 0 2px 8px rgba(16, 37, 27, 0.04) !important;
    }

    .rmh-step-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .rmh-step-link,
    .rmh-step-btn,
    .rmh-step-links a,
    .rmh-step-links button {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        cursor: pointer !important;
    }
}

/* ── 8D. PROMOTIONAL CARDS & CTA ALIGNMENT ── */
.rmh-promo-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.rmh-promo-card__content {
    padding: 16px 16px 14px 16px !important;
    box-sizing: border-box !important;
}

.rmh-promo-card .rmh-btn,
.rmh-promo-card a.rmh-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 16px 16px 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ── 8E. FLOATING CART & BOTTOM NAVIGATION CLEARANCE ── */
#moderncart-floating-cart,
.moderncart-toggle-slide-out {
    position: fixed !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    left: auto !important;
    top: auto !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 9995 !important;
}

body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ==========================================================================
   PHASE 9: PRODUCT CARD FOOTER, RX BUTTON & PACK META REFINEMENTS
   Target: balanced 2-col card grid on 375px mobile; no stretched/excessive cards.
   ========================================================================== */

/* ── 9A. PRODUCT CARD CONTAINER: remove stacked padding ── */
.rmh-product-card {
    padding: 10px !important;
}

/* ── 9B. PRODUCT IMAGE: consistent square container ── */
.rmh-product-image {
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

.rmh-product-image img {
    padding: 5px !important;
}

/* ── 9C. PRODUCT INFO: no extra top padding ── */
.rmh-product-info {
    padding: 0 !important;
    padding-top: 0 !important;
}

/* ── 9D. PRODUCT TITLE ── */
.rmh-product-card .rmh-product-info h3,
.rmh-product-card h3 {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    margin: 0 0 5px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
}

/* ── 9E. PACK SIZE META: tighter bottom margin ── */
.rmh-product-card__meta--pack {
    font-size: 11px !important;
    color: #718096 !important;
    margin-bottom: 4px !important;
}

/* ── 9F. PRODUCT FOOTER: flex column, compact ── */
.rmh-product-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 7px 0 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ── 9G. PRICE ── */
.rmh-product-footer .rmh-price,
.rmh-product-footer .price {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #007a48 !important;
    display: block !important;
}

/* ── 9H. ADD BUTTON (OTC): pharmacy green, full width, compact height ── */
.rmh-product-footer .rmh-quick-add-wrap {
    width: 100% !important;
    display: flex !important;
}

.rmh-product-footer .rmh-quick-add-btn {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 6px !important;
    background: #007a48 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* ── 9I. RX BUTTON: green to match OTC button (no red "Order with Rx" on card) ── */
.rmh-product-footer .rmh-btn-card-rx {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 6px !important;
    background: #007a48 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.rmh-product-footer .rmh-btn-card-rx:hover {
    background: #005e37 !important;
    color: #ffffff !important;
}

/* ── 9J. OOS BUTTON ── */
.rmh-product-footer .rmh-btn-card-oos {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 6px !important;
    font-size: 0.76rem !important;
    box-sizing: border-box !important;
}

/* ── 9K. RX BADGE: subtle small indicator, not prominent ── */
.rmh-rx-badge--corner {
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    background: rgba(185, 28, 28, 0.85) !important;
    font-size: 9px !important;
    padding: 2px 5px !important;
    box-shadow: none !important;
}

/* ── 9L. STEPPER CONTROLS ── */
.rmh-qty-stepper {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
}

.rmh-stepper-btn {
    min-width: 32px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #007a48 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}

/* ==========================================================================
   PHASE 10: PHARMACY SERVICES — NEW CARD TYPES (PRESCRIPTION + DELIVERY)
   Normalises button elements used as tool cards and adds icon accent colours.
   ========================================================================== */

/* Reset button default styles so <button class="rmh-tool-card"> matches <a class="rmh-tool-card"> */
button.rmh-tool-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

button.rmh-tool-card:hover,
button.rmh-tool-card:focus-visible {
    border-color: #94a3b8 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07) !important;
    outline: none !important;
}

button.rmh-tool-card:focus-visible {
    outline: 2px solid #007a48 !important;
    outline-offset: 2px !important;
}

/* Prescription card icon: mint green */
.rmh-tool-prescription .rmh-tool-icon {
    background: #ecfdf5 !important;
    color: #007a48 !important;
}

.rmh-tool-prescription .rmh-tool-icon svg {
    stroke: #007a48 !important;
}

/* Delivery card icon: amber/ochre tone */
.rmh-tool-delivery .rmh-tool-icon {
    background: #fef9ec !important;
    color: #b45309 !important;
}

.rmh-tool-delivery .rmh-tool-icon svg {
    stroke: #b45309 !important;
}

/* Prescription + delivery CTA text colours */
.rmh-tool-prescription .rmh-tool-content strong {
    color: #007a48 !important;
}

.rmh-tool-delivery .rmh-tool-content strong {
    color: #b45309 !important;
}