/*
* MediShop Design System v1.0
* ─────────────────────────────────────────────────────
* Single source of truth for ALL visual decisions.
* Fonts: Raleway (headings) + Open Sans (body) — both stored locally.
* No Google Fonts. No external requests.
*
* Usage: reference --c-*, --f-*, --fs-*, --fw-*, --r-*, --shadow-*
* Never hardcode colors or font names anywhere else.
*/
/* ═══════════════════════════════════════════════════════
TOKEN DEFINITIONS
═══════════════════════════════════════════════════════ */
:root {
/* ── Brand ─────────────────────────────────────────── */
--c-brand: #2A2A72;
--c-brand-hover: #3D3D99;
--c-brand-light: #EEEEFF;
--c-brand-border: #C7C7F0;
/* ── Green (health · success · price) ─────────────── */
--c-green: #16A34A;
--c-green-hover: #15803D;
--c-green-light: #DCFCE7;
--c-green-border: #86EFAC;
/* ── Orange (sale · urgency) ───────────────────────── */
--c-orange: #EA580C;
--c-orange-light: #FFF1E6;
--c-orange-border: #FED7AA;
/* ── Red (error · out-of-stock) ────────────────────── */
--c-red: #DC2626;
--c-red-light: #FEE2E2;
--c-red-border: #FECACA;
/* ── Yellow (warning) ─────────────────────────────── */
--c-yellow: #D97706;
--c-yellow-light: #FEF3C7;
/* ── Surfaces ─────────────────────────────────────── */
--c-bg: #F4F6FB; /* page */
--c-surface: #FFFFFF; /* cards */
--c-surface-2: #F0F3FA; /* secondary */
--c-border: #E2E8F0;
--c-border-light: #EEF1F8;
/* ── Text ─────────────────────────────────────────── */
--c-text: #1E2035;
--c-text-2: #4A5568;
--c-text-3: #8896AB;
--c-text-inv: #FFFFFF;
/* ── Typography ───────────────────────────────────── */
--f-body: 'Open Sans', system-ui, -apple-system, sans-serif;
--f-heading: 'Raleway', system-ui, -apple-system, sans-serif;
--f-mono: ui-monospace, 'Courier New', monospace;
/* Font sizes — consistent scale */
--fs-2xs: 10px;
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base:14px;
--fs-md: 15px;
--fs-lg: 17px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 30px;
--fs-4xl: 36px;
/* Font weights — use ONLY these four */
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* Line heights */
--lh-tight: 1.25;
--lh-snug: 1.4;
--lh-base: 1.6;
--lh-loose: 1.8;
/* ── Spacing ──────────────────────────────────────── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
/* ── Radii ────────────────────────────────────────── */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-full: 9999px;
/* ── Shadows ──────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(30,32,53,.05);
--shadow-sm: 0 1px 4px rgba(30,32,53,.08), 0 1px 2px rgba(0,0,0,.04);
--shadow-md: 0 4px 16px rgba(42,42,114,.09), 0 2px 5px rgba(0,0,0,.05);
--shadow-lg: 0 8px 28px rgba(42,42,114,.11), 0 3px 10px rgba(0,0,0,.05);
/* ── Transitions ──────────────────────────────────── */
--t-fast: .12s ease;
--t-base: .18s ease;
--t-slow: .28s ease;
}
/* ═══════════════════════════════════════════════════════
BASE RESET
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: var(--f-body);
font-size: var(--fs-base);
font-weight: var(--fw-normal);
line-height: var(--lh-base);
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Headings — Raleway ─────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--f-heading);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
color: var(--c-text);
margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-base);font-weight: var(--fw-semibold); }
@media (max-width: 767px) {
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
}
p { margin: 0 0 var(--sp-3); }
a { color: var(--c-brand); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-brand-hover); }
input, select, textarea, button {
font-family: var(--f-body);
font-size: var(--fs-base);
}
/* ═══════════════════════════════════════════════════════
COMPONENT TOKENS — apply to existing theme classes
═══════════════════════════════════════════════════════ */
/* Page background */
body, body.woocommerce, body.woocommerce-page, body.home, body.archive {
background: var(--c-bg);
}
/* ── Header ─────────────────────────────────────────── */
#ms-header-main { background: var(--c-surface); box-shadow: var(--shadow-sm); }
/* ── Trust bar ──────────────────────────────────────── */
#ms-topbar { font-family: var(--f-body); font-size: var(--fs-sm); }
.ms-tb-item { font-family: var(--f-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
/* ── Navigation ─────────────────────────────────────── */
.ms-nav a, .ms-main-nav a {
font-family: var(--f-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text);
}
.ms-nav a:hover, .ms-main-nav a:hover { color: var(--c-brand); }
/* ── Product cards ──────────────────────────────────── */
.ms-product-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.ms-product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pc-name {
font-family: var(--f-body);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--c-text);
line-height: var(--lh-snug);
}
.pc-name:hover { color: var(--c-brand); }
/* ── Prices ───────────────────────────────────────────────────
IMPORTANT: .woocommerce-Price-amount must NOT be in the same
rule as .new-price — it also appears inside .old-price and
would override the gray/strikethrough with green.
────────────────────────────────────────────────────────────── */
.pc-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
}
.new-price {
font-family: var(--f-body);
font-size: var(--fs-md);
font-weight: var(--fw-extrabold);
color: var(--c-green);
}
/* Old/regular/crossed price — gray + line-through */
.old-price {
font-size: var(--fs-sm) !important;
font-weight: var(--fw-normal) !important;
color: var(--c-text-3) !important;
text-decoration: line-through !important;
opacity: .75;
}
/* Inner WC span inside old-price must NOT override parent color */
.old-price .woocommerce-Price-amount,
.old-price .woocommerce-Price-currencySymbol,
.old-price bdi {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
text-decoration: inherit !important;
}
/* Inner WC span for new/sale price */
.new-price .woocommerce-Price-amount,
.new-price .woocommerce-Price-currencySymbol,
.new-price bdi {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
}
/* WooCommerce native del/ins price (single product page + loops) */
.woocommerce .price del,
.woocommerce-page .price del,
.woocommerce span.price del,
.woocommerce div.product .price del {
font-size: var(--fs-sm) !important;
font-weight: var(--fw-normal) !important;
color: var(--c-text-3) !important;
opacity: .75 !important;
text-decoration: line-through !important;
}
.woocommerce .price del .woocommerce-Price-amount,
.woocommerce-page .price del .woocommerce-Price-amount {
color: inherit !important;
}
.woocommerce .price ins,
.woocommerce-page .price ins,
.woocommerce span.price ins,
.woocommerce div.product .price ins {
font-weight: var(--fw-extrabold) !important;
color: var(--c-green) !important;
text-decoration: none !important;
background: none !important;
font-size: var(--fs-xl) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.pc-badge-sale {
font-family: var(--f-body); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
background: var(--c-orange-light); color: var(--c-orange);
border: 1px solid var(--c-orange-border); border-radius: var(--r-full); padding: 2px 8px;
}
.pc-qty-box, .ms-qty-per-box {
font-family: var(--f-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
background: var(--c-green-light); color: var(--c-green);
border: 1px solid var(--c-green-border); border-radius: var(--r-full); padding: 2px 9px;
}
/* ── Buttons ─────────────────────────────────────────── */
.pc-add-to-cart, .ms-ajax-cart,
button.single_add_to_cart_button,
.woocommerce a.button, .woocommerce button.button {
font-family: var(--f-body) !important;
font-size: var(--fs-sm) !important;
font-weight: var(--fw-semibold) !important;
}
/* ── Section titles ─────────────────────────────────── */
.ms-sec-title, .ms-section-title {
font-family: var(--f-heading); font-weight: var(--fw-bold); color: var(--c-text);
}
/* ── Breadcrumb ─────────────────────────────────────── */
.ms-bc-simple, .woocommerce-breadcrumb {
font-family: var(--f-body); font-size: var(--fs-sm); color: var(--c-text-3);
}
.ms-bc-simple a, .woocommerce-breadcrumb a { color: var(--c-green); }
/* ── Single product ─────────────────────────────────── */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-family: var(--f-body) !important;
font-size: var(--fs-2xl) !important;
font-weight: var(--fw-extrabold) !important;
color: var(--c-green) !important;
}
.woocommerce div.product .product_title {
font-family: var(--f-heading); font-weight: var(--fw-extrabold);
}
/* ── Form elements ──────────────────────────────────── */
label, .woocommerce-checkout label, .woocommerce-account label {
font-family: var(--f-body); font-size: var(--fs-sm);
font-weight: var(--fw-semibold); color: var(--c-text-2);
}
/* ── Footer ─────────────────────────────────────────── */
.ms-footer-title {
font-family: var(--f-body); font-size: var(--fs-xs);
font-weight: var(--fw-extrabold); letter-spacing:.05em; text-transform:uppercase;
}
.ms-footer-links a { font-family: var(--f-body); font-size: var(--fs-sm); }
/* ── Composition pages ──────────────────────────────── */
.ms-comp-archive-title { font-family: var(--f-heading); font-weight: var(--fw-extrabold); }
.ms-comp-section-title { font-family: var(--f-body); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.ms-comp-section-body { font-family: var(--f-body); font-size: var(--fs-sm); color: var(--c-text-2); line-height: var(--lh-loose); }
/* MediShop v22 — UI Components (scroll-top, flyout, toast, search results) */
#ms-scroll-top{position:fixed;bottom:24px;right:24px;width:42px;height:42px;border-radius:50%;background:#009639;color:#fff;border:none;font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:9990;box-shadow:0 3px 10px rgba(0,0,0,.25);}
#ms-scroll-top.visible{opacity:1;pointer-events:auto;}
#ms-scroll-top:hover{background:#007a2f;transform:translateY(-2px);}
@media(max-width:700px){#ms-scroll-top{display:none!important;}}
#ms-cart-flyout{position:fixed;bottom:80px;right:20px;z-index:9995;background:#009639;color:#fff;border-radius:12px;padding:14px 18px;box-shadow:0 4px 20px rgba(0,0,0,.2);transform:translateY(20px) scale(.95);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.34,1.56,.64,1);}
#ms-cart-flyout.visible{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
.ms-flyout-inner{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;}
.ms-flyout-link{color:#fff;text-decoration:none;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:6px;}
.ms-flyout-close{background:none;border:none;color:#fff;cursor:pointer;font-size:16px;padding:0;line-height:1;}
/* Urgency badge */
.ms-urgency-badge{display:flex;align-items:center;gap:6px;font-size:12px;color:#e85d04;background:#fff8f5;border:1px solid #ffd0b5;border-radius:6px;padding:7px 12px;margin-top:12px;font-weight:600;}
.ms-urg-dot{width:8px;height:8px;border-radius:50%;background:#e85d04;display:inline-block;animation:ms-pulse 1.2s infinite;}
@keyframes ms-pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* Search results */
#ms-search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:9999;max-height:360px;overflow-y:auto;display:none;}
#ms-search-results.open{display:block;}
.ms-sr-item{display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:#222;border-bottom:1px solid #f0f0f0;transition:background .15s;}
.ms-sr-item:hover,.ms-sr-item.active{background:#f0fdf4;}
.ms-sr-item img{width:40px;height:40px;object-fit:contain;border-radius:4px;border:1px solid #eee;}
.ms-sr-no-img{font-size:24px;width:40px;text-align:center;}
.ms-sr-name{font-size:13px;font-weight:600;display:block;}
.ms-sr-name mark{background:#fff3cd;padding:0 2px;border-radius:2px;}
.ms-sr-price{font-size:12px;color:#009639;font-weight:700;}
.ms-sr-view-all{display:block;padding:10px 14px;font-size:12px;color:#009639;text-decoration:none;background:#f9fafb;border-top:1px solid #e8e8e8;font-weight:600;}
.ms-sr-view-all:hover{background:#f0fdf4;}
.ms-sr-empty{padding:14px;font-size:13px;color:#999;text-align:center;}
/* Spinner in add-to-cart button */
.ms-btn-spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:ms-spin .7s linear infinite;}
@keyframes ms-spin{to{transform:rotate(360deg)}}
/* Cart count pulse */
@keyframes ms-cart-pulse{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}
.ms-cart-pulse{animation:ms-cart-pulse .4s ease;}
/* Toast */
.ms-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:12px 22px;border-radius:8px;font-size:13px;font-weight:600;z-index:99999;opacity:0;transition:all .35s;pointer-events:none;white-space:nowrap;}
.ms-toast.visible{opacity:1;transform:translateX(-50%) translateY(0);}
.ms-toast-success{background:#009639;}
.ms-toast-error{background:#e53935;}/*
* MediShop — medishop-fixes.css (v19.2 — Full Root-Cause Fix)
* Loaded after style.min.css via functions.php
*
* ROOT CAUSES FIXED:
*
* CART PAGE shrinks because:
* 1. style.min.css: .woocommerce-cart .woocommerce {padding:20px}
* AND .ms-cart-wrap {padding:20px} = double-box, 40px eaten per side.
* 2. style.min.css late block: table.shop_table {table-layout:fixed}
* → "IMAG E" column-wrap bug (overrides our earlier auto rule).
* 3. .cart-collaterals .cart_totals {float:right; width:42%} = tiny+detached.
* 4. .ms-layout-2col-left fixed 185px sidebar = cart column too narrow.
*
* CHECKOUT PAGE shrinks because:
* 5. .ms-co-wrap has no explicit width, collapses inside overflow:hidden
* #ms-page-wrap. The grid clips content.
* 6. .ms-co-grid has no defensive min-width:0 on children.
*
* DUPLICATE CONFLICTS also fixed:
* 7. #ms-header defined twice (3px then 1px border).
* 8. .ms-checkout-steps defined twice with counter-reset conflict.
* 9. .ms-cart-btn defined 3× (inconsistent padding/radius).
* 10. .ms-slide has two completely different systems in style.min.css.
*/
/* ══════════════════════════════════════════════════
FIX 1 — HERO SLIDER: button not clipped
══════════════════════════════════════════════════ */
.ms-slider-wrap { overflow: hidden !important; }
.ms-slider { overflow: hidden !important; }
.ms-slide {
display: none;
position: relative !important;
min-height: 300px;
padding-bottom: 32px !important;
align-items: center;
overflow: hidden;
}
.ms-slide.active { display: flex; }
/* LCP fix: slide bg is now a real ![]()
so browsers can preload it.
Position it to fill the slide exactly like background-image did. */
.ms-slide-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
display: block;
}
.ms-slide-text { padding-bottom: 20px !important; position: relative; z-index: 2; }
.ms-slide-btn {
position: relative;
z-index: 5;
display: inline-block !important;
white-space: nowrap;
}
@media (max-width: 600px) {
.ms-slide { min-height: 200px; padding-bottom: 28px !important; }
.ms-slide-text { padding: 16px 16px 20px !important; }
.ms-slide-btn { font-size: 11px !important; padding: 8px 16px !important; }
}
/* ══════════════════════════════════════════════════
FIX 2 — CART PAGE: Remove double-box padding
Root: .woocommerce-cart .woocommerce {padding:20px}
+ .ms-cart-wrap {padding:20px} = 40px eaten per side
══════════════════════════════════════════════════ */
.woocommerce-cart .woocommerce {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-x: visible !important;
}
.woocommerce-cart .ms-cart-wrap {
padding: 20px !important;
background: #fff !important;
border: 1px solid var(--ms-border, #ddd) !important;
border-radius: var(--ms-radius, 4px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* ══════════════════════════════════════════════════
FIX 3 — CART TABLE: Fix table-layout:fixed conflict
Root: style.min.css late block sets
.woocommerce table.shop_table {table-layout:fixed}
which causes "IMAG E" column-wrap bug.
══════════════════════════════════════════════════ */
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart .woocommerce table.cart {
width: 100% !important;
table-layout: auto !important;
border-collapse: collapse !important;
word-break: normal !important;
}
.woocommerce-cart table.cart thead th {
padding: 10px 14px !important;
white-space: nowrap !important;
}
.woocommerce-cart table.cart tbody td {
padding: 12px 14px !important;
vertical-align: middle !important;
}
.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail { width: 80px !important; }
.woocommerce-cart table.cart .product-thumbnail img {
width: 64px !important;
height: 64px !important;
object-fit: contain !important;
}
.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart td.product-remove {
width: 36px !important;
text-align: center !important;
}
/* ══════════════════════════════════════════════════
FIX 4 — CART TOTALS: Remove float:right; width:42%
Root: .woocommerce .cart-collaterals .cart_totals
{float:right; width:42%} — broken at any sidebar width
══════════════════════════════════════════════════ */
.woocommerce-cart .cart-collaterals {
width: 100% !important;
float: none !important;
clear: both !important;
margin-top: 20px !important;
overflow: hidden !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
float: none !important;
width: 100% !important;
max-width: 460px !important;
margin-left: auto !important;
margin-right: 0 !important;
background: #fff !important;
border: 1px solid var(--ms-border, #ddd) !important;
border-radius: var(--ms-radius, 4px) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.woocommerce-cart .cart_totals table {
width: 100% !important;
table-layout: auto !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
padding: 10px 16px !important;
word-break: break-word;
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 14px 16px 16px !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
display: block !important;
max-width: 100% !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* ══════════════════════════════════════════════════
FIX 5 — CART COUPON ROW: flex wrap
══════════════════════════════════════════════════ */
.woocommerce-cart .ms-cart-actions-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
}
.woocommerce-cart .ms-cart-actions-row .coupon {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.woocommerce-cart .ms-cart-actions-row .coupon input.input-text {
min-width: 140px !important;
padding: 8px 10px !important;
}
.ms-cart-continue {
margin-top: 20px;
padding-top: 14px;
border-top: 1px solid var(--ms-border, #ddd);
}
/* ══════════════════════════════════════════════════
FIX 6 — CART GRID: correct sidebar proportions
Root: .ms-cart .ms-layout-2col-left inherits 185px
sidebar which is too wide at mid breakpoints
══════════════════════════════════════════════════ */
.woocommerce-cart .ms-layout-2col-left {
display: grid !important;
grid-template-columns: 185px 1fr !important;
gap: 16px !important;
}
@media (max-width: 1024px) {
.woocommerce-cart .ms-layout-2col-left {
grid-template-columns: 160px 1fr !important;
}
}
@media (max-width: 900px) {
.woocommerce-cart .ms-layout-2col-left {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.woocommerce-cart .ms-left-sidebar { order: 2 !important; width: 100% !important; }
.woocommerce-cart .ms-main { order: 1 !important; width: 100% !important; }
}
@media (max-width: 680px) {
.woocommerce-cart .ms-left-sidebar { display: none !important; }
}
/* ══════════════════════════════════════════════════
FIX 7 — CHECKOUT PAGE: ms-co-wrap container width
Root: .ms-co-wrap has no explicit width and collapses
inside overflow:hidden #ms-page-wrap
══════════════════════════════════════════════════ */
.woocommerce-checkout .ms-co-wrap {
width: 100% !important;
max-width: 1000px !important;
margin: 0 auto !important;
padding: 20px 16px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.woocommerce-checkout .ms-co-grid {
display: grid !important;
grid-template-columns: 1fr 340px !important;
gap: 20px !important;
align-items: start !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Both columns must not overflow their grid track */
.woocommerce-checkout .ms-co-grid > div {
min-width: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.woocommerce-checkout .ms-co-card {
background: #fff !important;
border: 1px solid var(--ms-border, #ddd) !important;
border-radius: 10px !important;
padding: 20px !important;
margin-bottom: 16px !important;
box-sizing: border-box !important;
width: 100% !important;
overflow-x: hidden !important;
}
/* All inputs full-width */
.woocommerce-checkout .ms-co-fld input,
.woocommerce-checkout .ms-co-fld select,
.woocommerce-checkout .ms-co-fld textarea {
width: 100% !important;
box-sizing: border-box !important;
}
/* Two-field row */
.woocommerce-checkout .ms-co-row2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
/* Checkout steps */
.woocommerce-checkout .ms-co-steps {
display: flex !important;
align-items: center !important;
background: #fff !important;
border: 1px solid var(--ms-border, #ddd) !important;
border-radius: var(--ms-radius, 4px) !important;
overflow: hidden !important;
margin-bottom: 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.woocommerce-checkout .ms-co-step {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 10px 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--ms-text-light, #888) !important;
background: #f9f9f9 !important;
border-right: 1px solid var(--ms-border, #ddd) !important;
text-align: center !important;
white-space: nowrap !important;
}
.woocommerce-checkout .ms-co-step:last-child { border-right: none !important; }
.woocommerce-checkout .ms-co-step.active { background: #fff !important; color: var(--ms-green, #5a9e2f) !important; }
.woocommerce-checkout .ms-co-step.done { color: var(--ms-green, #5a9e2f) !important; }
.woocommerce-checkout .ms-co-step .snum {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important; height: 20px !important;
border-radius: 50% !important;
background: var(--ms-border, #ddd) !important;
color: var(--ms-text-mid, #555) !important;
font-size: 10px !important; font-weight: 800 !important;
flex-shrink: 0 !important;
}
.woocommerce-checkout .ms-co-step.active .snum,
.woocommerce-checkout .ms-co-step.done .snum {
background: var(--ms-green, #5a9e2f) !important;
color: #fff !important;
}
/* Checkout responsive */
@media (max-width: 820px) {
.woocommerce-checkout .ms-co-grid { grid-template-columns: 1fr !important; }
.woocommerce-checkout .ms-co-grid > div:last-child { order: -1 !important; }
}
@media (max-width: 700px) {
.woocommerce-checkout .ms-co-wrap { padding: 10px 10px 60px !important; }
.woocommerce-checkout .ms-co-row2 { grid-template-columns: 1fr !important; }
.woocommerce-checkout .ms-co-step span:not(.snum) { display: none !important; }
.woocommerce-checkout .ms-co-card { padding: 14px 12px !important; }
}
@media (max-width: 480px) {
.woocommerce-checkout .ms-co-wrap { padding: 8px 8px 60px !important; }
}
/* ══════════════════════════════════════════════════
FIX 8 — CHECKOUT: shipping row always fully visible
══════════════════════════════════════════════════ */
.woocommerce-checkout-review-order-table .shipping td,
.woocommerce-checkout-review-order-table .shipping th {
display: table-cell !important;
}
/* ══════════════════════════════════════════════════
FIX 9 — DUPLICATE: #ms-header defined twice
Root: style.min.css has border-bottom:3px solid green
then immediately overrides with border-bottom:1px solid border.
Canonicalise to the 1px version.
══════════════════════════════════════════════════ */
#ms-header {
border-bottom: 1px solid var(--ms-border, #ddd) !important;
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
}
/* ══════════════════════════════════════════════════
FIX 10 — DUPLICATE: .ms-cart-btn defined 3 times
Root: 3 conflicting definitions (6px / 8px / 6px radius,
8px-14px / 9px-16px / 10px-18px padding).
Canonicalise to one clean definition.
══════════════════════════════════════════════════ */
.ms-cart-btn {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
background: var(--ms-orange, #e87722) !important;
color: #fff !important;
border-radius: 6px !important;
padding: 9px 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, #c96010) !important;
transform: translateY(-1px) !important;
color: #fff !important;
}
.ms-cart-svg { width: 20px; height: 20px; }
.ms-cart-label { display: inline; font-weight: 700; }
.ms-cart-count {
background: #fff;
color: var(--ms-orange, #e87722);
border-radius: 50%;
min-width: 20px; height: 20px;
font-size: 11px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1; padding: 0 3px;
}
@media (max-width: 600px) { .ms-cart-label { display: none !important; } }
/* ══════════════════════════════════════════════════
FIX 11 — DUPLICATE: .ms-checkout-steps conflict
Root: defined twice in style.min.css — once with
counter-reset:steps, once without. The counter-reset
adds a broken CSS counter that interferes with ::after
content on .ms-step. Clean it up for cart page only.
══════════════════════════════════════════════════ */
.woocommerce-cart .ms-checkout-steps {
display: flex !important;
align-items: center !important;
margin-bottom: 20px !important;
background: #fff !important;
border: 1px solid var(--ms-border, #ddd) !important;
border-radius: var(--ms-radius, 4px) !important;
overflow: hidden !important;
counter-reset: unset !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ══════════════════════════════════════════════════
FIX 12 — SAFETY NET: prevent #ms-page-wrap overflow:hidden
from clipping cart/checkout content
══════════════════════════════════════════════════ */
.woocommerce-cart #ms-page-wrap,
.woocommerce-checkout #ms-page-wrap {
overflow: visible !important;
}
/* Restore the visible box-shadow clipping by keeping inner scroll */
.woocommerce-cart #ms-page-wrap > *,
.woocommerce-checkout #ms-page-wrap > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ══════════════════════════════════════════════════
FIX 13 — WooCommerce notices: empty wrappers
══════════════════════════════════════════════════ */
.woocommerce-page .woocommerce-notices-wrapper:empty,
.woocommerce .woocommerce-notices-wrapper:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ══════════════════════════════════════════════════
FIX 14 — BUY NOW button (dual-button card layout)
══════════════════════════════════════════════════ */
.ms-card-btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.ms-card-btns .pc-add-to-cart,
.ms-card-btns .pc-buy-now {
display: block;
width: 100%;
border: none;
border-radius: var(--ms-radius, 4px);
padding: 7px 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
cursor: pointer;
text-align: center;
transition: background 0.18s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ms-card-btns .pc-add-to-cart {
background: var(--ms-green, #5a9e2f);
color: #fff !important;
}
.ms-card-btns .pc-add-to-cart:hover { background: var(--ms-green-dark, #46801f); }
.ms-card-btns .pc-buy-now {
background: var(--ms-orange, #e87722);
color: #fff !important;
}
.ms-card-btns .pc-buy-now:hover { background: var(--ms-orange-dark, #c96010); }
/* loading state */
.pc-buy-now.loading { opacity: 0.8; cursor: wait; pointer-events: none; }
/* Single product Buy Now */
.ms-single-buy-now-wrap { margin-top: 20px; }
.ms-single-buy-now {
display: inline-block;
background: var(--ms-orange, #e87722);
color: #fff !important;
border: none;
border-radius: var(--ms-radius, 4px);
padding: 11px 28px;
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: background 0.18s;
width: 100%;
text-align: center;
}
.ms-single-buy-now:hover { background: var(--ms-orange-dark, #c96010); }
.ms-single-buy-now.loading { opacity: 0.8; cursor: wait; pointer-events: none; }
/* ══════════════════════════════════════════════════
FIX 15 — Urgency row (stock + viewers) responsive
══════════════════════════════════════════════════ */
.ms-urgency-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin: 6px 0 8px;
font-size: 11px;
font-weight: 700;
}
.ms-stock-signal {
color: #e85d04;
background: #fff8f5;
border: 1px solid #ffd0b5;
border-radius: 4px;
padding: 3px 8px;
white-space: nowrap;
flex-shrink: 0;
}
.ms-viewers-signal {
color: #1d4ed8;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 4px;
padding: 3px 8px;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
flex-shrink: 0;
}
.ms-pulse-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #e85d04;
animation: ms-pulse-urgency 1.2s infinite;
flex-shrink: 0;
}
.ms-pulse-dot--blue { background: #1d4ed8; }
@keyframes ms-pulse-urgency {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.4; transform:scale(1.35); }
}
/* Mobile: stack if card is narrow */
@media (max-width: 480px) {
.ms-urgency-row { gap: 4px; }
.ms-stock-signal,
.ms-viewers-signal { font-size: 10px; padding: 2px 6px; }
}
/* ══════════════════════════════════════════════════
FIX 16 — Demand section section-header live pulse
══════════════════════════════════════════════════ */
.ms-section-header--demand {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid var(--ms-green, #5a9e2f);
padding-bottom: 7px;
margin-bottom: 12px;
}
.ms-demand-live {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
color: #e85d04;
}
/* ══════════════════════════════════════════════════
FIX 17 — Cart "Last Minute Buys" widget
══════════════════════════════════════════════════ */
.ms-last-minute-wrap {
margin-top: 20px;
background: #fff;
border: 1px solid var(--ms-border, #ddd);
border-radius: 10px;
overflow: hidden;
}
.ms-lmb-header {
background: var(--ms-orange, #e87722);
color: #fff;
padding: 10px 16px;
font-size: 13px;
font-weight: 800;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
}
.ms-lmb-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.ms-lmb-item {
padding: 14px 12px;
border-right: 1px solid var(--ms-border, #ddd);
border-bottom: 1px solid var(--ms-border, #ddd);
text-align: center;
position: relative;
}
.ms-lmb-item:nth-child(3n) { border-right: none; }
.ms-lmb-item:nth-last-child(-n+3) { border-bottom: none; }
.ms-lmb-img {
width: 80px; height: 80px;
object-fit: contain;
margin: 0 auto 8px;
display: block;
border: 1px solid var(--ms-border-light, #eee);
border-radius: 4px;
background: #fafafa;
}
.ms-lmb-name {
font-size: 11px;
font-weight: 600;
color: var(--ms-text, #333);
display: block;
margin-bottom: 4px;
line-height: 1.35;
}
.ms-lmb-price {
font-size: 13px;
font-weight: 800;
color: var(--ms-green, #5a9e2f);
display: block;
margin-bottom: 8px;
}
.ms-lmb-add {
display: block;
width: 100%;
background: var(--ms-green, #5a9e2f);
color: #fff !important;
border: none;
border-radius: 4px;
padding: 6px 8px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s;
}
.ms-lmb-add:hover { background: var(--ms-green-dark, #46801f); }
@media (max-width: 600px) {
.ms-lmb-grid { grid-template-columns: repeat(2, 1fr); }
.ms-lmb-item:nth-child(3n) { border-right: 1px solid var(--ms-border,#ddd); }
.ms-lmb-item:nth-child(2n) { border-right: none; }
}
/* ══════════════════════════════════════════════════
FIX 18 — Slider: full image + visible buttons
══════════════════════════════════════════════════ */
.ms-slider-wrap {
position: relative !important;
overflow: hidden !important;
border-radius: 8px;
margin-bottom: 14px;
}
.ms-slider {
position: relative !important;
overflow: hidden !important;
min-height: 280px;
}
/* Slide: full background cover */
.ms-slide {
display: none !important;
position: relative !important;
min-height: 280px;
overflow: hidden;
align-items: center;
}
.ms-slide.active { display: flex !important; }
/* Background image via ![]()
fills the whole slide */
.ms-slide-bg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
z-index: 0 !important;
}
.ms-slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 60%, rgba(0,0,0,.05) 100%);
z-index: 1;
pointer-events: none;
}
.ms-slide-text {
position: relative;
z-index: 2 !important;
padding: 36px 40px;
max-width: 560px;
}
.ms-slide-badge {
display: inline-block;
background: var(--ms-green, #5a9e2f);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 12px;
}
.ms-slide-title {
font-size: 28px;
font-weight: 800;
color: #fff !important;
margin: 0 0 10px;
line-height: 1.2;
text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.ms-slide-sub {
font-size: 14px;
color: rgba(255,255,255,.9) !important;
margin: 0 0 20px;
line-height: 1.6;
}
.ms-slide-btn {
display: inline-block !important;
background: var(--ms-orange, #e87722) !important;
color: #fff !important;
padding: 11px 28px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 14px !important;
text-decoration: none !important;
transition: background .15s !important;
position: relative;
z-index: 3;
}
.ms-slide-btn:hover { background: var(--ms-orange-dark, #c96010) !important; }
/* Prev/next arrows — always visible */
.ms-slider-prev, .ms-slider-next {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
width: 36px !important; height: 36px !important;
background: rgba(255,255,255,.85) !important;
border: none !important;
border-radius: 50% !important;
font-size: 20px !important;
font-weight: 700 !important;
color: #333 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
transition: background .15s !important;
}
.ms-slider-prev { left: 10px !important; }
.ms-slider-next { right: 10px !important; }
.ms-slider-prev:hover, .ms-slider-next:hover {
background: var(--ms-green, #5a9e2f) !important;
color: #fff !important;
}
/* No-image fallback gradient slides */
.ms-slide-1 { background: linear-gradient(135deg, #1a5c1a 0%, #2d8a2d 100%) !important; }
.ms-slide-2 { background: linear-gradient(135deg, #1a3a5c 0%, #2d5a8a 100%) !important; }
.ms-slide-3 { background: linear-gradient(135deg, #5c3a1a 0%, #8a602d 100%) !important; }
@media (max-width: 600px) {
.ms-slider { min-height: 200px; }
.ms-slide { min-height: 200px; }
.ms-slide-text { padding: 20px 16px; }
.ms-slide-title { font-size: 18px !important; }
.ms-slide-sub { font-size: 12px !important; margin-bottom: 14px; }
.ms-slide-btn { font-size: 11px !important; padding: 8px 18px !important; }
.ms-slider-prev { left: 6px !important; }
.ms-slider-next { right: 6px !important; }
}
/* ══════════════════════════════════════════════════
FIX 19 — SEO/Crawlability: product grid anchors
& category navigation visible to bots
══════════════════════════════════════════════════ */
/* Ensure product links are always crawlable */
.ms-product-card .pc-name { display: block !important; }
.ms-product-card .pc-image a { display: flex !important; }
/* Category sidebar always rendered (hidden via CSS on mobile, not display:none in PHP) */
@media (max-width: 680px) {
.ms-left-sidebar { display: none !important; }
}
/* Ensure H1 on every page */
.ms-shop-page-title { font-size: 22px; font-weight: 800; color: var(--ms-green); margin-bottom: 14px; }
/* ══════════════════════════════════════════════════
FIX 20 — Checkout 2-step layout improvements
══════════════════════════════════════════════════ */
/* ─── Checkout buttons ─── */
/* Navigation buttons (Review My Order, Looks Good) — always clickable */
.ms-co-btn {
display: block;
width: 100%;
background: var(--ms-orange, #e87722);
color: #fff;
border: none;
border-radius: 8px;
padding: 14px;
font-size: 15px;
font-weight: 800;
font-family: 'Raleway', sans-serif;
cursor: pointer;
opacity: 1;
pointer-events: all;
transition: background 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ms-co-btn:hover { background: var(--ms-orange-dark, #c96010); }
/* Place Order button — gated, starts disabled */
.ms-co-btn-gated {
display: block;
width: 100%;
background: var(--ms-green, #5a9e2f);
color: #fff;
border: none;
border-radius: 8px;
padding: 14px;
font-size: 15px;
font-weight: 800;
font-family: 'Raleway', sans-serif;
cursor: not-allowed;
opacity: 0.45;
pointer-events: none;
transition: background 0.2s, opacity 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 12px;
}
.ms-co-btn-gated.ready {
opacity: 1;
pointer-events: all;
cursor: pointer;
box-shadow: 0 4px 14px rgba(90,158,47,.35);
}
.ms-co-btn-gated.ready:hover { background: var(--ms-green-dark, #46801f); }
/* Confirm step: shown as a card below the button */
.ms-confirm-step {
display: none;
margin-top: 14px;
background: #f0fdf4;
border: 2px solid var(--ms-green, #5a9e2f);
border-radius: 12px;
padding: 20px;
}
.ms-confirm-step.open { display: block; }
.ms-confirm-title {
font-size: 16px;
font-weight: 800;
color: var(--ms-green, #5a9e2f);
margin: 0 0 14px;
font-family: 'Raleway', sans-serif;
}
.ms-confirm-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border-bottom: 1px solid #d1fae5;
font-size: 13px;
}
.ms-confirm-total {
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: 800;
color: var(--ms-green);
padding-top: 12px;
margin-top: 4px;
}
.ms-place-btn {
display: block;
width: 100%;
background: var(--ms-orange, #e87722);
color: #fff;
border: none;
border-radius: 8px;
padding: 14px;
font-size: 15px;
font-weight: 800;
font-family: 'Raleway', sans-serif;
cursor: pointer;
transition: background 0.2s;
margin-top: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ms-place-btn:hover { background: var(--ms-orange-dark, #c96010); }
.ms-place-btn:disabled { background: #9ca3af; cursor: not-allowed; }
/* Checkout steps bar */
.ms-co-steps {
display: flex;
align-items: center;
background: #fff;
border: 1px solid var(--ms-border, #ddd);
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
.ms-co-step {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 6px;
font-size: 11px;
font-weight: 700;
color: #9ca3af;
background: #f9f9f9;
border-right: 1px solid var(--ms-border, #ddd);
white-space: nowrap;
}
.ms-co-step:last-child { border-right: none; }
.ms-co-step .snum {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: #ddd;
color: #666;
font-size: 10px;
font-weight: 800;
flex-shrink: 0;
}
.ms-co-step.active { color: var(--ms-green); background: #fff; }
.ms-co-step.active .snum { background: var(--ms-green); color: #fff; }
.ms-co-step.done { color: var(--ms-green); }
.ms-co-step.done .snum { background: var(--ms-green); color: #fff; }
@media (max-width: 480px) {
.ms-co-step span:not(.snum) { display: none; }
}
/* ══════════════════════════════════════════════════
FIX 21 — ms-co-grid, ms-co-card, ms-co-row2 styles
══════════════════════════════════════════════════ */
.ms-co-wrap { padding: 0 0 40px; width: 100%; box-sizing: border-box; }
.ms-co-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 20px;
align-items: start;
}
@media (max-width: 860px) {
.ms-co-grid { grid-template-columns: 1fr; }
.ms-co-grid > div:last-child { order: -1; }
}
.ms-co-card {
background: #fff;
border: 1px solid var(--ms-border, #ddd);
border-radius: 12px;
padding: 18px 16px;
margin-bottom: 16px;
box-sizing: border-box;
overflow: hidden;
}
.ms-co-title {
font-size: 14px;
font-weight: 800;
color: var(--ms-text, #333);
margin: 0 0 14px;
font-family: 'Raleway', sans-serif;
border-bottom: 2px solid var(--ms-green, #5a9e2f);
padding-bottom: 8px;
}
.ms-co-row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 480px) { .ms-co-row2 { grid-template-columns: 1fr; } }
.ms-co-fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ms-co-fld label { font-size: 12px; font-weight: 600; color: #444; }
.ms-co-fld input,
.ms-co-fld select,
.ms-co-fld textarea {
width: 100% !important;
box-sizing: border-box !important;
border: 1px solid var(--ms-border, #ddd);
border-radius: 6px;
padding: 9px 12px;
font-size: 14px;
color: var(--ms-text, #333);
background: #fff;
transition: border-color 0.2s;
-webkit-appearance: none;
appearance: none;
}
.ms-co-fld input:focus,
.ms-co-fld select:focus,
.ms-co-fld textarea:focus {
border-color: var(--ms-green, #5a9e2f);
outline: none;
box-shadow: 0 0 0 3px rgba(90,158,47,.1);
}
/* WC-generated field wrappers inside co-card */
.ms-co-card .form-row { margin-bottom: 10px; }
.ms-co-card .form-row input.input-text,
.ms-co-card .form-row select,
.ms-co-card .form-row textarea {
width: 100% !important;
box-sizing: border-box !important;
font-size: 14px !important;
-webkit-appearance: none !important;
}
/* ══════════════════════════════════════════════════
FIX 22 — Order summary card (right column)
══════════════════════════════════════════════════ */
.ms-oi-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
color: var(--ms-text, #333);
}
.ms-oi-fee {
display: none;
justify-content: space-between;
font-size: 12px;
color: #e87722;
padding: 6px 0;
border-bottom: 1px solid #fef3c7;
}
.ms-oi-total {
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: 800;
color: var(--ms-green, #5a9e2f);
padding: 12px 0 0;
margin-top: 4px;
}
.ms-oi-trust {
margin-top: 12px;
padding: 10px 0 0;
border-top: 1px solid #f0f0f0;
list-style: none !important;
padding-left: 0 !important;
font-size: 12px;
color: #555;
line-height: 2;
}
/* ══════════════════════════════════════════════════
FIX 23 — Payment panels inside checkout
══════════════════════════════════════════════════ */
.ms-pay-opts { display: flex; flex-direction: column; gap: 0; }
.ms-pay-opt {
display: flex;
align-items: center;
gap: 12px;
border: 1.5px solid var(--ms-border, #ddd);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 6px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
background: #fff;
}
.ms-pay-opt.active {
border-color: var(--ms-green, #5a9e2f);
background: #f0fdf4;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
}
.ms-pay-ico {
width: 36px; height: 36px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 13px;
font-weight: 800;
flex-shrink: 0;
}
.ms-pay-name { font-size: 13px; font-weight: 700; margin: 0 0 2px; }
.ms-pay-desc { font-size: 11px; color: #6b7280; margin: 0; }
.ms-pay-radio {
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid #d1d5db;
margin-left: auto;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
}
.ms-pay-radio.on {
border-color: var(--ms-green, #5a9e2f);
background: var(--ms-green, #5a9e2f);
box-shadow: inset 0 0 0 3px #fff;
}
.ms-pay-panel {
display: none;
border: 1.5px solid var(--ms-green, #5a9e2f);
border-top: none;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 14px;
background: #fafffe;
margin-bottom: 6px;
}
.ms-pay-panel.open { display: block; }
.ms-panel-amt {
display: flex;
justify-content: space-between;
align-items: center;
background: #f0fdf4;
border: 1px solid #b7d98a;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 12px;
font-size: 13px;
}
.ms-panel-amt strong { font-size: 18px; font-weight: 800; color: var(--ms-green); }
.ms-copy-row {
display: flex;
align-items: center;
gap: 8px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 8px 12px;
margin-bottom: 10px;
}
.ms-copy-val { font-size: 13px; font-weight: 600; flex: 1; word-break: break-all; }
.ms-copy-btn {
background: #e5e7eb;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s;
}
.ms-copy-btn:hover { background: var(--ms-green-xlight, #e8f5d8); }
.ms-steps-list {
list-style: decimal !important;
padding-left: 18px !important;
font-size: 12px;
color: #374151;
line-height: 1.8;
margin: 10px 0;
}
.ms-info-box {
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
margin-bottom: 10px;
}
.ms-info-blue { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.ms-info-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.ms-name-note {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
color: #92400e;
margin: 8px 0;
}
.ms-upload-label { font-size: 12px; font-weight: 700; color: #374151; display: block; margin-bottom: 6px; }
.ms-upload-label span { color: #e53935; }
.ms-upload-zone {
border: 2px dashed #d1d5db;
border-radius: 8px;
padding: 16px;
text-align: center;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
background: #fafafa;
}
.ms-upload-zone:hover { border-color: var(--ms-green); background: #f0fdf4; }
.ms-upload-ok { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #16a34a; background: #f0fdf4; border: 1px solid #86efac; border-radius: 6px; padding: 8px 12px; }
.ms-dzone {
border: 2px dashed #d1d5db;
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
background: #fafafa;
transition: border-color 0.15s;
}
.ms-dzone:hover { border-color: var(--ms-green); background: #f0fdf4; }
.ms-dzone-icon { font-size: 28px; margin-bottom: 8px; }
.ms-fok { display: none; align-items: center; gap: 6px; font-size: 13px; color: #16a34a; font-weight: 600; padding: 8px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 6px; }
.ms-rx-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ms-rx-opt {
border: 2px solid #e5e7eb;
border-radius: 10px;
padding: 14px 12px;
text-align: center;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.ms-rx-opt.active { border-color: var(--ms-green); background: #f0fdf4; }
.ms-rx-opt.fee-active { border-color: var(--ms-orange); background: #fff8f0; }
.ms-rx-icon { font-size: 24px; margin-bottom: 6px; }
.ms-rx-title { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.ms-rx-sub { font-size: 11px; color: #6b7280; margin: 0; }
.ms-rx-sub.fee { color: var(--ms-orange); font-weight: 700; }
.ms-fee-banner {
display: none;
background: #fff8f0;
border: 1.5px solid #ffd0b5;
border-radius: 8px;
padding: 10px 14px;
font-size: 12px;
color: #92400e;
margin: 8px 0;
}
.ms-disclaimer { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; font-size: 12px; color: #374151; margin-top: 12px; }
.ms-disc-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin-top: 8px; font-size: 12px; }
.ms-disc-check input { flex-shrink: 0; margin-top: 2px; accent-color: var(--ms-green); width: 15px; height: 15px; }
.ms-bank-info-table { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.ms-bank-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #f0f0f0; font-size: 12px; }
.ms-bank-row:last-child { border-bottom: none; }
.ms-bank-label { color: #6b7280; min-width: 120px; flex-shrink: 0; }
.ms-bank-val { font-weight: 600; flex: 1; word-break: break-all; display: flex; align-items: center; gap: 8px; }
.ms-bank-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 500px) { .ms-bank-fields { grid-template-columns: 1fr; } .ms-rx-opts { grid-template-columns: 1fr; } }
.ms-crypto-qr-wrap { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.ms-crypto-qr-img img { width: 120px; height: 120px; border: 1px solid #e5e7eb; border-radius: 6px; }
.ms-crypto-addr-wrap { flex: 1; }
.ms-scan-divider { text-align: center; font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; margin: 8px 0; }
.ms-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: ms-spin-co .7s linear infinite; margin-right: 6px; vertical-align: middle; }
@keyframes ms-spin-co { to { transform: rotate(360deg); } }
/* ================================================================
FIX: Mobile nav menu z-index — must sit above WC product gallery
zoom trigger and image elements when hamburger menu is open.
================================================================ */
@media (max-width: 768px) {
#ms-nav-menu {
z-index: 300 !important;
}
/* When nav is open, push gallery elements behind the menu */
body.ms-nav-open .woocommerce-product-gallery__trigger,
body.ms-nav-open .woocommerce-product-gallery__image,
body.ms-nav-open .woocommerce-product-gallery,
body.ms-nav-open .ms-single-gallery {
z-index: 0 !important;
position: relative;
}
}
/* ================================================================
FIX: Kill WooCommerce blockUI overlay on custom checkout
wc-checkout.js wraps form.woocommerce-checkout with a blockUI
overlay that makes buttons appear greyed-out and unclickable.
wc-checkout is now dequeued in functions.php, but this CSS
acts as a safety net in case it loads from another plugin.
================================================================ */
.woocommerce-checkout .blockUI.blockOverlay,
.woocommerce-checkout form.woocommerce-checkout .blockUI.blockOverlay,
.woocommerce-checkout .blockUI,
form.woocommerce-checkout .blockUI,
form.woocommerce-checkout > .blockUI {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* Ensure the checkout form itself is never blocked */
form.woocommerce-checkout {
position: relative;
z-index: 1;
}
/* Ensure ms-co-btn (Review + Pay navigation buttons) are ALWAYS fully clickable */
#msPayBtn,
#msReviewBtn {
position: relative;
z-index: 100;
pointer-events: all !important;
opacity: 1 !important;
cursor: pointer !important;
display: block !important;
visibility: visible !important;
}
/* ── Homepage H1 — SEO visible but visually subtle ── */
/* Must be visible (not screen-reader-text) for Google. Styled as a small
breadcrumb-style label above the slider so it doesn't disrupt the design. */
.ms-hp-h1 {
font-family: 'Open Sans', sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--ms-text-light, #888);
letter-spacing: 0.04em;
margin: 6px 0 8px;
padding: 0;
line-height: 1.4;
text-transform: none;
}
/* ================================================================
v25 FIXES — All prompt fixes + improvements
================================================================ */
/* --- Wishlist & Compare: hide sitewide --- */
.pc-wishlist,
.yith-wcwl-add-to-wishlist,
.yith-wcwl-wishlist-fragment,
.compare-button,
.yith-woocompare-widget,
a.compare,
.add_to_wishlist,
.woosw-btn { display: none !important; }
/* --- Logo tagline: always visible --- */
.ms-logo-tagline { display: block; font-size: 11px; color: #888; font-weight: 400; margin-top: 1px; line-height: 1.3; }
/* --- Trust bar items: inline-flex alignment --- */
.ms-tb-item { display: inline-flex; align-items: center; gap: 5px; }
/* ================================================================
PROMPT 1 — Category & Brand: stack vertically, 5px gap, left-align
================================================================ */
.ms-product-meta-row {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
margin: 8px 0 !important;
align-items: flex-start !important;
}
.ms-meta-item {
display: flex !important;
align-items: center !important;
gap: 6px !important;
text-align: left !important;
}
/* ================================================================
PROMPT 3 — Buy Now button: text + payment icon in one row
================================================================ */
/* ── Add to Cart + Buy Now: clear visual separation ── */
/* WooCommerce's form.cart (qty + Add to Cart button) */
.woocommerce div.product form.cart {
margin-bottom: 0 !important;
}
/* ── Add to Cart button ── */
.woocommerce div.product form.cart {
margin-bottom: 0 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 15px 24px !important;
font-size: 15px !important;
font-weight: 800 !important;
border-radius: 8px !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
box-shadow: 0 2px 8px rgba(0,128,0,0.18) !important;
transition: background 0.15s, box-shadow 0.15s !important;
margin-bottom: 0 !important;
}
/* ── OR divider between Add to Cart and Buy Now ── */
.ms-single-buy-now-wrap {
margin-top: 0 !important;
margin-bottom: 4px !important;
position: relative;
}
.ms-single-buy-now-wrap::before {
content: '';
display: block;
height: 1px;
background: #e2e8f0;
margin: 18px 0 16px;
}
.ms-single-buy-now-wrap::after {
content: 'or buy directly';
display: block;
text-align: center;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: -26px;
margin-bottom: 14px;
background: #fff;
width: fit-content;
padding: 0 12px;
margin-left: auto;
margin-right: auto;
}
.ms-single-buy-now {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
padding: 13px 20px !important;
background: #e8530a !important;
color: #fff !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 800 !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: background 0.15s !important;
}
.ms-single-buy-now:hover { background: #c94208 !important; color: #fff !important; }
.ms-buy-now-text {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.ms-buy-now-pay-img {
height: 28px !important;
width: auto !important;
display: inline-block !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
/* ================================================================
PROMPT 4 — WhatsApp: suppress CSS-generated icons
================================================================ */
.ms-wa-btn::before,
.ms-wa-btn::after,
.ms-pwa-btn::before,
.ms-pwa-btn::after,
.ms-btn-wa::before,
.ms-btn-wa::after {
content: none !important;
display: none !important;
}
/* ================================================================
PROMPT 5 — Star ratings: force visible
================================================================ */
.woocommerce-product-rating {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.star-rating {
display: inline-block !important;
visibility: visible !important;
overflow: hidden !important;
}
/* ================================================================
PROMPT 6 — Cart: payment icon single image, inline below button
================================================================ */
.ms-checkout-pay-icons {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 8px !important;
padding: 4px 0 !important;
}
.ms-cart-pay-img {
height: 32px !important;
width: auto !important;
display: block !important;
}
/* ================================================================
Cart totals: proper spacing and full width
================================================================ */
.woocommerce-cart .wc-proceed-to-checkout {
padding: 14px 16px 16px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: center !important;
padding: 14px !important;
font-size: 15px !important;
font-weight: 800 !important;
background: var(--ms-green, #5a9e2f) !important;
color: #fff !important;
border-radius: 8px !important;
border: none !important;
text-decoration: none !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
background: var(--ms-green-dark, #46801f) !important;
}
/* Cart totals table — fix narrow rendering */
.woocommerce-cart .cart-collaterals .cart_totals {
float: none !important;
width: 100% !important;
max-width: 460px !important;
margin-left: auto !important;
margin-right: 0 !important;
}
/* ================================================================
Checkout: prominent total display
================================================================ */
.ms-oi-total--prominent {
background: #f0fdf4;
border: 2px solid #86efac;
border-radius: 10px;
padding: 14px 16px !important;
margin-top: 6px;
align-items: center;
}
.ms-oi-total--prominent > span:first-child { font-size: 15px !important; font-weight: 700 !important; color: #111827 !important; }
.ms-oi-total--prominent > span:last-child { font-size: 22px !important; font-weight: 900 !important; color: #166534 !important; }
#reviewPayTotal { font-size: 26px !important; font-weight: 900 !important; color: #166534 !important; }
/* ================================================================
v25.1 — Cart: Proceed to Checkout button — inline payment icons
Layout: [ PROCEED TO CHECKOUT text ] [payment-icon.png]
One row, text left, icon right, vertically centred.
================================================================ */
/* Override WC's default .wc-proceed-to-checkout wrapper padding */
.woocommerce-cart .wc-proceed-to-checkout {
padding: 0 !important;
background: transparent !important;
}
/* The button itself — full-width flex row */
.ms-proceed-btn,
.woocommerce-cart a.checkout-button.ms-proceed-btn,
.woocommerce-cart .checkout-button.ms-proceed-btn {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 14px 20px !important;
background: var(--ms-green, #5a9e2f) !important;
color: #fff !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 800 !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border: none !important;
cursor: pointer !important;
transition: background 0.18s !important;
gap: 12px !important;
margin: 0 !important;
}
.ms-proceed-btn:hover,
.woocommerce-cart a.checkout-button.ms-proceed-btn:hover {
background: var(--ms-green-dark, #46801f) !important;
color: #fff !important;
}
/* Text label — left side */
.ms-proceed-text {
flex: 1 !important;
text-align: left !important;
white-space: nowrap !important;
display: block !important;
}
/* Payment icon — right side */
.ms-proceed-pay-img {
height: 28px !important;
width: auto !important;
display: block !important;
flex-shrink: 0 !important;
opacity: 0.95 !important;
filter: brightness(0) invert(1) !important; /* make it white to match button */
}
/* Fallback: if payment-icon.png is a full-colour image, remove the invert */
/* Comment out the filter line above and uncomment below for colour icons: */
/* .ms-proceed-pay-img { filter: none !important; } */
/* Ensure the WC cart totals box has correct padding */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
padding: 16px !important;
}
/* Payment icon is a colour image — remove invert, add slight background pill */
.ms-proceed-pay-img {
filter: none !important;
background: rgba(255,255,255,0.15) !important;
border-radius: 4px !important;
padding: 2px 6px !important;
height: 26px !important;
}
/* ================================================================
v25.2 — FIXES: Payment icon size on checkout button
================================================================ */
/* --- Fix 1: Payment icon on Proceed to Checkout button --- */
/* Icon was too large (taking ~40% of button). Constrain to a small strip. */
.ms-proceed-pay-img {
height: 22px !important;
width: auto !important;
max-width: 80px !important;
display: block !important;
flex-shrink: 0 !important;
opacity: 1 !important;
filter: none !important;
background: rgba(255,255,255,0.18) !important;
border-radius: 4px !important;
padding: 2px 5px !important;
box-sizing: content-box !important;
}
/* Ensure button proportions stay correct */
.ms-proceed-btn,
.woocommerce-cart a.checkout-button.ms-proceed-btn,
.woocommerce-cart .checkout-button.ms-proceed-btn {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 14px 20px !important;
}
.ms-proceed-text {
flex: 1 !important;
text-align: left !important;
white-space: nowrap !important;
}
/* ================================================================
v25.3 — Override all earlier conflicting checkout-button rules
These come LAST so they win the cascade.
================================================================ */
.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce .wc-proceed-to-checkout {
padding: 0 !important;
background: transparent !important;
text-align: unset !important;
}
/* The actual button — flex row, text left, icon right */
a.checkout-button.ms-proceed-btn,
.woocommerce-cart a.checkout-button.ms-proceed-btn,
.woocommerce a.checkout-button.ms-proceed-btn,
.woocommerce .wc-proceed-to-checkout a.checkout-button.ms-proceed-btn {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 14px 20px !important;
background: var(--ms-green, #5a9e2f) !important;
color: #fff !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
border: none !important;
gap: 12px !important;
margin: 0 !important;
line-height: 1.2 !important;
transition: background 0.18s !important;
}
a.checkout-button.ms-proceed-btn:hover,
.woocommerce-cart a.checkout-button.ms-proceed-btn:hover,
.woocommerce a.checkout-button.ms-proceed-btn:hover {
background: var(--ms-green-dark, #46801f) !important;
color: #fff !important;
}
.ms-proceed-text {
flex: 1 !important;
text-align: left !important;
white-space: nowrap !important;
display: block !important;
}
.ms-proceed-pay-img {
height: 22px !important;
width: auto !important;
max-width: 80px !important;
object-fit: contain !important;
display: block !important;
flex-shrink: 0 !important;
background: rgba(255,255,255,0.18) !important;
border-radius: 4px !important;
padding: 2px 5px !important;
box-sizing: content-box !important;
filter: none !important;
}
/* Cart totals wrapper — give it proper padding */
.woocommerce .cart_totals .wc-proceed-to-checkout,
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
padding: 14px 16px 16px !important;
background: transparent !important;
}
/* ================================================================
Star ratings — v25-proven minimal approach.
WooCommerce handles star font/glyphs via woocommerce-general.css.
We ONLY set color. Never override font-family, content, height, width
or position — those break WC's glyph rendering.
================================================================ */
/* WC native star colour */
.woocommerce .star-rating span::before,
.woocommerce .woocommerce-product-rating .star-rating span::before {
color: #f5a623 !important;
}
/* Product card custom pc-stars (non-WC HTML rendered by content-product.php) */
.ms-product-card .pc-stars,
.ms-product-card .pc-stars * {
display: inline !important;
visibility: visible !important;
}
.ms-product-card .pc-stars {
display: block !important;
font-size: 13px !important;
margin-bottom: 5px !important;
min-height: 18px !important;
}
.ms-product-card .pc-stars .star-full { color: #f5a623 !important; }
.ms-product-card .pc-stars .star-empty { color: #e8c87a !important; }
/* ================================================================
FIX 2 — Payment icon in Proceed to Checkout button
================================================================ */
.ms-buy-now-pay-img {
display: none !important;
}
/* Show the payment icon on the cart Proceed to Checkout button */
.ms-proceed-pay-img {
display: inline-block !important;
height: 28px !important;
max-width: 120px !important;
width: auto !important;
vertical-align: middle !important;
margin-left: 8px !important;
object-fit: contain !important;
}
/* BUY NOW button: full-width without icon */
.ms-single-buy-now {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
}
.ms-single-buy-now .ms-buy-now-text {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* PROCEED TO CHECKOUT button: centred text */
.ms-proceed-btn {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}
/* ================================================================
v25.2 — FIX 5: PROCEED TO CHECKOUT button — payment icon
inline with text, same optical height, no stretching
================================================================ */
.ms-proceed-btn {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
padding: 14px 20px !important;
line-height: 1.3 !important;
}
.ms-proceed-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
}
.ms-proceed-text {
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.ms-proceed-pay-img {
height: 18px !important; /* matches cap-height of 14px bold text */
width: auto !important;
max-width: 90px !important;
object-fit: contain !important;
display: inline-block !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
opacity: 0.92 !important;
filter: brightness(0) invert(1) !important; /* white tint to match button text */
}
@media (max-width: 480px) {
.ms-proceed-pay-img { height: 15px !important; max-width: 70px !important; }
}
/* ================================================================
v26 FIX — WHY PATIENTS CHOOSE: match other section styling,
no separate box/gradient background. Cards remain styled.
================================================================ */
.ms-why-us {
/* Remove box/gradient — blend in with page flow like other sections */
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
/* Section header inside why-us: match .ms-section-header exactly */
.ms-why-us .ms-section-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid var(--ms-green, #5a9e2f) !important;
margin-top: 24px !important;
}
.ms-why-us .ms-section-header h3 {
font-size: 18px !important;
font-weight: 800 !important;
color: #111827 !important;
margin: 0 !important;
font-family: 'Raleway', sans-serif !important;
}
.ms-why-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
margin-top: 0 !important;
margin-bottom: 16px !important;
}
@media (max-width: 768px) {
.ms-why-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
.ms-why-grid { grid-template-columns: 1fr !important; }
}
.ms-why-card {
background: #fff !important;
border-radius: 12px !important;
padding: 24px 18px 20px !important;
text-align: center !important;
border: 1px solid #e8f0ec !important;
transition: transform 0.2s, box-shadow 0.2s !important;
box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.ms-why-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(0,0,0,.09) !important;
}
.ms-why-card h4 {
font-size: 13px !important;
font-weight: 800 !important;
margin: 12px 0 8px !important;
color: #1a2a1a !important;
line-height: 1.35 !important;
text-align: center !important;
}
.ms-why-card p {
font-size: 12px !important;
color: #555 !important;
line-height: 1.6 !important;
margin: 0 !important;
text-align: center !important;
}
/* Icon circle wrappers — each card variant has its own color */
.ms-why-icon-wrap {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
flex-shrink: 0 !important;
}
.ms-why-card--verified .ms-why-icon-wrap { background: #e8f5e9 !important; color: #2e7d32 !important; }
.ms-why-card--ships .ms-why-icon-wrap { background: #e3f2fd !important; color: #1565c0 !important; }
.ms-why-card--discreet .ms-why-icon-wrap { background: #f3e5f5 !important; color: #7b1fa2 !important; }
.ms-why-card--people .ms-why-icon-wrap { background: #fff8e1 !important; color: #f57f17 !important; }
.ms-why-card--price .ms-why-icon-wrap { background: #e0f7fa !important; color: #00838f !important; }
.ms-why-card--customs .ms-why-icon-wrap { background: #fce4ec !important; color: #c62828 !important; }
/* Top border accent per card type */
.ms-why-card--verified { border-top: 3px solid #2e7d32 !important; }
.ms-why-card--ships { border-top: 3px solid #1565c0 !important; }
.ms-why-card--discreet { border-top: 3px solid #7b1fa2 !important; }
.ms-why-card--people { border-top: 3px solid #f57f17 !important; }
.ms-why-card--price { border-top: 3px solid #00838f !important; }
.ms-why-card--customs { border-top: 3px solid #c62828 !important; }
/* ================================================================
v25.2 — FIX 3: MY ACCOUNT page responsive tab nav
================================================================ */
.woocommerce-MyAccount-navigation-link a {
white-space: nowrap !important;
}
@media (max-width: 600px) {
/* My Account tab bar wraps gracefully on mobile */
.ms-my-account-tabs {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* ================================================================
v25.2 — FIX 2: General responsiveness improvements
================================================================ */
/* Product grid — 2 columns on tablet, 1 on mobile */
@media (max-width: 768px) {
.ms-product-grid.cols-3,
.ms-product-grid.cols-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
.ms-demand-section,
.ms-recent-orders-section {
padding: 0 !important;
}
/* Cart totals — full width */
.woocommerce .cart_totals {
width: 100% !important;
float: none !important;
}
/* Single product — stack columns */
.ms-single-product-wrap {
flex-direction: column !important;
}
.ms-single-img-col,
.ms-single-summary-col {
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 480px) {
.ms-product-grid.cols-3,
.ms-product-grid.cols-4 {
grid-template-columns: 1fr !important;
}
/* Header search full width */
#ms-search {
width: 100% !important;
}
/* Trust grid on single product — 1 col */
.ms-product-trust-grid {
grid-template-columns: 1fr !important;
}
/* My Account full padding */
.woocommerce-MyAccount-content {
padding: 16px !important;
}
}
/* ================================================================
v26 FIX — Product grid cards: equal height, no center card
proportion mismatch. Grid rows stretch to tallest card.
================================================================ */
.ms-product-grid {
align-items: stretch !important;
}
.ms-product-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* Image box: fixed height so all cards have the same image area */
.ms-product-card .pc-image {
height: 130px !important;
flex-shrink: 0 !important;
}
/* Name: fixed min-height so short names don't collapse card */
.ms-product-card .pc-name {
min-height: 36px !important;
}
/* Price row: always the same height */
.ms-product-card .pc-price {
min-height: 24px !important;
}
/* Buttons pushed to bottom */
.ms-product-card .ms-card-btns {
margin-top: auto !important;
}
/* Recently ordered / demand section cards too */
.ms-recent-orders-section .ms-product-grid,
.ms-demand-section .ms-product-grid {
align-items: stretch !important;
}
/* ================================================================
v26 FIX — Performance: add will-change only to elements
that animate, avoid layout-thrashing on scroll
================================================================ */
.ms-product-card {
will-change: transform;
contain: layout style;
}
/* Reduce CSS paint cost on large fixed sections */
.ms-why-card {
will-change: transform;
}
/* ================================================================
v25.3 — Payment icon: colour image override
The new image is a colour strip — remove the white-filter
applied by earlier rules so PayPal / USDT / Bank logos show properly
================================================================ */
.ms-proceed-pay-img {
filter: none !important;
display: inline-block !important;
height: 22px !important;
width: auto !important;
max-width: 110px !important;
object-fit: contain !important;
vertical-align: middle !important;
opacity: 1 !important;
background: rgba(255,255,255,0.15) !important;
border-radius: 4px !important;
padding: 2px 5px !important;
box-sizing: content-box !important;
}
@media (max-width: 480px) {
.ms-proceed-pay-img {
height: 16px !important;
max-width: 75px !important;
}
}
/* ================================================================
v26 FIX — Description/Review tabs: robust layout, never broken
Ensures tabs always show correctly regardless of CSS load order
================================================================ */
.ms-single-tabs-wrap .woocommerce-tabs {
background: var(--ms-white, #fff) !important;
border: 1px solid var(--ms-border, #ddd) !important;
border-radius: 4px !important;
overflow: hidden !important;
padding: 0 !important;
}
/* Tab bar */
.ms-single-tabs-wrap .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 16px !important;
background: #f5f5f5 !important;
border-bottom: 2px solid var(--ms-green, #5a9e2f) !important;
list-style: none !important;
gap: 0 !important;
}
/* WC adds ::before pseudo — neutralise it */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
display: none !important;
border: none !important;
content: none !important;
box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: #f0f0f0 !important;
border: 1px solid var(--ms-border, #ddd) !important;
border-bottom: none !important;
border-radius: 4px 4px 0 0 !important;
margin: 0 4px 0 0 !important;
display: inline-block !important;
float: none !important;
position: relative !important;
z-index: 1 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none !important;
border: none !important;
content: none !important;
box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: var(--ms-green, #5a9e2f) !important;
border-color: var(--ms-green, #5a9e2f) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: var(--ms-text, #333) !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 8px 16px !important;
display: block !important;
text-decoration: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #fff !important;
}
/* Tab panels: initial hide + JS-driven show.
woocommerce-general.css is dequeued on some contexts so we replicate
the essential panel visibility rules here so tabs always work correctly.
WC's jQuery tab JS calls .show()/.hide() — we must set the initial state. */
.ms-single-tabs-wrap .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel {
display: none;
}
.ms-single-tabs-wrap .woocommerce-tabs .panel.active,
.woocommerce div.product .woocommerce-tabs .panel.active {
display: block !important;
}
/* Fallback: if WC JS hasn't run yet, show first panel so content is never invisible */
.ms-single-tabs-wrap .woocommerce-tabs .woocommerce-Tabs-panel--description,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--description {
display: block;
}
.ms-single-tabs-wrap .woocommerce-tabs li.active ~ .woocommerce-Tabs-panel--description,
.ms-single-tabs-wrap .woocommerce-tabs li:not(.active) ~ .woocommerce-Tabs-panel--description {
display: none;
}
/* Actual tab panel styles */
.ms-single-tabs-wrap .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel {
padding: 18px 20px !important;
margin: 0 !important;
border: none !important;
background: var(--ms-white, #fff) !important;
font-size: 13px !important;
line-height: 1.7 !important;
color: var(--ms-text, #333) !important;
}
/* ================================================================
v26 FIX — Reviews: star rating in review form always visible
================================================================ */
#review_form .stars {
display: block !important;
visibility: visible !important;
}
#review_form .stars a {
color: var(--ms-orange, #e87722) !important;
display: inline-block !important;
text-indent: 0 !important;
font-size: 1.4em !important;
}
/* Review list stars */
.woocommerce-review__rating .star-rating {
display: inline-block !important;
visibility: visible !important;
}
/* ================================================================
v30 FIXES — Applied 2026-05
================================================================ */
/* ── 1. SKU: hidden on front-end (data still in DOM for SEO) ── */
.woocommerce div.product .sku_wrapper,
.ms-meta-item--sku {
display: none !important;
}
/* ── 2. Product card — tighten spacing between title/rating/price ── */
.ms-product-card .pc-name {
font-size: 13px !important;
line-height: 1.35 !important;
margin: 6px 0 4px !important;
min-height: unset !important;
}
.ms-product-card .pc-stars {
margin: 2px 0 4px !important;
line-height: 1 !important;
}
.ms-product-card .pc-price {
margin: 0 0 8px !important;
min-height: unset !important;
line-height: 1.2 !important;
}
.ms-product-card .pc-price del {
font-size: 11px !important;
opacity: 0.6;
margin-right: 3px;
}
.ms-product-card .pc-price ins {
font-size: 14px !important;
font-weight: 800 !important;
text-decoration: none !important;
}
/* Reduce gap inside card content area */
.ms-product-card .pc-body,
.ms-product-card > * + * {
gap: 0 !important;
}
/* ── 3. Single product — rating/reviews block below title ── */
.woocommerce div.product .woocommerce-product-rating {
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin: 4px 0 10px !important;
flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-product-rating .star-rating {
display: inline-block !important;
float: none !important;
}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
font-size: 13px !important;
color: #2A2A72 !important;
display: inline-block !important;
}
/* ── 4. Empty cart — nicer layout ── */
.woocommerce-cart .woocommerce-info,
.woocommerce .cart-empty {
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-left: 4px solid #2A2A72 !important;
border-radius: 10px !important;
padding: 40px 32px !important;
text-align: center !important;
font-size: 16px !important;
color: #374151 !important;
margin: 32px auto !important;
max-width: 500px !important;
box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
.woocommerce-cart .woocommerce-info::before {
content: "🛒" !important;
display: block !important;
font-size: 48px !important;
margin-bottom: 12px !important;
line-height: 1 !important;
}
.woocommerce .return-to-shop {
text-align: center !important;
margin-top: 16px !important;
}
.woocommerce .return-to-shop .button,
.woocommerce a.button.wc-backward {
background: #2A2A72 !important;
color: #fff !important;
padding: 12px 28px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 14px !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .2s !important;
}
.woocommerce .return-to-shop .button:hover,
.woocommerce a.button.wc-backward:hover {
background: #1a1a50 !important;
}
/* ── 5. My Account — modern, polished layout ── */
.woocommerce-MyAccount-navigation {
background: #f8f9fc !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 8px 0 !important;
margin-bottom: 20px !important;
}
.woocommerce-MyAccount-navigation ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 0 !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-MyAccount-navigation ul li a {
display: block !important;
padding: 10px 20px !important;
color: #374151 !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 3px solid transparent !important;
white-space: nowrap !important;
transition: color .15s, border-color .15s !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
color: #2A2A72 !important;
border-bottom-color: #2A2A72 !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
color: #2A2A72 !important;
border-bottom-color: #2A2A72 !important;
background: #fff !important;
border-radius: 6px 6px 0 0 !important;
}
/* My Account content card */
.woocommerce-MyAccount-content {
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 28px !important;
}
/* Welcome banner */
.woocommerce-MyAccount-content p:first-child strong,
.woocommerce-MyAccount-content .woocommerce-message {
color: #2A2A72 !important;
}
/* Address cards */
.woocommerce-Addresses .woocommerce-Address {
background: #f8f9fc !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 20px !important;
margin-bottom: 16px !important;
}
.woocommerce-Addresses .woocommerce-Address header h3 {
font-size: 14px !important;
font-weight: 800 !important;
color: #2A2A72 !important;
margin: 0 0 10px !important;
border-bottom: 2px solid #e5e7eb !important;
padding-bottom: 8px !important;
}
.woocommerce-Addresses .woocommerce-Address address {
font-size: 13px !important;
line-height: 1.7 !important;
color: #4B5563 !important;
font-style: normal !important;
}
.woocommerce-Addresses .woocommerce-Address a {
font-size: 12px !important;
color: #2A2A72 !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* Orders table */
.woocommerce-orders-table {
border-collapse: collapse !important;
width: 100% !important;
font-size: 13px !important;
}
.woocommerce-orders-table th {
background: #f0f2f8 !important;
color: #2A2A72 !important;
font-weight: 700 !important;
padding: 10px 12px !important;
border-bottom: 2px solid #2A2A72 !important;
}
.woocommerce-orders-table td {
padding: 10px 12px !important;
border-bottom: 1px solid #f3f4f6 !important;
vertical-align: middle !important;
}
.woocommerce-orders-table tr:last-child td {
border-bottom: none !important;
}
.woocommerce-button.view {
background: #2A2A72 !important;
color: #fff !important;
padding: 6px 14px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
}
/* ── 6. Single product — description & review tabs always visible ── */
.woocommerce div.product .woocommerce-tabs .panel#tab-description,
.woocommerce div.product .woocommerce-tabs .panel#tab-reviews {
/* Panels are shown/hidden by WC JS — don't force display here */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.description_tab,
.woocommerce div.product .woocommerce-tabs ul.tabs li.reviews_tab {
display: inline-block !important;
}
/* Description tab content */
#tab-description h2,
#tab-description h3 {
font-size: 16px !important;
font-weight: 700 !important;
color: #2A2A72 !important;
margin-bottom: 10px !important;
}
#tab-description p {
font-size: 13px !important;
line-height: 1.8 !important;
color: #4B5563 !important;
}
/* ── 7. My Account responsive ── */
@media (max-width: 600px) {
.woocommerce-MyAccount-navigation ul {
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* ================================================================
Single product page — consolidated v25-proven styles
================================================================ */
/* Short description: CSS safety-net (also removed by PHP hooks above) */
.woocommerce div.product .woocommerce-product-details__short-description {
display: none !important;
}
/* Star rating block below title */
.woocommerce div.product .woocommerce-product-rating {
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin: 6px 0 12px !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Tab nav items — always show */
.woocommerce div.product .woocommerce-tabs ul.tabs li.description_tab,
.woocommerce div.product .woocommerce-tabs ul.tabs li.reviews_tab {
display: inline-block !important;
}
/* Stars in review list */
.woocommerce-review__rating .star-rating,
.comment-form-rating .star-rating {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ════════════════════════════════════════════════════════════════
COUPON — order summary coupon field
════════════════════════════════════════════════════════════════ */
.qc-coupon-wrap {
margin-top: 14px;
border-top: 1px dashed #e2e8f0;
padding-top: 14px;
}
.qc-coupon-row {
display: flex;
gap: 6px;
align-items: center;
}
.qc-coupon-inp {
flex: 1;
border: 1.5px solid #d1d5db;
border-radius: 6px;
padding: 8px 11px;
font-size: 13px;
font-family: inherit;
letter-spacing: 0.5px;
outline: none;
transition: border-color 0.15s;
text-transform: uppercase;
background: #fafafa;
}
.qc-coupon-inp:focus { border-color: var(--ms-green, #56a60c); background: #fff; }
.qc-coupon-btn {
background: var(--ms-green, #56a60c);
color: #fff;
border: none;
border-radius: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
font-family: inherit;
}
.qc-coupon-btn:hover { background: #46880a; }
.qc-coupon-btn:disabled { opacity: 0.6; cursor: wait; }
.qc-coupon-msg {
margin-top: 6px;
font-size: 12px;
font-weight: 600;
border-radius: 5px;
padding: 5px 9px;
}
.qc-coupon-msg--ok { color: #166534; background: #f0fdf4; }
.qc-coupon-msg--err { color: #991b1b; background: #fef2f2; }
.qc-applied-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.qc-coup-tag {
background: #f0fdf4;
color: #166534;
border: 1px solid #86efac;
border-radius: 20px;
padding: 3px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
}
.qc-coup-remove {
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
font-size: 13px;
padding: 2px 4px;
line-height: 1;
}
.qc-coup-remove:hover { color: #ef4444; }
.qc-discount-row .qc-disc-label { color: #166534; font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════
COMPOSITION SIBLING STRIP — above single product (v35 feature)
Scrollable horizontal row of products sharing the same molecule.
═══════════════════════════════════════════════════════════════ */
.ms-comp-strip {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
margin-bottom: 14px;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
overflow: hidden;
}
.ms-comp-strip-head {
background: #f5f7fa;
border-bottom: 1px solid #e2e8f0;
padding: 7px 14px;
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
color: #374151;
letter-spacing: .06em;
text-transform: uppercase;
}
.ms-comp-strip-head .ms-comp-strip-name {
color: #2563eb;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
text-decoration: none;
}
.ms-comp-strip-head .ms-comp-strip-name:hover { text-decoration: underline; }
.ms-comp-strip-items {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.ms-comp-strip-items::-webkit-scrollbar { height: 4px; }
.ms-comp-strip-items::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.ms-comp-strip-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-right: 1px solid #e2e8f0;
min-width: 190px;
cursor: pointer;
transition: background .12s;
flex-shrink: 0;
text-decoration: none !important;
color: inherit !important;
}
.ms-comp-strip-item:last-child { border-right: none; }
.ms-comp-strip-item:hover { background: #f0f4ff; }
.ms-comp-strip-item.ms-comp-active { background: #eff6ff; border-bottom: 2px solid #2563eb; }
.ms-comp-strip-item .ms-csi-img {
width: 38px;
height: 38px;
object-fit: contain;
border-radius: 4px;
background: #f8fafc;
border: 1px solid #e2e8f0;
flex-shrink: 0;
}
.ms-comp-strip-item .ms-csi-img-fallback {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
width: 38px;
height: 38px;
border-radius: 4px;
background: #f8fafc;
border: 1px solid #e2e8f0;
flex-shrink: 0;
}
.ms-comp-strip-item .ms-csi-info { flex: 1; min-width: 0; }
.ms-comp-strip-item .ms-csi-name {
font-size: 12px;
font-weight: 600;
color: #1e293b;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
}
.ms-comp-strip-item .ms-csi-prices {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.ms-comp-strip-item .ms-csi-old {
font-size: 10.5px;
color: #94a3b8;
text-decoration: line-through;
}
.ms-comp-strip-item .ms-csi-price {
font-size: 12.5px;
font-weight: 700;
color: #16a34a;
}
.ms-comp-strip-item .ms-csi-mfr {
font-size: 10px;
color: #64748b;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 600px) {
.ms-comp-strip-item { min-width: 160px; padding: 8px 10px; }
.ms-comp-strip-item .ms-csi-name { max-width: 105px; }
.ms-comp-strip { margin-bottom: 10px; }
}
/* ═══════════════════════════════════════════════════════════════
CHECKOUT — SAVED ADDRESS CARD (returning user quick summary)
═══════════════════════════════════════════════════════════════ */
.qc-addr-card {
background: #fff;
border: 1px solid #c7d2fe;
border-radius: 10px;
margin-bottom: 14px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(37,99,235,.07);
}
.qc-addr-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #eff6ff;
border-bottom: 1px solid #dbeafe;
gap: 8px;
}
.qc-addr-pin {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: #1e40af;
min-width: 0;
}
.qc-addr-pin strong { color: #1e293b; }
.qc-addr-edit-btn {
background: #1d4ed8;
color: #fff;
border: none;
border-radius: 6px;
padding: 5px 11px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
letter-spacing: .02em;
flex-shrink: 0;
}
.qc-addr-edit-btn:hover { background: #1e40af; }
.qc-addr-body {
padding: 8px 14px 4px;
}
.qc-addr-line {
font-size: 13px;
color: #374151;
line-height: 1.5;
}
.qc-addr-foot {
display: flex;
align-items: center;
padding: 6px 14px 10px;
gap: 6px;
flex-wrap: wrap;
}
.qc-addr-meta {
font-size: 12px;
color: #64748b;
}
.qc-addr-sep {
font-size: 12px;
color: #cbd5e1;
}
.qc-addr-change-btn {
margin-left: auto;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 3px 12px;
font-size: 12px;
font-weight: 600;
color: #374151;
cursor: pointer;
}
.qc-addr-change-btn:hover { background: #e2e8f0; }
/* ═══════════════════════════════════════════════════════════════
CHECKOUT — PHONE FIELD with country dial code + flag selector
═══════════════════════════════════════════════════════════════ */
.qf-phone .qc-ph-row {
display: flex;
gap: 0;
border: 1.5px solid #d1d5db;
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: border-color .15s;
}
.qf-phone .qc-ph-row:focus-within {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.qc-dial-sel {
border: none !important;
border-right: 1.5px solid #e5e7eb !important;
border-radius: 0 !important;
background: #f8fafc;
padding: 0 6px 0 8px;
font-size: 13px;
font-weight: 600;
color: #374151;
width: auto;
min-width: 86px;
max-width: 110px;
outline: none;
cursor: pointer;
flex-shrink: 0;
box-shadow: none !important;
}
.qc-dial-sel:focus { background: #eff6ff; border-right-color: #bfdbfe !important; }
.qf-phone #qcPH {
border: none !important;
border-radius: 0 !important;
flex: 1;
min-width: 0;
padding: 9px 10px;
font-size: 14px;
box-shadow: none !important;
outline: none;
background: transparent;
}
/* ═══════════════════════════════════════════════════════════════
V35 FIX 1 — Single product: {- qty +} [ADD TO CART] then [BUY NOW]
Layout matches reference screenshot: qty+ATC in one row, BUY NOW full-width below
═══════════════════════════════════════════════════════════════ */
.woocommerce div.product form.cart {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 0 !important;
padding: 14px 0 12px !important;
border-top: 1px solid var(--ms-border-light, #eeeeee) !important;
border-bottom: none !important;
}
.woocommerce div.product form.cart .qty-wrap,
.woocommerce div.product form.cart .ms-qty-wrap {
flex-shrink: 0 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button[type="submit"] {
flex: 1 !important;
width: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 13px 20px !important;
font-size: 14px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border-radius: 8px !important;
background: var(--ms-green, #5a9e2f) !important;
color: #fff !important;
border: none !important;
cursor: pointer !important;
transition: background 0.15s !important;
box-shadow: 0 2px 8px rgba(0,128,0,0.18) !important;
margin: 0 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button[type="submit"]:hover {
background: var(--ms-green-dark, #46801f) !important;
}
/* BUY NOW — full width block below the form.cart row */
.ms-single-buy-now-wrap {
margin-top: 10px !important;
margin-bottom: 8px !important;
position: relative !important;
}
.ms-single-buy-now-wrap::before,
.ms-single-buy-now-wrap::after {
display: none !important;
}
.ms-single-buy-now {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
padding: 13px 20px !important;
background: #e8530a !important;
color: #fff !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 800 !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: background 0.15s !important;
box-shadow: 0 2px 8px rgba(232,83,10,0.22) !important;
}
.ms-single-buy-now:hover { background: #c94208 !important; color: #fff !important; }
.ms-buy-now-text {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
}
/* ═══════════════════════════════════════════════════════════════
V35 FIX 4 & 5 — Reviews: always show WC native reviews in tab
Force WC comment template to render approved reviews
═══════════════════════════════════════════════════════════════ */
#reviews .woocommerce-Reviews-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 14px; }
#reviews .woocommerce-noreviews { color: #6b7280; font-style: italic; font-size: 13px; }
.woocommerce #reviews #comments ol.commentlist { list-style: none; margin: 0; padding: 0; }
.woocommerce #reviews #comments ol.commentlist li.comment {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 12px;
list-style: none !important;
}
.woocommerce #reviews #comments ol.commentlist li.comment .comment-text {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce #reviews #comments ol.commentlist li.comment .star-rating {
color: #f59e0b !important;
float: right;
}
.woocommerce #reviews .woocommerce-review__author { font-weight: 700; color: #111; }
.woocommerce #reviews .woocommerce-review__verified { color: #059669; font-size: 11px; font-weight: 700; }
.woocommerce #reviews .woocommerce-review__published-date { font-size: 11px; color: #9ca3af; }
.woocommerce #reviews #review_form_wrapper { margin-top: 24px; }
.woocommerce #reviews #review_form_wrapper h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.woocommerce #reviews #review_form .stars a { color: #f59e0b !important; font-size: 18px; }
/* Star rating below product title */
.ms-single-summary .woocommerce-product-rating {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 10px !important;
margin-top: -4px !important;
}
.ms-single-summary .star-rating { color: #f59e0b !important; font-size: 14px !important; }
.ms-single-summary .woocommerce-review-link { font-size: 12px !important; color: #6b7280 !important; }
/* ═══════════════════════════════════════════════════════════════
V36 — My Account: padding handled by css/mobile-first.css
(legacy double-wrapper selectors removed)
═══════════════════════════════════════════════════════════════ */
.woocommerce-account .ms-page-wrap--account {
padding-top: 8px !important;
padding-bottom: 16px !important;
}
.woocommerce-account .ms-account-card__body .woocommerce-MyAccount-content {
padding: 0 !important;
}
@media (min-width: 768px) {
.woocommerce-account .ms-page-wrap--account {
padding-top: 12px !important;
padding-bottom: 24px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
FOOTER SOCIAL LINKS
═══════════════════════════════════════════════════════════════ */
#ms-footer-social {
background: var(--ms-footer-bg, #1e3a1e);
border-top: 1px solid rgba(255,255,255,.08);
padding: 14px 0 12px;
}
.ms-footer-social-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.ms-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.75);
transition: background .2s, color .2s, transform .15s;
text-decoration: none;
}
.ms-social-link:hover,
.ms-social-link:focus-visible {
background: rgba(255,255,255,.22);
color: #fff;
transform: translateY(-2px);
outline: 2px solid rgba(255,255,255,.4);
outline-offset: 2px;
}
/*
* 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: #1E2035; /* --c-text: deep navy, cohesive with brand */
color: rgba(255,255,255,.82);
font-family: 'Open Sans', system-ui, sans-serif;
font-size: 13px;
line-height: 1.6;
}
/* ── Newsletter bar ─────────────────────────────────────────── */
.ms-footer-nl {
background: #16172b; /* slightly darker navy */
border-bottom: 1px solid rgba(255,255,255,.08);
padding: 11px 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: #16A34A; }
.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,.3);
}
.ms-footer-nl-form input[type="email"] {
flex: 1;
min-width: 0;
padding: 8px 13px;
border: none;
border-radius: 6px 0 0 6px;
font-size: 13px;
outline: none;
background: #fff;
color: #1E2035;
}
.ms-nl-submit {
padding: 8px 16px;
background: #16A34A; /* --c-green: site's action green */
color: #fff;
border: none;
border-radius: 0 6px 6px 0;
font-family: 'Raleway', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
letter-spacing: .06em;
text-transform: uppercase;
transition: background .15s;
}
.ms-nl-submit:hover { background: #15803D; }
/* ── Main footer grid ────────────────────────────────────────── */
.ms-footer-main {
padding: 28px 0 18px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
#ms-footer .ms-footer-grid,
.ms-footer-grid {
display: grid !important;
grid-template-columns: 210px 1fr 1fr 1fr !important;
gap: 16px 32px !important;
align-items: start !important;
max-width: 100% !important;
width: 100% !important;
}
/* ── Brand column ────────────────────────────────────────────── */
.ms-footer-brand .ms-footer-logo-text {
font-family: 'Raleway', system-ui, sans-serif;
font-size: 18px;
font-weight: 800;
color: #fff;
text-decoration: none;
display: block;
margin-bottom: 4px;
letter-spacing: -.3px;
}
.ms-footer-tagline {
font-family: 'Open Sans', system-ui, sans-serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .09em;
color: #16A34A; /* brand green accent */
margin: 0 0 10px;
}
.ms-footer-about {
font-family: 'Open Sans', system-ui, sans-serif;
font-size: 12.5px;
font-weight: 400;
color: rgba(255,255,255,.55);
margin: 0 0 10px;
line-height: 1.6;
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: 4px;
margin-bottom: 10px;
}
.ms-footer-contact-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255,255,255,.65);
text-decoration: none;
word-break: break-all;
transition: color .15s;
}
.ms-footer-contact-item:hover { color: #fff; }
.ms-footer-contact-item svg { flex-shrink: 0; color: #16A34A; }
/* Ships to */
.ms-footer-ships {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 9px;
}
.ms-footer-ships-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .07em;
color: rgba(255,255,255,.35);
text-transform: uppercase;
flex: 0 0 100%;
margin-bottom: 3px;
}
.ms-footer-ship-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
background: rgba(42,42,114,.35);
border: 1px solid rgba(42,42,114,.6);
border-radius: 20px;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,.80);
}
.ms-footer-ship-badge svg { color: #2A2A72; }
/* Trust badges */
.ms-footer-badges {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.ms-fbadge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
border-radius: 4px;
font-size: 11px;
color: rgba(255,255,255,.70);
font-weight: 500;
}
.ms-fbadge svg { color: #16A34A; }
/* 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: 32px;
height: 32px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
color: rgba(255,255,255,.65);
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.ms-footer-social-link:hover {
background: #2A2A72;
color: #fff;
border-color: #3D3D99;
}
/* ── Link columns ─────────────────────────────────────────────── */
.ms-footer-col-title {
font-family: 'Raleway', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .09em;
color: rgba(255,255,255,.95);
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Override for wp_nav_menu generated headings */
#ms-footer .ms-footer-col > h4,
#ms-footer .ms-footer-col > h5 {
font-family: 'Raleway', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .09em !important;
color: rgba(255,255,255,.95) !important;
margin: 0 0 12px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
background: none !important;
}
.ms-footer-links {
list-style: none;
margin: 0;
padding: 0;
}
.ms-footer-links li { margin-bottom: 5px; }
.ms-footer-links a {
font-family: 'Open Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
color: rgba(255,255,255,.58);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1.4;
transition: color .15s;
}
.ms-footer-links a:hover { color: #fff; }
.ms-footer-links a svg { color: #16A34A; 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,.58); }
#ms-footer .ms-footer-links a:hover { color: #fff; }
/* ── Payment methods bar ─────────────────────────────────────── */
.ms-footer-payments {
background: rgba(0,0,0,.20);
padding: 10px 0;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.ms-footer-payments-inner {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ms-fp-label {
font-family: 'Raleway', system-ui, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .07em;
color: rgba(255,255,255,.35);
text-transform: uppercase;
margin-right: 4px;
}
.ms-fp-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 5px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,.72);
background: rgba(255,255,255,.04);
}
/* ── Copyright / bottom bar ──────────────────────────────────── */
.ms-footer-bottom {
background: #13142a;
padding: 13px 0;
}
.ms-footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.ms-footer-copy {
font-family: 'Open Sans', system-ui, sans-serif;
font-size: 12px;
font-weight: 400;
color: rgba(255,255,255,.38);
margin: 0;
}
.ms-footer-legal {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.ms-footer-legal a {
font-family: 'Open Sans', system-ui, sans-serif;
font-size: 12px;
font-weight: 400;
color: rgba(255,255,255,.40);
text-decoration: none;
transition: color .15s;
}
.ms-footer-legal a:hover { color: rgba(255,255,255,.85); }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
#ms-footer .ms-footer-grid { grid-template-columns: 190px 1fr 1fr 1fr !important; gap: 16px 18px !important; }
}
@media (max-width: 900px) {
#ms-footer .ms-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; }
#ms-footer .ms-footer-brand { grid-column: 1 / -1 !important; }
#ms-footer .ms-footer-about { max-width: 100% !important; }
}
@media (max-width: 600px) {
#ms-footer .ms-footer-main { padding: 20px 0 14px !important; }
#ms-footer .ms-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 16px 12px !important; }
.ms-footer-nl-inner { flex-direction: column !important; align-items: stretch !important; }
.ms-footer-nl-form { max-width: 100% !important; }
.ms-footer-bottom-inner { flex-direction: column !important; text-align: center !important; }
.ms-footer-legal { justify-content: center !important; gap: 10px !important; }
}
@media (max-width: 400px) {
#ms-footer .ms-footer-grid { grid-template-columns: 1fr !important; }
}
/* ══════════════════════════════════════════════════════════════
FOOTER CONTRAST OVERRIDE — high specificity to beat
design-system.css h4/h5/a/p color rules
══════════════════════════════════════════════════════════════ */
/* Background — navy depth palette */
#ms-footer { background: #1E2035 !important; }
#ms-footer .ms-footer-nl { background: #16172b !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
#ms-footer .ms-footer-bottom { background: #13142a !important; }
#ms-footer .ms-footer-payments { background: rgba(0,0,0,.20) !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: rgba(255,255,255,.95) !important;
font-family: 'Raleway', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .09em !important;
margin: 0 0 12px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
background: none !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,.58) !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: #fff !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,.55) !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,.65) !important;
}
/* Ships to + trust badges */
#ms-footer .ms-footer-ship-badge { color: rgba(255,255,255,.80) !important; border-color: rgba(42,42,114,.6) !important; background: rgba(42,42,114,.25) !important; }
#ms-footer .ms-footer-ships-label { color: rgba(255,255,255,.35) !important; }
#ms-footer .ms-fbadge { color: rgba(255,255,255,.70) !important; border-color: rgba(255,255,255,.10) !important; background: rgba(255,255,255,.05) !important; }
/* Payment badges */
#ms-footer .ms-fp-label { color: rgba(255,255,255,.35) !important; }
#ms-footer .ms-fp-badge { color: rgba(255,255,255,.72) !important; border-color: rgba(255,255,255,.15) !important; background: rgba(255,255,255,.04) !important; }
/* Legal links */
#ms-footer .ms-footer-legal a { color: rgba(255,255,255,.40) !important; font-size: 12px !important; }
#ms-footer .ms-footer-legal a:hover{ color: rgba(255,255,255,.85) !important; }
/* Social icons */
#ms-footer .ms-footer-social-link { color: rgba(255,255,255,.65) !important; background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; }
#ms-footer .ms-footer-social-link:hover { background: #2A2A72 !important; color: #fff !important; border-color: #3D3D99 !important; }
/* SVG icons inside footer inherit cleanly */
#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-fbadge svg,
#ms-footer .ms-footer-links a svg { color: #16A34A !important; }
#ms-footer .ms-footer-ship-badge svg { color: #5B5BB8 !important; }
/* Tagline */
#ms-footer .ms-footer-tagline { color: #16A34A !important; font-size: 10px !important; font-family: 'Open Sans', system-ui, sans-serif !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: #16172b !important; }
#ms-footer .ms-footer-bottom { background: #13142a !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; }
/* ══════════════════════════════════════════════════════════════
MY ACCOUNT — layout fixes v38.1
══════════════════════════════════════════════════════════════ */
/* Orders table: stack VIEW + REORDER vertically, no overlap */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions,
.woocommerce-MyAccount-orders .woocommerce-button {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
align-items: stretch !important;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a,
.woocommerce-MyAccount-orders td a.button {
display: block !important;
text-align: center !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}
/* Account tabs — SVG icon alignment */
.ms-account-tab { display: flex !important; align-items: center !important; gap: 7px !important; }
.ms-account-tab__icon { display: flex !important; align-items: center !important; flex-shrink: 0; }
.ms-account-card__avatar { display: flex; align-items: center; justify-content: center; }
.ms-account-card__avatar svg { display: block; }
/* Tabs scrollable on mobile */
@media (max-width: 600px) {
.ms-my-account-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.ms-my-account-tabs { display: flex !important; flex-wrap: nowrap !important; }
.ms-account-tab { flex-shrink: 0 !important; white-space: nowrap !important; }
}
/*
* MediShop — mobile-first.css v36.1
* Base styles target small screens; min-width media queries enhance for tablet/desktop.
*/
:root {
--ms-space-xs: 8px;
--ms-space-sm: 12px;
--ms-space-md: 16px;
--ms-space-lg: 24px;
--ms-bp-sm: 480px;
--ms-bp-md: 768px;
--ms-bp-lg: 1024px;
--ms-account-max: 860px;
}
/* ── Container: mobile base ── */
.ms-container {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--ms-space-sm);
padding-right: var(--ms-space-sm);
}
@media (min-width: 768px) {
.ms-container {
padding-left: var(--ms-space-md);
padding-right: var(--ms-space-md);
}
}
@media (min-width: 1024px) {
.ms-container {
max-width: 1200px;
padding-left: var(--ms-space-lg);
padding-right: var(--ms-space-lg);
}
}
/* ── Account page wrapper (no nested container) ── */
.ms-page-wrap--account {
padding: var(--ms-space-xs) var(--ms-space-sm) var(--ms-space-md);
}
.ms-account-main {
max-width: var(--ms-account-max);
margin: 0 auto;
width: 100%;
}
@media (min-width: 768px) {
.ms-page-wrap--account {
padding: var(--ms-space-sm) var(--ms-space-md) var(--ms-space-lg);
}
}
/* ── Account card ── */
.ms-account-shell {
width: 100%;
}
.ms-account-card {
background: #fff;
border: 1px solid var(--ms-border, #e5e7eb);
border-radius: var(--ms-radius, 10px);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ms-account-card__header {
display: flex;
align-items: center;
gap: 10px;
background: var(--ms-green, #2e7d32);
color: #fff;
padding: 12px 14px;
}
.ms-account-card__avatar {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
}
.ms-account-card__title {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 800;
margin: 0;
color: #fff;
}
.ms-account-card__subtitle {
font-size: 11px;
opacity: 0.9;
margin: 2px 0 0;
}
.ms-account-card__body {
padding: 12px;
min-height: 200px;
}
@media (min-width: 768px) {
.ms-account-card__header {
padding: 14px 20px;
gap: 12px;
}
.ms-account-card__avatar {
font-size: 28px;
}
.ms-account-card__title {
font-size: 18px;
}
.ms-account-card__subtitle {
font-size: 12px;
}
.ms-account-card__body {
padding: 20px 24px;
}
}
/* ── Account tabs: horizontal scroll on mobile ── */
.ms-my-account-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
border-bottom: 2px solid var(--ms-border, #e5e7eb);
background: #f8f8f8;
}
.ms-account-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 10px 12px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
color: var(--ms-text, #374151);
border-bottom: 3px solid transparent;
background: transparent;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.ms-account-tab:hover,
.ms-account-tab:focus-visible {
color: var(--ms-green, #2e7d32);
background: #fff;
outline: none;
}
.ms-account-tab.is-active {
font-weight: 700;
color: var(--ms-green, #2e7d32);
border-bottom-color: var(--ms-green, #2e7d32);
background: #fff;
}
@media (min-width: 768px) {
.ms-account-tab {
padding: 12px 18px;
font-size: 13px;
gap: 6px;
}
}
/* ── WooCommerce account content inside card ── */
.ms-account-card__body .woocommerce-MyAccount-content {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* ── Orders table: card layout on small screens ── */
@media (max-width: 767px) {
.woocommerce-orders-table {
display: block;
border: 0;
}
.woocommerce-orders-table thead {
display: none;
}
.woocommerce-orders-table tbody,
.woocommerce-orders-table tr,
.woocommerce-orders-table td {
display: block;
width: 100%;
}
.woocommerce-orders-table tr {
margin-bottom: 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px;
background: #fafafa;
}
.woocommerce-orders-table td {
padding: 4px 0 !important;
border: none !important;
text-align: left !important;
}
.woocommerce-orders-table td::before {
content: attr(data-title) ": ";
font-weight: 700;
color: var(--ms-green, #2e7d32);
font-size: 11px;
display: inline-block;
min-width: 90px;
}
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
display: none;
}
}
/* ── Login page (guest) ── */
.woocommerce-account:not(.logged-in) .ms-page-wrap--account {
padding-top: 0;
padding-bottom: 0;
}
.mscc-login-page-wrap {
max-width: 480px;
margin: 12px auto 20px;
padding: 0 var(--ms-space-sm);
}
/* ── Mobile body class (server hint + media queries) ── */
body.ms-mobile .ms-page-wrap--account {
padding-left: var(--ms-space-xs);
padding-right: var(--ms-space-xs);
}
body.ms-mobile .ms-account-card__body {
padding: 10px;
}
/* ── Global responsive helpers ── */
img,
video,
iframe {
max-width: 100%;
height: auto;
}
.ms-product-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--ms-space-sm);
}
@media (min-width: 480px) {
.ms-product-grid.cols-3,
.ms-product-grid.cols-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.ms-product-grid.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.ms-product-grid.cols-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Header search: full width on mobile */
#ms-search {
width: 100%;
}
/* Touch-friendly inputs (prevent iOS zoom) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
select,
textarea {
font-size: 16px;
}
@media (min-width: 768px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
select,
textarea {
font-size: 14px;
}
}
/* Full-width WC pages */
.ms-page-wrap--fullwidth {
padding: 0;
width: 100%;
max-width: 100%;
}
/* Trust bar: scroll on narrow screens */
#ms-trust-bar .ms-trust-bar-inner {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 12px;
padding: 6px var(--ms-space-sm);
}
/* Prevent horizontal page scroll */
#ms-page-wrap,
.ms-account-shell,
.woocommerce {
max-width: 100%;
overflow-x: clip;
}
/* ═══════════════════════════════════════════════════════════════
MY ACCOUNT — enhanced layout v36.1
═══════════════════════════════════════════════════════════════ */
.ms-account-card__body .woocommerce-MyAccount-content > p:first-of-type {
font-size: 13px;
line-height: 1.6;
margin-bottom: 16px;
color: var(--ms-text, #374151);
}
.ms-account-card__body .woocommerce-Addresses {
display: grid;
gap: 12px;
}
@media (min-width: 768px) {
.ms-account-card__body .woocommerce-Addresses {
grid-template-columns: repeat(2, 1fr);
}
}
.ms-account-card__body .woocommerce-Address {
background: #f8faf8 !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 14px !important;
margin: 0 !important;
}
.ms-account-card__body .woocommerce-Address header h3 {
font-size: 13px !important;
font-weight: 800 !important;
color: var(--ms-green, #2e7d32) !important;
margin: 0 0 8px !important;
padding-bottom: 6px !important;
border-bottom: 2px solid #e8f5e9 !important;
}
.ms-account-card__body .woocommerce-form-row label {
font-size: 12px;
font-weight: 600;
color: #374151;
}
.ms-account-card__body .woocommerce-form-row input,
.ms-account-card__body .woocommerce-form-row select,
.ms-account-card__body .woocommerce-form-row textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
}
.ms-account-card__body .woocommerce-Button,
.ms-account-card__body button.button {
background: var(--ms-green, #2e7d32) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 10px 20px !important;
font-weight: 700 !important;
font-size: 13px !important;
cursor: pointer;
}
.ms-account-card__body .woocommerce-Button:hover,
.ms-account-card__body button.button:hover {
filter: brightness(1.08);
}
.ms-account-card__body .woocommerce-message,
.ms-account-card__body .woocommerce-info,
.ms-account-card__body .woocommerce-error {
border-radius: 8px;
padding: 10px 14px;
font-size: 12px;
margin-bottom: 12px;
}
.ms-account-card__body .woocommerce-orders-table .button.view {
width: 100%;
text-align: center;
margin-top: 6px;
}
@media (min-width: 768px) {
.ms-account-card__body .woocommerce-orders-table .button.view {
width: auto;
margin-top: 0;
}
}
.ms-account-card__body .woocommerce-table--order-details {
font-size: 12px;
overflow-x: auto;
display: block;
}
.ms-account-card__body dl {
margin: 0 0 12px;
}
.ms-account-card__body dl dt {
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
color: var(--ms-green, #2e7d32);
}
.ms-account-card__body dl dd {
margin: 0 0 8px;
font-size: 13px;
}
/*
* MediShop — cls-fixes.css v36.1
* Reduces Cumulative Layout Shift site-wide.
*/
/* Reserve space for fixed header stack */
#ms-trust-bar {
min-height: 34px;
}
#ms-topbar {
min-height: 36px;
}
#ms-header {
min-height: 64px;
}
#ms-header-inner {
min-height: 56px;
}
@media (min-width: 768px) {
#ms-header {
min-height: 72px;
}
}
/* Hero slider — stable height before images load */
.ms-slider-wrap,
.ms-slider {
min-height: 200px;
}
.ms-slide {
min-height: 200px;
}
@media (min-width: 768px) {
.ms-slider-wrap,
.ms-slider,
.ms-slide {
min-height: 280px;
}
}
.ms-slide-bg {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 5 / 2;
}
/* Product card images — aspect ratio box */
.ms-product-card .pc-image {
aspect-ratio: 4 / 3;
min-height: 130px;
overflow: hidden;
background: #f3f4f6;
}
.ms-product-card .pc-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Cart badge — reserved space */
.ms-cart-count,
#ms-cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
min-height: 20px;
line-height: 1;
}
/* Search dropdown — overlay, no document push */
#ms-search {
position: relative;
}
#ms-search-results {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 9999;
}
/* Product tabs — reserve minimum area to reduce tab-switch shift */
.ms-single-tabs-wrap {
min-height: 320px;
}
.ms-single-tabs-wrap .woocommerce-tabs ul.tabs {
min-height: 44px;
}
.ms-single-tabs-wrap .woocommerce-tabs .panel.active {
min-height: 240px;
}
/* Font loading — reduce reflow */
body {
font-size-adjust: 0.52;
}
/* Woo gallery main image */
.woocommerce-product-gallery__image img,
.ms-single-gallery img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
background: #fafafa;
}
/* Demand / front-page cards */
.ms-demand-section .pc-image img,
.ms-recent-orders-section .pc-image img {
width: 100%;
height: 130px;
object-fit: contain;
background: #f8f8f8;
}