again, make those wrappers transparent to layout so the tiles stay flex items. */ .page-id-1727 .bd-towns > p{display:contents;} .page-id-1727 .bd-towns__item{ flex:0 0 280px; scroll-snap-align:start; } } /* --------------------------------------------------------------------- FAQ ACCORDION on the dark rgba(40,40,40,.76) background. Without this, Flatsome may render the titles dark-on-dark. --------------------------------------------------------------------- */ /* The section already paints rgba(40,40,40,.76). The inner .bd-faq carries the same semi-transparent colour for city pages, and here the two layers stack — 76% over 76% reads as a darker panel inside a lighter section. One layer is enough, so drop the inner one and the whole block becomes a single #282828C2. */ .page-id-1727 .bd-faq{background:transparent;} .page-id-1727 .bd-faq .accordion{border:0;} .page-id-1727 .bd-faq .accordion-item{ border:0; border-top:1px solid rgba(255,255,255,.2); } .page-id-1727 .bd-faq .accordion-title{ color:#f1f1f1 !important; font-size:17.6px; line-height:28.16px; font-weight:400; text-transform:none !important; letter-spacing:0 !important; padding:12px 40px 12px 52px; border:0; background:transparent; position:relative; } .page-id-1727 .bd-faq .accordion-title:hover{ color:#fff !important; background:rgba(255,255,255,.04); } .page-id-1727 .bd-faq .accordion-title.active{color:#fff !important;} .page-id-1727 .bd-faq .accordion-title .toggle{ left:8px; right:auto; color:#f1f1f1; opacity:1; width:36px; height:36px; border-radius:999px; } .page-id-1727 .bd-faq .accordion-title.active .toggle{transform:rotate(180deg);} .page-id-1727 .bd-faq .accordion-inner{ color:#c0c0c0; font-size:15px; line-height:24px; padding:0 40px 16px 52px; } .page-id-1727 .bd-faq .accordion-inner a{color:#eb1700;} /* --------------------------------------------------------------------- Long-form neighbourhood copy, shown under the tiles. The tiles carry the design; this carries the detail each city's text provides. --------------------------------------------------------------------- */ .bd-hoods__text{ margin-top:40px; } .bd-hoods__text h3{ font-size:19px; font-weight:700; line-height:28px; margin:24px 0 12px; color:#000; } .bd-hoods__text h3:first-child{margin-top:0;} .bd-hoods__text p{ font-size:16px; line-height:24px; color:#666; margin:0 0 16px; } .bd-hoods__text ul{margin:0 0 16px;padding-left:22px;} .bd-hoods__text li{ font-size:16px; line-height:24px; color:#666; margin:0 0 8px; } .bd-hoods__text > *:last-child{margin-bottom:0;} /* --------------------------------------------------------------------- FINAL CTA BUTTONS — full width on phones --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- FINAL CTA — Figma 10:17085. The two links carry Flatsome's own button classes, so the theme paints them white and grey. These rules put back the design: a solid red primary and an outlined secondary. Written against a.button so they outweigh the theme. --------------------------------------------------------------------- */ .page-id-1727 .bd-cta{ display:flex; justify-content:center; align-items:center; gap:12px; padding-top:20px; } .page-id-1727 .bd-cta a.button{ margin:0; min-height:0; border-radius:0; font-size:16px; font-weight:700; line-height:24.832px; letter-spacing:.4656px; text-transform:uppercase; } /* Flatsome declares .white{background-color:#fff!important;color:#666!important} so specificity alone cannot win here — these two need !important to match. */ .page-id-1727 .bd-cta a.button.white{ background-color:#eb1700 !important; border:1px solid rgba(0,0,0,.05); color:#fff !important; padding:8px 40px; } .page-id-1727 .bd-cta a.button.black{ background:transparent; border:2px solid #000; color:#161616; padding:8px 16px; } @media (max-width:549px){ .page-id-1727 .bd-cta{ flex-direction:column; align-items:stretch; } .page-id-1727 .bd-cta .button{ width:100%; display:block; margin:0 0 12px; } .page-id-1727 .bd-cta .button:last-child{margin-bottom:0;} } /* --------------------------------------------------------------------- Flatsome puts .col { padding: 0 15px 30px } on every column. Inside the page content that 30px is dead space — vertical rhythm is set by the section padding. Scoped to .content-area so header and footer columns keep theirs. Not .page-wrapper: prod runs the page-blank template, which omits that class, so anything scoped to it silently did nothing there. --------------------------------------------------------------------- */ .page-id-1727 .content-area .col{ padding-bottom:0; } /* --------------------------------------------------------------------- Hub cards (Hamilton / Burlington / Brantford). They stack on phones, and the theme's column padding is stripped page-wide, so give them their own 16px gap — the value from the mobile design. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- HUB CARDS — the "View X delivery" link sits on the bottom edge of every card, so the three line up however long the list of neighbourhoods runs. The card is split in two: .bd-hub__top holds everything above the link and grows to fill whatever height the tallest card sets, which leaves the link as the last row. Structural, rather than relying on an auto margin and on the card happening to be stretched. --------------------------------------------------------------------- */ .page-id-1727 .bd-hubs .col{ display:flex; /* lets .col-inner take the full column height */ } .page-id-1727 .bd-hubs .col > .col-inner{ display:flex; width:100%; } .page-id-1727 .bd-hub{ display:flex; flex-direction:column; width:100%; } .page-id-1727 .bd-hub__top{ flex:1 1 auto; /* takes the slack, pushing the link down */ } @media (max-width:549px){ .page-id-1727 .bd-hub{margin-bottom:16px;} /* Direct chain only: a loose descendant selector also matched the outer section column (which is itself a last-child), zeroing every card. */ .page-id-1727 .col:last-child > .col-inner > .bd-hub{margin-bottom:0;} /* The card's own 16px margin is the whole gap. Anchored to .bd-hub rather than to the page container: the page-wide rule above was not winning on prod, leaving the theme's 30px column padding stacked on top of the 16px. */ .page-id-1727 .col:has(> .col-inner > .bd-hub){padding-bottom:0;} } /* --------------------------------------------------------------------- Stats (11 cities / 1-2 hrs / $100). Side by side on wider screens, so the columns read as separate blocks on their own. Stacked on phones they run together, and the mobile design separates them with a hairline. --------------------------------------------------------------------- */ @media (max-width:549px){ .page-id-1727 .bd-stat:not(:last-child){ border-bottom:1px solid #e5e5e5; } } /* Side by side from tablet up, so the same hairline turns vertical (Figma node 7:434). */ @media (min-width:550px){ .page-id-1727 .bd-stat:not(:last-child){ border-right:1px solid #e5e5e5; } } /* The "same for every city" group is four across on desktop but wraps to two per row on tablet, where every second tile ends the row — its divider would hang at the row edge with nothing after it. */ @media (min-width:550px) and (max-width:849px){ .page-id-1727 .bd-stat4:nth-child(even){ border-right:0; } } /* --------------------------------------------------------------------- Hubs panel (the tinted box holding the three hub cards). The column already carries radius="14", but Flatsome renders only the background colour inline and drops the radius, so set it here instead. --------------------------------------------------------------------- */ .page-id-1727 .col.bd-hubs > .col-inner{ border-radius:14px; /* Figma 7:449 — the panel is 940px on a 1440px frame, deliberately narrower than the 1270px container the rest of the page uses, and centred. */ max-width:940px; margin-left:auto; margin-right:auto; } /* The three cards inside the panel. Flatsome spaces columns with 15px padding on each side, which gives an uneven 30px gutter and pads the outer edges as well. Laid out as a flex row instead: no side padding, an even 24px gap. The max-width reset is needed because the page-wide row rule above caps every .row at 1300px, and this one has to fill the panel. */ @media (min-width:550px){ .page-id-1727 .bd-hubs .col-inner > .row{ display:flex; gap:24px; max-width:none; margin-left:0; margin-right:0; } .page-id-1727 .bd-hubs .col-inner > .row > .col{ flex:1 1 0; max-width:none; padding-left:0; padding-right:0; } /* Equal-height cards. The card itself already asks for height:100%, but that resolves against .col-inner, which was only as tall as its own text — so each card stopped at its content. Stretching the chain lets the shortest card match the tallest. */ .page-id-1727 .bd-hubs .col-inner > .row{ align-items:stretch; } .page-id-1727 .bd-hubs .col-inner > .row > .col > .col-inner{ height:100%; } } /* --------------------------------------------------------------------- SECTION HEADINGS with a hairline running out to each side. The markup is a flex row: span, h2, span, where each span is flex:1 with a 12px floor. Flatsome gives every h2 `width:100%`, so the heading claimed the whole row and both hairlines collapsed to that 12px floor — the left one showed as a stub, the right one vanished entirely. Letting the heading size to its text hands the leftover space back to the two spans, which is what makes them stretch out symmetrically. --------------------------------------------------------------------- */ .page-id-1727 .content-area .section h2{ flex:0 1 auto; width:auto; max-width:100%; } /* wpautop wraps the trailing hairline in a
, which then becomes the flex
item instead of the span — a block of zero width, so the right-hand line
never appeared. display:contents lifts the span back out to be a flex item
in its own right, and collapses the empty paragraphs wpautop leaves behind. */
.page-id-1727 .content-area .section div[style*="display:flex"] > p{
display:contents;
}
/* ---------------------------------------------------------------------
FULL-BLEED SECTIONS.
Flatsome wraps the page in one .col with `padding: 0 15px 30px`. Those 15px
stopped every section short of the screen edge, so tinted and dark sections
never reached it — visible on the hero and on the terms block.
The inset the design does want belongs to the section, not to the wrapper:
backgrounds run edge to edge, content sits 16px in on phones (Figma 26:265)
and keeps the theme's 30px above that.
--------------------------------------------------------------------- */
.page-id-1727 .content-area > .row > .col{
padding-left:0;
padding-right:0;
}
/* The page row is also capped at 1270px, which left white gutters either side
of every section once the screen grew past that. Uncapped here so the
backgrounds reach the edge. */
.page-id-1727 .content-area > .row.row-main{
max-width:none;
}
/* With the cap gone the rows inside each section no longer fill their parent,
and their -15px gutter margins left them stuck to the left edge. Centre them
instead. The cap goes to 1300 = 1270 + the two 15px gutters, so the content
itself still measures 1270 and nothing shifts against the old layout. */
.page-id-1727 .content-area .section .row{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
@media (max-width:549px){
.page-id-1727 .content-area .section{
padding-left:16px;
padding-right:16px;
}
/* The 16px above is the whole inset. Flatsome's columns add another 15px and
their row takes 15px back with a negative margin; on stacked phone layouts
those two serve no purpose and only push content to 31px. Both cleared so
the edge lands exactly on 16px. */
.page-id-1727 .content-area .section .row{
margin-left:0;
margin-right:0;
}
.page-id-1727 .content-area .section .col{
padding-left:0;
padding-right:0;
}
}
/* Terms block sits on Seashell #f1f1f1 in the mobile design. */
@media (max-width:549px){
.page-id-1727 .section.bd-terms-sec{
background:#f1f1f1;
}
}
/* Figma 10:11035 — the fee table is 940px on the 1440px frame, the same width
as the hubs panel. Only the headings above it run the full 1280px container.
Phones keep the full width, where the design has it edge to edge less 16px. */
@media (min-width:550px){
.page-id-1727 .bd-terms{
max-width:940px;
margin-left:auto;
margin-right:auto;
}
}
/* #####################################################################
# #
# PART 2 — CITY PAGES ("City" custom post type) #
# #
##################################################################### */
.bd-city{
font-family:Montserrat,system-ui,sans-serif;
color:#000;
overflow-x:hidden; /* guard against horizontal scroll */
}
.bd-city *,
.bd-city *::before,
.bd-city *::after{box-sizing:border-box;}
.bd-wrap{
max-width:1280px;
margin:0 auto;
padding:0 80px;
}
.bd-sec{padding:60px 0;background:#fff;}
.bd-sec--alt{background:#fffbfb;}
/* ---------------------------------------------------------------------
SECTION HEADING (with hairlines on both sides)
--------------------------------------------------------------------- */
.bd-head{
display:flex;
align-items:center;
gap:15px;
margin-bottom:50px; /* Figma: 50px from heading to the section content */
}
/* When a sub-line follows the heading, tighten the gap to 11px (the 50px then
comes from the sub-line's own bottom margin). */
.bd-head:has(+ .bd-sec__lead){
margin-bottom:11px;
}
.bd-head span{
flex:1;
height:2px;
min-width:12px;
background:rgba(0,0,0,.1);
}
.bd-head h2{
/* flex:0 1 auto + width:auto keeps the heading at its text width so the
hairline spans (flex:1) can fill the space on each side. Flatsome gives
headings width:100% by default, which would otherwise let the h2 eat the
whole row and collapse the rules to their min-width. */
flex:0 1 auto;
width:auto;
max-width:100%;
margin:0;
font-size:25.6px;
font-weight:800;
line-height:33.28px;
text-transform:uppercase;
text-align:center;
color:#000;
letter-spacing:0;
}
.bd-head--dark span{background:rgba(255,255,255,.2);}
.bd-head--dark h2{color:#fff;}
.bd-sec__lead{
max-width:864px;
margin:0 auto 48px;
font-size:16px;
line-height:24px;
color:#666;
text-align:center;
}
/* The lead is centred, but a bullet list read badly that way — the markers sat
away from their text. Lists inside it align left; paragraphs stay centred. */
.bd-sec__lead ul,
.bd-sec__lead ol{
text-align:left;
display:table; /* shrink-wraps the list so it still sits centred */
margin:0 auto 16px;
padding-left:22px;
}
.bd-sec__lead li{
margin:0 0 8px;
}
.bd-sec__lead > *:last-child{
margin-bottom:0;
}
.bd-sec__lead p{
margin:0 0 16px;
}
/* ---------------------------------------------------------------------
BREADCRUMBS
--------------------------------------------------------------------- */
.bd-city__crumbs{padding:12px 0;font-size:12px;line-height:19.2px;}
.bd-city__crumbs a{color:#000;}
.bd-city__crumbs span{color:#000;margin:0 4px;}
.bd-city__crumbs .is-current{color:#666;}
/* ---------------------------------------------------------------------
HERO
--------------------------------------------------------------------- */
.bd-hero{
position:relative;
background:#3a3a3a; /* default background when no image is set */
padding:100px 0;
text-align:center;
}
/* When an image is chosen in the "Background image" field */
.bd-hero--img{
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}
/* Dark overlay on top of the image so white text stays readable.
Opacity is set in the admin ("Overlay strength" field). */
.bd-hero__overlay{
position:absolute;
inset:0;
background:#000;
pointer-events:none;
}
/* Text must sit ABOVE the overlay */
.bd-hero .bd-wrap{
position:relative;
z-index:1;
}
.bd-hero__eyebrow{
margin:0 0 8px;
font-size:14.4px;
line-height:23px;
text-transform:uppercase;
color:#f1f1f1;
}
.bd-hero__title{
margin:0 0 20px;
font-size:46.4px;
line-height:46.4px;
font-weight:900;
text-transform:uppercase;
letter-spacing:2.32px;
color:#fff;
}
.bd-hero__sub{
max-width:666px;
margin:0 auto;
font-size:16px;
line-height:19.2px;
color:#f1f1f1;
}
.bd-hero__btns{
display:flex;
justify-content:center;
gap:12px;
padding-top:40px;
}
/* ---------------------------------------------------------------------
BUTTONS
--------------------------------------------------------------------- */
.bd-btn{
display:inline-block;
padding:8px 40px;
font-size:16px;
font-weight:700;
line-height:24.832px;
letter-spacing:.4656px;
text-transform:uppercase;
text-decoration:none;
border-radius:0;
}
.bd-btn--red{
background:#eb1700;
color:#fff !important;
border:1px solid rgba(0,0,0,.05);
}
.bd-btn--ghost{ /* transparent, for dark backgrounds */
background:transparent;
color:#f1f1f1 !important;
border:2px solid #f1f1f1;
padding:8px 16px;
}
.bd-btn--outline{ /* outlined, for light backgrounds */
background:transparent;
color:#161616 !important;
border:2px solid #161616;
padding:8px 16px;
}
/* ---------------------------------------------------------------------
DELIVERY CONDITIONS — 6 cards, 3 per row x 2
--------------------------------------------------------------------- */
.bd-conds{
display:grid;
grid-template-columns:repeat(3,1fr);
max-width:960px;
margin:0 auto;
}
.bd-conds__item{
padding:20px;
text-align:center;
border-right:1px solid #ddd;
}
.bd-conds__item:nth-child(3n){border-right:0;}
.bd-conds__item:nth-child(-n+3){border-bottom:1px solid #ddd;}
.bd-conds__item h3{
margin:16px 0 0;
font-size:20px;
font-weight:800;
line-height:32px;
}
.bd-conds__item p{
margin:10px 0 0;
font-size:16px;
line-height:25.6px;
color:#000;
}
/* ---------------------------------------------------------------------
FEES TABLE
!important — needed to beat the Flatsome theme rule:
th { text-transform:uppercase; letter-spacing:.05em }
--------------------------------------------------------------------- */
.bd-table-scroll{max-width:940px;margin:0 auto;overflow-x:auto;}
.bd-terms{width:100%;border-collapse:collapse;border:1px solid #ddd;}
.bd-terms th{
text-align:left;
font-family:inherit;
font-size:12px;
font-weight:600;
line-height:18px;
color:#666;
text-transform:none !important;
letter-spacing:0 !important;
padding:8px 20px;
border:1px solid #ddd;
background:#fffbfb;
}
.bd-terms td{
font-family:inherit;
font-size:14px;
font-weight:500;
line-height:24px;
color:#000;
text-transform:none;
letter-spacing:0;
padding:16px 20px;
border:1px solid #ddd;
}
/* Same 940px cap as the Delivery Areas page (Figma 10:11035): the fee table is
narrower than the container it sits in, and centred. Phones keep the full
width, where the design runs it edge to edge less the section inset. */
@media (min-width:550px){
.bd-city .bd-terms{
max-width:940px;
margin-left:auto;
margin-right:auto;
}
}
.bd-terms__note{
max-width:940px;
margin:12px auto 0;
font-size:16px;
line-height:24px;
color:#000;
text-align:center;
}
/* ---------------------------------------------------------------------
MAP
--------------------------------------------------------------------- */
.bd-map{
position:relative;
width:100%;
height:426px;
background:#9a9a9a;
}
/* WP Go Maps renders its own div rather than an iframe, and sizes itself from
the plugin settings. Make it fill the same box the Google embed used, so the
section keeps its height either way. */
.bd-map .wpgmza_map,
.bd-map .wpgmza-map-container{
position:absolute;
inset:0;
width:100% !important;
height:100% !important;
}
.bd-map iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:block;
}
.bd-map__empty{
display:flex;
align-items:center;
justify-content:center;
height:100%;
color:#fff;
font-weight:600;
text-align:center;
padding:20px;
}
/* ---------------------------------------------------------------------
PRODUCT CATEGORIES — 4 per row
--------------------------------------------------------------------- */
.bd-cats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:19.6px;
}
.bd-cats__item{
position:relative;
display:block;
text-decoration:none;
aspect-ratio:1/1;
}
.bd-cats__img{
position:absolute;
inset:0;
border-radius:5.658px;
background:#666 center/cover no-repeat;
}
.bd-cats__img::after{ /* dark veil over the image */
content:"";
position:absolute;
inset:0;
border-radius:5.658px;
background:rgba(9,9,9,.2);
}
.bd-cats__name{
position:absolute;
left:0;right:0;
top:50%;
transform:translateY(-50%);
z-index:1;
padding:0 10px;
font-size:18px;
font-weight:800;
line-height:23.4px;
letter-spacing:.9px;
text-transform:uppercase;
text-align:center;
color:#fff;
}
/* ---------------------------------------------------------------------
NEIGHBOURHOODS — 4 tiles per row (swipe strip on mobile)
--------------------------------------------------------------------- */
.bd-hoods{
display:grid;
/* auto-fit rather than a fixed count: a city may name four neighbourhoods or
five, and the row fills itself either way without a stranded last tile. */
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:24px;
}
.bd-hoods__item{
background:#666;
padding:40px 32px;
text-align:center;
/* Taller boxes so a full description fits without crowding the delivery time,
and every tile in the row matches the tallest one. */
min-height:260px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.bd-hoods__item h3{
margin:0;
font-size:18px;
font-weight:800;
line-height:23.4px;
letter-spacing:.9px;
text-transform:uppercase;
color:#fff;
}
.bd-hoods__desc{
margin:8px 0 0;
font-size:12px;
line-height:19.2px;
color:#c0c0c0;
}
.bd-hoods__eta{
margin:8px 0 0;
font-size:12px;
font-weight:600;
line-height:18px;
color:#fff;
}
/* ---------------------------------------------------------------------
HOW TO ORDER / PRIVACY — 4 per row
--------------------------------------------------------------------- */
.bd-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
}
.bd-steps__item{
padding:20px;
text-align:center;
border-right:1px solid #ddd;
}
.bd-steps__item:last-child{border-right:0;}
.bd-steps__item h3{
margin:16px 0 0;
font-size:20px;
font-weight:800;
line-height:32px;
}
.bd-steps__item p{
margin:10px 0 0;
font-size:16px;
line-height:25.6px;
color:#000;
}
.bd-steps__num{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:9999px;
background:#eb1700;
color:#fff;
font-size:20px;
font-weight:800;
}
/* ---------------------------------------------------------------------
SEO TEXT BLOCK (above the reviews)
Collapsed to N pixels (600 by default), expanded by the MORE button.
Works WITHOUT JavaScript — driven by a hidden checkbox.
--------------------------------------------------------------------- */
/* The checkbox "engine". Not display:none — that would break keyboard access. */
/* MORE / LESS toggle.
Driven by assets/buddash.js — see the file for why the old checkbox trick
was dropped (it made the page jump and never animated smoothly).
Default state = fully visible. The collapse is applied only after JS
confirms the text is actually taller than the limit, so with JS off
nothing is ever hidden. */
.bd-seo__box{
--bd-seo-h:600px; /* overridden from the admin */
position:relative;
overflow:hidden;
transition:max-height .45s cubic-bezier(.4,0,.2,1); /* keep in step with DURATION in the JS */
}
/* Bottom fade — only while collapsed */
.bd-seo__fade{
position:absolute;
left:0;right:0;bottom:0;
height:140px;
opacity:0;
pointer-events:none;
background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
transition:opacity .35s ease;
}
.bd-seo.is-collapsible .bd-seo__fade{opacity:1;}
.bd-seo.is-open .bd-seo__fade{opacity:0;}
/* The button only exists when there is something to expand */
.bd-seo__btn{
display:none;
width:max-content;
margin:24px auto 0;
padding:8px 40px;
border:2px solid #161616;
background:transparent;
color:#161616;
font-family:inherit;
font-size:16px;
font-weight:700;
line-height:24.832px;
letter-spacing:.4656px;
text-transform:uppercase;
cursor:pointer;
user-select:none;
transition:background .2s ease, color .2s ease;
}
.bd-seo.is-collapsible .bd-seo__btn{display:block;}
.bd-seo__btn:hover{background:#161616;color:#fff;}
.bd-seo__btn:focus-visible{outline:2px solid #eb1700;outline-offset:2px;}
/* Label swaps with the state */
.bd-seo__less{display:none;}
.bd-seo.is-open .bd-seo__more{display:none;}
.bd-seo.is-open .bd-seo__less{display:inline;}
/* Text short enough to fit — nothing to do */
.bd-seo--short .bd-seo__fade,
.bd-seo--short .bd-seo__btn{display:none;}
.bd-seo__content{
font-size:16px;
line-height:26px;
color:#000;
}
.bd-seo__content > *:first-child{margin-top:0;}
.bd-seo__content > *:last-child{margin-bottom:0;}
.bd-seo__content h2,
.bd-seo__content h3,
.bd-seo__content h4{
margin:32px 0 12px;
font-weight:800;
line-height:1.3;
color:#000;
}
.bd-seo__content h2{font-size:22px;}
.bd-seo__content h3{font-size:19px;}
.bd-seo__content h4{font-size:17px;}
.bd-seo__content p{margin:0 0 16px;}
.bd-seo__content ul,
.bd-seo__content ol{margin:0 0 16px;padding-left:22px;}
.bd-seo__content li{margin-bottom:8px;}
.bd-seo__content a{color:#eb1700;text-decoration:underline;}
.bd-seo__content img{max-width:100%;height:auto;}
.bd-seo__content strong{font-weight:700;}
/* Respect the reduce-motion system setting */
@media (prefers-reduced-motion:reduce){
.bd-seo__box{transition:none;}
.bd-seo__fade{transition:none;}
}
/* ---------------------------------------------------------------------
REVIEWS + OFFER
--------------------------------------------------------------------- */
.bd-reviews{
display:grid;
grid-template-columns:1fr 384px;
gap:24px;
align-items:stretch; /* red offer block stretches to the reviews height */
}
.bd-reviews__grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}
.bd-reviews__card{
background:#fff;
border:1px solid #ddd;
padding:32px;
}
.bd-reviews__card p{
margin:16px 0 0;
font-size:16px;
font-weight:500;
line-height:24px;
color:#181d27;
}
.bd-stars{display:inline-flex;gap:4px;}
.bd-stars svg{width:20px;height:20px;}
/* Breadcrumbs had no styling of their own here and picked up the theme's 16px.
The Delivery Areas page sets 12px inline, so this matches it. */
@media (max-width:549px){
.bd-city .bd-crumbs{
font-size:12px;
line-height:19.2px;
/* Theme default was 15.6px — an em-based value that moved with the font size. */
margin-bottom:12px;
}
}
/* Signature under a review: quieter than the quote itself. */
.bd-reviews__author{
margin:12px 0 0;
font-size:13px;
line-height:20px;
color:#8a8a8a;
}
.bd-offer{
background:#cf2e2e;
padding:20px;
color:#fff;
display:flex;
flex-direction:column;
align-items:center; /* Figma: content centered horizontally */
justify-content:center; /* ...and vertically within the full-height block */
text-align:center;
gap:8px;
}
.bd-offer__big{font-size:40px;font-weight:800;line-height:52px;}
.bd-offer__sub{font-size:16px;line-height:25.6px;}
.bd-offer__code{font-size:16px;line-height:25.6px;}
.bd-offer__code strong{font-weight:600;}
/* On phones the design fixes this block at 312px tall (343px wide, 20px inset)
rather than letting it size to its text, so it keeps its proportions under
the review cards. */
@media (max-width:549px){
.bd-offer{height:312px;}
}
/* ---------------------------------------------------------------------
WE ALSO DELIVER TO... (chips)
--------------------------------------------------------------------- */
/* Figma 10:16929 — heading column 549px, chips column starts at 599px, so the
gap is 50px. Both columns are centred against each other vertically. */
.bd-also{
display:grid;
grid-template-columns:549px 1fr;
gap:50px;
align-items:center;
}
/* Same hairline treatment as every other section heading, but this markup has
no spans to use, so the lines are pseudo-elements. */
.bd-also__title{
display:flex;
align-items:center;
gap:15px;
margin:0;
font-size:25.6px;
font-weight:800;
line-height:33.28px;
text-transform:uppercase;
}
.bd-also__title::before,
.bd-also__title::after{
content:"";
flex:1 0 0;
min-width:12px;
height:2px;
background:rgba(0,0,0,.1);
}
.bd-also__chips{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.bd-chip{
background:#fff;
border:1px solid #ddd;
padding:20px;
font-size:16px;
font-weight:500;
line-height:24px;
color:#181d27 !important;
text-decoration:none;
border-radius:0;
}
.bd-chip:hover{border-color:#eb1700;color:#eb1700 !important;}
/* ---------------------------------------------------------------------
FAQ — 2 columns, dark background
--------------------------------------------------------------------- */
.bd-faq{background:rgba(40,40,40,.76);}
/* In builder mode the Flatsome section already paints that same colour, so the
two semi-transparent layers stack and the inner block reads darker. Scoped to
.section so php mode — where nothing else paints it — keeps its background. */
.bd-city .section .bd-faq{background:transparent;}
.bd-faq__cols{
columns:2;
column-gap:40px;
}
.bd-acc{
break-inside:avoid;
border-top:1px solid rgba(255,255,255,.2);
}
.bd-acc summary{
list-style:none;
cursor:pointer;
position:relative;
padding:12px 40px 12px 52px;
font-size:17.6px;
line-height:28.16px;
color:#f1f1f1;
}
.bd-acc summary::-webkit-details-marker{display:none;}
.bd-acc summary:hover{color:#fff;background:rgba(255,255,255,.04);}
/* No disc behind the chevron: the design has a bare arrow, and the tinted
circle that used to sit here was never part of it. */
.bd-acc summary::after{ /* the chevron itself */
content:"";
position:absolute;
left:19px;top:50%;
width:8px;height:8px;
border-right:2px solid #f1f1f1;
border-bottom:2px solid #f1f1f1;
transform:translateY(-70%) rotate(45deg);
transition:transform .2s;
}
.bd-acc[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.bd-acc__body{
padding:0 40px 16px 52px;
font-size:15px;
line-height:24px;
color:#c0c0c0;
}
/* ---------------------------------------------------------------------
FINAL CTA — MOBILE ONLY
This section does not exist in the desktop design — hide it.
--------------------------------------------------------------------- */
/* "Don't see your city?" — present only in the mobile design, but shown on
every width by request. The class name is kept so the existing markup and
the phone-specific button rules below keep working. */
.bd-cta-mobile{display:block;}
/* Written when this block was phone-only, so the buttons stacked at every
width. It shows everywhere now: side by side, and stacked only on phones. */
.bd-cta-mobile__btns{
display:flex;
flex-direction:row;
justify-content:center;
gap:12px;
align-items:center;
}
/* =====================================================================
TABLET (<=1024px)
There is no tablet design in Figma — this layout is inferred.
===================================================================== */
@media (max-width:1024px){
.bd-wrap{padding:0 40px;}
.bd-cats{grid-template-columns:repeat(3,1fr);}
.bd-hoods{grid-template-columns:repeat(2,1fr);}
.bd-steps{grid-template-columns:repeat(2,1fr);}
.bd-steps__item:nth-child(2n){border-right:0;}
.bd-steps__item:nth-child(-n+2){border-bottom:1px solid #ddd;}
.bd-reviews{grid-template-columns:1fr;}
.bd-also{grid-template-columns:1fr;}
.bd-faq__cols{columns:1;}
}
/* =====================================================================
PHONE (<=549px) — strictly per the mobile design
===================================================================== */
@media (max-width:549px){
.bd-wrap{padding:0 16px;}
.bd-sec{padding:60px 0;}
/* Smaller headings */
.bd-head h2{font-size:20px;line-height:28px;}
.bd-sec__lead{margin-bottom:48px;}
/* HERO */
.bd-hero{padding:100px 0;}
.bd-hero__title{font-size:32px;line-height:38px;}
.bd-hero__btns{flex-direction:column;}
.bd-hero .bd-btn{width:100%;text-align:center;}
/* CONDITIONS — one per row, separated by a bottom border */
.bd-conds{grid-template-columns:1fr;}
.bd-conds__item{
border-right:0;
border-bottom:1px solid #ddd;
}
.bd-conds__item:last-child{border-bottom:0;}
/* TABLE -> CARDS (the mobile design has no table) */
.bd-table-scroll{overflow-x:visible;}
.bd-terms{border:0;}
.bd-terms thead{display:none;}
.bd-terms tbody,
.bd-terms tr,
.bd-terms td{display:block;width:100%;}
.bd-terms tr{
border:0;
border-bottom:1px solid #ddd;
padding-bottom:16px;
margin-bottom:16px;
}
.bd-terms tr:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.bd-terms td{
border:0;
padding:7px 0;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
font-size:14px;
}
.bd-terms td::before{
content:attr(data-label);
flex:0 0 auto;
font-size:12px;
font-weight:600;
color:#666;
}
/* Service name — card heading, centered */
.bd-terms td:first-child{
display:block;
padding:0 0 8px;
font-size:16px;
font-weight:600;
text-align:center;
}
.bd-terms td:first-child::before{display:none;}
/* MAP */
.bd-map{height:426px;}
/* CATEGORIES — 2 per row */
.bd-cats{grid-template-columns:repeat(2,1fr);gap:16px;}
.bd-cats__item{aspect-ratio:171/160;}
/* NEIGHBOURHOODS — HORIZONTAL SWIPE (per the design: strip of 280px cards) */
.bd-hoods{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:24px;
margin:0 -16px;
padding:0 16px 10px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.bd-hoods::-webkit-scrollbar{display:none;}
.bd-hoods__item{
flex:0 0 280px;
scroll-snap-align:start;
padding:40px 24px;
}
/* HOW TO ORDER / PRIVACY — stacked, no swipe */
.bd-steps{grid-template-columns:1fr;}
.bd-steps__item{
border-right:0;
border-bottom:1px solid #ddd;
}
.bd-steps__item:last-child{border-bottom:0;}
/* REVIEWS — stacked, offer below */
.bd-reviews{grid-template-columns:1fr;gap:24px;}
.bd-reviews__grid{grid-template-columns:1fr;gap:16px;}
.bd-reviews__card{padding:24px;}
/* CHIPS — Figma 29:2855: one centred row of chips, 8px apart, 20px/12px inset */
.bd-also{gap:48px;}
.bd-also__title{
font-size:20px;
line-height:28px;
justify-content:center;
}
/* The heading is two lines on desktop and one here, and the break comes from
the field text via nl2br — so drop the
rather than edit the content. */
.bd-also__title br{display:none;}
.bd-also__chips{gap:8px;justify-content:center;}
.bd-chip{padding:20px 12px;}
/* FAQ — single column */
.bd-faq__cols{columns:1;}
/* FINAL CTA — visible on every width; here the buttons go full-bleed */
.bd-cta-mobile__btns{flex-direction:column;align-items:stretch;}
.bd-cta-mobile .bd-btn{width:100%;text-align:center;}
}
/* ---------------------------------------------------------------------
REPLACEMENTS FOR THE JAVASCRIPT WE DELIBERATELY DO NOT SHIP.
An inline JS tag inside a PHP snippet trips mod_security / Wordfence:
the POST that saves the snippet is blocked and the server 500s before
the code ever runs. So both behaviours are done here in CSS instead.
--------------------------------------------------------------------- */
/* 1. Empty field -> empty shortcode -> hide the whole Flatsome section,
otherwise it leaves a gap of bare padding.
:has() is supported by every current browser. */
.section:has(> .row > .col > .col-inner > .bd-city.bd-empty),
.section:has(.bd-city.bd-empty),
section:has(> .bd-city.bd-empty){
display:none !important;
}
/* Fallback for very old browsers with no :has() — at least hide the stub */
.bd-city.bd-empty{
display:none;
}
/* 2. Short SEO text: the MORE button used to be hidden by JS.
Now the box simply never grows past its content, and the fade only
shows when the text is actually taller than the collapsed height. */
.bd-seo__box{
max-height:var(--bd-seo-h);
}
/* ---------------------------------------------------------------------
Kill Flatsome's 30px column bottom-padding inside our sections.
Flatsome sets .col { padding: 0 15px 30px } on every column, which adds
an unwanted 30px gap below our content — section spacing is already handled
by the section padding. Scoped with :has() so only columns that hold our
content are touched (footer/other columns keep their padding).
--------------------------------------------------------------------- */
.col:has(> .col-inner > .bd-city),
.col:has(.bd-city){
padding-bottom:0;
}
/* ---------------------------------------------------------------------
The lead paragraph carries a 48px bottom margin so it clears the grid
that usually follows it. In the intro section it is the LAST element, so
that margin is dead space on top of the section padding — drop it there.
--------------------------------------------------------------------- */
.bd-city .bd-sec__lead:last-child{
margin-bottom:0;
}