/* Custom frontend component layer — hand-maintained (no build step), loaded after
   tokens.css and bootstrap.css (vendor). Everything here reads from the --fp-* tokens
   in tokens.css rather than hardcoded values. */

body {
    background: var(--fp-background);
    color: var(--fp-text);
}

/* ---------- Live brand color ---------- */
/* Same root cause as the admin side: Bootstrap bakes most component colors (buttons,
   focus rings) as literal values at Sass build time — they don't read --bs-primary
   at runtime the way utility classes do. Patched by hand here. */

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.page-link {
    color: var(--bs-primary);
}

.page-link:hover {
    color: color-mix(in srgb, var(--bs-primary) 80%, black);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

/* ---------- Known Bootstrap RTL gaps (same one-time compile as the admin bundle) ---------- */

.offcanvas-header .btn-close,
.modal-header .btn-close {
    margin-left: 0;
    margin-inline-start: auto;
}

html[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html[dir="rtl"] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] .dropdown-menu-end[data-bs-popper] {
    right: auto;
    left: 0;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* Bootstrap's me/ms spacing utilities are compiled as hardcoded physical
   margin-right and margin-left, not logical margin-inline-end and start,
   same class of bug as the dropdown rules above. An icon placed before its
   label is first in DOM order, so under RTL it renders at the start, right,
   edge with the label to its left, but me-1 keeps adding margin-right,
   space on a side with nothing next to it, instead of margin-left, the
   side actually facing the label, so icon and label render stuck together
   everywhere this pattern is used. */
html[dir="rtl"] .me-0 { margin-right: 0 !important; margin-left: 0 !important; }
html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .ms-0 { margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }

/* ---------- Navbar ---------- */

.fp-navbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1030;
    background: var(--fp-surface);
    border-bottom: 1px solid var(--fp-border);
    min-height: var(--fp-navbar-height);
    min-width: 0;
}

main.flex-grow-1 {
    min-width: 0;
}

.fp-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--fp-text);
}

.fp-navbar .navbar-brand img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: var(--fp-radius);
}

.fp-navbar .nav-link {
    font-weight: 600;
    color: var(--fp-muted);
    padding-inline: .9rem !important;
}

.fp-navbar .nav-link:hover,
.fp-navbar .nav-link.active {
    color: var(--bs-primary);
}

.fp-icon-btn {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: var(--fp-text);
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}

.fp-icon-btn:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.fp-navbar .navbar-collapse .fp-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .9rem;
}

.fp-cart-badge {
    position: absolute;
    inset-block-start: -.15rem;
    inset-inline-end: -.15rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: var(--fp-radius-pill);
    background: var(--bs-primary);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fp-surface);
}

/* ---------- Hero ---------- */

.fp-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
}

.fp-hero-carousel,
.fp-hero-carousel .carousel-inner,
.fp-hero-carousel .carousel-item {
    height: min(38rem, 78vh);
}

@media (max-width: 767.98px) {
    .fp-hero-carousel,
    .fp-hero-carousel .carousel-inner,
    .fp-hero-carousel .carousel-item {
        height: 56vw;
    }
}

.fp-hero-slide {
    display: block;
    height: 100%;
    background-color: var(--bs-primary);
    background-size: cover;
    background-position: center;
    position: relative;
}

.fp-hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), .45) 0%, rgba(var(--bs-primary-rgb), .12) 40%, rgba(var(--bs-primary-rgb), .6) 100%);
    pointer-events: none;
}

.fp-hero-fallback {
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 60%, #2b0d0d));
    padding-block: 4rem;
}

.fp-hero-fallback .fp-hero-lead {
    max-width: 34rem;
}

.fp-hero-content {
    position: relative;
    z-index: 1;
}

.fp-hero-arrow {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    backdrop-filter: blur(2px);
}

.carousel-control-prev,
.carousel-control-next {
    width: 4rem;
}

.fp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: var(--fp-radius-pill);
    background: rgba(255, 255, 255, .15);
    font-weight: 600;
    font-size: .85rem;
}

.fp-hero-title {
    font-weight: 800;
    line-height: 1.25;
}

.fp-hero-lead {
    color: rgba(255, 255, 255, .85);
    max-width: 34rem;
}

.fp-hero .btn-light {
    font-weight: 700;
}

.fp-hero-carousel .carousel-indicators [data-bs-target] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .5);
}

.fp-hero-carousel .carousel-indicators .active {
    background-color: #fff;
}

.fp-hero-overlay-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.fp-hero-overlay-text .container > * {
    pointer-events: auto;
}

.fp-hero-fallback .fp-hero-overlay-text {
    position: relative;
    inset: auto;
}

.fp-hero-text-panel {
    background: rgba(20, 15, 15, .4);
    backdrop-filter: blur(3px);
    border-radius: var(--fp-radius-lg);
    padding: 2rem;
    max-width: 32rem;
}

/* The panel keeps the exact same style at every size — no separate mobile
   CSS for it at all. On narrow screens the *content* inside is simply
   shorter (platform name only, via Bootstrap's d-none/d-md-* utilities in
   the markup), so it always fits without needing its own layout rules. This
   never touches the carousel/slide height, background-size, or
   background-position rules above. */

.fp-hero-search-bar-wrap {
    margin-block-start: -3.5rem;
    position: relative;
    z-index: 2;
}

.fp-hero-search-bar {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), .5) 0%, rgba(var(--bs-primary-rgb), .68) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--fp-radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .15);
}

.fp-hero-search-field label {
    color: rgba(255, 255, 255, .8);
    font-size: .8rem;
    margin-bottom: .25rem;
}

.fp-hero-search-field .form-select,
.fp-hero-search-field .form-control {
    border-radius: var(--fp-radius-pill);
    border-color: transparent;
    padding-inline-start: 2.25rem;
}

.fp-hero-search-field {
    position: relative;
}

.fp-hero-search-field i {
    position: absolute;
    inset-inline-start: .85rem;
    inset-block-end: .5rem;
    color: var(--fp-muted);
    pointer-events: none;
}

/* Bootstrap's .form-select draws its dropdown chevron at a fixed physical
   background-position: right — it isn't RTL-aware in this build, so it never
   moves under dir="rtl". A decorative icon on the logical "start" side
   (== physical right under RTL) lands right on top of that fixed chevron.
   Selects get their icon pinned to the physical left instead, with padding
   on both physical sides. */
.fp-hero-search-field--select .form-select {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}

.fp-hero-search-field--select i {
    inset-inline-start: auto;
    left: .85rem;
    right: auto;
}

.fp-hero-search-submit {
    border-radius: var(--fp-radius-pill);
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Stats ---------- */

.fp-stats {
    margin-block-start: -3.5rem;
    position: relative;
    z-index: 2;
}

.fp-stat-card {
    background: var(--fp-surface);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow-lg);
    padding: 1.75rem 1.25rem;
    text-align: center;
    height: 100%;
}

.fp-stat-icon {
    width: 3rem;
    height: 3rem;
    margin-inline: auto;
    margin-block-end: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    font-size: 1.35rem;
}

.fp-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--fp-text);
}

.fp-stat-label {
    color: var(--fp-muted);
    font-weight: 600;
    font-size: .9rem;
}

/* ---------- Section heading ---------- */

.fp-section-eyebrow {
    color: var(--bs-primary);
    font-weight: 700;
    letter-spacing: .03em;
    font-size: .85rem;
    text-transform: uppercase;
}

.fp-section-title {
    font-weight: 800;
}

/* ---------- Worker cards ---------- */

.fp-worker-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    overflow: hidden;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
}

.fp-worker-card:hover {
    box-shadow: var(--fp-shadow);
    transform: translateY(-.2rem);
}

.fp-worker-photo-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(var(--bs-primary-rgb), .08);
    overflow: hidden;
}

.fp-worker-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-worker-photo-wrap .fp-worker-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(var(--bs-primary-rgb), .4);
}

.fp-worker-verified-badge {
    position: absolute;
    inset-block-end: .6rem;
    inset-inline-end: .6rem;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: #fff;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--fp-shadow-sm);
    font-size: 1.05rem;
}

.fp-filter-box {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow);
    padding: 1rem;
}

.fp-worker-body {
    padding: 1.1rem;
}

.fp-worker-name {
    font-weight: 700;
    margin-bottom: .15rem;
}

.fp-worker-meta {
    color: var(--fp-muted);
    font-size: .85rem;
}

.fp-worker-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-block: .65rem;
}

.fp-worker-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: var(--fp-radius-pill);
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
    font-size: .75rem;
    font-weight: 600;
}

.fp-worker-contact-box {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
}

/* ---------- About ---------- */

.fp-about-visual {
    position: relative;
    border-radius: var(--fp-radius-lg);
    background: linear-gradient(160deg, rgba(var(--bs-primary-rgb), .12), rgba(var(--bs-primary-rgb), .03));
    aspect-ratio: 16 / 10;
    min-height: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--fp-shadow);
}

.fp-about-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-about-visual i {
    color: var(--bs-primary);
    opacity: .9;
}

.fp-about-visual .fp-about-icon-lg {
    font-size: 9rem;
}

.fp-about-visual .fp-about-icon-float {
    position: absolute;
    background: var(--fp-surface);
    border-radius: 50%;
    box-shadow: var(--fp-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
}

.fp-about-list li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .75rem;
}

.fp-about-list i {
    color: var(--bs-primary);
    font-size: 1.15rem;
    margin-block-start: .1rem;
}

.fp-about-story {
    color: var(--fp-muted);
    font-size: 1.05rem;
    line-height: 2;
}

/* ---------- CTA ---------- */

.fp-cta {
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #2b0d0d));
    border-radius: var(--fp-radius-lg);
    color: #fff;
    overflow: hidden;
    position: relative;
}

/* ---------- Footer ---------- */

.fp-footer {
    background: #1c1414;
    color: rgba(255, 255, 255, .7);
    /* body is `d-flex flex-column`; flex items default to min-width:auto on the
       cross axis (here, horizontal, since the container is column-direction),
       which means a flex item won't shrink below its content's intrinsic min
       width. Footer's own content (social links etc.) doesn't wrap to a narrow
       enough intrinsic width on its own, so at small viewports it was forcing
       body — and the whole page — wider than the viewport. min-width:0 lets it
       actually shrink to the available width like a normal block. */
    min-width: 0;
}

.fp-footer a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

.fp-footer a:hover {
    color: #fff;
}

.fp-footer h2 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

/* Each footer list item (icon + email/phone/link text) is a flex row
   (`d-flex`). The text after the icon becomes an anonymous flex item, which
   defaults to min-width:auto — it won't shrink below its own unbroken width.
   An email address has no space to break on, so at narrow viewports the item
   refuses to shrink and forces the row (and the whole document) wider than
   the viewport, without any element's own rect ever showing out of bounds.
   overflow-wrap lets it break when there's no natural break point; min-width
   lets the flex item actually shrink to fit. */
.fp-footer ul.list-unstyled li {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fp-footer-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.fp-footer-social {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.fp-footer-social:hover {
    background: var(--bs-primary);
}

.fp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* ---------- Inner page header (contact, generic pages) ---------- */

.fp-page-header {
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 60%, #2b0d0d));
    color: #fff;
}

.fp-page-header .container {
    padding-block: 2rem !important;
}

.fp-page-header .fp-hero-title {
    font-size: 1.5rem;
}

.fp-page-header .fp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: var(--fp-radius-pill);
    background: rgba(255, 255, 255, .15);
    font-weight: 600;
    font-size: .75rem;
}

.fp-page-body {
    line-height: 1.9;
    color: var(--fp-text);
}

/* ---------- Mobile Side-Nav (Offcanvas) ---------- */

.fp-sidenav {
    padding: .5rem 0;
}

.fp-sidenav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-radius: var(--fp-radius);
    font-weight: 600;
    font-size: .95rem;
    color: var(--fp-text);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    margin-bottom: .15rem;
}

.fp-sidenav-link i {
    font-size: 1.15rem;
    width: 1.4rem;
    text-align: center;
    color: var(--fp-muted);
    flex-shrink: 0;
    transition: color .15s ease;
}

.fp-sidenav-link:hover,
.fp-sidenav-link.active {
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
}

.fp-sidenav-link:hover i,
.fp-sidenav-link.active i {
    color: var(--bs-primary);
}

/* ---------- Fixed Mobile Bottom Bar (Full-width) ---------- */

.fp-bottom-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 1040;
    width: 100%;
}

.fp-bottom-bar-container {
    background: #ffffff;
    border-top: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg) var(--fp-radius-lg) 0 0;
    display: flex;
    align-items: stretch;
    padding: .25rem .25rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
}

.fp-bottom-bar-item-wrapper {
    flex: 1;
    display: flex;
}

.fp-bottom-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--fp-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem 0;
    transition: color .15s ease, transform .15s ease;
    border-radius: var(--fp-radius);
}

.fp-bottom-bar-item i {
    font-size: 1.35rem;
    line-height: 1;
    transition: transform .15s ease;
}

.fp-bottom-bar-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 5.5rem;
}

.fp-bottom-bar-item:hover,
.fp-bottom-bar-item.active {
    color: var(--bs-primary);
}

.fp-bottom-bar-item:hover i,
.fp-bottom-bar-item.active i {
    transform: translateY(-2px);
    color: var(--bs-primary);
}

/* Cart icon badge wrapper. Fixed size (bigger than the icon glyph itself)
   so the badge below has clear space at the corner instead of overlapping
   the basket icon's own artwork (its handle stroke reaches close to the
   glyph's edges, unlike the padded circular desktop cart button). */
.fp-bottom-bar-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
}

.fp-bottom-bar-badge {
    position: absolute;
    inset-block-start: -.15rem;
    inset-inline-end: -.15rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: #25d366; /* Green badge as seen in sample image */
    color: #ffffff;
    font-size: .6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

/* Push page content up so it's never hidden behind the fixed bottom bar */
@media (max-width: 991.98px) {
    body.fp-has-bottom-bar {
        padding-bottom: 4.5rem !important;
    }
}

/* ---------- Cart dropdown (desktop navbar + mobile bottom bar) ---------- */

.fp-cart-dropdown {
    width: 320px;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    overflow-y: auto;
    /* Bootstrap's .dropdown-menu-end only right-aligns once Popper attaches
       [data-bs-popper] to the element. Popper isn't engaging for this trigger
       (this bundle never adds that attribute here), so the menu silently falls
       back to the base .dropdown-menu rule (inset-inline-start: 0), which
       anchors it to the trigger's *start* edge and lets it grow past the
       opposite edge of the viewport with nothing to stop it. Setting the
       logical end/start explicitly — independent of [data-bs-popper] — fixes
       this regardless of whether Popper ever kicks in. */
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
}

.fp-cart-dropdown .cart-items-container {
    max-height: 22rem;
    overflow-y: auto;
}

/* The bottom-bar cart trigger sits in the middle of the screen, so an
   edge-anchored dropdown (Popper's default) pushes off one side no matter
   which alignment class is used. data-bs-display="static" on the trigger
   disables Popper for this one, so we can position it ourselves: fixed,
   centered, floating just above the bottom bar. */
.fp-cart-dropdown-mobile {
    position: fixed !important;
    inset-inline: 1rem !important;
    inset-block-end: 4.75rem !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}