/*@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600;700&display=swap');*/
html, body {
margin: 0 !important;
padding: 0 !important;
}
body {
font-family: 'Inter', sans-serif;
}
@media (min-width: 771px) {
html body .header-bg,
html body .header-bg > .header_top {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
h1, h2, h3, .serif-font {
font-family: 'Playfair Display', serif !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
h1 {
line-height: 1.1 !important;
font-size: 1.90rem !important;
}
.header.header_mobile_search{border:0px !important}
/* ── DESKTOP HIDE (mobile header + hero + homepage delivery-on-hero duplicate) ── */
.container {
margin-top: 0 !important;
}
.f4pm-header {
position: sticky !important;
}
@media (min-width: 1367px) {
.f4pm-header,
.f4pm-hero,
.f4p-home-delivery-wrap {
display: none !important;
}
/* Index intro: full SEO body on desktop — no toggle row */
.customer_txt .panel-text-wrapper.f4p-intro-card .panel-text {
display: block !important;
opacity: 1 !important;
animation: none !important;
}
.customer_txt .panel-text-wrapper.f4p-intro-card .f4p-intro-readmore-row {
display: none !important;
}
/* Category/listing pages: show full article text, no Read more collapse */
.content-box .customer_txt.f4p-category-seo .panel-text-wrapper:not(.expanded) .panel-text {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
max-height: none !important;
}
/* Hide Read more / Read less links on desktop */
.content-box .customer_txt.f4p-category-seo a.show-more,
.content-box .customer_txt.f4p-category-seo a.hide-more {
display: none !important;
}
}
/* Mobile listing: prevent delivery chip from overlapping product image */
@media (max-width: 770px) {
html body ul.products li div.ext,
html body ul.products li div.ext-basket {
position: relative !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle,
html body ul.products li div.ext > h5.f4p-delivery-subtitle,
html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: fit-content !important;
max-width: calc(100% - 26px) !important;
margin: 0 auto 8px auto !important;
padding: 4px 10px !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(53, 150, 181, 0.25) !important;
border-radius: 10px !important;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
text-align: center !important;
z-index: 2 !important;
}
html body ul.products li div.ext > h3.best-seller,
html body ul.products li div.ext-basket > h3.best-seller {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: fit-content !important;
max-width: calc(100% - 26px) !important;
margin: 0 auto 6px auto !important;
line-height: 1.1 !important;
z-index: 2 !important;
}
html body ul.products li div.ext > h3.best-seller:empty,
html body ul.products li div.ext-basket > h3.best-seller:empty,
html body ul.products li div.ext > h3.best-seller strong:empty,
html body ul.products li div.ext-basket > h3.best-seller strong:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body ul.products li div.ext > h3[class*="promotion"]:empty,
html body ul.products li div.ext-basket > h3[class*="promotion"]:empty,
html body ul.products li div.ext > h3[class*="promotion"] strong:empty,
html body ul.products li div.ext-basket > h3[class*="promotion"] strong:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle::before,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle::before,
html body ul.products li div.ext > h5.f4p-delivery-subtitle::before,
html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle::before {
display: none !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
html body ul.products li div.ext > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2 {
display: inline !important;
text-align: center !important;
font-size: 10px !important;
line-height: 1.2 !important;
color: #1f2937 !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1::before,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1::before,
html body ul.products li div.ext > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1::before,
html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1::before {
content: "✦ " !important;
font-weight: 600 !important;
}
}
/* All iPads (Mini, Air, Pro 11", Pro 12.9") — both portrait and landscape — use the mobile/tablet
header stack with f4pm-hero. iPad Mini portrait (screenshot 3) is the source of truth. */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
.f4pm-header,
.f4pm-hero,
.f4p-home-delivery-wrap {
display: block !important;
}
html body:has(.f4pm-header) .header-bg,
html body:has(.f4pm-header) .header.header_mobile_search {
display: none !important;
visibility: hidden !important;
}
/* Hide the desktop homepage slider banner — f4pm-hero replaces it on iPad */
html body:has(.f4pm-hero) .index_slider,
html body:has(.f4pm-hero) div.index_slider,
html body:has(.f4pm-hero) .sliderwrapper,
html body:has(.f4pm-hero) .jssor_imgbox {
display: none !important;
}
/* Hide the homepage's duplicate "Check our delivery areas" section + Pakistan intro banner-with-text.
IMPORTANT: scope to `.login-block:has(.customer_txt)` because login.html ALSO uses `.login-block`
for the actual login form — that one must remain visible. The homepage's version contains
`.customer_txt` (the Pakistan intro card); the login page's doesn't. */
html body:has(.f4pm-hero) section.login-block:has(.customer_txt),
html body:has(.f4pm-hero) .login-block:has(.customer_txt),
html body:has(.f4pm-hero) .login-block:has(.customer_txt) .login-sec,
html body:has(.f4pm-hero) .login-block:has(.customer_txt) .row.login-box,
html body:has(.f4pm-hero) .customer_txt,
html body:has(.f4pm-hero) .customer_txt .f4p-intro-card,
html body:has(.f4pm-hero) .panel-text-wrapper.f4p-intro-card {
display: none !important;
visibility: hidden !important;
}
}
/* Delivery search box — widen to 90% across ALL iPad widths (Mini 768 → Pro 12.9" 1366),
both portrait and landscape. Specificity must beat line 765's
`html body .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap` (0,4,2). */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap,
html body .wrapper .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap,
html body .wrapper .grid-wrap.half-gutter .popup-content2.f4p-dlv-wrap,
html body .wrapper .grid-col > .popup-content2.f4p-dlv-wrap,
html body .container .grid-col > .popup-content2.f4p-dlv-wrap,
html body .login-block .login-sec .popup-content2.f4p-dlv-wrap,
html body .grid-col .popup-content2.f4p-dlv-wrap.f4p-home-delivery-desktop-only,
html body .popup-content2.f4p-dlv-wrap.f4p-home-delivery-desktop-only.f4p-dlv-wrap {
width: 70% !important;
max-width: 70% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* Hide duplicate "Check our delivery areas" + Pakistan intro across ALL iPad widths (portrait + landscape).
The f4pm-hero (portrait) or grid header (landscape) already provides the delivery search.
Scoped to `:has(.customer_txt)` so login.html's `.login-block` (the actual login form) stays visible. */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body:has(.f4pm-hero) section.login-block:has(.customer_txt),
html body:has(.f4pm-hero) div.login-block:has(.customer_txt),
html body:has(.f4pm-hero) section.login-block:has(.customer_txt) .login-sec,
html body:has(.f4pm-hero) section.login-block:has(.customer_txt) .row.login-box,
html body:has(.f4pm-hero) .login-block:has(.customer_txt) .container .row.login-box,
html body:has(.f4pm-hero) .customer_txt,
html body:has(.f4pm-hero) .customer_txt .f4p-intro-card,
html body:has(.f4pm-hero) .panel-text-wrapper.f4p-intro-card {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* Keep only the hero delivery box: hide duplicate in main flow when header already has .f4p-home-delivery-wrap (homepage). Category pages have no header card — do not hide main .f4p-dlv-wrap. */
html body:has(.f4pm-hero):has(.f4p-home-delivery-wrap) .main-container3 .grid-col > .popup-content2.f4p-dlv-wrap {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap {
display: grid !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
margin: -76px auto 18px !important;
padding: 16px 14px !important;
}
/* Always hide the desktop homepage slider banner on iPad — replaced by f4pm-hero (portrait)
or the grid header at landscape. */
html body:has(.f4pm-hero) .index_slider,
html body:has(.f4pm-hero) div.index_slider,
html body:has(.f4pm-hero) .sliderwrapper,
html body:has(.f4pm-hero) .jssor_imgbox {
display: none !important;
}
/* `.ipad_hidden` / `.iphone_hidden` are only set to display:none in @media (max-width: 770px) in
css_styles.tpl — so on iPad Air/Pro (820+) they stay visible, which is why iPad Air shows the
"Check our delivery areas" h2 (it has class `ipad_hidden iphone_hidden`) while iPad Mini hides it.
Extend the hiding to all iPad widths to match iPad Mini's behaviour. */
html body h2.ipad_hidden,
html body h3.ipad_hidden,
html body .ipad_hidden.iphone_hidden,
html body .index-mh-delivery.ipad_hidden,
html body .f4p-home-delivery-wrap h2.index-mh-delivery.ipad_hidden,
html body .f4p-home-delivery-wrap h2.index-mh-delivery.iphone_hidden {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* `.desktop_hidden` ("Choose your delivery city" inner heading) needs to be SHOWN on iPad
to match iPad Mini's design. */
html body h2.desktop_hidden.index-mh-delivery,
html body h2.desktop_hidden.f4p-delivery-inner-title,
html body .popup-content2.f4p-dlv-wrap h2.desktop_hidden {
display: block !important;
visibility: visible !important;
height: auto !important;
text-align: center !important;
margin: 0 0 12px !important;
padding: 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #1f2937 !important;
}
}
/* iPad: delivery form overlays the bottom of f4pm-hero (the screenshot 3 effect).
The mobile rule at @media (max-width: 770px) line 1433 uses `margin: -76px auto 18px` to pull
the form up onto the hero. Replicate that for all iPad sizes since their viewport doesn't match
the mobile media query. */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body .f4pm-hero ~ .f4p-home-delivery-wrap {
position: relative !important;
z-index: 4 !important;
box-sizing: border-box !important;
overflow: visible !important;
max-width: 28rem !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
background: transparent !important;
margin-top: 0 !important;
}
html body .f4pm-hero ~ .f4p-home-delivery-wrap .grid-wrap,
html body .f4pm-hero ~ .f4p-home-delivery-wrap .grid-wrap.half-gutter,
html body .f4pm-hero ~ .f4p-home-delivery-wrap .grid-col {
overflow: visible !important;
}
html body.f4p-home-delivery-hero-active .header-bg,
html body.f4p-home-delivery-hero-active section[itemprop="organizer"] {
overflow: visible !important;
}
/* The negative margin-top is what creates the overlay effect onto the hero photo. */
html body .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap {
margin: -92px auto 18px !important;
max-width: calc(100% - 24px) !important;
width: 100% !important;
position: relative !important;
z-index: 2 !important;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
background: #fff !important;
border-radius: 14px !important;
padding: 16px 14px !important;
box-sizing: border-box !important;
}
}
/* Index intro: title row, then Read more directly above body (mobile toggles body) */
.customer_txt .f4p-intro-heading-row {
text-align: center;
margin: 0 0 6px 0;
line-height: 1.35;
}
.customer_txt .f4p-intro-heading-row h2.entry-title {
display: block;
margin: 0;
padding: 0;
}
.customer_txt .f4p-intro-readmore-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
text-align: center !important;
margin: 0 0 4px 0 !important;
line-height: 1.35 !important;
gap: 4px !important;
}
.customer_txt .f4p-intro-readmore-row .f4p-intro-ellipsis {
color: #111827;
font-weight: 600;
}
.customer_txt .f4p-intro-readmore-row .btn-read-more,
.customer_txt .f4p-intro-readmore-row .hide-more {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0;
vertical-align: baseline;
font-size: 13px;
font-weight: 600;
}
.customer_txt .panel-text-wrapper.expanded .f4p-intro-ellipsis {
display: none !important;
}
/* Between homepage intro column and “Choose your category” — .f4p-intro-fade avoids css_head .fade negative margin */
.fade.f4p-intro-fade.f4p-index-fade-before-categories {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
height: 48px !important;
min-height: 0 !important;
pointer-events: none !important;
box-sizing: border-box !important;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 50%, #ffffff 100%) !important;
}
@media (min-width: 771px) {
.fade.f4p-intro-fade.f4p-index-fade-before-categories {
height: 28px !important;
background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, #ffffff 100%) !important;
}
/* Desktop heading "Check our delivery areas…" — shown on desktop, hidden on mobile (above) */
h3.index-mh-delivery {
display: block !important;
text-align: center !important;
margin: 0 0 10px !important;
color: #1e293b !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
/* Hide mobile inner-card title on desktop */
h2.f4p-delivery-inner-title.index-mh-delivery {
display: none !important;
}
}
/* ═══════════════════════════════════════
TOP BAR — removed (icons moved to main header)
═══════════════════════════════════════ */
.f4pm-top-bar { display: none !important; }
/* Row-2: icon buttons (account, search) — full cell, column layout */
.f4pm-icon-btn {
cursor: pointer; background: none; border: none; padding: 0; color: #1a1a1a;
text-decoration: none; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 3px; flex: 1;
}
.f4pm-icon-btn svg { width: 24px; height: 24px; stroke: #1a1a1a; fill: none; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
/* dividers no longer needed — borders handled by row2 cell borders */
.f4pm-divider { display: none; }
.f4pm-chev { width: 9px; height: 9px; stroke: #444; fill: none; stroke-width: 2.5; stroke-linecap: round; flex-shrink: 0; }
.f4pm-cart-badge {
position: absolute; top: 3px; right: calc(50% - 22px); background: #3596b5; color: #fff;
font-size: 9px; font-weight: 700; width: 17px; height: 17px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
/* ── LANGUAGE DROPDOWN ── */
.f4pm-lang-wrap { position: relative; }
.f4pm-lang-trigger {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; cursor: pointer; background: none; border: none; padding: 0; flex: 1;
font-size: 10px; color: #1a1a1a; font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
}
.f4pm-lang-trigger .icon3, .f4pm-lang-drop .icon3 {
width: 26px !important; height: 18px !important; display: inline-block !important; vertical-align: middle; flex-shrink: 0;
}
/* Row showing flag + chev inline */
.f4pm-lang-flag-row {
display: flex; align-items: center; gap: 3px;
}
.f4pm-lang-drop {
display: none; position: fixed; top: auto; left: 0;
width: 260px;
background: #fff; border: 1px solid #eee;
border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.15);
z-index: 999999 !important; padding: 10px 0;
max-height: 340px !important; overflow-y: auto !important;
}
.f4pm-lang-drop.open { display: block; }
.f4pm-lang-drop a {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px; text-decoration: none; color: #333;
font-size: 14px; font-family: 'Inter', system-ui, sans-serif;
line-height: 1.35;
}
/* ── CURRENCY DROPDOWN ── */
.f4pm-curr-wrap { position: relative; }
.f4pm-curr-trigger {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; cursor: pointer; background: none; border: none; padding: 0; flex: 1;
font-size: 10px; font-weight: 600; color: #1a1a1a;
font-family: 'Inter', system-ui, sans-serif;
}
/* Row showing code + chev inline */
.f4pm-curr-code-row {
display: flex; align-items: center; gap: 3px;
font-size: 15px; font-weight: 700; color: #111;
}
.f4pm-curr-drop {
display: none; position: fixed; top: auto; left: 0;
width: 260px;
background: #fff; border: 1px solid #eee;
border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.15);
z-index: 999999 !important; padding: 10px 0;
max-height: 340px !important; overflow-y: auto !important;
}
.f4pm-curr-drop.open { display: block; }
.f4pm-curr-drop button {
display: block; width: 100%; padding: 12px 18px; background: none; border: none;
text-align: left; font-size: 14px; color: #333; cursor: pointer; white-space: nowrap;
font-family: 'Inter', system-ui, sans-serif;
line-height: 1.35;
}
.f4pm-curr-drop button:hover { background: #f8f5f2; }
/* ═══════════════════════════════════════
MAIN HEADER (2-row, fixed via JS)
═══════════════════════════════════════ */
.f4pm-header {
display: flex; flex-direction: column;
background: #fff; border-bottom: 1px solid #ece7e0;
position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important;
width: 100% !important;
z-index: 99000 !important;
overflow: visible !important;
box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
/* Row 1: burger | logo | cart */
.f4pm-hdr-row1 {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px 8px;
}
/* Row 2: utility bar — 4 equal columns, solid white (matches reference) */
.f4pm-hdr-row2 {
display: flex; align-items: stretch;
position: relative;
border-top: 1px solid #ececec;
background: #ffffff;
box-shadow: none;
}
.f4pm-hdr-row2::before {
display: none;
}
/* Each cell in row 2 — light vertical dividers */
.f4pm-hdr-row2 > * {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 8px 4px 9px; gap: 3px;
position: relative;
}
.f4pm-hdr-row2 > *:not(:last-child) {
box-shadow: 1px 0 0 #ebebeb;
}
/* Label under icon */
.f4pm-row2-label {
font-size: 12px; color: #333; font-family: 'Inter', system-ui, sans-serif;
font-weight: 500; letter-spacing: 0.02em; white-space: nowrap;
line-height: 1;
}
/* Mobile header logo — Cocon */
.f4pm-logo-compare-wrap {
flex: 1;
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 0 4px;
}
/* Stitch-style logo: "Flowers for / Pakistan" centered */
.logomobile {
display: flex; flex-direction: column; align-items: center;
text-decoration: none; line-height: 1.1;
}
.logomobile .f4pm-logo-line1 {
font-family: 'Playfair Display', Georgia, serif;
font-family: Cocon;
font-size: 1.5rem;
font-weight: 700; color: #1a1a1a; letter-spacing: -0.025em;
line-height: 1;
}
.logomobile .f4pm-logo-line1 em {
font-style: normal; font-weight: 700; letter-spacing: 0;
font-family: Cocon;
color: #3596b5;
}
.logomobile .f4pm-logo-line2 {
font-family: 'Playfair Display', Georgia, serif;
font-family: Cocon;
font-size: 1.5rem;
font-weight: 700;
color: #3596b5;
letter-spacing: -0.025em;
line-height: 1;
}
.logomobile .f4pm-logo-sub {
font-size: 10px; color: #6b7280; letter-spacing: .1em; text-transform: uppercase;
margin-top: 3px; font-family: Arial, sans-serif; font-weight: 400;
}
.logomobile .f4pm-logo-sub .f4pm-logo-tag {
display: inline-block;
margin-left: 4px;
padding: 1px 5px;
border-radius: 4px;
background: #f3f4f6;
color: #4b5563;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
vertical-align: middle;
}
/* Burger — left side */
.f4pm-burger {
display: flex; flex-direction: column; justify-content: center; gap: 5px;
cursor: pointer; padding: 4px; background: none; border: none; flex-shrink: 0;
-webkit-user-select: none; user-select: none;
}
.f4pm-burger > .f4pm-bar {
display: block; width: 22px; height: 1.8px; background: #1a1a1a;
border-radius: 2px; transition: transform 0.28s ease, opacity 0.28s ease;
}
.f4pm-burger.f4pm-open .f4pm-bar:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.f4pm-burger.f4pm-open .f4pm-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.f4pm-burger.f4pm-open .f4pm-bar:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }
/* Cart — right side */
.f4pm-header-cart {
display: flex; align-items: center; justify-content: center; position: relative;
color: #222; text-decoration: none; flex-shrink: 0;
min-width: 40px; min-height: 40px; padding: 4px;
}
.f4pm-header-cart svg { width: 26px; height: 26px; stroke: #222; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.f4pm-header-cart .f4pm-cart-badge { top: 2px; right: 0; background: #3596b5; position: absolute; }
/* ── OVERLAY ── */
.f4pm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99998; }
.f4pm-overlay.open { display: block !important; visibility: visible !important; pointer-events: auto !important; }
/* ═══════════════════════════════════════
MENU PANEL (slide-in from left)
═══════════════════════════════════════ */
/* Stitch code.html tokens: dark-green #3596b5, light-beige #f5f0e6, borders #e0d6c4 */
#f4pm-menu-panel {
position: fixed !important; top: 0 !important; left: 0 !important;
width: 80vw !important; max-width: 290px !important;
height: 100vh !important;
max-height: 100vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
touch-action: pan-y !important;
transform: translateX(-110%) !important;
transition: transform 0.36s cubic-bezier(0.77,0.2,0.05,1.0) !important;
z-index: 99999 !important; margin: 0 !important; padding: 0 !important;
background: #f5f0e6 !important; list-style: none !important;
box-shadow: none !important;
border-right: 1px solid #e0d6c4 !important;
font-family: 'Inter', system-ui, sans-serif !important;
-webkit-font-smoothing: antialiased;
}
#f4pm-menu-panel.f4pm-menu-open {
transform: translateX(0) !important;
visibility: visible !important;
pointer-events: auto !important; z-index: 9999999!important;
}
#f4pm-menu-panel > li { display: block !important; padding: 0 !important; }
/* ── HEADER BAR ── */
#f4pm-menu-panel .f4pm-menu-header {
display: flex !important; align-items: center !important; justify-content: space-between !important;
padding: 14px 16px !important;
background: #3596b5 !important;
border-bottom: 1px solid #2a7fa3 !important;
}
#f4pm-menu-panel .f4pm-site-name {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 1.1rem !important; font-weight: 700 !important; color: #ffffff !important;
line-height: 1.3 !important; letter-spacing: 0 !important;
}
/* Close — Inter, hover gray */
#f4pm-menu-panel .f4pm-close-btn {
display: flex !important; align-items: center !important; gap: 6px !important;
background: none !important; border: none !important; border-radius: 0 !important;
padding: 0 !important; cursor: pointer !important;
font-size: 0.875rem !important; font-weight: 500 !important; color: #ffffff !important;
font-family: 'Inter', system-ui, sans-serif !important;
transition: color 0.15s ease !important;
}
#f4pm-menu-panel .f4pm-close-btn:hover,
#f4pm-menu-panel .f4pm-close-btn:focus-visible {
color: #a7c4b5 !important;
}
#f4pm-menu-panel .f4pm-close-btn svg { display: none !important; }
/* ── WELCOME STRIP (Stitch: px-4 py-4 bg #ede6d9, border-b #e0d6c4) ── */
#f4pm-menu-panel .f4pm-menu-welcome-wrap {
list-style: none !important;
}
#f4pm-menu-panel .f4pm-menu-welcome {
padding: 16px !important;
margin: 0 !important;
background: #ede6d9 !important;
border-bottom: 1px solid #e0d6c4 !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 1.125rem !important;
font-weight: 400 !important;
line-height: 1.35 !important;
color: #3596b5 !important;
}
/* ── SECTION TITLES (ALL CATEGORIES / MENU & OPTIONS) — Stitch ── */
#f4pm-menu-panel .menu-hb {
background: transparent !important; border-radius: 0 !important;
box-shadow: none !important; margin: 0 !important; padding: 0 !important;
list-style: none !important; overflow: visible !important;
}
#f4pm-menu-panel .f4pm-menu-title-block {
text-align: center !important;
padding: 24px 16px 0 !important;
margin: 0 !important;
}
#f4pm-menu-panel .menu-title {
display: block !important; text-align: center !important;
margin: 0 0 8px 0 !important; padding: 0 !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: #3596b5 !important;
background: transparent !important;
border: none !important;
line-height: 1.3 !important;
}
/* Decorative line: horizontal rules + ornament (Stitch .decorative-line) */
#f4pm-menu-panel .f4pm-decorative-line {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0 20px 0 !important;
width: 100% !important;
}
#f4pm-menu-panel .f4pm-decorative-line::before,
#f4pm-menu-panel .f4pm-decorative-line::after {
content: '' !important;
flex: 1 !important;
border-bottom: 1px solid #3596b5 !important;
margin: 0 10px !important;
max-width: 40px !important;
}
#f4pm-menu-panel .f4pm-ornament {
color: #3596b5 !important;
font-size: 1.2rem !important;
line-height: 1 !important;
}
#f4pm-menu-panel .menu-title img { display: none !important; }
#f4pm-menu-panel .menu-options-title {
display: block !important; text-align: left !important;
padding: 0 24px 16px !important; margin: 0 !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 0.875rem !important; font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #1a1a1a !important;
background: transparent !important;
border: none !important;
line-height: 1.3 !important;
}
#f4pm-menu-panel .menu-options-title img { display: none !important; }
/* Category list: one line between rows only (border-top on li+li — avoids double lines) */
#f4pm-menu-panel .menu-cont {
list-style: none !important; margin: 0 !important; padding: 0 !important;
background: transparent !important; border-radius: 0 !important;
box-shadow: none !important; overflow: visible !important;
}
#f4pm-menu-panel .menu-cont > li {
display: block !important; padding: 0 !important;
margin: 0 !important;
border: none !important;
border-bottom: none !important;
}
/* Row separators — Stitch palette */
#f4pm-menu-panel .menu-cont > li + li {
border-top: 1px solid #e0d6c4 !important;
}
/* Single hairline between rows: legacy css_head .menu-hb ul li a uses border-bottom !important — remove it here */
#f4pm-menu-panel .menu-hb ul.menu-cont > li > a {
border-bottom: none !important;
}
/* Undo fixed row height from legacy menu so padding isn’t clipped */
#f4pm-menu-panel .menu-hb ul.menu-cont > li {
height: auto !important;
min-height: 0 !important;
}
#f4pm-menu-panel .menu-hb ul.menu-cont > li > a span {
height: auto !important;
left: auto !important;
top: auto !important;
}
/* MENU & OPTIONS block — Stitch: border-t #e0d6c4, pt-6 */
#f4pm-menu-panel .menu-cont > li.f4pm-menu-options-heading,
#f4pm-menu-panel .menu-cont > li:has(.menu-options-title) {
padding-top: 24px !important;
margin-top: 8px !important;
border-top: 1px solid #e0d6c4 !important;
background: transparent !important;
}
/* ── MENU LINKS — Stitch: px-6 py-3, Inter text-base, hover row #e8e0d2 ── */
#f4pm-menu-panel .menu-cont > li {
transition: background-color 0.15s ease !important;
}
#f4pm-menu-panel .menu-cont > li:hover {
background: #e8e0d2 !important;
}
#f4pm-menu-panel .menu-cont > li.f4pm-menu-options-heading:hover,
#f4pm-menu-panel .menu-cont > li:has(.menu-options-title):hover {
background: transparent !important;
}
#f4pm-menu-panel a {
display: flex !important; align-items: center !important; gap: 12px !important;
padding: 12px 24px !important; text-decoration: none !important;
color: #1a1a1a !important; font-size: 1rem !important; font-weight: 400 !important;
line-height: 1.4 !important; background: transparent !important;
font-family: 'Inter', system-ui, sans-serif !important;
min-height: 0 !important;
box-sizing: border-box !important;
transition: background-color 0.15s ease !important;
}
#f4pm-menu-panel .menu-cont > li > a:hover {
background: transparent !important;
}
#f4pm-menu-panel .menu-cont > li > a:active { background: transparent !important; }
/* Icons — Stitch dark-green ~80% */
#f4pm-menu-panel a img {
width: 24px !important; height: 24px !important; flex-shrink: 0 !important;
padding: 0 !important; background: transparent !important;
border-radius: 0 !important; box-sizing: content-box !important;
opacity: 0.88 !important;
filter: invert(22%) sepia(28%) saturate(1200%) hue-rotate(112deg) brightness(0.55) contrast(1.05) !important;
}
#f4pm-menu-panel a span {
display: inline !important; color: #1a1a1a !important;
font-size: 1rem !important; font-weight: 400 !important; flex: 1 !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
/* No right-side chevron on menu items (the International Flowers toggle gets its own arrow below) */
#f4pm-menu-panel .menu-cont > li > a::after {
content: none !important;
display: none !important;
}
/* ── INTERNATIONAL SUBMENU (mobile) ── */
#f4pm-menu-panel .f4pm-international-item { display: block !important; padding: 0 !important; }
#f4pm-menu-panel .menu-cont > li > a.f4pm-international-toggle {
position: relative !important;
}
#f4pm-menu-panel .menu-cont > li > a.f4pm-international-toggle::after {
content: '' !important;
display: block !important;
position: absolute !important;
right: 24px !important;
top: 50% !important;
width: 8px !important; height: 8px !important;
border: 0 !important;
border-right: 2px solid #6b7280 !important;
border-bottom: 2px solid #6b7280 !important;
transform: translateY(-70%) rotate(45deg) !important;
transition: transform 0.2s ease !important;
background: transparent !important;
font-size: 0 !important;
}
#f4pm-menu-panel .menu-cont > li > a.f4pm-international-toggle[aria-expanded="true"]::after {
transform: translateY(-30%) rotate(-135deg) !important;
}
#f4pm-international {
background: rgba(0, 0, 0, 0.025) !important;
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
padding: 4px 0 8px !important;
margin: 0 !important;
animation: f4pmIntlOpen 0.2s ease !important;
}
@keyframes f4pmIntlOpen {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* doubled ID for higher specificity — beats other ul.city_shops rules in css_head.css */
#f4pm-international#f4pm-international ul.city_shops {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
display: block !important;
columns: auto !important;
column-count: 1 !important;
column-width: auto !important;
width: 100% !important;
max-height: none !important;
overflow: visible !important;
float: none !important;
flex: none !important;
}
#f4pm-international#f4pm-international ul.city_shops li {
padding: 0 !important;
margin: 0 !important;
border: none !important;
list-style: none !important;
display: block !important;
width: 100% !important;
float: none !important;
flex: none !important;
break-inside: avoid !important;
background: transparent !important;
}
#f4pm-international#f4pm-international ul.city_shops li + li {
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}
#f4pm-international#f4pm-international ul.city_shops a {
display: block !important;
width: 100% !important;
float: none !important;
flex: none !important;
padding: 11px 24px 11px 60px !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 0.875rem !important;
font-weight: 400 !important;
color: #374151 !important;
text-decoration: none !important;
background: transparent !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
white-space: normal !important;
text-align: left !important;
box-sizing: border-box !important;
min-height: 0 !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
#f4pm-international#f4pm-international ul.city_shops a::before,
#f4pm-international#f4pm-international ul.city_shops a::after { display: none !important; content: none !important; }
#f4pm-international#f4pm-international ul.city_shops a:hover,
#f4pm-international#f4pm-international ul.city_shops a:active,
#f4pm-international#f4pm-international ul.city_shops a:focus {
background: rgba(15, 118, 110, 0.06) !important;
color: #0f766e !important;
}
#f4pm-menu-panel li[style*="display: none"] { display: none !important; }
#f4pm-menu-panel > li:last-child { padding-bottom: 96px !important; }
/* ═══════════════════════════════════════
HERO BANNER (full-bleed photo, centered white copy — reference layout)
═══════════════════════════════════════ */
/* Outer overflow visible like .f4p-cat-hero — clip photo only in .f4pm-hero-visual */
.f4pm-hero {
position: relative !important; z-index: 1 !important;
width: 100%; box-sizing: border-box;
padding: 0 !important;
margin: 0 !important;
overflow: visible;
background: #e8c9a8;
}
.f4pm-hero-visual {
position: relative;
min-height: 300px;
display: flex;
align-items: stretch;
justify-content: center;
overflow: hidden;
border-radius: inherit;
}
@media (min-width: 400px) {
.f4pm-hero-visual { min-height: 340px; }
}
.f4pm-hero-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* iPad portrait (Mini + Air): keep model face visible in hero */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
/* Fixed header has two rows; add offset so hero starts below row-2 */
html body .f4pm-hero ~ .f4p-home-delivery-wrap {
margin-top: 38px !important;
}
.f4pm-hero-photo {
/* Restore original framing: lady starts from top of banner */
object-position: center top !important;
}
/* Use more horizontal room on iPad Mini portrait */
html body .wrapper.f4p-home-delivery-wrap,
html body .f4pm-hero ~ .f4p-home-delivery-wrap {
padding-left: 6px !important;
padding-right: 6px !important;
}
html body .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap {
width: 100% !important;
max-width: calc(100% - 12px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Widen whole content column (category, filters, product cards) */
html body .main-container3,
html body .f4p-page-main-column {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 8px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
}
html body .main-content .wrapper,
html body .wrapper {
padding-left: 8px !important;
padding-right: 8px !important;
}
.main-container3 > .wrapper:first-child {
margin-top: 180px !important;
margin-top: 0px !important;
}
.f4pm-hero+.main-container3 > .wrapper:first-child {
margin-top: 0px !important;
}
/* iPad Mini: featured delivery links in 3 columns */
html body .featured-areas-card ul.foldershops.f4p-location-grid,
html body .featured-areas-card ul.foldershops {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px 12px !important;
}
/* iPad Mini product cards: natural image height + tighter body */
html body ul.products li div.ext .prod_img {
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
background: #fff !important;
}
html body ul.products li div.ext .prod_img a {
height: auto !important;
}
html body ul.products li div.ext .prod_img img {
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
object-position: center top !important;
display: block !important;
}
html body ul.products li div.ext .prod_det {
padding-top: 0 !important;
margin-top: 0 !important;
}
html body ul.products li div.ext .prod_det h4,
html body ul.products li div.ext .prod_det h4 a {
font-size: 20px !important;
line-height: 1.28 !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
html body ul.products li div.ext .prod_det > span:not(.avail_color) {
font-size: 13px !important;
line-height: 1.3 !important;
color: #7d8793 !important;
margin-bottom: 0px !important;
}
html body ul.products li div.ext .prod_price {
margin-top: 6px !important;
padding-top: 2px !important;
}
html body ul.products li div.ext .prod_price span.a-center strong {
font-size: 18px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
color: #1f2937 !important;
}
html body ul.products li div.ext .prod_price span.a-center.prod_price-row {
font-size: 13px !important;
line-height: 1.2 !important;
color: #8b919a !important;
}
html body ul.products li div.ext .prod_btn {
margin-top: 8px !important;
}
html body ul.products li div.ext .prod_btn .md_button.green,
html body ul.products li .prod_btn .md_button.green {
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
height: 34px !important;
min-height: 34px !important;
border-radius: 999px !important;
font-size: 12px !important;
letter-spacing: 0.05em !important;
padding: 0 10px !important;
}
html body ul.products li div.ext .prod_btn .md_button.green a,
html body ul.products li .prod_btn .md_button.green a {
min-height: 34px !important;
line-height: 34px !important;
font-size: 12px !important;
}
/* iPad Mini: Delivery Tomorrow badge as small box on right */
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle {
position: absolute !important;
top: 8px !important;
right: 8px !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
max-width: 126px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 6px 10px !important;
border-radius: 10px !important;
background: rgba(255, 255, 255, 0.94) !important;
box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08) !important;
text-align: right !important;
z-index: 6 !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle::before,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle::before {
display: none !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2 {
font-size: 11px !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 3px !important;
}
/* iPad Mini final card polish: cleaner title/delivery/price/button rhythm */
html body ul.products li div.ext,
html body ul.products li div.ext-basket {
border-radius: 10px !important;
overflow: hidden !important;
}
html body ul.products li div.ext .prod_det,
html body ul.products li div.ext-basket .prod_det {
padding: 6px 8px 0 !important;
margin: 0 !important;
text-align: center !important;
}
html body ul.products li div.ext .prod_det h4,
html body ul.products li div.ext .prod_det h4 a,
html body ul.products li div.ext-basket .prod_det h4,
html body ul.products li div.ext-basket .prod_det h4 a {
font-size: 18px !important;
line-height: 1.25 !important;
margin: 0 0 2px !important;
font-weight: 600 !important;
text-align: center !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
display: block !important;
max-width: 100% !important;
margin: 0 0 6px !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
text-align: center !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2 {
display: inline !important;
font-size: 11px !important;
line-height: 1.25 !important;
color: #6b7280 !important;
text-align: center !important;
}
html body ul.products li div.ext .prod_price,
html body ul.products li div.ext-basket .prod_price {
margin-top: 4px !important;
padding: 0 8px 8px !important;
line-height: 1.2 !important;
text-align: center !important;
}
html body ul.products li div.ext .prod_price span.a-center:not(.prod_price-row),
html body ul.products li div.ext-basket .prod_price span.a-center:not(.prod_price-row) {
display: block !important;
white-space: normal !important;
color: #6b7280 !important;
}
html body ul.products li div.ext .prod_price span.a-center:not(.prod_price-row) strong,
html body ul.products li div.ext-basket .prod_price span.a-center:not(.prod_price-row) strong {
display: block !important; /* row 1: PKR */
line-height: 1.6em !important;
}
html body ul.products li div.ext .prod_price span.a-center:not(.prod_price-row) small,
html body ul.products li div.ext-basket .prod_price span.a-center:not(.prod_price-row) small {
display: block !important; /* row 2: EUR | GBP | USD */
margin-top: 2px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html body ul.products li div.ext .prod_btn,
html body ul.products li div.ext-basket .prod_btn {
margin-top: 6px !important;
}
html body ul.products li div.ext .prod_btn .md_button.green,
html body ul.products li div.ext-basket .prod_btn .md_button.green {
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
height: 32px !important;
min-height: 32px !important;
font-size: 11px !important;
}
}
/* iPad portrait (Mini/Air): force homepage delivery card to use full available width */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body .wrapper.f4p-home-delivery-wrap {
max-width: 28rem !important;
width: 100% !important;
padding-left: 8px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
}
html body .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap,
html body .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap.f4p-home-delivery-desktop-only {
width: 100% !important;
max-width: calc(100% - 8px) !important;
margin: -70px auto 18px !important;
padding: 16px 14px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
}
}
.f4pm-hero-scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.22) 100%),
radial-gradient(ellipse 90% 70% at 50% 45%, rgba(0, 0, 0, 0.18) 0%, transparent 65%);
}
.row.login-box{
box-shadow:none !important
}
.f4pm-hero-content {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
margin: 0;
padding: 52px 20px 52px;
text-align: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 100%;
}
/* Trustpilot strip — top of banner (above headline) */
.f4pm-hero-trustpilot {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: auto;
z-index: 3;
padding: 10px 14px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%);
min-height: 0;
line-height: 0;
}
.f4pm-hero-trustpilot .trustpilot-widget {
width: 100%;
max-width: 22rem;
margin: 0 auto;
min-height: 0;
line-height: normal;
}
.f4pm-hero-trustpilot iframe,
.f4pm-hero-trustpilot .trustpilot iframe {
height: 28px !important;
max-height: 32px !important;
min-height: 0 !important;
vertical-align: top !important;
}
.f4pm-hero-tag {
display: block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.28em;
color: #ffffff;
margin-bottom: 12px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.f4pm-hero h1 {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-weight: 700 !important;
font-size: clamp(1.5rem, 5.2vw, 2rem) !important;
line-height: 1.15 !important;
color: #ffffff !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
letter-spacing: -0.02em;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
max-width: 18rem;
word-wrap: break-word;
text-align: center;
}
.f4pm-hero-sub {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: clamp(0.8125rem, 2.8vw, 0.9375rem);
font-weight: 500 !important;
color: #ffffff !important;
margin: 0 0 20px 0 !important;
letter-spacing: 0.02em;
line-height: 1.45;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
max-width: 18rem;
}
.f4pm-shop-btn {
display: inline-block; padding: 13px 40px; border: none;
border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff !important;
text-decoration: none; letter-spacing: .12em; text-transform: uppercase;
background: #3596b5;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
transition: background 0.2s ease, transform 0.15s ease;
margin: 0;
align-self: center;
}
.f4pm-shop-btn:hover {
background: #2a7fa3;
color: #fff !important;
}
.f4pm-shop-btn:active { transform: scale(0.98); }
/* ═══════════════════════════════════════
MOBILE INDEX (Stitch / code.html tokens: #FAFAFA, #F3EFE9, #40826D, #A0CDB1)
═══════════════════════════════════════ */
@media (max-width: 770px) {
:root { --f4pm-mobile-header-offset: 104px; }
html, body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
/* Reserve room for the fixed mobile header — value is kept in sync
by syncMobileHeaderOffset() on load and resize. */
html body {
/*padding-top: var(--f4pm-mobile-header-offset, 104px) !important;*/
}
/* Mobile hard lock: no horizontal scroll. */
html, body {
max-width: 100vw !important;
overflow-x: hidden !important;
overflow-x: clip !important;
}
/* Some legacy wrappers can still become scroll containers; clamp them too. */
html body,
html body .main-content,
html body .main-container3,
html body .wrapper,
html body .container {
max-width: 100vw !important;
overflow-x: hidden !important;
overflow-x: clip !important;
}
html body .wrapper,
html body .container,
html body .grid-wrap,
html body .grid-col {
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Homepage hero: full-bleed cover; anchor top-left of art (model + head). No letterboxing. */
html body .f4pm-hero .f4pm-hero-visual {
min-height: min(92vw, 500px) !important;
}
html body .f4pm-hero .f4pm-hero-photo {
object-fit: cover !important;
object-position: left top !important;
}
html body .f4pm-hero .f4pm-hero-content {
justify-content: flex-start !important;
padding-top: 160px !important;
padding-bottom: 110px !important;
z-index: 4 !important;
}
html body .f4pm-hero .f4pm-hero-trustpilot {
z-index: 3 !important;
}
html body .f4pm-hero .f4pm-hero-scrim {
z-index: 1 !important;
}
html body .f4pm-hero .f4pm-hero-tag {
max-width: 100% !important;
letter-spacing: 0.1em !important;
padding: 0 10px !important;
box-sizing: border-box !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
position: relative !important;
z-index: 1 !important;
}
html body .f4pm-hero .f4pm-hero-content h1,
html body .f4pm-hero .f4pm-hero-sub {
position: relative !important;
z-index: 1 !important;
max-width: 100% !important;
width: 100% !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
box-sizing: border-box !important;
}
/* Product image (mobile): 1:1 slot matches square CDN thumbs — 4:5 + contain caused large top/bottom bars. */
html body ul.products li div.ext .prod_img,
html body ul.products li div.ext-basket .prod_img {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
padding: 0 !important;
gap: 0 !important;
line-height: 0 !important;
box-sizing: border-box !important;
min-height: 0 !important;
}
html body ul.products li div.ext .prod_img a,
html body ul.products li div.ext-basket .prod_img a {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100% !important;
margin: 0 !important;
gap: 0 !important;
line-height: 0 !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html body ul.products li div.ext .prod_img picture,
html body ul.products li div.ext-basket .prod_img picture {
display: flex !important;
flex: 1 1 auto !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
gap: 0 !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
html body ul.products li div.ext .prod_img img,
html body ul.products li div.ext-basket .prod_img img,
html body ul.products li div.ext .prod_img picture img,
html body ul.products li div.ext-basket .prod_img picture img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center center !important;
position: relative !important;
left: auto !important;
transform: none !important;
flex-shrink: 1 !important;
}
/* Keep floating translator widgets inside viewport (common source of right overflow). */
html body .gt_float_switcher,
html body .gtranslate_wrapper,
html body .goog-te-gadget,
html body [class*="translate-widget"],
html body [id*="translate_widget"] {
left: auto !important;
right: 8px !important;
max-width: calc(100vw - 16px) !important;
box-sizing: border-box !important;
transform: none !important;
}
html body .gt_float_switcher *,
html body .gtranslate_wrapper *,
html body .goog-te-gadget * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Ensure product breadcrumbs are visible below fixed mobile header */
html body .breadcrumbs {
display: block !important;
visibility: visible !important;
position: relative !important;
z-index: 2 !important;
margin: 0 !important;
padding: 8px 12px !important;
}
/* Flower detail page: keep breadcrumbs + product details visible on mobile */
html body .grid-col.flowerdetails ul.breadcrumbs,
html body .grid-col.flowerdetails .breadcrumbs {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 3 !important;
margin: 4px 0 8px !important;
padding: 8px 10px !important;
height: auto !important;
overflow: visible !important;
}
html body .grid-col.flowerdetails .prodcut-details-box,
html body .grid-col.flowerdetails .prodcut-details-box .entry-content,
html body .grid-col.flowerdetails .prodcut-details-box .entry-content p,
html body .grid-col.flowerdetails .composition {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
top: 50% !important;
}
/* ── HIDE OLD DESKTOP HEADER ON MOBILE ──
The new fixed f4pm-header replaces it; f4pm-header-spacer compensates for offset.
This also fixes the missing hamburger (old header was stacking under/over f4pm-header
and conflicting span CSS was zeroing out .f4pm-bar height). */
html body .header-bg {
display: none !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
background:none !important
}
#curr_form_2 select#ch_curr_2{
background:none !important;
bbackground-color:#fff !important;
}
/* ── FORCE BURGER BUTTON + BARS VISIBLE ──
Global span rules (height:0, background override, line-height:0) can collapse
the thin bars. Use border-top instead of background+height — border is immune
to height:0 overrides. Also reset button default browser border/outline. */
html body .f4pm-header .f4pm-burger {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 5px !important;
padding: 4px !important;
background: none !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
min-width: 30px !important;
min-height: 30px !important;
overflow: visible !important;
visibility: visible !important;
opacity: 1 !important;
flex-shrink: 0 !important;
}
html body .f4pm-header .f4pm-burger > span.f4pm-bar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 22px !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
/* border-top renders even when height:0 — immune to global span height overrides */
border-top: 2px solid #1a1a1a !important;
background: transparent !important;
border-radius: 2px !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
flex-shrink: 0 !important;
box-sizing: content-box !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* Filter sidebar — fixed full-height overlay, above header (99000) when open */
html body #myBox.active,
html body .sidebar-filters.active {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 82vw !important;
max-width: 300px !important;
height: 100dvh !important;
overflow-y: auto !important;
z-index: 999991 !important;
background: #fff !important;
box-shadow: 3px 0 20px rgba(0,0,0,0.22) !important;
padding-top: 30px !important;
overflow-x: visible !important;
}
/* Lift the stacking context that traps #myBox above the fixed header when filter is open.
.f4p-page-main-column has inline z-index:100 creating a stacking context;
this bumps it above the header (99000) so the sidebar's z-index:99999 wins.
Once the JS transplant moves #myBox to , :has() no longer matches and
this rule has no effect — sidebar z-index:99999 on body beats header (99000) directly. */
html body .f4p-page-main-column:has(#myBox.active) {
z-index: 99998 !important;
}
/* Delivery search modal — above F4P top bar (z-index ~99k) and legacy .iphone_hidden */
.modal-backdrop-google {
z-index: 100094 !important;
}
.header .opening .row-dropdown.modal-form,
.header_mobile_search .opening .row-dropdown.modal-form,
.header .opening .row-dropdown-header.modal-form,
.header_mobile_search .opening .row-dropdown-header.modal-form,
.row-dropdown.iphone_hidden.modal-form,
.row-dropdown.ipad_hidden.modal-form,
.row-dropdown-header.iphone_hidden.modal-form,
.row-dropdown-header.ipad_hidden.modal-form,
.row-dropdown-header.modal-form,
.row-dropdown.modal-form,
.popup-content2.f4p-dlv-wrap.modal-form {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 100095 !important;
pointer-events: auto !important;
}
.popup-content2.f4p-dlv-wrap.modal-form {
position: fixed !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: 92vw !important;
max-width: 360px !important;
margin: 0 !important;
padding: 16px !important;
background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 42%), linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
border: 1px solid #d8d0c4 !important;
border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.05), 0 10px 30px rgba(15,23,42,.18) !important;
}
/* Dubai-like mobile popup: use desktop popup shell but hide image */
.row-dropdown-header.modal-form,
.row-dropdown.modal-form {
position: fixed !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: 92vw !important;
max-width: 360px !important;
margin: 0 !important;
padding: 16px !important;
background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 42%), linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
border: 1px solid #d8d0c4 !important;
border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.05), 0 10px 30px rgba(15,23,42,.18) !important;
overflow: visible !important;
}
.row-dropdown-header.modal-form .popup-image,
.row-dropdown.modal-form .popup-image {
display: none !important;
}
.row-dropdown-header.modal-form .popup-body,
.row-dropdown.modal-form .popup-body {
display: block !important;
}
.row-dropdown-header.modal-form .popup-content,
.row-dropdown.modal-form .popup-content {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
body .select2-container--open .select2-dropdown {
z-index: 100096 !important;
}
/* jQuery UI datepicker — must sit above fixed header */
#ui-datepicker-div {
z-index: 1000105 !important;
}
/* When filter sidebar is open, ensure datepicker is above the panel too */
html body #myBox.active #ui-datepicker-div,
html body .sidebar-filters.active #ui-datepicker-div,
html body.f4p-datepicker-open #ui-datepicker-div {
z-index: 1000105 !important;
}
@media only screen and (max-width: 1366px) {
/* Mobile keyboard focus anti-zoom: keep form text at >=16px on iOS/Android. */
html {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html body select,
html body textarea,
.select2-search--dropdown .select2-search__field,
.select2-container .select2-search__field,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
font-size: 16px !important;
line-height: 1.3 !important;
}
/* Responsive hard lock: prevent sideways page movement on tablet/mobile viewports. */
html, body {
overflow-x: hidden !important;
overflow-x: clip !important;
max-width: 100vw !important;
}
html body,
html body .main-content,
html body .main-container3,
html body .wrapper,
html body .container {
overflow-x: hidden !important;
overflow-x: clip !important;
max-width: 100vw !important;
}
html body .gt_float_switcher,
html body .gtranslate_wrapper,
html body .goog-te-gadget,
html body [class*="translate-widget"],
html body [id*="translate_widget"] {
left: auto !important;
right: 8px !important;
max-width: calc(100vw - 16px) !important;
box-sizing: border-box !important;
transform: none !important;
}
/* Prevent horizontal page scroll when datepicker opens */
#ui-datepicker-div {
max-width: calc(100vw - 16px) !important;
width: min(320px, calc(100vw - 16px)) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#ui-datepicker-div table,
#ui-datepicker-div .ui-datepicker-calendar {
width: 100% !important;
table-layout: fixed !important;
}
/* Delivery City (Select2): prevent iOS zoom + horizontal jump */
.popup-content2 .google-dropdown .select2-selection__rendered,
.popup-content2 .google-dropdown .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-search--dropdown .select2-search__field,
.select2-container .select2-search__field {
font-size: 16px !important;
}
.select2-container--open .select2-dropdown {
max-width: calc(100vw - 16px) !important;
width: min(360px, calc(100vw - 16px)) !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Let the dropdown wrapper's JS-set max-height drive scrolling */
.select2-container--open .select2-dropdown .select2-results__options {
max-height: none !important;
}
/* Prevent iOS auto-zoom on date input focus */
#book_form_date2_home,
#book_form_date2,
#book_form_date,
.calendar-bg input[type="text"],
.calender_container input[type="text"] {
font-size: 16px !important;
}
html body.f4p-datepicker-open {
overflow-x: hidden !important;
}
html body.f4p-select-open {
overflow-x: hidden !important;
}
}
html body .popup-content2 .google-dropdown .select2-container .select2-selection--single .select2-selection__rendered{
background: none !important;
}
.menu-hb ul li a{border-bottom:0px !important;
height:auto;
}
.popup-content2 .calendar-bg,
.popup-content2 .calender_container {
border: none !important; box-shadow: none !important; background: transparent !important;
}
#curr_form_2 select#ch_curr_2,
#curr_form_2_home select#ch_curr_2_home {
background: none !important;
background-color:#fff !important;
}
.menu-hb ul li a span{
height:auto !important
}
body {
background: #fff !important;
}
/* Wrapper padding normalization — ensures all cards get same horizontal space */
html body .main-content .wrapper,
html body .wrapper {
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Category hero: edge-to-edge — breakout + don’t clip (see css_responsive §5 .wrapper overflow) */
html body .wrapper:has(.f4p-cat-hero),
html body .main-container3:has(.f4p-cat-hero) {
overflow-x: visible !important;
margin-top: 138px;
}
html body .wrapper:has(.f4p-cat-hero),
html body .main-container3:has(.f4p-cat-hero) {
margin-top: 0px;
}
html body .main-container3 .wrapper .grid-wrap.half-gutter .grid-col > .f4p-cat-hero {
position: relative !important;
left: 50% !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: 0 !important;
border-radius: 0 !important;
}
html body .main-container3 .wrapper .grid-wrap.half-gutter .grid-col > .f4p-cat-hero .f4p-cat-hero-visual {
border-radius: 0 !important;
}
/* Homepage delivery: same rhythm as gift-basket .f4p-cat-hero ~ .popup (css_responsive) — inset card, not edge-to-edge */
html body .wrapper.f4p-home-delivery-wrap,
html body .f4pm-hero ~ .f4p-home-delivery-wrap {
position: relative !important;
z-index: 4 !important;
box-sizing: border-box !important;
overflow: visible !important;
max-width: 28rem !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
background: transparent !important;
}
html body .f4pm-hero ~ .f4p-home-delivery-wrap .grid-wrap,
html body .f4pm-hero ~ .f4p-home-delivery-wrap .grid-wrap.half-gutter,
html body .f4pm-hero ~ .f4p-home-delivery-wrap .grid-col {
overflow: visible !important;
}
html body.f4p-home-delivery-hero-active .header-bg,
html body.f4p-home-delivery-hero-active section[itemprop="organizer"] {
overflow: visible !important;
}
/* Match .f4p-cat-hero ~ .popup-content2.f4p-dlv-wrap overlap + side margins */
html body .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap {
margin: -76px auto 18px !important;
max-width: calc(100% - 24px) !important;
width: 100% !important;
position: relative !important;
z-index: 2 !important;
/* Put card style back to previous beige gradient look */
background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, transparent 42%),
linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
inset 0 -1px 0 rgba(0, 0, 0, .05),
0 8px 28px rgba(15, 23, 42, 0.12) !important;
}
@media (max-width: 400px) {
html body .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap {
margin: -52px auto 16px !important;
max-width: calc(100% - 16px) !important;
}
}
html body .wrapper .container,
html body .container {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
margin-top: 0 !important;
}
/* Mobile header: full fixed bar — guaranteed visible while scrolling */
html body .f4pm-header {
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99000 !important;
overflow: visible !important;
padding-top: 0 !important;
box-sizing: border-box !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html body .f4pm-header .f4pm-hdr-row1 {
min-height: 48px !important;
}
html body .f4pm-header .f4pm-hdr-row2 {
min-height: 56px !important;
}
/* Final mobile lock: hide legacy blue header strip/layers */
html body .header-bg,
html body .header-bg > .header_top,
html body #menu-wrapper,
html body .header.header_mobile_search {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
}
/* Final mobile lock: delivery card overlaps top of banner.
Pull entire wrapper up (instead of just popup) so the overlap is unconditional,
and put it on top of the banner via z-index. */
html body .f4pm-hero {
position: relative !important;
z-index: 1 !important;
margin-top: 0px !important;
}
html body .f4pm-hero ~ .f4p-home-delivery-wrap {
margin-top: -60px !important;
position: relative !important;
z-index: 100 !important;
overflow: visible !important;
}
html body .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap {
margin: 0 auto 18px !important;
position: relative !important;
z-index: 101 !important;
max-width: calc(100% - 24px) !important;
width: 100% !important;
}
@media (max-width: 400px) {
html body .f4pm-hero ~ .f4p-home-delivery-wrap {
margin-top: -45px !important;
}
html body .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap {
margin: 0 auto 16px !important;
max-width: calc(100% - 16px) !important;
}
}
html body .grid-col {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
float: none !important;
box-sizing: border-box !important;
}
/* ── Unified card style ── all content cards same size, spacing, shadow */
html body .grid-col .featured-areas-card,
html body .grid-col section.f4p-our-services,
html body .grid-col p.featbox,
html body .grid-col div.featbox {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 12px !important;
padding: 16px !important;
box-sizing: border-box !important;
background: #fff !important;
border: none !important;
border-radius: 12px !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
float: none !important;
display: block !important;
}
/* Centered column (max-w-md) — no drop shadow on edges */
.main-container3,
.f4p-page-main-column {
max-width: 28rem !important;
margin-left: auto !important;
margin-right: auto !important;
background: #fff !important;
box-shadow: none !important;
}
.main-container3,
.f4p-page-main-column,
.main-content .wrapper,
.wrapper,
.wrapper .container,
.wrapper .container .grid-wrap {
background: #fff !important;
}
.wrapper .container,
.wrapper .container .grid-wrap {
background:transparent !important;
}
/* Beat css_responsive beige gradient on main column */
html body .main-content .wrapper {
background: #ffffff !important;
background-image: none !important;
}
/* Featured delivery / provinces */
/* Match city list: Inter sans-serif */
html body .featured-areas-card h3.featured,
html body .featured-areas-card .featured {
color: #111827 !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 1rem !important;
font-weight: 600 !important;
text-align: center !important;
line-height: 1.35 !important;
}
html body .featured-areas-card h4.a-center {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-weight: 500 !important;
color: #374151 !important;
}
html body .hentry.delivery h3.featured {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #111827 !important;
text-align: center !important;
line-height: 1.35 !important;
}
/* Province / city lists: equal 50% columns, consistent gaps, aligned rows */
html body .featured-areas-card ul.foldershops.f4p-location-grid,
html body .featured-areas-card ul.foldershops {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 12px 16px !important;
align-items: start !important;
width: 100% !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
html body .featured-areas-card ul.foldershops li {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1.35 !important;
box-sizing: border-box !important;
}
html body .featured-areas-card ul.foldershops li a {
display: block !important;
flex: 1 !important;
min-width: 0 !important;
word-break: break-word !important;
}
html body .featured-areas-card ul.foldershops li a,
html body .featured-areas-card ul.foldershops li a strong,
html body .featured-areas-card ul.foldershops li strong {
color: #111827 !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-weight: 500 !important;
}
html body .featured-areas-card ul.foldershops li img {
display: none !important;
}
html body .featured-areas-card ul.foldershops li::before {
content: '' !important;
display: block !important;
flex-shrink: 0 !important;
width: 14px !important;
height: 14px !important;
margin: 2px 0 0 0 !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-4.5 7-11a7 7 0 1 0-14 0c0 6.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
html body .featured-areas-card ul.foldershops li:hover {
background: rgba(0, 0, 0, 0.03) !important;
}
html body .featured-areas-card .showall-wrap a {
background: #fff !important;
color: #111827 !important;
border: 1px solid #e5e7eb !important;
border-radius: 999px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html body .featured-areas-card .showall-wrap a:hover {
background: #f9fafb !important;
border-color: #d1d5db !important;
}
/* featbox text/color overrides */
html body .main-container3 div.featbox h2 {
color: #111827 !important;
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
html body .main-container3 div.featbox strong {
color: #111827 !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
html body .main-container3 div.featbox p {
color: #4b5563 !important;
line-height: 1.65 !important;
}
/* Same full width + margins for all stacked “cards” in the column */
html body .main-container3 .grid-col > .f4p-our-services,
html body .main-container3 .grid-col > .featured-areas-card,
html body .main-container3 .grid-col > .hentry.delivery,
html body .main-container3 .grid-col > p.featbox,
html body .main-container3 .grid-col > div.featbox {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Featured card lives inside .hentry.delivery (index_intro) — not a direct .grid-col child.
css_styles.tpl @770px adds .hentry { padding: 0 10px; width: auto } which misaligns vs .f4p-our-services */
html body .main-container3 .grid-col .hentry.delivery {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 0 12px !important;
box-sizing: border-box !important;
}
html body .main-container3 .grid-col .hentry.delivery .featured-areas-card {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
/* Index hero fallback (no login banner) — same peach strip as .f4pm-hero */
.f4p-index-hero-fallback {
background: #f3e4d6 !important;
background-image: none !important;
padding: 36px 20px 40px !important;
text-align: center !important;
}
.f4p-index-hero-fallback__title {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
font-size: 26px !important;
font-weight: 700 !important;
color: #2d2d2d !important;
line-height: 1.2 !important;
}
.f4p-index-hero-fallback__title span {
color: #3d8fd4 !important;
font-weight: 700 !important;
}
.f4p-index-hero-fallback__sub {
font-size: 15px !important;
color: #4a4a4a !important;
margin: 0 0 20px !important;
line-height: 1.45 !important;
}
.f4p-index-hero-fallback__btn {
display: inline-block !important;
background: #d9a574 !important;
color: #1f1f1f !important;
border: none !important;
border-radius: 999px !important;
padding: 13px 36px !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
box-shadow: 0 2px 8px rgba(180, 130, 80, .22) !important;
}
/* Login strip: no heavy white column on mobile */
.login-block .login-sec {
padding: 0 0 0px !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Intro — compact SEO block */
.customer_txt {
padding: 0 !important;
margin: 0 !important;
}
.customer_txt .bg.panel-text-wrapper.f4p-intro-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
background: #fff !important;
border-radius: 0 !important;
padding: 10px 16px 8px !important;
box-shadow: none !important;
border: none !important;
border-top: none !important;
outline: none !important;
position: relative !important;
max-width: 100% !important;
margin: 0 !important;
}
/* Kill any top border the site CSS puts on .bg or wrapper */
.customer_txt .bg,
.customer_txt .panel-text-wrapper {
border-top: none !important;
border: none !important;
box-shadow: none !important;
}
/* Collapsed: hide SEO body until "Read more" (text sits directly under the link) */
.customer_txt .panel-text-wrapper.f4p-intro-card:not(.expanded) .panel-text {
display: none !important;
}
.customer_txt .panel-text-wrapper.f4p-intro-card:not(.expanded) > .fade.f4p-intro-fade {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.customer_txt .panel-text-wrapper.f4p-intro-card.expanded .panel-text {
display: block !important;
overflow: visible !important;
animation: f4p-intro-text-fade-in 0.5s ease-out;
}
@keyframes f4p-intro-text-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.customer_txt .panel-text-wrapper.f4p-intro-card.expanded > .fade.f4p-intro-fade {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Kill global absolute positioning on read buttons (css_head breaks taps + order) */
.customer_txt .panel-text-wrapper .btn-read-more,
.customer_txt .panel-text-wrapper .hide-more {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
float: none !important;
}
.customer_txt .panel-text-wrapper:not(.expanded) .hide-more {
display: none !important;
}
.customer_txt .panel-text-wrapper.expanded .show-more {
display: none !important;
}
.customer_txt .panel-text-wrapper.expanded .hide-more {
display: inline-flex !important;
}
/* SEO text block — compact, h2 center, body left */
.customer_txt {
padding: 0 !important;
}
h2.entry-title, h2.a-center.entry-title {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
color: #333 !important;
text-align: center !important;
line-height: 1.3 !important;
padding: 0 !important;
margin: 0 0 6px 0 !important;
}
.customer_txt .f4p-intro-heading-row h2.entry-title {
text-align: center !important;
margin: 0 !important;
}
h2.entry-title span, h2.a-center.entry-title span {
color: #111827 !important;
font-weight: 600 !important;
}
h2.banner-h2 {
display: none !important;
}
.panel-text {
font-size: 14px !important;
color: #374151 !important;
line-height: 1.55 !important;
text-align: left !important;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}
.panel-text p, .panel-text div {
font-size: 14px !important;
color: #374151 !important;
text-align: left !important;
margin: 0 0 0.5rem !important;
}
.panel-text strong, .panel-text b { color: #333 !important; font-weight: 600 !important; }
/* Read more / less — subtle text-style link with chevron */
html body .customer_txt .f4p-intro-heading-row h2 a.btn-read-more,
html body .customer_txt .f4p-intro-heading-row h2 a.hide-more,
html body .customer_txt .f4p-intro-readmore-row a.btn-read-more,
html body .customer_txt .f4p-intro-readmore-row a.hide-more {
margin: 0 !important;
}
.customer_txt a.btn-read-more,
.customer_txt a.hide-more {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
white-space: nowrap !important;
margin: 6px 0 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #3596b5 !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: 0 !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
z-index: 2 !important;
cursor: pointer !important;
}
.customer_txt a.btn-read-more::after { content: ' ↓' !important; font-size: 11px !important; }
.customer_txt a.hide-more::after { content: ' ↑' !important; font-size: 11px !important; }
.customer_txt a.btn-read-more:hover,
.customer_txt a.hide-more:hover {
color: #3596b5 !important;
text-decoration: underline !important;
}
.arrow-down { border-top-color: #374151 !important; display:none !important }
.arrow-up { border-bottom-color: #374151 !important;display:none !important }
.btn-read-more .arrow-up {
border-color: #374151 !important;
border-width: 2px 0 0 2px !important;
}
/* ══════════════════════════════════════
DELIVERY SECTION — full reset
══════════════════════════════════════ */
/* Hide both heading variants on mobile — inner card h2 serves as mobile title */
h2.index-mh-delivery,
h2.desktop_hidden.index-mh-delivery,
h3.index-mh-delivery { display: none !important; }
/* ══ DELIVERY CARD ══ (restored beige gradient — was OK before) */
.wrapper .popup-content2.f4p-dlv-wrap,
.popup-content2.f4p-dlv-wrap {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
border-radius: 12px !important;
border: none !important;
outline: none !important;
margin: 4px 0 16px !important;
padding: 16px !important;
box-sizing: border-box !important;
width: auto !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, transparent 42%), linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(0, 0, 0, .05) !important;
}
/* Homepage: hide main-column duplicate on mobile (must beat display:grid above — same element has both classes) */
html body .popup-content2.f4p-dlv-wrap.f4p-home-delivery-desktop-only {
display: none !important;
}
/* Category page: pull delivery card up onto hero (beats margin rule above) */
html body .f4p-cat-hero ~ .popup-content2.f4p-dlv-wrap {
margin: -76px auto 18px !important;
max-width: calc(100% - 24px) !important;
}
@media (max-width: 400px) {
html body .f4p-cat-hero ~ .popup-content2.f4p-dlv-wrap {
margin: -68px auto 16px !important;
max-width: calc(100% - 16px) !important;
}
}
/* Title full width */
.popup-content2.f4p-dlv-wrap .f4p-delivery-inner-title {
grid-column: 1 / -1 !important;
display: block !important;
width: 100% !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #374151 !important;
text-align: center !important;
}
.popup-content2.f4p-dlv-wrap .f-text { display: none !important; grid-column: 1 / -1 !important; }
/* City full width */
.popup-content2 .google-dropdown:not(.date_width):not(.button_width) {
grid-column: 1 / -1 !important; width: 100% !important;
margin: 0 !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; position: relative !important;
}
/* Date col1, Currency col2 */
.popup-content2 .google-dropdown.date_width {
grid-column: 1 !important; margin: 0 !important; padding: 0 !important;
float: none !important; box-sizing: border-box !important;
}
.popup-content2 .popup-currency {
grid-column: 2 !important; margin: 0 !important; padding: 0 !important;
float: none !important; box-sizing: border-box !important; position: static !important;
}
/* Always visible — CSS !important beats jQuery .hide() inline style (no !important) */
.popup-content2 .popup-currency {
display: block !important;
}
.popup-content2 .popup-currency form {
display: block !important; position: relative !important; width: 100% !important;
}
/* Search button full width */
.popup-content2 .google-dropdown.button_width {
grid-column: 1 / -1 !important; width: 100% !important; margin: 0 !important;
}
/* ══ SHARED FIELD LOOK — white box, 46px tall, left icon padding ══ */
/* Mixin values used everywhere below:
height:46px border:1.5px solid #d1d5db border-radius:8px
bg:#fff color:#374151 font:14px Inter padding-left:38px */
/* select2 city — fix its inline width:358px and style its spans */
.popup-content2 .google-dropdown .select2-container,
.popup-content2 .google-dropdown .select2-container--default {
width: 100% !important; max-width: 100% !important; min-width: 0 !important;
display: block !important;
}
.popup-content2 .google-dropdown .select2-selection--single,
.popup-content2 .google-dropdown .select2-selection {
display: flex !important; align-items: center !important;
width: 100% !important; height: 46px !important;
border: 1.5px solid #d1d5db !important; border-radius: 8px !important;
background: #ffffff !important; background-image: none !important;
box-shadow: none !important; outline: none !important; box-sizing: border-box !important;
}
.popup-content2 .google-dropdown .select2-selection__rendered {
display: block !important; width: 100% !important;
color: #374151 !important; font-size: 14px !important; font-weight: 400 !important;
font-family: 'Inter', system-ui, sans-serif !important;
line-height: 44px !important; height: 44px !important;
padding: 0 10px 0 38px !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
background: transparent !important;
}
.popup-content2 .google-dropdown .select2-selection__placeholder {
color: #374151 !important;
font-size: 14px !important;
font-weight: 400 !important;
font-family: 'Inter', system-ui, sans-serif !important;
opacity: 1 !important;
}
/* Select2 chevron — vertically centered (default theme sits too low) */
.popup-content2 .google-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
min-height: 46px !important;
top: 0 !important;
right: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.popup-content2 .google-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #374151 transparent transparent transparent !important;
border-width: 5px 4px 0 4px !important;
margin: 0 !important;
top: auto !important;
left: auto !important;
position: relative !important;
}
/* calendar input */
.popup-content2 .calendar-bg,
.popup-content2 .calender_container {
display: block !important; width: 100% !important; position: relative !important;
margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important;
background: transparent !important; box-shadow: none !important;
-webkit-appearance: none !important; appearance: none !important;
}
/* Date: icon on input bg (pseudo on wrapper sits under opaque input — was invisible) */
.popup-content2 .calendar-bg input[type="text"],
.popup-content2 .calendar-bg input,
.popup-content2 .calender_container input[type="text"],
.popup-content2 .calender_container input,
.popup-content2 #book_form_date2 {
display: block !important; width: 100% !important;
height: 46px !important; line-height: normal !important;
border: 1.5px solid #d1d5db !important; border-radius: 8px !important;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 11px center !important;
background-size: 16px 16px !important;
color: #374151 !important; font-size: 14px !important; font-weight: 400 !important;
font-family: 'Inter', system-ui, sans-serif !important;
padding: 0 10px 0 38px !important; box-sizing: border-box !important;
box-shadow: none !important; outline: none !important; margin: 0 !important;
}
.popup-content2 .calendar-bg input::placeholder,
.popup-content2 .calender_container input::placeholder {
color: #374151 !important;
font-size: 14px !important;
font-weight: 400 !important;
font-family: 'Inter', system-ui, sans-serif !important;
opacity: 1 !important;
}
/* currency select — maximum specificity to beat inline style */
html body .popup-content2 .popup-currency select.sort-dropdown,
html body .popup-content2 #ch_curr_2,
html body .popup-content2 .popup-currency select,
html body .popup-content2 select.f4p-delivery-currency {
display: block !important; width: 100% !important;
height: 46px !important; line-height: 1.25 !important;
border: 1.5px solid #d1d5db !important; border-radius: 8px !important;
background: #ffffff !important; background-image: none !important; background-color: #ffffff !important;
color: #374151 !important; font-size: 14px !important; font-weight: 400 !important;
font-family: 'Inter', system-ui, sans-serif !important;
padding: 0 28px 0 38px !important; box-sizing: border-box !important;
box-shadow: none !important; outline: none !important;
-webkit-appearance: none !important; appearance: none !important; margin: 0 !important;
}
html body .popup-content2 .popup-currency select option {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #374151 !important;
}
/* ══ SVG ICONS via ::before ══ */
/* pin — city */
.popup-content2 .google-dropdown:not(.date_width):not(.button_width)::before {
content: '' !important; position: absolute !important; left: 11px !important; top: 50% !important;
transform: translateY(-50%) !important; width: 18px !important; height: 18px !important;
z-index: 10 !important; pointer-events: none !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") no-repeat center !important;
background-size: contain !important;
}
/* calendar icon: drawn on input background (see rules above) — no ::before here */
.popup-content2 .google-dropdown.date_width .calendar-bg::before,
.popup-content2 .google-dropdown.date_width .calender_container::before {
content: none !important; display: none !important;
}
/* dollar — currency */
.popup-content2 .popup-currency form::before {
content: '' !important; position: absolute !important; left: 11px !important; top: 50% !important;
transform: translateY(-50%) !important; width: 16px !important; height: 16px !important;
z-index: 10 !important; pointer-events: none !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M14.5 9a3 2.5 0 0 0-5 0c0 1.5 1 2 2.5 2.5S15 13 15 14.5a3 2.5 0 0 1-6 0'/%3E%3Cline x1='12' y1='6' x2='12' y2='8'/%3E%3Cline x1='12' y1='16' x2='12' y2='18'/%3E%3C/svg%3E") no-repeat center !important;
background-size: contain !important;
}
/* ── Search button ── */
.popup-content2 .md_button.green {
display: block !important; width: 100% !important;
padding: 13px !important; border-radius: 50px !important;
background: #3596b5 !important; color: #fff !important;
font-size: 15px !important; font-weight: 700 !important;
text-align: center !important; cursor: pointer !important;
box-sizing: border-box !important; letter-spacing: 0.04em !important;
border: none !important; box-shadow: 0 2px 8px rgba(45,122,95,.25) !important;
margin: 0 !important; font-family: 'Inter', system-ui, sans-serif !important;
}
.modal-form span.md_button.green {
color: #fff !important;
font-size: 15px !important; font-weight: 700 !important;
margin-top:5px !important;
}
/* ══════════════════════════════════════
MODAL DELIVERY POPUP — field styling
══════════════════════════════════════ */
/* Close (×) button — top-right of popup card */
html body .row-dropdown.modal-form .close-popup {
display: block !important;
position: absolute !important;
top: 10px !important;
right: 10px !important;
width: 28px !important;
height: 28px !important;
line-height: 28px !important;
text-align: center !important;
font-size: 22px !important;
color: #888 !important;
cursor: pointer !important;
z-index: 20 !important;
background: none !important;
border: none !important;
padding: 0 !important;
font-weight: 300 !important;
}
/* Reserve space for close icon so title never overlaps it */
html body .row-dropdown.modal-form .popup-content .featured,
html body .row-dropdown-header.modal-form .popup-content .featured {
padding-right: 36px !important;
box-sizing: border-box !important;
}
/* Delivery City dropdown — pin icon restored */
.row-dropdown.modal-form .popup-content .google-dropdown:not(.date_width):not(.button_width) {
position: relative !important;
}
.row-dropdown.modal-form .popup-content .google-dropdown:not(.date_width):not(.button_width)::before {
content: '' !important; position: absolute !important; left: 11px !important; top: 50% !important;
transform: translateY(-50%) !important; width: 18px !important; height: 18px !important;
z-index: 10 !important; pointer-events: none !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") no-repeat center !important;
background-size: contain !important;
display: block !important;
}
.row-dropdown.modal-form .popup-content .select2-container--default .select2-selection--single {
display: flex !important;
align-items: center !important;
}
.row-dropdown.modal-form .popup-content .select2-container .select2-selection--single .select2-selection__rendered {
line-height: normal !important;
padding-left: 36px !important;
font-size: 14px !important;
font-family: 'Inter', system-ui, sans-serif !important;
color: #374151 !important;
flex: 1 !important;
}
.row-dropdown.modal-form .popup-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #374151 !important;
font-size: 14px !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
.row-dropdown.modal-form .popup-content .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
top: 0 !important;
right: 10px !important;
display: flex !important;
align-items: center !important;
}
/* Date input — calendar SVG on left, Inter font, white bg */
.row-dropdown.modal-form .popup-content #book_form_date {
background-color: #ffffff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 10px center !important;
background-size: 15px 15px !important;
color: #374151 !important;
font-size: 14px !important;
font-family: 'Inter', system-ui, sans-serif !important;
padding: 0 8px 0 34px !important;
}
.row-dropdown.modal-form .popup-content #book_form_date::placeholder {
color: #374151 !important;
font-size: 14px !important;
font-family: 'Inter', system-ui, sans-serif !important;
opacity: 1 !important;
}
/* Currency — dollar icon restored, white bg via JS strip + CSS */
.row-dropdown.modal-form .popup-currency form {
position: relative !important;
display: flex !important;
width: 100% !important;
}
.row-dropdown.modal-form .popup-currency form::before {
content: '' !important; position: absolute !important; left: 11px !important; top: 50% !important;
transform: translateY(-50%) !important; width: 16px !important; height: 16px !important;
z-index: 10 !important; pointer-events: none !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M14.5 9a3 2.5 0 0 0-5 0c0 1.5 1 2 2.5 2.5S15 13 15 14.5a3 2.5 0 0 1-6 0'/%3E%3Cline x1='12' y1='6' x2='12' y2='8'/%3E%3Cline x1='12' y1='16' x2='12' y2='18'/%3E%3C/svg%3E") no-repeat center !important;
background-size: contain !important;
display: block !important;
}
/* White bg takes effect after JS strips inline background !important */
.row-dropdown.modal-form .popup-currency #ch_curr_2 {
background-color: #fff !important;
background-image: none !important;
color: #374151 !important;
font-size: 14px !important;
font-family: 'Inter', system-ui, sans-serif !important;
padding-left: 36px !important;
padding-right: 8px !important;
-webkit-appearance: none !important;
appearance: none !important;
}
/* ══════════════════════════════════════
CATEGORY SECTION
══════════════════════════════════════ */
/* "Choose Your Category" heading */
h2.flower-categories-heading {
display: block !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 0.95rem !important; font-weight: 700 !important; color: #1e293b !important;
text-align: center !important; line-height: 1.3 !important;
margin: 0 !important;
padding: 10px 16px 6px !important;
background: none !important; border: none !important; border-radius: 0 !important;
}
}
/* iPad modal width parity (Mini/Air/Pro): keep popup centered at ~70% viewport width */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
.popup-content2.f4p-dlv-wrap.modal-form,
.row-dropdown-header.modal-form,
.row-dropdown.modal-form {
width: 70vw !important;
max-width: 70vw !important;
min-width: 0 !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* iPad Mini + Air popup: Search button text must stay white */
.popup-content2.f4p-dlv-wrap.modal-form .google-dropdown.button_width .md_button.green,
.popup-content2.f4p-dlv-wrap.modal-form .google-dropdown.button_width .md_button.green a,
.popup-content2.f4p-dlv-wrap.modal-form .google-dropdown.button_width .md_button.green span,
.row-dropdown.modal-form .google-dropdown.button_width .md_button.green,
.row-dropdown.modal-form .google-dropdown.button_width .md_button.green a,
.row-dropdown.modal-form .google-dropdown.button_width .md_button.green span,
.row-dropdown-header.modal-form .google-dropdown.button_width .md_button.green,
.row-dropdown-header.modal-form .google-dropdown.button_width .md_button.green a,
.row-dropdown-header.modal-form .google-dropdown.button_width .md_button.green span {
color: #ffffff !important;
text-shadow: none !important;
}
}
/* iPad: always keep calendar centered (prevents footer anchoring) */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
#ui-datepicker-div {
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
z-index: 100097 !important;
}
}
/* Category strip + product grid — Stitch code.html */
@media (max-width: 991px) {
html body .main-content .wrapper {
background: #ffffff !important;
background-image: none !important;
}
/* Our Services */
html body .f4p-our-services {
text-align: center !important;
}
html body .f4p-our-services .f4p-our-services__title {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #111827 !important;
text-align: center !important;
margin: 0 0 18px !important;
padding: 0 !important;
line-height: 1.35 !important;
}
.f4p-our-services__grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
align-items: start !important;
}
.f4p-our-services__item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
min-width: 0 !important;
}
.f4p-our-services__icon {
color: #3596b5 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
flex-shrink: 0 !important;
}
.f4p-our-services__icon svg {
width: 40px !important;
height: 40px !important;
stroke: currentColor !important;
fill: none !important;
}
.f4p-our-services__label {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
color: #111827 !important;
line-height: 1.3 !important;
text-align: center !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 2px !important;
box-sizing: border-box !important;
}
/* heading kept visible — styled above in f4p mobile block */
.flower-category-pills.f4p-mobile-only.f4p-cat-strip {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
padding: 6px 14px 10px 0 !important;
margin: 0 0 0px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
}
.flower-category-pills.f4p-mobile-only.f4p-cat-strip::-webkit-scrollbar { display: none; }
.flower-category-pills.f4p-mobile-only.f4p-cat-strip .flower-pill {
display: inline-flex !important; align-items: center !important;
font-size: 0.9rem !important; font-weight: 500 !important;
font-family: 'Inter', system-ui, sans-serif !important;
padding: 6px 14px !important;
border-radius: 999px !important;
white-space: nowrap !important; flex-shrink: 0 !important;
border: 1.5px solid #d1d5db !important;
color: #374151 !important;
background: #fff !important;
text-decoration: none !important;
line-height: 1 !important;
transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.flower-category-pills.f4p-mobile-only.f4p-cat-strip .flower-pill--active {
background: #3596b5 !important;
color: #fff !important;
border-color: #3596b5 !important;
font-weight: 600 !important;
}
/* ── DELIVERY DATE TABS — force single row on mobile, always visible ── */
.filter-header-container,
.filter-header-container.collapsed,
.filter-header-container.active {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 8px !important;
width: calc(100% - 28px) !important;
/* Slight air above Today / Tomorrow / calendar vs category pills */
margin: 6px 14px 0 !important;
padding: 0 0 12px 0 !important;
background: none !important;
position: relative !important;
border-radius: 0 !important;
/* override collapse animation — always visible on mobile */
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
transition: none !important;
}
/* Mobile floating filter toggle (calendar button) */
.filter-toggle {
position: fixed !important;
right: 14px !important;
bottom: 88px !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #3596b5 !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22) !important;
z-index: 100098 !important;
cursor: pointer !important;
opacity: 1 !important;
visibility: visible !important;
}
.filter-toggle.visible {
display: inline-flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.filter-toggle .calendar-icon {
width: 20px !important;
height: 20px !important;
display: block !important;
background: url("https://flower-connection.b-cdn.net/v4/_css/images/calendar-icon-v4-black.png?23") no-repeat center center !important;
background-size: 18px 18px !important;
filter: brightness(0) invert(1) !important;
}
.filter-heading.secondary {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 10px 6px !important;
border-radius: 12px !important;
border: 1.5px solid #d1d5db !important;
background: #fff !important;
color: #1e293b !important;
font-size: 13px !important;
font-weight: 600 !important;
font-family: 'Inter', system-ui, sans-serif !important;
line-height: 1.3 !important;
cursor: pointer !important;
text-decoration: none !important;
min-height: 62px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
transition: background 0.15s, border-color 0.15s !important;
}
.filter-heading.secondary span {
font-size: 11px !important;
font-weight: 400 !important;
color: #6b7280 !important;
margin-top: 3px !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
.filter-heading.secondary.active,
.filter-heading.secondary:hover {
background: #3596b5 !important;
border-color: #3596b5 !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(53,150,181,0.2) !important;
}
.filter-heading.secondary.active span,
.filter-heading.secondary:hover span {
color: rgba(255,255,255,0.8) !important;
}
/* Calendar "Pick a Delivery Date" — SVG icon via ::before */
.filter-heading.secondary.calendar {
background: #fff !important;
background-image: none !important;
position: relative !important;
}
.filter-heading.secondary.calendar::before {
content: '' !important;
display: block !important;
width: 20px !important; height: 20px !important;
margin-bottom: 4px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center !important;
background-size: contain !important;
flex-shrink: 0 !important;
}
.filter-heading.secondary.calendar.active,
.filter-heading.secondary.calendar:hover {
background: #3596b5 !important;
background-image: none !important;
}
.filter-heading.secondary.calendar.active::before,
.filter-heading.secondary.calendar:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}
/* Product grid — 2 cols gap-4, cards like Stitch */
/* Load more — breathing room vs grid + sections below */
html body .f4p-load-more-wrap {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 16px 0 24px !important;
box-sizing: border-box !important;
}
html body #loadMoreBtn.md_button.green,
html body button#loadMoreBtn {
margin: 0 !important;
background: #3596b5 !important;
background-color: #3596b5 !important;
border: 1.5px solid #3596b5 !important;
color: #fff !important;
border-radius: 9999px !important;
padding: 11px 36px !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
box-shadow: none !important;
cursor: pointer !important;
}
html body #loadMoreBtn.md_button.green:hover,
html body button#loadMoreBtn:hover {
background: #2a7fa3 !important;
background-color: #2a7fa3 !important;
border-color: #2a7fa3 !important;
}
ul.products#product-list,
ul.products {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
align-items: stretch !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 0 4px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
list-style: none !important;
clear: both !important;
background: transparent !important;
}
/* Use #product-list ID for higher specificity — beats site's html body ul.products li rule */
html body #product-list li,
html body ul.products#product-list li {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-self: stretch !important;
height: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body #product-list li:nth-child(n) {
margin: 0 !important;
padding: 0 !important;
}
/* Single border + soft shadow (replaces css_responsive §9 so no double ring) */
html body .main-container3 #product-list li div.ext,
html body .f4p-page-main-column #product-list li div.ext,
html body .main-container3 ul.products#product-list li div.ext,
html body .f4p-page-main-column ul.products#product-list li div.ext,
html body .main-container3 ul.products li div.ext,
html body .f4p-page-main-column ul.products li div.ext,
html body .main-container3 ul.products#product-list li div.ext-basket,
html body .f4p-page-main-column ul.products#product-list li div.ext-basket,
html body .main-container3 ul.products li div.ext-basket,
html body .f4p-page-main-column ul.products li div.ext-basket,
html body #product-list li div.ext,
html body ul.products#product-list li div.ext,
html body ul.products li div.ext,
html body ul.products#product-list li div.ext-basket,
html body ul.products li div.ext-basket {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 12px !important;
border: 1px solid #e8eaed !important;
outline: none !important;
background: #fff !important;
background-clip: padding-box !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 4px 18px rgba(0, 0, 0, 0.08) !important;
overflow: hidden !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
flex: 1 1 auto !important;
height: 100% !important;
min-height: 0 !important;
}
html body .main-container3 #product-list li div.ext:hover,
html body .f4p-page-main-column #product-list li div.ext:hover,
html body .main-container3 ul.products li div.ext:hover,
html body .f4p-page-main-column ul.products li div.ext:hover,
html body .main-container3 ul.products li div.ext-basket:hover,
html body .f4p-page-main-column ul.products li div.ext-basket:hover,
html body #product-list li div.ext:hover,
html body ul.products#product-list li div.ext:hover,
html body ul.products li div.ext:hover,
html body ul.products li div.ext-basket:hover {
border-color: #dde1e6 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 6px 22px rgba(0, 0, 0, 0.1) !important;
}
html body #product-list .prod_det,
html body ul.products .prod_det {
padding: 0 10px 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
margin-bottom: 0 !important;
height: auto !important; /* kill base CSS fixed height (35–40px) */
min-height: 0 !important;
flex: 0 0 auto !important; /* do not grow — price section sits tight below */
display: flex !important;
flex-direction: column !important;
}
html body ul.products li div.ext .prod_img,
html body ul.products li div.ext-basket .prod_img {
border-radius: 0 !important;
overflow: hidden !important;
background: transparent !important;
aspect-ratio: 1 / 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
min-height: 0 !important;
padding: 0 !important;
gap: 0 !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
html body ul.products li div.ext .prod_img a,
html body ul.products li div.ext-basket .prod_img a {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100% !important;
margin: 0 !important;
gap: 0 !important;
line-height: 0 !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html body ul.products li div.ext .prod_img picture,
html body ul.products li div.ext-basket .prod_img picture {
display: flex !important;
flex: 1 1 auto !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
gap: 0 !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
html body ul.products li div.ext .prod_img img,
html body ul.products li div.ext-basket .prod_img img,
html body ul.products li div.ext .prod_img picture img,
html body ul.products li div.ext-basket .prod_img picture img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
position: relative !important;
left: auto !important;
transform: none !important;
flex-shrink: 1 !important;
}
/* Card body + listing text: Inter (same as before reference pass) */
ul.products li div.ext .prod_det h4,
ul.products li div.ext .prod_det h4 a,
ul.products li div.ext .prod_det h5,
ul.products li div.ext .prod_det > span {
font-family: 'Inter', system-ui, sans-serif !important;
}
ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2 {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
color: #1f2937 !important;
text-align: center !important;
}
ul.products li div.ext .prod_det h4,
ul.products li div.ext .prod_det h4 a {
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
margin-bottom: 2px !important;
padding-top: 0px !important;
}
ul.products li div.ext .prod_det > span:not(.avail_color) {
font-size: 11px !important;
font-weight: 500 !important;
color: #888888 !important;
margin: 0 auto !important;
margin-bottom: 0 !important;
line-height: 1.25 !important;
display: none !important;
}
ul.products li div.ext .prod_det h5:not(.f4p-delivery-subtitle) {
margin-bottom: 0 !important;
}
/* Tight price column: tiny gap before BUY NOW */
ul.products li div.ext .prod_price {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
flex: 1 1 auto !important; /* grow to fill remaining card height */
justify-content: flex-end !important; /* push price+button to bottom */
gap: 2px !important;
margin-top: 0px !important;
margin-bottom: 0 !important;
padding: 0 10px 6px !important;
padding-top: 0 !important;
}
ul.products li div.ext .prod_price > span {
padding: 0 0 4px !important;
margin-top: 0 !important;
}
/* Hide
inside price span — it creates unwanted vertical gap on mobile */
ul.products li div.ext .prod_price span br {
display: none !important;
height: 0 !important;
line-height: 0 !important;
}
html body #product-list li div.ext .prod_btn,
ul.products li div.ext .prod_btn {
width: 100% !important;
max-width: none !important;
margin-top: 4px !important;
padding: 0 6px 5px !important;
box-sizing: border-box !important;
}
/* Card BUY NOW — pill + solid teal + soft shadow (matches css_responsive §5) */
html body ul.products li div.ext .prod_btn .md_button.green,
html body ul.products li .prod_btn .md_button.green {
width: 100% !important;
min-height: 48px !important;
padding: 0 22px !important;
border-radius: 9999px !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border: none !important;
color: #fff !important;
background: #3596b5 !important;
background-color: #3596b5 !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
html body ul.products li div.ext .prod_btn .md_button.green:hover,
html body ul.products li .prod_btn .md_button.green:hover {
background: #2a7fa3 !important;
background-color: #2a7fa3 !important;
box-shadow:
0 6px 20px rgba(53, 150, 181, 0.48),
0 3px 8px rgba(15, 23, 42, 0.12) !important;
transform: translateY(-1px) !important;
}
html body ul.products li div.ext .prod_btn .md_button.green a,
html body ul.products li .prod_btn .md_button.green a {
color: #1f1b2d !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 48px !important;
line-height: 1.15 !important;
padding: 0 !important;
}
}
/* Desktop header logo (900–1170px): keep title flush against the floated icon — overrides centered alignment from css_head.css */
@media screen and (min-width: 1367px) and (max-width: 1500px) {
html body .logo h1 { text-align: left !important; }
}
/* iPad-Mini-landscape (900–1170px LTR): match desktop layout — logo LEFT, delivery MIDDLE, cart RIGHT.
Uses CSS Grid (more deterministic than flex here — each child is pinned to its column regardless
of order, position:absolute, or the universal inline-block rule from css_head.css line 35-39). */
@media screen and (min-width: 1367px) and (max-width: 1500px) {
html body div.header.header_mobile_search > div.logo {
display: flex !important;
grid-template-columns: minmax(200px, 1fr) minmax(500px, 560px) auto !important;
grid-template-rows: auto !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
margin: 0 !important;
position: relative !important;
gap: 0 12px !important;
text-align: left !important;
}
/* H1: COLUMN 1 (LEFT). HTML structure (no changes):
Strategy: flower icon stays floated-left INSIDE ; title text + (block) both wrap to the
right of the float so they share the same left edge. The "by Internet Florist" image clears the
float and uses margin-left to land in the same text column. */
html body div.header.header_mobile_search > div.logo > h1 {
display: block !important;
grid-column: 1 / 2 !important;
grid-row: 1 !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 1.25 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
position: static !important;
}
/* The wraps icon + title + small. Establish a Block Formatting Context (overflow:hidden) so the
floated icon is contained inside and doesn't escape to bleed under "by Internet Florist". */
html body div.header.header_mobile_search > div.logo > h1 > a {
display: block !important;
overflow: hidden !important;
text-align: left !important;
line-height: 1.25 !important;
color: inherit !important;
text-decoration: none !important;
}
/* Flower icon — float left inside ; override the inline style="float:left; padding-right:10px" */
html body div.header.header_mobile_search > div.logo > h1 > a > img.iphone_hidden.ipad_hidden {
float: left !important;
display: block !important;
width: 32px !important;
height: 40px !important;
margin: 2px 8px 0 0 !important;
padding: 0 !important;
}
/* Title text — line 1, flows to the right of the float */
html body div.header.header_mobile_search > div.logo > h1 > a > span {
display: inline !important;
font-weight: 600 !important;
}
/* — line 2, dropped BELOW the floated icon (clear:both) and aligned to the very left edge. */
html body div.header.header_mobile_search > div.logo > h1 > a > small {
display: block !important;
clear: both !important;
margin: 4px 0 0 0 !important;
padding: 0 !important;
font-size: 11px !important;
line-height: 1.3 !important;
color: #888 !important;
font-weight: normal !important;
font-style: italic !important;
text-align: left !important;
white-space: normal !important;
text-indent: 0 !important;
}
/* "by Internet Florist" — sibling of inside . Clear the float, sit on its own line,
indent margin-left to align with the title text column (32px icon + 8px gap = 40px). */
html body div.header.header_mobile_search > div.logo > h1 > img[alt="by Internet Florist"] {
display: block !important;
clear: both !important;
float: none !important;
width: 110px !important;
height: auto !important;
margin: 4px 0 0 40px !important;
padding: 0 !important;
vertical-align: baseline !important;
}
/* Hide the .desktop_hidden duplicate "by Internet Florist" sub-image at iPad-landscape width.
Broad selector so it matches whether the img is a direct child of or wrapped elsewhere. */
html body div.header.header_mobile_search .logo h1 img.desktop_hidden,
html body div.header.header_mobile_search div.logo img.desktop_hidden,
html body .header.header_mobile_search .logo img.desktop_hidden {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Delivery box: COLUMN 2 (MIDDLE) */
html body div.header.header_mobile_search > div.logo > div.opening {
display: block !important;
grid-column: 2 / 3 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
position: static !important;
}
html body div.header.header_mobile_search > div.logo > div.opening .row-dropdown-header.iphone_hidden.ipad_hidden:not(.modal-form):not(.modal-form2) {
display: block !important;
margin: 0 !important;
width: 100% !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
html body div.header.header_mobile_search > div.logo > div.opening .row-dropdown-header.iphone_hidden.ipad_hidden:not(.modal-form):not(.modal-form2) .popup-content {
display: grid !important;
grid-template-columns: minmax(140px, 1fr) 120px 88px !important;
align-items: center !important;
gap: 6px !important;
width: 100% !important;
}
html body div.header.header_mobile_search > div.logo > div.opening .row-dropdown-header.iphone_hidden.ipad_hidden:not(.modal-form):not(.modal-form2) .popup-currency {
display: none !important;
}
html body div.header.header_mobile_search > div.logo > div.opening .popup-content .google-dropdown,
html body div.header.header_mobile_search > div.logo > div.opening .popup-content .google-dropdown.date_width,
html body div.header.header_mobile_search > div.logo > div.opening .popup-content .google-dropdown.button_width {
width: 100% !important;
min-width: 0 !important;
}
/* CART: COLUMN 3 (FAR RIGHT). Force-kill css_head.css's position:absolute + float:right + top:-4px. */
html body div.header.header_mobile_search > div.logo > div.cart {
display: block !important;
grid-column: 3 / 4 !important;
grid-row: 1 !important;
position: relative !important;
right: auto !important;
top: auto !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
margin: 0 !important;
padding: 4px 0 4px 12px !important;
border-left: solid 1px #ccc !important;
border-right: 0 !important;
z-index: 1 !important;
width: auto !important;
right:10px !important;
}
html body div.header.header_mobile_search > div.logo > div.cart a {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
color: inherit !important;
}
/* #cartDiv: hover dropdown — keep absolutely positioned but out of the grid flow */
html body div.header.header_mobile_search > div.logo > div#cartDiv {
grid-column: 3 / 4 !important;
grid-row: 1 !important;
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
}
}
/* iPad-Mini-landscape (900–1170px): product cards = desktop-style typography & spacing.
Default css_head.css sizes are tuned for ≥1200px — here we lift fonts/buttons back up. */
@media screen and (min-width: 1367px) and (max-width: 1500px) {
/* Card container — flex column so we can pin the BUY NOW button to the bottom (margin-top:auto)
across all 3 cards in the row. Without this, shorter cards put the button right after the price
and cards with more text push it lower — buttons end up at different vertical positions. */
html body ul.products li div.ext,
html body ul.products li div.ext-basket {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
border-radius: 12px !important;
overflow: hidden !important;
background: #fff !important;
}
html body ul.products li div.ext .prod_img,
html body ul.products li div.ext-basket .prod_img {
height: auto !important;
aspect-ratio: 1 / 1 !important;
background: #fff !important;
flex: 0 0 auto !important;
}
html body ul.products li div.ext .prod_img img,
html body ul.products li div.ext-basket .prod_img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
}
html body ul.products li div.ext .prod_det,
html body ul.products li div.ext-basket .prod_det {
padding: 6px 14px 0 !important;
text-align: center !important;
flex: 0 0 auto !important;
}
/* Title — "Royal Choice" */
html body ul.products li div.ext .prod_det h4,
html body ul.products li div.ext .prod_det h4 a,
html body ul.products li div.ext-basket .prod_det h4,
html body ul.products li div.ext-basket .prod_det h4 a {
font-size: 18px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
margin: 0 0 2px !important;
text-align: center !important;
color: #1f2937 !important;
}
/* "Delivery Date: Thursday, 30 Apr" */
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle {
position: static !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 0 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
text-align: center !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle::before,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle::before {
display: none !important;
}
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2 {
display: inline !important;
font-size: 13px !important;
line-height: 1.25 !important;
color: #3596b5 !important;
font-weight: 500 !important;
text-align: center !important;
}
/* "from" + price block — tight spacing */
html body ul.products li div.ext .prod_price,
html body ul.products li div.ext-basket .prod_price {
margin: 2px 0 0 !important;
padding: 0 14px 4px !important;
text-align: center !important;
flex: 0 0 auto !important;
}
html body ul.products li div.ext .prod_price span.a-center.prod_price-row,
html body ul.products li div.ext-basket .prod_price span.a-center.prod_price-row {
display: block !important;
font-size: 12px !important;
line-height: 1.15 !important;
color: #9ca3af !important;
font-style: italic !important;
margin: 0 !important;
}
html body ul.products li div.ext .prod_price span.a-center:not(.prod_price-row) strong,
html body ul.products li div.ext-basket .prod_price span.a-center:not(.prod_price-row) strong {
display: block !important;
font-size: 18px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
color: #1f2937 !important;
margin: 0 !important;
}
html body ul.products li div.ext .prod_price span.a-center:not(.prod_price-row) small,
html body ul.products li div.ext-basket .prod_price span.a-center:not(.prod_price-row) small {
display: block !important;
font-size: 12px !important;
line-height: 1.25 !important;
color: #6b7280 !important;
margin: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* "BUY NOW" button — pinned to the bottom of the card via margin-top:auto so all 3 cards' buttons
align on the same horizontal line regardless of how many text rows precede them. */
html body ul.products li div.ext .prod_btn,
html body ul.products li div.ext-basket .prod_btn {
margin: auto 0 0 0 !important;
padding: 6px 14px 12px !important;
flex: 0 0 auto !important;
text-align: center !important;
}
html body ul.products li div.ext .prod_btn .md_button.green,
html body ul.products li div.ext-basket .prod_btn .md_button.green,
html body ul.products li .prod_btn .md_button.green {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 75% !important;
min-width: 160px !important;
max-width: 220px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 18px !important;
border-radius: 999px !important;
background: #fff !important;
color: #111827 !important;
border: 1.5px solid #111827 !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
html body ul.products li div.ext .prod_btn .md_button.green a,
html body ul.products li div.ext-basket .prod_btn .md_button.green a,
html body ul.products li .prod_btn .md_button.green a {
display: inline-block !important;
min-height: 0 !important;
font-size: 17px !important;
color: inherit !important;
text-decoration: none !important;
}
html body ul.products li div.ext .prod_btn .md_button.green:hover,
html body ul.products li div.ext-basket .prod_btn .md_button.green:hover,
html body ul.products li .prod_btn .md_button.green:hover {
background: #111827 !important;
color: #fff !important;
}
}
/* iPad portrait: show provinces/featured links in 3 columns */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body .featured-areas-card ul.foldershops.f4p-location-grid,
html body .featured-areas-card ul.foldershops,
html body .hentry.delivery .featured-areas-card ul.foldershops {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px 12px !important;
}
}
/* iPad portrait product page: ensure detail box/content is visible */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
.composition{
font-size: 2.0rem !important;
}
html body .grid-col.flowerdetails .prodcut-details-box {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
margin-top: 8px !important;
margin-bottom: 12px !important;
padding: 12px !important;
}
html body .grid-col.flowerdetails .prodcut-details-box .entry-content,
html body .grid-col.flowerdetails .prodcut-details-box .entry-content p {
.entry-content p {
max-wdth:100%;
}
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-height: none !important;
overflow: visible !important;
width: 100% !important;
}
html body .grid-col.flowerdetails .hentry {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
column-gap: 8px !important;
row-gap: 10px !important;
width: 100% !important;
align-items: start !important;
}
html body .grid-col.flowerdetails .flowerinfo {
display: block !important;
grid-column: 1 !important;
min-width: 0 !important;
float: none !important;
margin: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
html body .grid-col.flowerdetails .floweroptions {
display: block !important;
grid-column: 2 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
float: none !important;
clear: none !important;
margin: 0 !important;
margin-top: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
html body .grid-col.flowerdetails .prodcut-details-box,
html body .grid-col.flowerdetails .prodcut-details-box-trustpilot {
grid-column: 1 / -1 !important;
}
html body .grid-col.flowerdetails .floweroptions .entry-content,
html body .grid-col.flowerdetails .floweroptions .entry-content p {
display: block !important;
visibility: visible !important;
max-height: none !important;
overflow: visible !important;
}
}
/* iPad portrait hard lock: product page must be image left, delivery box right */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body .flowerdetails .hentry,
html body .grid-col.flowerdetails .hentry {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
width: 100% !important;
gap: 6px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
html body .flowerdetails .prodcut-details-box,
html body .grid-col.flowerdetails .prodcut-details-box {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
html body .flowerdetails .prodcut-details-box-trustpilot,
html body .grid-col.flowerdetails .prodcut-details-box-trustpilot {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
html body .flowerdetails .flowerinfo,
html body .grid-col.flowerdetails .flowerinfo {
flex: 0 0 calc((100% - 6px) / 1) !important;
width: calc((100% - 6px) / 1) !important;
max-width: calc((100% - 6px) / 1) !important;
min-width: 0 !important;
box-sizing: border-box !important;
float: none !important;
clear: none !important;
margin: 0 !important;
}
html body .flowerdetails .floweroptions,
html body .grid-col.flowerdetails .floweroptions {
flex: 0 0 calc((100% - 6px) / 1) !important;
width: calc((100% - 6px) / 1) !important;
max-width: calc((100% - 6px) / 1) !important;
min-width: 0 !important;
box-sizing: border-box !important;
float: none !important;
clear: none !important;
margin: 0 !important;
margin-top: 0 !important;
overflow: visible !important;
}
html body .flowerdetails .floweroptions > *,
html body .grid-col.flowerdetails .floweroptions > *,
html body .flowerdetails .floweroptions #floweroptions,
html body .grid-col.flowerdetails .floweroptions #floweroptions {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* Final iPad portrait lock: product image height must be auto */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body #product-list li div.ext .prod_img,
html body ul.products#product-list li div.ext .prod_img,
html body ul.products li div.ext .prod_img,
html body ul.products li div.ext-basket .prod_img {
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
}
html body #product-list li div.ext .prod_img a,
html body ul.products#product-list li div.ext .prod_img a,
html body ul.products li div.ext .prod_img a,
html body ul.products li div.ext-basket .prod_img a {
position: static !important;
inset: auto !important;
height: auto !important;
display: block !important;
}
html body #product-list li div.ext .prod_img img,
html body ul.products#product-list li div.ext .prod_img img,
html body ul.products li div.ext .prod_img img,
html body ul.products li div.ext-basket .prod_img img,
html body #product-list li div.ext .prod_img picture img,
html body ul.products#product-list li div.ext .prod_img picture img,
html body ul.products li div.ext .prod_img picture img,
html body ul.products li div.ext-basket .prod_img picture img {
height: auto !important;
max-height: none !important;
width: 100% !important;
object-fit: contain !important;
}
}
/* ── RTL (Arabic/Hebrew) header overrides ── */
@media (min-width: 771px) {
/* Trustpilot/c-ratings strip: header.tpl pushes it left via margin-right:auto.
In RTL the equivalent is auto on the OPPOSITE side, so it sits at the visual right. */
html[dir="rtl"] body ul.nav_header li.c-ratings {
margin-right: 0 !important;
margin-left: auto !important;
}
/* Logo block: float the icon to the right and align title to the right in RTL. */
html[dir="rtl"] body .logo h1 img { float: right !important; padding-left: 0 !important; padding-right: 10px !important; }
html[dir="rtl"] body .logo h1 { text-align: right !important; }
}
/* ── RTL: place cart icon on the left side of header ── */
@media (min-width: 771px) {
html[dir="rtl"] body .header.header_mobile_search {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
}
html[dir="rtl"] body .header .logo { order: 1 !important; }
html[dir="rtl"] body .header .cart { order: 3 !important; float: none !important;
border-left: 0 !important; padding-left: 0 !important;
border-right: solid 1px #ccc !important; padding-right: 14px !important;
margin-left: 0 !important;
margin-right: auto !important;
}
html[dir="rtl"] body .header .opening { order: 3 !important; width: 100% !important; }
/* RTL select2 caret: pin it to the right edge so it aligns with the LTR convention */
html[dir="rtl"] body .header .select2-container--default .select2-selection--single .select2-selection__arrow {
left: auto !important;
right: 6px !important;
}
/* Give the rendered text breathing room from the right-side caret */
html[dir="rtl"] body .header .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-right: 28px !important;
padding-left: 8px !important;
text-align: right !important;
}
}
/* ── RTL footer overrides ── */
html[dir="rtl"] body #f4p-site-footer ul.footergrid > li > h3.f4p-footer-h3,
html[dir="rtl"] body #f4p-site-footer .footer_phones h3.f4p-footer-h3,
html[dir="rtl"] body #f4p-site-footer .footer-content > h2.f4p-footer-h2,
html[dir="rtl"] body #f4p-site-footer ul.footergrid li p,
html[dir="rtl"] body #f4p-site-footer ul.footergrid li .nav-links {
text-align: right !important;
}
/* Phone-row label/number columns flip: country abbreviation should sit at the right edge in RTL */
html[dir="rtl"] body #f4p-site-footer .footer_phones .phone-country {
text-align: right !important;
}
html[dir="rtl"] body #f4p-site-footer .footer_phones .phone-numbers {
text-align: right !important;
direction: ltr !important; /* keep "+44 203…" digits in correct order */
unicode-bidi: embed !important;
}
/* Address blocks (UAE / USA office paragraphs) follow RTL flow */
html[dir="rtl"] body #f4p-site-footer .footer-content p {
text-align: right !important;
}
/* Social network row: align icons to the right */
html[dir="rtl"] body #f4p-site-footer ul.socialbuttons {
justify-content: flex-end !important;
}
/* Final iPad lock: keep hero + delivery card attached on all iPads (Mini/Air/Pro, portrait+landscape) */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body:has(.f4pm-hero) .f4pm-hero {
margin-bottom: 0 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap,
html body:has(.f4pm-hero) .f4pm-hero ~ .f4p-home-delivery-wrap {
padding-top: 0 !important;
position: relative !important;
z-index: 6 !important;
}
/* One delivery card only: hide main duplicate when header shows .f4p-home-delivery-wrap (not on category listings). */
html body:has(.f4pm-hero):has(.f4p-home-delivery-wrap) .main-container3 .grid-col > .popup-content2.f4p-dlv-wrap {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap {
display: grid !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
/* Keep card attached/overlapping hero consistently */
margin: -70px auto 16px !important;
max-width: calc(100% - 24px) !important;
width: 100% !important;
position: relative !important;
z-index: 7 !important;
}
}
/* All iPads (Mini portrait+): force consistent delivery-card visual style */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
width: 100% !important;
max-width: calc(100% - 24px) !important;
margin: -86px auto 16px !important;
padding: 16px !important;
border: none !important;
border-radius: 12px !important;
box-sizing: border-box !important;
background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 42%),
linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
inset 0 -1px 0 rgba(0,0,0,.05),
0 8px 24px rgba(15,23,42,.10) !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .f4p-delivery-inner-title {
grid-column: 1 / -1 !important;
display: block !important;
margin: 0 0 10px !important;
text-align: center !important;
font-size: 1rem !important;
font-weight: 600 !important;
color: #374151 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) {
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown.date_width {
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .popup-currency {
grid-column: 2 !important;
display: block !important;
visibility: visible !important;
height: auto !important;
width: 100% !important;
min-width: 0 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .popup-currency form,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap #ch_curr_2_home,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap select.f4p-delivery-currency {
display: block !important;
visibility: visible !important;
width: 100% !important;
min-width: 0 !important;
opacity: 1 !important;
margin-left: 0px !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown.button_width {
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 8px 0 0 !important;
padding: 0 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown.button_width .md_button.green {
width: 100% !important;
border-radius: 50px !important;
min-height: 44px !important;
background: #3898b8 !important;
border: none !important;
box-shadow: none !important;
color: #fff !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown.button_width .md_button.green,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown.button_width .md_button.green a,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown.button_width .md_button.green span {
color: #ffffff !important;
text-shadow: none !important;
}
/* Match iPad Mini field design exactly: city/date/currency */
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown .select2-container,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown .select2-container--default {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown .select2-selection--single,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown .select2-selection {
height: 46px !important;
border: 1.5px solid #d1d5db !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown .select2-selection__rendered {
height: 44px !important;
line-height: 44px !important;
padding: 0 10px 0 38px !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #374151 !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown .select2-selection__placeholder {
color: #374151 !important;
opacity: 1 !important;
font-size: 14px !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow {
right: 6px !important;
top: 0 !important;
height: 100% !important;
min-height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #374151 transparent transparent transparent !important;
border-width: 5px 4px 0 4px !important;
margin: 0 !important;
top: auto !important;
left: auto !important;
position: relative !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .calendar-bg input,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .calender_container input,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap #book_form_date2_home,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap #book_form_date2 {
height: 46px !important;
border: 1.5px solid #d1d5db !important;
border-radius: 8px !important;
background-color: #fff !important;
color: #374151 !important;
font-size: 14px !important;
padding: 0 10px 0 38px !important;
box-shadow: none !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .popup-currency select.sort-dropdown,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap #ch_curr_2_home,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap select.f4p-delivery-currency {
height: 46px !important;
border: 1.5px solid #d1d5db !important;
border-radius: 8px !important;
background: #ffffff !important;
color: #374151 !important;
font-size: 14px !important;
font-weight: 400 !important;
padding: 0 28px 0 38px !important;
box-shadow: none !important;
line-height: 1.25 !important;
}
/* Force Mini icons + alignment (city/date/currency) with single-icon source (no pseudo duplicates) */
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown::before,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown::after,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .popup-currency::before,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .popup-currency::after,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .popup-currency form::before,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .popup-currency form::after {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Delivery city on iPad: transparent background so it blends with the cream form box (no white halo at the border) */
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection--single,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered {
background: transparent !important;
background-image: none !important;
background-color: #fff !important;
padding-left: 2px !important;
border:none
}
.calendar-bg{
width: 100% !IMPORTANT;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered::before,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered::after,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered img,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered i,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered svg {
content: none !important;
display: none !important;
background: none !important;
}
/* Date field: remove extra left pseudo/icon artifacts, keep single calendar icon in input bg */
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width::before,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width::after,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width .calendar-bg::before,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width .calendar-bg::after,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width .calender_container::before,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width .calender_container::after {
content: none !important;
display: none !important;
border: 0 !important;
box-shadow: none !important;
background: none !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width .calendar-bg::before,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width .calender_container::before {
content: none !important;
display: none !important;
}
/* Date field: remove wrapper border (double-border bug), keep only input border */
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width .calendar-bg,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .google-dropdown.date_width .calender_container {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
}
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .calendar-bg input[type="text"],
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .calender_container input[type="text"],
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap #book_form_date2_home,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap #book_form_date2 {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 11px center !important;
background-size: 16px 16px !important;
}
/* Currency icon: single blue icon on select itself */
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap #ch_curr_2_home,
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap select.f4p-delivery-currency {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M14.5 9a3 2.5 0 0 0-5 0c0 1.5 1 2 2.5 2.5S15 13 15 14.5a3 2.5 0 0 1-6 0'/%3E%3Cline x1='12' y1='6' x2='12' y2='8'/%3E%3Cline x1='12' y1='16' x2='12' y2='18'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 11px center !important;
background-size: 16px 16px !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Currency touching right edge: force safe right padding in column */
html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap .popup-currency {
padding-right: 2px !important;
box-sizing: border-box !important;
}
/* Hide duplicate heading below categories on iPad */
html body .main-container3 > .grid-wrap.half-gutter > .grid-col > h2.index-mh-delivery,
html body .main-container3 > .grid-wrap.half-gutter > .grid-col > h3.index-mh-delivery,
html body .main-container3 .grid-col > h2.index-mh-delivery,
html body .main-container3 .grid-col > h3.index-mh-delivery {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Delivery City final cleanup (Air/Pro): remove all custom city icon injections */
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width)::before,
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width)::after {
content: none !important;
display: none !important;
background: none !important;
}
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered,
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__placeholder {
background: none !important;
background-image: none !important;
padding-left: 12px !important;
}
/* Delivery City requested look: white field + location icon */
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) {
position: relative !important;
}
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width)::before {
content: '' !important;
display: block !important;
position: absolute !important;
left: 11px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
z-index: 10 !important;
pointer-events: none !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") no-repeat center !important;
background-size: contain !important;
}
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection--single,
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered {
background-color: #ffffff !important;
}
html body .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) .select2-selection__rendered {
padding-left: 38px !important;
}
}
/* Listing thumbs: max size inside tile without cropping (object-fit: contain). */
@media (max-width: 800px) {
html body ul.products li div.ext .prod_img a,
html body ul.products li div.ext-basket .prod_img a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
html body ul.products li div.ext .prod_img picture,
html body ul.products li div.ext-basket .prod_img picture {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
box-sizing: border-box !important;
}
html body ul.products li div.ext .prod_img img,
html body ul.products li div.ext-basket .prod_img img,
html body ul.products li div.ext .prod_img picture img,
html body ul.products li div.ext-basket .prod_img picture img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 !important;
flex-shrink: 1 !important;
position: relative !important;
left: auto !important;
transform: none !important;
}
}