/* ================================================================= MIDWEST COMPOUNDS — main.css Mobile-first. Single-column conversion architecture. ================================================================= */ /* ---------- Design Tokens ---------- */ :root { /* Brand palette (from brand system) */ --mc-navy: #1d3f73; --mc-navy-deep: #16315a; --mc-charcoal: #1e2530; --mc-charcoal-2: #2a3340; --mc-paper: #eef1f4; --mc-white: #ffffff; --mc-ink: #131820; --mc-muted: #5d6675; --mc-line: #dde3ea; --mc-accent: #2f9e8f; /* clinical teal — single accent for CTAs */ --mc-accent-deep: #237b6f; --mc-amber: #e0a43b; /* badges / scarcity */ --mc-success: #2f9e8f; --mc-danger: #c0492f; /* Typography */ --mc-display: "Lora", Georgia, "Times New Roman", serif; --mc-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Layout */ --mc-maxw: 680px; /* narrow single-column reading width */ --mc-maxw-content: 960px; /* home sections — aligns with hero/slider envelope */ --mc-maxw-wide: 1120px; /* for grids / footer */ --mc-radius: 14px; --mc-radius-sm: 9px; --mc-shadow: 0 1px 2px rgba(19,24,32,.06), 0 8px 24px rgba(19,24,32,.06); --mc-shadow-lg: 0 12px 40px rgba(19,24,32,.14); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--mc-body); font-size: 16px; line-height: 1.6; color: var(--mc-ink); background: var(--mc-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--mc-navy); text-decoration: none; } a:hover { color: var(--mc-accent-deep); } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--mc-display); font-weight: 600; line-height: 1.15; color: var(--mc-charcoal); margin: 0 0 var(--sp-4); letter-spacing: -.01em; text-wrap: balance; } h1 { font-size: 2rem; } h2 { font-size: clamp(1.35rem, 5.2vw, 1.75rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 var(--sp-4); } /* ---------- Layout helpers ---------- */ .mc-container { width: 100%; max-width: var(--mc-maxw); margin: 0 auto; padding: 0 var(--sp-5); } .mc-container--wide { max-width: var(--mc-maxw-wide); } .mc-section { padding: var(--sp-7) 0; padding-top: 40px; padding-bottom: 40px; } .mc-section--tight { padding: 28px 0; } .mc-center { text-align: center; } .mc-eyebrow { font-family: var(--mc-body); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-accent-deep); margin: 0 0 var(--sp-2); } /* ---------- Announcement bar ---------- */ .mc-announce { background: var(--mc-charcoal); color: var(--mc-paper); font-size: .8rem; text-align: center; padding: var(--sp-2) var(--sp-4); letter-spacing: .02em; text-wrap: balance; line-height: 1.35; } .mc-announce strong { color: #fff; } /* Narrow phones: shrink slightly and tighten side padding so the line fits, and if it must wrap it breaks into two even, centered lines (balance). */ @media (max-width: 480px) { .mc-announce { font-size: .72rem; padding: var(--sp-2) var(--sp-3); letter-spacing: .01em; } } /* ---------- Header ---------- */ /* Topbar wrapper: pins announce bar + header together as one sticky unit, so the announcement bar stays visible on scroll (not just at the top). */ .mc-topbar { position: sticky; top: 0; z-index: 60; } .mc-header { background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--mc-line); } .mc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); max-width: var(--mc-maxw-wide); margin: 0 auto; padding: var(--sp-3) var(--sp-5); } .mc-logo { display: flex; align-items: center; gap: var(--sp-3); } .mc-logo img, .mc-logo svg { height: 34px; width: auto; } .mc-logo__text { font-family: var(--mc-display); font-weight: 600; font-size: 1.15rem; color: var(--mc-charcoal); letter-spacing: -.01em; } .mc-nav { display: none; } .mc-nav ul { list-style: none; display: flex; gap: var(--sp-5); margin: 0; padding: 0; } .mc-nav a { font-size: .92rem; font-weight: 500; color: var(--mc-charcoal); } .mc-header__actions { display: flex; align-items: center; gap: var(--sp-4); } /* Header search */ .mc-search { display: none; align-items: center; position: relative; } .mc-search__input { width: 200px; max-width: 38vw; padding: 8px 38px 8px 14px; border: 1px solid var(--mc-line); border-radius: 999px; font-family: var(--mc-body); font-size: .85rem; color: var(--mc-charcoal); background: var(--mc-paper); transition: border-color .15s, box-shadow .15s, background .15s; } .mc-search__input::placeholder { color: var(--mc-muted); } .mc-search__input:focus { outline: none; background: #fff; border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(47,158,143,.15); } .mc-search__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: transparent; color: var(--mc-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .mc-search__btn:hover { color: var(--mc-accent-deep); } /* Mobile search lives inside the slide-out menu, full width */ .mc-search--mobile { display: flex; width: 100%; margin-bottom: var(--sp-4); } .mc-search--mobile .mc-search__input { width: 100%; max-width: none; } .mc-cart-link { position: relative; display: inline-flex; align-items: center; color: var(--mc-charcoal); } .mc-cart-count { position: absolute; top: -8px; right: -10px; background: var(--mc-accent); color: #fff; font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; } .mc-menu-toggle { background: none; border: 0; padding: var(--sp-2); display: inline-flex; color: var(--mc-charcoal); } .mc-mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); background: var(--mc-white); z-index: 80; transform: translateX(100%); transition: transform .28s ease; box-shadow: var(--mc-shadow-lg); padding: var(--sp-6) var(--sp-5); overflow-y: auto; } .mc-mobile-nav.is-open { transform: translateX(0); } .mc-mobile-nav ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; } .mc-mobile-nav li { border-bottom: 1px solid var(--mc-line); } .mc-mobile-nav a { display: block; padding: var(--sp-4) 0; font-size: 1.05rem; font-weight: 500; color: var(--mc-charcoal); } .mc-mobile-nav__close { background: none; border: 0; float: right; color: var(--mc-muted); } .mc-overlay { position: fixed; inset: 0; background: rgba(19,24,32,.45); z-index: 70; opacity: 0; visibility: hidden; transition: opacity .28s; } .mc-overlay.is-open { opacity: 1; visibility: visible; } /* ---------- Buttons ---------- */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: 600; font-size: 1rem; line-height: 1; padding: var(--sp-4) var(--sp-6); border-radius: var(--mc-radius-sm); border: 1.5px solid transparent; transition: transform .12s ease, background .2s, box-shadow .2s; text-align: center; width: auto; } .mc-btn:active { transform: translateY(1px); } .mc-btn--primary { background: var(--mc-accent); color: #fff; box-shadow: 0 6px 18px rgba(47,158,143,.30); } .mc-btn--primary:hover { background: var(--mc-accent-deep); color: #fff; } .mc-btn--dark { background: var(--mc-navy); color: #fff; } .mc-btn--dark:hover { background: var(--mc-navy-deep); color: #fff; } .mc-btn--ghost { background: transparent; color: var(--mc-charcoal); border-color: var(--mc-line); } .mc-btn--ghost:hover { border-color: var(--mc-charcoal); color: var(--mc-charcoal); } .mc-btn--block { width: 100%; } .mc-btn--lg { padding: var(--sp-5) var(--sp-6); font-size: 1.05rem; } /* ---------- HERO ---------- */ .mc-hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 80% -10%, rgba(47,158,143,.12), transparent 60%), linear-gradient(180deg, var(--mc-charcoal) 0%, var(--mc-navy-deep) 100%); color: var(--mc-paper); padding: clamp(36px, 6vw, 72px) 0 clamp(44px, 7vw, 84px); } .mc-hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 .5H40M.5 0V40' stroke='%23ffffff' stroke-opacity='0.04'/%3E%3C/svg%3E"); } /* Option 1: centered hero. Wider envelope, content centered, fluid sizing. */ .mc-hero__inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; text-align: center; padding-left: clamp(24px, 5vw, 48px); padding-right: clamp(24px, 5vw, 48px); } .mc-hero h1 { color: #fff; font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.1; margin: 0 auto var(--sp-4); max-width: 16ch; } .mc-hero p.lede { font-size: clamp(1rem, 1.7vw, 1.18rem); color: #cdd6e2; line-height: 1.55; max-width: 52ch; margin: 0 auto var(--sp-6); } .mc-hero .mc-eyebrow { color: #6fd0c2; } .mc-hero__cta { display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; } .mc-hero__trustline { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: .82rem; color: #aebbcb; justify-content: center; } .mc-hero__trustline span { display: inline-flex; align-items: center; gap: 6px; } .mc-hero__trustline svg { color: var(--mc-accent); } /* ---------- Trust bar ---------- */ .mc-trustbar { background: var(--mc-paper); } .mc-trustbar__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); max-width: var(--mc-maxw-content); margin: 0 auto; padding: var(--sp-5); } /* Homepage: align content sections to the same envelope as the hero/slider so the page reads as one consistent column (not three different widths). */ .home .mc-section .mc-container { max-width: var(--mc-maxw-content); } .mc-trust-item { display: flex; gap: var(--sp-3); align-items: flex-start; } .mc-trust-item svg { color: var(--mc-accent-deep); flex-shrink: 0; margin-top: 2px; } .mc-trust-item h4 { font-family: var(--mc-body); font-size: .9rem; font-weight: 700; margin: 0 0 2px; color: var(--mc-charcoal); } .mc-trust-item p { font-size: .8rem; color: var(--mc-muted); margin: 0; } /* ---------- Benefits ---------- */ .mc-benefits { display: grid; gap: var(--sp-5); } .mc-benefit { display: flex; gap: var(--sp-4); align-items: flex-start; } .mc-benefit__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: rgba(47,158,143,.10); color: var(--mc-accent-deep); display: grid; place-items: center; } .mc-benefit h3 { font-size: 1.05rem; margin: 0 0 var(--sp-1); font-family: var(--mc-body); font-weight: 700; } .mc-benefit p { font-size: .92rem; color: var(--mc-muted); margin: 0; } /* ---------- Product grid (shop) ---------- */ .mc-products { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } .mc-card { background: var(--mc-white); border: 1px solid var(--mc-line); border-radius: var(--mc-radius); overflow: hidden; transition: box-shadow .2s, transform .2s; position: relative; display: flex; flex-direction: column; } .mc-card:hover { box-shadow: var(--mc-shadow); transform: translateY(-2px); } .mc-card__media { display: block; position: relative; overflow: hidden; background: var(--mc-paper); aspect-ratio: 1/1; border-radius: var(--mc-radius-sm); } .mc-card__media img { width: 100%; height: 100%; object-fit: cover; } .mc-card__badge { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--mc-charcoal); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; } .mc-card__badge--coa { background: var(--mc-accent-deep); } /* Out-of-stock status cue: in-body flag above the title + light image dim */ .mc-card__stockflag { display: inline-block; align-self: flex-start; background: var(--mc-muted); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; margin-bottom: var(--sp-2); } .mc-card__media.is-oos img, .mc-card__media.is-oos .mc-card__img--svg { opacity: .62; filter: saturate(.85); transition: opacity .2s ease; } .mc-card__media.is-oos:hover img, .mc-card__media.is-oos:hover .mc-card__img--svg { opacity: .78; } /* Notify form: offset from sticky header when reached via #mcNotify, plus a brief arrival highlight */ .mc-notify { scroll-margin-top: 90px; border-radius: var(--mc-radius); } .mc-notify.mc-notify--flash { animation: mcNotifyFlash 1.6s ease; } @keyframes mcNotifyFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,158,143,0); } 20% { box-shadow: 0 0 0 3px rgba(47,158,143,.45); } } .mc-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; flex: 1 1 auto; } .mc-card__cat { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-muted); } .mc-card__title { font-family: var(--mc-display); font-size: 1.1rem; margin: 2px 0 var(--sp-1); line-height: 1.25; } .mc-card__title a { color: var(--mc-charcoal); } .mc-card__trust { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: var(--sp-2); } .mc-card__purity { font-size: .78rem; color: var(--mc-accent-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .mc-card__trustsep { color: var(--mc-line); font-weight: 700; } .mc-card__coa { font-size: .74rem; color: var(--mc-muted); font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px; } .mc-card__coa-short { display: none; } @media (max-width: 460px) { .mc-card__coa-full { display: none; } .mc-card__coa-short { display: inline; } } .mc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); flex-wrap: wrap; } .mc-card__foot .mc-btn { white-space: nowrap; } /* View + Add to cart sit together on the right; Add to cart is the bold primary, View stays secondary */ .mc-card__actions { display: flex; align-items: center; gap: var(--sp-2); } .mc-card__view { flex: 0 0 auto; } .mc-card__buy svg { margin-right: 4px; } /* AJAX adding state: WooCommerce toggles these classes on the button */ .mc-card__buy.loading { opacity: .6; pointer-events: none; } .mc-card__buy.added::after { content: "✓"; margin-left: 6px; font-weight: 700; } /* On narrow cards (2-up phones) stack price over full-width buttons so nothing crushes or wraps */ @media (max-width: 480px) { .mc-card__foot { flex-direction: column; align-items: stretch; gap: var(--sp-2); } .mc-card__foot .mc-btn { width: 100%; box-shadow: none; } .mc-card__actions { flex-direction: column; align-items: stretch; gap: var(--sp-2); width: 100%; } } .mc-card__price { font-weight: 700; font-size: 1.15rem; color: var(--mc-charcoal); } .mc-card__price del { color: var(--mc-muted); font-weight: 400; font-size: .9rem; margin-right: 6px; } /* ---------- Single product (single-column conversion flow) ---------- */ .mc-pdp { padding-top: var(--sp-5); } .mc-pdp__gallery { margin: 0 0 var(--sp-5); } .mc-pdp__gallery .mc-main-img { width: 100%; border-radius: var(--mc-radius); background: var(--mc-paper); aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--mc-line); } .mc-pdp__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); overflow-x: auto; padding-bottom: 4px; } .mc-pdp__thumbs img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--mc-line); cursor: pointer; flex-shrink: 0; } .mc-pdp__thumbs img.is-active { border-color: var(--mc-accent); } .mc-pdp__cat { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-muted); } .mc-pdp__title { font-size: 1.7rem; margin: var(--sp-1) 0 var(--sp-3); } .mc-pdp__rating { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: .85rem; color: var(--mc-muted); } .mc-stars { color: var(--mc-amber); letter-spacing: 1px; display: inline-flex; gap: 2px; } .mc-stars svg { fill: currentColor; stroke: currentColor; stroke-width: 1; } .mc-pdp__price { font-size: 1.6rem; font-weight: 700; color: var(--mc-charcoal); margin-bottom: var(--sp-2); } .mc-pdp__purity-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; } .mc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; background: rgba(47,158,143,.09); color: var(--mc-accent-deep); padding: 7px 11px; border-radius: 8px; } .mc-chip--neutral { background: var(--mc-paper); color: var(--mc-charcoal); } .mc-chip--link { text-decoration: none; cursor: pointer; transition: background .15s, color .15s; } .mc-chip--link:hover { background: var(--mc-navy); color: #fff; } .mc-chip--link:hover svg { color: #fff; } .mc-chip--usa img { display: inline-block; border-radius: 2px; vertical-align: middle; } .mc-pdp__buybox { background: var(--mc-white); border: 1px solid var(--mc-line); border-radius: var(--mc-radius); padding: var(--sp-5); margin: var(--sp-5) 0; box-shadow: var(--mc-shadow); } .mc-qty { display: flex; align-items: center; border: 1px solid var(--mc-line); border-radius: 8px; overflow: hidden; width: fit-content; margin-bottom: var(--sp-4); background: #fff; } .mc-qty button { width: 42px; height: 44px; background: var(--mc-paper); border: 0; font-size: 1.2rem; color: var(--mc-charcoal); cursor: pointer; transition: background .15s ease, color .15s ease; } .mc-qty button:hover:not(:disabled) { background: var(--mc-accent); color: #fff; } .mc-qty button:disabled { opacity: .35; cursor: default; } .mc-qty input { width: 50px; height: 44px; border: 0; text-align: center; font-size: 1rem; font-weight: 600; color: var(--mc-charcoal); } /* Hide the native number spinner inside the wrapped input (v39.2) — only the −/+ buttons should show, matching the cart-page stepper. */ .mc-qty input::-webkit-outer-spin-button, .mc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mc-qty input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .mc-qty input:focus { outline: none; } /* Pre-JS fallback: give the bare WooCommerce quantity input sane size + air so nothing ever renders as a cramped 26px spinner flush against Add to Cart. */ form.cart .quantity { margin-bottom: var(--sp-4); } form.cart .quantity > input.qty { width: 64px; height: 44px; padding: 6px 8px; border: 1px solid var(--mc-line); border-radius: 8px; font-size: 1rem; font-weight: 600; text-align: center; color: var(--mc-charcoal); } form.cart .mc-qty { margin-bottom: 0; } /* v39.3: matched size — the stepper (143×45) and Add to Cart (133×~44) sat stacked at slightly different sizes, which read as accidental. Give both the SAME width and height so the buy-box controls align as a deliberate matched pair. 46px = the stepper's 44px controls + its 1px borders. */ form.cart .quantity .mc-qty { width: 180px; } form.cart .mc-qty input { flex: 1 1 auto; width: auto; min-width: 0; } form.cart .single_add_to_cart_button { width: 180px; height: 46px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; } .mc-pdp__guarantee { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); font-size: .82rem; color: var(--mc-muted); align-items: center; } .mc-pdp__guarantee svg { color: var(--mc-accent-deep); flex-shrink: 0; } .mc-pay-icons { display: flex; gap: 8px; margin-top: var(--sp-4); align-items: center; flex-wrap: wrap; } .mc-pay-icons span { font-size: .72rem; color: var(--mc-muted); } /* Scannable detail block (segmented columns) */ .mc-detail-block { border-top: 1px solid var(--mc-line); } .mc-detail-block details { border-bottom: 1px solid var(--mc-line); padding: var(--sp-4) 0; } .mc-detail-block summary { font-family: var(--mc-display); font-size: 1.1rem; font-weight: 600; color: var(--mc-charcoal); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .mc-detail-block summary::-webkit-details-marker { display: none; } .mc-detail-block summary::after { content: "+"; font-size: 1.4rem; color: var(--mc-accent-deep); font-family: var(--mc-body); } .mc-detail-block details[open] summary::after { content: "–"; } .mc-detail-block .mc-detail-body { padding-top: var(--sp-4); color: var(--mc-charcoal); font-size: .95rem; } .mc-spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .mc-spec-table th, .mc-spec-table td { text-align: left; padding: var(--sp-3) 0; border-bottom: 1px solid var(--mc-line); vertical-align: top; } .mc-spec-table th { color: var(--mc-muted); font-weight: 600; width: 42%; } .mc-coa-callout { display: flex; gap: var(--sp-3); align-items: center; background: rgba(47,158,143,.08); border: 1px solid rgba(47,158,143,.25); border-radius: var(--mc-radius-sm); padding: var(--sp-4); margin: var(--sp-4) 0; } .mc-coa-callout svg { color: var(--mc-accent-deep); flex-shrink: 0; } /* RUO disclaimer band */ .mc-ruo { background: var(--mc-charcoal); color: #c6cedb; font-size: .8rem; line-height: 1.5; border-radius: var(--mc-radius-sm); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; display: flex; gap: var(--sp-3); } .mc-ruo svg { color: var(--mc-amber); flex-shrink: 0; margin-top: 2px; } .mc-ruo strong { color: #fff; display: block; margin-bottom: 3px; } /* Sticky mobile add-to-cart */ .mc-sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--mc-line); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); transform: translateY(110%); transition: transform .3s ease; box-shadow: 0 -6px 24px rgba(19,24,32,.10); } .mc-sticky-atc.is-visible { transform: translateY(0); } .mc-sticky-atc__info { flex: 0 0 auto; } .mc-sticky-atc__price { font-weight: 700; color: var(--mc-charcoal); font-size: 1.05rem; } .mc-sticky-atc__name { font-size: .72rem; color: var(--mc-muted); } .mc-sticky-atc .mc-btn { flex: 1; } /* ---------- Reviews ---------- */ .mc-reviews { display: grid; gap: var(--sp-4); } .mc-review { border: 1px solid var(--mc-line); border-radius: var(--mc-radius); padding: var(--sp-5); background: var(--mc-white); } .mc-review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); } .mc-review__author { font-weight: 700; font-size: .92rem; color: var(--mc-charcoal); } .mc-review__verified { font-size: .72rem; color: var(--mc-accent-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .mc-review p { font-size: .92rem; color: var(--mc-charcoal); margin: var(--sp-2) 0 0; } /* ---------- FAQ ---------- */ .mc-faq details { border-bottom: 1px solid var(--mc-line); padding: var(--sp-4) 0; } .mc-faq summary { font-weight: 600; font-size: 1rem; color: var(--mc-charcoal); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); } .mc-faq summary::-webkit-details-marker { display: none; } .mc-faq summary::after { content:"+"; color: var(--mc-accent-deep); font-size: 1.3rem; } .mc-faq details[open] summary::after { content:"–"; } .mc-faq .mc-faq-body { padding-top: var(--sp-3); color: var(--mc-muted); font-size: .92rem; } /* ---------- Steps / how it works ---------- */ .mc-steps { display: grid; gap: var(--sp-5); counter-reset: step; } .mc-step { display: flex; gap: var(--sp-4); align-items: flex-start; } .mc-step__num { counter-increment: step; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--mc-charcoal); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--mc-display); } .mc-step__num::before { content: counter(step); } /* ---------- CTA band ---------- */ .mc-cta-band { background: linear-gradient(135deg, var(--mc-navy) 0%, var(--mc-charcoal) 100%); color: #fff; border-radius: var(--mc-radius); padding: var(--sp-7) var(--sp-5); text-align: center; } .mc-cta-band h2 { color: #fff; } .mc-cta-band p { color: #cdd6e2; max-width: 40ch; margin: 0 auto var(--sp-5); } /* ---------- Footer ---------- */ .mc-footer { background: var(--mc-charcoal); color: #aab4c2; padding: var(--sp-8) 0 var(--sp-5); margin-top: var(--sp-8); } .mc-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); max-width: var(--mc-maxw-wide); margin: 0 auto; padding: 0 var(--sp-5); } .mc-footer h4 { color: #fff; font-family: var(--mc-body); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--sp-4); } .mc-footer ul { list-style: none; margin: 0; padding: 0; } .mc-footer li { margin-bottom: var(--sp-3); } .mc-footer a { color: #aab4c2; font-size: .9rem; } .mc-footer a:hover { color: #fff; } .mc-footer__brand p { font-size: .88rem; max-width: 38ch; } .mc-footer__legal { border-top: 1px solid rgba(255,255,255,.08); margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-5) 0; max-width: var(--mc-maxw-wide); margin-left: auto; margin-right: auto; font-size: .76rem; color: #7e8a99; line-height: 1.6; } .mc-footer__legal .mc-ruo-foot { background: rgba(255,255,255,.04); border-radius: 8px; padding: var(--sp-4); margin-bottom: var(--sp-4); } .mc-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; margin-top: var(--sp-4); } /* ---------- Page / post content ---------- */ .mc-page-hero { background: var(--mc-paper); padding: var(--sp-7) 0; text-align: center; border-bottom: 1px solid var(--mc-line); } .mc-page-hero__sub { color: var(--mc-muted); font-size: .95rem; max-width: 46ch; margin: var(--sp-2) auto 0; } .mc-page-hero--shop .mc-eyebrow { margin-bottom: var(--sp-2); } .mc-prose { font-size: 1rem; color: var(--mc-charcoal); } .mc-prose h2 { margin-top: var(--sp-6); } .mc-prose h3 { margin-top: var(--sp-5); } .mc-prose ul, .mc-prose ol { padding-left: var(--sp-5); margin-bottom: var(--sp-4); } .mc-prose li { margin-bottom: var(--sp-2); } .mc-prose a { color: var(--mc-navy); text-decoration: underline; } /* ---------- Product slider (banner style) ---------- */ .mc-slider--banner { position: relative; border-radius: var(--mc-radius); overflow: hidden; /* clips slides + kills stray badge artifacts */ box-shadow: var(--mc-shadow); } .mc-slider__viewport { overflow: hidden; } .mc-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0; padding: 0; list-style: none; } .mc-slider__track::-webkit-scrollbar { display: none; } .mc-slide { scroll-snap-align: center; flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; } /* banner slide: navy panel, image left, info right */ .mc-bslide { display: flex; align-items: center; gap: var(--sp-6); background: var(--mc-navy); color: #fff; padding: var(--sp-6) var(--sp-7); min-height: 240px; } .mc-bslide__media { flex: 0 0 34%; display: flex; align-items: center; justify-content: center; } .mc-bslide__media img, .mc-bslide__img { width: 100%; max-width: 200px; height: auto; border-radius: var(--mc-radius-sm); } .mc-bslide__info { flex: 1 1 auto; min-width: 0; } .mc-bslide__title { font-family: var(--mc-display); color: #fff; font-size: 1.55rem; margin: 0 0 var(--sp-2); } .mc-bslide__purity { display: inline-flex; align-items: center; gap: 6px; color: #bfe3dc; font-size: .82rem; font-weight: 600; margin: 0 0 var(--sp-3); } .mc-bslide__sub { color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.5; margin: 0 0 var(--sp-4); max-width: 42ch; } .mc-bslide__price { font-family: var(--mc-display); font-size: 1.4rem; font-weight: 600; color: #fff; margin: 0 0 var(--sp-4); } .mc-bslide__price .woocommerce-Price-amount { color: #fff; } .mc-bslide__cta { margin: 0; } /* edge arrows — half-circles hugging the slider edges */ .mc-slider--banner .mc-slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border: 0; background: #fff; color: var(--mc-charcoal); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(19,24,32,.18); transition: color .15s, transform .15s; } .mc-slider--banner .mc-slider__btn--prev { left: 0; border-radius: 0 999px 999px 0; padding-right: 4px; } .mc-slider--banner .mc-slider__btn--next { right: 0; border-radius: 999px 0 0 999px; padding-left: 4px; } .mc-slider--banner .mc-slider__btn:hover { color: var(--mc-accent-deep); } .mc-slider--banner .mc-slider__btn:active { transform: translateY(-50%) scale(.94); } .mc-slider__btn--prev svg { transform: scaleX(-1); } /* dots overlaid at the bottom of the banner */ .mc-slider--banner .mc-slider__dots { position: absolute; bottom: var(--sp-3); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: var(--sp-2); } .mc-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: background .15s, transform .15s; } .mc-slider__dot.is-active { background: #fff; transform: scale(1.35); } @media (max-width: 640px) { .mc-bslide { flex-direction: column; text-align: center; padding: var(--sp-6) var(--sp-5) var(--sp-7); gap: var(--sp-4); } .mc-bslide__media { flex-basis: auto; } .mc-bslide__media img, .mc-bslide__img { max-width: 160px; } .mc-bslide__sub { margin-left: auto; margin-right: auto; } .mc-slider--banner .mc-slider__btn { width: 40px; height: 40px; top: auto; bottom: var(--sp-3); transform: none; border-radius: 999px; box-shadow: 0 2px 10px rgba(19,24,32,.28); } .mc-slider--banner .mc-slider__btn--prev { left: var(--sp-4); right: auto; padding-right: 0; } .mc-slider--banner .mc-slider__btn--next { right: var(--sp-4); left: auto; padding-left: 0; } .mc-slider--banner .mc-slider__btn:active { transform: scale(.94); } .mc-slider--banner .mc-slider__dots { bottom: calc(var(--sp-3) + 14px); } } @media (prefers-reduced-motion: reduce) { .mc-slider__track { scroll-behavior: auto; } } /* ---------- Search results ---------- */ .mc-search-results { list-style: none; margin: 0; padding: 0; } .mc-search-item { border-bottom: 1px solid var(--mc-line); } .mc-search-item__link { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2); color: var(--mc-charcoal); text-decoration: none; transition: background .12s; } .mc-search-item__link:hover { background: var(--mc-paper); color: var(--mc-charcoal); } .mc-search-item__thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--mc-paper); display: inline-flex; align-items: center; justify-content: center; color: var(--mc-accent-deep); } .mc-search-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mc-search-item__type { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mc-accent-deep); font-weight: 600; } .mc-search-item__title { font-family: var(--mc-display); font-size: 1.1rem; font-weight: 600; color: var(--mc-navy); } .mc-search-item__price { font-weight: 600; font-size: .95rem; } .mc-search-item__excerpt { font-size: .85rem; color: var(--mc-muted); } .mc-search-item__arrow { flex: 0 0 auto; color: var(--mc-muted); } .mc-search-item__link:hover .mc-search-item__arrow { color: var(--mc-accent-deep); } .mc-search-empty { text-align: center; padding: var(--sp-6) 0; color: var(--mc-accent-deep); } /* ---------- WooCommerce overrides ---------- */ /* Full-width shop/product/cart/checkout — no sidebar */ .woocommerce-sidebar, #secondary.widget-area, .mc-woo #secondary, .mc-woo .widget-area { display: none !important; } .mc-woo #primary, .mc-woo .woocommerce { width: 100% !important; float: none !important; } /* Shop loop: replace WooCommerce float layout with a responsive grid. 1 col mobile -> 2 tablet -> 3 small desktop -> 4 wide desktop. */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin: 0 0 var(--sp-6) !important; padding: 0 !important; list-style: none; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; clear: none !important; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; } @media (min-width: 600px) { .woocommerce ul.products, .woocommerce-page ul.products { gap: var(--sp-5); } } @media (min-width: 700px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr); } } .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--mc-accent) !important; border-radius: var(--mc-radius-sm); font-size: .9rem; background: var(--mc-paper); } .woocommerce-message::before, .woocommerce-info::before { color: var(--mc-accent) !important; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--mc-line); border-radius: 8px; padding: 12px 14px; font-size: 1rem; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--mc-accent); color: #fff; border-radius: 8px; font-weight: 600; padding: 12px 22px; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--mc-accent-deep); color: #fff; } .woocommerce .button.alt, .woocommerce #place_order { background: var(--mc-accent); } .woocommerce-breadcrumb { font-size: .82rem; color: var(--mc-muted); padding: var(--sp-4) 0; } /* ---------- Utilities ---------- */ .mc-hidden { display: none !important; } .mc-mt-0 { margin-top: 0; } .mc-mb-0 { margin-bottom: 0; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: var(--sp-4); top: var(--sp-4); background: #fff; padding: var(--sp-3); z-index: 200; border-radius: 6px; } /* ================================================================= RESPONSIVE — progressive enhancement upward from mobile ================================================================= */ @media (min-width: 640px) { .mc-products { grid-template-columns: repeat(2, 1fr); } .mc-hero__cta { flex-direction: row; } .mc-hero__cta .mc-btn { width: auto; } .mc-benefits { grid-template-columns: repeat(2, 1fr); } h1 { font-size: 2.4rem; } } @media (min-width: 880px) { .mc-nav { display: block; } .mc-menu-toggle { display: none; } .mc-search { display: flex; } .mc-search--mobile { display: none; } .mc-trustbar__grid { grid-template-columns: repeat(4, 1fr); } .mc-products { grid-template-columns: repeat(3, 1fr); } .mc-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .mc-footer__bottom { flex-wrap: nowrap; } /* On desktop, hide the sticky bar — buy box is always reachable */ .mc-sticky-atc { display: none; } .mc-pdp__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; } .mc-pdp__gallery { margin: 0; position: sticky; top: 90px; } } @media (min-width: 1024px) { h1 { font-size: 2.8rem; } .mc-section { padding: var(--sp-9) 0; } /* Contain the product slider on large screens so it reads as a featured-product card aligned to the hero envelope (~880px), not a full-width banner. */ .mc-slider--banner { max-width: 840px; margin-left: auto; margin-right: auto; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- Research / education pages (/research/{slug}/) ---------- */ .mc-page-hero--research { text-align: center; } .mc-page-hero--research .mc-eyebrow { color: var(--mc-accent-deep); margin-bottom: var(--sp-2); } .mc-research__body { max-width: var(--mc-maxw-content); } .mc-research__intro { font-size: 1.05rem; line-height: 1.7; margin-bottom: var(--sp-6); } .mc-research__intro p { margin-bottom: var(--sp-4); } .mc-research__h2 { font-family: var(--mc-display); font-size: clamp(1.3rem, 4vw, 1.6rem); margin: var(--sp-7) 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--mc-line); } /* research areas — responsive card grid */ .mc-research__areas { display: grid; gap: var(--sp-4); } .mc-research__area { background: #fff; border: 1px solid var(--mc-line); border-radius: var(--mc-radius-sm); padding: var(--sp-5); } .mc-research__area h3 { font-family: var(--mc-display); font-size: 1.1rem; color: var(--mc-navy); margin: 0 0 var(--sp-2); } .mc-research__area p { margin: 0; color: var(--mc-muted); font-size: .95rem; line-height: 1.55; } /* recent findings — timeline list */ .mc-research__findings { list-style: none; margin: 0; padding: 0; } .mc-research__findings li { display: flex; gap: var(--sp-4); align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--mc-line); } .mc-research__findings li:last-child { border-bottom: 0; } .mc-research__year { flex: 0 0 auto; min-width: 52px; font-family: var(--mc-display); font-weight: 600; color: var(--mc-accent-deep); } /* RUO callout */ .mc-research__ruo { background: var(--mc-paper); border-left: 3px solid var(--mc-accent); border-radius: 8px; padding: var(--sp-4) var(--sp-5); margin: var(--sp-7) 0; font-size: .9rem; color: var(--mc-charcoal); line-height: 1.6; } .mc-research__cta { text-align: center; margin: var(--sp-6) 0 var(--sp-4); } .mc-research__cta--mid { margin: var(--sp-5) 0; } /* references */ .mc-research__h2--refs { font-size: 1.2rem; } .mc-research__refs { font-size: .85rem; color: var(--mc-muted); line-height: 1.6; padding-left: var(--sp-5); } .mc-research__refs li { margin-bottom: var(--sp-3); } .mc-research__refs a { color: var(--mc-navy); text-decoration: underline; word-break: break-word; } .mc-research__finding { display: block; margin-top: 2px; font-style: italic; color: var(--mc-muted); } /* Evidence card — make citations read as proof, not fine print */ .mc-research__evidence { margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-5) var(--sp-4); background: rgba(29, 63, 115, .04); border: 1px solid rgba(29, 63, 115, .15); border-radius: 10px; } .mc-research__evidence .mc-research__h2--refs { margin-top: 0; font-size: 1.35rem; } .mc-research__evidence-intro { font-size: .95rem; color: var(--mc-ink, #1e2530); margin: 0 0 var(--sp-4); line-height: 1.6; } .mc-research__evidence .mc-research__refs { font-size: .95rem; color: var(--mc-ink, #1e2530); } .mc-research__evidence .mc-research__refs a { font-weight: 600; } .mc-research__badge { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #0a6b3b; background: rgba(16, 145, 80, .12); border-radius: 4px; white-space: nowrap; } @media (min-width: 700px) { .mc-research__areas { grid-template-columns: repeat(2, 1fr); } } /* ---------- Research archive / index hub (/research/) ---------- */ .mc-research-grid { display: grid; gap: var(--sp-4); } .mc-research-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mc-line); border-radius: var(--mc-radius-sm); padding: var(--sp-5); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; } .mc-research-card:hover { border-color: var(--mc-accent); box-shadow: var(--mc-shadow); transform: translateY(-2px); } .mc-research-card__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-accent-deep); margin-bottom: var(--sp-2); } .mc-research-card__title { font-family: var(--mc-display); font-size: 1.25rem; color: var(--mc-navy); margin: 0 0 var(--sp-2); } .mc-research-card__sub { color: var(--mc-muted); font-size: .9rem; line-height: 1.5; margin: 0 0 var(--sp-4); flex: 1 1 auto; } .mc-research-card__link { display: inline-flex; align-items: center; gap: 6px; color: var(--mc-accent-deep); font-weight: 600; font-size: .9rem; } @media (min-width: 600px) { .mc-research-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .mc-research-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================================ v33.0 — Checkout/cart button contrast fix + notify-when-in-stock ---------------------------------------------------------------------------- WooCommerce block buttons (cart "Proceed to Checkout", checkout "Place Order") were inheriting the global navy link color for their TEXT, landing navy-on-dark and rendering nearly unreadable. Force a solid navy fill with white text, with enough specificity to beat the block defaults. Also covers classic-cart buttons. ========================================================================== */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wp-block-button__link.wc-block-cart__submit-button, .woocommerce a.button.checkout-button, .woocommerce-cart a.checkout-button, .woocommerce #payment #place_order, .woocommerce button.button.alt { background-color: var(--mc-navy) !important; background-image: none !important; color: var(--mc-white) !important; border: 1px solid var(--mc-navy) !important; border-radius: 10px !important; font-weight: 600 !important; letter-spacing: .01em; text-shadow: none !important; transition: background-color .15s ease, border-color .15s ease; } /* Force the text/link color white even when WooCommerce wraps the label in an inner or (the cart block does this). */ .wc-block-cart__submit-button a, .wc-block-cart__submit-button span, .wc-block-components-checkout-place-order-button span, .woocommerce a.button.checkout-button, .woocommerce #payment #place_order span { color: var(--mc-white) !important; text-decoration: none !important; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .woocommerce a.button.checkout-button:hover, .woocommerce #payment #place_order:hover, .woocommerce button.button.alt:hover { background-color: var(--mc-navy-deep) !important; border-color: var(--mc-navy-deep) !important; color: var(--mc-white) !important; } .wc-block-cart__submit-button:focus-visible, .wc-block-components-checkout-place-order-button:focus-visible, .woocommerce #payment #place_order:focus-visible { outline: 3px solid rgba(29, 63, 115, .35) !important; outline-offset: 2px; } /* ========================================================================== WooCommerce "Newest products" block grid (wp-block-product-new) — used on the EMPTY-CART page ("New in store") and anywhere the newest-products block is placed. Its buttons use Gutenberg block classes (.wp-block-button__link), not .mc-btn, so they fell through to a dark charcoal pill with navy text on top — navy-on-dark = unreadable, same failure class as the cart submit buttons above. Restyle them to match .mc-btn--primary (teal fill, white text, 9px radius) so the block matches the rest of the store. CSS-only, applies to every page that renders this block. ========================================================================== */ .wc-block-grid__product .wp-block-button__link, .wc-block-grid__product .wc-block-grid__product-add-to-cart a, .wp-block-product-new .wp-block-button__link { background-color: var(--mc-accent) !important; background-image: none !important; color: var(--mc-white) !important; border: 1.5px solid transparent !important; border-radius: var(--mc-radius-sm) !important; font-weight: 500 !important; font-size: .9rem !important; padding: 10px 18px !important; text-shadow: none !important; box-shadow: 0 6px 18px rgba(47,158,143,.30); transition: background-color .15s ease; } .wc-block-grid__product .wp-block-button__link:hover, .wp-block-product-new .wp-block-button__link:hover { background-color: var(--mc-accent-deep) !important; color: var(--mc-white) !important; } .wc-block-grid__product .wp-block-button__link:focus-visible, .wp-block-product-new .wp-block-button__link:focus-visible { outline: 3px solid rgba(47,158,143,.35) !important; outline-offset: 2px; } /* Title links in this block were also inheriting the global navy link color, which is fine on the white card but keep them consistent with mc-card titles. */ .wc-block-grid__product .wc-block-grid__product-title { color: var(--mc-charcoal); font-weight: 600; } /* ========================================================================== Cart page — classic cart styling + free-shipping nudge The cart page renders the CLASSIC [woocommerce_cart] shortcode (forced in inc/cart-shipping.php) instead of the block cart, because the block cart loads 100+ scripts that block first paint for seconds. The classic cart is server-rendered and paints immediately, but its form elements are unstyled by default — so the theme styles them here to match the brand. Checkout is a separate page and is NOT affected by any of these cart-scoped rules. ========================================================================== */ /* ---- Layout: center the cart in a single readable column ----------------- */ .woocommerce-cart .woocommerce { max-width: var(--mc-maxw-content, 960px); margin-inline: auto; } /* Stop the totals box from floating into a lonely right column. Stack it under the cart table at the SAME width as the table (v38.9 — was capped at 460px, which read as a size mismatch between the product table and the totals / free-shipping bar / checkout button on tablet + desktop; mobile was already full-width). One shared width at every breakpoint. */ .woocommerce-cart .cart-collaterals { width: 100%; float: none; margin-top: var(--sp-5, 20px); } .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; max-width: 100%; float: none; } /* ---- Cart product table -------------------------------------------------- */ .woocommerce-cart table.cart { border: 1px solid var(--mc-line, #dde3ea); border-radius: var(--mc-radius-sm, 9px); border-collapse: separate; overflow: hidden; } .woocommerce-cart table.cart th { font-family: var(--mc-display); color: var(--mc-charcoal); } /* Quantity column: the content is the wide −/+ stepper control, not text, so a left-aligned header reads as mis-spaced (label hugs the control's left edge while the number sits mid-control). Center header AND control (v38.9). */ .woocommerce-cart table.cart th.product-quantity, .woocommerce-cart table.cart td.product-quantity { text-align: center; } /* ---- Totals box ---------------------------------------------------------- */ .woocommerce-cart .cart_totals table.shop_table { border: 1px solid var(--mc-line, #dde3ea); border-radius: var(--mc-radius-sm, 9px); overflow: hidden; } /* Hide the shipping row, the tax row, AND the order-total row on the cart. Shipping (and therefore the real total) is chosen at CHECKOUT; showing them here would surface an unselectable amount. */ .woocommerce-cart .cart_totals tr.shipping, .woocommerce-cart .cart_totals .woocommerce-shipping-totals, .woocommerce-cart .cart_totals tr.tax-total, .woocommerce-cart .cart_totals tr.order-total, .woocommerce-cart .cart_totals .order-total { display: none !important; } /* ---- Quantity box -------------------------------------------------------- */ /* The classic markup wraps the input in a .quantity div that also contains a screen-reader