/* HomeSight Booking UX (LatePoint+ fork 1.1.5-dev.13.2). ONE stylesheet, scoped to the LatePoint booking form. * .hs-ux is added to .latepoint-booking-form-element only when the module is on and the host is allowed; * every selector below starts with .hs-ux (a unit test fails otherwise). The only exception is the * :root token block, which declares custom properties and styles nothing by itself. * * TOKENS (dev.3): the CPO's final Step 2 handoff, apple-style-addons-cpo/apple-addons.css, :root block * pasted VERBATIM below (values layered on tokens.css --hs-*, literal fallbacks). Component styles read * --hsx-* aliases that point at --hsa-*. To change a value later, edit/replace the :root block or drop * assets/booking-ux/css/booking-ux-tokens.css (loaded after this file when present). No code change. */ /* ---- BEGIN CPO :root block (apple-addons.css, Oct 18 2026) ---- */ :root{ /* colors */ --hsa-bg: var(--hs-page, #FFFFFF); /* pure white page (spec) */ --hsa-text: var(--hs-navy, #061F4A); /* primary text (spec) */ --hsa-text-2: #5A6270; /* light/small descriptions: 5.65:1 on --hsa-card, 6.3:1 on white */ --hsa-card: #F5F5F7; /* off-white card, no border */ --hsa-stroke: #ECECEF; /* optional 1px hairline (not used by default) */ --hsa-link: #1F5FBF; /* subtle blue link ("Change"): 6.09:1 on white, 5.59:1 on card */ --hsa-cta: var(--hs-orange, #F98140); /* Continue pill (spec) */ --hsa-cta-label: var(--hs-navy, #061F4A); /* 6.33:1 on #F98140. Alt: #1A202C (6.40:1). NEVER #FFFFFF (2.55:1) */ --hsa-pill: #E8E8ED; /* "+ Add" pill, off state: navy text 13.2:1 */ --hsa-pill-on: var(--hs-navy, #061F4A); /* "Added" state: white text 16.1:1 */ --hsa-pill-on-text: #FFFFFF; --hsa-track: #E8E8ED; /* reward bar track */ --hsa-fill: var(--hs-orange, #F98140); /* reward bar fill (spec) */ --hsa-draft-bg: var(--hs-draft-bg, #FFF7ED); --hsa-draft-text: var(--hs-draft-text, #9A3412); --hsa-focus: var(--hs-focus, 0 0 0 3px rgba(249,129,64,.45)); --hsa-footer-shadow: 0 -1px 0 rgba(6,31,74,.04), 0 -8px 24px rgba(6,31,74,.06); /* type: Inter, SF Pro / system fallback (spec) */ --hsa-font: Inter, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --hsa-h1: 32px; --hsa-h1-desktop: 48px; /* bold, oversized */ --hsa-h2: 22px; --hsa-h2-desktop: 26px; --hsa-pkg: 26px; /* package name, oversized */ --hsa-item: 17px; --hsa-body: 17px; --hsa-desc: 14px; --hsa-small: 13px; --hsa-cta-size: 17px; /* spacing / shape */ --hsa-section: 32px; /* >= 24px between sections (spec) */ --hsa-gap: 12px; --hsa-pad: 20px; --hsa-col: 680px; --hsa-r-card: 18px; --hsa-r-pill: 999px; --hsa-thumb: 104px; --hsa-thumb-pkg: 120px; --hsa-cta-h: 54px; --hsa-bar-h: 4px; --hsa-footer-h: 150px; /* reserve so content clears the fixed footer */ } @media (min-width:1024px){ :root{--hsa-pad:0px;--hsa-thumb:128px;--hsa-thumb-pkg:150px} } /* ---- END CPO :root block ---- */ .hs-ux{ --hsx-navy:var(--hs-navy,#061F4A); --hsx-orange:var(--hs-orange,#F98140); --hsx-text:var(--hsa-text,#061F4A); --hsx-body-text:var(--hsa-text,#061F4A); --hsx-muted:var(--hsa-text-2,#5A6270); --hsx-bg:var(--hsa-bg,#FFFFFF); --hsx-card-bg:var(--hsa-card,#F5F5F7); --hsx-card-border:transparent; /* CPO: cards have no border */ --hsx-hairline:var(--hsa-stroke,#ECECEF); --hsx-card-sel:var(--hsx-navy); /* selected package: 2px navy ring (inset shadow, not a border) */ --hsx-subtle:var(--hsa-track,#E8E8ED); --hsx-link:var(--hsx-navy); /* links navy everywhere ... */ --hsx-link-step2:var(--hsa-link,#1F5FBF); /* ... except Step 2 (CPO "subtle blue") */ --hsx-cta-bg:var(--hsa-cta,#F98140); --hsx-cta-text:var(--hsa-cta-label,#061F4A); /* NEVER white on orange (2.55:1 fails AA) */ --hsx-progress-fill:var(--hsa-fill,#F98140); --hsx-progress-done:var(--hsx-navy); --hsx-progress-track:var(--hsa-track,#E8E8ED); --hsx-bar-h:var(--hsa-bar-h,4px); --hsx-pill-bg:var(--hsa-pill,#E8E8ED); --hsx-pill-text:var(--hsa-text,#061F4A); --hsx-pill-border:var(--hsx-navy); /* non-clean look only */ --hsx-pill-on-bg:var(--hsa-pill-on,#061F4A); --hsx-pill-on-text:var(--hsa-pill-on-text,#FFFFFF); --hsx-success:var(--hs-success,#047857); --hsx-success-bg:var(--hs-success-bg,#E7F6EF); --hsx-reward-bg:var(--hsa-card,#F5F5F7); --hsx-reward-border:transparent; --hsx-font:var(--hsa-font,Inter,-apple-system,'SF Pro Text',system-ui,sans-serif); --hsx-h1:var(--hsa-h1,32px); --hsx-h1-desktop:var(--hsa-h1-desktop,48px); --hsx-h1-weight:800; --hsx-h1-tracking:-0.025em; --hsx-h2:var(--hsa-h2,22px); --hsx-h2-desktop:var(--hsa-h2-desktop,26px); --hsx-h3:var(--hsa-item,17px); --hsx-pkg:var(--hsa-pkg,26px); --hsx-body:var(--hsa-body,17px); --hsx-desc:var(--hsa-desc,14px); --hsx-small:15px; --hsx-tiny:var(--hsa-small,13px); --hsx-r-card:var(--hsa-r-card,18px); --hsx-r-thumb:0; --hsx-r-pill:var(--hsa-r-pill,999px); --hsx-gap:var(--hsa-section,32px); --hsx-item-gap:var(--hsa-gap,12px); --hsx-pad:var(--hsa-pad,20px); --hsx-col:var(--hsa-col,680px); --hsx-thumb:var(--hsa-thumb,104px); --hsx-thumb-pkg:var(--hsa-thumb-pkg,120px); --hsx-cta-h:var(--hsa-cta-h,54px); --hsx-cta-size:var(--hsa-cta-size,17px); --hsx-focus:var(--hsa-focus,0 0 0 3px rgba(249,129,64,.45)); --hsx-shadow-sticky:var(--hsa-footer-shadow,0 -1px 0 rgba(6,31,74,.04),0 -8px 24px rgba(6,31,74,.06)); } /* ============ base module UI (both looks) ============ */ .hs-ux.hs-ux-has-steps .latepoint-progress{display:none} .hs-ux .hs-ux-steps{margin:0 0 12px;padding:12px 16px 0} .hs-ux .hs-ux-steps-t{margin:0 0 6px;font-size:max(13px,var(--hsx-tiny));color:var(--hsx-muted);font-weight:500} .hs-ux .hs-ux-steps ol{display:flex;gap:6px;list-style:none;margin:0;padding:0} .hs-ux .hs-ux-steps li{flex:1;height:var(--hsx-bar-h);border-radius:var(--hsx-r-pill);background:var(--hsx-progress-track);position:relative;margin:0} .hs-ux .hs-ux-steps li span,.hs-ux .hs-ux-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0} .hs-ux .hs-ux-steps li.is-done{background:var(--hsx-progress-done)} .hs-ux .hs-ux-steps li.is-active{background:var(--hsx-progress-fill)} .hs-ux .hs-ux-pkg{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--hsx-card-border);border-radius:var(--hsx-r-card);padding:14px;margin:0 0 var(--hsx-gap);background:var(--hsx-card-bg)} .hs-ux .hs-ux-pkg-img{width:76px;height:76px;object-fit:cover;border-radius:var(--hsx-r-thumb);flex:none;display:block} .hs-ux .hs-ux-pkg-b{flex:1;min-width:0} .hs-ux .hs-ux-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .hs-ux .hs-ux-pkg-name{margin:0;font-size:var(--hsx-h3);color:var(--hsx-text);font-weight:700} .hs-ux .hs-ux-change{color:var(--hsx-link);font-weight:600;text-decoration:underline;font-size:var(--hsx-tiny)} .hs-ux .hs-ux-muted{color:var(--hsx-muted);font-size:var(--hsx-tiny);margin:2px 0 4px;line-height:1.4} .hs-ux .hs-ux-small{font-size:var(--hsx-tiny);color:var(--hsx-muted)} .hs-ux .hs-ux-tiny{font-size:12px;color:var(--hsx-muted);margin:6px 0 0} .hs-ux .hs-ux-nowrap{white-space:nowrap} .hs-ux .hs-ux-price{font-weight:700;color:var(--hsx-text)} .hs-ux .hs-ux-addons-h{margin:0 0 12px;font-size:var(--hsx-h2);color:var(--hsx-text);font-weight:700} /* add-on price as a "+ Add $X" / "Added ✓ $X" pill toggle (navy outline -> navy fill; no orange here) */ .hs-ux .step-service-extras-w .os-item .os-item-price-w{flex:none;border:0;padding:0;margin-left:auto} .hs-ux .step-service-extras-w .os-item .os-item-price{display:inline-block;background:transparent;color:var(--hsx-pill-text);border:1.5px solid var(--hsx-pill-border);border-radius:var(--hsx-r-pill);padding:7px 14px;font-weight:700;font-size:var(--hsx-tiny);line-height:1.2;white-space:nowrap} .hs-ux .step-service-extras-w .os-item .hs-ux-lbl-added{display:none} .hs-ux .step-service-extras-w .os-item.selected .hs-ux-lbl-add{display:none} .hs-ux .step-service-extras-w .os-item.selected .hs-ux-lbl-added{display:inline} .hs-ux .step-service-extras-w .os-item.selected .os-item-price{background:var(--hsx-pill-on-bg);color:var(--hsx-pill-on-text);border-color:var(--hsx-pill-on-bg)} .hs-ux .step-service-extras-w .os-item:focus-visible{outline:none;box-shadow:var(--hsx-focus)} /* reward bar: OFF by default; only rendered when the setting is ON and the client qualifies */ .hs-ux .hs-ux-reward{border:1px solid var(--hsx-reward-border);background:var(--hsx-reward-bg);border-radius:var(--hsx-r-card);padding:14px;margin:var(--hsx-gap) 0 0} .hs-ux .hs-ux-reward[hidden]{display:none} .hs-ux .hs-ux-reward h3{margin:0;font-size:var(--hsx-small);color:var(--hsx-text)} .hs-ux .hs-ux-bar{height:var(--hsx-bar-h);background:var(--hsx-subtle);border-radius:var(--hsx-r-pill);overflow:hidden;margin:8px 0} .hs-ux .hs-ux-bar i{display:block;height:100%;background:var(--hsx-progress-fill)} .hs-ux .hs-ux-reward .hs-ux-link{color:var(--hsa-link,#1F5FBF);text-decoration:underline} /* dev.7 bar A link, 6.09:1 */ .hs-ux .hs-ux-travel{font-size:var(--hsx-tiny);color:var(--hsx-muted);margin:16px 0;line-height:1.45} .hs-ux .hs-ux-sticky{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0} .hs-ux .hs-ux-sticky-l{flex:1} .hs-ux .hs-ux-sticky-v{font-size:16px;color:var(--hsx-text)} .hs-ux .hs-ux-continue{background:var(--hsx-cta-bg);color:var(--hsx-cta-text);font-weight:700;border-radius:var(--hsx-r-pill);padding:10px 22px;text-decoration:none} .hs-ux .hs-ux-continue:focus-visible,.hs-ux .hs-ux-skip:focus-visible,.hs-ux .hs-ux-change:focus-visible{outline:none;box-shadow:var(--hsx-focus)} .hs-ux .hs-ux-skip[hidden]{display:none} .hs-ux .hs-ux-skip{display:block;color:var(--hsx-link);text-decoration:underline;font-size:var(--hsx-tiny);width:100%;text-align:center} .hs-ux.hs-ux-has-sticky.hs-ux-on-extras .latepoint-footer .latepoint-next-btn{display:none} @media (max-width:600px){ /* full-bleed via padding, not negative margins (1.1.5-dev overflowed 14px at 390px) */ .hs-ux .hs-ux-sticky{position:sticky;bottom:0;z-index:5;background:#fff;box-shadow:0 -6px 18px rgba(6,31,74,.06);padding:12px 0} } /* ============ font: Inter / SF Pro / system stack, booking form only (setting "Font") ============ */ .hs-ux.hs-ux-font-inter, .hs-ux.hs-ux-font-inter :is(h1,h2,h3,h4,h5,p,span,div,a,label,input,select,textarea,button,li){font-family:var(--hsx-font)} .hs-ux.hs-ux-font-inter [class^="latepoint-icon"],.hs-ux.hs-ux-font-inter [class*=" latepoint-icon"]{font-family:"latepointIcons"!important} /* ============ clean look (setting "Clean card style"): CPO Step 2 handoff, applied to every step ============ */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean{background:var(--hsx-bg);box-shadow:none;border-radius:0;color:var(--hsx-text);font-size:var(--hsx-body);line-height:1.45;-webkit-font-smoothing:antialiased;max-width:100%} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-side-panel{display:none} /* one question per step: no side picture/blurb */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w{background:var(--hsx-bg);border:0;min-width:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-steps{padding:24px var(--hsx-pad) 0;margin:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-steps ol{gap:6px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-steps-t{margin:8px 0 0;font-size:max(13px,var(--hsx-tiny));color:var(--hsx-muted);font-weight:400} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w .latepoint-heading-w{border:0;padding:var(--hsx-gap) var(--hsx-pad) 0;background:none;display:block} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w .latepoint-heading-w .os-heading-text{font-size:var(--hsx-h1);font-weight:var(--hsx-h1-weight);letter-spacing:var(--hsx-h1-tracking);line-height:1.1;color:var(--hsx-text);margin:0;text-align:left} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-subline{font-size:var(--hsx-body);color:var(--hsx-muted);margin:10px 0 0;line-height:1.45;font-weight:400} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w .latepoint-body{padding:var(--hsx-gap) var(--hsx-pad);background:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-step-content{color:var(--hsx-text)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean a{color:var(--hsx-link)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-extras .hs-ux-change{color:var(--hsx-link-step2)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-change{font-size:15px;font-weight:500;text-decoration:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-change:hover{text-decoration:underline} /* package card (Step 2 top): off-white, no border, edge-to-edge thumbnail, oversized name */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg{display:grid;grid-template-columns:var(--hsx-thumb-pkg) minmax(0,1fr);gap:0;padding:0;margin:0 0 var(--hsx-gap);background:var(--hsx-card-bg);border:0;border-radius:var(--hsx-r-card);overflow:hidden;min-height:var(--hsx-thumb-pkg)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg-img{width:100%;height:100%;border-radius:0;object-fit:cover} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg-b{padding:16px 16px 16px 18px;display:flex;flex-direction:column;justify-content:center} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-row{align-items:center;gap:12px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg-name{font-size:var(--hsx-pkg);font-weight:800;letter-spacing:-.02em;line-height:1.1} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg .hs-ux-muted{font-size:var(--hsx-desc);margin:4px 0 0;line-height:1.4} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg .hs-ux-small{font-size:var(--hsx-desc)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg .hs-ux-price{font-size:20px;letter-spacing:-.01em} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg-b>div:last-child{margin-top:8px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-addons-h{font-size:var(--hsx-h2);font-weight:700;letter-spacing:-.015em;margin:0 0 14px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-reward{margin:var(--hsx-gap) 0 0;border:0;border-radius:var(--hsx-r-card);padding:18px 18px 16px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-travel{margin:var(--hsx-gap) 0 0} /* selectable cards: packages (step 1) and add-ons (step 2) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items.os-as-rows{display:flex;flex-direction:column;gap:var(--hsx-item-gap)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item{margin:0!important;padding:0;width:100%} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-i{background:var(--hsx-card-bg);border:0;border-radius:var(--hsx-r-card);box-shadow:none;padding:0;gap:0;display:grid;grid-template-columns:var(--hsx-thumb) minmax(0,1fr) auto;align-items:center;min-height:var(--hsx-thumb);overflow:hidden;transition:box-shadow .15s} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-i:hover{box-shadow:inset 0 0 0 1px var(--hsx-hairline)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item.selected .os-item-i{box-shadow:inset 0 0 0 2px var(--hsx-card-sel)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item:focus-visible{outline:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item:focus-visible .os-item-i{box-shadow:var(--hsx-focus)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-i:before,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-i:after{display:none!important} /* native checkbox/tick */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-img-w{grid-column:1;grid-row:1 / span 3;align-self:stretch;width:auto;height:auto;min-height:var(--hsx-thumb);margin:0;border-radius:0;background-size:cover;background-position:center;flex:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-name-w{grid-column:2;padding:16px 12px 16px 18px;margin:0;min-width:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-name{font-size:var(--hsx-h3);font-weight:700;letter-spacing:-.01em;color:var(--hsx-text);line-height:1.25;margin:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-desc{font-size:var(--hsx-desc);color:var(--hsx-muted);line-height:1.4;margin-top:4px;font-weight:400} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-price-w{grid-column:3;border:0;padding:0 16px 0 0;margin:0;text-align:right} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-price{font-size:var(--hsx-h3);font-weight:700;color:var(--hsx-text)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-price-label{font-size:12px;color:var(--hsx-muted)} /* add-on cards: name / "+$X" / description in col 2, "+ Add" pill in col 3 */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .os-item-i{grid-template-rows:auto auto 1fr;align-items:start} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .os-item-name-w{display:contents} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .os-item-name{grid-column:2;grid-row:1;padding:16px 12px 0 18px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .os-item-price-w{grid-column:2;grid-row:2;padding:2px 12px 0 18px;text-align:left} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .os-item-price{display:inline;background:none;border:0;padding:0;font-size:15px;font-weight:600;color:var(--hsx-text);white-space:nowrap} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .os-item-price:before{content:"+"} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .os-item-desc{grid-column:2 / span 2;grid-row:3;padding:4px 16px 16px 18px;margin:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w{grid-column:2 / span 2;padding:0 16px 12px 18px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .hs-ux-pill{grid-column:3;grid-row:1 / span 2;align-self:center;margin:16px 16px 0 0;display:inline-flex;align-items:center;min-height:36px;padding:8px 16px;border-radius:var(--hsx-r-pill);background:var(--hsx-pill-bg);color:var(--hsx-pill-text);font-size:15px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item.selected .hs-ux-pill{background:var(--hsx-pill-on-bg);color:var(--hsx-pill-on-text)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item.selected .os-item-i{box-shadow:none} /* add-ons: the pill shows the state */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-animated-parent>.os-animated-child>.os-animated-self{animation-duration:.2s} /* footer: subtotal row, full-width #F98140 pill with navy label, Skip add-ons, Back as a text link */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer{background:#FFFFFF;border:0;box-shadow:var(--hsx-shadow-sticky);padding:14px var(--hsx-pad);display:flex;flex-direction:column;align-items:stretch;gap:0;position:sticky;bottom:0;z-index:20} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .hs-ux-foot-sub{display:flex;justify-content:space-between;align-items:baseline;order:1;font-size:15px;color:var(--hsx-muted)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .hs-ux-foot-sub[hidden]{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .hs-ux-foot-sub .hs-ux-small{font-size:15px;color:var(--hsx-muted)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .hs-ux-foot-v{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--hsx-text);margin-left:8px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-next-btn{order:2;display:flex;align-items:center;justify-content:center;width:100%;margin:12px 0 0;height:var(--hsx-cta-h);background:var(--hsx-cta-bg);color:var(--hsx-cta-text);border:0;border-radius:var(--hsx-r-pill);padding:0 24px;font-size:var(--hsx-cta-size);font-weight:600;text-align:center} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-next-btn span,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-next-btn i{color:var(--hsx-cta-text)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-next-btn i{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-next-btn:hover{filter:brightness(.96)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-next-btn:focus-visible,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-prev-btn:focus-visible,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .hs-ux-skip:focus-visible{outline:none;box-shadow:var(--hsx-focus)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .hs-ux-skip{order:3;display:block;text-align:center;margin:10px 0 0;font-size:14px;color:var(--hsx-muted);text-decoration:underline;text-underline-offset:2px;width:auto} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-prev-btn{order:4;align-self:center;background:none;border:0;box-shadow:none;padding:4px 0;margin:10px 0 0;color:var(--hsx-link);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:2px;min-height:0;height:auto} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-prev-btn span{color:var(--hsx-link)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-prev-btn i{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-footer .latepoint-btn.latepoint-prev-btn.disabled{display:none} /* dev.13 (QA B5): Step 2 shows LatePoint's own Back (styled as a link above) next to "Change" on the package card */ /* Step 5: no sticky footer, nothing between the Terms box and Book shoot (CPO dev3-copy.md) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-verify .latepoint-footer{position:static;box-shadow:none;padding-top:16px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-verify .latepoint-footer .hs-ux-foot-sub{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-verify .latepoint-footer .latepoint-btn.latepoint-next-btn{margin-top:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-verify .latepoint-form-w .latepoint-body{padding-bottom:0;min-height:0;flex:0 0 auto;height:auto} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-verify .hs-noshow-ack-box{margin-bottom:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-verify .latepoint-step-content{padding-bottom:0;margin-bottom:0} /* Book shoot until the Terms box is ticked (aria-disabled; CPO disabled look #FDE3D3 / #6B4A3A, 6.42:1) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-noshow-await .latepoint-footer .latepoint-btn.latepoint-next-btn, .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-noshow-await .latepoint-footer .latepoint-btn.latepoint-next-btn:hover, .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-noshow-await .latepoint-footer .latepoint-btn.latepoint-next-btn span{background:#FDE3D3;color:#6B4A3A;cursor:not-allowed;filter:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-noshow-await .latepoint-footer .latepoint-btn.latepoint-next-btn span{background:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-note{margin:16px 0 0;font-size:var(--hsx-desc);line-height:1.45;color:var(--hsx-muted)} /* dev.13.3: card-fee short line directly under the total (CPO: 13px Inter, #4B5563); the total note follows it */ .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-fee-notes .hs-ux-card-fee-note{margin:8px 0 0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:13px;line-height:1.45;color:#4B5563} /* summary: clean side card on desktop (Ronald 10:14 AM ET); hidden on mobile like native */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w{background:var(--hsx-bg);border:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-header{background:none;border:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-header .summary-header-inner{background-image:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-header:before,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-header:after{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-header-label{font-size:var(--hsx-h2);font-weight:700;color:var(--hsx-text);letter-spacing:-.015em} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .sbc-big-item{font-size:var(--hsx-h3);font-weight:700;color:var(--hsx-text)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .sbh-item,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .pbh-label{color:var(--hsx-muted);font-size:12px;letter-spacing:0;text-transform:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-price-item-w{font-size:var(--hsx-tiny);color:var(--hsx-text)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-price-item-w.spi-total{font-size:var(--hsx-body);font-weight:700;color:var(--hsx-text);border-top:1px solid var(--hsx-hairline);padding-top:10px} @media (min-width:1024px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w{flex:0 1 var(--hsx-col);width:var(--hsx-col);max-width:var(--hsx-col)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w .latepoint-heading-w .os-heading-text{font-size:var(--hsx-h1-desktop)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-addons-h{font-size:var(--hsx-h2-desktop)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg-name{font-size:30px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w{flex:0 0 300px;width:300px;margin-left:40px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .os-summary-contents{position:sticky;top:24px;background:var(--hsx-card-bg);border-radius:var(--hsx-r-card)} } /* ≥1024 the CPO sets --hsa-pad:0; the form column then gets its own gutter so nothing touches the edge */ @media (min-width:1024px) and (max-width:1099px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w{padding:0 16px} } /* ============ dev.6 Step 1 (package picker): Apple-style option cards, one centred 680px column ============ */ /* (d) one column: the form wrapper is a centred column of 680px (CPO --hsa-col), or the theme's content width when that is narrower (Twenty Twenty-Five: 645px), so the page H1, the form and the text below share both edges */ .latepoint-book-form-wrapper:has(> .latepoint-w .hs-ux-clean){max-width:min(var(--hsa-col,680px),var(--wp--style--global--content-size,var(--hsa-col,680px)));margin-left:auto!important;margin-right:auto!important;box-sizing:border-box} /* (d) one left edge on phones/tablets: when the theme already pads the content (WP .has-global-padding, Twenty Twenty-Five: clamp(30px,5vw,50px)), the form adds none, so the H1, step bar, question, cards and button share the theme's edge. With no theme gutter the form's own 20px gutter applies. */ @media (max-width:1023px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean{--hsx-pad:20px} .has-global-padding .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean{--hsx-pad:0px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w .latepoint-heading-w{padding-left:var(--hsx-pad)!important;padding-right:var(--hsx-pad)!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w .latepoint-body{padding-left:var(--hsx-pad)!important;padding-right:var(--hsx-pad)!important} } .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w .latepoint-body{min-height:0;height:auto;flex:0 0 auto} /* (e) LatePoint gives .latepoint-form min-height:100% of .latepoint-form-w. Our step bar sits above it inside .latepoint-form-w, so the form overflowed by the bar's height (~51px) and its footer painted over the first line(s) of whatever the page has below the form (staging: the no-show paragraph looked "clipped"), and the stretched body left a blank gap between the list and the button. */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-form-w .latepoint-form{min-height:0;height:auto} /* (c) nothing is ever covered: the footer is in the flow, right after the list, on every step except Step 2 (CPO spec: sticky subtotal + Continue there; sticky keeps its own slot, so the end of the list still scrolls clear of it) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean:not(.hs-ux-on-extras) .latepoint-footer{position:static;box-shadow:none;padding-top:8px;padding-bottom:8px} /* (a) option card: name + price on one row, one-line description, 22px padding, no media column */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-i{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 24px;grid-template-areas:"name price check" "desc desc check";column-gap:14px;row-gap:4px;align-items:center;min-height:0;padding:22px 22px 22px 24px;border-radius:var(--hsx-r-card)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-i:not(:has(.os-item-desc)){grid-template-areas:"name price check"} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-img-w{display:none} /* no empty / thumbnail column on Step 1 */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-name-w{display:contents} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-name{grid-area:name;padding:0;font-size:var(--hsx-h3);font-weight:600;letter-spacing:-.01em;color:var(--hsx-navy);line-height:1.3;text-align:left} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-desc{grid-area:desc;margin:0;padding:0;font-size:var(--hsx-desc);color:var(--hsx-muted);line-height:1.45;text-align:left;display:block;overflow:visible} /* dev.7: full approved copy, no 2-line clamp */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-price-w{grid-area:price;padding:0;margin:0;text-align:right;white-space:nowrap;display:flex;align-items:baseline;gap:6px;justify-content:flex-end} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-price{font-family:var(--hsx-font);font-variant-numeric:tabular-nums;font-size:var(--hsx-h3);font-weight:600;color:var(--hsx-navy);letter-spacing:-.01em} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-price-label{order:-1;font-size:var(--hsx-tiny);color:var(--hsx-muted);font-weight:400;text-transform:none;letter-spacing:0} /* selected: 2px #F98140 ring (inset, no layout shift) + check */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item.selected .os-item-i{box-shadow:inset 0 0 0 2px var(--hsx-orange)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item:focus-visible .os-item-i{box-shadow:var(--hsx-focus)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-item .hs-ux-check{grid-area:check;align-self:center;justify-self:end;box-sizing:border-box;width:24px;height:24px;border-radius:50%;border:1.5px solid #8E95A3;background:#FFFFFF;position:relative;flex:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-item.selected .hs-ux-check{border-color:var(--hsx-orange);background:var(--hsx-orange)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-item.selected .hs-ux-check:after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--hsx-navy);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)} /* navy on orange: 6.33:1 */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-item[hidden]{display:none!important} @media (max-width:420px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-i{padding:20px 18px 20px 20px;column-gap:12px} } /* ============ dev.7 Step 1 v2: badge, disclosures, "Starting at", categories ============ */ /* disclosure ( in the LatePoint description): own line, 13px, muted, never clamped */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .os-item-desc .hs-ux-disc{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--hsx-muted);font-style:normal} /* badge: navy pill, white text (CPO: one badge, no glyph) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .os-items .os-item .hs-ux-badge{display:inline-block;vertical-align:2px;margin-left:8px;padding:3px 10px;border-radius:var(--hsx-r-pill);background:var(--hsx-navy);color:#FFFFFF;font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1.3;white-space:nowrap} /* "Starting at" sits above the price on narrow cards, before it on wide ones */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-price-label.hs-ux-prefix{font-size:13px;color:var(--hsx-muted);font-weight:400} @media (max-width:480px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-price-w{flex-direction:column;align-items:flex-end;gap:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w .os-items .os-item .os-item-price-label.hs-ux-prefix{order:-1;font-size:12px} } /* Step 1 shared line (LatePoint > Steps > Service Selection > content before) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w>.latepoint-step-content-text-left,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-services-w>.latepoint-step-content-text-centered{font-size:var(--hsx-desc);color:var(--hsx-muted);line-height:1.45;margin:0 0 14px;text-align:left} /* categories, chooser mode: LatePoint's own category tiles as option cards (tap -> its packages) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-chooser .step-services-w .os-item-category-w{border:0;margin:0 0 12px;background:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-chooser .step-services-w .os-item-category-info-w .os-item-category-info{display:block;padding:22px 48px 22px 24px;border-radius:var(--hsx-r-card);box-shadow:inset 0 0 0 1px var(--hsx-line,#E3E6EC);background:#FFFFFF;position:relative} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-chooser .step-services-w .os-item-category-info .os-item-img-w{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-chooser .step-services-w .os-item-category-info .os-item-name{font-size:var(--hsx-h3);font-weight:600;color:var(--hsx-navy);text-align:left} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-chooser .step-services-w .os-item-category-info .os-item-desc{font-size:var(--hsx-desc);color:var(--hsx-muted);line-height:1.45;margin-top:4px;text-align:left} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-chooser .step-services-w .os-item-category-info:after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-6px;border:solid var(--hsx-navy);border-width:0 2px 2px 0;transform:rotate(-45deg)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-chooser .step-services-w .os-item-category-w.selected>.os-item-category-info-w .os-item-category-info{box-shadow:none;background:none;padding:0 0 12px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-chooser .step-services-w .os-item-category-w.selected>.os-item-category-info-w .os-item-category-info:after{display:none} /* categories, headings mode: every group open, tile -> heading + shared line, no click */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-w{border:0;margin:0 0 22px;background:none;display:block!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-w>.os-selectable-items{display:block!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-w>.os-item-category-info-w{display:block!important;border:0;background:none;padding:0;margin:0 0 10px;cursor:default;box-shadow:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-info-w .os-item-category-info{display:block;padding:0;border:0;box-shadow:none;background:none;min-height:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-info-w:before,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-info-w:after,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-info .os-item-img-w{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-info .os-item-name{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hsx-muted);text-align:left} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-cat-headings .step-services-w .os-item-category-info .os-item-desc{font-size:var(--hsx-desc);color:var(--hsx-muted);line-height:1.45;margin-top:4px;text-align:left} /* dev.7: a package with no LatePoint selection image gets a full-width text column on Step 2 (staging has no images) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg:not(:has(.hs-ux-pkg-img)){grid-template-columns:minmax(0,1fr)} /* dev.7: add-ons with no selection image drop the empty thumbnail column (staging extras have none) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .os-item-i:not(:has(.os-item-img-w)){grid-template-columns:0 minmax(0,1fr) auto} /* dev.7: the Step 2 package card reuses the LatePoint description; no badge there (CPO: Luxe badge on Step 1 only) */ .hs-ux .hs-ux-pkg .hs-ux-badge{display:none} .hs-ux .hs-ux-pkg .hs-ux-disc{display:block;margin-top:4px;font-size:13px;line-height:1.4} /* ============ dev.8 Step 1 (CPO categories-v2 step1.css, ported; --hsa-* tokens only) ============ */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-s1cards.hs-ux-on-services .latepoint-footer .latepoint-next-btn{display:none!important} /* the sticky Continue replaces LatePoint's Next on Step 1 */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-s1cards .step-services-w .os-services{display:none!important} /* native list stays in the DOM: LatePoint owns selection */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 [hidden]{display:none!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hsa-pill,#E8E8ED);border-radius:12px;padding:3px;margin:4px 0 0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg [role="tab"]{display:flex;align-items:center;justify-content:center;text-align:center;min-height:40px;padding:6px 8px;border:0;border-radius:9px;background:transparent;font:600 14px/1.2 var(--hsx-font);color:var(--hsa-text,#061F4A);cursor:pointer;white-space:nowrap;box-shadow:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg [role="tab"][aria-selected="true"]{background:#FFFFFF;box-shadow:0 1px 3px rgba(6,31,74,.12),0 0 0 .5px rgba(6,31,74,.06)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg [role="tab"]:focus-visible{outline:none;box-shadow:var(--hsx-focus)} @media (max-width:430px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg{display:flex} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg [role="tab"]{flex:1 1 auto;padding:6px 6px;font-size:13px} /* dev.9: staging (dev.7) wrapped "Single services" at 390; keep every label on one line even if a theme button rule resets white-space */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg [role="tab"]{white-space:nowrap!important;letter-spacing:0} } .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 [role="tabpanel"]:focus-visible{outline:none;box-shadow:var(--hsx-focus);border-radius:12px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-intro{margin:18px 0 0;font-size:14px;color:var(--hsa-text-2,#5A6270);line-height:1.45;text-align:left} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-cards{display:grid;gap:var(--hsa-gap,12px);margin-top:16px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card{position:relative;background:var(--hsa-card,#F5F5F7);border-radius:var(--hsa-r-card,18px);overflow:hidden;padding:14px;display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 14px;align-content:start;cursor:pointer;margin:0;text-align:left;color:var(--hsa-text,#061F4A)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card.no-ph{grid-template-columns:minmax(0,1fr)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card.on,.latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card:has(input:checked){box-shadow:inset 0 0 0 2px var(--hsa-text,#061F4A)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card:focus-within{box-shadow:var(--hsx-focus)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card.on:focus-within{box-shadow:inset 0 0 0 2px var(--hsa-text,#061F4A),var(--hsx-focus)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph{width:84px;height:84px;border-radius:12px;object-fit:cover;display:block;grid-row:1} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph.type{background:#F5F5F7;box-shadow:inset 0 0 0 1px #E3E5EA;color:var(--hsa-text,#061F4A);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph.type b{font:800 26px/1 var(--hsx-font);letter-spacing:-.02em} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph.type span{font:600 11px/1.2 var(--hsx-font);letter-spacing:.06em;text-transform:uppercase} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .hd{grid-row:1;display:flex;flex-direction:column;justify-content:center;min-width:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .nm{display:flex;align-items:center;justify-content:space-between;gap:10px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .nm b{font:700 18px/1.2 var(--hsx-font);letter-spacing:-.01em;color:var(--hsa-text,#061F4A)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-radio{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--hsa-text,#061F4A);display:inline-flex;align-items:center;justify-content:center;flex:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card.on .hs-ux-radio:after{content:"";width:12px;height:12px;border-radius:50%;background:var(--hsa-text,#061F4A)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .pr{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;margin-top:4px;font-size:14px;color:var(--hsa-text-2,#5A6270)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .pr b{color:var(--hsa-text,#061F4A);font-size:17px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .pr .hs-ux-badge{display:inline-block;margin:0;vertical-align:baseline;line-height:1.2;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--hsx-navy,#061F4A);color:#FFFFFF} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .bd{grid-column:1/-1;margin-top:8px;display:block} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .bd .p{display:block;font-size:14px;line-height:1.45;color:var(--hsa-text,#061F4A)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .bd .best{font-weight:600} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .bd .fine{display:block;margin:6px 0 0;font-size:13px;color:var(--hsa-text-2,#5A6270);font-style:italic;line-height:1.4} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-asof{margin:14px 0 0;font-size:13px;color:var(--hsa-text-2,#5A6270)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-s1bar{position:sticky;bottom:0;z-index:20;background:#FFFFFF;box-shadow:var(--hsa-footer-shadow,0 -1px 0 rgba(6,31,74,.04),0 -8px 24px rgba(6,31,74,.06));margin:18px calc(-1 * var(--hsx-pad,0px)) 0;padding:14px var(--hsx-pad,20px)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-s1sum{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--hsa-text-2,#5A6270)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-s1sum b{font-size:22px;font-weight:700;color:var(--hsa-text,#061F4A);letter-spacing:-.01em} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-s1cta{display:flex;align-items:center;justify-content:center;width:100%;margin-top:12px;height:var(--hsa-cta-h,54px);border-radius:var(--hsa-r-pill,999px);background:var(--hsa-cta,#F98140);color:var(--hsa-cta-label,#061F4A);font:600 17px var(--hsx-font);text-decoration:none;box-sizing:border-box} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-s1cta[aria-disabled="true"]{background:var(--hsa-cta-disabled,#FDE3D3);color:var(--hsa-cta-disabled-label,#6B4A3A);cursor:not-allowed} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-s1cta:focus-visible{outline:none;box-shadow:var(--hsx-focus)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-s1hint{text-align:center;margin:8px 0 0;font-size:13px;color:var(--hsa-text-2,#5A6270)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-s1hint.nudge{color:#B91C1C;font-weight:600} @media (min-width:1024px){ .latepoint-book-form-wrapper:has(> .latepoint-w .hs-ux-clean.hs-ux-s1cards.hs-ux-on-services){max-width:1080px!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-s1cards.hs-ux-on-services{--hsx-col:1080px} /* CPO: 3 cards per row needs the 1080 column on Step 1 only */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg{max-width:620px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;align-items:start} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card{grid-template-columns:1fr;padding:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph{width:100%;height:170px;border-radius:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph.type b{font-size:56px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph.type span{font-size:13px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .hd{grid-row:auto;padding:14px 18px 0;justify-content:flex-start} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card.no-ph .hd{padding-top:18px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .pr{min-height:24px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .bd{padding:0 18px 18px} } @media (prefers-reduced-motion:reduce){ .hs-ux .hs-ux-pill,.hs-ux .hs-ux-bar i,.hs-ux .os-item-i{transition:none!important} } /* ============ hs-noshow-terms: fee line on Review, agreement line on confirmation ============ */ .hs-ux .hs-noshow-fee{margin:16px 0 0;padding:14px 16px;background:var(--hsx-card-bg,#F5F5F7);border-radius:var(--hsx-r-card,14px);font-size:var(--hsx-desc,14px);line-height:1.45;color:var(--hsx-text,#061F4A)} .hs-ux .hs-noshow-fee a{color:var(--hsx-link,#061F4A);text-decoration:underline;font-weight:600} .hs-ux .hs-noshow-agreed{margin:12px 0 0;font-size:var(--hsx-desc,14px);color:var(--hsx-muted,#5A6270)} /* ============ dev.9 (real logged-out staging check, Oct 18 2026) ============ */ /* Step 3 stray horizontal scrollbar above Subtotal: LatePoint's grid (.os-row{margin:0 -7px}, core _grid.scss) sticks 7px out of each side of .latepoint-body, whose side padding is 0 in the clean style (theme gutter), and core's .latepoint-body{overflow-y:auto} makes overflow-x auto too, so the body scrolled sideways. Rows sit flush in the clean style; full-width columns lose their side padding so fields keep the heading's left edge. Narrower columns (os-col-6 etc.) keep their 7px inner gutter. */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-body .os-row{margin-left:0;margin-right:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-body .os-row > .os-col-12{padding-left:0;padding-right:0} @media (max-width:600px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-body .os-row > .os-col-sm-12{padding-left:0;padding-right:0} } /* ============ dev.10 (CPO decisions, Oct 18 2026 2:42 PM ET) ============ */ /* Summary side column (desktop, where LatePoint shows it beside the form): the card fits its content and sticks 24px from the top while the form column scrolls; the cost breakdown sits right under the items (core grows .os-summary-contents / -inner to the full row height and pushes the breakdown to the bottom). The column itself (.latepoint-summary-w) still stretches to the form height so the sticky card has room to travel. Never hidden. */ @media (min-width:1024px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w{align-self:stretch;justify-content:flex-start} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .os-summary-contents{flex:0 0 auto;height:auto;min-height:0;max-height:calc(100vh - 48px);overflow-y:auto;position:sticky;top:24px;align-self:stretch} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .os-summary-contents-inner{flex:0 0 auto;height:auto;min-height:0;justify-content:flex-start} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .os-summary-contents-inner-top{flex:0 0 auto;height:auto;min-height:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-price-breakdown-wrapper{flex:0 0 auto;margin-top:12px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .os-summary-contents-inner{padding-top:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .active-cart-item-wrapper{padding-top:0} /* core keeps a 30px bottom margin on the (empty) cart section under the item; drop it so the breakdown sits under the item */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .cart-summary-main-section{margin-bottom:0} } /* Core's mobile cart toggle (.latepoint-lightbox-summary-trigger, cart icon + item count) floated under the heading with its count at the far edge. Step 1 (card mode): hidden, the bar is the only price there. Other steps: sized to the icon so the count sits on the icon. */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-services .latepoint-heading-w .latepoint-lightbox-summary-trigger{display:none!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-heading-w .latepoint-lightbox-summary-trigger{width:max-content;max-width:100%;position:relative} /* Step 1 price line: the Recommended pill wraps under the price instead of running into the card edge (390) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .pr{flex-wrap:wrap;row-gap:4px;white-space:normal;min-width:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .pr > *{white-space:nowrap} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .pr .hs-ux-badge{margin-right:2px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .nm b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;min-width:0} /* Ronald (Apple-style, 2:49 PM ET): >=1024 every card in a row is the same height. Grid rows stretch, cards are flex columns: photo (one aspect ratio; the 2D panel matches it), then name/price/badge (2-line name slot so prices line up across the row), then description and fine print; a short card's spare space stays at the bottom. Titles wrap, never truncate. <1024 (stacked) keeps natural heights. */ @media (min-width:1024px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-cards{align-items:stretch;align-content:start;grid-auto-rows:auto} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card{display:flex;flex-direction:column;justify-content:flex-start;height:100%;box-sizing:border-box} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph{flex:none;width:100%;height:auto;aspect-ratio:2 / 1} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .hd{flex:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .nm{align-items:flex-start;min-height:2.4em;font-size:18px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .nm b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .bd{flex:0 0 auto} } /* Where subgrid exists (Chrome/Edge 117+, Safari 16+, Firefox 71+) the photo / header / description rows are shared across the whole row, so prices line up even when one title wraps to three lines; the flex column above is the fallback. */ @supports (grid-template-rows:subgrid){ @media (min-width:1024px){ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 4;row-gap:0;height:auto} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .ph{grid-row:1} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .hd{display:contents} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .nm{grid-row:2;padding:14px 18px 0;margin:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .pr{grid-row:3;align-self:start;padding:0 18px;margin-top:4px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card .bd{grid-row:4;align-self:start} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-card.no-ph .nm{grid-row:1 / span 2;align-self:start} } } /* ===================== dev.11 (CPO visual check of dev.10, 3:07 PM ET) ===================== */ /* 1) Tab bar: a click leaves no ring (the theme outlines any :focus). Keyboard focus only, via :focus-visible. Every active segment looks the same: white fill + soft shadow. */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg [role="tab"]:focus{outline:none!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg [role="tab"][aria-selected="true"]:focus:not(:focus-visible){box-shadow:0 1px 3px rgba(6,31,74,.12),0 0 0 .5px rgba(6,31,74,.06)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-seg [role="tab"]:focus-visible{outline:2px solid #061F4A!important;outline-offset:2px} /* Members note (Photos + Bundles), small print under the intro */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-s1 .hs-ux-members{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--hsa-text-2,#5A6270);text-align:left} /* 3) Step 2 recap card: the photo sits in a fixed 4:3 frame with the same radius on every corner (no stretch, no clipped corner); the source is a large size + srcset from PHP. */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg{grid-template-columns:clamp(112px,34%,240px) minmax(0,1fr);align-items:start;padding:14px;min-height:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg:not(:has(.hs-ux-pkg-img)){grid-template-columns:minmax(0,1fr)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg-frame{display:block;width:100%;aspect-ratio:4 / 3;border-radius:12px;overflow:hidden;align-self:start;background:#E8ECF2} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg-frame .hs-ux-pkg-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-pkg-b{padding:2px 4px 2px 16px;justify-content:flex-start} /* 6) Quantity stepper: core's -/+ elements restyled (core's handler still counts). 32px round, navy outline + glyph. */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w{display:flex;align-items:center;gap:10px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector{box-sizing:border-box;width:32px!important;height:32px!important;min-width:32px;padding:0!important;margin:0;border:1.5px solid #061F4A!important;border-radius:50%!important;background:#FFFFFF!important;color:#061F4A!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;user-select:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector:before{font-family:var(--hsx-font,Inter,system-ui,sans-serif)!important;font-size:18px;font-weight:600;line-height:1;color:#061F4A} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector-minus:before{content:"\2212"!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector-plus:before{content:"+"!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector:hover{background:#F2F5FA!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector:focus{outline:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector:focus-visible{outline:2px solid #061F4A;outline-offset:2px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector.hs-ux-qty-off{opacity:.35;cursor:default;background:#FFFFFF!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item .item-quantity-selector-w .item-quantity-selector-input{box-sizing:border-box;width:36px!important;min-width:0;height:32px;padding:0!important;margin:0;border:0!important;background:transparent!important;box-shadow:none!important;text-align:center;font-weight:600;color:#061F4A;font-variant-numeric:tabular-nums} /* ---------- dev.12: order perks (Step 5; rendered only when "Order perks" is on) ---------- */ .hs-ux .hs-order-perks{margin:16px 0 0;padding:14px 16px;border:1px solid #E2E8F0;border-radius:12px;background:#fff} .hs-ux .hs-order-perks .hs-perk-line{margin:6px 0 0;font-size:13px;line-height:1.45;color:#1A202C} .hs-ux .hs-order-perks .hs-perk-chips{margin:0;padding:0;border:0} .hs-ux .hs-order-perks .hs-perk-help{font-size:13px;color:#1A202C;margin:0 0 8px;padding:0} .hs-ux .hs-order-perks .hs-perk-chip{display:block;margin:6px 0;padding:10px 12px;border:1.5px solid #CBD5E0;border-radius:10px;font-size:13px;line-height:1.4;cursor:pointer} .hs-ux .hs-order-perks .hs-perk-chip:has(input:checked){border-color:#061F4A;box-shadow:0 0 0 1px #061F4A} .hs-ux .hs-order-perks .hs-perk-chip b{color:#061F4A} .hs-ux .hs-order-perks .hs-perk-opt{display:flex;gap:16px;margin:2px 0 6px 28px;font-size:13px} /* dev.13: chip descriptions, voucher expiry, guest hint, Summary $0 perk rows */ .hs-ux .hs-order-perks .hs-perk-desc{display:block;margin-top:2px;color:#1A202C} .hs-ux .hs-order-perks .hs-perk-exp{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#FFF4E5;color:#7A4A00;font-size:12px} .hs-ux .hs-order-perks .hs-perk-hint{margin:8px 0 0;font-size:13px;color:#1A202C} /* dev.13 (QA B4): time slots never clip or scroll sideways (":00 am", "09:30 ar"): columns size to the label, then wrap */ .hs-ux .time-selector-w{margin-left:0;margin-right:0;overflow-x:visible} .hs-ux .time-selector-w.style-timebox .timeslots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) !important;gap:8px} .hs-ux .time-selector-w.style-timebox.with-end-time .timeslots{grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) !important} .hs-ux .time-selector-w .dp-timebox{min-width:0;padding:8px 6px;overflow:visible;text-overflow:clip} .hs-ux .time-selector-w .dp-timebox .dp-label{white-space:nowrap} @media (max-width:420px){.hs-ux .time-selector-w.style-timebox .timeslots{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important}.hs-ux .time-selector-w.style-timebox.with-end-time .timeslots{grid-template-columns:1fr 1fr !important}.hs-ux .time-selector-w.style-timebox.with-end-time .dp-timebox .dp-label{white-space:normal}} /* ============ dev.13.1 (CPO + Ronald, Oct 18 2026 4:47 PM ET) ============ */ /* 1) Steps 2-5 on desktop: one centred ~1080px column, no Summary sidebar (the CPO ruling covers every post-Step-1 step). The live total is the bottom bar's Subtotal. The summary panel stays in the DOM (display only): LatePoint still reloads it (core needs only .latepoint-with-summary) and the hidden .hs-ux-est inside it feeds the bar. */ @media (min-width:1024px){ .latepoint-book-form-wrapper:has(> .latepoint-w .hs-ux-clean:not(.hs-ux-on-services)){max-width:1080px!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean:not(.hs-ux-on-services){--hsx-col:1080px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean:not(.hs-ux-on-services) .latepoint-summary-w{display:none!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean:not(.hs-ux-on-services) .latepoint-form-w{flex:1 1 auto;margin-left:auto;margin-right:auto} /* 1.2.1.2 (Ronald 7:28 PM ET Oct 20): the service/package step (Step 1) gets the same single centred column with no Summary sidebar as every other step, so Back no longer switches layouts and a stale earlier pick (core keeps booking[service_id] until a new service is clicked) is never shown beside the category list. Display only: the summary stays in the DOM, core still reloads it and the hidden .hs-ux-est inside it keeps feeding the footer. */ .latepoint-book-form-wrapper:has(> .latepoint-w .hs-ux-clean.hs-ux-on-services){max-width:1080px!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-services{--hsx-col:1080px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-services .latepoint-summary-w{display:none!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-services .latepoint-form-w{flex:1 1 auto;margin-left:auto;margin-right:auto} } /* 1.2.1.2: on Step 1 the footer subtotal would read the same stale pick (summary .hs-ux-est) while the client is still choosing; Step 1 card mode already zeroes it (booking-ux.js renderFootSubtotal). Steps 2-5 are unchanged. All widths. */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-services .latepoint-footer .hs-ux-foot-sub{display:none!important} /* the total stays visible on Step 5 too (it was hidden there because the sidebar showed it) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-verify .latepoint-footer .hs-ux-foot-sub:not([hidden]){display:flex} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean.hs-ux-on-verify .latepoint-footer .latepoint-btn.latepoint-next-btn{margin-top:12px} /* 2) No cart / summary toggle on any step: the bottom bar's Subtotal is the total (mobile and desktop) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-lightbox-summary-trigger{display:none!important} /* 4) Summary label: no white box on the grey card */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .latepoint-summary-w .summary-header-label{background:transparent!important} /* 7) CPO ruling 4:47 PM ET: an add-on with a quantity shows ONLY "+ Add" at qty 0. "+ Add" (core: select, qty 1) swaps for the -/1/+ stepper IN THE SAME SPOT; - at qty 1 (core: deselect, qty 0) brings "+ Add" back. Pill and stepper share one grid cell and the hidden one keeps its box (visibility), so the cell is always the larger of the two: no layout shift either way. Core's own handlers still do every count. */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item.has-quantity .item-quantity-selector-w{grid-column:3;grid-row:1 / span 2;align-self:center;justify-self:end;margin:16px 16px 0 0;padding:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item.has-quantity .hs-ux-pill{justify-self:end} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item.has-quantity:not(.selected) .item-quantity-selector-w{visibility:hidden} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item.has-quantity.selected .hs-ux-pill{visibility:hidden} /* ============ 1.2.1 (Ronald APPROVED 6:56 AM ET Oct 20): Step 2 compact package row + add-on groups ============ Apple-style inset list: #F5F5F7 rows, hairline separators, navy glyph tiles, orange-tint "N added" badge, chevron disclosure. Tap targets >= 44px (group rows 64px, pills 44px, stepper hit area 44px). */ .latepoint-w .latepoint-booking-form-element.hs-ux{--hsx-g-hair:rgba(6,31,74,.09);--hsx-g-badge:#FDE3D3} /* compact package row */ .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg.hs-ux-pkg--compact{display:block;padding:12px 16px;margin:0 0 24px;background:var(--hsx-card-bg,#F5F5F7);border:0;border-radius:14px;min-height:0;overflow:visible} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-pkg-r{display:flex;align-items:center;gap:8px;min-height:44px} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-pkg-name{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--hsx-text,#061F4A);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-pkg-price{font-size:17px;font-weight:500;color:var(--hsx-muted,#5A6270);white-space:nowrap} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-change{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 2px 0 12px;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl-t{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-6px 0 -8px;padding:0 8px 0 0;font-family:inherit;font-size:14px;font-weight:500;color:var(--hsx-muted,#5A6270);cursor:pointer;border-radius:8px} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl-t:focus-visible{box-shadow:var(--hsx-focus,0 0 0 3px rgba(249,129,64,.45))} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl-chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl-t[aria-expanded="true"] .hs-ux-incl-chev{transform:translateY(1px) rotate(-135deg)} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl{margin:8px 0 4px;font-size:14px;line-height:1.5;color:var(--hsx-muted,#5A6270)} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl[hidden]{display:none!important} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl ul{margin:0;padding:0 0 0 18px;list-style:disc} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl li{margin:0;padding:0} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-pkg--compact .hs-ux-incl p{margin:0 0 6px} /* group list = one inset card; the groups sit inside Pro's own .os-service-extras container */ .latepoint-w .latepoint-booking-form-element.hs-ux .step-service-extras-w .os-service-extras.hs-ux-grouped{display:block!important;background:var(--hsx-card-bg,#F5F5F7);border-radius:var(--hsx-r-card,18px);overflow:hidden;padding:0;margin:0} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-grouped>.hs-ux-g+.hs-ux-g{border-top:1px solid var(--hsx-g-hair)} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-h{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;cursor:pointer;font-family:inherit;color:var(--hsx-text,#061F4A);-webkit-tap-highlight-color:transparent} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-h:hover{background:rgba(6,31,74,.025)} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-h:focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgba(249,129,64,.55)} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--hsx-navy,#061F4A);display:grid;place-items:center} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-ic svg{width:20px;height:20px;fill:none;stroke:#FFFFFF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-t{flex:1;min-width:0;display:block} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-n{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--hsx-text,#061F4A)} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-m{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--hsx-muted,#5A6270);font-variant-numeric:tabular-nums} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-badge{flex:none;font-size:12px;font-weight:700;line-height:1;color:var(--hsx-navy,#061F4A);background:var(--hsx-g-badge);border-radius:999px;padding:5px 9px;white-space:nowrap} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-badge[hidden]{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-chev{flex:none;width:9px;height:9px;margin:0 4px 0 2px;border-right:2px solid #A1A6B0;border-bottom:2px solid #A1A6B0;transform:rotate(-45deg);transition:transform .2s} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g.is-open .hs-ux-g-chev{transform:rotate(45deg)} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-b{padding:0 16px 4px 66px} .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-b[hidden]{display:none!important} /* add-on rows inside a group: no card, no thumbnail; name + "+$X" left, pill / stepper right, hairline above */ .latepoint-w .latepoint-booking-form-element.hs-ux .hs-ux-g-b>.os-item{margin:0!important;padding:0;width:100%;border-top:1px solid var(--hsx-g-hair)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .os-item-i{background:transparent;border-radius:0;box-shadow:none!important;min-height:0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-items:center;column-gap:12px;padding:12px 0;overflow:visible} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .os-item-i:hover{box-shadow:none} /* beats the dev.13 no-thumbnail rule (.step-service-extras-w .os-item .os-item-i:not(:has(.os-item-img-w))) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .hs-ux-g-b>.os-item .os-item-i:not(:has(.os-item-img-w)){grid-template-columns:minmax(0,1fr) auto} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .os-item-img-w{display:none} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .os-item-name{grid-column:1;grid-row:1;padding:0;font-size:15px;font-weight:600;line-height:1.3} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .os-item-price-w{grid-column:1;grid-row:2;padding:2px 0 0;text-align:left} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .os-item-price{font-size:13px;font-weight:500;color:var(--hsx-muted,#5A6270)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .os-item-desc{grid-column:1 / span 2;grid-row:3;padding:4px 0 0;font-size:13px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .hs-ux-pill, .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;margin:0} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item .hs-ux-pill{min-height:44px;box-sizing:border-box;padding:0 16px;background:transparent;border:1.5px solid var(--hsx-navy,#061F4A);color:var(--hsx-navy,#061F4A);font-size:14px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.selected .hs-ux-pill{background:var(--hsx-navy,#061F4A);color:#FFFFFF} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item:focus-visible .os-item-i{box-shadow:inset 0 0 0 3px rgba(249,129,64,.55)!important;border-radius:10px} /* stepper inside groups: one navy pill, 34px glyphs with a 44px hit area (::after; core reads e.target's class, and a pseudo-element click targets its element) */ .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w{gap:4px;padding:0 5px;min-height:44px;border-radius:999px;background:var(--hsx-navy,#061F4A)} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w .item-quantity-selector{position:relative;width:34px!important;height:34px!important;min-width:34px;border:0!important;background:transparent!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w .item-quantity-selector:before{color:#FFFFFF} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w .item-quantity-selector:after{content:"";position:absolute;inset:-5px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w .item-quantity-selector:hover{background:rgba(255,255,255,.12)!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w .item-quantity-selector.hs-ux-qty-off{opacity:.4;background:transparent!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w .item-quantity-selector:focus-visible{outline:2px solid #F98140;outline-offset:1px} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .hs-ux-g-b>.os-item.has-quantity .item-quantity-selector-w .item-quantity-selector-input{width:28px!important;color:#FFFFFF!important;font-size:15px} /* single-toggle add-ons (e.g. Virtual Staging (4 rooms)): never a stepper, the pill always shows the state */ .latepoint-w .latepoint-booking-form-element.hs-ux .step-service-extras-w .os-item.hs-ux-single .item-quantity-selector-w{display:none!important} .latepoint-w .latepoint-booking-form-element.hs-ux.hs-ux-clean .step-service-extras-w .os-item.has-quantity.hs-ux-single.selected .hs-ux-pill{visibility:visible} /* plain (non-clean) look: same structure, LatePoint's own card styling inside */ .latepoint-w .latepoint-booking-form-element.hs-ux:not(.hs-ux-clean) .hs-ux-g-b>.os-item{border-top:0;margin:0 0 8px!important} @media (prefers-reduced-motion:reduce){ .hs-ux .hs-ux-g-chev,.hs-ux .hs-ux-incl-chev{transition:none!important} }