/* BuildMyShutters look for Elementor widgets. Applies through the bms-* classes the page builder
   (tools/elementor_build.py) sets; anything changed in Elementor's Style panel overrides it. */

.bms-elementor, .elementor-editor-active {
	--bms-navy: #0a2f88; --bms-deep: #062d7a; --bms-orange: #ff4a12; --bms-orange-dark: #e03c06; --bms-blue: #1452cc;
	--bms-ink: #17306b; --bms-text: #3c4f78; --bms-muted: #5d6f96; --bms-line: #d9e2f2; --bms-soft: #f4f7fd;
	--bms-radius: 10px;
}
.bms-section { font-family: Arial, Helvetica, sans-serif; color: var(--bms-text); }
.bms-section p { margin: 0 0 .6em; }
.bms-section p:last-child { margin-bottom: 0; }
.bms-section a { color: var(--bms-blue); }

/* ---------- Spacing: inner containers start with no padding; classes add it back.
   (Padding set in Elementor's panel overrides these.) ---------- */
.bms-section .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; }
.bms-section .e-con.bms-card-body { --padding-top: 18px; --padding-right: 18px; --padding-bottom: 20px; --padding-left: 18px; }
.bms-section .e-con.bms-amy-card { --padding-top: 20px; --padding-right: 20px; --padding-bottom: 18px; --padding-left: 20px; }
.bms-section .e-con.bms-step { --padding-top: 22px; --padding-right: 18px; --padding-bottom: 22px; --padding-left: 18px; }
.bms-section .e-con.bms-cta { --padding-top: 26px; --padding-right: 26px; --padding-bottom: 26px; --padding-left: 26px; }
.bms-section .e-con.bms-review, .bms-section .e-con.bms-score-card { --padding-top: 20px; --padding-right: 20px; --padding-bottom: 20px; --padding-left: 20px; }
.bms-section .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ---------- Type ---------- */
.bms-section .elementor-heading-title { font-family: Georgia, "Times New Roman", serif; color: var(--bms-navy); font-weight: 700; line-height: 1.15; }
.bms-h1 .elementor-heading-title { font-size: clamp(34px, 5vw, 56px); line-height: 1.04; letter-spacing: -.5px; }
.bms-h2 .elementor-heading-title { font-size: clamp(26px, 3.2vw, 36px); }
.bms-h3 .elementor-heading-title { font-size: clamp(18px, 1.8vw, 21px); }
.bms-hero-sub .elementor-heading-title { font-size: clamp(20px, 2.4vw, 27px); color: var(--bms-navy); }
.bms-hl { color: var(--bms-orange); }
.bms-eyebrow { font: 800 12.5px/1.3 Arial, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bms-blue); }
.bms-crumbs { font-size: 13px; color: var(--bms-muted); }
.bms-crumbs span { margin: 0 6px; color: #6f7fa3; }
.bms-lead, .bms-lead p { font-size: 17px; line-height: 1.6; color: var(--bms-text); }
.bms-sub, .bms-sub p { font-size: 15.5px; line-height: 1.55; color: var(--bms-muted); }
.bms-card-text, .bms-card-text p { font-size: 15px; line-height: 1.55; color: var(--bms-text); }
.bms-price { font: 700 28px/1.2 Georgia, serif; color: var(--bms-navy); }
.bms-head-split { gap: 16px; }
.bms-center { justify-content: center; }

/* ---------- Buttons ---------- */
.bms-btn .elementor-button {
	font: 800 15px/1.2 Arial, Helvetica, sans-serif; border-radius: 6px; padding: 14px 22px; border: 2px solid transparent;
	transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.bms-btn-primary .elementor-button { background: var(--bms-orange); color: #fff; }
.bms-btn-primary .elementor-button:hover { background: var(--bms-orange-dark); color: #fff; transform: translateY(-1px); }
.bms-btn-outline .elementor-button { background: #fff; color: var(--bms-navy); border-color: var(--bms-blue); }
.bms-btn-outline .elementor-button:hover { background: var(--bms-navy); border-color: var(--bms-navy); color: #fff; }
.bms-btn-ghost .elementor-button { background: transparent; color: var(--bms-navy); border-color: var(--bms-line); }
.bms-btn-ghost .elementor-button:hover { border-color: var(--bms-navy); }
.bms-btn-link .elementor-button { white-space: nowrap; background: none; color: var(--bms-blue); padding: 4px 0; font-size: 14.5px; }
.bms-btn-link .elementor-button:hover { color: var(--bms-orange); }
.bms-btn .elementor-button-icon svg { fill: currentColor; width: 1em; height: 1em; }
.bms-card-btn { margin-top: auto; }
.bms-card-btn .elementor-button { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; }

/* ---------- Hero ---------- */
.bms-hero { background: linear-gradient(100deg, #fff 0%, #fff 52%, #f6efe7 100%); }
.bms-hero-copy { flex: 1 1 52%; }
.bms-hero-side { flex: 1 1 48%; position: relative; }
.bms-hero-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 40px rgba(10, 47, 136, .12); }
.bms-badges { margin-top: 6px; }
/* Desktop: Amy floats over the bottom-right of the hero photo (as in the design). */
@media (min-width: 1025px) {
	.e-con.bms-hero-side.has-amy { --display: grid; display: grid; grid-template-columns: 1fr; }
	.bms-hero-side.has-amy > * { grid-area: 1 / 1; }
	.bms-hero-side.has-amy > .bms-hero-img { margin-bottom: 150px; margin-right: 28px; }
	.bms-hero-side.has-amy > .bms-amy-card { align-self: end; justify-self: end; width: 300px; margin-right: 0; position: relative; z-index: 2; }
	.bms-hero-side.has-amy > .bms-amy-card:only-child { align-self: start; justify-self: end; margin: 0; }
}

/* Tablet: copy full width, then photo and Amy side by side. */
@media (min-width: 768px) and (max-width: 1024px) {
	.e-con.bms-hero-side.has-amy { --flex-direction: row; flex-direction: row; align-items: center; width: 100%; }
	.bms-hero-side.has-amy > .bms-hero-img { flex: 1 1 55%; }
	.bms-hero-side.has-amy > .bms-amy-card { flex: 0 0 340px; }
	.bms-hero-copy, .bms-hero-side { width: 100%; }
}
/* ---------- Cards ---------- */
.bms-card { background: #fff; border: 1px solid var(--bms-line); border-radius: var(--bms-radius); overflow: hidden; box-shadow: 0 4px 14px rgba(10, 47, 136, .05); transition: box-shadow .15s, transform .15s; height: 100%; }
.bms-card:hover { box-shadow: 0 12px 28px rgba(10, 47, 136, .12); }
.bms-card-body { flex-grow: 1; }
.bms-card-img img, .bms-img-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.bms-img img { border-radius: var(--bms-radius); }
.bms-card-img img { border-radius: 0; }
.bms-img-wide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bms-img-square img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.bms-img-tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bms-badge { display: inline-block; background: #e9f0fd; color: var(--bms-blue); font: 800 11.5px/1 Arial, sans-serif; letter-spacing: .5px; text-transform: uppercase; padding: 6px 9px; border-radius: 20px; }
.bms-card-icon .elementor-icon, .bms-step-icon .elementor-icon { color: var(--bms-orange); font-size: 34px; }
.bms-card-icon .elementor-icon svg, .bms-step-icon .elementor-icon svg { fill: currentColor; width: 34px; height: 34px; }
.bms-card-link { cursor: pointer; }

a.bms-card-link, .bms-card-link { color: inherit; text-decoration: none; cursor: pointer; }
.bms-card-link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10, 47, 136, .16); border-color: #b9c9ea; }
.bms-card-link:focus-visible { outline: 3px solid var(--bms-blue); outline-offset: 2px; }
.bms-card-cta { display: inline-flex; gap: 6px; align-items: center; font: 800 14.5px/1.2 Arial, Helvetica, sans-serif; color: var(--bms-orange); }
.bms-card-link:hover .bms-card-cta { color: var(--bms-orange-dark); text-decoration: underline; }
.bms-card-body > .elementor-widget:last-child:has(.bms-card-cta) { margin-top: auto; }
.bms-cards-dense .bms-card-img img { aspect-ratio: 4 / 3; }
.bms-cards-dense .bms-h3 .elementor-heading-title { font-size: 18px; }
.bms-section .bms-cards-dense .e-con.bms-card-body { --padding-top: 14px; --padding-right: 14px; --padding-bottom: 16px; --padding-left: 14px; }
.bms-cards .bms-card-img img { max-height: 260px; }

/* ---------- Icon boxes ---------- */
.bms-iconbox .elementor-icon { color: var(--bms-navy); font-size: 22px; width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--bms-navy); border-radius: 50%; padding: 0; }
.bms-iconbox .elementor-icon svg { fill: currentColor; width: 22px; height: 22px; }
.bms-iconbox .elementor-icon-box-wrapper { gap: 12px; align-items: center; }
.bms-iconbox-left .elementor-icon-box-wrapper { display: flex !important; flex-direction: row !important; text-align: left !important; }
.bms-iconbox-left .elementor-icon-box-icon { margin: 0 !important; flex: 0 0 auto; }
.bms-iconbox .elementor-icon-box-title { margin: 0 0 3px; font: 800 15px/1.3 Arial, Helvetica, sans-serif; color: var(--bms-navy); }
.bms-iconbox .elementor-icon-box-title a { color: inherit; }
.bms-iconbox .elementor-icon-box-description { margin: 0; font-size: 14px; line-height: 1.45; color: var(--bms-muted); }
.bms-iconbox-top .elementor-icon-box-wrapper { text-align: center; }
.bms-iconbox-top .elementor-icon { width: 60px; height: 60px; font-size: 26px; margin: 0 auto; }
.bms-iconbox-top .elementor-icon-box-title { font: 700 19px/1.25 Georgia, serif; margin-top: 4px; }
.bms-style-strip { border-top: 1px solid var(--bms-line); border-bottom: 1px solid var(--bms-line); }
.bms-icons-cards .bms-iconbox { background: #fff; border: 1px solid var(--bms-line); border-radius: var(--bms-radius); padding: 22px 18px; height: 100%; }

/* ---------- Lists ---------- */
.bms-list .elementor-icon-list-icon { color: #1f9a4c; }
.bms-list .elementor-icon-list-icon i, .bms-list .elementor-icon-list-icon svg { color: #1f9a4c; fill: #1f9a4c; font-size: 15px; width: 15px; }
.bms-list .elementor-icon-list-text { font-size: 15px; color: var(--bms-text); line-height: 1.45; }
.bms-list .elementor-icon-list-item:not(:last-child) { padding-bottom: 7px; }

/* ---------- Steps ---------- */
.bms-step { background: #fff; border: 1px solid var(--bms-line); border-radius: var(--bms-radius); text-align: center; height: 100%; position: relative; }
.bms-step-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bms-navy); color: #fff; font: 800 16px/1 Arial, sans-serif; }
.bms-step .bms-btn .elementor-button { width: 100%; justify-content: center; }
.bms-step .elementor-widget-image { margin: 4px 0; }

/* ---------- Split, CTA, Amy ---------- */
.bms-split > .e-con { flex: 1 1 50%; }
.bms-cta { background: linear-gradient(90deg, #eef4ff, #fff); border: 1px solid var(--bms-line); border-radius: 14px; }
.bms-cta-media { flex: 0 0 30%; }
.bms-cta-copy { flex: 1 1 auto; }
.bms-cta-items { flex: 0 0 28%; }
.bms-amy-card { background: #fff; border: 1px solid var(--bms-line); border-radius: 14px; box-shadow: 0 16px 36px rgba(10, 47, 136, .13); max-width: 380px; width: 100%; }
.bms-amy-photo img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; }
.bms-amy-photo { flex: 0 0 76px; }
.bms-amy-card .elementor-heading-title { font-size: 21px; }
.bms-amy-role, .bms-amy-role p { font: 700 13.5px/1.3 Arial, sans-serif; color: var(--bms-blue); }
.bms-amy-text, .bms-amy-text p { font-size: 14px; line-height: 1.5; color: var(--bms-muted); }
.bms-amy-card .bms-btn .elementor-button { width: 100%; justify-content: center; }
.bms-online { font: 700 13px/1 Arial, sans-serif; color: #1f8a4c; text-align: center; }
.bms-amy-row > .e-con:first-child { flex: 1 1 auto; }
.bms-faq-row > .e-con:first-child { flex: 1 1 62%; }
.bms-faq-row > .bms-amy-card { flex: 0 0 360px; align-self: flex-start; }

/* ---------- FAQ (toggle) ---------- */
.bms-faq .elementor-toggle-item { border: 1px solid var(--bms-line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.bms-faq .elementor-tab-title { padding: 15px 18px; border: 0 !important; font: 700 15.5px/1.35 Arial, Helvetica, sans-serif; color: var(--bms-navy); }
.bms-faq .elementor-tab-title .elementor-toggle-title { color: var(--bms-navy); }
.bms-faq .elementor-tab-title.elementor-active { background: var(--bms-soft); }
.bms-faq .elementor-toggle-icon { color: var(--bms-blue); }
.bms-faq .elementor-toggle-icon svg { fill: currentColor; }
.bms-faq .elementor-tab-content { padding: 4px 18px 16px; border: 0 !important; background: var(--bms-soft); font-size: 15px; line-height: 1.6; color: var(--bms-text); }

/* ---------- Pro band ---------- */
@media (max-width: 1024px) { .bms-pro-grid > .bms-pro-intro { grid-column: 1 / -1; } }
.bms-pro { color: #d7e5ff; }
.bms-pro .elementor-heading-title { color: #fff; }
.bms-pro .bms-hl { color: #ff7a45; }
.bms-pro .bms-lead, .bms-pro .bms-lead p { color: #d7e5ff; font-size: 15px; }
.bms-pro .bms-list .elementor-icon-list-text { color: #eaf1ff; }
.bms-pro .bms-list .elementor-icon-list-icon i, .bms-pro .bms-list .elementor-icon-list-icon svg { color: #54d46c; fill: #54d46c; }
.bms-pro .bms-btn-link .elementor-button { color: #ffb08f; }

/* ---------- Reviews, specs, swatches, stats ---------- */
.bms-rating .elementor-star-rating i:before, .bms-rating .elementor-star-rating { color: #f5a623; }
.bms-rating .elementor-star-rating__title { color: var(--bms-muted); font-size: 14px; }
.bms-quote, .bms-quote p { font: italic 16px/1.55 Georgia, serif; color: var(--bms-ink); }
.bms-reviewer { font-size: 14px; color: var(--bms-muted); }
.bms-reviewer strong { color: var(--bms-navy); }
.bms-verified { font: 700 12.5px/1 Arial, sans-serif; color: #1f8a4c; }
.bms-score { font: 700 48px/1 Georgia, serif; color: var(--bms-navy); }
.bms-score-card { text-align: center; background: var(--bms-soft); }
.bms-specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.bms-specs th, .bms-specs td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--bms-line); vertical-align: top; }
.bms-specs th { width: 38%; color: var(--bms-navy); }
.bms-swatch-title { font: 700 18px/1.3 Georgia, serif; color: var(--bms-navy); margin: 8px 0 10px; }
.bms-swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.bms-swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--bms-text); width: 78px; text-align: center; }
.bms-swatch i { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--bms-line); box-shadow: inset 0 0 0 3px #fff; }
.bms-stat { text-align: center; }
.bms-stat-num { font: 700 40px/1 Georgia, serif; color: var(--bms-orange); }
.bms-prose { font-size: 16px; line-height: 1.7; }
.bms-prose h3 { font: 700 21px/1.3 Georgia, serif; color: var(--bms-navy); margin: 1.2em 0 .4em; }

/* ---------- Carousel ---------- */
.bms-carousel .swiper-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bms-radius); }
.bms-carousel .elementor-swiper-button { background: #fff; border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(10, 47, 136, .18); color: var(--bms-navy); }
.bms-carousel .elementor-swiper-button svg { fill: var(--bms-navy); width: 18px; }
.bms-carousel .swiper-pagination-bullet-active { background: var(--bms-navy); }

/* ---------- Mockup parts (forms etc.) ---------- */
.bms-mockup-part { width: 100%; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	.bms-hero { background: #fff; }
	.bms-hero-side.has-amy .bms-hero-img + .bms-amy-card { margin: 0; }
	.bms-amy-card { max-width: none; }
	.bms-faq-row > .bms-amy-card { flex-basis: auto; }
	.bms-section .e-con.bms-cta { --padding-top: 18px; --padding-right: 18px; --padding-bottom: 18px; --padding-left: 18px; }
	.bms-head-split { align-items: flex-start !important; }
	.bms-btn .elementor-button { white-space: normal; }
	.bms-buttons .elementor-widget-button { flex: 1 1 100%; }
	.bms-buttons .elementor-button { width: 100%; justify-content: center; }
}

/* Amy avatar inside original mockup parts (forms). */
.bms-mockup-part :is(.amy-face, .amyface, .help-face, .amy-photo, .amy-avatar, .amyphoto) {
	background: url("../img/amy-avatar.svg") center / cover no-repeat !important; color: transparent !important; font-size: 0 !important;
}
.bms-mockup-part :is(.amyface, .amy-photo, .amyphoto, .amy-face, .help-face)::before,
.bms-mockup-part :is(.amyface, .amy-photo, .amyphoto, .amy-face, .help-face)::after { content: none !important; }

/* Site-wide form fixes for mockup parts (same as polish.css for the mockup pages). */
.bms-mockup-part ::placeholder { color: #8a97b2; font-weight: 400; opacity: 1; }
.bms-mockup-part input[type="checkbox"], .bms-mockup-part input[type="radio"] { width: auto; flex: 0 0 auto; }
@media (max-width: 600px) {
	.bms-mockup-part :is(.grid2, .grid3, .forms, .form-grid, .field-row, .row2, .row3) { grid-template-columns: minmax(0, 1fr) !important; }
	.bms-mockup-part :is(.zip-row, .search-row, .link-row) { flex-direction: column; align-items: stretch; }
	.bms-mockup-part :is(.zip-row, .search-row) input { width: 100%; }
}


/* ================= UX review fixes (shared) ================= */

/* Card bodies fill the card so their last button/link lines up across a row
   (Elementor sets flex-grow:0 and widget margins that defeat margin-top:auto). */
.bms-section .e-con.bms-card-body { --flex-grow: 1; flex-grow: 1; }
.bms-section .e-con.bms-card-body > .elementor-widget.bms-card-btn,
.bms-section .e-con.bms-card-body > .elementor-widget:last-child:has(.bms-card-cta) { margin-top: auto !important; }
.bms-section .e-con.bms-step > .elementor-widget:last-child:has(.bms-btn) { margin-top: auto !important; }
.bms-card .elementor-widget-text-editor { line-height: 1.55; }

/* Icons in cards and steps line up with the left-aligned text below them. */
.bms-step { text-align: left; }
.bms-card-icon .elementor-icon-wrapper, .bms-step-icon .elementor-icon-wrapper { text-align: left; }
.bms-step .bms-btn-link .elementor-button-wrapper { text-align: left; }

/* List icons sit on the first line of multi-line items. */
.bms-list .elementor-icon-list-item { align-items: flex-start; }
.bms-list .elementor-icon-list-icon { margin-top: 3px; }
/* Exclusion lists (✕) are red, not "covered" green. */
.bms-list-x .elementor-icon-list-icon i, .bms-list-x .elementor-icon-list-icon svg { color: #d93025; fill: #d93025; }

/* Section-heading links ("View All …") wrap cleanly and aren't indented. */
.bms-head-split { flex-wrap: wrap; }
.bms-head-split > .e-con { flex: 1 1 320px; min-width: 0; }
.bms-btn-link .elementor-button { padding-left: 0; padding-right: 0; }
.bms-btn-link .elementor-button-wrapper { text-align: left; }
@media (max-width: 767px) { .bms-head-split { align-items: flex-start !important; } }

/* Carousel slides keep the placeholders' 16:10 shape (nothing cropped off the sides). */
.bms-carousel .swiper-slide img { aspect-ratio: 16 / 10; }

/* Numbers centred under their centred heading. */
.bms-stat, .bms-stat p, .bms-stat .elementor-widget-container { text-align: center !important; }

/* Pro band: "Learn more" links line up at the bottom of each column. */
.bms-pro-grid > .e-con { --flex-grow: 1; height: 100%; }
.bms-pro-grid > .e-con > .elementor-widget:last-child { margin-top: auto !important; }

/* Odd last card in a 2-column phone grid spans the row instead of sitting alone. */
/* (kept at normal card size, centred) */
@media (max-width: 767px) { .bms-cards.bms-m2 > .e-con:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); } }

/* Swatches wrap evenly on phones. */
@media (max-width: 600px) { .bms-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .bms-swatch { width: auto; } }

/* Tablets: photos don't take over the screen; Amy cards keep a sensible width. */
@media (max-width: 1024px) {
	.bms-hero-img img, .bms-cta-media img { max-height: 360px; }
	.bms-cta-media { flex-basis: auto; max-width: 560px; width: 100%; }
	.bms-amy-section .bms-amy-card, .bms-faq-row > .bms-amy-card { max-width: 520px; }
	.bms-split-media img { max-height: 420px; }
}

/* Two FAQ columns read as one list on phones. */
@media (max-width: 767px) { .bms-faq-section .bms-faq + .bms-faq, .bms-faq-section .elementor-widget.bms-faq + .elementor-widget.bms-faq { margin-top: -10px; } }

/* Text-link buttons sit flush with the text around them (beats Elementor's size padding). */
.bms-section .bms-btn-link .elementor-button { padding-left: 0; padding-right: 0; }

/* Elementor turns every visited or focused .elementor-button white (frontend.min.css), which made
   outline/ghost/link buttons disappear once their page had been visited. Keep each style's colours. */
.bms-btn.bms-btn-primary .elementor-button:is(:link, :visited, :focus) { color: #fff; }
.bms-btn.bms-btn-outline .elementor-button:is(:link, :visited, :focus) { color: var(--bms-navy); }
.bms-btn.bms-btn-ghost .elementor-button:is(:link, :visited, :focus) { color: var(--bms-navy); }
.bms-btn.bms-btn-link .elementor-button:is(:link, :visited, :focus) { color: var(--bms-blue); }
.bms-pro .bms-btn.bms-btn-link .elementor-button:is(:link, :visited, :focus) { color: #ffb08f; }
.bms-btn.bms-btn-outline .elementor-button:hover { color: #fff; }
.bms-btn.bms-btn-ghost .elementor-button:hover { color: var(--bms-navy); }
.bms-btn.bms-btn-link .elementor-button:hover,
.bms-pro .bms-btn.bms-btn-link .elementor-button:hover { color: var(--bms-orange); }

/* Positioning fixes (round 3). */
/* Section-head links ("View All Reviews") keep their natural width instead of spilling past the edge. */
.bms-head-split > .elementor-widget { flex: 0 0 auto; max-width: 100%; }
@media (max-width: 767px) {
	/* Stacked button groups: every button full width, not just the first. */
	.bms-buttons > .elementor-widget-button { align-self: stretch; width: 100%; }
	/* Colour swatches: 5 per row (sets are 5 or 10), no orphan. */
	.bms-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 6px; }
	.bms-swatch i { width: 46px; height: 46px; }
	.bms-swatch { font-size: 12.5px; }
}
/* Tablet hero: the Amy card sets the row height and the photo fills it (no empty band in the card). */
@media (min-width: 768px) and (max-width: 1024px) {
	.e-con.bms-hero-side.has-amy { align-items: stretch; }
	.bms-hero-side.has-amy > .bms-hero-img { position: relative; align-self: stretch; min-height: 300px; }
	.bms-hero-side.has-amy > .bms-hero-img > .elementor-widget-container { position: absolute; inset: 0; }
	.bms-hero-side.has-amy > .bms-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
}

/* Carousel arrows: Elementor makes the button display:flex, so centre the chevron with flex (it sat at the left edge). */
.bms-carousel .elementor-swiper-button.elementor-swiper-button { display: flex; align-items: center; justify-content: center; }
.bms-carousel .elementor-swiper-button svg.e-font-icon-svg { width: 18px; height: 18px; }
/* Step buttons sit on the bottom edge of every step card (the :has() rule above never matched: the widget is the .bms-btn). */
.bms-section .e-con.bms-step > .elementor-widget.bms-btn:last-child { margin-top: auto !important; }

/* Amy cards on phones: photo stays beside her name (Elementor gives child containers 100% width on mobile). */
@media (max-width: 767px) {
	.e-con.bms-amy-top { --flex-wrap: nowrap; flex-wrap: nowrap; }
	.e-con.bms-amy-top > .e-con { --width: auto; width: auto; flex: 1 1 0; min-width: 0; }
	.bms-amy-top > .bms-amy-photo { flex: 0 0 auto; }
}
/* Hero/split button pairs fit on one line at desktop instead of a ragged stack. */
@media (min-width: 1025px) {
	.bms-hero-copy .bms-buttons .elementor-button, .bms-split-copy .bms-buttons .elementor-button { padding-left: 22px; padding-right: 22px; }
}
/* Title-only icon boxes: icon centred on the title (backup for the builder's vertical-alignment setting). */
.bms-iconbox:not(:has(.elementor-icon-box-description)) .elementor-icon-box-wrapper { align-items: center !important; }
.bms-iconbox:not(:has(.elementor-icon-box-description)) .elementor-icon-box-title { margin: 0; }
/* Swatch circles line up with the heading's left edge (each circle is centred in a 78px cell). */
@media (min-width: 768px) { .bms-swatches { margin-left: -11px; } }
/* Five-item grids on tablets: 3 + 2 with the bottom pair centred, not a hole on the right. */
@media (min-width: 768px) and (max-width: 1024px) {
	.e-con.bms-n5 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
	.e-con.bms-n5 > * { grid-column: span 2; }
	.e-con.bms-n5 > :nth-child(4) { grid-column: 2 / span 2; }
}
/* Tablet hero crops keep the top of the photo (where the "replace this photo" label is). */
@media (max-width: 1024px) { .bms-hero-img img { object-position: 50% 0; } }
/* Check-list icons sit on the first line of multi-line items (Elementor's --icon-vertical-align centred them). */
.bms-list { --icon-vertical-align: flex-start; }
.bms-list .elementor-icon-list-items .elementor-icon-list-item { align-items: flex-start; }
/* Centred button groups really are centred (Elementor's flex variable won before). */
.e-con.bms-center { --justify-content: center; justify-content: center; }
/* Section-head links sit on the heading's baseline; tighter gap when they wrap under it on phones. */
.bms-head-split .bms-btn-link .elementor-button { padding-top: 0; padding-bottom: 0; }
@media (max-width: 767px) { .bms-head-split { row-gap: 8px; } }
/* Two-line badge pills don't have touching lines. */
.bms-badge { line-height: 1.3; }
/* Card CTA: the last word and its arrow never break apart. */
.bms-card-cta { display: inline-block; }
.bms-nowrap { white-space: nowrap; }
/* Check-list icons on the first line of a wrapped item. */
.bms-section .bms-list .elementor-icon-list-icon { align-self: flex-start; margin-top: 3px; }
/* Tablet CTA photos keep their top (label) visible. */
@media (max-width: 1024px) { .bms-cta-media img { object-position: center top; } }
/* Split-section icon items: one column on tablets instead of two squeezed ones. */
@media (min-width: 768px) and (max-width: 1024px) { .bms-split-copy > .e-grid { --e-con-grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } }
/* Card buttons in narrow tablet grids stay on one line. */
@media (min-width: 768px) and (max-width: 1024px) { .bms-card-btn .elementor-button { padding-left: 8px; padding-right: 8px; font-size: 13.5px; } .bms-card-btn .elementor-button-text { white-space: nowrap; } }
/* Logo images placed by the builder (Pro page hero and Pro band). */
.bms-asset-img .elementor-widget-container { text-align: left; }
.bms-asset-img img { display: block; width: 100%; height: auto; }
/* Elementor's own .elementor-widget-image img rule loads later, so these need the widget class too.
   The artwork has a small built-in margin; the negative margin lines its left edge up with the text. */
.elementor-widget-image.bms-hero-logo img { max-width: 400px; margin-left: -9px; }
.elementor-widget-image.bms-pro-logo img { max-width: 340px; margin-left: -7px; }
@media (max-width: 767px) { .elementor-widget-image.bms-hero-logo img { max-width: 300px; margin-left: -7px; } }