/*
 * MediShop Fixes v37.0
 * Comprehensive fixes for:
 * 1. Top bar responsiveness and alignment
 * 2. Star ratings alignment and sizing
 * 3. Quantity per box badge styling
 * 4. General UI improvements
 */

/* ══════════════════════════════════════════════════
   FIX 1 — TOP BAR: Improved responsiveness and alignment
   ══════════════════════════════════════════════════ */

#ms-topbar {
    background: var(--ms-topbar-bg, #1a5c1a) !important;
    border-bottom: 1px solid rgba(0,0,0,0.15) !important;
    padding: 6px 0 !important;
    font-size: 11px !important;
}

#ms-topbar .ms-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
}

#ms-topbar .ms-topbar-left,
#ms-topbar .ms-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

#ms-topbar .ms-topbar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

#ms-topbar .ms-topbar-right {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

#ms-topbar a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
    white-space: nowrap !important;
}

#ms-topbar a:hover {
    color: #fff !important;
}

#ms-topbar .ms-topbar-sep {
    color: rgba(255, 255, 255, 0.3) !important;
    margin: 0 2px !important;
}

/* Mobile responsiveness for top bar */
@media (max-width: 768px) {
    #ms-topbar {
        padding: 6px 0 !important;
        font-size: 12px !important;
    }

    #ms-topbar .ms-container {
        padding: 0 14px !important;
        gap: 8px !important;
        justify-content: space-between !important;
    }

    #ms-topbar .ms-topbar-left {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
    }

    #ms-topbar .ms-topbar-left a {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;   /* fill available width, not a fixed px cap */
        font-size: 12px !important;
    }

    #ms-topbar .ms-topbar-right {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }

    /* Sign In — large enough to read and tap */
    #ms-topbar .ms-topbar-right a {
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 3px 10px !important;
        border: 1px solid rgba(255,255,255,0.55) !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
    }
    #ms-topbar .ms-topbar-right a:hover {
        background: rgba(255,255,255,0.15) !important;
    }
}

@media (max-width: 480px) {
    #ms-topbar .ms-container {
        padding: 0 12px !important;
    }

    #ms-topbar .ms-topbar-left a {
        font-size: 11px !important;
    }

    /* On very small screens show email icon prefix to save space */
    #ms-topbar .ms-topbar-left a::before {
        content: '✉ ';
        font-size: 11px;
    }

    #ms-topbar .ms-topbar-right a {
        font-size: 12px !important;
        padding: 3px 9px !important;
    }
}

/* ══════════════════════════════════════════════════
   FIX 2 — TRUST BAR: Better alignment and responsiveness
   ══════════════════════════════════════════════════ */

#ms-trust-bar {
    background: var(--ms-trust-bar-bg, #007a2f) !important;
    color: var(--ms-trust-bar-color, #fff) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 7px 0 !important;
    overflow: hidden !important;
}

#ms-trust-bar .ms-trust-bar-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    padding: 0 16px !important;
}

#ms-trust-bar .ms-tb-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
}

@media (max-width: 768px) {
    #ms-trust-bar {
        font-size: 10px !important;
        padding: 6px 0 !important;
    }
    
    #ms-trust-bar .ms-trust-bar-inner {
        gap: 16px !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 12px !important;
    }
    
    #ms-trust-bar .ms-trust-bar-inner::-webkit-scrollbar {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════
   FIX 3 — STAR RATINGS: Proper alignment and sizing
   ══════════════════════════════════════════════════ */

/* Product page star ratings */
.woocommerce div.product .woocommerce-product-rating,
.ms-single-summary .woocommerce-product-rating {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.woocommerce .woocommerce-product-rating .star-rating {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.woocommerce .woocommerce-product-rating .woocommerce-review-link {
    font-size: 13px !important;
    color: var(--ms-text-light, #888) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.2s !important;
}

.woocommerce .woocommerce-product-rating .woocommerce-review-link:hover {
    color: var(--ms-green, #5a9e2f) !important;
    text-decoration: underline !important;
}

/* Product card star ratings */
.ms-product-card .pc-stars {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    margin-bottom: 5px !important;
    min-height: 16px !important;
}

.ms-product-card .pc-stars .star-rating {
    font-size: 12px !important;
    line-height: 1 !important;
}

.ms-product-card .pc-count {
    font-size: 11px !important;
    color: #999 !important;
    margin-left: 4px !important;
}

/* Product cards in loops (.pc-stars direct children) */
.pc-stars {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    margin: 0 0 5px !important;
    min-height: 16px !important;
    text-align: center !important;
}

.pc-stars .star-full,
.pc-stars .star-empty {
    line-height: 1 !important;
}

.pc-stars .star-full {
    color: #f59e0b !important;
}

.pc-stars .star-empty {
    color: #ddd !important;
}

.pc-stars .pc-count {
    font-size: 11px !important;
    color: #999 !important;
    margin-left: 2px !important;
}

/* Loop product star ratings */
.woocommerce ul.products li.product .star-rating {
    font-size: 13px !important;
    margin: 0 0 6px !important;
    line-height: 1 !important;
}

.woocommerce .star-rating,
.woocommerce .woocommerce-product-rating .star-rating {
    color: #f59e0b !important;
    overflow: hidden !important;
    position: relative !important;
    height: 1em !important;
    line-height: 1 !important;
    font-size: 14px !important;
    width: 5.4em !important;
    font-family: star !important;
}

.woocommerce .star-rating::before {
    content: "SSSSS" !important;
    color: #ddd !important;
    float: left !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
}

.woocommerce .star-rating span {
    overflow: hidden !important;
    float: left !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
    padding-top: 1.5em !important;
}

.woocommerce .star-rating span::before {
    content: "SSSSS" !important;
    top: 0 !important;
    position: absolute !important;
    left: 0 !important;
    color: #f59e0b !important;
}

/* ══════════════════════════════════════════════════
   FIX 4 — QUANTITY PER BOX BADGE: Consistent styling
   ══════════════════════════════════════════════════ */

/* Product card quantity badge (homepage/shop) */
.pc-qty-box,
.ms-qty-per-box-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #166534 !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 12px !important;
    padding: 3px 10px !important;
    margin: 5px 0 6px !important;
    width: fit-content !important;
    line-height: 1.4 !important;
}

.pc-qty-box::before,
.ms-qty-per-box-badge::before {
    content: "📦 " !important;
    font-size: 12px !important;
}

/* Single product page quantity badge */
.ms-qty-per-box,
div.ms-qty-per-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 6px 0 12px !important;
    padding: 6px 14px !important;
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    color: #166534 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    width: fit-content !important;
}

.ms-qty-per-box span {
    line-height: 1 !important;
}

/* Don't add emoji via ::before for single product (it's in the HTML) */
.ms-qty-per-box::before {
    content: none !important;
}

/* ══════════════════════════════════════════════════
   FIX 5 — HEADER CART BUTTON: Improved styling
   ══════════════════════════════════════════════════ */

.ms-cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: var(--ms-orange, #e85d04) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    transition: background 0.2s, transform 0.15s !important;
    white-space: nowrap !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
}

.ms-cart-btn:hover {
    background: var(--ms-orange-dark, #c94b02) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

.ms-cart-count {
    background: #fff !important;
    color: var(--ms-orange, #e85d04) !important;
    border-radius: 50% !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 4px !important;
}

@media (max-width: 600px) {
    .ms-cart-btn {
        padding: 9px 14px !important;
    }
    
    .ms-cart-label {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════
   FIX 6 — MOBILE HEADER: Proper spacing and flow
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #ms-header-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 10px 0 0 !important;
        gap: 10px !important;
    }
    
    #ms-logo {
        order: 1 !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }
    
    #ms-header-actions {
        order: 2 !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    #ms-search {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-bottom: 10px !important;
    }
    
    #ms-search form {
        height: 44px !important;
    }
    
    #ms-search input[type="search"],
    #ms-search input[type="text"] {
        font-size: 16px !important;
    }
}

/* ══════════════════════════════════════════════════
   FIX 7 — GENERAL UI IMPROVEMENTS
   ══════════════════════════════════════════════════ */

/* Ensure proper box-sizing everywhere */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Remove horizontal overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

#ms-page-wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Better link colors for topbar */
#ms-topbar *,
#ms-topbar span,
#ms-topbar .ms-topbar-left,
#ms-topbar .ms-topbar-right {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Product cards - centered layout */
.ms-product-card,
.woocommerce ul.products li.product {
    text-align: center !important;
}

.ms-product-card .pc-name,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    text-align: center !important;
    display: block !important;
}

.ms-product-card .pc-price,
.woocommerce ul.products li.product .price {
    text-align: center !important;
    display: block !important;
}

.ms-product-card .pc-qty-box {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Responsive typography */
@media (max-width: 480px) {
    body {
        font-size: 13px !important;
    }
    
    .ms-product-card .pc-name {
        font-size: 12px !important;
    }
}

/* ══════════════════════════════════════════════════
   FIX 8 — CHECKOUT IMPROVEMENTS
   ══════════════════════════════════════════════════ */

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .ms-checkout-grid {
        grid-template-columns: 1fr !important;
    }
    
    .ms-checkout-col-aside {
        order: -1 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT DESCRIPTION READ-MORE COLLAPSE
   Shows ~5 lines then "Read More ↓" to expand
══════════════════════════════════════════════════════════════ */
.ms-desc-wrap {
    position: relative;
}
.ms-desc-wrap.collapsed .woocommerce-product-details__short-description,
.ms-desc-wrap.collapsed .woocommerce-Tabs-panel--description .panel-inner {
    max-height: 160px;
    overflow: hidden;
}
.ms-desc-wrap.collapsed::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}
.ms-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 7px 18px;
    background: var(--c-brand-light, #EEEEFF);
    color: var(--c-brand, #2A2A72);
    border: 1px solid var(--c-brand-border, #C7C7F0);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ms-read-more-btn:hover { background: var(--c-brand, #2A2A72); color: #fff; }
.ms-read-more-btn svg { transition: transform .2s; }
.ms-desc-wrap:not(.collapsed) .ms-read-more-btn svg { transform: rotate(180deg); }


/* ══════════════════════════════════════════════════════════════
   FOOTER v11.1 — Matches site palette (pharmacy green + navy)
   Brand colors: #1a5c1a (dark green), #5a9e2f (accent green),
   #2A2A72 (navy), #ffffff (text on dark)
══════════════════════════════════════════════════════════════ */

/* ── Base ────────────────────────────────────────────────────── */
#ms-footer {
    background: #132b13;     /* Deep pharmacy green — darker than topbar for depth */
    color: rgba(255,255,255,.88);
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Newsletter bar — matches header trust bar green ─────────── */
.ms-footer-nl {
    background: color-mix(in srgb, var(--ms-footer-bg, #1a5c1a) 85%, #000);
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding: 9px 0;
}
.ms-footer-nl-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ms-footer-nl-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    min-width: 180px;
}
.ms-footer-nl-text svg { flex-shrink: 0; color: #a3e6a3; }
.ms-footer-nl-form {
    display: flex;
    flex: 1;
    max-width: 360px;
    min-width: 220px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.ms-footer-nl-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    border: none;
    border-radius: 6px 0 0 6px;
    font-size: 13px;
    outline: none;
    background: #fff;
    color: #1e2035;
}
.ms-nl-submit {
    padding: 7px 14px;
    background: #5a9e2f;
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .03em;
    transition: background .15s;
}
.ms-nl-submit:hover { background: #4a8926; }

/* ── Main footer grid ────────────────────────────────────────── */
.ms-footer-main {
    padding: 22px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ms-footer-grid {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: 16px 28px;
    align-items: start;
}

/* ── Brand column ────────────────────────────────────────────── */
.ms-footer-brand .ms-footer-logo-text {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
    letter-spacing: -.2px;
}
.ms-footer-tagline {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #a3e6a3;
    margin: 0 0 8px;
}
.ms-footer-about {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    margin: 0 0 8px;
    line-height: 1.5;
    max-width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Contact items */
.ms-footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}
.ms-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    word-break: break-all;
    transition: color .15s;
}
.ms-footer-contact-item:hover { color: #a3e6a3; }
.ms-footer-contact-item svg { flex-shrink: 0; color: #6ee7b7; }

/* Ships to */
.ms-footer-ships {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}
.ms-footer-ships-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255,255,255,.38);
    text-transform: uppercase;
    flex: 0 0 100%;
    margin-bottom: 3px;
}
.ms-footer-ship-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    background: rgba(90,158,47,.2);
    border: 1px solid rgba(90,158,47,.4);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #c6f0c6;
}
.ms-footer-ship-badge svg { color: #a3e6a3; }

/* Trust badges */
.ms-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.ms-fbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    font-size: 11px;
    color: rgba(255,255,255,.78);
    font-weight: 500;
}
.ms-fbadge svg { color: #a3e6a3; }

/* Social links */
.ms-footer-social { display: flex; gap: 7px; flex-wrap: wrap; }
.ms-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(90,158,47,.15);
    border: 1px solid rgba(90,158,47,.3);
    border-radius: 50%;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.ms-footer-social-link:hover {
    background: #5a9e2f;
    color: #fff;
    border-color: #5a9e2f;
}

/* ── Link columns (Quick Links / Categories / Company) ────────── */
.ms-footer-col-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #a3e6a3;              /* accent green — clearly readable */
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(90,158,47,.25);
}

/* Override for wp_nav_menu generated headings */
#ms-footer .ms-footer-col > h4,
#ms-footer .ms-footer-col > h5 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #a3e6a3;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(90,158,47,.25);
}

.ms-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ms-footer-links li { margin-bottom: 3px; }
.ms-footer-links a {
    font-size: 13px;                    /* 13px — actually readable */
    color: rgba(255,255,255,.72);       /* clearly visible on dark green */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
    transition: color .15s;
}
.ms-footer-links a:hover { color: #a3e6a3; }
.ms-footer-links a svg  { color: #6ee7b7; flex-shrink: 0; }

/* wp_nav_menu li/a reset */
#ms-footer .ms-footer-links li { list-style: none; }
#ms-footer .ms-footer-links a  { font-size: 13px; color: rgba(255,255,255,.72); }
#ms-footer .ms-footer-links a:hover { color: #a3e6a3; }

/* ── Payment methods bar ─────────────────────────────────────── */
.ms-footer-payments {
    background: rgba(0,0,0,.25);
    padding: 9px 0;
    border-top: 1px solid rgba(90,158,47,.15);
    border-bottom: 1px solid rgba(90,158,47,.15);
}
.ms-footer-payments-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ms-fp-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255,255,255,.38);
    text-transform: uppercase;
    margin-right: 4px;
}
.ms-fp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255,255,255,.05);
}

/* ── Copyright / bottom bar ──────────────────────────────────── */
.ms-footer-bottom {
    background: #0e1f0e;              /* slightly darker — distinct from main */
    padding: 12px 0;
}
.ms-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.ms-footer-copy {
    font-size: 12px;
    color: rgba(255,255,255,.42);
    margin: 0;
}
.ms-footer-legal {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.ms-footer-legal a {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color .15s;
}
.ms-footer-legal a:hover { color: #a3e6a3; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ms-footer-grid {
        grid-template-columns: 200px 1fr 1fr 1fr;
        gap: 24px 20px;
    }
}
@media (max-width: 900px) {
    .ms-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 20px;
    }
    .ms-footer-brand { grid-column: 1 / -1; }
    .ms-footer-about { max-width: 100%; }
}
@media (max-width: 600px) {
    .ms-footer-main { padding: 24px 0 16px; }
    .ms-footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
    .ms-footer-nl-inner { flex-direction: column; align-items: stretch; }
    .ms-footer-nl-form  { max-width: 100%; }
    .ms-footer-bottom-inner { flex-direction: column; text-align: center; }
    .ms-footer-legal { justify-content: center; gap: 10px; }
}
@media (max-width: 400px) {
    .ms-footer-grid { grid-template-columns: 1fr; }
    .ms-footer-links a { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER CONTRAST OVERRIDE — high specificity to beat
   design-system.css h4/h5/a/p color rules
   Root causes:
   - h4 { color: #1E2035 } from design-system = invisible on dark bg
   - p/a inherit dark text from body = invisible on dark bg
   - background was #132b13 (too dark) → now #1a5c1a (matches topbar)
══════════════════════════════════════════════════════════════ */

/* Correct the background — match topbar green exactly */
#ms-footer                { background: var(--ms-footer-bg, #1a5c1a) !important; }
#ms-footer .ms-footer-nl  { background: color-mix(in srgb, var(--ms-footer-bg, #1a5c1a) 85%, #000) !important; border-bottom: 2px solid rgba(255,255,255,.15) !important; }
#ms-footer .ms-footer-bottom { background: color-mix(in srgb, var(--ms-footer-bg, #1a5c1a) 70%, #000) !important; }
#ms-footer .ms-footer-payments { background: rgba(0,0,0,.2) !important; }

/* Beat design-system h1-h6 { color: var(--c-text) } for ALL headings in footer */
#ms-footer h1,
#ms-footer h2,
#ms-footer h3,
#ms-footer h4,
#ms-footer h5,
#ms-footer h6,
#ms-footer .ms-footer-col-title,
#ms-footer .widget-title,
#ms-footer .widgettitle {
    color: #c8f5c8 !important;   /* bright mint — clearly readable on green */
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    margin: 0 0 7px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    background: none !important;
    font-family: 'Open Sans', system-ui, sans-serif !important;
}

/* Beat design-system a { color: var(--c-brand) } for all footer links */
#ms-footer a,
#ms-footer .ms-footer-links a,
#ms-footer ul li a,
#ms-footer nav a {
    color: rgba(255,255,255,.82) !important;
    font-size: 13px !important;
    text-decoration: none !important;
}
#ms-footer a:hover,
#ms-footer .ms-footer-links a:hover,
#ms-footer ul li a:hover {
    color: #c8f5c8 !important;
}

/* Beat design-system p { color: var(--c-text) } */
#ms-footer p,
#ms-footer .ms-footer-about,
#ms-footer .ms-footer-copy {
    color: rgba(255,255,255,.68) !important;
}

/* Newsletter bar text */
#ms-footer .ms-footer-nl-text,
#ms-footer .ms-footer-nl-text * {
    color: #fff !important;
}

/* Contact items */
#ms-footer .ms-footer-contact-item {
    color: rgba(255,255,255,.78) !important;
}

/* Ships to + trust badges */
#ms-footer .ms-footer-ship-badge  { color: #c8f5c8 !important; border-color: rgba(200,245,200,.3) !important; background: rgba(255,255,255,.06) !important; }
#ms-footer .ms-footer-ships-label { color: rgba(255,255,255,.5) !important; }
#ms-footer .ms-fbadge             { color: rgba(255,255,255,.82) !important; border-color: rgba(255,255,255,.15) !important; background: rgba(255,255,255,.05) !important; }

/* Payment badges */
#ms-footer .ms-fp-label    { color: rgba(255,255,255,.45) !important; }
#ms-footer .ms-fp-badge    { color: inherit !important; background: rgba(255,255,255,.05) !important; }

/* Legal links */
#ms-footer .ms-footer-legal a      { color: rgba(255,255,255,.5) !important; font-size: 12px !important; }
#ms-footer .ms-footer-legal a:hover{ color: #c8f5c8 !important; }

/* Social icons */
#ms-footer .ms-footer-social-link { color: rgba(255,255,255,.75) !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; }
#ms-footer .ms-footer-social-link:hover { background: #5a9e2f !important; color: #fff !important; border-color: #5a9e2f !important; }

/* SVG icons inside footer always inherit white */
#ms-footer svg { color: inherit !important; stroke: currentColor !important; }
#ms-footer .ms-footer-contact-item svg,
#ms-footer .ms-footer-nl-text svg,
#ms-footer .ms-footer-ship-badge svg,
#ms-footer .ms-fbadge svg,
#ms-footer .ms-footer-links a svg { color: #a3e6a3 !important; }

/* Tagline (show only once — hide the duplicate from custom logo) */
#ms-footer .ms-footer-tagline { color: #a3e6a3 !important; font-size: 10px !important; }
#ms-footer .custom-logo-link + .ms-footer-tagline-sub,
#ms-footer .site-logo + .ms-footer-tagline { display: none !important; }

/* Hide WP auto-added site description below custom logo in footer */
#ms-footer .custom-logo-link { display: block; margin-bottom: 4px; }
#ms-footer .site-title,
#ms-footer .site-description,
#ms-footer .ms-footer-brand > p.ms-footer-tagline + p.ms-footer-tagline { display: none !important; }

/* ── Footer color-mix() fallback for Safari < 16 / older browsers ── */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    #ms-footer .ms-footer-nl  { background: rgba(0,0,0,.15) !important; }
    #ms-footer .ms-footer-bottom { background: rgba(0,0,0,.25) !important; }
}

/* ── Hide duplicate "MEDICINES, WITHOUT BORDER" text from custom logo ── */
#ms-footer .custom-logo-link + p,
#ms-footer .wp-custom-logo + p.ms-footer-tagline,
#ms-footer .ms-footer-brand .site-title,
#ms-footer .ms-footer-brand .site-description { display: none !important; }