/* CML Shop — PDP styles. Matches design mockups #04, #14, #19. Mobile-first. */ @import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Inter:wght@400;500;600;700&display=swap'); :root { --cml-burgundy: #9c1c3c; --cml-burgundy-2: #7d162f; --cml-burgundy-3: #c14a64; --cml-rose: #fcf6f8; --cml-cream: #faf7f4; --cml-cream-2: #f4ede8; --cml-gold: #c89a4a; --cml-ink: #1a1a1a; --cml-ink-2: #555555; --cml-ink-3: #888888; --cml-line: #ebe7e2; --cml-line-2: #d8d3cd; --cml-good: #2a7a4a; --cml-radius-sm: 6px; --cml-radius-md: 10px; --cml-radius-lg: 16px; --cml-shadow-sm: 0 1px 2px rgba(60,30,30,.04), 0 1px 3px rgba(60,30,30,.04); --cml-shadow-md: 0 2px 6px rgba(60,30,30,.05), 0 10px 24px rgba(60,30,30,.06); --cml-serif: "Cardo", "Hoefler Text", Cambria, Georgia, serif; --cml-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ----- Page shell ----- */ /* Kill horizontal overflow at the document root (the real scroll container on mobile — clipping on alone doesn't stop from scrolling). Using `clip` rather than `hidden` so it doesn't create a scroll container that would break the sticky header. */ html { overflow-x: clip; max-width: 100%; } body.cml-page { background: var(--cml-cream); color: var(--cml-ink); font-family: var(--cml-sans); font-size: 16px; line-height: 1.6; margin: 0; padding: 0; overflow-x: clip; max-width: 100%; } .cml-page__main { min-height: 60vh; } .cml-pdp-page { background: var(--cml-cream); } /* ----- Header ----- */ .cml-header { background: #fff; border-bottom: 1px solid var(--cml-line); position: sticky; top: 0; z-index: 30; } .cml-header__inner { max-width: 1280px; margin: 0 auto; padding: .85rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; } .cml-header__logo { text-decoration: none; color: var(--cml-burgundy); display: inline-flex; align-items: center; flex-shrink: 0; } .cml-header__wordmark { font-family: var(--cml-serif); font-weight: 700; font-size: 1.9rem; letter-spacing: -.04em; line-height: 1; color: var(--cml-burgundy); } /* Brand logo image (replaces the cml wordmark). Height-constrained so the stacked logo scales down crisply; width auto preserves aspect ratio. !important + max-height guard against any theme/global img rule and against the intrinsic HTML dimensions winning before CSS paints. */ .cml-header__logo-img { display: block; height: 52px !important; max-height: 52px !important; width: auto !important; } @media (max-width: 600px) { .cml-header__logo-img { height: 44px !important; max-height: 44px !important; } } .cml-header__nav { display: none; gap: 1.75rem; margin-left: 2rem; } @media (min-width: 820px) { .cml-header__nav { display: flex; } } .cml-header__nav a { color: var(--cml-ink); text-decoration: none; font-weight: 500; font-size: .95rem; letter-spacing: .01em; transition: color .15s; } .cml-header__nav a:hover { color: var(--cml-burgundy); } .cml-header__actions { /* CTA carries the margin-left:auto now (it's a sibling and sits to our left), so .actions just hugs it on the right. */ margin-left: 0; display: flex; align-items: center; gap: .5rem; } .cml-header__icon-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: .5rem; color: var(--cml-ink); text-decoration: none; border-radius: var(--cml-radius-sm); transition: color .15s, background .15s; min-width: 40px; } .cml-header__icon-btn:hover { color: var(--cml-burgundy); background: var(--cml-rose); } .cml-header__icon-label { display: none; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .15rem; } @media (min-width: 820px) { .cml-header__icon-label { display: block; } } .cml-header__cart-badge { position: absolute; top: 2px; right: 2px; background: var(--cml-burgundy); color: #fff; font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } .cml-header__cta { display: inline-flex; /* `auto` consumes all free space to the left of the CTA — pushes it alongside .actions on the right side on desktop. On mobile the rule below adds `margin-right: auto` too, which splits the free space evenly and centres the pill between the logo and .actions. */ margin-left: auto; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; padding: .65rem 1.25rem; white-space: nowrap; } /* Compact pill on mobile, centred horizontally between the logo and the cart/hamburger group via flexbox auto margins. Cart sits to the right of the CTA (which is what HQ wanted on mobile). */ @media (max-width: 819px) { .cml-header__cta { font-size: .62rem; letter-spacing: .06em; padding: .5rem .75rem; margin-left: auto; margin-right: auto; } /* Drop the auto-margin push so .actions sits flush right after the centred CTA instead of jumping back to the far right. */ .cml-header__actions { margin-left: 0; } /* The header row (logo + Book-a-Consult pill + cart + burger) overflows on phones at the 1.5rem desktop gap, jamming the burger against the edge. Shrink the gap so the content fits, then the right padding is respected and the burger keeps clear breathing room from the screen edge. */ .cml-header__inner { gap: .5rem; padding-right: 1.25rem; } .cml-header__menu-toggle { margin-right: .15rem; flex-shrink: 0; } .cml-header__actions { gap: .25rem; } } .cml-header__menu-toggle { background: transparent; border: 0; padding: .5rem; color: var(--cml-ink); cursor: pointer; } @media (min-width: 820px) { .cml-header__menu-toggle { display: none; } } /* Mobile-only links inside the nav — hidden on desktop where Book a Consult has its own pill button and Account has its own icon button. Shown only inside the dropdown when the hamburger is open on mobile. */ .cml-header__nav-mobile-only { display: none; } /* Hamburger-dropdown nav panel on mobile (<820px). Only renders when the body has `cml-mobile-menu-open` (toggled by the menu button). */ @media (max-width: 819px) { /* Hide Account icon button on mobile — it's surfaced inside the menu now, keeping the mobile header to just logo + cart + hamburger. */ .cml-header__actions > a:not(.cml-header__cart):not(.cml-header__cta) { display: none; } body.cml-mobile-menu-open .cml-header__nav { display: flex; flex-direction: column; gap: 0; margin: 0; position: fixed; left: 0; right: 0; top: var(--cml-header-h, 64px); background: #fff; padding: .25rem 1.25rem 1rem; border-top: 1px solid var(--cml-line); box-shadow: 0 12px 24px rgba(0,0,0,.08); z-index: 35; } body.cml-mobile-menu-open .cml-header__nav a { padding: .9rem 0; font-size: 1.02rem; border-bottom: 1px solid var(--cml-line); text-decoration: none; } body.cml-mobile-menu-open .cml-header__nav a:last-child { border-bottom: 0; } body.cml-mobile-menu-open .cml-header__nav-mobile-only { display: block; } /* The Book a Consultation entry inside the menu is styled like a pill so it still reads as the primary CTA. */ body.cml-mobile-menu-open .cml-header__nav-cta { margin-top: .75rem; background: var(--cml-burgundy); color: #fff; padding: .8rem 1rem; border-radius: 999px; text-align: center; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 0 !important; } } .cml-header__utility { /* Light burgundy gradient — significantly warmer than the old --cml-rose so the bar grabs the eye, but still tasteful enough not to fight the header. Burgundy hairline accents at top + bottom add definition. */ background: linear-gradient(180deg, #fdeae3 0%, #f9d8cf 100%); border-top: 2px solid var(--cml-burgundy); border-bottom: 1px solid #efc6b9; font-size: .95rem; color: var(--cml-ink); } .cml-header__utility-inner { max-width: 1280px; margin: 0 auto; padding: .65rem 1.25rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } .cml-header__utility-text { display: inline-flex; align-items: center; gap: .5rem; } .cml-header__utility-pin { color: var(--cml-burgundy); flex-shrink: 0; } .cml-header__utility strong { color: var(--cml-burgundy); font-weight: 700; letter-spacing: .01em; } .cml-header__utility-switch { display: inline-flex; align-items: center; gap: .35rem; background: var(--cml-burgundy); color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: .85rem; padding: .42rem .95rem; border-radius: 999px; box-shadow: 0 1px 3px rgba(156, 28, 60, .25); transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } .cml-header__utility-switch:hover, .cml-header__utility-switch:focus { background: #7a1530; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(156, 28, 60, .35); } @media (max-width: 600px) { .cml-header__utility-inner { gap: .55rem; padding: .55rem 1rem; font-size: .88rem; } .cml-header__utility-switch { font-size: .78rem; padding: .35rem .8rem; } } /* ----- Footer ----- */ .cml-footer { background: #1a1a1a; color: #d9d4cc; padding: 3rem 1.25rem 0; margin-top: 4rem; } .cml-footer__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 640px) { .cml-footer__inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .cml-footer__inner { grid-template-columns: 1.4fr repeat(3, 1fr); } } .cml-footer__col--brand .cml-footer__wordmark { font-family: var(--cml-serif); font-weight: 700; font-size: 2rem; color: #fff; letter-spacing: -.04em; } /* Footer logo sits on the dark (#1a1a1a) footer — uses the dedicated white-silhouette PNG (cml-logo-white.png) so it reads cleanly. */ .cml-footer__logo-img { display: block; height: 54px; width: auto; margin-bottom: 1rem; } .cml-footer__tagline { color: #968f86; font-size: .92rem; line-height: 1.6; max-width: 320px; margin: .75rem 0 0; } .cml-footer__col h3 { color: #fff; font-family: var(--cml-sans); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; } .cml-footer__col ul { list-style: none; padding: 0; margin: 0; } .cml-footer__col li { margin: .55rem 0; } .cml-footer__col a { color: #b8b1a8; text-decoration: none; font-size: .92rem; transition: color .15s; } .cml-footer__col a:hover { color: #fff; } .cml-footer__bottom { max-width: 1280px; margin: 3rem auto 0; padding: 1.5rem 0; border-top: 1px solid #2c2c2c; color: #777167; font-size: .8rem; text-align: center; } .cml-pdp { padding: 1.5rem 1rem 3rem; } .cml-pdp__wrap { max-width: 1180px; margin: 0 auto; } /* Breadcrumbs */ .cml-pdp__crumbs { font-size: .85rem; color: var(--cml-ink-3); margin: 0 0 1.75rem; letter-spacing: .01em; } .cml-pdp__crumbs a { color: var(--cml-ink-3); text-decoration: none; } .cml-pdp__crumbs a:hover { color: var(--cml-burgundy); } .cml-pdp__crumbs span { padding: 0 .4rem; } .cml-pdp__crumbs [aria-current] { color: var(--cml-ink-2); font-weight: 500; } /* ----- Hero (image + title + tagline) ----- */ .cml-pdp__hero { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; } @media (min-width: 900px) { .cml-pdp__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; } } .cml-pdp__media { border-radius: var(--cml-radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--cml-cream-2), #ece3da); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; box-shadow: var(--cml-shadow-md); } .cml-pdp__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cml-pdp__media-placeholder { color: var(--cml-burgundy-3); opacity: .35; } .cml-pdp__title { font-family: var(--cml-serif); font-weight: 400; font-size: clamp(2rem, 4vw + .5rem, 3rem); line-height: 1.1; margin: 0 0 .85rem; color: var(--cml-ink); letter-spacing: -.01em; } .cml-pdp__tagline { font-size: 1.05rem; color: var(--cml-ink-2); margin: 0 0 1rem; line-height: 1.55; } .cml-pdp__intro-body { font-size: .98rem; color: var(--cml-ink-2); margin: 0 0 1.4rem; line-height: 1.7; } /* Trust strip */ .cml-pdp__trust { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } @media (min-width: 520px) { .cml-pdp__trust { grid-template-columns: 1fr 1fr 1fr; } } .cml-pdp__trust li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--cml-ink-2); line-height: 1.3; } .cml-pdp__trust svg { color: var(--cml-burgundy); flex-shrink: 0; } /* ----- Tier cards row ----- */ .cml-pdp__tiers-section { margin: 0 0 2.5rem; } .cml-pdp__tiers { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 720px) { .cml-pdp__tiers { grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; align-items: stretch; } } .cml-pdp__tier { position: relative; background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; text-align: center; transition: transform .15s, border-color .15s, box-shadow .15s; box-shadow: var(--cml-shadow-sm); } .cml-pdp__tier:hover { transform: translateY(-2px); border-color: var(--cml-burgundy-3); box-shadow: var(--cml-shadow-md); } .cml-pdp__tier.is-popular { border: 2px solid var(--cml-burgundy); box-shadow: 0 10px 32px rgba(156,28,60,.12); } @media (min-width: 720px) { .cml-pdp__tier.is-popular { transform: scale(1.03); } .cml-pdp__tier.is-popular:hover { transform: scale(1.03) translateY(-2px); } } .cml-pdp__tier-badge { position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); background: var(--cml-burgundy); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .85rem; border-radius: 999px; white-space: nowrap; } .cml-pdp__tier-head { margin-bottom: 1.1rem; } .cml-pdp__tier-name { font-family: var(--cml-sans); font-size: .75rem; font-weight: 600; letter-spacing: .18em; color: var(--cml-ink-2); margin: 0; } .cml-pdp__tier-pricing { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-bottom: .5rem; } .cml-pdp__tier-was { font-size: .95rem; color: var(--cml-ink-3); text-decoration: line-through; } .cml-pdp__tier-now { font-family: var(--cml-serif); font-size: 2.6rem; font-weight: 700; color: var(--cml-ink); line-height: 1; } .cml-pdp__tier-save { display: inline-block; background: var(--cml-rose); color: var(--cml-burgundy); font-size: .75rem; font-weight: 600; letter-spacing: .04em; padding: .25rem .6rem; border-radius: 999px; margin-top: .35rem; } .cml-pdp__tier-perunit { font-size: .85rem; color: var(--cml-ink-3); margin: 0 0 1.5rem; min-height: 1.25em; } .cml-pdp__tier-cta { display: block; margin-top: auto; background: var(--cml-ink); color: #fff; font-family: var(--cml-sans); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .95rem 1rem; border-radius: var(--cml-radius-sm); transition: background .15s; } .cml-pdp__tier-cta:hover { background: var(--cml-burgundy); color: #fff; } .cml-pdp__tier.is-popular .cml-pdp__tier-cta { background: var(--cml-burgundy); } .cml-pdp__tier.is-popular .cml-pdp__tier-cta:hover { background: var(--cml-burgundy-2); } .cml-pdp__tax-note { text-align: center; font-size: .82rem; color: var(--cml-ink-3); margin: 1.25rem 0 0; } /* ===== Featured Bundle buy box ===== */ .cml-pdp__bundle { background: #fff; border: 2px solid var(--cml-burgundy); border-radius: var(--cml-radius-lg); padding: 1.75rem; max-width: 620px; margin: 0 auto; box-shadow: 0 10px 32px rgba(156,28,60,.12); } .cml-pdp__bundle-pricing { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cml-line); margin-bottom: 1.25rem; } .cml-pdp__bundle-price { font-family: var(--cml-serif); font-weight: 700; font-size: 2.6rem; color: var(--cml-ink); line-height: 1; } .cml-pdp__bundle-incl h3 { font-family: var(--cml-sans); font-size: .9rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cml-ink-2); margin: 0 0 .85rem; } .cml-pdp__bundle-incl .cml-pdp__check li { padding-left: 2rem; } .cml-pdp__bundle-detail { color: var(--cml-ink-3); font-size: .92rem; } .cml-pdp__bundle-cta { display: block; width: 100%; text-align: center; box-sizing: border-box; margin-top: 1.5rem; } .cml-pdp__bundle-note { font-size: .82rem; color: var(--cml-ink-3); text-align: center; margin: .85rem 0 0; line-height: 1.5; } /* ===== Per-unit slider (Botox) + syringe stepper (Filler) ===== */ .cml-pdp__units, .cml-pdp__syringes { background: #fff; border: 2px solid var(--cml-burgundy); border-radius: var(--cml-radius-lg); padding: 1.5rem; max-width: 560px; margin: 0 auto; box-shadow: 0 10px 32px rgba(156,28,60,.10); } .cml-pdp__units-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .cml-pdp__units-label { font-weight: 600; font-size: 1.05rem; color: var(--cml-ink); } .cml-pdp__units-count { color: var(--cml-burgundy); font-weight: 700; font-size: 1.05rem; } .cml-pdp__units-slider { width: 100%; accent-color: var(--cml-burgundy); height: 6px; } .cml-pdp__units-scale { display: flex; justify-content: space-between; font-size: .78rem; color: var(--cml-ink-3); margin-top: .35rem; } .cml-pdp__units-price { display: flex; align-items: baseline; gap: .6rem; margin: 1.1rem 0 .35rem; } .cml-pdp__units-price .cml-pdp__summary-final { font-family: var(--cml-serif); font-weight: 700; font-size: 2.1rem; color: var(--cml-ink); } .cml-pdp__units-rate { color: var(--cml-ink-3); font-size: .9rem; } .cml-pdp__units-hint { font-size: .82rem; color: var(--cml-ink-3); margin: 0 0 1.25rem; line-height: 1.5; } .cml-pdp__units-cta, .cml-pdp__syr-cta { display: block; width: 100%; text-align: center; box-sizing: border-box; } /* Stepper */ .cml-pdp__stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--cml-line-2); border-radius: 999px; overflow: hidden; } .cml-pdp__stepper-btn { background: var(--cml-cream); border: 0; width: 2.4rem; height: 2.4rem; font-size: 1.3rem; color: var(--cml-burgundy); cursor: pointer; line-height: 1; } .cml-pdp__stepper-btn:hover { background: var(--cml-rose); } .cml-pdp__stepper-val { min-width: 2.5rem; text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--cml-ink); } /* ----- Pickup card ----- */ .cml-pdp__pickup { background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr; margin: 0 0 2.5rem; box-shadow: var(--cml-shadow-sm); } @media (min-width: 720px) { .cml-pdp__pickup { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: stretch; } } .cml-pdp__pickup-map { background: linear-gradient(135deg, #f0e8df, var(--cml-cream-2)); min-height: 220px; display: flex; align-items: center; justify-content: center; position: relative; } .cml-pdp__pickup-map-fallback { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--cml-burgundy); } .cml-pdp__pickup-map-link { display: block; width: 100%; height: 100%; min-height: 220px; } .cml-pdp__pickup-map-link img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; } .cml-pdp__pickup-map-pin { font-family: var(--cml-sans); font-weight: 600; font-size: .9rem; color: var(--cml-ink-2); background: #fff; padding: .35rem .75rem; border-radius: 999px; box-shadow: var(--cml-shadow-sm); } .cml-pdp__pickup-body { padding: 1.75rem; } .cml-pdp__pickup-eyebrow { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cml-burgundy); margin-bottom: .55rem; } .cml-pdp__pickup-name { font-family: var(--cml-serif); font-weight: 400; font-size: 1.55rem; margin: 0 0 .65rem; color: var(--cml-ink); line-height: 1.15; } .cml-pdp__pickup-address, .cml-pdp__pickup-hours, .cml-pdp__pickup-phone { margin: .2rem 0; font-size: .92rem; color: var(--cml-ink-2); } .cml-pdp__pickup-actions { display: flex; gap: .6rem; margin: 1.1rem 0 .75rem; flex-wrap: wrap; } .cml-pdp__pickup-note { font-size: .82rem; color: var(--cml-ink-3); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cml-line); } .cml-pdp__pickup-note strong { color: var(--cml-ink-2); font-weight: 600; } /* ====== Archive / Shop grid ====== */ .cml-archive { background: var(--cml-cream); } .cml-promo { background: linear-gradient(135deg, var(--cml-burgundy), var(--cml-burgundy-2)); color: #fff; text-align: center; } .cml-promo__inner { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 1.75rem; } .cml-promo__eyebrow { display: inline-block; background: rgba(255,255,255,.16); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; margin-bottom: .55rem; } .cml-promo__headline { font-family: var(--cml-serif); font-weight: 400; font-size: clamp(1.6rem, 3vw + .6rem, 2.4rem); margin: 0 0 .35rem; line-height: 1.15; } .cml-promo__body { margin: 0; font-size: .95rem; color: rgba(255,255,255,.92); } .cml-promo__code { background: #fff; color: var(--cml-burgundy); padding: .15rem .55rem; border-radius: var(--cml-radius-sm); font-family: var(--cml-sans); font-weight: 700; letter-spacing: .04em; font-size: .9rem; } /* Promo slider (multiple active promotions) */ .cml-promo--slider { position: relative; overflow: hidden; } .cml-promo--slider .cml-promo__track { display: flex; transition: transform .5s ease; } .cml-promo--slider .cml-promo__slide { flex: 0 0 100%; min-width: 0; } .cml-promo__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: none; } @media (min-width: 640px) { .cml-promo--slider .cml-promo__arrow { display: block; } } .cml-promo__arrow:hover { background: rgba(255,255,255,.3); } .cml-promo__arrow--prev { left: .6rem; } .cml-promo__arrow--next { right: .6rem; } .cml-promo__dots { position: absolute; left: 0; right: 0; bottom: .55rem; display: flex; justify-content: center; gap: .4rem; } .cml-promo__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; } .cml-promo__dot.is-active { background: #fff; } /* Per-promo background image (with a dark scrim so text stays legible) */ .cml-promo--img { position: relative; } .cml-promo--img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.35)); } .cml-promo--img .cml-promo__inner { position: relative; z-index: 1; } .cml-archive__wrap { max-width: 1280px; margin: 0 auto; padding: 1rem 1.25rem 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 900px) { .cml-archive__wrap { grid-template-columns: 240px 1fr; gap: 2.5rem; } } /* Sidebar */ .cml-archive__sidebar { background: transparent; font-size: .92rem; } .cml-archive__sidebar-h { font-family: var(--cml-sans); font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cml-ink); display: flex; align-items: center; gap: .5rem; padding-bottom: .65rem; border-bottom: 2px solid var(--cml-ink); margin: 0 0 1.25rem; } .cml-archive__facet { margin-bottom: 1.5rem; } .cml-archive__facet h3 { font-family: var(--cml-sans); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--cml-ink-2); margin: 0 0 .65rem; text-transform: uppercase; } .cml-archive__facet ul { list-style: none; padding: 0; margin: 0; } .cml-archive__facet li { margin: .35rem 0; } .cml-archive__facet a { color: var(--cml-ink-2); text-decoration: none; font-size: .9rem; transition: color .15s; } .cml-archive__facet a:hover { color: var(--cml-burgundy); } .cml-archive__facet label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--cml-ink-2); cursor: pointer; } .cml-archive__facet input[type="checkbox"] { accent-color: var(--cml-burgundy); width: 14px; height: 14px; } .cml-archive__facet-count { color: var(--cml-ink-3); font-size: .8rem; } .cml-archive__facet-note { font-size: .75rem; color: var(--cml-ink-3); margin-top: 1rem; font-style: italic; } /* Main grid */ /* Full-width heading/description above the filters + grid */ .cml-archive__intro { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.25rem 0; } .cml-archive__head { display: flex; align-items: flex-end; justify-content: flex-end; gap: 1rem; margin: 0 0 1.25rem; flex-wrap: wrap; } .cml-archive__h1 { font-family: var(--cml-serif); font-weight: 400; font-size: clamp(1.7rem, 2.5vw + .5rem, 2.3rem); margin: 0 0 .3rem; color: var(--cml-ink); line-height: 1.15; } .cml-archive__sub { color: var(--cml-ink-2); margin: 0; font-size: .95rem; } .cml-archive__sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--cml-ink-2); } .cml-archive__sort select { background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-sm); padding: .45rem .65rem; font-family: inherit; font-size: .9rem; color: var(--cml-ink); } .cml-archive__grid { display: grid; /* 2 columns on phones. The tight gap + trimmed tile padding (see the <540px block under .cml-tile__name) reclaim enough width that the longest category names fit one readable line in each narrow tile. */ grid-template-columns: 1fr 1fr; gap: .5rem; } @media (min-width: 540px) { .cml-archive__grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } } @media (min-width: 820px) { .cml-archive__grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; } } @media (min-width: 1200px) { .cml-archive__grid { grid-template-columns: repeat(3, 1fr); } } .cml-tile { display: flex; flex-direction: column; background: #fff; border-radius: var(--cml-radius-lg); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--cml-line); box-shadow: var(--cml-shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; } .cml-tile:hover { transform: translateY(-3px); border-color: var(--cml-burgundy-3); box-shadow: var(--cml-shadow-md); } .cml-tile.is-featured { border: 2px solid var(--cml-burgundy); } .cml-tile__media { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--cml-cream-2), #ece3da); position: relative; display: flex; align-items: center; justify-content: center; color: var(--cml-burgundy-3); } .cml-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cml-tile__media-placeholder { opacity: .35; } .cml-tile__badge { position: absolute; top: .85rem; left: .85rem; background: var(--cml-rose); color: var(--cml-burgundy); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .65rem; border-radius: 999px; z-index: 1; } .cml-tile__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; } .cml-tile__name { font-family: var(--cml-serif); font-weight: 400; font-size: 1.25rem; color: var(--cml-burgundy); margin: 0 0 .35rem; line-height: 1.2; /* Keep category names on a single line. Ellipsis is a safety net only — the font sizing below is tuned so the longest name ("Vaginal Rejuvenation") fits without truncation at every breakpoint. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 2-column tablet band (540–819px): tiles are tighter than the full-width phone view, so trim the name font just enough that the longest names still fit one line — but keep it readable (no tiny phone-sized text). */ @media (min-width: 540px) and (max-width: 819px) { .cml-tile__name { font-size: 1.05rem; } } /* Narrow 2-column phone grid (<540px): reclaim horizontal space at every layer — page-wrap padding, column gap (set on the grid above), and tile body padding — so the longest names ("Vaginal Rejuvenation") fit one line at a readable ~.95rem instead of the cramped tile forcing tiny text. */ @media (max-width: 539px) { .cml-archive__wrap { padding-left: .5rem; padding-right: .5rem; } .cml-tile__body { padding-left: .55rem; padding-right: .55rem; } .cml-tile__name { font-size: .98rem; font-weight: 700; letter-spacing: -.01em; } } .cml-tile__tagline { font-size: .88rem; color: var(--cml-ink-2); line-height: 1.5; margin: 0 0 .85rem; min-height: 2.7em; } .cml-tile__price { display: flex; align-items: baseline; gap: .35rem; margin-top: auto; } .cml-tile__from { font-size: .75rem; color: var(--cml-ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } .cml-tile__amount { font-family: var(--cml-serif); font-weight: 700; font-size: 1.45rem; color: var(--cml-ink); line-height: 1; } .cml-tile__cta { margin-top: .65rem; color: var(--cml-burgundy); font-weight: 600; font-size: .85rem; letter-spacing: .02em; } /* ====== Category landing (mockup #17) ====== */ .cml-cat { background: var(--cml-cream); } .cml-cat__hero { background: linear-gradient(180deg, #fff 0%, var(--cml-cream) 100%); border-bottom: 1px solid var(--cml-line); } .cml-cat__hero-inner { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; } .cml-cat__h1 { font-family: var(--cml-serif); font-weight: 400; font-size: clamp(2rem, 4vw + .4rem, 3rem); margin: .35rem 0 .75rem; color: var(--cml-burgundy); line-height: 1.1; } .cml-cat__intro { max-width: 760px; font-size: 1.02rem; color: var(--cml-ink-2); line-height: 1.6; margin: 0 0 .75rem; } .cml-cat__meta { font-size: .88rem; color: var(--cml-ink-3); letter-spacing: .02em; margin: 0; } .cml-cat__wrap { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 900px) { .cml-cat__wrap { grid-template-columns: 240px 1fr; gap: 2.5rem; } } /* Mobile: collapse the long filter rail into a tappable "Filters" bar. */ .cml-cat__filter-toggle { display: none; } @media (max-width: 899px) { .cml-cat__sidebar { background: transparent; border: 0; box-shadow: none; padding: 0; } .cml-cat__filter-toggle { display: flex; align-items: center; gap: .6rem; width: 100%; background: #fff; border: 1px solid var(--cml-line); border-radius: 10px; padding: .85rem 1rem; font-family: var(--cml-sans); font-size: 1rem; font-weight: 600; color: var(--cml-ink); cursor: pointer; } .cml-cat__filter-chevron { margin-left: auto; transition: transform .2s ease; } .cml-cat__sidebar.is-open .cml-cat__filter-chevron { transform: rotate(180deg); } .cml-cat__facets-body { display: none; margin-top: .6rem; background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); padding: 1.25rem; } .cml-cat__sidebar.is-open .cml-cat__facets-body { display: block; } /* The inner "Filters" heading is redundant with the toggle on mobile. */ .cml-cat__facets-body .cml-cat__sidebar-head { display: none; } } /* Same collapsible filter pattern for the /shop archive sidebar. */ .cml-archive__filter-toggle { display: none; } @media (max-width: 899px) { .cml-archive__filter-toggle { display: flex; align-items: center; gap: .6rem; width: 100%; background: #fff; border: 1px solid var(--cml-line); border-radius: 10px; padding: .85rem 1rem; font-family: var(--cml-sans); font-size: 1rem; font-weight: 600; color: var(--cml-ink); cursor: pointer; } .cml-archive__filter-chevron { margin-left: auto; transition: transform .2s ease; } .cml-archive__sidebar.is-open .cml-archive__filter-chevron { transform: rotate(180deg); } .cml-archive__facets-body { display: none; margin-top: .6rem; background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); padding: 1.25rem; } .cml-archive__sidebar.is-open .cml-archive__facets-body { display: block; } .cml-archive__facets-body .cml-archive__sidebar-h { display: none; } } /* Sidebar */ .cml-cat__sidebar { font-size: .92rem; background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); padding: 1.25rem 1.25rem 1.5rem; box-shadow: var(--cml-shadow-sm); align-self: start; } .cml-cat__sidebar-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; } .cml-cat__sidebar-h { font-family: var(--cml-serif); font-weight: 400; font-size: 1.4rem; margin: 0; color: var(--cml-ink); } .cml-cat__clear { margin-left: auto; background: transparent; border: 0; color: var(--cml-burgundy); font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0; } .cml-cat__clear:hover { color: var(--cml-burgundy-2); } /* Active category pill */ .cml-cat__active-pill { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cml-line); } .cml-cat__active-pill a { display: inline-flex; align-items: center; flex-wrap: wrap; /* lets the sub-label drop to its own line */ gap: .35rem .55rem; background: var(--cml-burgundy); color: #fff; padding: .45rem .9rem .45rem 1rem; border-radius: 18px; /* slight rounded; not full pill so 2-line layout reads cleaner */ font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .15s; max-width: 100%; } /* Close × stays on row 1, sub-label flows to row 2 in narrow sidebars. */ .cml-cat__active-pill a > span[aria-hidden="true"] { margin-left: auto; } .cml-cat__active-pill a:hover { background: var(--cml-burgundy-2); color: #fff; } .cml-cat__active-pill a span { font-size: 1.05rem; font-weight: 400; opacity: .8; } .cml-cat__facet { margin-bottom: 1.5rem; } .cml-cat__facet h3 { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cml-ink); margin: 0 0 .35rem; } .cml-cat__facet-help { color: var(--cml-ink-3); font-size: .82rem; margin: 0 0 .75rem; } /* Pill chips */ .cml-cat__pills { display: flex; flex-wrap: wrap; gap: .45rem; } .cml-cat__pill { background: #fff; border: 1.5px solid var(--cml-line-2); color: var(--cml-ink); padding: .4rem 1rem; border-radius: 999px; font-family: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .15s; } .cml-cat__pill:hover { border-color: var(--cml-burgundy); color: var(--cml-burgundy); } .cml-cat__pill.is-active { background: var(--cml-burgundy); color: #fff; border-color: var(--cml-burgundy); } /* Body Area accordion */ .cml-cat__group { border-top: 1px solid var(--cml-line); padding: .65rem 0; } .cml-cat__group:last-of-type { border-bottom: 1px solid var(--cml-line); } .cml-cat__group summary { display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none; padding: .25rem 0; } .cml-cat__group summary::-webkit-details-marker { display: none; } .cml-cat__group summary::after { content: ""; width: 12px; height: 12px; border-right: 1.5px solid var(--cml-ink-2); border-bottom: 1.5px solid var(--cml-ink-2); transform: rotate(-45deg); margin-left: .15rem; transition: transform .15s; } .cml-cat__group[open] summary::after { transform: rotate(45deg) translate(-2px, -2px); } .cml-cat__group-name { flex: 1; display: flex; flex-direction: column; gap: .1rem; } .cml-cat__group-name strong { font-weight: 600; color: var(--cml-ink); font-size: .95rem; } .cml-cat__group-name em { font-style: normal; color: var(--cml-ink-3); font-size: .8rem; } .cml-cat__group-count { background: var(--cml-cream-2); color: var(--cml-ink-2); font-weight: 600; font-size: .8rem; padding: .15rem .55rem; border-radius: 999px; min-width: 26px; text-align: center; } .cml-cat__group-body { list-style: none; padding: .35rem 0 .55rem; margin: 0; } .cml-cat__group-body li { padding: .35rem 0; } .cml-cat__group-body label { display: flex; align-items: center; gap: .55rem; color: var(--cml-ink-2); cursor: pointer; font-size: .9rem; } .cml-cat__group-body input[type="checkbox"] { accent-color: var(--cml-burgundy); } .cml-cat__group-body em { margin-left: auto; color: var(--cml-ink-3); font-style: normal; font-size: .82rem; } /* Sessions radios */ .cml-cat__radios { list-style: none; padding: 0; margin: 0; } .cml-cat__radios li { padding: .25rem 0; } .cml-cat__radios label { display: flex; align-items: center; gap: .55rem; cursor: pointer; color: var(--cml-ink-2); font-size: .92rem; } .cml-cat__radios input[type="radio"] { accent-color: var(--cml-burgundy); } .cml-cat__radio-badge { display: inline-block; margin-left: .35rem; background: var(--cml-rose); color: var(--cml-burgundy); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; } /* Price slider */ .cml-cat__slider { width: 100%; accent-color: var(--cml-burgundy); } .cml-cat__slider-labels { display: flex; justify-content: space-between; margin-top: .25rem; font-size: .82rem; color: var(--cml-ink-3); } .cml-cat__slider-labels [data-cml-price-max] { color: var(--cml-ink); font-weight: 600; } /* WC fields we don't want shown — pre-filled with clinic address in CheckoutFields. */ .cml-hidden, .woocommerce-billing-fields__field-wrapper .cml-hidden, .cml-checkout-page form .form-row.cml-hidden { display: none !important; } /* Per-session label on tiles */ .cml-svc-tile__per { font-size: .75rem; color: var(--cml-ink-3); letter-spacing: .04em; margin-left: -.15rem; } /* Family tiles (stage-1 selection — Skin Treatments, Body, Facials, etc.) */ .cml-cat__grid--families { grid-template-columns: 1fr 1fr; } @media (min-width: 720px) { .cml-cat__grid--families { grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 1100px) { .cml-cat__grid--families { grid-template-columns: 1fr 1fr 1fr 1fr; } } .cml-fam-tile { background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; box-shadow: var(--cml-shadow-sm); } .cml-fam-tile:hover { transform: translateY(-3px); border-color: var(--cml-burgundy); box-shadow: var(--cml-shadow-md); } .cml-fam-tile__media { aspect-ratio: 5 / 3; background: linear-gradient(135deg, var(--cml-rose), var(--cml-cream-2)); color: var(--cml-burgundy); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .cml-fam-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cml-fam-tile__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; } .cml-fam-tile__name { font-family: var(--cml-serif); font-weight: 400; font-size: 1.2rem; margin: 0 0 .25rem; line-height: 1.2; color: var(--cml-ink); } .cml-fam-tile__count { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cml-ink-3); margin: 0 0 .6rem; } .cml-fam-tile__price { display: flex; align-items: baseline; gap: .35rem; margin-top: auto; } /* H1 sub-label for family-detail view ("Skin Treatments — Morpheus8") */ .cml-cat__h1-sub { font-style: italic; color: var(--cml-ink-2); font-weight: 400; font-size: .8em; } /* Active-pill sub-label — pushed to its own row inside the pill via `order` * and a 100% flex basis, so a long family name ("Body Skin Tightening") * stays readable on narrow sidebars instead of breaking mid-word. */ .cml-cat__active-pill-sub { order: 99; flex-basis: 100%; font-weight: 400; font-size: .82rem; opacity: .85; margin: .1rem 0 0 0; } /* ====== Static content pages (FAQ / Terms / Privacy / Contact / etc.) ====== */ .cml-static { background: var(--cml-cream); min-height: 60vh; } .cml-static__wrap { max-width: 820px; margin: 0 auto; padding: 2rem 1.25rem 4rem; } .cml-static__hero { margin-bottom: 1.5rem; } .cml-static__h1 { font-family: var(--cml-serif); font-weight: 400; font-size: clamp(2rem, 4vw + .4rem, 3rem); margin: .35rem 0 .5rem; color: var(--cml-ink); line-height: 1.1; } .cml-static__article { background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); box-shadow: var(--cml-shadow-sm); padding: 2rem 2.25rem; color: var(--cml-ink); line-height: 1.75; font-size: 1.02rem; } .cml-static__article h2, .cml-static__article h3 { font-family: var(--cml-serif); font-weight: 400; color: var(--cml-ink); margin: 1.75rem 0 .75rem; line-height: 1.25; } .cml-static__article h2 { font-size: 1.6rem; } .cml-static__article h3 { font-size: 1.2rem; } .cml-static__article h3:first-of-type, .cml-static__article h2:first-of-type { margin-top: 0; } .cml-static__article p { margin: 0 0 1rem; } .cml-static__article ul, .cml-static__article ol { padding-left: 1.25rem; margin: 0 0 1rem; } .cml-static__article li { margin: .35rem 0; } .cml-static__article a { color: var(--cml-burgundy); } .cml-static__article a:hover { color: var(--cml-burgundy-2); } .cml-static__article em { color: var(--cml-ink-3); } /* ====== Locations page ====== */ .cml-locations { background: var(--cml-cream); } .cml-locations__wrap { max-width: 1180px; margin: 0 auto; padding: 2rem 1.25rem 4rem; } .cml-locations__hero { margin-bottom: 2rem; } .cml-locations__h1 { font-family: var(--cml-serif); font-weight: 400; font-size: clamp(2rem, 4vw + .4rem, 3rem); margin: .35rem 0 .85rem; line-height: 1.1; } .cml-locations__meta { color: var(--cml-ink-3); font-size: .9rem; margin: 1rem 0 0; } .cml-locations__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 720px) { .cml-locations__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .cml-locations__grid { grid-template-columns: 1fr 1fr 1fr; } } .cml-loc-card { background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); overflow: hidden; box-shadow: var(--cml-shadow-sm); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .15s; } .cml-loc-card:hover { transform: translateY(-2px); border-color: var(--cml-burgundy-3); box-shadow: var(--cml-shadow-md); } .cml-loc-card__map { display: block; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--cml-cream-2), #ece3da); overflow: hidden; } .cml-loc-card__map img { display: block; width: 100%; height: 100%; object-fit: cover; } .cml-loc-card__map-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--cml-burgundy-3); } .cml-loc-card__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; } .cml-loc-card__name { font-family: var(--cml-serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 .5rem; color: var(--cml-ink); line-height: 1.2; } .cml-loc-card__addr, .cml-loc-card__hours, .cml-loc-card__phone { margin: .1rem 0; color: var(--cml-ink-2); font-size: .9rem; } .cml-loc-card__phone a { color: inherit; text-decoration: none; } .cml-loc-card__phone a:hover { color: var(--cml-burgundy); } .cml-loc-card__actions { display: flex; flex-direction: column; gap: .55rem; margin-top: auto; padding-top: 1rem; } .cml-loc-card__actions .cml-btn { width: 100%; } .cml-loc-card__directions { color: var(--cml-burgundy); font-weight: 500; font-size: .85rem; text-align: center; text-decoration: none; } .cml-loc-card__directions:hover { text-decoration: underline; } .cml-locations__empty { background: #fff; border: 1px dashed var(--cml-line-2); border-radius: var(--cml-radius-lg); padding: 3rem 1.5rem; text-align: center; color: var(--cml-ink-3); } /* Grid head */ .cml-cat__grid-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; flex-wrap: wrap; } .cml-cat__grid-count { color: var(--cml-ink-2); margin: 0; font-size: .9rem; } .cml-cat__grid { display: grid; grid-template-columns: 1fr 1fr; /* 2-up on mobile */ gap: .85rem; } @media (min-width: 540px) { .cml-cat__grid { gap: 1.25rem; } } @media (min-width: 1020px) { .cml-cat__grid { grid-template-columns: 1fr 1fr 1fr; } } /* Service tile (one per master/area) */ .cml-svc-tile { background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s, box-shadow .15s; box-shadow: var(--cml-shadow-sm); } .cml-svc-tile:hover { transform: translateY(-2px); border-color: var(--cml-burgundy-3); box-shadow: var(--cml-shadow-md); } .cml-svc-tile[hidden] { display: none; } .cml-svc-tile__media { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--cml-cream-2), #ece3da); display: flex; align-items: center; justify-content: center; color: var(--cml-burgundy-3); position: relative; overflow: hidden; } .cml-svc-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cml-svc-tile__placeholder { opacity: .4; } .cml-svc-tile__badge { position: absolute; top: .85rem; left: .85rem; background: #1f1f1f; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; /* Defensive sizing — pill must never inflate to a giant disc, even if a parent flex/grid tries to stretch absolutely-positioned children. */ width: max-content; max-width: calc(100% - 1.7rem); height: auto; line-height: 1.2; white-space: nowrap; box-sizing: border-box; z-index: 2; } /* Tag badge (e.g. Most Popular) — top-right, so it never collides with the top-left "Save $X" savings badge. */ .cml-svc-tile__badge--tag { left: auto; right: .85rem; background: #1f1f1f; } /* Tighter tile typography on small screens so 2-up reads cleanly. IMPORTANT: this @media block must come AFTER the base .cml-svc-tile__* rules above — otherwise the desktop rules (declared later in the cascade with equal specificity) override the mobile values and the mobile styles silently no-op. */ @media (max-width: 540px) { .cml-svc-tile__body { padding: .85rem .85rem 1rem; } .cml-svc-tile__name { font-size: 1.02rem; } .cml-svc-tile__sessions { font-size: .68rem; letter-spacing: .03em; margin: 0 0 .55rem; } .cml-svc-tile__from { font-size: .65rem; } .cml-svc-tile__amount { font-size: 1.1rem; } .cml-svc-tile__per { font-size: .68rem; } .cml-svc-tile__price { flex-wrap: wrap; row-gap: 0; } .cml-svc-tile__cta { font-size: .78rem; margin-top: .55rem; } /* Savings badge: bottom-LEFT on mobile so it doesn't sit on the model's face. */ .cml-svc-tile__badge { font-size: .6rem; padding: .2rem .5rem; top: auto; left: .55rem; bottom: .55rem; right: auto; letter-spacing: .06em; max-width: calc(100% - 1.1rem); } /* Tag badge (e.g. Most Popular): top-right on mobile so it doesn't collide with the savings badge at bottom-left. */ .cml-svc-tile__badge--tag { top: .55rem; bottom: auto; right: .55rem; left: auto; font-size: .6rem; padding: .2rem .5rem; } } .cml-svc-tile__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; } .cml-svc-tile__name { font-family: var(--cml-serif); font-weight: 400; font-size: 1.2rem; margin: 0 0 .35rem; line-height: 1.2; } .cml-svc-tile__name a { color: var(--cml-burgundy); text-decoration: none; } .cml-svc-tile__name a:hover { color: #7a1530; } .cml-svc-tile__sessions { font-size: .78rem; color: var(--cml-ink-3); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .65rem; } .cml-svc-tile__price { display: flex; align-items: baseline; gap: .35rem; margin-top: auto; } .cml-svc-tile__from { font-size: .72rem; color: var(--cml-ink-3); letter-spacing: .08em; text-transform: uppercase; } .cml-svc-tile__amount { font-family: var(--cml-serif); font-weight: 700; font-size: 1.45rem; color: var(--cml-ink); line-height: 1; } .cml-svc-tile__cta { display: block; width: 100%; margin-top: .75rem; padding: .3rem .75rem; background: var(--cml-burgundy); color: #fff; font-size: .78rem; font-weight: 500; letter-spacing: .02em; line-height: 1.2; text-align: center; text-decoration: none; border-radius: 4px; transition: background .15s; box-sizing: border-box; } .cml-svc-tile__cta:hover { background: #7a1530; text-decoration: none; color: #fff; } /* Desktop: shrink to content + padding, left-aligned, like a refined pill */ @media (min-width: 540px) { .cml-svc-tile__cta { width: auto; align-self: flex-start; padding: .4rem 1.5rem; margin-top: .85rem; font-size: .82rem; } } .cml-cat__no-results, .cml-cat__empty { background: #fff; border: 1px dashed var(--cml-line-2); border-radius: var(--cml-radius-md); padding: 2rem; text-align: center; color: var(--cml-ink-2); grid-column: 1 / -1; } /* Bundle promo strip */ .cml-cat__bundle { background: linear-gradient(135deg, var(--cml-burgundy), var(--cml-burgundy-2)); color: #fff; margin: 2rem 0; } .cml-cat__bundle-inner { max-width: 1280px; margin: 0 auto; padding: 2.5rem 1.25rem; text-align: center; } .cml-cat__bundle-eyebrow { display: inline-block; background: rgba(255,255,255,.16); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; margin-bottom: .55rem; } .cml-cat__bundle h2 { font-family: var(--cml-serif); font-weight: 400; font-size: clamp(1.6rem, 3vw + .4rem, 2.2rem); margin: 0 0 .55rem; color: #fff; line-height: 1.2; } .cml-cat__bundle p { max-width: 540px; margin: 0 auto 1.25rem; color: rgba(255,255,255,.92); font-size: .98rem; } .cml-cat__stack { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem 3rem; display: grid; gap: 1.25rem; } /* ====== Side cart drawer (mockup #05) ====== */ .cml-drawer-overlay { position: fixed; inset: 0; background: rgba(20, 12, 14, .45); z-index: 40; opacity: 0; transition: opacity .2s; pointer-events: none; } .cml-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .cml-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: #fff; z-index: 41; box-shadow: -8px 0 32px rgba(20,12,14,.18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1); } .cml-drawer.is-open { transform: translateX(0); } .cml-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--cml-line); } .cml-drawer__head h2 { font-family: var(--cml-serif); font-weight: 400; font-size: 1.5rem; margin: 0; color: var(--cml-ink); } .cml-drawer__clinic { font-size: .8rem; color: var(--cml-ink-3); margin: .25rem 0 0; letter-spacing: .04em; } .cml-drawer__close { background: transparent; border: 0; padding: .35rem; color: var(--cml-ink-2); cursor: pointer; margin: -.35rem -.35rem 0 0; } .cml-drawer__close:hover { color: var(--cml-burgundy); } /* The drawer body + foot live inside a wrapper div ([data-cml-drawer-contents]) so the Quickbuy REST response can swap them in one shot. That wrapper needs to become the flex parent for body+foot — otherwise body's `flex: 1` has no flex context and the drawer stops scrolling once items overflow. */ [data-cml-drawer-contents] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .cml-drawer__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem 1.5rem; } .cml-drawer__items { list-style: none; margin: 0; padding: 0; } .cml-drawer__item { display: grid; grid-template-columns: 60px 1fr; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--cml-line); } .cml-drawer__item:last-child { border-bottom: 0; } .cml-drawer__item-media { width: 60px; height: 60px; border-radius: var(--cml-radius-md); background: var(--cml-cream-2); overflow: hidden; display: flex; align-items: center; justify-content: center; } .cml-drawer__item-media img { width: 100%; height: 100%; object-fit: cover; } .cml-drawer__item-ph { color: var(--cml-burgundy-3); font-size: 1.4rem; opacity: .5; } .cml-drawer__item-name { font-family: var(--cml-serif); font-size: 1.02rem; font-weight: 400; margin: 0 0 .15rem; color: var(--cml-ink); line-height: 1.2; } .cml-drawer__item-tier { font-size: .78rem; color: var(--cml-ink-3); margin: 0 0 .35rem; } .cml-drawer__item-bottom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .cml-drawer__item-qty { color: var(--cml-ink-2); font-size: .88rem; } .cml-drawer__item-price { font-weight: 700; color: var(--cml-ink); } .cml-drawer__item-remove { color: var(--cml-ink-3); font-size: .78rem; text-decoration: underline; margin-top: .35rem; display: inline-block; } .cml-drawer__item-remove:hover { color: var(--cml-burgundy); } .cml-drawer__empty { text-align: center; padding: 2rem 1rem; color: var(--cml-ink-3); } .cml-drawer__empty svg { color: var(--cml-line-2); margin-bottom: .85rem; } .cml-drawer__empty p { margin: 0 0 1rem; } .cml-drawer__foot { padding: 1.25rem 1.5rem; border-top: 1px solid var(--cml-line); background: var(--cml-cream); } .cml-drawer__totals { margin-bottom: 1rem; } .cml-drawer__line { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; color: var(--cml-ink-2); font-size: .92rem; } .cml-drawer__line--muted span:last-child { color: var(--cml-ink-3); font-size: .85rem; } .cml-drawer__line--total { padding-top: .65rem; margin-top: .35rem; border-top: 1px solid var(--cml-line); color: var(--cml-ink); font-weight: 600; font-size: 1.05rem; } .cml-drawer__line--total span:last-child { font-family: var(--cml-serif); font-weight: 700; font-size: 1.25rem; } .cml-drawer__checkout { width: 100%; padding: .95rem; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .55rem; } .cml-drawer__view-full { display: block; text-align: center; color: var(--cml-burgundy); text-decoration: underline; font-weight: 500; font-size: .88rem; } /* ====== Cart page ====== */ .cml-cart-page { background: var(--cml-cream); } .cml-cart-page__hero { background: linear-gradient(180deg, #fff 0%, var(--cml-cream) 100%); border-bottom: 1px solid var(--cml-line); } .cml-cart-page__hero-inner { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 1.75rem; } .cml-cart-page__h1 { font-family: var(--cml-serif); font-weight: 400; font-size: clamp(1.8rem, 3vw + .5rem, 2.5rem); margin: .35rem 0 .55rem; color: var(--cml-ink); } .cml-cart-page__meta { font-size: .92rem; color: var(--cml-ink-2); margin: 0; } .cml-cart-page__meta strong { color: var(--cml-ink); font-weight: 600; } .cml-cart-page__wrap { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 880px) { .cml-cart-page__wrap { grid-template-columns: minmax(0, 1.4fr) minmax(320px, .9fr); gap: 2.5rem; } } .cml-cart-page__items { background: #fff; border-radius: var(--cml-radius-lg); border: 1px solid var(--cml-line); box-shadow: var(--cml-shadow-sm); overflow: hidden; } .cml-cart-item { display: grid; grid-template-columns: 80px 1fr auto auto; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--cml-line); align-items: center; } .cml-cart-item:last-child { border-bottom: 0; } @media (max-width: 600px) { .cml-cart-item { grid-template-columns: 70px 1fr; } .cml-cart-item__qty, .cml-cart-item__price { grid-column: 2; text-align: left; } .cml-cart-item__price { padding-top: .35rem; border-top: 1px dashed var(--cml-line); margin-top: .5rem; } } .cml-cart-item__media { width: 80px; height: 80px; border-radius: var(--cml-radius-md); background: var(--cml-cream-2); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--cml-burgundy-3); } .cml-cart-item__media img { width: 100%; height: 100%; object-fit: cover; } .cml-cart-item__name { font-family: var(--cml-serif); font-weight: 400; font-size: 1.1rem; margin: 0 0 .25rem; color: var(--cml-ink); line-height: 1.2; } .cml-cart-item__name a { color: inherit; text-decoration: none; } .cml-cart-item__name a:hover { color: var(--cml-burgundy); } .cml-cart-item__tier { font-size: .85rem; color: var(--cml-ink-2); margin: 0 0 .35rem; } .cml-cart-item__savings { font-size: .78rem; color: var(--cml-good); margin: 0; } .cml-cart-item__qty { font-size: 1rem; color: var(--cml-ink-2); font-weight: 600; } .cml-cart-item__price { text-align: right; } .cml-cart-item__was { display: block; font-size: .85rem; color: var(--cml-ink-3); text-decoration: line-through; } .cml-cart-item__now { font-family: var(--cml-serif); font-weight: 700; font-size: 1.25rem; color: var(--cml-ink); } .cml-cart-item__remove { display: block; font-size: .78rem; color: var(--cml-ink-3); text-decoration: underline; margin-top: .35rem; } .cml-cart-item__remove:hover { color: var(--cml-burgundy); } .cml-cart-page__summary { background: #fff; border-radius: var(--cml-radius-lg); border: 1px solid var(--cml-line); padding: 1.5rem; box-shadow: var(--cml-shadow-sm); align-self: start; } .cml-cart-page__summary h2 { font-family: var(--cml-serif); font-weight: 400; font-size: 1.3rem; margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--cml-line); } .cml-cart-page__coupon { margin-bottom: 1.25rem; } .cml-cart-page__coupon label { display: block; font-size: .82rem; font-weight: 600; color: var(--cml-ink-2); margin-bottom: .35rem; letter-spacing: .02em; text-transform: uppercase; } .cml-cart-page__coupon-row { display: flex; gap: .5rem; } .cml-cart-page__coupon-row input { flex: 1; border: 1px solid var(--cml-line-2); border-radius: var(--cml-radius-sm); padding: .65rem .75rem; font-family: inherit; font-size: .92rem; } .cml-cart-page__coupon-row input:focus { outline: 2px solid var(--cml-burgundy); outline-offset: -1px; } .cml-cart-page__totals { margin: 0; padding: 0; } .cml-cart-page__totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; } .cml-cart-page__totals dt { color: var(--cml-ink-2); font-weight: 500; margin: 0; } .cml-cart-page__totals dd { margin: 0; font-weight: 600; color: var(--cml-ink); } .cml-cart-page__tax-line dd { color: var(--cml-ink-3); } .cml-cart-page__discount-line dt { color: var(--cml-burgundy); font-weight: 600; } .cml-cart-page__discount-line dd { color: var(--cml-burgundy); } .cml-cart-page__remove-coupon { font-size: .78rem; font-weight: 400; color: var(--cml-ink-3); text-decoration: underline; margin-left: .35rem; } .cml-cart-page__remove-coupon:hover { color: var(--cml-burgundy); } /* ===== Order received / confirmation ===== */ .cml-confirm { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } .cml-confirm__hero { text-align: center; margin-bottom: 1.5rem; } .cml-confirm__check { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--cml-burgundy); color: #fff; margin-bottom: 1rem; } .cml-confirm__h1 { font-family: var(--cml-serif); font-size: 2.2rem; margin: 0 0 .35rem; color: var(--cml-ink); } .cml-confirm__lead { color: var(--cml-ink-2); margin: 0; } .cml-confirm__callout { display: flex; gap: .8rem; align-items: center; background: #f7eef0; border: 1px solid var(--cml-burgundy-3, #c14a64); border-radius: 12px; padding: 1rem 1.25rem; margin: 1.6rem 0; color: var(--cml-burgundy-2, #7d162f); } .cml-confirm__callout svg { flex: 0 0 auto; color: var(--cml-burgundy); } .cml-confirm__callout p { margin: 0; font-weight: 600; } .cml-confirm__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 1.5rem; margin: 1.5rem 0; padding: 1.25rem 1.4rem; border: 1px solid var(--cml-line); border-radius: 12px; } .cml-confirm__meta div { display: flex; flex-direction: column; gap: .15rem; } .cml-confirm__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cml-ink-3); margin: 0; } .cml-confirm__meta dd { margin: 0; font-weight: 600; color: var(--cml-ink); word-break: break-word; } .cml-confirm__order { margin: 1.75rem 0; } .cml-confirm__order h2 { font-family: var(--cml-serif); font-size: 1.3rem; margin: 0 0 .85rem; } .cml-confirm__items { list-style: none; margin: 0 0 .5rem; padding: 0; } .cml-confirm__items li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--cml-line); } .cml-confirm__item-name { margin: 0; font-weight: 600; color: var(--cml-ink); } .cml-confirm__item-tier { margin: .12rem 0 0; font-size: .85rem; color: var(--cml-ink-3); } .cml-confirm__item-price { margin: 0; font-weight: 600; white-space: nowrap; } .cml-confirm__pickup { margin: 1.25rem 0; color: var(--cml-ink-2); font-size: .92rem; } .cml-confirm__more { display: inline-block; margin-top: .5rem; } /* Post-purchase actions — prominent "Continue shopping" + subtle home link. */ .cml-confirm__actions { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 1.5rem; } .cml-confirm__continue { min-width: 260px; text-align: center; } .cml-confirm__home-link { color: var(--cml-ink-2); font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; } .cml-confirm__home-link:hover { color: var(--cml-burgundy); } @media (max-width: 560px) { .cml-confirm__meta { grid-template-columns: 1fr; } .cml-confirm__continue { width: 100%; min-width: 0; } } .cml-cart-page__total-line { padding-top: .85rem !important; margin-top: .35rem; border-top: 1px solid var(--cml-line); } .cml-cart-page__total-line dt { font-size: 1.05rem; font-weight: 600; color: var(--cml-ink); } .cml-cart-page__total-line dd { font-family: var(--cml-serif); font-weight: 700; font-size: 1.55rem; color: var(--cml-ink); } .cml-cart-page__checkout { display: block; width: 100%; margin: 1.25rem 0 .75rem; padding: 1rem; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; } /* Express-pay wrapper for Apple Pay / Google Pay buttons injected by Payment Plugins via the woocommerce_proceed_to_checkout action. Stacks them full-width below the Checkout button. */ .cml-cart-page__express-pay { display: flex; flex-direction: column; gap: .55rem; margin: .25rem 0 1rem; } .cml-cart-page__express-pay > * { width: 100%; } .cml-cart-page__express-pay button, .cml-cart-page__express-pay .apple-pay-button, .cml-cart-page__express-pay .gpay-card-info-container, .cml-cart-page__express-pay .wc-stripe-payment-request-button { width: 100% !important; min-height: 44px; border-radius: 6px; } .cml-cart-page__pickup-note { font-size: .8rem; color: var(--cml-ink-3); padding: .75rem 0 1rem; border-bottom: 1px solid var(--cml-line); margin: 0 0 1rem; } .cml-cart-page__pickup-note strong { color: var(--cml-ink-2); font-weight: 600; } .cml-cart-page__trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; } .cml-cart-page__trust li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--cml-ink-2); } .cml-cart-page__trust svg { color: var(--cml-burgundy); flex-shrink: 0; } .cml-cart-page__empty { max-width: 480px; margin: 3rem auto; text-align: center; padding: 3rem 1.5rem; background: #fff; border-radius: var(--cml-radius-lg); border: 1px dashed var(--cml-line-2); } .cml-cart-page__empty svg { color: var(--cml-line-2); margin-bottom: 1rem; } .cml-cart-page__empty p { color: var(--cml-ink-2); margin: 0 0 1.25rem; } /* ====== Checkout (mockup #06) ====== */ .cml-checkout-page { background: var(--cml-cream); } .cml-checkout__help { background: var(--cml-cream-2); border-bottom: 1px solid var(--cml-line); } .cml-checkout__help-inner { max-width: 1180px; margin: 0 auto; padding: .6rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--cml-ink-2); flex-wrap: wrap; } .cml-checkout__help strong { color: var(--cml-ink); font-weight: 600; } .cml-checkout__help-phone a { color: var(--cml-burgundy); font-weight: 600; text-decoration: none; margin-left: .25rem; } .cml-checkout__help-phone a:hover { text-decoration: underline; } .cml-checkout__wrap { max-width: 1180px; margin: 0 auto; padding: 2rem 1.25rem 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } /* Mobile: order summary above the form so the visitor sees what they're paying for before entering email / shipping / payment details. */ @media (max-width: 919px) { .cml-checkout__wrap .cml-checkout__summary { order: 1; } .cml-checkout__wrap .cml-checkout__form { order: 2; } } @media (min-width: 920px) { .cml-checkout__wrap { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .9fr); gap: 2.25rem; } } /* Step indicator bar */ .cml-checkout__steps-bar { background: #fff; border-bottom: 1px solid var(--cml-line); } .cml-checkout__steps-bar-inner { max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; } .cml-step-dot { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--cml-ink-3); letter-spacing: .04em; position: relative; } .cml-step-dot:not(:last-child)::after { content: ""; display: inline-block; width: 2rem; height: 1px; background: var(--cml-line-2); margin-left: 1rem; } .cml-step-dot.is-done, .cml-step-dot.is-active { cursor: pointer; } .cml-step-dot.is-done:hover span, .cml-step-dot.is-done:hover em { color: var(--cml-burgundy); } .cml-step-dot span { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cml-cream); border: 1.5px solid var(--cml-line-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--cml-ink-3); } .cml-step-dot em { font-style: normal; font-weight: 500; } .cml-step-dot.is-active span { background: var(--cml-burgundy); color: #fff; border-color: var(--cml-burgundy); } .cml-step-dot.is-active em { color: var(--cml-ink); font-weight: 600; } .cml-step-dot.is-done span { background: var(--cml-good); border-color: var(--cml-good); color: #fff; } .cml-step-dot.is-done span::after { content: "✓"; font-size: .8rem; } .cml-step-dot.is-done span > * { display: none; } /* Stepped form sections */ .cml-checkout__form { margin: 0; } .cml-checkout__step { background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); margin-bottom: 1rem; overflow: hidden; box-shadow: var(--cml-shadow-sm); transition: opacity .2s; } .cml-checkout__step.is-locked { opacity: .5; pointer-events: none; } .cml-checkout__step.is-locked .cml-checkout__step-body { display: none; } .cml-checkout__step.is-done .cml-checkout__step-body { display: none; } .cml-checkout__step.is-current { opacity: 1; } .cml-checkout__step-head { display: flex; align-items: center; gap: .85rem; padding: 1.25rem 1.5rem; } .cml-checkout__step-num { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--cml-cream); color: var(--cml-ink-2); border: 1.5px solid var(--cml-line-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--cml-serif); font-weight: 700; font-size: 1rem; flex-shrink: 0; } .cml-checkout__step.is-current .cml-checkout__step-num { background: var(--cml-burgundy); color: #fff; border-color: var(--cml-burgundy); } .cml-checkout__step.is-done .cml-checkout__step-num { background: var(--cml-good); border-color: var(--cml-good); color: #fff; } .cml-checkout__step-title { font-family: var(--cml-serif); font-weight: 400; font-size: 1.2rem; color: var(--cml-ink); margin: 0; flex: 1; } .cml-checkout__step-edit { background: transparent; border: 0; color: var(--cml-burgundy); font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0; } .cml-checkout__step.is-done .cml-checkout__step-edit { display: inline; } .cml-checkout__step-body { padding: 0 1.5rem 1.5rem; } .cml-checkout__continue { width: 100%; margin-top: 1.25rem; padding: .95rem; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; } .cml-checkout__step-error { color: var(--cml-burgundy-2); font-size: .88rem; margin: .75rem 0 0; padding: .55rem .75rem; background: #fcf6f8; border-radius: var(--cml-radius-sm); border-left: 3px solid var(--cml-burgundy); } /* Consent box */ .cml-checkout__consent { display: flex !important; align-items: flex-start; gap: .65rem; margin: 1rem 0 0; padding: .85rem 1rem; background: var(--cml-cream); border: 1px solid var(--cml-line); border-radius: var(--cml-radius-md); font-size: .88rem; color: var(--cml-ink-2); line-height: 1.5; cursor: pointer; } .cml-checkout__consent input { margin-top: .2rem; accent-color: var(--cml-burgundy); flex-shrink: 0; } .cml-checkout__step-body label { display: block; font-size: .82rem; color: var(--cml-ink-2); font-weight: 500; margin-bottom: .25rem; margin-top: .85rem; } .cml-checkout__step-body input[type="text"], .cml-checkout__step-body input[type="email"], .cml-checkout__step-body input[type="tel"] { width: 100%; padding: .75rem .85rem; border: 1px solid var(--cml-line-2); border-radius: var(--cml-radius-sm); font-family: inherit; font-size: 1rem; background: #fff; } .cml-checkout__step-body input:focus { outline: 2px solid var(--cml-burgundy); outline-offset: -1px; border-color: var(--cml-burgundy); } .cml-checkout__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 540px) { .cml-checkout__row { grid-template-columns: 1fr; } } .cml-checkout__checkbox { display: flex !important; align-items: center; gap: .55rem; margin: 1rem 0 0; font-size: .9rem; color: var(--cml-ink-2); cursor: pointer; } .cml-checkout__checkbox input { accent-color: var(--cml-burgundy); } .cml-checkout__terms { font-size: .8rem; color: var(--cml-ink-3); margin: 1rem 0 0; } .cml-checkout__terms a { color: var(--cml-burgundy); text-decoration: underline; } .cml-checkout__note { font-size: .82rem; color: var(--cml-ink-3); margin: 1rem 0 0; font-style: italic; } /* Express checkout — real Apple Pay / Google Pay buttons injected here by Payment Plugins via the woocommerce_review_order_before_payment action. */ .cml-checkout__express { background: var(--cml-cream); border-radius: var(--cml-radius-md); padding: 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .55rem; } .cml-checkout__express:empty { display: none; /* hide the cream box entirely when no buttons mount */ } .cml-checkout__express:empty + .cml-checkout__or--auto-hide { display: none; /* hide the "or pay with card" divider too */ } .cml-checkout__express > * { width: 100%; } .cml-checkout__express button, .cml-checkout__express .apple-pay-button, .cml-checkout__express .gpay-card-info-container, .cml-checkout__express .wc-stripe-payment-request-button { width: 100% !important; min-height: 44px; border-radius: 6px; } .cml-checkout__express-label { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cml-ink-3); margin: 0 0 .55rem; } .cml-checkout__express-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; } @media (max-width: 540px) { .cml-checkout__express-row { grid-template-columns: 1fr; } } .cml-checkout__express-btn { background: var(--cml-ink); color: #fff; border: 0; padding: .75rem 1rem; border-radius: var(--cml-radius-sm); font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; cursor: pointer; opacity: .5; } .cml-checkout__express-btn--google { background: #4285f4; } .cml-checkout__express-btn--link { background: #00d4a3; color: var(--cml-ink); } .cml-checkout__express-note { font-size: .75rem; color: var(--cml-ink-3); margin: .65rem 0 0; text-align: center; } .cml-checkout__or { text-align: center; margin: 1rem 0; position: relative; } .cml-checkout__or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--cml-line); } .cml-checkout__or span { background: #fff; padding: 0 .75rem; color: var(--cml-ink-3); font-size: .82rem; letter-spacing: .04em; position: relative; } .cml-checkout__no-gateways { background: #fdf6e8; border: 1px solid #f0e2c0; border-radius: var(--cml-radius-md); padding: 1rem; font-size: .88rem; color: var(--cml-ink-2); } .cml-checkout__no-gateways p { margin: 0 0 .5rem; } .cml-checkout__no-gateways p:last-child { margin: 0; } .cml-checkout__place-order { width: 100%; margin-top: 1.25rem; padding: 1.1rem; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; } /* RIGHT: summary */ .cml-checkout__summary { background: #fff; border-radius: var(--cml-radius-lg); border: 1px solid var(--cml-line); padding: 1.5rem; align-self: start; box-shadow: var(--cml-shadow-sm); } .cml-checkout__summary h2 { font-family: var(--cml-serif); font-weight: 400; font-size: 1.3rem; margin: 0 0 .25rem; } .cml-checkout__summary-clinic { font-size: .82rem; color: var(--cml-ink-3); margin: 0 0 1.25rem; padding-bottom: .85rem; border-bottom: 1px solid var(--cml-line); } /* Promo-code form on the order summary. Mirrors the cart page coupon styling so the visual stays consistent across both surfaces. */ .cml-checkout__coupon { margin: 0 0 1rem; } .cml-checkout__coupon label { display: block; font-size: .8rem; font-weight: 600; color: var(--cml-ink-2); margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .04em; } .cml-checkout__coupon-row { display: flex; gap: .5rem; } .cml-checkout__coupon-row input { flex: 1; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--cml-line); border-radius: 6px; font-size: .9rem; background: #fff; box-sizing: border-box; } .cml-checkout__coupon-row input:focus { outline: 2px solid var(--cml-burgundy); outline-offset: -1px; } .cml-checkout__coupon-row button { white-space: nowrap; padding: .55rem 1rem; } .cml-checkout__summary-items { list-style: none; padding: 0; margin: 0 0 1.25rem; } .cml-checkout__summary-items li { display: grid; grid-template-columns: 48px 1fr auto; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--cml-line); align-items: center; } .cml-checkout__summary-items li:last-child { border-bottom: 0; } .cml-checkout__summary-media { width: 48px; height: 48px; background: var(--cml-cream-2); border-radius: var(--cml-radius-sm); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cml-checkout__summary-media img { width: 100%; height: 100%; object-fit: cover; } .cml-checkout__summary-ph { color: var(--cml-burgundy-3); opacity: .5; } .cml-checkout__summary-qty { position: absolute; top: -.4rem; right: -.4rem; background: var(--cml-ink); color: #fff; font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } .cml-checkout__summary-name { font-family: var(--cml-serif); font-size: .98rem; margin: 0 0 .15rem; color: var(--cml-ink); } .cml-checkout__summary-end { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; } /* Explicit "N × $price each" breakdown shown when qty > 1, so multi-package line items don't rely on a small corner badge to convey the quantity. */ .cml-checkout__summary-qty-line, .cml-drawer__item-qty-line { margin: .25rem 0 0; font-size: .82rem; font-weight: 600; color: var(--cml-ink); display: inline-block; background: var(--cml-cream-2, #f5efe9); padding: .15rem .55rem; border-radius: 999px; } .cml-checkout__summary-remove { font-size: .75rem; color: var(--cml-ink-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .cml-checkout__summary-remove:hover { color: var(--cml-burgundy); } .cml-checkout__summary-tier { font-size: .78rem; color: var(--cml-ink-3); margin: 0; } .cml-checkout__summary-price { font-weight: 600; color: var(--cml-ink); margin: 0; } /* ----- Buttons ----- */ .cml-btn { box-sizing: border-box; /* width:100% must include padding + border */ display: inline-flex; align-items: center; justify-content: center; font-family: var(--cml-sans); font-weight: 600; font-size: .9rem; letter-spacing: .02em; padding: .7rem 1.25rem; border-radius: 999px; text-decoration: none; transition: background .15s, color .15s, border-color .15s; border: 1.5px solid transparent; cursor: pointer; } /* Form inputs use the same box model so they line up with buttons */ .cml-pdp-page input[type="text"], .cml-pdp-page input[type="email"], .cml-pdp-page input[type="tel"], .cml-pdp-page select, .cml-cart-page input[type="text"], .cml-checkout-page input, .cml-checkout-page select, .cml-cart-page__coupon-row input, .cml-cart-page__coupon-row button { box-sizing: border-box; } .cml-btn--primary { background: var(--cml-burgundy); color: #fff; } .cml-btn--primary:hover { background: var(--cml-burgundy-2); color: #fff; } .cml-btn--ghost { background: transparent; color: var(--cml-burgundy); border-color: var(--cml-burgundy); } .cml-btn--ghost:hover { background: var(--cml-rose); } .cml-btn--invert { background: #fff; color: var(--cml-burgundy); } .cml-btn--invert:hover { background: var(--cml-cream); } /* ----- Content stack ----- */ .cml-pdp__stack { display: grid; gap: 1.25rem; } .cml-pdp__block { background: #fff; border: 1px solid var(--cml-line); border-radius: var(--cml-radius-lg); padding: 2rem; box-shadow: var(--cml-shadow-sm); } .cml-pdp__h2 { font-family: var(--cml-serif); font-weight: 400; font-size: 1.7rem; margin: 0 0 1.25rem; padding-bottom: .6rem; color: var(--cml-ink); line-height: 1.2; position: relative; } .cml-pdp__h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--cml-burgundy), var(--cml-gold)); } .cml-pdp__h3 { font-family: var(--cml-sans); font-size: .98rem; font-weight: 600; margin: 1.4rem 0 .6rem; color: var(--cml-ink); } .cml-pdp__block p { color: var(--cml-ink-2); margin: 0 0 .85rem; } /* How it works — floating-number step cards */ .cml-pdp__how-steps { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1.25rem; } @media (min-width: 720px) { .cml-pdp__how-steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } .cml-pdp__how-steps li { position: relative; margin-top: 1.4rem; padding: 2.5rem 1.4rem 1.5rem; background: linear-gradient(180deg, var(--cml-rose) 0%, #fff 55%); border: 1px solid var(--cml-line); border-radius: 16px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .cml-pdp__how-steps li:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(156,28,60,.5); border-color: var(--cml-burgundy-3); } .cml-pdp__how-num { position: absolute; top: -1.4rem; left: 1.4rem; display: inline-flex; align-items: center; justify-content: center; width: 2.85rem; height: 2.85rem; border-radius: 50%; background: linear-gradient(150deg, var(--cml-burgundy-3), var(--cml-burgundy)); color: #fff; font-family: var(--cml-serif); font-weight: 600; font-size: 1.2rem; border: 3px solid #fff; box-shadow: 0 8px 18px -8px rgba(156,28,60,.65); margin: 0; } .cml-pdp__how-steps h3 { font-family: var(--cml-sans); font-weight: 600; font-size: 1.05rem; margin: 0 0 .5rem; color: var(--cml-ink); } .cml-pdp__how-steps p { font-size: .92rem; line-height: 1.6; margin: 0; } /* Checklists */ .cml-pdp__check { list-style: none; padding: 0; margin: 0; } .cml-pdp__check li { position: relative; padding: .45rem 0 .45rem 2rem; color: var(--cml-ink); line-height: 1.5; } .cml-pdp__check li::before { content: ""; position: absolute; left: 0; top: .65rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--cml-rose) url("data:image/svg+xml;utf8,") center/.8rem no-repeat; } .cml-pdp__check--rg li::before { background-color: #fbeed5; background-image: url("data:image/svg+xml;utf8,"); } /* FAQ — card accordion */ .cml-pdp__faq-item { background: #fff; border: 1px solid var(--cml-line); border-radius: 14px; margin: 0 0 .7rem; padding: 0 1.25rem; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .cml-pdp__faq-item:last-child { margin-bottom: 0; } .cml-pdp__faq-item:hover { border-color: var(--cml-burgundy-3); } .cml-pdp__faq-item[open] { background: var(--cml-rose); border-color: var(--cml-burgundy-3); box-shadow: 0 12px 28px -20px rgba(156,28,60,.55); } .cml-pdp__faq-item summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; color: var(--cml-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; } .cml-pdp__faq-item[open] summary { color: var(--cml-burgundy); } .cml-pdp__faq-item summary::-webkit-details-marker { display: none; } .cml-pdp__faq-item summary::after { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--cml-rose) url("data:image/svg+xml;utf8,") center/13px no-repeat; transition: transform .2s ease, background-color .2s ease; flex-shrink: 0; } .cml-pdp__faq-item[open] summary::after { background-color: var(--cml-burgundy); background-image: url("data:image/svg+xml;utf8,"); transform: rotate(180deg); } .cml-pdp__faq-a { padding-bottom: 1.15rem; color: var(--cml-ink-2); line-height: 1.65; font-size: .95rem; } .cml-pdp__faq-a p:last-child { margin-bottom: 0; } /* Contraindications */ .cml-pdp__contra { background: #fdf6e8; border: 1px solid #f0e2c0; border-left: 4px solid var(--cml-gold); } .cml-pdp__contra .cml-pdp__h2 { color: #6e5320; } .cml-pdp__contra-intro { font-weight: 500; color: var(--cml-ink); } .cml-pdp__contra-list { padding-left: 1.2rem; margin: 0 0 1rem; } .cml-pdp__contra-list li { margin: .55rem 0; color: var(--cml-ink-2); line-height: 1.6; } /* Long form — editorial layout with labelled lead-ins */ .cml-pdp__longform { max-width: 72ch; } .cml-pdp__longform p { line-height: 1.8; margin: 0 0 1.4rem; color: var(--cml-ink-2); } .cml-pdp__longform p:first-of-type { font-size: 1.08rem; line-height: 1.7; color: var(--cml-ink); } .cml-pdp__longform p:last-of-type { margin-bottom: 0; } .cml-pdp__longform strong { color: var(--cml-ink); } /* A paragraph that opens with a bold lead-in becomes a labelled subsection. */ .cml-pdp__longform p > strong:first-child { display: block; margin-bottom: .35rem; font-family: var(--cml-sans); font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cml-burgundy); } /* Final consult CTA — gradient panel with sparkle */ .cml-pdp__consult-cta { position: relative; overflow: hidden; text-align: center; border-radius: var(--cml-radius-lg); padding: 3.25rem 2rem; color: #fff; background: radial-gradient(circle at 50% -25%, rgba(255,255,255,.18), transparent 55%), linear-gradient(135deg, var(--cml-burgundy) 0%, var(--cml-burgundy-2) 100%); } .cml-pdp__consult-cta::before { content: ""; display: block; width: 38px; height: 38px; margin: 0 auto 1rem; background: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .cml-pdp__consult-cta-h { position: relative; font-family: var(--cml-serif); font-weight: 400; font-size: 2rem; color: #fff; margin: 0 0 .85rem; line-height: 1.2; } .cml-pdp__consult-cta p { position: relative; color: rgba(255,255,255,.9); margin: 0 auto 1.6rem; max-width: 540px; line-height: 1.6; } .cml-pdp__consult-cta .cml-btn { position: relative; } /* FAQ moved to the end of the content stack (PDP + category page) */ .cml-pdp__stack > .cml-pdp__faq, .cml-cat__stack > .cml-pdp__faq { order: 5; } /* About this treatment — optional image to the right */ .cml-pdp__longform-grid { display: grid; gap: 1.5rem; align-items: start; } .cml-pdp__longform-body { min-width: 0; } .cml-pdp__longform--split { max-width: none; } @media (min-width: 760px) { .cml-pdp__longform--split .cml-pdp__longform-grid { grid-template-columns: 2fr 1fr; gap: 2.5rem; } .cml-pdp__longform-media { position: sticky; top: 1.5rem; } } .cml-pdp__longform-media { margin: 0; } .cml-pdp__longform-media img { width: 100%; max-height: 560px; object-fit: cover; border-radius: 14px; display: block; } /* "Make the most of your appointment" — tabbed Prep / Aftercare / Best Results */ .cml-appt__tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--cml-line); margin: 0 0 1.6rem; } .cml-appt__tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-family: var(--cml-serif); font-size: 1.15rem; color: var(--cml-ink-3); padding: .6rem 1.15rem; transition: color .15s ease, border-color .15s ease; } .cml-appt__tab:hover { color: var(--cml-ink); } .cml-appt__tab.is-active { color: var(--cml-burgundy); border-bottom-color: var(--cml-burgundy); font-style: italic; } .cml-appt__pane { display: none; } .cml-appt__pane.is-active { display: block; } @media (min-width: 760px) { .cml-appt__pane.is-active:has(.cml-appt__media) { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 2.25rem; align-items: start; } } .cml-appt__media { margin: 0; } .cml-appt__media img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; display: block; } .cml-appt__list { margin: 0; padding: 0; list-style: none; } .cml-appt__list li { position: relative; padding: 0 0 .8rem 1.6rem; color: var(--cml-ink-2); line-height: 1.6; } .cml-appt__list li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 7px; height: 7px; border-radius: 50%; background: var(--cml-burgundy); } .cml-appt__list li:last-child { padding-bottom: 0; } .cml-appt__list a { color: var(--cml-burgundy); } /* ---- HQ announcement bar (Content Manager) ---- */ .cml-announce { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; background: var(--cml-burgundy, #9c1c3c); color: #fff; padding: .6rem 1.25rem; font-size: .95rem; text-align: center; } .cml-announce__text { font-weight: 500; } .cml-announce__cta { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; } .cml-announce__cta:hover { opacity: .85; } /* ---- Location SEO: "About this location" block on the shop archive ---- */ .cml-archive__location-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem 3rem; /* match .cml-archive__wrap's horizontal padding */ } .cml-archive__about { margin: 2.5rem 0 0.5rem; padding: 1.75rem 1.85rem; background: var(--cml-cream, #faf7f4); border: 1px solid var(--cml-line, #ebe7e2); border-radius: 14px; } .cml-archive__about-h { font-size: 1.25rem; margin: 0 0 .65rem; color: var(--cml-burgundy, #9c1c3c); } .cml-archive__about-text { margin: 0 0 1rem; max-width: 760px; color: var(--cml-ink-2, #555); line-height: 1.65; } .cml-archive__about-nap { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; font-size: .92rem; color: var(--cml-ink-2, #555); } .cml-archive__about-nap li { margin: 0; } .cml-archive__about-nap strong { color: var(--cml-ink, #1a1a1a); font-weight: 600; } .cml-archive__about-nap a { color: var(--cml-burgundy, #9c1c3c); text-decoration: none; } .cml-archive__about-nap a:hover { text-decoration: underline; } /* About: two-column (text left, clinic image right) + map below */ .cml-archive__about-body { min-width: 0; } @media (min-width: 760px) { .cml-archive__about--split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; } } .cml-archive__about-media { margin: 0; } .cml-archive__about-media { height: 100%; } .cml-archive__about-media img { width: 100%; height: 100%; min-height: 320px; max-height: 480px; object-fit: cover; border-radius: 14px; display: block; } .cml-archive__map { margin: 1rem 0 0; } .cml-archive__map iframe { display: block; width: 100%; height: 380px; border: 1px solid var(--cml-line, #ebe7e2); border-radius: 14px; } /* Hide "/session" suffix on archive tiles — keeps price line clean ("From $X") */ .cml-svc-tile__per { display: none; } /* ======================================================================= QUICK-BUY MODAL — opens from each tile's "Buy now" button. Centered modal on desktop, bottom sheet on mobile. ======================================================================= */ .cml-quickbuy { position: fixed; inset: 0; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .cml-quickbuy.is-open { opacity: 1; pointer-events: auto; } .cml-quickbuy__backdrop { position: absolute; inset: 0; background: rgba(15, 15, 15, .55); } .cml-quickbuy__sheet { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); padding: 1.75rem 1.75rem 1.5rem; box-sizing: border-box; transition: transform .22s ease; } .cml-quickbuy.is-open .cml-quickbuy__sheet { transform: translate(-50%, -50%); } .cml-quickbuy__close { position: absolute; top: .75rem; right: .85rem; background: transparent; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--cml-ink-3); padding: .25rem .5rem; } .cml-quickbuy__close:hover { color: var(--cml-ink); } .cml-quickbuy__title { font-family: var(--cml-serif); font-weight: 500; font-size: 1.45rem; margin: 0 2rem .35rem 0; color: var(--cml-ink); line-height: 1.2; } .cml-quickbuy__service { margin: 0 0 .25rem; font-weight: 600; color: var(--cml-burgundy); font-size: .95rem; } .cml-quickbuy__sub { margin: 0 0 1.25rem; color: var(--cml-ink-3); font-size: .88rem; } /* Package cards grid */ .cml-quickbuy__packages { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; } .cml-quickbuy__pkg { display: block; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--cml-line, #ebe7e2); border-radius: 10px; padding: .85rem .9rem; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; position: relative; } .cml-quickbuy__pkg:hover { border-color: var(--cml-burgundy-3, #d3a5b2); } .cml-quickbuy__pkg.is-selected { border-color: var(--cml-burgundy); box-shadow: 0 0 0 1px var(--cml-burgundy); } .cml-quickbuy__pkg-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .cml-quickbuy__pkg-label { font-weight: 700; font-size: .98rem; color: var(--cml-ink); } .cml-quickbuy__pkg-badge { background: #1f1f1f; color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; } .cml-quickbuy__pkg-price { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .15rem; } .cml-quickbuy__pkg-price strong { font-family: var(--cml-serif); font-size: 1.15rem; color: var(--cml-burgundy); font-weight: 700; } .cml-quickbuy__pkg-price s { color: var(--cml-ink-3); font-size: .85rem; } .cml-quickbuy__pkg-per { font-size: .78rem; color: var(--cml-ink-3); } /* Footer total + actions */ .cml-quickbuy__footer { border-top: 1px solid var(--cml-line); padding-top: 1rem; } .cml-quickbuy__total-line { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; } .cml-quickbuy__total-label { font-size: .85rem; color: var(--cml-ink-3); text-transform: uppercase; letter-spacing: .05em; } .cml-quickbuy__total-amount { font-family: var(--cml-serif); font-size: 1.45rem; color: var(--cml-ink); } .cml-quickbuy__total-save { margin-left: auto; background: #eaf6ea; color: #2d6a37; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .25rem .65rem; border-radius: 999px; } .cml-quickbuy__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; } .cml-quickbuy__btn { padding: .65rem 1rem; border-radius: 6px; font-size: .95rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s; box-sizing: border-box; border: 1.5px solid var(--cml-burgundy); } .cml-quickbuy__btn--ghost { background: #fff; color: var(--cml-burgundy); } .cml-quickbuy__btn--ghost:hover { background: #fbeef2; } .cml-quickbuy__btn--primary { background: var(--cml-burgundy); color: #fff; } .cml-quickbuy__btn--primary:hover { background: #7a1530; border-color: #7a1530; } .cml-quickbuy__btn.is-busy { opacity: .6; cursor: wait; } .cml-quickbuy__error { margin: .75rem 0 0; padding: .5rem .75rem; background: #fdecec; color: #8a1f1f; font-size: .85rem; border-radius: 6px; } /* Toast (fallback when no cart drawer is present) */ .cml-qb-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 1rem); background: #1f1f1f; color: #fff; padding: .6rem 1rem; border-radius: 6px; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10001; } .cml-qb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* Body scroll lock while modal is open */ body.cml-qb-locked { overflow: hidden; } /* Mobile — full-width bottom sheet */ @media (max-width: 540px) { .cml-quickbuy__sheet { top: auto; bottom: 0; left: 0; transform: translateY(20px); width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; padding: 1.25rem 1.1rem 1.25rem; } .cml-quickbuy.is-open .cml-quickbuy__sheet { transform: translateY(0); } .cml-quickbuy__title { font-size: 1.2rem; } .cml-quickbuy__packages { gap: .55rem; } .cml-quickbuy__pkg { padding: .7rem .8rem; } .cml-quickbuy__pkg-label { font-size: .9rem; } .cml-quickbuy__pkg-price strong { font-size: 1.05rem; } .cml-quickbuy__actions { grid-template-columns: 1fr; } .cml-quickbuy__btn--primary { order: -1; } /* Buy now on top on mobile, like the reference */ } /* ======================================================================= UPSELL MODAL — "Complete your treatment plan" prompt shown between Buy now / Checkout click and the actual /checkout/ redirect. ======================================================================= */ .cml-upsell { position: fixed; inset: 0; z-index: 10010; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .cml-upsell.is-open { opacity: 1; pointer-events: auto; } .cml-upsell__backdrop { position: absolute; inset: 0; background: rgba(15,15,15,.55); } .cml-upsell__sheet { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); width: min(720px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); padding: 1.75rem 1.75rem 1.5rem; box-sizing: border-box; transition: transform .22s ease; } .cml-upsell.is-open .cml-upsell__sheet { transform: translate(-50%, -50%); } .cml-upsell__close { position: absolute; top: .75rem; right: .85rem; background: transparent; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--cml-ink-3); padding: .25rem .5rem; } .cml-upsell__close:hover { color: var(--cml-ink); } .cml-upsell__title { font-family: var(--cml-serif); font-weight: 500; font-size: 1.4rem; margin: 0 2rem .35rem 0; color: var(--cml-burgundy); line-height: 1.2; } .cml-upsell__sub { margin: 0 0 1.25rem; color: var(--cml-ink-3); font-size: .88rem; } .cml-upsell__cards { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: 1.25rem; } .cml-upsell__card { display: grid; grid-template-columns: 72px 1fr auto; gap: .85rem; align-items: center; border: 1px solid var(--cml-line); border-radius: 10px; padding: .75rem .85rem; background: #fff; transition: border-color .15s, opacity .15s; } .cml-upsell__card.is-added { border-color: #2d6a37; background: #f5fbf5; } .cml-upsell__pkg-media { width: 72px; height: 72px; background: var(--cml-cream-2); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cml-upsell__pkg-media img { width: 100%; height: 100%; object-fit: cover; } .cml-upsell__pkg-ph { color: var(--cml-burgundy-3); opacity: .5; font-size: 1.4rem; } .cml-upsell__pkg-name { font-family: var(--cml-serif); font-size: 1rem; margin: 0 0 .1rem; color: var(--cml-ink); font-weight: 500; } .cml-upsell__pkg-tier { margin: 0 0 .25rem; font-size: .78rem; color: var(--cml-ink-3); } .cml-upsell__pkg-desc { margin: 0 0 .4rem; font-size: .82rem; color: var(--cml-ink-2); line-height: 1.35; /* Clamp to two lines so a long description can't blow up card height. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cml-upsell__pkg-price { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; } .cml-upsell__pkg-price strong { font-family: var(--cml-serif); color: var(--cml-burgundy); font-size: 1.05rem; font-weight: 700; } .cml-upsell__pkg-price s { color: var(--cml-ink-3); font-size: .82rem; } .cml-upsell__chip { background: #eaf6ea; color: #2d6a37; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 999px; text-transform: uppercase; } .cml-upsell__add { padding: .5rem 1rem; border-radius: 6px; border: 1.5px solid var(--cml-burgundy); background: #fff; color: var(--cml-burgundy); font-weight: 600; font-size: .88rem; cursor: pointer; min-width: 78px; transition: background .15s, color .15s; } .cml-upsell__add:hover { background: var(--cml-burgundy); color: #fff; } .cml-upsell__add .cml-upsell__add-added { display: none; } .cml-upsell__card.is-added .cml-upsell__add { border-color: #2d6a37; background: #2d6a37; color: #fff; cursor: default; } .cml-upsell__card.is-added .cml-upsell__add-default { display: none; } .cml-upsell__card.is-added .cml-upsell__add-added { display: inline; } .cml-upsell__footer { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; border-top: 1px solid var(--cml-line); padding-top: 1rem; } .cml-upsell__btn { padding: .65rem 1rem; border-radius: 6px; font-size: .95rem; font-weight: 500; cursor: pointer; border: 1.5px solid var(--cml-burgundy); transition: background .15s, color .15s; box-sizing: border-box; } .cml-upsell__btn--ghost { background: #fff; color: var(--cml-burgundy); } .cml-upsell__btn--ghost:hover { background: #fbeef2; } .cml-upsell__btn--primary { background: var(--cml-burgundy); color: #fff; } .cml-upsell__btn--primary:hover { background: #7a1530; border-color: #7a1530; } @media (max-width: 540px) { .cml-upsell__sheet { top: auto; bottom: 0; left: 0; transform: translateY(20px); width: 100%; /* Pin the sheet to a true safe viewport. `svh` excludes the iOS address bar; older browsers fall back to `vh`. Cap at 95% so the sheet never quite touches the very top of the screen — gives the user a visible anchor that this is a modal. */ height: 95vh; height: 95svh; max-height: 95svh; border-radius: 16px 16px 0 0; padding: 1.25rem 1.1rem 1.25rem; /* Critical: stop the whole sheet from scrolling; cards scroll inside. */ display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } .cml-upsell.is-open .cml-upsell__sheet { transform: translateY(0); } .cml-upsell__title { font-size: 1.15rem; flex-shrink: 0; } .cml-upsell__sub { flex-shrink: 0; } /* Cards become the only scrollable region — title pinned at top, footer pinned at bottom. */ .cml-upsell__cards { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } .cml-upsell__card { grid-template-columns: 60px 1fr; } .cml-upsell__add { grid-column: 1 / -1; justify-self: end; } .cml-upsell__footer { grid-template-columns: 1fr; flex-shrink: 0; /* Respect iPhone home-indicator safe area. */ padding-bottom: env(safe-area-inset-bottom); } .cml-upsell__btn--primary { order: -1; } } /* ============================================================ Stripe (Payment Plugins) inline card field The Stripe Elements card input mounts with no border/box of its own, so it reads as floating placeholder text. Wrap it in a proper input-looking container so customers see a field. ============================================================ */ .payment_method_stripe_cc .wc-stripe_cc-new-method-container, .wc-stripe_cc-container .wc-stripe-card-element, .wc-stripe-elements-field, .wc-stripe-card-element { background: #fff; border: 1px solid #cdcad2; border-radius: 8px; padding: .85rem 1rem; margin: .35rem 0 .25rem; transition: border-color .15s ease, box-shadow .15s ease; } /* Focus ring — Payment Plugins toggles .StripeElement--focus on the mount. */ .wc-stripe-card-element.StripeElement--focus, .wc-stripe-elements-field.StripeElement--focus, .payment_method_stripe_cc .wc-stripe_cc-new-method-container:focus-within { border-color: var(--cml-burgundy); box-shadow: 0 0 0 3px rgba(156, 28, 60, .12); } .wc-stripe-card-element.StripeElement--invalid, .wc-stripe-elements-field.StripeElement--invalid { border-color: #d63638; } /* Card-brand icons row — give it a little breathing room above the field. */ .wc-stripe-card-icons-container { margin-bottom: .35rem; } /* Mobile: give the inline Stripe card field maximum horizontal room so the card number doesn't crowd the expiry/CVC mid-typing. Trims the container's side padding on small screens — purely cosmetic, no effect on the payment flow (the Stripe Element + confirmation are untouched). */ @media (max-width: 600px) { .payment_method_stripe_cc .wc-stripe_cc-new-method-container, .wc-stripe_cc-container .wc-stripe-card-element, .wc-stripe-elements-field, .wc-stripe-card-element { padding-left: .55rem; padding-right: .55rem; } } /* Ensure [hidden] always wins over display set by component classes. */ [hidden] { display: none !important; } /* ── Checkout payment-method list — constrain wallet button sizes ───────── Payment Plugins 4.0.0 renders Apple Pay / Google Pay / Afterpay buttons without our previous wrapper widths, so they default to full-bleed. Cap them inside the payment-method list. Doesn't affect the express-checkout row at the top of cart/checkout (that uses .cml-checkout__express). */ .cml-checkout__gateways .payment_box .apple-pay-button, .cml-checkout__gateways .payment_box .wc-stripe-payment-request-button, .cml-checkout__gateways .payment_box .gpay-card-info-container { width: 100% !important; max-width: 360px !important; min-height: 40px; height: 44px !important; border-radius: 6px; display: block; } .cml-checkout__gateways .payment_box img { max-height: 36px; width: auto; display: inline-block; vertical-align: middle; } .cml-checkout__gateways .payment_box { padding: .75rem 0 .25rem; } /* Each payment-method row: hide list bullet, place radio + label on same line. WC's payment-method.php template puts +