/*
 * Cinematic home page styles, ported from the reference landing page
 * (isarsliceweb: resources/views/welcome.blade.php).
 *
 * Every selector is scoped under .bf-landing. The source styled a
 * standalone Blade document, so it set :root/html/body/* and bare
 * h1-h3 rules; unscoped, those would repaint the whole SPA. The
 * wrapper keeps them on the home page only.
 */

/* Tailwind compatibility. The source document had no Tailwind; this app
 * ships preflight plus a base layer forcing a/button/label/span to
 * inline-block and stripping heading sizes and element margins. Restore
 * the UA defaults the ported layout assumes. These come first, so every
 * ported rule below still wins at equal specificity. */
.bf-landing a,
.bf-landing button,
.bf-landing label,
.bf-landing span { display: revert; font-style: revert; }
.bf-landing h1,
.bf-landing h2,
.bf-landing h3,
.bf-landing h4,
.bf-landing h5,
.bf-landing h6 { font-size: revert; font-weight: revert; margin: revert; color: revert; }
.bf-landing p,
.bf-landing blockquote,
.bf-landing figure,
.bf-landing ul,
.bf-landing ol { margin: revert; padding: revert; }
.bf-landing img,
.bf-landing svg { display: revert; vertical-align: revert; }


.bf-landing {
    /* Amber + crimson palette (light theme) */
    --ink: #fff4f3;          /* page base — amber        */
    --ink-deep: #f3d9d6;     /* deep orange edge/vignette */
    --panel: #fff4f3;        /* raised section           */
    --panel-soft: #fffbfb;   /* card surface — lightest  */
    --accent: #4d001f;       /* primary accent / CTA     */
    --accent-bright: #75002f;/* hover                    */
    --accent-deep: #2e0012;  /* deep crimson             */
    --heading: #12100d;      /* headings — near black    */
    --muted: #4a3212;        /* body copy — warm brown   */
    --line: rgba(90, 45, 5, 0.2);
    /* Hero glow — bright amber centre falling to an orange vignette */
    --bloom: radial-gradient(
        118% 88% at 68% 30%,
        #fffbfb 0%,
        #fff8f7 26%,
        #fff4f3 52%,
        #fff4f3 76%,
        #f3d9d6 100%
    );
}
.bf-landing, .bf-landing * {
    box-sizing: border-box;
}
.bf-landing {
    scroll-behavior: smooth;
    margin: 0;
    background: var(--ink);
    color: var(--heading);
    font-family: "DM Sans", sans-serif;
}
.bf-landing a {
    color: inherit;
    text-decoration: none;
}
.bf-landing .site-header {
    height: 86px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 5vw;
    border-bottom: 1px solid var(--line);
    gap: 45px;
}
.bf-landing .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1.7px;
    line-height: 1;
}
.bf-landing .brand b {
    color: var(--accent);
}
.bf-landing .brand small {
    display: block;
    font: 500 7px "DM Sans", sans-serif;
    letter-spacing: 3px;
    color: var(--muted);
    margin-top: 6px;
}
.bf-landing .brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 21px;
    transform: rotate(45deg);
}
.bf-landing .brand-mark::first-letter {
    transform: rotate(-45deg);
}
.bf-landing .nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-left: auto;
}
.bf-landing .nav-links a {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #4a3212;
    position: relative;
}
.bf-landing .nav-links a:hover,
.bf-landing .nav-links .active {
    color: var(--accent);
}
.bf-landing .nav-links .active:after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    position: absolute;
    left: 50%;
    top: 22px;
}
.bf-landing .reserve-link {
    border: 1px solid rgba(77, 0, 31, 0.7);
    padding: 13px 18px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.bf-landing .reserve-link span,
.bf-landing .button span {
    margin-left: 15px;
}
.bf-landing .menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: white;
}
.bf-landing .hero {
    min-height: 760px;
    height: 100vh;
    position: relative;
    background: url("/welcome/img/hero-pizza.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    padding: 100px 8vw 60px;
}
.bf-landing .hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(120, 60, 8, 0.98) 0%,
            rgba(120, 60, 8, 0.82) 33%,
            rgba(120, 60, 8, 0.18) 70%,
            rgba(120, 60, 8, 0.25)
        ),
        linear-gradient(0deg, rgba(120, 60, 8, 0.7), transparent 35%);
}
.bf-landing .hero-content {
    position: relative;
    max-width: 690px;
    z-index: 1;
}
.bf-landing .eyebrow {
    text-transform: uppercase;
    letter-spacing: 3.5px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}
.bf-landing .eyebrow span {
    display: inline-block;
    width: 29px;
    height: 1px;
    background: var(--accent);
}
.bf-landing h1,
.bf-landing h2 {
    font-family: "Oswald", sans-serif;
    margin: 18px 0;
    text-transform: uppercase;
    line-height: 0.94;
    letter-spacing: -1px;
}
.bf-landing h1 {
    font-size: clamp(70px, 8vw, 125px);
}
.bf-landing h1 em,
.bf-landing h2 em {
    font-style: normal;
    color: transparent;
    -webkit-text-stroke: 1px var(--accent);
}
.bf-landing .hero-copy {
    max-width: 500px;
    line-height: 1.8;
    color: #4a3212;
    font-size: 15px;
}
.bf-landing .hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 34px;
}
.bf-landing .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    font-size: 10px;
    border: 1px solid var(--line);
    cursor: pointer;
}
.bf-landing .button-gold {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}
.bf-landing .button-gold:hover {
    background: #75002f;
}
.bf-landing .button-ghost {
    background: rgba(155, 14, 23, 0.5);
}
.bf-landing .scroll-cue {
    position: absolute;
    z-index: 2;
    bottom: 37px;
    left: 5vw;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    gap: 14px;
    align-items: center;
    color: #5c4010;
}
.bf-landing .scroll-cue i {
    width: 45px;
    height: 1px;
    background: var(--accent);
}
.bf-landing .highlights {
    position: relative;
    margin: -68px 5vw 0;
    z-index: 3;
    background: rgba(255, 251, 251, 0.94);
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.bf-landing .highlights article {
    min-height: 135px;
    padding: 27px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-right: 1px solid var(--line);
    position: relative;
}
.bf-landing .highlights article:last-child {
    border: 0;
}
.bf-landing .highlights strong {
    position: absolute;
    top: 10px;
    right: 12px;
    color: rgba(77, 0, 31, 0.18);
    font: 600 26px "Oswald";
}
.bf-landing .icon {
    font-size: 29px;
    color: var(--accent);
}
.bf-landing .highlights h2 {
    font: 600 13px "DM Sans";
    letter-spacing: 0.7px;
    margin: 0 0 8px;
}
.bf-landing .highlights p {
    font-size: 10px;
    color: var(--muted);
    margin: 0;
}
.bf-landing .story {
    padding: 145px 12vw;
    text-align: center;
    background: radial-gradient(
        circle at center,
        rgba(77, 0, 31, 0.08),
        transparent 45%
    );
}
.bf-landing .story .eyebrow {
    justify-content: center;
}
.bf-landing .story h2,
.bf-landing .reservation h2 {
    font-size: clamp(44px, 5vw, 75px);
}
.bf-landing .story > p:last-child {
    max-width: 700px;
    margin: 28px auto 0;
    line-height: 1.9;
    color: var(--muted);
}
.bf-landing .menu-preview {
    padding: 95px 8vw;
    background: #12100d;
    color: #ffffff;
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 0;
}
.bf-landing .menu-preview > div {
    padding: 24px;
    border-right: 1px solid rgba(255, 244, 243, 0.2);
}
.bf-landing .menu-preview > div:last-child {
    border: 0;
}
.bf-landing .menu-preview h2 {
    font-size: 48px;
}
.bf-landing .dish span {
    font: 700 32px "Oswald";
    color: rgba(255, 244, 243, 0.2);
}
.bf-landing .dish h3 {
    font: 600 18px "Oswald";
    text-transform: uppercase;
    margin-top: 30px;
}
.bf-landing .dish p {
    font-size: 12px;
    line-height: 1.7;
    color: #5c4010;
    min-height: 42px;
}
.bf-landing .dish b {
    display: block;
    color: #2e0012;
    margin-top: 20px;
}
.bf-landing .reservation {
    padding: 110px 8vw;
    background: linear-gradient(120deg, #fff4f3, #f3d9d6);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
    gap: 70px;
}
.bf-landing .reservation form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.bf-landing .reservation label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted);
}
.bf-landing select,
.bf-landing input {
    display: block;
    margin-top: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d9b3af;
    color: var(--heading);
    padding: 12px 0;
    font-family: inherit;
}
.bf-landing select option {
    background: #fff4f3;
}
.bf-landing .reservation button {
    grid-column: 1/-1;
    margin-top: 15px;
}
.bf-landing .form-note {
    grid-column: 2;
    color: var(--accent);
    font-size: 12px;
}
.bf-landing footer {
    padding: 50px 6vw;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    align-items: center;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}
.bf-landing .menu-toggle {
    width: 40px;
    height: 40px;
}
.bf-landing .menu-toggle span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--heading);
    margin: 7px;
}
@media (max-width: 980px) {
    .bf-landing .site-header {
        padding: 0 24px;
    }
    .bf-landing .menu-toggle {
        display: block;
        margin-left: auto;
    }
    .bf-landing .reserve-link {
        display: none;
    }
    .bf-landing .nav-links {
        display: none;
        position: absolute;
        top: 86px;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 30px;
        background: #fff4f3;
        flex-direction: column;
        align-items: flex-start;
    }
    .bf-landing .nav-links.open {
        display: flex;
    }
    .bf-landing .hero {
        padding-left: 7vw;
        background-position: 62% center;
    }
    .bf-landing .hero-shade {
        background: linear-gradient(
            90deg,
            rgba(120, 60, 8, 0.95),
            rgba(120, 60, 8, 0.55) 70%,
            rgba(120, 60, 8, 0.35)
        );
    }
    .bf-landing .highlights {
        grid-template-columns: 1fr 1fr;
    }
    .bf-landing .highlights article:nth-child(2) {
        border-right: 0;
    }
    .bf-landing .menu-preview {
        grid-template-columns: 1fr 1fr;
    }
    .bf-landing .menu-preview > div:nth-child(2) {
        border-right: 0;
    }
    .bf-landing .reservation {
        grid-template-columns: 1fr;
    }
    .bf-landing .form-note {
        grid-column: 1;
    }
}
@media (max-width: 620px) {
    .bf-landing .site-header {
        height: 74px;
    }
    .bf-landing .brand {
        font-size: 15px;
    }
    .bf-landing .brand-mark {
        width: 32px;
        height: 32px;
    }
    .bf-landing .hero {
        min-height: 720px;
        height: 92vh;
        padding: 95px 24px 100px;
        background-position: 68% center;
        align-items: flex-end;
    }
    .bf-landing .hero-shade {
        background: linear-gradient(
            0deg,
            rgba(120, 60, 8, 0.98) 7%,
            rgba(120, 60, 8, 0.7) 62%,
            rgba(120, 60, 8, 0.25)
        );
    }
    .bf-landing .hero-content {
        width: 100%;
    }
    .bf-landing h1 {
        font-size: 58px;
    }
    .bf-landing .hero-copy {
        font-size: 13px;
    }
    .bf-landing .hero-actions {
        flex-direction: column;
        width: -moz-max-content;
        width: max-content;
    }
    .bf-landing .scroll-cue {
        display: none;
    }
    .bf-landing .highlights {
        margin: 0;
        grid-template-columns: 1fr;
    }
    .bf-landing .highlights article,
    .bf-landing .highlights article:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: 110px;
    }
    .bf-landing .story {
        padding: 100px 24px;
    }
    .bf-landing .menu-preview {
        padding: 70px 24px;
        grid-template-columns: 1fr;
    }
    .bf-landing .menu-preview > div {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 244, 243, 0.2);
    }
    .bf-landing .reservation {
        padding: 90px 24px;
        gap: 35px;
    }
    .bf-landing .reservation form {
        grid-template-columns: 1fr;
    }
    .bf-landing .reservation button {
        grid-column: 1;
    }
    .bf-landing .form-note {
        grid-column: 1;
    }
    .bf-landing footer {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 45px 24px;
    }
}

.bf-landing .signature {
    padding: 0 7vw 110px;
    background: #fff4f3;
}
.bf-landing .signature-feature {
    min-height: 620px;
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    background: linear-gradient(120deg, #fff4f3, #f3d9d6 65%);
    overflow: hidden;
}
.bf-landing .signature-copy {
    padding: 80px 8%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.bf-landing .dish-number {
    color: #5c4010;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 22px 0 0;
}
.bf-landing .signature-copy h2 {
    font-size: clamp(55px, 6vw, 88px);
    margin: 15px 0 25px;
}
.bf-landing .signature-copy > p:nth-of-type(3) {
    max-width: 480px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}
.bf-landing .dish-meta {
    display: flex;
    gap: 35px;
    padding: 22px 0;
    margin: 12px 0 24px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    width: 100%;
    font-size: 11px;
}
.bf-landing .dish-meta small {
    display: block;
    color: #5c4010;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 7px;
    margin-bottom: 7px;
}
.bf-landing .signature-visual {
    position: relative;
    min-height: 560px;
}
.bf-landing .signature-visual:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff4f3, transparent 30%),
        linear-gradient(0deg, rgba(120, 60, 8, 0.45), transparent 45%);
}
.bf-landing .signature-visual img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 67% center;
       object-position: 67% center;
}
.bf-landing .plate-note {
    position: absolute;
    z-index: 1;
    right: 25px;
    bottom: 22px;
    color: #4a3212;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.bf-landing .menu-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 95px 0 30px;
}
.bf-landing .menu-heading h2 {
    font-size: 46px;
    margin-bottom: 0;
}
.bf-landing .menu-heading > a {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 8px;
}
.bf-landing .dish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.bf-landing .dish-card {
    border: 1px solid var(--line);
    background: #fffbfb;
    transition: 0.3s ease;
}
.bf-landing .dish-card:hover {
    transform: translateY(-6px);
    border-color: rgba(77, 0, 31, 0.6);
}
.bf-landing .dish-image {
    height: 260px;
    position: relative;
    overflow: hidden;
}
.bf-landing .dish-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(243, 217, 214, 0.65), transparent 55%);
}
.bf-landing .dish-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.5s ease;
}
.bf-landing .dish-card:hover .dish-image img {
    transform: scale(1.04);
}
.bf-landing .dish-card:first-child .dish-image img {
    -o-object-position: 70% center;
       object-position: 70% center;
}
.bf-landing .dish-image > span {
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 16px;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: grid;
    place-items: center;
    font: 600 11px "Oswald";
    color: var(--accent);
    background: rgba(243, 217, 214, 0.65);
}
.bf-landing .dish-info {
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
}
.bf-landing .dish-info > div > p {
    margin: 0 0 6px;
    text-transform: uppercase;
    color: #5c4010;
    font-size: 7px;
    letter-spacing: 1.8px;
}
.bf-landing .dish-info h3 {
    font: 600 20px "Oswald";
    text-transform: uppercase;
    margin: 0;
}
.bf-landing .dish-info strong {
    color: var(--accent);
    font: 600 17px "Oswald";
    align-self: end;
}
.bf-landing .dish-info .description {
    grid-column: 1/-1;
    color: var(--muted);
    font-size: 10px;
    margin: 7px 0 13px;
}
.bf-landing .card-foot {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 13px;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #5c4010;
}
.bf-landing .card-foot span:last-child {
    color: var(--accent);
}
@media (max-width: 980px) {
    .bf-landing .signature {
        padding-left: 4vw;
        padding-right: 4vw;
    }
    .bf-landing .signature-feature {
        grid-template-columns: 1fr;
    }
    .bf-landing .signature-visual {
        min-height: 450px;
        order: -1;
    }
    .bf-landing .signature-visual:after {
        background: linear-gradient(0deg, #fff4f3, transparent 35%);
    }
    .bf-landing .dish-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 620px) {
    .bf-landing .signature {
        padding: 0 18px 75px;
    }
    .bf-landing .signature-feature {
        border-left: 0;
        border-right: 0;
    }
    .bf-landing .signature-visual {
        min-height: 320px;
    }
    .bf-landing .signature-copy {
        padding: 45px 22px 55px;
    }
    .bf-landing .signature-copy h2 {
        font-size: 52px;
    }
    .bf-landing .dish-meta {
        gap: 20px;
    }
    .bf-landing .menu-heading {
        padding-top: 70px;
    }
    .bf-landing .menu-heading h2 {
        font-size: 36px;
    }
    .bf-landing .menu-heading > a {
        display: none;
    }
    .bf-landing .dish-grid {
        grid-template-columns: 1fr;
    }
    .bf-landing .dish-image {
        height: 280px;
    }
}

.bf-landing .visit {
    padding: 0 7vw 110px;
    background: #fff4f3;
}
.bf-landing .visit-banner {
    height: 480px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
}
.bf-landing .visit-banner:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(120, 60, 8, 0.94),
            rgba(120, 60, 8, 0.56) 43%,
            transparent 72%
        ),
        linear-gradient(0deg, rgba(120, 60, 8, 0.35), transparent 50%);
}
.bf-landing .visit-banner > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.bf-landing .visit-banner-copy {
    position: absolute;
    z-index: 1;
    left: 7%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 490px;
}
.bf-landing .visit-banner-copy h2 {
    font-size: clamp(52px, 5vw, 76px);
}
.bf-landing .visit-banner-copy > p:last-child {
    max-width: 420px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}
.bf-landing .visit-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 18px;
    margin-top: 18px;
}
.bf-landing .booking-panel,
.bf-landing .hours-card,
.bf-landing .rating-card,
.bf-landing .location-card {
    border: 1px solid var(--line);
    background: #fffbfb;
}
.bf-landing .booking-panel {
    padding: 36px;
}
.bf-landing .panel-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}
.bf-landing .panel-title > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(77, 0, 31, 0.4);
    color: var(--accent);
    font: 600 11px "Oswald";
}
.bf-landing .panel-title p,
.bf-landing .rating-card > p,
.bf-landing .location-card p {
    margin: 0 0 5px;
    color: #5c4010;
    text-transform: uppercase;
    font-size: 7px;
    letter-spacing: 1.8px;
}
.bf-landing .panel-title h3,
.bf-landing .location-card h3 {
    font: 600 19px "Oswald";
    text-transform: uppercase;
    margin: 0;
}
.bf-landing .booking-panel form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 19px 22px;
}
.bf-landing .booking-panel label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #5c4010;
}
.bf-landing .booking-panel input,
.bf-landing .booking-panel select {
    font-size: 12px;
}
.bf-landing .booking-panel button {
    grid-column: 1/-1;
    margin-top: 8px;
}
.bf-landing .form-note {
    min-height: 17px;
    color: var(--accent);
    font-size: 11px;
    margin: 15px 0 0;
}
.bf-landing .visit-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.bf-landing .hours-card {
    grid-column: 1/-1;
    padding: 28px;
}
.bf-landing .hours-card .panel-title {
    margin-bottom: 20px;
}
.bf-landing .hours-card dl {
    margin: 0;
}
.bf-landing .hours-card dl > div {
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
}
.bf-landing .hours-card dl > div:last-child {
    border: 0;
}
.bf-landing .hours-card dt {
    color: var(--muted);
    font-weight: 400;
}
.bf-landing .hours-card dd {
    margin: 0;
    color: var(--heading);
}
.bf-landing .hours-card .closed dd {
    color: var(--accent);
}
.bf-landing .rating-card {
    padding: 24px;
}
.bf-landing .rating-card div {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 10px 0;
}
.bf-landing .rating-card strong {
    font: 600 36px "Oswald";
}
.bf-landing .stars {
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 2px;
}
.bf-landing .rating-card small {
    color: #5c4010;
    font-size: 8px;
}
.bf-landing .location-card {
    overflow: hidden;
}
.bf-landing .map-art {
    height: 96px;
    position: relative;
    background: #fffbfb;
    overflow: hidden;
}
.bf-landing .map-art:before,
.bf-landing .map-art:after,
.bf-landing .map-art i {
    content: "";
    position: absolute;
    height: 2px;
    background: #d9b3af;
    transform: rotate(-17deg);
    width: 150%;
    left: -20%;
    top: 30%;
}
.bf-landing .map-art:after {
    transform: rotate(28deg);
    top: 68%;
}
.bf-landing .map-art i:nth-child(1) {
    transform: rotate(70deg);
    left: -50%;
    top: 55%;
}
.bf-landing .map-art i:nth-child(2) {
    transform: rotate(5deg);
    top: 48%;
}
.bf-landing .map-art i:nth-child(3) {
    transform: rotate(-55deg);
    left: 5%;
    top: 45%;
}
.bf-landing .map-art span {
    position: absolute;
    z-index: 2;
    left: 56%;
    top: 37%;
    color: var(--accent);
    font-size: 28px;
    filter: drop-shadow(0 0 8px rgba(77, 0, 31, 0.6));
}
.bf-landing .location-card > div:last-child {
    padding: 17px;
}
.bf-landing .location-card h3 {
    font-size: 13px;
}
.bf-landing .location-card a {
    display: inline-block;
    color: var(--accent);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-top: 10px;
}
.bf-landing .site-footer {
    background: #f3d9d6;
    border-top: 1px solid var(--line);
    padding: 0;
    color: var(--muted);
}
.bf-landing .footer-main {
    padding: 65px 7vw;
    display: grid;
    grid-template-columns: 1.5fr 0.65fr 1fr 1.2fr;
    gap: 6vw;
}
.bf-landing .footer-main h3 {
    font: 600 11px "Oswald";
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--heading);
    margin: 0 0 22px;
}
.bf-landing .footer-intro > p {
    max-width: 330px;
    font-size: 11px;
    line-height: 1.8;
    margin: 25px 0;
}
.bf-landing .socials {
    display: flex;
    gap: 8px;
}
.bf-landing .socials a {
    width: 29px;
    height: 29px;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 9px;
    text-transform: uppercase;
}
.bf-landing .socials a:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.bf-landing .footer-links,
.bf-landing .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}
.bf-landing .footer-links a,
.bf-landing .footer-contact a,
.bf-landing .footer-contact p,
.bf-landing .footer-news p {
    font-size: 10px;
    line-height: 1.75;
    margin: 0;
}
.bf-landing .footer-links a:hover,
.bf-landing .footer-contact a:hover {
    color: var(--accent);
}
.bf-landing .footer-news form {
    display: flex;
    border-bottom: 1px solid #d9b3af;
    margin-top: 18px;
}
.bf-landing .footer-news label {
    flex: 1;
}
.bf-landing .footer-news input {
    border: 0;
    margin: 0;
    padding: 12px 0;
    font-size: 10px;
}
.bf-landing .footer-news button {
    width: 36px;
    background: none;
    border: 0;
    color: var(--accent);
    font-size: 18px;
    cursor: pointer;
}
.bf-landing .footer-bottom {
    border-top: 1px solid var(--line);
    padding: 19px 7vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bf-landing .footer-bottom p {
    margin: 0;
}
.bf-landing .footer-bottom div {
    display: flex;
    gap: 25px;
}
.bf-landing .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 980px) {
    .bf-landing .visit {
        padding-left: 4vw;
        padding-right: 4vw;
    }
    .bf-landing .visit-grid {
        grid-template-columns: 1fr;
    }
    .bf-landing .footer-main {
        grid-template-columns: 1.3fr 1fr 1fr;
    }
    .bf-landing .footer-news {
        grid-column: 1/-1;
        max-width: 500px;
    }
}
@media (max-width: 620px) {
    .bf-landing .visit {
        padding: 0 18px 75px;
    }
    .bf-landing .visit-banner {
        height: 470px;
    }
    .bf-landing .visit-banner:after {
        background: linear-gradient(
            0deg,
            rgba(120, 60, 8, 0.96),
            rgba(120, 60, 8, 0.5) 70%,
            rgba(120, 60, 8, 0.2)
        );
    }
    .bf-landing .visit-banner-copy {
        left: 24px;
        right: 24px;
        top: auto;
        bottom: 35px;
        transform: none;
    }
    .bf-landing .visit-banner-copy h2 {
        font-size: 48px;
    }
    .bf-landing .visit-grid,
    .bf-landing .visit-aside {
        grid-template-columns: 1fr;
    }
    .bf-landing .booking-panel {
        padding: 25px;
    }
    .bf-landing .booking-panel form {
        grid-template-columns: 1fr;
    }
    .bf-landing .booking-panel button {
        grid-column: 1;
    }
    .bf-landing .hours-card,
    .bf-landing .rating-card,
    .bf-landing .location-card {
        grid-column: 1;
    }
    .bf-landing .footer-main {
        padding: 55px 24px;
        grid-template-columns: 1fr;
        gap: 42px;
    }
    .bf-landing .footer-bottom {
        padding: 24px;
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }
    .bf-landing .footer-bottom div {
        gap: 15px;
    }
}
.bf-landing .site-footer {
    display: block;
}
.bf-landing .nav-overlay {
    display: none;
}

.bf-landing {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}
.bf-landing main,
.bf-landing .site-footer {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}
.bf-landing img {
    max-width: 100%;
    display: block;
}
.bf-landing button,
.bf-landing input,
.bf-landing select,
.bf-landing textarea {
    max-width: 100%;
}
.bf-landing .highlights > *,
.bf-landing .signature-feature > *,
.bf-landing .dish-grid > *,
.bf-landing .visit-grid > *,
.bf-landing .visit-aside > *,
.bf-landing .footer-main > *,
.bf-landing .split-story > *,
.bf-landing .menu-category > *,
.bf-landing .experience-grid > *,
.bf-landing .occasions > *,
.bf-landing .contact-layout > *,
.bf-landing .contact-map > *,
.bf-landing .reserve-main > * {
    min-width: 0;
}

/* Premium inner pages */
.bf-landing .page-hero {
    min-height: 680px;
    height: 82vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 150px 8vw 90px;
    background-size: cover;
    background-position: center;
}
.bf-landing .page-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(120, 60, 8, 0.95),
            rgba(120, 60, 8, 0.62) 48%,
            rgba(120, 60, 8, 0.18)
        ),
        linear-gradient(0deg, rgba(120, 60, 8, 0.82), transparent 55%);
}
.bf-landing .page-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 770px;
}
.bf-landing .page-hero h1 {
    font-size: clamp(72px, 9vw, 132px);
    margin-bottom: 28px;
}
.bf-landing .page-hero-copy > p:last-child {
    max-width: 530px;
    color: #4a3212;
    line-height: 1.8;
    font-size: 14px;
}
.bf-landing .story-hero {
    background-image: url("/welcome/img/hero-pizza.jpg");
    background-position: 65% center;
}
.bf-landing .menu-hero {
    background-image: url("/welcome/img/gallery-3.jpg");
    background-position: 58% 46%;
}
.bf-landing .experience-hero,
.bf-landing .contact-hero {
    background-image: url("/welcome/img/gallery-1.jpg");
    background-position: center;
}
.bf-landing .editorial {
    padding: 130px 9vw;
}
.bf-landing .split-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9vw;
}
.bf-landing .editorial h2 {
    font-size: clamp(48px, 5vw, 78px);
}
.bf-landing .editorial-copy > p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.95;
    margin: 0 0 20px;
}
.bf-landing .editorial blockquote {
    font: 500 28px/1.45 "Oswald";
    text-transform: uppercase;
    margin: 55px 0 0;
    padding: 32px 0 0;
    border-top: 1px solid var(--line);
    color: var(--heading);
}
.bf-landing .editorial cite {
    display: block;
    margin-top: 16px;
    font: 500 8px "DM Sans";
    letter-spacing: 2px;
    color: var(--accent);
}
.bf-landing .values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 7vw 110px;
}
.bf-landing .values article {
    border: 1px solid var(--line);
    padding: 40px;
    min-height: 260px;
}
.bf-landing .values article + article {
    border-left: 0;
}
.bf-landing .values span,
.bf-landing .experience-grid article > span {
    font: 600 36px "Oswald";
    color: rgba(77, 0, 31, 0.25);
}
.bf-landing .values h3 {
    font: 600 22px "Oswald";
    text-transform: uppercase;
    margin: 55px 0 15px;
}
.bf-landing .values p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}
.bf-landing .image-statement {
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    background: #fffbfb;
}
.bf-landing .image-statement > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.bf-landing .image-statement > div {
    padding: 9vw 7vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.bf-landing .image-statement h2 {
    font-size: clamp(48px, 5vw, 72px);
}
.bf-landing .image-statement p {
    color: var(--muted);
    line-height: 1.8;
}
.bf-landing .image-statement .button {
    margin-top: 25px;
}
.bf-landing .menu-page {
    padding: 0 8vw 120px;
}
.bf-landing .menu-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 42px;
    padding: 24px;
    background: rgba(255, 244, 243, 0.94);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.bf-landing .menu-tabs a {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--muted);
}
.bf-landing .menu-tabs a:hover {
    color: var(--accent);
}
.bf-landing .menu-category {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 9vw;
    padding: 110px 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 70px;
}
.bf-landing .category-title span {
    font: 600 56px "Oswald";
    color: rgba(77, 0, 31, 0.18);
}
.bf-landing .category-title h2 {
    font-size: clamp(44px, 5vw, 70px);
    margin-bottom: 12px;
}
.bf-landing .category-title p {
    color: var(--accent);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.bf-landing .menu-list article {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 25px;
    padding: 23px 0;
    border-bottom: 1px solid var(--line);
}
.bf-landing .menu-list article:first-child {
    padding-top: 0;
}
.bf-landing .menu-list article:last-child {
    border: 0;
}
.bf-landing .menu-list h3 {
    font: 600 17px "Oswald";
    text-transform: uppercase;
    margin: 0 0 8px;
}
.bf-landing .menu-list h3 i {
    font: 600 7px "DM Sans";
    font-style: normal;
    color: var(--accent);
    border: 1px solid rgba(77, 0, 31, 0.45);
    padding: 4px 6px;
    margin-left: 8px;
    letter-spacing: 1px;
}
.bf-landing .menu-list p {
    color: var(--muted);
    font-size: 11px;
    margin: 0;
}
.bf-landing .menu-list strong {
    font: 600 15px "Oswald";
    color: var(--accent);
}
.bf-landing .menu-feature-image {
    height: 500px;
    position: relative;
    overflow: hidden;
}
.bf-landing .menu-feature-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.bf-landing .menu-feature-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(120, 60, 8, 0.65), transparent);
}
.bf-landing .menu-feature-image p {
    position: absolute;
    z-index: 1;
    bottom: 28px;
    left: 35px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 9px;
}
.bf-landing .page-cta {
    text-align: center;
    padding: 110px 24px;
    background: #fffbfb;
}
.bf-landing .page-cta .eyebrow {
    justify-content: center;
}
.bf-landing .page-cta h2 {
    font-size: clamp(48px, 6vw, 80px);
}
.bf-landing .experience-grid {
    padding: 100px 7vw;
}
.bf-landing .experience-grid article {
    display: grid;
    grid-template-columns: 70px 0.75fr 1.25fr;
    gap: 5vw;
    align-items: center;
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
}
.bf-landing .experience-grid article > div {
    max-width: 440px;
}
.bf-landing .experience-grid h2 {
    font-size: clamp(38px, 4vw, 58px);
}
.bf-landing .experience-grid p:last-child {
    color: var(--muted);
    line-height: 1.85;
    font-size: 12px;
}
.bf-landing .experience-grid img {
    width: 100%;
    height: 380px;
    -o-object-fit: cover;
       object-fit: cover;
}
.bf-landing .occasions {
    padding: 110px 8vw;
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 6vw;
    align-items: center;
    background: #12100d;
    color: #ffffff;
}
.bf-landing .occasions h2 {
    font-size: 56px;
}
.bf-landing .occasions > div > p:last-child {
    color: #5c4010;
    line-height: 1.8;
    font-size: 12px;
}
.bf-landing .occasion-list {
    display: grid;
    gap: 16px;
}
.bf-landing .occasion-list span {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 244, 243, 0.2);
    font: 600 12px "Oswald";
    text-transform: uppercase;
}
.bf-landing .contact-layout {
    padding: 120px 8vw;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 10vw;
}
.bf-landing .contact-details h2,
.bf-landing .contact-form-panel h2 {
    font-size: 60px;
}
.bf-landing .contact-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid var(--line);
}
.bf-landing .contact-row > span {
    font: 600 16px "Oswald";
    color: var(--accent);
}
.bf-landing .contact-row small {
    display: block;
    color: #5c4010;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-size: 7px;
    margin-bottom: 9px;
}
.bf-landing .contact-row p,
.bf-landing .contact-row a {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
}
.bf-landing .contact-form-panel {
    padding: 50px;
    background: #fffbfb;
    border: 1px solid var(--line);
}
.bf-landing .contact-form-panel form,
.bf-landing .premium-form {
    display: grid;
    gap: 20px;
}
.bf-landing .contact-form-panel label,
.bf-landing .premium-form label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #5c4010;
}
.bf-landing .contact-form-panel textarea,
.bf-landing .premium-form textarea {
    display: block;
    width: 100%;
    min-height: 110px;
    margin-top: 8px;
    padding: 14px 0;
    resize: vertical;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d9b3af;
    color: var(--heading);
    font-family: inherit;
}
.bf-landing .contact-map {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    min-height: 520px;
    background: #fffbfb;
}
.bf-landing .map-art.large {
    height: 100%;
    min-height: 520px;
}
.bf-landing .contact-map > div:last-child {
    padding: 8vw 7vw;
}
.bf-landing .contact-map h2 {
    font-size: 55px;
}
.bf-landing .contact-map p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}
.bf-landing .contact-map .button {
    margin-top: 20px;
}
.bf-landing .reserve-main {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    padding-top: 0;
}
.bf-landing .reserve-image {
    position: relative;
    min-height: 900px;
}
.bf-landing .reserve-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(120, 60, 8, 0.9), transparent 65%),
        linear-gradient(90deg, transparent 60%, rgba(120, 60, 8, 0.5));
}
.bf-landing .reserve-image > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.bf-landing .reserve-image > div {
    position: absolute;
    z-index: 1;
    left: 8%;
    right: 8%;
    bottom: 8%;
}
.bf-landing .reserve-image h1 {
    font-size: clamp(62px, 7vw, 105px);
}
.bf-landing .reserve-image blockquote {
    max-width: 440px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--line);
    color: #4a3212;
    font-size: 12px;
    line-height: 1.8;
}
.bf-landing .reserve-image cite {
    display: block;
    color: var(--accent);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 10px;
}
.bf-landing .reserve-form-wrap {
    padding: 145px 7vw 70px;
    background: #fff4f3;
}
.bf-landing .reserve-form-head h2 {
    font-size: 55px;
}
.bf-landing .reserve-form-head > p:last-child {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 35px;
}
.bf-landing .form-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.bf-landing .premium-form input,
.bf-landing .premium-form select {
    font-size: 12px;
}
.bf-landing .premium-form button {
    margin-top: 10px;
}
.bf-landing .reserve-contact {
    display: flex;
    justify-content: space-between;
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px solid var(--line);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
}
.bf-landing .reserve-contact a {
    color: var(--accent);
}
.bf-landing .compact-footer .footer-bottom {
    padding-top: 26px;
    padding-bottom: 26px;
}
@media (max-width: 980px) {
    .bf-landing .page-hero {
        height: 72vh;
    }
    .bf-landing .split-story,
    .bf-landing .contact-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }
    .bf-landing .values {
        grid-template-columns: 1fr;
    }
    .bf-landing .values article + article {
        border-left: 1px solid var(--line);
        border-top: 0;
    }
    .bf-landing .image-statement {
        grid-template-columns: 1fr;
    }
    .bf-landing .image-statement > img {
        height: 480px;
    }
    .bf-landing .menu-category {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .bf-landing .experience-grid article {
        grid-template-columns: 55px 1fr;
    }
    .bf-landing .experience-grid img {
        grid-column: 1/-1;
        height: 420px;
    }
    .bf-landing .occasions {
        grid-template-columns: 1fr 1fr;
    }
    .bf-landing .occasions > a {
        grid-column: 1/-1;
        width: -moz-max-content;
        width: max-content;
    }
    .bf-landing .contact-map {
        grid-template-columns: 1fr;
    }
    .bf-landing .reserve-main {
        grid-template-columns: 1fr;
    }
    .bf-landing .reserve-image {
        min-height: 720px;
    }
    .bf-landing .reserve-form-wrap {
        padding-top: 80px;
    }
    .bf-landing .reservation-page .site-header {
        position: absolute;
    }
}
@media (max-width: 620px) {
    .bf-landing.menu-open {
        overflow: hidden;
    }
    .bf-landing .site-header {
        z-index: 100;
    }
    .bf-landing .site-header .menu-toggle {
        position: relative;
        z-index: 103;
    }
    .bf-landing .site-header .nav-links {
        display: flex;
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        top: 0;
        left: auto;
        right: 0;
        width: min(86vw, 360px);
        height: 100dvh;
        margin: 0;
        padding: 115px 32px 45px;
        gap: 28px;
        background: linear-gradient(155deg, #fffbfb, #f3d9d6 72%);
        border-left: 1px solid rgba(77, 0, 31, 0.22);
        box-shadow: -24px 0 70px rgba(0, 0, 0, 0.46);
        transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.2, 1),
            opacity 0.25s ease, visibility 0.38s;
        z-index: 102;
    }
    .bf-landing .site-header .nav-links.open {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }
    .bf-landing .site-header .nav-links:before {
        content: "MENU";
        position: absolute;
        top: 49px;
        left: 32px;
        color: var(--accent);
        font: 600 8px "DM Sans";
        letter-spacing: 3px;
    }
    .bf-landing .site-header .nav-links a {
        width: 100%;
        padding: 0 0 17px;
        border-bottom: 1px solid var(--line);
        font: 600 26px "Oswald";
        letter-spacing: 1px;
    }
    .bf-landing .site-header .nav-links a.active {
        color: var(--accent);
    }
    .bf-landing .site-header .nav-links .active:after {
        left: auto;
        right: 0;
        top: 11px;
        width: 5px;
        height: 5px;
    }
    .bf-landing .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99;
        border: 0;
        padding: 0;
        background: rgba(120, 60, 8, 0.72);
        -webkit-backdrop-filter: blur(5px);
                backdrop-filter: blur(5px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
    }
    .bf-landing .nav-overlay.open {
        opacity: 1;
        visibility: visible;
    }
    .bf-landing .menu-toggle span {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .bf-landing .menu-toggle.open span:first-child {
        transform: translateY(4px) rotate(45deg);
    }
    .bf-landing .menu-toggle.open span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }
    .bf-landing .page-hero {
        min-height: 650px;
        height: 82vh;
        padding: 125px 24px 65px;
    }
    .bf-landing .page-hero h1 {
        font-size: 60px;
    }
    .bf-landing .editorial {
        padding: 85px 24px;
    }
    .bf-landing .editorial blockquote {
        font-size: 22px;
    }
    .bf-landing .values {
        padding: 0 18px 75px;
    }
    .bf-landing .values article {
        padding: 30px;
        min-height: 220px;
    }
    .bf-landing .image-statement > img {
        height: 360px;
    }
    .bf-landing .image-statement > div {
        padding: 70px 24px;
    }
    .bf-landing .menu-page {
        padding: 0 24px 85px;
    }
    .bf-landing .menu-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        gap: 25px;
        margin: 0 -24px;
        padding-left: 24px;
    }
    .bf-landing .menu-tabs a {
        white-space: nowrap;
    }
    .bf-landing .menu-category {
        padding: 75px 0;
    }
    .bf-landing .category-title h2 {
        font-size: 45px;
    }
    .bf-landing .menu-feature-image {
        height: 360px;
    }
    .bf-landing .experience-grid {
        padding: 70px 24px;
    }
    .bf-landing .experience-grid article {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .bf-landing .experience-grid article > span {
        font-size: 26px;
    }
    .bf-landing .experience-grid img {
        grid-column: 1;
        height: 300px;
    }
    .bf-landing .occasions {
        padding: 75px 24px;
        grid-template-columns: 1fr;
    }
    .bf-landing .occasions h2 {
        font-size: 46px;
    }
    .bf-landing .occasions > a {
        grid-column: 1;
    }
    .bf-landing .contact-layout {
        padding: 80px 20px;
    }
    .bf-landing .contact-form-panel {
        padding: 30px 22px;
    }
    .bf-landing .contact-details h2,
    .bf-landing .contact-form-panel h2 {
        font-size: 46px;
    }
    .bf-landing .contact-map > div:last-child {
        padding: 70px 24px;
    }
    .bf-landing .map-art.large {
        min-height: 350px;
    }
    .bf-landing .reserve-image {
        min-height: 650px;
    }
    .bf-landing .reserve-image > div {
        left: 24px;
        right: 24px;
        bottom: 45px;
    }
    .bf-landing .reserve-image h1 {
        font-size: 56px;
    }
    .bf-landing .reserve-form-wrap {
        padding: 70px 24px;
    }
    .bf-landing .reserve-form-head h2 {
        font-size: 46px;
    }
    .bf-landing .form-pair {
        grid-template-columns: 1fr;
    }
    .bf-landing .reserve-contact {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .bf-landing .compact-footer .footer-bottom {
        padding: 25px 24px;
    }
}

/* Unified phone and tablet navigation overlay */
@media (max-width: 980px) {
    .bf-landing.menu-open {
        overflow: hidden;
    }
    .bf-landing .site-header {
        z-index: 100;
    }
    .bf-landing .site-header .menu-toggle {
        position: relative;
        z-index: 103;
    }
    .bf-landing .site-header .nav-links {
        display: flex;
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
        width: min(82vw, 390px);
        height: 100dvh;
        margin: 0;
        padding: 120px 36px 45px;
        gap: 25px;
        background: linear-gradient(155deg, #fffbfb, #f3d9d6 72%);
        border-left: 1px solid rgba(77, 0, 31, 0.22);
        box-shadow: -24px 0 70px rgba(0, 0, 0, 0.46);
        transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.2, 1),
            opacity 0.25s ease, visibility 0.38s;
        z-index: 102;
    }
    .bf-landing .site-header .nav-links.open {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }
    .bf-landing .site-header .nav-links:before {
        content: "MENU";
        position: absolute;
        top: 50px;
        left: 36px;
        color: var(--accent);
        font: 600 8px "DM Sans";
        letter-spacing: 3px;
    }
    .bf-landing .site-header .nav-links a {
        width: 100%;
        padding: 0 0 16px;
        border-bottom: 1px solid var(--line);
        font: 600 24px "Oswald";
        letter-spacing: 1px;
    }
    .bf-landing .site-header .nav-links .active:after {
        left: auto;
        right: 0;
        top: 10px;
    }
    .bf-landing .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99;
        border: 0;
        padding: 0;
        background: rgba(120, 60, 8, 0.72);
        -webkit-backdrop-filter: blur(5px);
                backdrop-filter: blur(5px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
    }
    .bf-landing .nav-overlay.open {
        opacity: 1;
        visibility: visible;
    }
    .bf-landing .menu-toggle span {
        transition: transform 0.3s ease;
    }
    .bf-landing .menu-toggle.open span:first-child {
        transform: translateY(4px) rotate(45deg);
    }
    .bf-landing .menu-toggle.open span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }
}

/* Small-phone refinements */
@media (max-width: 480px) {
    .bf-landing .site-header {
        padding: 0 18px;
    }
    .bf-landing .brand {
        font-size: 13px;
        letter-spacing: 1.25px;
    }
    .bf-landing .brand small {
        font-size: 6px;
        letter-spacing: 2.2px;
    }
    .bf-landing .brand-mark {
        width: 30px;
        height: 30px;
        font-size: 17px;
    }
    .bf-landing .site-header .nav-links {
        width: 88vw;
        padding: 105px 25px 35px;
    }
    .bf-landing .site-header .nav-links:before {
        left: 25px;
        top: 42px;
    }
    .bf-landing .site-header .nav-links a {
        font-size: 22px;
    }
    .bf-landing .hero {
        min-height: 680px;
        height: 100svh;
        padding: 90px 18px 70px;
        background-position: 72% center;
    }
    .bf-landing .hero h1 {
        font-size: clamp(47px, 15vw, 58px);
        letter-spacing: -0.5px;
    }
    .bf-landing .hero-copy {
        font-size: 12px;
        line-height: 1.65;
    }
    .bf-landing .hero-actions {
        width: 100%;
        gap: 9px;
    }
    .bf-landing .hero-actions .button {
        width: 100%;
        padding: 15px 17px;
    }
    .bf-landing .highlights article {
        padding: 23px 20px;
    }
    .bf-landing .story {
        padding: 80px 20px;
    }
    .bf-landing .story h2,
    .bf-landing .reservation h2 {
        font-size: 40px;
    }
    .bf-landing .signature {
        padding-left: 12px;
        padding-right: 12px;
    }
    .bf-landing .signature-copy {
        padding: 40px 18px 50px;
    }
    .bf-landing .signature-copy h2 {
        font-size: 44px;
    }
    .bf-landing .dish-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .bf-landing .dish-image {
        height: 245px;
    }
    .bf-landing .visit {
        padding-left: 12px;
        padding-right: 12px;
    }
    .bf-landing .visit-banner {
        height: 440px;
    }
    .bf-landing .visit-banner-copy {
        left: 20px;
        right: 20px;
        bottom: 28px;
    }
    .bf-landing .visit-banner-copy h2 {
        font-size: 40px;
    }
    .bf-landing .booking-panel,
    .bf-landing .hours-card {
        padding: 22px 18px;
    }
    .bf-landing .rating-card {
        padding: 20px 18px;
    }
    .bf-landing .footer-main {
        padding-left: 20px;
        padding-right: 20px;
    }
    .bf-landing .page-hero {
        min-height: 600px;
        height: 88svh;
        padding: 110px 20px 52px;
    }
    .bf-landing .page-hero h1 {
        font-size: clamp(48px, 15vw, 60px);
    }
    .bf-landing .page-hero-copy > p:last-child {
        font-size: 12px;
        line-height: 1.65;
    }
    .bf-landing .editorial {
        padding: 72px 20px;
    }
    .bf-landing .editorial h2 {
        font-size: 40px;
    }
    .bf-landing .values {
        padding-left: 12px;
        padding-right: 12px;
    }
    .bf-landing .image-statement > div {
        padding: 60px 20px;
    }
    .bf-landing .menu-page {
        padding-left: 20px;
        padding-right: 20px;
    }
    .bf-landing .menu-tabs {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
    }
    .bf-landing .menu-list article {
        gap: 12px;
    }
    .bf-landing .menu-list h3 {
        font-size: 15px;
    }
    .bf-landing .menu-list p {
        font-size: 10px;
        line-height: 1.55;
    }
    .bf-landing .experience-grid {
        padding-left: 20px;
        padding-right: 20px;
    }
    .bf-landing .experience-grid h2 {
        font-size: 38px;
    }
    .bf-landing .occasions {
        padding-left: 20px;
        padding-right: 20px;
    }
    .bf-landing .contact-layout {
        padding: 65px 14px;
    }
    .bf-landing .contact-form-panel {
        padding: 28px 18px;
    }
    .bf-landing .contact-row {
        grid-template-columns: 30px 1fr;
        gap: 14px;
    }
    .bf-landing .reserve-image {
        min-height: 590px;
    }
    .bf-landing .reserve-image > div {
        left: 20px;
        right: 20px;
        bottom: 35px;
    }
    .bf-landing .reserve-image h1 {
        font-size: 48px;
    }
    .bf-landing .reserve-form-wrap {
        padding: 60px 20px;
    }
    .bf-landing .button {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
    .bf-landing .footer-bottom {
        font-size: 7px;
    }
}

/* Keep the off-canvas drawer outside document flow */
@media (max-width: 980px) {
    .bf-landing .site-header .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: none;
        will-change: transform;
        transform: translate3d(105%, 0, 0);
    }
    .bf-landing .site-header .nav-links.open {
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
    }
    .bf-landing .nav-overlay {
        touch-action: none;
    }
    .bf-landing .nav-overlay:not(.open) {
        pointer-events: none;
    }
}
.bf-landing,
.bf-landing,
.bf-landing main,
.bf-landing .site-footer {
    overflow-x: hidden;
    overflow-x: clip;
}
.bf-landing .form-alert {
    padding: 14px 16px;
    margin: 0 0 22px;
    border: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.6;
}
.bf-landing .form-alert.success {
    border-color: rgba(77, 0, 31, 0.55);
    color: var(--accent);
    background: rgba(77, 0, 31, 0.07);
}
.bf-landing .form-alert.error {
    border-color: rgba(193, 88, 68, 0.55);
    color: #7a1d10;
    background: rgba(193, 88, 68, 0.08);
}
.bf-landing .form-alert ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

/* Cinematic luxury experience */
.bf-landing {
    --lux-accent: #4d001f;
    --lux-base: #fff4f3;
    --lux-panel: #fff4f3;
    --lux-soft: #fffbfb;
    --serif: "Cormorant Garamond", serif;
    background: var(--bloom) var(--lux-base);
    background-attachment: fixed;
    cursor: auto;
}
.bf-landing:after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.bf-landing h1,
.bf-landing h2,
.bf-landing .page-hero h1 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.035em;
}
.bf-landing .preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: #f3d9d6;
}
.bf-landing .preloader-curtain {
    position: absolute;
    inset: 0;
    background: #fff4f3;
}
.bf-landing .preloader-brand {
    position: relative;
    z-index: 1;
    text-align: center;
}
.bf-landing .preloader-mark {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border: 1px solid var(--lux-accent);
    color: var(--lux-accent);
    font: 600 34px var(--serif);
    transform: rotate(45deg);
}
.bf-landing .preloader-brand p {
    font: 600 18px var(--serif);
    letter-spacing: 5px;
}
.bf-landing .preloader-brand p b {
    color: var(--lux-accent);
}
.bf-landing .preloader-brand i {
    display: block;
    width: 180px;
    height: 1px;
    margin: 20px auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--lux-accent),
        transparent
    );
    transform-origin: left;
}
.bf-landing .is-loading {
    overflow: hidden;
}
.bf-landing .page-transition {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    background: #fff4f3;
    transform: scaleX(0);
}
.bf-landing .ambient-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.bf-landing .ambient-layer i {
    position: absolute;
    width: 36vw;
    height: 36vw;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.06;
    background: var(--lux-accent);
}
.bf-landing .ambient-layer i:nth-child(1) {
    left: -10%;
    top: 8%;
}
.bf-landing .ambient-layer i:nth-child(2) {
    right: -12%;
    top: 42%;
}
.bf-landing .ambient-layer i:nth-child(3) {
    left: 30%;
    bottom: -22%;
}
.bf-landing .ambient-layer b,
.bf-landing .particle-field b {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--lux-accent);
    opacity: 0.18;
}
.bf-landing .site-header {
    position: fixed;
    transition: height 0.45s ease, background 0.45s ease, transform 0.45s ease,
        border-color 0.45s ease;
}
.bf-landing .site-header.scrolled {
    height: 70px;
    background: rgba(255, 244, 243, 0.72);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border-color: rgba(77, 0, 31, 0.13);
}
.bf-landing .site-header.scrolled .brand {
    transform: scale(0.92);
    transform-origin: left;
}
.bf-landing .site-header .brand {
    transition: transform 0.4s ease;
}
.bf-landing .site-header.nav-hidden {
    transform: translateY(-100%);
}
.bf-landing .nav-links a:before,
.bf-landing .footer-links a:before,
.bf-landing .text-link:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    background: var(--lux-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-landing .nav-links a:hover:before,
.bf-landing .footer-links a:hover:before,
.bf-landing .text-link:hover:before {
    transform: scaleX(1);
    transform-origin: left;
}
.bf-landing .footer-links a,
.bf-landing .text-link {
    position: relative;
}
.bf-landing .cinematic-hero {
    background: none;
    overflow: hidden;
    isolation: isolate;
}
.bf-landing .hero-media {
    position: absolute;
    inset: -2.5%;
    z-index: -2;
    overflow: hidden;
    animation: heroImageDrift 14s ease-in-out 4.2s infinite alternate;
    transform-origin: center;
    will-change: transform;
}
.bf-landing .hero-media img {
    width: 100%;
    height: 112%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    will-change: transform;
}
@keyframes heroImageDrift {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.025) translate3d(-0.6%, -0.4%, 0);
    }
    100% {
        transform: scale(1.045) translate3d(0.7%, 0.45%, 0);
    }
}
.bf-landing .smoke-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.bf-landing .smoke-field i {
    position: absolute;
    bottom: 10%;
    right: 15%;
    width: 260px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.13),
        transparent 66%
    );
    filter: blur(32px);
    opacity: 0.22;
    animation: smokeDrift 8s ease-in-out infinite;
}
.bf-landing .smoke-field i:nth-child(2) {
    right: 29%;
    bottom: 3%;
    transform: scale(0.65);
    animation-delay: -3s;
}
.bf-landing .smoke-field i:nth-child(3) {
    right: 5%;
    bottom: 18%;
    transform: scale(0.48);
    animation-delay: -5s;
}
@keyframes smokeDrift {
    0%,
    100% {
        transform: translate3d(0, 25px, 0) scale(0.9);
        opacity: 0.08;
    }
    50% {
        transform: translate3d(-25px, -55px, 0) scale(1.14);
        opacity: 0.22;
    }
}
.bf-landing .hero-content {
    will-change: transform;
}
.bf-landing .hero h1 .char {
    display: inline-block;
    will-change: transform;
}
.bf-landing .cinematic-scroll {
    position: absolute;
    z-index: 2;
    left: 8vw;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #5c4010;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.bf-landing .cinematic-scroll i {
    width: 54px;
    height: 1px;
    background: var(--lux-accent);
    animation: scrollLine 1.8s ease-in-out infinite;
    transform-origin: left;
}
@keyframes scrollLine {
    0%,
    100% {
        transform: scaleX(0.25);
        opacity: 0.4;
    }
    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}
.bf-landing .button {
    position: relative;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s,
        border-color 0.45s;
}
.bf-landing .button:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 42px rgba(77, 0, 31, 0.18);
}
.bf-landing .button-gold {
    background: linear-gradient(120deg, #2e0012, #75002f, #2e0012);
    background-size: 200% 100%;
    animation: goldShift 5s ease infinite;
}
@keyframes goldShift {
    50% {
        background-position: 100% 0;
    }
}
.bf-landing .button .ripple,
.bf-landing .filter-row button .ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 0.65s ease-out;
    pointer-events: none;
}
@keyframes ripple {
    to {
        transform: translate(-50%, -50%) scale(18);
        opacity: 0;
    }
}
.bf-landing .cinematic-about {
    padding: 145px 8vw;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 9vw;
    align-items: center;
    background: radial-gradient(
        circle at 15% 40%,
        rgba(77, 0, 31, 0.07),
        transparent 32%
    );
}
.bf-landing .about-visual {
    position: relative;
    height: 680px;
    overflow: hidden;
}
.bf-landing .about-visual img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.bf-landing .orbit-mark {
    position: absolute;
    right: -48px;
    top: -48px;
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(77, 0, 31, 0.4);
    border-radius: 50%;
    background: #fff4f3;
    color: var(--lux-accent);
    font: 600 8px var(--serif);
    letter-spacing: 2px;
}
.bf-landing .about-copy h2,
.bf-landing .section-head h2,
.bf-landing .chef-copy h2,
.bf-landing .testimonials h2 {
    font-size: clamp(56px, 6vw, 88px);
}
.bf-landing .about-copy > p {
    color: var(--muted);
    line-height: 1.9;
    max-width: 540px;
}
.bf-landing .text-link {
    display: inline-flex;
    margin-top: 28px;
    color: var(--lux-accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
}
.bf-landing .premium-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.45s, box-shadow 0.45s;
}
.bf-landing .premium-card:hover {
    transform: translateY(-10px);
    border-color: rgba(77, 0, 31, 0.65);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(77, 0, 31, 0.08);
}
.bf-landing .premium-card .dish-image img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-landing .premium-card:hover .dish-image img {
    transform: scale(1.09);
}
.bf-landing .card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent 70%);
    opacity: 0;
    transition: opacity 0.45s;
}
.bf-landing .card-overlay a {
    transform: translateY(20px);
    transition: transform 0.45s;
    color: var(--lux-accent);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.bf-landing .premium-card:hover .card-overlay {
    opacity: 1;
}
.bf-landing .premium-card:hover .card-overlay a {
    transform: translateY(0);
}
.bf-landing [data-price] {
    transition: transform 0.4s, color 0.4s;
}
.bf-landing .premium-card:hover [data-price] {
    transform: scale(1.08);
    color: #75002f;
}
.bf-landing .interactive-menu,
.bf-landing .gallery-section,
.bf-landing .testimonials {
    padding: var(--section-gap) 8vw;
}
.bf-landing .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 65px;
}
.bf-landing .filter-row {
    display: flex;
    gap: 10px;
    margin-bottom: 38px;
    flex-wrap: wrap;
}
.bf-landing .filter-row button {
    position: relative;
    overflow: hidden;
    padding: 12px 19px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font: 600 8px "DM Sans";
    text-transform: uppercase;
    letter-spacing: 1.7px;
    cursor: pointer;
    transition: 0.35s;
}
.bf-landing .filter-row button:hover,
.bf-landing .filter-row button.active {
    color: #ffffff;
    background: var(--lux-accent);
    border-color: var(--lux-accent);
}
.bf-landing .filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.bf-landing .filter-grid article {
    position: relative;
    height: 510px;
    overflow: hidden;
}
.bf-landing .filter-grid img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s;
}
.bf-landing .filter-grid article:hover img {
    transform: scale(1.08) rotate(0.75deg);
    filter: brightness(1.1);
}
.bf-landing .filter-grid article > div {
    position: absolute;
    inset: auto 0 0;
    padding: 65px 25px 25px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    display: grid;
    grid-template-columns: 1fr auto;
}
.bf-landing .filter-grid h3 {
    font: 600 24px var(--serif);
    margin: 0;
}
.bf-landing .filter-grid p {
    grid-column: 1;
    color: var(--muted);
    font-size: 10px;
}
.bf-landing .filter-grid span {
    grid-column: 2;
    grid-row: 1/3;
    color: var(--lux-accent);
    align-self: center;
    font: 600 16px var(--serif);
}
.bf-landing .chef-section {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    min-height: 760px;
    background: #fff4f3;
}
.bf-landing .chef-portrait {
    height: 760px;
    overflow: hidden;
}
.bf-landing .chef-portrait img {
    width: 100%;
    height: 120%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 65% center;
       object-position: 65% center;
}
.bf-landing .chef-copy {
    padding: 9vw 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.bf-landing .chef-copy blockquote {
    font: 500 27px/1.55 var(--serif);
    margin: 25px 0;
    color: #4a3212;
}
.bf-landing .signature-script {
    font: italic 500 56px var(--serif);
    color: var(--lux-accent);
    transform: rotate(-7deg);
    margin: 10px 0 8px;
    position: relative;
}
.bf-landing .signature-script:after {
    content: "";
    position: absolute;
    left: -8px;
    right: -10px;
    bottom: 5px;
    height: 1px;
    background: var(--lux-accent);
    transform-origin: left;
    animation: signatureDraw 3s ease-in-out infinite;
}
@keyframes signatureDraw {
    0%,
    20% {
        transform: scaleX(0);
    }
    60%,
    100% {
        transform: scaleX(1);
    }
}
.bf-landing .masonry-gallery {
    -moz-columns: 2;
         columns: 2;
    -moz-column-gap: 18px;
         column-gap: 18px;
}
.bf-landing .masonry-gallery figure {
    position: relative;
    margin: 0 0 18px;
    overflow: hidden;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
}
.bf-landing .masonry-gallery figure:nth-child(2),
.bf-landing .masonry-gallery figure:nth-child(3) {
    height: 420px;
}
.bf-landing .masonry-gallery figure:nth-child(1),
.bf-landing .masonry-gallery figure:nth-child(4) {
    height: 610px;
}
.bf-landing .masonry-gallery img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s;
}
.bf-landing .masonry-gallery figcaption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 28px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), transparent 55%);
    opacity: 0;
    color: #fff;
    font: 600 12px var(--serif);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: opacity 0.45s;
}
.bf-landing .masonry-gallery figcaption span {
    font-size: 22px;
    transition: transform 0.45s;
}
.bf-landing .masonry-gallery figure:hover img {
    transform: scale(1.07);
    filter: brightness(1.1);
}
.bf-landing .masonry-gallery figure:hover figcaption {
    opacity: 1;
}
.bf-landing .masonry-gallery figure:hover figcaption span {
    transform: rotate(45deg);
}
.bf-landing .stats-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 105px 8vw;
    background: #fff4f3;
    border-block: 1px solid var(--line);
}
.bf-landing .stats-section article {
    position: relative;
    text-align: center;
    border-right: 1px solid var(--line);
}
.bf-landing .stats-section article:last-child {
    border: 0;
}
.bf-landing .stats-section strong {
    display: block;
    font: 600 clamp(58px, 7vw, 94px) / 1 var(--serif);
    color: var(--lux-accent);
}
.bf-landing .stats-section span {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted);
}
.bf-landing .stats-section i {
    display: block;
    width: 50%;
    height: 1px;
    margin: 24px auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--lux-accent),
        transparent
    );
    transform-origin: center;
}
.bf-landing .testimonials {
    text-align: center;
    background: radial-gradient(
        circle,
        rgba(77, 0, 31, 0.07),
        transparent 48%
    );
}
.bf-landing .testimonials .section-head {
    display: block;
}
.bf-landing .testimonials .eyebrow {
    justify-content: center;
}
.bf-landing .testimonial-track {
    position: relative;
    max-width: 880px;
    min-height: 270px;
    margin: auto;
}
.bf-landing .testimonial-track article {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
}
.bf-landing .testimonial-track article.active {
    visibility: visible;
    opacity: 1;
}
.bf-landing .testimonial-track blockquote {
    font: 500 clamp(28px, 4vw, 48px) / 1.45 var(--serif);
    margin: 18px 0;
}
.bf-landing .testimonial-track p {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.bf-landing .testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
}
.bf-landing .testimonial-dots button {
    width: 28px;
    height: 2px;
    padding: 0;
    border: 0;
    background: #fffbfb;
    cursor: pointer;
    transition: width 0.35s, background 0.35s;
}
.bf-landing .testimonial-dots button.active {
    width: 55px;
    background: var(--lux-accent);
}
.bf-landing .cinematic-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.bf-landing .cinematic-cta:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        circle at 50% 120%,
        rgba(77, 0, 31, 0.18),
        transparent 55%
    );
}
.bf-landing .particle-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.bf-landing .cinematic-cta .button {
    margin-top: 25px;
}
.bf-landing .form-alert + form input:focus,
.bf-landing .premium-form input:focus,
.bf-landing input:focus,
.bf-landing select:focus,
.bf-landing textarea:focus {
    border-color: var(--lux-accent);
    outline: 0;
    box-shadow: 0 8px 18px -14px rgba(77, 0, 31, 0.8);
}
@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 980px) {
    .bf-landing .cinematic-about,
    .bf-landing .chef-section {
        grid-template-columns: 1fr;
    }
    .bf-landing .about-visual {
        height: 520px;
    }
    .bf-landing .chef-portrait {
        height: 560px;
    }
    .bf-landing .chef-copy {
        padding: 90px 7vw;
    }
    .bf-landing .filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .bf-landing .filter-grid article:last-child {
        grid-column: 1/-1;
    }
    .bf-landing .stats-section {
        grid-template-columns: 1fr 1fr;
        gap: 45px 0;
    }
    .bf-landing .stats-section article:nth-child(2) {
        border: 0;
    }
    .bf-landing .masonry-gallery figure:nth-child(n) {
        height: 430px;
    }
}
@media (max-width: 620px) {
    .bf-landing .preloader-mark {
        width: 58px;
        height: 58px;
    }
    .bf-landing .cinematic-scroll {
        left: 20px;
    }
    .bf-landing .cinematic-about,
    .bf-landing .interactive-menu,
    .bf-landing .gallery-section,
    .bf-landing .testimonials {
        padding: var(--section-gap) 20px;
    }
    .bf-landing .about-visual {
        height: 420px;
    }
    .bf-landing .about-copy {
        padding-top: 55px;
    }
    .bf-landing .about-copy h2,
    .bf-landing .section-head h2,
    .bf-landing .chef-copy h2,
    .bf-landing .testimonials h2 {
        font-size: 46px;
    }
    .bf-landing .section-head {
        margin-bottom: 40px;
    }
    .bf-landing .filter-grid {
        grid-template-columns: 1fr;
    }
    .bf-landing .filter-grid article,
    .bf-landing .filter-grid article:last-child {
        grid-column: 1;
        height: 420px;
    }
    .bf-landing .chef-portrait {
        height: 430px;
    }
    .bf-landing .chef-copy {
        padding: 75px 20px;
    }
    .bf-landing .chef-copy blockquote {
        font-size: 23px;
    }
    .bf-landing .masonry-gallery {
        -moz-columns: 1;
             columns: 1;
    }
    .bf-landing .masonry-gallery figure:nth-child(n) {
        height: 390px;
    }
    .bf-landing .stats-section {
        padding: 75px 20px;
        gap: 35px 0;
    }
    .bf-landing .stats-section strong {
        font-size: 58px;
    }
    .bf-landing .testimonial-track {
        min-height: 330px;
    }
    .bf-landing .testimonial-track blockquote {
        font-size: 27px;
    }
    .bf-landing .site-header.scrolled {
        height: 64px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bf-landing {
        scroll-behavior: auto !important;
    }
    .bf-landing, .bf-landing *,
    .bf-landing *:before,
    .bf-landing *:after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .bf-landing .image-reveal {
        clip-path: none !important;
    }
    .bf-landing .site-header {
        transform: none !important;
    }
}
.bf-landing .premium-form label,
.bf-landing .contact-form-panel label {
    transition: color 0.35s, transform 0.35s;
}
.bf-landing .premium-form label:focus-within,
.bf-landing .contact-form-panel label:focus-within {
    color: var(--lux-accent);
    transform: translateY(-2px);
}
.bf-landing .socials a {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s,
        box-shadow 0.35s;
}
.bf-landing .socials a:hover {
    transform: translateY(-4px) rotate(8deg) scale(1.1);
    color: var(--lux-accent);
    box-shadow: 0 0 20px rgba(77, 0, 31, 0.18);
}
.bf-landing .testimonial-track article.active {
    animation: testimonialFloat 4.5s ease-in-out infinite;
}
@keyframes testimonialFloat {
    50% {
        transform: translateY(-7px);
    }
}

        


            /* Landing page overrides */
            .bf-landing .brand-logo { display: block; }
            .bf-landing .category-list {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 18px;
                max-width: 1100px;
                margin: 0 auto;
            }
            .bf-landing .category-card {
                position: relative;
                height: 220px;
                overflow: hidden;
                border: 1px solid var(--line);
                border-radius: 6px;
                background: #fffbfb;
            }
            .bf-landing .category-card img {
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                   object-fit: cover;
                transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .bf-landing .category-card:hover img {
                transform: scale(1.07);
            }
            .bf-landing .category-card::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(transparent 38%, rgba(120, 60, 8, 0.9));
            }
            .bf-landing .category-card-name {
                position: absolute;
                left: 18px;
                right: 18px;
                bottom: 16px;
                z-index: 1;
                font-family: "Oswald", sans-serif;
                text-transform: uppercase;
                letter-spacing: 1.4px;
                font-size: 15px;
                line-height: 1.2;
                color: var(--heading);
            }
            @media (max-width: 900px) {
                .bf-landing .category-list {
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            @media (max-width: 620px) {
                .bf-landing .category-list {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 12px;
                }
                .bf-landing .category-card {
                    height: 165px;
                }
            }
            .bf-landing .menu-cta {
                text-align: center;
                margin-top: 54px;
            }
        


/* ============================================================
   BOLD TWO-TONE DESIGN LAYER
   Amber field + crimson panel, heavy condensed display type.
   Loaded last so it overrides the cinematic base styles.
   ============================================================ */
.bf-landing {
    --display: "Anton", "Oswald", Impact, sans-serif;
    --script: "Kaushan Script", cursive;
    --body: "DM Sans", system-ui, sans-serif;
    --white: #ffffff;
    background: linear-gradient(160deg, #fff4f3 0%, #fff4f3 42%, #f3d9d6 100%)
        var(--ink);
    background-attachment: fixed;
    font-family: var(--body);
}

/* Heavy condensed display type everywhere */
.bf-landing h1,
.bf-landing h2,
.bf-landing h3,
.bf-landing .page-hero h1,
.bf-landing .brand,
.bf-landing .bf-title,
.bf-landing .section-head h2 {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.005em;
}
.bf-landing h1 em,
.bf-landing h2 em,
.bf-landing h3 em,
.bf-landing .bf-title em {
    font-style: normal;
    color: var(--accent);
}

/* Reusable halftone dot texture */
.bf-landing .bf-dots {
    position: absolute;
    z-index: 1;
    width: 190px;
    height: 190px;
    pointer-events: none;
    background-image: radial-gradient(currentColor 1.7px, transparent 1.8px);
    background-size: 13px 13px;
    opacity: 0.5;
}
.bf-landing .bf-dots-bl {
    left: 2vw;
    bottom: 8%;
    color: var(--accent);
}
.bf-landing .bf-dots-tr {
    right: 3vw;
    top: 12%;
    color: var(--ink);
    opacity: 0.35;
}

/* ---------------- Header ---------------- */
.bf-landing .site-header {
    height: 104px;
    gap: 24px;
    border-bottom: 0;
    padding: 0 4vw;
}
.bf-landing .site-header.scrolled {
    background: rgba(255, 244, 243, 0.92);
    -webkit-backdrop-filter: blur(9px);
            backdrop-filter: blur(9px);
    box-shadow: 0 10px 34px rgba(120, 60, 8, 0.16);
}
.bf-landing .brand {
    font-family: var(--display);
    font-size: 27px;
    letter-spacing: 0.02em;
    color: var(--heading);
    gap: 11px;
}
.bf-landing .brand small {
    font-family: var(--script);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
    margin-top: 2px;
}
.bf-landing .nav-links {
    margin-left: auto;
    margin-right: auto;
    gap: 34px;
}
.bf-landing .nav-links a {
    position: relative;
    font-family: var(--body);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--heading);
}
.bf-landing .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 2.5px;
    background: var(--accent);
    transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-landing .nav-links a:hover::after,
.bf-landing .nav-links a.active::after {
    right: 0;
}
.bf-landing .nav-links a.active {
    color: var(--accent);
}
/* TRACK ORDER pill — sits over the crimson panel */
.bf-landing .reserve-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: 0;
    padding: 13px 26px;
    border: 1.6px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    background: transparent;
    color: var(--white);
    font-family: var(--body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transition: background 0.3s, color 0.3s;
}
.bf-landing .reserve-link:hover {
    background: var(--white);
    color: var(--accent);
}
/* The outlined pill only has contrast while it sits on the crimson panel.
   Once the header gets its amber scrolled background — or the panel drops
   below the copy on narrow screens — fill it so it stays readable. */
.bf-landing .site-header.scrolled .reserve-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}
.bf-landing .site-header.scrolled .reserve-link:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--white);
}
@media (max-width: 860px) {
    .bf-landing .reserve-link {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--white);
    }
}
.bf-landing .bf-scooter {
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: var(--scooter) center/contain no-repeat;
    mask: var(--scooter) center/contain no-repeat;
}
.bf-landing {
    --scooter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='17.5' r='3.5'/%3E%3Ccircle cx='18.5' cy='17.5' r='3.5'/%3E%3Cpath d='M5.5 17.5 9 8h5l3.5 9.5M9 8 8 5H6'/%3E%3C/svg%3E");
}
.bf-landing .menu-toggle span {
    background: var(--heading);
}

/* ---------------- Hero ---------------- */
.bf-landing .bf-hero {
    position: relative;
    display: block;
    min-height: 100vh;
    padding: 150px 0 120px;
    overflow: hidden;
    background: transparent;
}
/* Kill the cinematic full-bleed image treatment */
.bf-landing .bf-hero .hero-shade,
.bf-landing .bf-hero .smoke-field,
.bf-landing .bf-hero .hero-overlay {
    display: none;
}
.bf-landing .bf-crimson {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    background: var(--accent);
    border-bottom-left-radius: 120px;
}
.bf-landing .bf-crimson::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.16) 1.6px,
        transparent 1.7px
    );
    background-size: 14px 14px;
    -webkit-mask: linear-gradient(215deg, #000 0 24%, transparent 46%);
    mask: linear-gradient(215deg, #000 0 24%, transparent 46%);
}

.bf-landing .bf-hero-copy {
    position: relative;
    z-index: 3;
    width: min(50%, 620px);
    margin-left: 5vw;
}

/* Slanted "HOT & FRESH" badge */
.bf-landing .bf-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 30px;
    padding: 11px 20px;
    background: var(--accent);
    color: var(--white);
    font-family: var(--body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: skewX(-11deg);
    clip-path: polygon(
        2% 0,
        100% 4%,
        98% 100%,
        0 96%
    );
}
.bf-landing .bf-badge > * {
    transform: skewX(11deg);
}
.bf-landing .bf-flame {
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--flame) center/contain no-repeat;
    mask: var(--flame) center/contain no-repeat;
}
.bf-landing {
    --flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2s5 4.5 5 9a5 5 0 0 1-10 0c0-1.4.6-2.7 1.3-3.7C8.6 8.7 9 10 10 10c0-3 2-5.5 2-8Z'/%3E%3Cpath d='M12 22a6 6 0 0 0 6-6c0-1-.3-2-.8-3-.4 3-2.2 4.4-3.4 4.4.5-2-1.8-4.4-1.8-4.4s-4 3-4 6a4 4 0 0 0 4 3Z'/%3E%3C/svg%3E");
}
/* three little speed rays beside the badge */
.bf-landing .bf-rays {
    position: absolute;
    left: calc(100% + 18px);
    top: 50%;
    width: 34px;
    height: 20px;
    transform: translateY(-50%) skewX(11deg);
    background: linear-gradient(var(--accent), var(--accent)) left 0 top 2px /
            34px 2.5px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left 7px top 9px / 27px
            2.5px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left 14px top 16px / 20px
            2.5px no-repeat;
}
.bf-landing .bf-badge {
    position: relative;
}

.bf-landing .bf-title {
    margin: 0;
    font-size: clamp(46px, 7.1vw, 104px);
    line-height: 0.92;
    letter-spacing: -0.005em;
    color: var(--heading);
}
.bf-landing .bf-title .char {
    display: inline-block;
}
.bf-landing .bf-script {
    margin: 22px 0 20px;
    font-family: var(--script);
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.1;
    color: var(--accent);
    text-transform: none;
}
.bf-landing .bf-copy {
    max-width: 400px;
    margin: 0 0 38px;
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
}

/* CTA row */
.bf-landing .bf-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.bf-landing .bf-btn {
    padding: 19px 40px;
    border: 0;
    border-radius: 2px;
    background: var(--accent);
    color: var(--white);
    font-family: var(--body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 16px 34px rgba(77, 0, 31, 0.32);
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.bf-landing .bf-btn:hover {
    background: var(--accent-deep);
    box-shadow: 0 20px 42px rgba(46, 0, 18, 0.4);
}
.bf-landing .bf-watch {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--heading);
    font-family: var(--body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.bf-landing .bf-watch i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 10px 24px rgba(77, 0, 31, 0.34);
    transition: transform 0.3s;
}
.bf-landing .bf-watch i::after {
    content: "";
    margin-left: 3px;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--white);
}
.bf-landing .bf-watch span {
    border-bottom: 2px dotted rgba(74, 50, 18, 0.5);
    padding-bottom: 3px;
}
.bf-landing .bf-watch:hover i {
    transform: scale(1.09);
}

/* Circular product disc — a round crop reads as a cut-out */
.bf-landing .bf-art {
    position: absolute;
    z-index: 2;
    /* Anchored from the right, offset far enough to clear the
       OUR SPECIAL rail (right: 3.4vw + 186px wide). */
    right: calc(3.4vw + 215px);
    top: 50%;
    transform: translateY(-50%);
    width: min(38vw, 520px);
    aspect-ratio: 1;
}
.bf-landing .bf-hero .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 9px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 90px rgba(90, 20, 4, 0.42);
    /* The reference spun this disc with `animation: bfSpin 46s linear
       infinite`. Rotation removed on request, along with the now-unused
       bfSpin keyframes and the prefers-reduced-motion override that existed
       only to switch it off.

       `none` rather than simply deleting the declaration: the less specific
       `.bf-landing .hero-media` rule above carries `heroImageDrift` (a slow
       zoom/pan). The spin had been masking it, so dropping the line outright
       would start the disc drifting — motion that was never visible here. */
    animation: none;
}
.bf-landing .bf-hero .hero-media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* Right rail on the crimson panel */
.bf-landing .bf-rail {
    position: absolute;
    z-index: 3;
    right: 3.4vw;
    top: 50%;
    transform: translateY(-50%);
    width: 186px;
    text-align: left;
}
.bf-landing .bf-tag {
    display: inline-block;
    margin-bottom: 20px;
    padding: 7px 15px;
    background: var(--panel-soft);
    color: var(--accent-deep);
    font-family: var(--body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transform: skewX(-11deg);
}
.bf-landing .bf-rail-num {
    display: block;
    font-family: var(--display);
    font-size: 52px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
}
.bf-landing .bf-rail-title {
    margin: 6px 0 12px;
    font-size: 27px;
    line-height: 1.05;
    color: var(--white);
}
.bf-landing .bf-rail-copy {
    margin: 0;
    font-family: var(--body);
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.bf-landing .bf-hero .cinematic-scroll {
    color: var(--muted);
}
.bf-landing .bf-hero .cinematic-scroll i {
    background: var(--accent);
}

/* ---------------- Feature strip ---------------- */
.bf-landing .bf-features {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1320px;
    margin: -34px auto 0;
    padding: 0 4vw 70px;
    background: transparent;
    border: 0;
}
.bf-landing .bf-features article {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 26px;
    border: 0;
    border-right: 1px solid rgba(120, 60, 8, 0.24);
    background: none;
}
.bf-landing .bf-features article:last-child {
    border-right: 0;
}
.bf-landing .bf-ficon {
    display: grid;
    place-items: center;
    flex: none;
    width: 54px;
    height: 54px;
    border: 1.6px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    transition: background 0.3s, color 0.3s;
}
.bf-landing .bf-ficon svg {
    width: 25px;
    height: 25px;
}
.bf-landing .bf-features article:hover .bf-ficon {
    background: var(--accent);
    color: var(--white);
}
.bf-landing .bf-features h2 {
    margin: 0 0 3px;
    font-family: var(--body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--heading);
}
.bf-landing .bf-features p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

/* ---------------- Shared section language ---------------- */
.bf-landing .eyebrow {
    font-family: var(--body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}
.bf-landing .button {
    border-radius: 2px;
    font-family: var(--body);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.bf-landing .button-gold {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}
.bf-landing .button-gold:hover {
    background: var(--accent-deep);
}
.bf-landing .button-ghost {
    background: transparent;
    border: 1.6px solid var(--accent);
    color: var(--accent);
}
.bf-landing .button-ghost:hover {
    background: var(--accent);
    color: var(--white);
}

/* Alternate amber / crimson bands down the page */
.bf-landing .cinematic-about,
.bf-landing .gallery-section,
.bf-landing .testimonials {
    background: transparent;
}
.bf-landing .interactive-menu,
.bf-landing .page-cta {
    background: var(--panel);
}
.bf-landing .chef-section,
.bf-landing .stats-section {
    background: var(--accent);
    color: var(--white);
}
.bf-landing .chef-section h2,
.bf-landing .chef-section h3,
.bf-landing .stats-section h2,
.bf-landing .stats-section h3,
.bf-landing .chef-section .text-heading {
    color: var(--white);
}
.bf-landing .chef-section p,
.bf-landing .stats-section p {
    color: rgba(255, 255, 255, 0.82);
}
.bf-landing .stats-section i {
    background: rgba(255, 255, 255, 0.28);
}
.bf-landing .stats-section [data-counter] {
    font-family: var(--display);
    color: var(--white);
}
.bf-landing .section-head h2,
.bf-landing .cinematic-about h2,
.bf-landing .interactive-menu h2,
.bf-landing .gallery-section h2,
.bf-landing .testimonials h2,
.bf-landing .page-cta h2 {
    font-size: clamp(32px, 4.4vw, 62px);
    line-height: 0.98;
    color: var(--heading);
}
.bf-landing .page-cta h2 em,
.bf-landing .cinematic-about h2 em {
    color: var(--accent);
}

/* Menu filter chips — sharp, two-tone */
.bf-landing .filter-row button {
    border-radius: 2px;
    border: 1.5px solid rgba(120, 60, 8, 0.3);
    font-family: var(--body);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.bf-landing .filter-row button:hover,
.bf-landing .filter-row button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

/* Category cards */
.bf-landing .category-card {
    border-radius: 2px;
    border: 0;
    box-shadow: 0 14px 32px rgba(120, 60, 8, 0.18);
}
.bf-landing .category-card-name {
    font-family: var(--display);
    font-size: 17px;
    color: var(--white);
}

/* Footer */
.bf-landing .site-footer {
    background: var(--accent-deep);
    color: var(--white);
}
.bf-landing .site-footer h3 {
    font-family: var(--display);
    color: var(--white);
}
.bf-landing .site-footer p,
.bf-landing .site-footer a {
    color: rgba(255, 255, 255, 0.78);
}
.bf-landing .site-footer a:hover {
    color: var(--panel-soft);
}

/* Preloader picks up the two-tone identity */
.bf-landing .preloader {
    background: var(--ink);
}
.bf-landing .preloader-curtain {
    background: var(--accent);
}
.bf-landing .preloader-brand p {
    font-family: var(--display);
    color: var(--heading);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1180px) {
    .bf-landing .bf-rail {
        display: none;
    }
    .bf-landing .bf-crimson {
        width: 38%;
    }
    /* Rail is hidden at this width, so the disc can sit fully right. */
    .bf-landing .bf-art {
        right: 4vw;
        width: min(44vw, 460px);
    }
    .bf-landing .bf-hero-copy {
        width: min(56%, 540px);
    }
}
@media (max-width: 900px) {
    .bf-landing .bf-features {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 22px;
        margin-top: 0;
    }
    .bf-landing .bf-features article:nth-child(2n) {
        border-right: 0;
    }
}
@media (max-width: 860px) {
    .bf-landing .bf-hero {
        padding: 128px 0 70px;
        text-align: center;
    }
    .bf-landing .bf-hero-copy {
        width: auto;
        margin: 0 6vw;
    }
    .bf-landing .bf-crimson {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 46%;
        border-bottom-left-radius: 0;
        border-top-left-radius: 90px;
        border-top-right-radius: 90px;
    }
    .bf-landing .bf-art {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        width: min(76vw, 400px);
        margin: 44px auto 0;
    }
    .bf-landing .bf-actions {
        justify-content: center;
    }
    .bf-landing .bf-badge {
        margin-bottom: 22px;
    }
    .bf-landing .bf-rays {
        display: none;
    }
    .bf-landing .bf-dots {
        width: 120px;
        height: 120px;
    }
    .bf-landing .nav-links {
        margin: 0;
    }
}
/* ---------------- Header (app-header replica) ----------------
   Values are the SPA header's Tailwind classes resolved: h-8 = 32px controls,
   rounded-3xl = 24px, text-sm = 14px, logo w-24/sm:w-32 = 96/128px,
   bg-white -> .menu-theme-dark #fff4f3, .text-primary #2e0012,
   .header-search-group / .dropdown-btn / .webcart -> #fff1d4 with
   rgba(120,60,8,.22) borders, .bg-primary #4d001f. */
.bf-landing .hc-header {
    position: relative;
    z-index: 20;
    background: #fff4f3;
    border-bottom: 1px solid rgba(120, 60, 8, 0.22);
}
.bf-landing .hc-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 4vw;
}
.bf-landing .hc-logo img {
    display: block;
    width: 128px;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}
.bf-landing .hc-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.bf-landing .hc-nav a {
    font-family: var(--body);
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    color: #12100d;
    transition: color 0.25s;
}
.bf-landing .hc-nav a:hover,
.bf-landing .hc-nav a.is-active {
    color: #2e0012;
}
.bf-landing .hc-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bf-landing .hc-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 208px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(120, 60, 8, 0.22);
    border-radius: 24px;
    background: #fff1d4;
    transition: border-color 0.25s;
}
.bf-landing .hc-search:focus-within {
    border-color: #4d001f;
}
.bf-landing .hc-search button {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: #12100d;
    cursor: pointer;
    font-size: 15px;
}
.bf-landing .hc-search input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    background: none;
    font-family: var(--body);
    font-size: 12px;
    color: #12100d;
}
.bf-landing .hc-search input::-moz-placeholder {
    color: #5c4010;
}
.bf-landing .hc-search input::placeholder {
    color: #5c4010;
}
/* Language switcher */
.bf-landing .hc-lang {
    position: relative;
}
.bf-landing .hc-lang-btn,
.bf-landing .hc-cart,
.bf-landing .hc-account {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 24px;
    font-family: var(--body);
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
}
.bf-landing .hc-lang-btn {
    border: 1px solid rgba(120, 60, 8, 0.22);
    background: #fff1d4;
    color: #12100d;
}
.bf-landing .hc-lang-btn img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}
.bf-landing .hc-lang-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 180px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border: 1px solid rgba(120, 60, 8, 0.22);
    border-radius: 8px;
    background: #fff1d4;
    box-shadow: 0 18px 40px rgba(120, 60, 8, 0.22);
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform 0.25s, opacity 0.25s;
}
.bf-landing .hc-lang.open .hc-lang-list {
    transform: scaleY(1);
    opacity: 1;
}
.bf-landing .hc-lang-list button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-family: var(--body);
    font-size: 14px;
    text-transform: capitalize;
    color: #12100d;
    cursor: pointer;
}
.bf-landing .hc-lang-list button:hover {
    background: rgba(77, 0, 31, 0.1);
}
.bf-landing .hc-lang-list img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}
/* Cart + account */
.bf-landing .hc-cart {
    position: relative;
    border: 1px solid rgba(77, 0, 31, 0.35);
    background: #fff1d4;
    color: #12100d;
}
.bf-landing .hc-cart-count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d92b2b;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}
.bf-landing .hc-cart-count[hidden] {
    display: none;
}
.bf-landing .hc-account {
    border: 1px solid #4d001f;
    background: #4d001f;
    color: #fff;
}
.bf-landing .hc-account:hover {
    background: #2e0012;
    border-color: #2e0012;
}
/* The header is now in normal flow, so the hero no longer needs to clear an
   absolutely-positioned one. */
.bf-landing .bf-hero {
    padding-top: 56px;
}
@media (max-width: 1023px) {
    /* Matches the app header: nav collapses, bottom bar takes over. */
    .bf-landing .hc-nav {
        display: none;
    }
    .bf-landing .hc-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 5vw;
    }
    .bf-landing .hc-logo img {
        width: 96px;
    }
    .bf-landing .hc-tools {
        gap: 8px;
    }
    .bf-landing .hc-search {
        order: 3;
        width: 100%;
    }
    .bf-landing .hc-account span,
    .bf-landing .hc-lang-btn span {
        display: none;
    }
    .bf-landing .hc-account,
    .bf-landing .hc-lang-btn,
    .bf-landing .hc-cart {
        padding: 0 10px;
    }
}
@media (max-width: 860px) {
    .bf-landing .bf-hero {
        padding-top: 34px;
    }
}

/* ---------------- Mobile bottom bar ----------------
   Deliberately matched value-for-value to the SPA's
   FrontendMobileNavBarComponent so the bar does not change when you move
   between this page and the app. Values below are that component's Tailwind
   classes resolved: py-3/px-5 = 12px/20px, rounded-t-3xl = 24px,
   bg-white overridden by .menu-theme-dark to #fff4f3, text-xs = 12px,
   icons text-base = 16px (home is text-sm = 14px), cart w-12/h-12 = 48px at
   -mt-12 = -48px on .bg-primary = #4d001f, active .text-primary = #2e0012.
   Note: its "shadow-xl-top" class has no rule anywhere, so there is no
   shadow to reproduce. */
.bf-landing .bf-tabbar {
    display: none;
}
@media (max-width: 1023px) {
    .bf-landing .bf-tabbar {
        position: fixed;
        z-index: 150;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        background: #fff4f3;
        color: #12100d;
        border-top: 1px solid rgba(120, 60, 8, 0.22);
        border-radius: 24px 24px 0 0;
    }
    .bf-landing .bf-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: inherit;
        font-family: var(--body);
        font-weight: 400;
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: capitalize;
        text-align: center;
    }
    .bf-landing .bf-tab i {
        font-size: 16px;
        line-height: 1;
    }
    .bf-landing .bf-tab-home i {
        font-size: 14px;
    }
    .bf-landing .bf-tab.is-active {
        color: #2e0012;
    }
    .bf-landing .bf-tab-cart {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 48px;
        height: 48px;
        margin-top: -48px;
        border-radius: 50%;
        background: #4d001f;
        color: #fff;
    }
    /* Keep the fixed bar from covering the end of the footer. */
    .bf-landing .site-footer {
        padding-bottom: 104px;
    }
    /* The hero scroll cue would sit under the bar on short screens. */
    .bf-landing .bf-hero .cinematic-scroll {
        display: none;
    }
}
@media (max-width: 560px) {
    .bf-landing .bf-features {
        grid-template-columns: 1fr;
    }
    .bf-landing .bf-features article {
        border-right: 0;
        justify-content: center;
    }
    .bf-landing .bf-actions {
        gap: 20px;
    }
    .bf-landing .bf-btn {
        padding: 17px 30px;
    }
}
        
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
        --primary: 77 0 31;
        /* The footer stands apart from the brand colour on purpose: it is a
           band at the foot of every page and reads better a shade lighter
           than the header it answers to. */
        --footer: 133 0 46;
        --primary-slate: 117 0 47;
        --primary-light: 245 230 236;
        /* Page surface. Same value as --ink in home-cinematic.css, so the
           rest of the site sits on the cream the home page uses. */
        --page-bg: 255 244 243;
        --client-font: 'Rubik', sans-serif;
        --admin-font: 'Public Sans', sans-serif;
    }

a,
    button,
    label,
    span{
  display: inline-block; font-style: initial;
}

input,
    select,
    textarea{
  background-color: transparent;
  font-size: 15px;
}

input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder{
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(160 163 189 / var(--tw-text-opacity, 1));
}

input::placeholder,
    select::placeholder,
    textarea::placeholder{
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(160 163 189 / var(--tw-text-opacity, 1));
}

input:focus-within,
    select:focus-within,
    textarea:focus-within{
  outline-width: 0px;
}

h1,
    h2,
    h3,
    h4,
    h5,
    h6{
  --tw-text-opacity: 1;
  color: rgb(31 31 57 / var(--tw-text-opacity, 1)); font-style: initial;
}

body{
  scroll-behavior: smooth;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
}


body.bf-home .dropdown-list body { color: #6E7191; }
.container{
  width: 100%;
}
@media (min-width: 0px){

  .container{
    max-width: 0px;
  }
}
@media (min-width: 640px){

  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){

  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){

  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){

  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){

  .container{
    max-width: 1536px;
  }
}
.container{
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
@media (min-width: 640px){

  .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.\!row{
  margin: -0.75rem;
  display: flex;
  flex-wrap: wrap;
}
.\!row:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.row{
  margin: -0.75rem;
  display: flex;
  flex-wrap: wrap;
}
.row:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.col-6{
  width: 50%;
  padding: 0.75rem;
}
.col-12{
  width: 100%;
  padding: 0.75rem;
}
.form-row{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  display: flex;
  flex-wrap: wrap;
}
.form-row:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.form-col-2{
  width: 20%;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.form-col-6{
  width: 50%;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.form-col-12{
  width: 100%;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/*===================================
              LAYOUT PART START
    ====================================*/
/* HEADER */
.db-header{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 30;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-header:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 1024px){

  .db-header{
    gap: 9rem;
  }
}
/* SIDEBAR */
.db-sidebar{
  overflow-y: auto;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-sidebar:hover::-webkit-scrollbar-thumb{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.db-sidebar::-webkit-scrollbar{
  width: 3px;
  border-radius: 1rem;
  background-color: transparent;
}
.db-sidebar{
  position: fixed;
  top: 0px;
  z-index: 39;
  height: 100vh;
  width: 260px;
  overflow-y: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
@media (min-width: 1024px){

  .db-sidebar{
    top: 4rem;
    height: calc(100vh - 64px);
  }
}
.db-sidebar:where([dir="ltr"], [dir="ltr"] *){
  left: 0px;
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0.125rem 0.375rem 0 rgb(161 172 184 / 12%);
  --tw-shadow-colored: 0 0.125rem 0.375rem 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px){

  .db-sidebar:where([dir="ltr"], [dir="ltr"] *){
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.db-sidebar:where([dir="rtl"], [dir="rtl"] *){
  right: 0px;
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0.125rem -0.375rem 0 rgb(161 172 184 / 12%);
  --tw-shadow-colored: 0 0.125rem -0.375rem 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px){

  .db-sidebar:where([dir="rtl"], [dir="rtl"] *){
    --tw-translate-x: -0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.db-sidebar.active{
  --tw-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.08);
  --tw-shadow-colored: 15px 0px 25px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px){

  .db-sidebar.active{
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
.db-sidebar.active:where([dir="ltr"], [dir="ltr"] *){
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (min-width: 1024px){

  .db-sidebar.active:where([dir="ltr"], [dir="ltr"] *){
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.db-sidebar.active:where([dir="rtl"], [dir="rtl"] *){
  --tw-translate-x: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (min-width: 1024px){

  .db-sidebar.active:where([dir="rtl"], [dir="rtl"] *){
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.db-sidebar.\!active{
  --tw-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.08);
  --tw-shadow-colored: 15px 0px 25px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px){

  .db-sidebar.\!active{
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
.db-sidebar.\!active:where([dir="ltr"], [dir="ltr"] *){
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (min-width: 1024px){

  .db-sidebar.\!active:where([dir="ltr"], [dir="ltr"] *){
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.db-sidebar.\!active:where([dir="rtl"], [dir="rtl"] *){
  --tw-translate-x: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (min-width: 1024px){

  .db-sidebar.\!active:where([dir="rtl"], [dir="rtl"] *){
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.db-sidebar-header{
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.db-sidebar-header:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 1024px){

  .db-sidebar-header{
    display: none;
  }
}
.db-sidebar-nav{
  margin-bottom: 1.5rem;
}
.db-sidebar-nav:last-child{
  margin-bottom: 0px;
}
.db-sidebar-nav-title{
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.db-sidebar-nav-item.active .db-sidebar-nav-menu{
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-sidebar-nav-item.active .db-sidebar-nav-menu > i { opacity: 1; }
}
.db-sidebar-nav-item.\!active .db-sidebar-nav-menu{
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-sidebar-nav-item.\!active .db-sidebar-nav-menu > i { opacity: 1; }
}
.db-sidebar-nav-item.router-link-active .db-sidebar-nav-menu{
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-sidebar-nav-item.router-link-active .db-sidebar-nav-menu > i { opacity: 1; }
}
.db-sidebar-nav-menu.router-link-active{
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-sidebar-nav-menu.router-link-active > i { opacity: 1; }
}
.db-sidebar-nav-menu{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: left;
  text-transform: capitalize;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-sidebar-nav-menu:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-sidebar-nav-menu:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.db-sidebar-nav-menu i{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.db-sidebar-nav-menu span{
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.5rem;
}
.db-sidebar-nav-menu span:where([dir="ltr"], [dir="ltr"] *){
  text-align: left;
}
.db-sidebar-nav-menu span:where([dir="rtl"], [dir="rtl"] *){
  text-align: right;
}
.db-sidebar-nav-menu.downarrow::after{
  font-family: 'Font Awesome 6 Free';
  font-size: 10px;
  font-weight: 700;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  --tw-content: '\f054'; content: var(--tw-content); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; transition-timing-function: linear;
}
.db-sidebar-nav-item.active .downarrow::after{
  content: var(--tw-content);
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.db-sidebar-nav-item.\!active .downarrow::after{
  content: var(--tw-content);
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.db-message-list .active{
  background-color: rgb(77 0 31 / 0.05) !important;
}
.db-message-list .\!active{
  background-color: rgb(77 0 31 / 0.05) !important;
}
.db-message-list .active h4{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-message-list .active h4 > i { opacity: 1; }
}
.db-message-list .\!active h4{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-message-list .\!active h4 > i { opacity: 1; }
}
/*===================================
              LAYOUT PART END
    ====================================*/
/*===================================
            COMPONENTS PART START
    ====================================*/
/* 76px below lg: one row of a 48px logo plus the 24px of py-3. It was 103px
       to fit a second row that no longer exists. */
.ff-header .container{
  height: 76px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
@media (min-width: 1024px){

  .ff-header .container{
    height: 74px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
.ff-header.active{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 60;
  width: 100%;
}
.ff-header.\!active{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 60;
  width: 100%;
}
#cart.\!active{
  visibility: visible;
  opacity: 1;
}
#cart.active{
  visibility: visible;
  opacity: 1;
}
#cart.\!active > div:where([dir="ltr"], [dir="ltr"] *){
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
#cart.\!active > div:where([dir="rtl"], [dir="rtl"] *){
  --tw-translate-x: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
#cart.active > div:where([dir="ltr"], [dir="ltr"] *){
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
#cart.active > div:where([dir="rtl"], [dir="rtl"] *){
  --tw-translate-x: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.fd-backdrop.\!active{
  visibility: visible;
  opacity: 1;
}
.fd-backdrop.active{
  visibility: visible;
  opacity: 1;
}
.cart-switch:checked + label{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.size-tabs .active{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
.size-tabs .\!active{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
.size-tabs .active .custom-radio-field:checked + .custom-radio-span{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
}
.size-tabs .\!active .custom-radio-field:checked + .custom-radio-span{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
}
.extra .custom-checkbox-field{
  z-index: 0;
}
.extra.active{
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1)) !important;
}
.extra.\!active{
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1)) !important;
}
.extra.active .custom-checkbox-field:checked + .custom-checkbox-icon{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.extra.\!active .custom-checkbox-field:checked + .custom-checkbox-icon{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.addon.active{
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1)) !important;
}
.addon.\!active{
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1)) !important;
}
.branch-navs .active{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.branch-navs .active:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.branch-navs .\!active{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.branch-navs .\!active:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.active-group .active{
  border-color: rgb(77 0 31 / 0.5) !important;
  background-color: rgb(77 0 31 / 0.05) !important;
}
.active-group .\!active{
  border-color: rgb(77 0 31 / 0.5) !important;
  background-color: rgb(77 0 31 / 0.05) !important;
}
.active-group .active .fa-check{
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1)) !important;
}
.active-group .\!active .fa-check{
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1)) !important;
}
.active-group .active input:checked + .custom-radio-span{
  border-width: 3px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
}
.active-group .\!active input:checked + .custom-radio-span{
  border-width: 3px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
}
.paper-link svg{
  stroke: #6E7191;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.paper-link span{
  --tw-text-opacity: 1;
  color: rgb(31 31 57 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.paper-link:hover svg,
    .paper-link:hover span{
  stroke: rgb(77 0 31 / 1);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.paper-link:hover svg > i,.ff-header .ff-nav > a
    .paper-link:hover span > i { opacity: 1; }
}
.address-btn:hover svg,
    .address-btn:hover span{
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.cookie-paper{
  visibility: hidden;
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: linear;
}
.cookie-paper.active{
  visibility: visible;
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}
.cookie-paper.\!active{
  visibility: visible;
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}
.add-btn:hover svg{
  fill: #fff;
}
.add-btn:hover span{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.info-btn:hover svg{
  fill: rgb(77 0 31 / 1);
}
#profile.\!active{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
#profile.active{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.profile-paper{
  visibility: hidden;
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.profile-paper.active{
  visibility: visible;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.profile-paper.\!active{
  visibility: visible;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.veg-navs .veg-active{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0px 8px 16px rgba(23, 31, 70, 0.08);
  --tw-shadow-colored: 0px 8px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.veg-navs .veg-active i{
  opacity: 1;
}
.veg-navs .veg-active i:where([dir="ltr"], [dir="ltr"] *){
  margin-left: 0px;
}
.veg-navs .veg-active i:where([dir="rtl"], [dir="rtl"] *){
  margin-right: 0px;
}
.menu-head-greet h2 { display: block; }
/* Utility bar above the header: address left, Call button and language
       right. Brand field so it reads as a separate strip from the white header
       below it, and slim so it costs little scroll height.

       It IS sticky - see the rule below - everywhere except the menu page,
       which overrides it back to static further down (body.bf-menu). The
       sentence that used to sit here said it was never sticky, which
       stopped being true when someone pinned it, and is worth getting
       right now the bar carries the phone number. */
.ff-topbar {
        /* Sticks at the very top. z sits one above the header's z-60 so the bar,
           and the language dropdown inside it, are never covered once the header
           goes fixed. */
        position: sticky;
        top: 0;
        z-index: 61;
        background-color: rgb(var(--primary));
        color: #ffffff;
        font-size: 12px;
        line-height: 1;
    }
.ff-topbar .container { height: 34px; }
.ff-topbar-address {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
/* only the text shrinks, so a long address ellipsises instead of pushing the
       language picker off a narrow screen */
.ff-topbar-address span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
.ff-topbar-lang {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 24px;
        padding: 0 10px;
        border-radius: 9999px;
        background-color: rgba(255, 255, 255, 0.16);
        color: #ffffff;
        font-size: 12px;
        transition: background-color .2s ease;
    }
.ff-topbar-lang:hover { background-color: rgba(255, 255, 255, 0.26); }
/* Download App pill: amber field, dark label, white disc for the icon. */
.app-download-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        height: 34px;
        padding: 0 4px 0 14px;
        border-radius: 9999px;
        background: #F0B323;
        color: #12100d;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        transition: filter .2s ease;
    }
.app-download-btn:hover { filter: brightness(0.95); }
.app-download-btn i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #ffffff;
        color: #B8860B;
        font-size: 12px;
    }
/* Store choices in the chooser dialog. */
.app-choice {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 104px;
        padding: 14px 10px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        font-size: 13px;
        font-weight: 500;
        color: #12100d;
        transition: border-color .2s ease, background-color .2s ease;
    }
.app-choice i { font-size: 22px; }
.app-choice:hover {
        border-color: rgb(var(--primary));
        background-color: rgb(var(--primary) / 0.05);
    }
/* Address line: pin, text, chevron. The text is the only part allowed to
       shrink, so a long address ellipsises instead of pushing the chevron off. */
.menu-head-address,
    .menu-head-address-add {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: 100%;
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.3;
        color: rgb(var(--primary));
    }
.menu-head-address-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
.menu-head-address-add {
        font-weight: 500;
        /* soft near-black rather than the brand red it inherited above */
        color: #333333;
    }
/* Category labels. The theme heading colour is #1F1F39, a dark navy; these
       read as black instead. Left below the .menu-category-active rules in
       specificity, so the selected tile keeps its white label. */
.menu-category-bar h3 {
        color: #000000;
    }
/* Veg / non-veg mark: a coloured square outline with a filled dot inside.
       Shown on item cards, and on the menu filter chips so the colours have a key. */
.veg-mark {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border: 1.5px solid currentColor;
        border-radius: 4px;
    }
.veg-mark::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: currentColor;
    }
.veg-mark--veg { color: #15803d; }
.veg-mark--non-veg { color: #b91c1c; }
/* Discount pill. Shared by the category cards and the category headings, so only
       the pill itself lives here - placement and text size stay with each caller. */
.offer-badge{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-weight: 600;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* The selected category is marked with a ring around its round image rather
       than by filling the tile: the tile is a rounded square, and filling it put
       a block of solid colour in a rail of pale cards.

       Two shadows, not one: the inner ring is the tile's own background, so the
       coloured ring reads as a halo sitting off the image rather than as a
       border drawn on it. With category images turned off there is no circle to
       ring, and the label alone carries the state. */
.menu-slides .menu-category-active img,
    .menu-category-pinned .menu-category-active img {
        box-shadow: 0 0 0 2px rgb(var(--page-bg)), 0 0 0 5px rgb(var(--primary));
    }
.menu-slides .menu-category-active h3,
    .menu-category-pinned .menu-category-active h3{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.menu-slides .menu-category-active h3 > i,.ff-header .ff-nav > a
    .menu-category-pinned .menu-category-active h3 > i { opacity: 1; }
}
/* Tapping a category left a box around it: the browser's own focus ring,
       plus the translucent rectangle mobile browsers flash on touch. The red
       circle is the selection mark now, so neither is wanted here.

       :focus-visible is kept, so the ring still appears for anyone moving
       through the rail with a keyboard - it is only the pointer and touch case
       that is silenced. */
.menu-category-bar button {
        -webkit-tap-highlight-color: transparent;
    }
.menu-category-bar button:focus:not(:focus-visible) {
        outline: none;
    }
.ff-header.landing-header.active{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0px 6px 32px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ff-header.landing-header.\!active{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0px 6px 32px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* PAYMENT CARD */
.payment-fieldset{
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: 1.5rem;
}
.cart-suggestions .payment-fieldset {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* A visible track is the cue that there is more to the right. Desktop hides
       overlay scrollbars by default, so without this the only hint is the last
       card being clipped. */
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--primary) / 0.45) rgba(18, 16, 13, 0.07);
}
.cart-suggestions .payment-fieldset::-webkit-scrollbar {
    height: 6px;
}
.cart-suggestions .payment-fieldset::-webkit-scrollbar-track {
    border-radius: 999px;
    background-color: rgba(18, 16, 13, 0.07);
}
.cart-suggestions .payment-fieldset::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: rgb(var(--primary) / 0.45);
}
.cart-suggestions .payment-fieldset::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--primary) / 0.7);
}
.menu-reorder-strip > .payment-fieldset {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Room for the cards' hover lift and shadow, which the scroll
       container would otherwise crop. */
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.menu-reorder-strip > .payment-fieldset::-webkit-scrollbar {
    display: none;
}
@media (min-width: 768px){

  .payment-fieldset{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.payment-label{
  position: relative;
  display: flex;
  width: 100%;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
  --tw-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0px 6px 32px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.payment-label:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.payment-label.active{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
.payment-label.\!active{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
.payment-label input{
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  accent-color: rgb(77 0 31 / 1);
}
.payment-label img{
  height: 2rem;
}
.payment-label span{
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(31 31 57 / var(--tw-text-opacity, 1));
}
/*
     | The two describe rules below hold the description to ONE line with
     | nowrap rather than line-clamp. line-clamp cannot work here: the
     | paragraph is a direct child of the card's flex column, and a flex
     | item's display is blockified - Chrome rewrites the display:-webkit-box
     | that line-clamp needs into flow-root, leaving the clamp inert while
     | still reporting itself in the computed style. The box then took its
     | height from flex-auto, so cards showed one line or two depending on
     | how much space was left over.
     |
     | nowrap raises the paragraph's minimum width to the whole sentence,
     | which is why .product-card-list-content-group carries min-w-0: without
     | it the list card, whose text sits in a flex row beside the picture,
     | would grow wider than its column instead of cutting the text.
     */
/* PRODUCT CARD GRID */
.product-card-grid{
  position: relative;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 240 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.product-card-grid:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-grid:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-card-grid-image{
  margin: 0.5rem;
  aspect-ratio: 13/9;
  width: calc(100% - 1rem);
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-card-grid-content-group{
  display: flex;
  height: 100%;
  flex-direction: column;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  padding: 0.5rem;
}
.product-card-grid-content-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .product-card-grid-content-group{
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
.product-card-grid-header-group{
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.product-card-grid-header-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-grid-title{
  width: -moz-fit-content;
  width: fit-content;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: capitalize;
}
@media (min-width: 640px){

  .product-card-grid-title{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.product-card-grid-describe{
  margin-bottom: 1rem;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1rem;
}
@media (min-width: 640px){

  .product-card-grid-describe{
    font-size: 0.75rem;
    line-height: 1.25rem;
  }
}
.product-card-grid-footer-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.product-card-grid-footer-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-grid-price-group{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.product-card-grid-price-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-grid-price-previous{
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
@media (min-width: 640px){

  .product-card-grid-price-previous{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.product-card-grid-price-current{
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
@media (min-width: 640px){

  .product-card-grid-price-current{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
.product-card-grid-cart-btn{
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.product-card-grid-cart-btn:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-grid-cart-btn:hover{
  opacity: 0.9;
}
@media (min-width: 640px){

  .product-card-grid-cart-btn{
    height: 2.25rem;
    width: 2.25rem;
  }
}
/* PRODUCT CARD LIST */
.product-card-list{
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 240 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.product-card-list:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-list:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-card-list-image{
  margin: 0.5rem;
  height: 6rem;
  width: 6rem;
  flex-shrink: 0;
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 640px){

  .product-card-list-image{
    height: 7rem;
    width: 7rem;
  }
}
.product-card-list-content-group{
  display: flex;
  height: 100%;
  width: 100%;
  min-width: 0px;
  flex-direction: column;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  padding: 0.5rem;
}
.product-card-list-content-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .product-card-list-content-group{
    padding: 0.75rem;
  }
}
.product-card-list-header-group{
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.product-card-list-header-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-list-title{
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: capitalize;
}
@media (min-width: 640px){

  .product-card-list-title{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.product-card-list-describe{
  margin-bottom: 0.5rem;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1rem;
}
@media (min-width: 640px){

  .product-card-list-describe{
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
  }
}
.product-card-list-footer-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.product-card-list-footer-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-list-price-group{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.product-card-list-price-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-list-price-current{
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
@media (min-width: 640px){

  .product-card-list-price-current{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
.product-card-list-cart-btn{
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.product-card-list-cart-btn:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.product-card-list-cart-btn:hover{
  opacity: 0.9;
}
@media (min-width: 640px){

  .product-card-list-cart-btn{
    height: 2.25rem;
    width: 2.25rem;
  }
}
/* CHAT MESSAGE */
.chat-list{
  display: flex;
  flex-direction: column-reverse;
  gap: 1.25rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.chat-list:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.chat-list.frontend{
  height: calc(100vh - 260px);
}
@media (min-width: 640px){

  .chat-list.frontend{
    height: calc(100vh - 250px);
  }
}
.chat-list.backend{
  height: 400px;
}
@media (min-width: 640px){

  .chat-list.backend{
    height: calc(100vh - 315px);
  }
}
.chat-list.frontend.change{
  height: calc(100vh - 320px);
}
@media (min-width: 640px){

  .chat-list.frontend.change{
    height: calc(100vh - 300px);
  }
}
.chat-list.backend.change{
  height: 400px;
}
@media (min-width: 640px){

  .chat-list.backend.change{
    height: calc(100vh - 380px);
  }
}
.chat-item{
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}
.chat-item:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.chat-avatar{
  margin-bottom: 1.25rem;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
}
.chat-group{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chat-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.chat-group-text{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chat-group-text:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.chat-text{
  width: -moz-fit-content;
  width: fit-content;
  max-width: 24rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(31 31 57 / var(--tw-text-opacity, 1));
}
.chat-group-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}
.chat-group-meta:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.chat-meta{
  font-size: 0.75rem;
  line-height: 1rem;
}
.chat-user{
  flex-direction: row-reverse;
}
.chat-admin .chat-text{
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(239 240 246 / var(--tw-bg-opacity, 1));
}
.chat-admin .chat-text:nth-child(odd):where([dir="ltr"], [dir="ltr"] *){
  border-bottom-left-radius: 0.25rem;
}
.chat-admin .chat-text:nth-child(even):where([dir="ltr"], [dir="ltr"] *){
  border-top-left-radius: 0.25rem;
}
.chat-admin .chat-text:nth-child(odd):where([dir="rtl"], [dir="rtl"] *){
  border-bottom-right-radius: 0.25rem;
}
.chat-admin .chat-text:nth-child(even):where([dir="rtl"], [dir="rtl"] *){
  border-top-right-radius: 0.25rem;
}
.chat-user .chat-text{
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
.chat-user .chat-text:nth-child(odd):where([dir="ltr"], [dir="ltr"] *){
  border-bottom-right-radius: 0.25rem;
}
.chat-user .chat-text:nth-child(even):where([dir="ltr"], [dir="ltr"] *){
  border-top-right-radius: 0.25rem;
}
.chat-user .chat-text:nth-child(odd):where([dir="rtl"], [dir="rtl"] *){
  border-bottom-left-radius: 0.25rem;
}
.chat-user .chat-text:nth-child(even):where([dir="rtl"], [dir="rtl"] *){
  border-top-left-radius: 0.25rem;
}
.chat-user .chat-group-text{
  align-items: flex-end;
}
.chat-user .chat-group-meta{
  flex-direction: row-reverse;
}
.chat-list::-webkit-scrollbar{
  width: 0.5rem;
  background-color: transparent;
}
.chat-list::-webkit-scrollbar-thumb{
  border-radius: 0.75rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.chat-footer{
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
}
.chat-footer:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.chat-footer-file-label{
  position: relative;
  isolation: isolate;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  flex-shrink: 0;
  cursor: pointer;
}
.chat-footer-file-input{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -10;
  height: 100%;
  width: 100%;
  opacity: 0;
}
.chat-footer-data{
  width: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 252 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.chat-footer-data-list{
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.chat-footer-data-list:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.chat-footer-data-list::-webkit-scrollbar{
  height: 0.5rem;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.chat-footer-data-list::-webkit-scrollbar-thumb{
  border-radius: 0.75rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.chat-footer-data-input{
  height: 100%;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.chat-footer-sent{
  flex-shrink: 0;
}
/* THIN SCROLL BAR */
.thin-scrolling{
  overflow-y: auto;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.thin-scrolling:hover::-webkit-scrollbar-thumb{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.thin-scrolling::-webkit-scrollbar{
  width: 3px;
  border-radius: 1rem;
  background-color: transparent;
}
/* OTHER */
.db-image{
  width: 100%;
  border-radius: 10px;
  border-width: 5px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.db-light-text{
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.025em;
}
/* ORDER STATUS */
.db-order-status.check::before{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  text-align: center;
  font-family: 'Font Awesome 6 Free';
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-content: '\f00c';
  content: var(--tw-content);
}
.db-order-status.active::before{
  content: var(--tw-content);
  border-width: 5px;
}
.db-order-status.\!active::before{
  content: var(--tw-content);
  border-width: 5px;
}
/* COMMON CLASS */
.invalid{
  --tw-border-opacity: 1 !important;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1)) !important;
}
.invalid::before{
  content: var(--tw-content) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1)) !important;
}
/* MAIN CONTENT */
.db-main{
  height: 100vh;
  overflow: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 252 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 1rem;
  padding-top: 80px;
  font-family: 'Public Sans', sans-serif;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
@media (min-width: 640px){

  .db-main{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1024px){

  .db-main{
    padding-top: 84px;
    padding-bottom: 1.25rem;
  }
}
@media (min-width: 0px) and (max-width: 767px){

  .db-main{
    padding-top: 170px;
  }
}
@media (min-width: 1024px){

  .db-main:where([dir="ltr"], [dir="ltr"] *){
    padding-left: 280px;
    padding-right: 1.25rem;
  }

  .db-main:where([dir="rtl"], [dir="rtl"] *){
    padding-right: 280px;
    padding-left: 1.25rem;
  }

  .db-main.expand:where([dir="ltr"], [dir="ltr"] *){
    padding-left: 1.25rem;
  }

  .db-main.expand:where([dir="rtl"], [dir="rtl"] *){
    padding-right: 1.25rem;
  }
}
/* BACKLDROP */
.backdrop{
  visibility: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 40;
  height: 100%;
  width: 100%;
  background-color: rgb(0 0 0 / 0.6);
  opacity: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.backdrop.active{
  visibility: visible;
  opacity: 1;
}
.backdrop.\!active{
  visibility: visible;
  opacity: 1;
}
/* BUTTON */
.db-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  text-transform: capitalize;
  --tw-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%);
  --tw-shadow-colored: 0 2px 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-btn-full{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-transform: capitalize;
  --tw-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%);
  --tw-shadow-colored: 0 2px 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-btn-full:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.xmark-btn{
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.xmark-btn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
.db-btn-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-btn-outline:hover{
  border-color: rgb(77 0 31 / 0.2);
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
.db-btn-outline i{
  font-size: 0.75rem;
  line-height: 1rem;
}
.db-btn-outline.primary{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-btn-outline.primary > i { opacity: 1; }
}
.db-btn-outline.primary:hover{
  background-color: rgb(77 0 31 / 0.1);
}
.db-btn-outline.warning{
  --tw-border-opacity: 1;
  border-color: rgb(246 166 9 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(246 166 9 / var(--tw-text-opacity, 1));
}
.db-btn-outline.warning:hover{
  background-color: rgb(246 166 9 / 0.1);
}
.db-btn-outline.success{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.db-btn-outline.success:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.db-btn-outline.danger{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.db-btn-outline.danger:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.db-btn-outline.info{
  --tw-border-opacity: 1;
  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.db-btn-outline.info:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}
.db-btn-outline.sm{
  gap: 0.25rem !important;
  border-radius: 0.25rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.db-btn-outline.sm i{
  font-size: 10px !important;
}
.db-btn-fill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: capitalize;
  --tw-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%);
  --tw-shadow-colored: 0 2px 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-btn-fill i{
  font-size: 0.75rem;
  line-height: 1rem;
}
.db-btn-fill.primary{
  background-color: rgb(77 0 31 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-btn-fill.primary > i { opacity: 1; }
}
.db-btn-fill.primary:hover{
  background-color: rgb(77 0 31 / 0.2);
}
.db-btn-fill.yellow{
  background-color: rgb(246 166 9 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(246 166 9 / var(--tw-text-opacity, 1));
}
.db-btn-fill.yellow:hover{
  background-color: rgb(246 166 9 / 0.2);
}
.db-btn-fill.purple{
  --tw-bg-opacity: 1;
  background-color: rgb(250 232 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(192 38 211 / var(--tw-text-opacity, 1));
}
.db-btn-fill.purple:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 208 254 / var(--tw-bg-opacity, 1));
}
.db-btn-fill.green{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.db-btn-fill.green:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.db-btn-fill.blue{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.db-btn-fill.blue:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.db-btn-fill.gray{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.db-btn-fill.gray:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.db-btn-fill.red{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.db-btn-fill.red:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.db-btn-fill.sm{
  gap: 0.25rem !important;
  border-radius: 0.25rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.db-btn-fill.sm i{
  font-size: 10px !important;
}
/* CARD */
.db-card{
  border-radius: 0.25rem;
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%);
  --tw-shadow-colored: 0 2px 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.db-card-body{
  padding: 1.25rem;
}
.db-card-header{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  padding: 1.25rem;
}
.db-card-header:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .db-card-header{
    flex-direction: row;
    justify-content: space-between;
  }
}
.db-card-title{
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
}

body.bf-home .dropdown-list .db-card-title { color: #6E7191; }
.db-card-filter{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.db-card-filter:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .db-card-filter{
    align-items: flex-start;
  }
}
.db-card-filter-btn{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: capitalize;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}

body.bf-home .dropdown-list .db-card-filter-btn { color: #6E7191; }
.db-card-filter-btn:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-card-filter-btn:hover{
  border-color: rgb(77 0 31 / 0.1);
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
.db-card-filter-btn i{
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-card-filter-btn i > i { opacity: 1; }
}
.db-card-filter-btn span{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-card-filter-btn span > i { opacity: 1; }
}
.db-card-filter-btn span:where([dir="ltr"], [dir="ltr"] *){
  padding-right: 0.25rem;
}
.db-card-filter-btn span:where([dir="rtl"], [dir="rtl"] *){
  padding-left: 0.25rem;
}
.db-card-filter .db-field-down-arrow{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-card-filter .db-field-down-arrow > i { opacity: 1; }
}
.db-card-filter-dropdown-list{
  position: absolute;
  top: 2.5rem;
  right: 0px;
  z-index: 20;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.db-card-filter-dropdown-menu{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-card-filter-dropdown-menu:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-card-filter-dropdown-menu:hover{
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
.db-card-filter-dropdown-menu i{
  width: 1rem;
  flex-shrink: 0;
}
.dropdown-btn i ,.table-filter-btn i,.custom-dropdown .dropdown-btn i{
        transition: transform 0.3s ease;
    }
.dropdown-btn.rotated i:last-child ,.table-filter-btn.rotated i:last-child,.custom-dropdown .dropdown-btn.rotated i{
        transform: rotate(180deg);
    }
/* BREADCRUMB */
.db-breadcrumb{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 0.5rem;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  padding-top: 14px;
}
.db-breadcrumb:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .db-breadcrumb{
    flex-direction: row;
    justify-content: space-between;
  }
}
.db-breadcrumb-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.db-breadcrumb-list:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .db-breadcrumb-list{
    justify-content: flex-end;
  }
}
.db-breadcrumb-item{
  font-size: 22px;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.db-breadcrumb-link{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-breadcrumb-link::after{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
  --tw-content: '/';
  content: var(--tw-content);
}
.db-breadcrumb-link:hover{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
/* TABS */
.db-tab-btn{
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.25rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: left;
  font-size: 15px;
  text-transform: capitalize;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-tab-btn:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-tab-btn:last-child{
  border-style: none;
}
.db-tab-btn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.db-tab-btn i{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.db-tab-btn.active{
  background-color: rgb(77 0 31 / 0.05) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1)) !important;
}
.db-tab-btn.\!active{
  background-color: rgb(77 0 31 / 0.05) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1)) !important;
}
.db-tab-div{
  display: none;
}
@media (max-width: 767px) {
    body.bf-home .footer-d > .container.db-tab-div {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 639px) {
    body.bf-home .footer-part.db-tab-div {
        display: block;
    }
}
.db-tab-div.active{
  display: block;
}
.db-tab-div.\!active{
  display: block;
}
.db-tab-sub-div{
  display: none;
}
@media (max-width: 767px) {
    body.bf-home .footer-d > .container.db-tab-sub-div {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 639px) {
    body.bf-home .footer-part.db-tab-sub-div {
        display: block;
    }
}
.db-tab-sub-div.active{
  display: block;
}
.db-tab-sub-div.\!active{
  display: block;
}
.db-tab-sub-btn.active{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.db-tab-sub-btn.\!active{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.db-tabBtn{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: transparent;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: capitalize;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-tabBtn:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-tabBtn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){

  .db-tabBtn{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-color: rgb(77 0 31 / 0.5);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}
.db-tabBtn.active{
  border-color: rgb(77 0 31 / 0.5);
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-tabBtn.active > i { opacity: 1; }
}
@media (min-width: 640px){

  .db-tabBtn.active{
    --tw-border-opacity: 1;
    border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
}
.db-tabBtn.\!active{
  border-color: rgb(77 0 31 / 0.5);
  background-color: rgb(77 0 31 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-tabBtn.\!active > i { opacity: 1; }
}
@media (min-width: 640px){

  .db-tabBtn.\!active{
    --tw-border-opacity: 1;
    border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
}
.db-tabDiv{
  display: none;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(77 0 31 / 0.5);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  --tw-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%);
  --tw-shadow-colored: 0 2px 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (max-width: 767px) {
    body.bf-home .footer-d > .container.db-tabDiv {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 639px) {
    body.bf-home .footer-part.db-tabDiv {
        display: block;
    }
}
@media (min-width: 640px){

  .db-tabDiv{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.db-tabDiv.active{
  display: block;
}
.db-tabDiv.\!active{
  display: block;
}
.db-tabBtn span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-tab{
  display: none;
}
@media (max-width: 767px) {
    body.bf-home .footer-d > .container.data-tab {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 639px) {
    body.bf-home .footer-part.data-tab {
        display: block;
    }
}
.data-tab.active{
  display: block !important;
}
.data-tab.\!active{
  display: block !important;
}
.profile-tabBtn.active{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  stroke: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0px 6px 10px rgba(105, 245, 216, 0.28);
  --tw-shadow-colored: 0px 6px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.profile-tabBtn.\!active{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  stroke: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0px 6px 10px rgba(105, 245, 216, 0.28);
  --tw-shadow-colored: 0px 6px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.profile-tabDiv{
  display: none;
}
@media (max-width: 767px) {
    body.bf-home .footer-d > .container.profile-tabDiv {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 639px) {
    body.bf-home .footer-part.profile-tabDiv {
        display: block;
    }
}
.profile-tabDiv.active{
  display: block;
}
.profile-tabDiv.\!active{
  display: block;
}
/* DROPDOWN */
.dropdown-group{
  position: relative;
  line-height: 0px;
}
.dropdown-btn{
  cursor: pointer;
}
.dropdown-list{
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.dropdown-list.active{
  transform-origin: top;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.dropdown-list.\!active{
  transform-origin: top;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* FIELDS */
.db-field-title{
  margin-bottom: 0.5rem;
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(86 106 127 / var(--tw-text-opacity, 1));
}
.db-field-title.required::after{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  --tw-content: '*';
  content: var(--tw-content);
}
.db-field-title.required:where([dir="ltr"], [dir="ltr"] *)::after{
  content: var(--tw-content);
  margin-left: 0.25rem;
}
.db-field-title.required:where([dir="rtl"], [dir="rtl"] *)::after{
  content: var(--tw-content);
  margin-right: 0.25rem;
}
.db-field-control{
  display: block;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 2px;
  font-family: 'Public Sans', sans-serif;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-field-control:focus-within{
  border-color: rgb(77 0 31 / 0.2);
}
.db-multiple-field{
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-multiple-field:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-multiple-field:focus-within{
  border-color: rgb(77 0 31 / 0.2);
}
.db-multiple-field input{
  height: 100%;
  width: 50%;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-multiple-field input:first-child{
  border-style: none;
}
.db-multiple-field input:where([dir="ltr"], [dir="ltr"] *){
  border-left-width: 1px;
}
.db-multiple-field input:where([dir="rtl"], [dir="rtl"] *){
  border-right-width: 1px;
}
.db-multiple-field button{
  height: 2rem;
  border-radius: 0.375rem;
  background-color: rgb(77 0 31 / 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-multiple-field button > i { opacity: 1; }
}
.db-multiple-field button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.db-multiple-field button:where([dir="ltr"], [dir="ltr"] *){
  margin-right: 3px;
}
.db-multiple-field button:where([dir="rtl"], [dir="rtl"] *){
  margin-left: 3px;
}
.db-field-alert{
  margin-left: 0.25rem;
  font-family: 'Public Sans', sans-serif;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.db-field-radio-group{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 0.5rem;
}
.db-field-radio-group:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-field-radio{
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  align-items: center;
  padding-top: 0.25rem;
}
.db-field-radio:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-field-checkbox{
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  align-items: center;
  padding-top: 0.25rem;
}
.db-field-checkbox:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-field-label{
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  text-transform: capitalize;
  line-height: 1rem;
}
.db-field-label:where([dir="ltr"], [dir="ltr"] *){
  padding-left: 0.5rem;
}
.db-field-label:where([dir="rtl"], [dir="rtl"] *){
  padding-right: 0.5rem;
}
textarea.db-field-control{
  height: 9rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.db-field-control[type=file]{
  position: relative;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-field-control[type=file]::before{
  position: absolute;
  top: 0px;
  z-index: 10;
  height: 100%;
  width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  --tw-content: ''; content: var(--tw-content); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; transition-timing-function: linear;
}
.db-field-control[type=file]:focus-within::before{
  content: var(--tw-content);
  background-color: rgb(77 0 31 / 0.2);
}
.db-field-control[type=file]:where([dir="ltr"], [dir="ltr"] *){
  padding-left: 0px;
}
.db-field-control[type=file]:where([dir="ltr"], [dir="ltr"] *)::before{
  content: var(--tw-content);
  left: 107px;
}
.db-field-control[type=file]:where([dir="rtl"], [dir="rtl"] *){
  padding-right: 0px;
}
.db-field-control[type=file]:where([dir="rtl"], [dir="rtl"] *)::before{
  content: var(--tw-content);
  right: 113px;
}

body.bf-home .dropdown-list .db-field-control[type=file]::-webkit-file-upload-button,
body.bf-home .dropdown-list 
    .db-field-control[type=file]::file-selector-button { color: #6E7191; }
.checkbox:checked{
  border-style: none;
}
.checkbox:checked + .check-icon{
  display: flex;
}
.checkbox:checked + .check-icon:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.checkbox:checked + .checkmark{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
input:checked + div{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
}
input:checked + div svg{
  display: block;
}
.custom-switch{
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.custom-switch input{
  position: relative;
  height: 0.75rem;
  width: 1.25rem;
  cursor: pointer;
}
.custom-switch input::before{
  position: absolute;
  inset: 0px;
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(110 113 145 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}
.custom-switch input::after{
  position: absolute;
  top: 50%;
  left: 30%;
  height: 0.375rem;
  width: 0.375rem;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}
.custom-switch input:checked::before{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.custom-switch input:checked::after{
  content: var(--tw-content);
  left: 70%;
}
.custom-switch label{
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

body.bf-home .dropdown-list .custom-switch label { color: #6E7191; }
.custom-switch label:where([dir="ltr"], [dir="ltr"] *){
  padding-left: 0.5rem;
}
.custom-switch label:where([dir="rtl"], [dir="rtl"] *){
  padding-right: 0.5rem;
}
.custom-switch input:checked + label{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.custom-switch input:checked + label > i { opacity: 1; }
}
.custom-checkbox{
  position: relative;
  height: 1rem;
  width: 1rem;
  cursor: pointer;
}
.custom-checkbox-field{
  position: absolute;
  z-index: 10;
  height: 100%;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0;
}
.custom-checkbox-icon{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(217 222 227 / var(--tw-border-opacity, 1));
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.custom-checkbox-field:checked + .custom-checkbox-icon{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 2px 4px 0 rgb(105 108 255 / 40%);
  --tw-shadow-colored: 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.custom-radio{
  position: relative;
  height: 1rem;
  width: 1rem;
  cursor: pointer;
}
.custom-radio-field{
  position: absolute;
  z-index: 10;
  height: 100%;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0;
}
.custom-radio-span{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(217 222 227 / var(--tw-border-opacity, 1));
  text-align: center;
}
.custom-radio-field:checked + .custom-radio-span{
  border-width: 5px;
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 2px 4px 0 rgb(105 108 255 / 40%);
  --tw-shadow-colored: 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.custom-radio.sm{
  height: 0.75rem;
  width: 0.75rem;
}
.custom-radio.sm .custom-radio-field:checked + .custom-radio-span{
  border-width: 3px;
}
/* TABLE */
.db-table-responsive{
  width: 100%;
  overflow: auto;
}
.db-table{
  width: 100%;
  table-layout: auto;
  white-space: nowrap;
  text-align: left;
}
.db-table.stripe .db-table-body-tr:nth-child(odd){
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}
.db-table-head{
  border-bottom-width: 2px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.db-table-head:where([dir="ltr"], [dir="ltr"] *){
  text-align: left;
}
.db-table-head:where([dir="rtl"], [dir="rtl"] *){
  text-align: right;
}
.db-table-body:where([dir="ltr"], [dir="ltr"] *){
  text-align: left;
}
.db-table-body:where([dir="rtl"], [dir="rtl"] *){
  text-align: right;
}
.db-table-head-th{
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: 'Public Sans', sans-serif !important;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(86 106 127 / var(--tw-text-opacity, 1));
}
.db-table-body-tr{
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  font-family: 'Public Sans', sans-serif;
}
.db-table-body-tr:last-child{
  border-style: none;
}
.db-table-body-td{
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.db-table-badge{
  border-radius: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: 'Public Sans', sans-serif;
  text-transform: capitalize;
}
.db-table-action{
  position: relative;
}
.db-table-action i{
  margin: 0.125rem;
  border-radius: 0.25rem;
  padding: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-table-action.view i{
  background-color: rgb(77 0 31 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-table-action.view i > i { opacity: 1; }
}
.db-table-action.view i:hover{
  background-color: rgb(77 0 31 / 0.2);
}
.db-table-action.edit i{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.db-table-action.edit i:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.db-table-action.delete i{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.db-table-action.delete i:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.table-filter-div{
  height: 0px;
  overflow: hidden;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: linear;
}
/* TOOLTIP */
.db-tooltip{
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: -1.25rem;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  white-space: nowrap;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 1px;
  padding-bottom: 2px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-tooltip::after{
  position: absolute;
  bottom: -3px;
  left: 50%;
  --tw-translate-x: -50%;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0.125rem;
  border-width: 4px;
  border-top-width: 4px;
  border-style: solid;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}
.db-table-action:hover .db-tooltip{
  visibility: visible;
  top: -100%;
  opacity: 1;
}
/* MODAL */
.modal{
  visibility: hidden;
  position: fixed;
  top: 0px;
  left: 50%;
  z-index: 60;
  height: 100%;
  width: 100%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow-y: auto;
  background-color: rgb(0 0 0 / 0.6);
  opacity: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
@media (min-width: 1024px){

  .ff-modal{
    top: 74px;
  }
}
.info-modal{
  z-index: 70;
}
@media (min-width: 1024px){

  .modal.ff-modal.active .modal-dialog{
    margin-top: 2.5rem;
    margin-bottom: 8rem;
  }

  .modal.ff-modal.\!active .modal-dialog{
    margin-top: 2.5rem;
    margin-bottom: 8rem;
  }
}
.modal.active{
  visibility: visible;
  opacity: 1;
}
.modal.\!active{
  visibility: visible;
  opacity: 1;
}
.modal-dialog{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 32rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.modal.active .modal-dialog{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.modal.\!active .modal-dialog{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.modal-header{
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  padding: 1rem;
}
.modal-header:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.modal-title{
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  text-transform: capitalize;
}
.modal-body{
  padding: 1rem;
}
.modal-footer{
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  padding: 1rem;
}
.modal-btns{
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}
.modal-btns:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.modal-btn-fill{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.modal-btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  text-transform: capitalize;
  --tw-text-opacity: 1 !important;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important;
}
.modal-close{
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 0 107 / var(--tw-text-opacity, 1));
}
/* PAGINATION */
.db-pagination-menu.\!active{
  background-color: rgb(77 0 31 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-pagination-menu.\!active > i { opacity: 1; }
}
.db-pagination-menu.active{
  background-color: rgb(77 0 31 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.db-pagination-menu.active > i { opacity: 1; }
}
/* LIST */
.db-list{
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
  display: flex;
  flex-direction: column;
}
.db-list:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.db-list-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0.375rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.db-list-item:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .db-list-item{
    flex-direction: row;
    align-items: center;
  }
}
.db-list-item-title{
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(31 31 57 / var(--tw-text-opacity, 1));
}
.db-list-item-title::after{
  display: inline-block;
  padding-left: 0.25rem;
  --tw-content: ':';
  content: var(--tw-content);
}
@media (min-width: 640px){

  .db-list-item-title::after{
    content: var(--tw-content);
    display: none;
  }
}
.db-list-item-title:where([dir="ltr"], [dir="ltr"] *){
  text-align: left;
}
.db-list-item-title:where([dir="rtl"], [dir="rtl"] *){
  text-align: right;
}
.db-list-item-text{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.db-list-item-text:where([dir="ltr"], [dir="ltr"] *){
  text-align: left;
}
.db-list-item-text:where([dir="rtl"], [dir="rtl"] *){
  text-align: right;
}
.db-list.single .db-list-item-title{
  width: 100%;
  max-width: 100%;
}
@media (min-width: 640px){

  .db-list.single .db-list-item-title{
    max-width: 180px;
  }
}
.db-list.single .db-list-item-text{
  width: 100%;
}
.db-list.multiple{
  flex-direction: row;
  flex-wrap: wrap;
}
.db-list.multiple .db-list-item{
  width: 100%;
}
@media (min-width: 640px){

  .db-list.multiple .db-list-item{
    width: 50%;
  }
}
.db-list.multiple .db-list-item-title{
  width: 100%;
}
@media (min-width: 640px){

  .db-list.multiple .db-list-item-title{
    width: 50%;
  }
}
.db-list.multiple .db-list-item-text{
  width: 100%;
}
@media (min-width: 640px){

  .db-list.multiple .db-list-item-text{
    width: 50%;
  }
}
/* BADGE */
.db-badge{
  border-radius: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.db-badge.yellow{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.db-badge.green{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.db-badge.blue{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.db-badge.red{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
/* DRAWER */
.drawer{
  position: fixed;
  top: 0px;
  z-index: 50;
  height: 100vh;
  width: 100%;
  max-width: 36rem;
  overflow-y: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
.drawer:where([dir="ltr"], [dir="ltr"] *){
  right: 0px;
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.drawer:where([dir="rtl"], [dir="rtl"] *){
  left: 0px;
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.drawer.active:where([dir="ltr"], [dir="ltr"] *){
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.drawer.active:where([dir="rtl"], [dir="rtl"] *){
  --tw-translate-x: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.drawer.\!active:where([dir="ltr"], [dir="ltr"] *){
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.drawer.\!active:where([dir="rtl"], [dir="rtl"] *){
  --tw-translate-x: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.drawer-header{
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  padding: 1rem;
}
.drawer-header:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.drawer-title{
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  text-transform: capitalize;
}
.drawer-body{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* DB PRODUCT CARD */
.db-product-cart:hover svg,
    .db-product-cart:hover span{
  fill: #fff;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.db-pos-cartDiv{
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}
@media (min-width: 768px){

  .db-pos-cartDiv{
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.db-pos-cartDiv.active{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.db-pos-cartDiv.\!active{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.pos-group .active{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
.pos-group .\!active{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
/* FOOTER */
/* Not bg-primary: the footer has its own colour, and the two bands of
       it have to match each other rather than the header. */
.footer-part { background-color: rgb(var(--footer)); }
/* INSTALLER */
.installer-track{
  display: flex;
  width: 109%;
  align-items: center;
  justify-content: space-between;
}
.installer-track:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .installer-track{
    width: 111%;
  }
}
.installer-track li{
  display: flex;
  width: 100%;
  align-items: center;
}
.installer-track li:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.installer-track li:last-child::after{
  display: none;
}
@media (max-width: 767px) {
    body.bf-home .footer-d > .container.installer-track li:last-child::after {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 639px) {
    body.bf-home .footer-part.installer-track li:last-child::after {
        display: block;
    }
}
.installer-track li:after{
  height: 1px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(217 219 233 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}
.installer-track li i{
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(217 219 233 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(217 219 233 / var(--tw-bg-opacity, 1));
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 30px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){

  .installer-track li i{
    height: 38px;
    width: 38px;
    font-size: 0.875rem;
    line-height: 2.25rem;
  }
}
.installer-track li.done{
  cursor: pointer;
}
.installer-track li.done::after{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.installer-track li.done i{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
    .ff-header .ff-nav > a.installer-track li.done i > i { opacity: 1; }
}
.installer-track li.active i{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.installer-track li.\!active i{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.unread-message h4{
  position: relative;
}
.unread-message h4::after{
  position: absolute;
  top: 0px;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}
.unread-message h4:where([dir="ltr"], [dir="ltr"] *)::after{
  content: var(--tw-content);
  right: -0.75rem;
}
.unread-message h4:where([dir="rtl"], [dir="rtl"] *)::after{
  content: var(--tw-content);
  left: -0.75rem;
}
/*===================================
            COMPONENTS PART END
    ====================================*/
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.\!relative{
  position: relative !important;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.inset-x-3{
  left: 0.75rem;
  right: 0.75rem;
}
.-bottom-12{
  bottom: -3rem;
}
.-left-3{
  left: -0.75rem;
}
.-right-1{
  right: -0.25rem;
}
.-right-2{
  right: -0.5rem;
}
.-top-1{
  top: -0.25rem;
}
.-top-2{
  top: -0.5rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-20{
  bottom: 5rem;
}
.bottom-3{
  bottom: 0.75rem;
}
.left-0{
  left: 0px;
}
.left-1\/2{
  left: 50%;
}
.right-0{
  right: 0px;
}
.right-2{
  right: 0.5rem;
}
.right-2\.5{
  right: 0.625rem;
}
.right-4{
  right: 1rem;
}
.right-5{
  right: 1.25rem;
}
.top-0{
  top: 0px;
}
.top-1{
  top: 0.25rem;
}
.top-1\/2{
  top: 50%;
}
.top-10{
  top: 2.5rem;
}
.top-12{
  top: 3rem;
}
.top-14{
  top: 3.5rem;
}
.top-2{
  top: 0.5rem;
}
.top-4{
  top: 1rem;
}
.top-5{
  top: 1.25rem;
}
.top-9{
  top: 2.25rem;
}
.top-\[-6px\]{
  top: -6px;
}
.top-\[42px\]{
  top: 42px;
}
.top-\[58px\]{
  top: 58px;
}
.top-\[75px\]{
  top: 75px;
}
.-z-10{
  z-index: -10;
}
.z-0{
  z-index: 0;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-50{
  z-index: 50;
}
.z-60{
  z-index: 60;
}
.z-70{
  z-index: 70;
}
.z-80{
  z-index: 80;
}
.z-\[60\]{
  z-index: 60;
}
.col-span-1{
  grid-column: span 1 / span 1;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.row-span-2{
  grid-row: span 2 / span 2;
}
.m-0{
  margin: 0px;
}
.m-0\.5{
  margin: 0.125rem;
}
.m-2{
  margin: 0.5rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-0\.5{
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1\.5{
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.\!mb-0{
  margin-bottom: 0px !important;
}
.-ml-px{
  margin-left: -1px;
}
.-mr-0\.5{
  margin-right: -0.125rem;
}
.-mt-0\.5{
  margin-top: -0.125rem;
}
.-mt-12{
  margin-top: -3rem;
}
.-mt-2{
  margin-top: -0.5rem;
}
.-mt-7{
  margin-top: -1.75rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-12{
  margin-bottom: 3rem;
}
.mb-14{
  margin-bottom: 3.5rem;
}
.mb-16{
  margin-bottom: 4rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-2\.5{
  margin-bottom: 0.625rem;
}
.mb-20{
  margin-bottom: 5rem;
}
.mb-24{
  margin-bottom: 6rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-7{
  margin-bottom: 1.75rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.mb-9{
  margin-bottom: 2.25rem;
}
.mb-\[18px\]{
  margin-bottom: 18px;
}
.mb-\[1px\]{
  margin-bottom: 1px;
}
.mb-\[22px\]{
  margin-bottom: 22px;
}
.mb-\[70px\]{
  margin-bottom: 70px;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-16{
  margin-top: 4rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-9{
  margin-top: 2.25rem;
}
.mt-\[-20px\]{
  margin-top: -20px;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.\!flex{
  display: flex !important;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.aspect-\[13\/9\]{
  aspect-ratio: 13/9;
}
.\!h-32{
  height: 8rem !important;
}
.\!h-40{
  height: 10rem !important;
}
.h-0{
  height: 0px;
}
.h-10{
  height: 2.5rem;
}
.h-11{
  height: 2.75rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-20{
  height: 5rem;
}
.h-24{
  height: 6rem;
}
.h-28{
  height: 7rem;
}
.h-3{
  height: 0.75rem;
}
.h-32{
  height: 8rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[102px\]{
  height: 102px;
}
.h-\[120px\]{
  height: 120px;
}
.h-\[180px\]{
  height: 180px;
}
.h-\[18px\]{
  height: 18px;
}
.h-\[1px\]{
  height: 1px;
}
.h-\[26px\]{
  height: 26px;
}
.h-\[300px\]{
  height: 300px;
}
.h-\[37px\]{
  height: 37px;
}
.h-\[38px\]{
  height: 38px;
}
.h-\[400px\]{
  height: 400px;
}
.h-\[42px\]{
  height: 42px;
}
.h-\[5\.5rem\]{
  height: 5.5rem;
}
.h-\[50px\]{
  height: 50px;
}
.h-\[52px\]{
  height: 52px;
}
.h-\[68px\]{
  height: 68px;
}
.h-\[70px\]{
  height: 70px;
}
.h-\[72px\]{
  height: 72px;
}
.h-\[90px\]{
  height: 90px;
}
.h-\[98px\]{
  height: 98px;
}
.h-\[calc\(100vh_-_75px\)\]{
  height: calc(100vh - 75px);
}
.h-\[calc\(96vh-200px\)\]{
  height: calc(96vh - 200px);
}
.h-auto{
  height: auto;
}
.h-fit{
  height: -moz-fit-content;
  height: fit-content;
}
.h-full{
  height: 100%;
}
.h-screen{
  height: 100vh;
}
.max-h-\[480px\]{
  max-height: 480px;
}
.min-h-screen{
  min-height: 100vh;
}
.\!w-auto{
  width: auto !important;
}
.\!w-fit{
  width: -moz-fit-content !important;
  width: fit-content !important;
}
.w-1\/3{
  width: 33.333333%;
}
.w-10{
  width: 2.5rem;
}
.w-11{
  width: 2.75rem;
}
.w-12{
  width: 3rem;
}
.w-16{
  width: 4rem;
}
.w-2\/3{
  width: 66.666667%;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-32{
  width: 8rem;
}
.w-36{
  width: 9rem;
}
.w-4{
  width: 1rem;
}
.w-40{
  width: 10rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-7{
  width: 1.75rem;
}
.w-8{
  width: 2rem;
}
.w-80{
  width: 20rem;
}
.w-9{
  width: 2.25rem;
}
.w-\[120px\]{
  width: 120px;
}
.w-\[150px\]{
  width: 150px;
}
.w-\[18px\]{
  width: 18px;
}
.w-\[26px\]{
  width: 26px;
}
.w-\[38px\]{
  width: 38px;
}
.w-\[46px\]{
  width: 46px;
}
.w-\[5\.5rem\]{
  width: 5.5rem;
}
.w-\[550px\]{
  width: 550px;
}
.w-\[68px\]{
  width: 68px;
}
.w-\[72px\]{
  width: 72px;
}
.w-\[76px\]{
  width: 76px;
}
.w-\[90px\]{
  width: 90px;
}
.w-\[98px\]{
  width: 98px;
}
.w-\[calc\(100\%-1rem\)\]{
  width: calc(100% - 1rem);
}
.w-auto{
  width: auto;
}
.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}
.w-full{
  width: 100%;
}
.w-screen{
  width: 100vw;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[120px\]{
  min-width: 120px;
}
.min-w-\[150px\]{
  min-width: 150px;
}
.min-w-\[162px\]{
  min-width: 162px;
}
.min-w-\[180px\]{
  min-width: 180px;
}
.min-w-\[18px\]{
  min-width: 18px;
}
.min-w-\[200px\]{
  min-width: 200px;
}
.min-w-\[97px\]{
  min-width: 97px;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-\[100px\]{
  max-width: 100px;
}
.max-w-\[120px\]{
  max-width: 120px;
}
.max-w-\[148px\]{
  max-width: 148px;
}
.max-w-\[160px\]{
  max-width: 160px;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[220px\]{
  max-width: 220px;
}
.max-w-\[250px\]{
  max-width: 250px;
}
.max-w-\[300px\]{
  max-width: 300px;
}
.max-w-\[340px\]{
  max-width: 340px;
}
.max-w-\[350px\]{
  max-width: 350px;
}
.max-w-\[360px\]{
  max-width: 360px;
}
.max-w-\[428px\]{
  max-width: 428px;
}
.max-w-\[550px\]{
  max-width: 550px;
}
.max-w-\[630px\]{
  max-width: 630px;
}
.max-w-\[640px\]{
  max-width: 640px;
}
.max-w-\[647px\]{
  max-width: 647px;
}
.max-w-\[900px\]{
  max-width: 900px;
}
.max-w-\[965px\]{
  max-width: 965px;
}
.max-w-full{
  max-width: 100%;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-auto{
  flex: 1 1 auto;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.border-collapse{
  border-collapse: collapse;
}
.origin-top{
  transform-origin: top;
}
.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full{
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[0\.98\]{
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-0{
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default{
  cursor: default;
}
.cursor-move{
  cursor: move;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.resize-none{
  resize: none;
}
.resize{
  resize: both;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-10{
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[repeat\(auto-fill\2c _minmax\(140px\2c _1fr\)\)\]{
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.\!justify-start{
  justify-content: flex-start !important;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.justify-items-center{
  justify-items: center;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-11{
  gap: 2.75rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-3\.5{
  gap: 0.875rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-\[18px\]{
  gap: 18px;
}
.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.gap-y-3\.5{
  row-gap: 0.875rem;
}
.gap-y-4{
  row-gap: 1rem;
}
.gap-y-5{
  row-gap: 1.25rem;
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-\[\#EFF0F6\] > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(239 240 246 / var(--tw-divide-opacity, 1));
}
.self-start{
  align-self: flex-start;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis{
  text-overflow: ellipsis;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.\!whitespace-pre-wrap{
  white-space: pre-wrap !important;
}
.text-wrap{
  text-wrap: wrap;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-3xl{
  border-radius: 1.5rem;
}
.rounded-\[10px\]{
  border-radius: 10px;
}
.rounded-\[3px\]{
  border-radius: 3px;
}
.rounded-\[4px\]{
  border-radius: 4px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-none{
  border-radius: 0px;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b-2xl{
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-b-\[11px\]{
  border-bottom-right-radius: 11px;
  border-bottom-left-radius: 11px;
}
.rounded-l-\[11px\]{
  border-top-left-radius: 11px;
  border-bottom-left-radius: 11px;
}
.rounded-l-lg{
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-l-md{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-lg{
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.rounded-r-md{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-\[10px\]{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-t-\[11px\]{
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}
.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-bl{
  border-bottom-left-radius: 0.25rem;
}
.rounded-bl-lg{
  border-bottom-left-radius: 0.5rem;
}
.rounded-br-lg{
  border-bottom-right-radius: 0.5rem;
}
.rounded-tl{
  border-top-left-radius: 0.25rem;
}
.rounded-tl-3xl{
  border-top-left-radius: 1.5rem;
}
.rounded-tl-lg{
  border-top-left-radius: 0.5rem;
}
.rounded-tr-3xl{
  border-top-right-radius: 1.5rem;
}
.rounded-tr-lg{
  border-top-right-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-2{
  border-width: 2px;
}
.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-none{
  border-style: none;
}
.\!border-\[\#FB4E4E\]{
  --tw-border-opacity: 1 !important;
  border-color: rgb(251 78 78 / var(--tw-border-opacity, 1)) !important;
}
.\!border-danger{
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 0 107 / var(--tw-border-opacity, 1)) !important;
}
.\!border-primary{
  --tw-border-opacity: 1 !important;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1)) !important;
}
.border-\[\#0dc3b5\]{
  --tw-border-opacity: 1;
  border-color: rgb(13 195 181 / var(--tw-border-opacity, 1));
}
.border-\[\#6E7191\]{
  --tw-border-opacity: 1;
  border-color: rgb(110 113 145 / var(--tw-border-opacity, 1));
}
.border-\[\#D9DBE9\]{
  --tw-border-opacity: 1;
  border-color: rgb(217 219 233 / var(--tw-border-opacity, 1));
}
.border-\[\#DBDEE0\]{
  --tw-border-opacity: 1;
  border-color: rgb(219 222 224 / var(--tw-border-opacity, 1));
}
.border-\[\#E8A33D\]{
  --tw-border-opacity: 1;
  border-color: rgb(232 163 61 / var(--tw-border-opacity, 1));
}
.border-\[\#EFF0F6\]{
  --tw-border-opacity: 1;
  border-color: rgb(239 240 246 / var(--tw-border-opacity, 1));
}
.border-\[\#F1F1F5\]{
  --tw-border-opacity: 1;
  border-color: rgb(241 241 245 / var(--tw-border-opacity, 1));
}
.border-\[\#F7F7FC\]{
  --tw-border-opacity: 1;
  border-color: rgb(247 247 252 / var(--tw-border-opacity, 1));
}
.border-blue-500{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-primary{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
}
.border-primary\/30{
  border-color: rgb(77 0 31 / 0.3);
}
.border-primary\/40{
  border-color: rgb(77 0 31 / 0.4);
}
.border-red-400{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-slate-100{
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color: transparent;
}
.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}
.\!bg-primary\/5{
  background-color: rgb(77 0 31 / 0.05) !important;
}
.\!bg-white{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#00749B\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 116 155 / var(--tw-bg-opacity, 1));
}
.bg-\[\#008BBA\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 139 186 / var(--tw-bg-opacity, 1));
}
.bg-\[\#111111\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#16BE45\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 190 69 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1AB759\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 183 89 / var(--tw-bg-opacity, 1));
}
.bg-\[\#2AC769\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 199 105 / var(--tw-bg-opacity, 1));
}
.bg-\[\#567DFF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(86 125 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#8262FE\]{
  --tw-bg-opacity: 1;
  background-color: rgb(130 98 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#A0A3BD\]{
  --tw-bg-opacity: 1;
  background-color: rgb(160 163 189 / var(--tw-bg-opacity, 1));
}
.bg-\[\#A953FF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(169 83 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#B9BCC9\]{
  --tw-bg-opacity: 1;
  background-color: rgb(185 188 201 / var(--tw-bg-opacity, 1));
}
.bg-\[\#B9BDD0\]{
  --tw-bg-opacity: 1;
  background-color: rgb(185 189 208 / var(--tw-bg-opacity, 1));
}
.bg-\[\#BDEFFF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(189 239 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#CBFFE0\]{
  --tw-bg-opacity: 1;
  background-color: rgb(203 255 224 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D6F5FF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(214 245 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D8FFFC\]{
  --tw-bg-opacity: 1;
  background-color: rgb(216 255 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DAEEFC\]{
  --tw-bg-opacity: 1;
  background-color: rgb(218 238 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E0FFED\]{
  --tw-bg-opacity: 1;
  background-color: rgb(224 255 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E5E7Eb\]{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E7FFF0\]{
  --tw-bg-opacity: 1;
  background-color: rgb(231 255 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E8F7EE\]{
  --tw-bg-opacity: 1;
  background-color: rgb(232 247 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E9EEFF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(233 238 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E9F9FF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(233 249 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EBE7FF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(235 231 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EDEFF7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(237 239 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EFF0F6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(239 240 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F5EAFF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(245 234 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F5F5F5\]{
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F6A609\]{
  --tw-bg-opacity: 1;
  background-color: rgb(246 166 9 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F7F7F7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F7F7FC\]{
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FAF4FF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(250 244 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FB4E4E\]{
  --tw-bg-opacity: 1;
  background-color: rgb(251 78 78 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FDE8E8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(253 232 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FF4F99\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 79 153 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFDADA\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 218 218 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFDB1F\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 219 31 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFEAEA\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 234 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFEBD8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 235 216 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFEEC6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 238 198 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF5DE\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 222 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF6E6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 230 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF6EE\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF8E1\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 225 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e5ebff\]{
  --tw-bg-opacity: 1;
  background-color: rgb(229 235 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fcfcfc\]{
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-danger{
  --tw-bg-opacity: 1;
  background-color: rgb(255 0 107 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-heading{
  --tw-bg-opacity: 1;
  background-color: rgb(31 31 57 / var(--tw-bg-opacity, 1));
}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-page{
  --tw-bg-opacity: 1;
  background-color: rgb(255 244 243 / var(--tw-bg-opacity, 1));
}
.bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.bg-primary-light{
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
.bg-primary\/10{
  background-color: rgb(77 0 31 / 0.1);
}
.bg-primary\/5{
  background-color: rgb(77 0 31 / 0.05);
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-sky-600{
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/20{
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}
.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-installer{
  background-image: url('/themes/default/images/bg/installer.jpg');
}
.from-\[\#FF7A00\]{
  --tw-gradient-from: #FF7A00 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 122 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-bright{
  --tw-gradient-from: rgb(117 0 47 / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(117 0 47 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[\#00B3A5\]{
  --tw-gradient-to: #00B3A5 var(--tw-gradient-to-position);
}
.to-\[\#FF016C\]{
  --tw-gradient-to: #FF016C var(--tw-gradient-to-position);
}
.to-primary-deep{
  --tw-gradient-to: rgb(46 0 18 / 1) var(--tw-gradient-to-position);
}
.bg-cover{
  background-size: cover;
}
.bg-center{
  background-position: center;
}
.bg-no-repeat{
  background-repeat: no-repeat;
}
.fill-\[\#00749B\]{
  fill: #00749B;
}
.stroke-\[\#6E7191\]{
  stroke: #6E7191;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.object-fill{
  -o-object-fit: fill;
     object-fit: fill;
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: 0.25rem;
}
.p-2{
  padding: 0.5rem;
}
.p-2\.5{
  padding: 0.625rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.\!py-1\.5{
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.\!py-2{
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.px-0{
  padding-left: 0px;
  padding-right: 0px;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0{
  padding-bottom: 0px;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-1\.5{
  padding-bottom: 0.375rem;
}
.pb-12{
  padding-bottom: 3rem;
}
.pb-16{
  padding-bottom: 4rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-20{
  padding-bottom: 5rem;
}
.pb-24{
  padding-bottom: 6rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-3\.5{
  padding-bottom: 0.875rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-7{
  padding-left: 1.75rem;
}
.pl-\[18px\]{
  padding-left: 18px;
}
.pr-1{
  padding-right: 0.25rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-2\.5{
  padding-right: 0.625rem;
}
.pr-4{
  padding-right: 1rem;
}
.pr-6{
  padding-right: 1.5rem;
}
.pt-0{
  padding-top: 0px;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-12{
  padding-top: 3rem;
}
.pt-16{
  padding-top: 4rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-7{
  padding-top: 1.75rem;
}
.pt-8{
  padding-top: 2rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.text-start{
  text-align: start;
}
.text-end{
  text-align: end;
}
.align-top{
  vertical-align: top;
}
.font-public{
  font-family: 'Public Sans', sans-serif;
}
.font-rubik{
  font-family: 'Rubik', sans-serif;
}
.\!text-2xl{
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}
.\!text-xs{
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[14px\]{
  font-size: 14px;
}
.text-\[15px\]{
  font-size: 15px;
}
.text-\[18px\]{
  font-size: 18px;
}
.text-\[22px\]{
  font-size: 22px;
}
.text-\[26px\]{
  font-size: 26px;
}
.text-\[8px\]{
  font-size: 8px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-\[300\]{
  font-weight: 300;
}
.font-bold{
  font-weight: 700;
}
.font-light{
  font-weight: 300;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.capitalize{
  text-transform: capitalize;
}
.normal-case{
  text-transform: none;
}
.leading-10{
  line-height: 2.5rem;
}
.leading-3{
  line-height: .75rem;
}
.leading-4{
  line-height: 1rem;
}
.leading-5{
  line-height: 1.25rem;
}
.leading-6{
  line-height: 1.5rem;
}
.leading-7{
  line-height: 1.75rem;
}
.leading-8{
  line-height: 2rem;
}
.leading-\[10px\]{
  line-height: 10px;
}
.leading-\[14px\]{
  line-height: 14px;
}
.leading-\[16px\]{
  line-height: 16px;
}
.leading-\[17px\]{
  line-height: 17px;
}
.leading-\[18px\]{
  line-height: 18px;
}
.leading-\[26px\]{
  line-height: 26px;
}
.leading-\[34px\]{
  line-height: 34px;
}
.leading-\[38px\]{
  line-height: 38px;
}
.leading-\[40px\]{
  line-height: 40px;
}
.leading-\[46px\]{
  line-height: 46px;
}
.leading-\[48px\]{
  line-height: 48px;
}
.leading-\[9px\]{
  line-height: 9px;
}
.leading-none{
  line-height: 1;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.\!text-\[\#008BBA\]{
  --tw-text-opacity: 1 !important;
  color: rgb(0 139 186 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#FB4E4E\]{
  --tw-text-opacity: 1 !important;
  color: rgb(251 78 78 / var(--tw-text-opacity, 1)) !important;
}
.\!text-danger{
  --tw-text-opacity: 1 !important;
  color: rgb(255 0 107 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#000\]{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-\[\#00749B\]{
  --tw-text-opacity: 1;
  color: rgb(0 116 155 / var(--tw-text-opacity, 1));
}
.text-\[\#0084FF\]{
  --tw-text-opacity: 1;
  color: rgb(0 132 255 / var(--tw-text-opacity, 1));
}
.text-\[\#008BBA\]{
  --tw-text-opacity: 1;
  color: rgb(0 139 186 / var(--tw-text-opacity, 1));
}
.text-\[\#00a6d7\]{
  --tw-text-opacity: 1;
  color: rgb(0 166 215 / var(--tw-text-opacity, 1));
}
.text-\[\#1AB759\]{
  --tw-text-opacity: 1;
  color: rgb(26 183 89 / var(--tw-text-opacity, 1));
}
.text-\[\#1F1F39\]{
  --tw-text-opacity: 1;
  color: rgb(31 31 57 / var(--tw-text-opacity, 1));
}
.text-\[\#2AC769\]{
  --tw-text-opacity: 1;
  color: rgb(42 199 105 / var(--tw-text-opacity, 1));
}
.text-\[\#2E2F38\]{
  --tw-text-opacity: 1;
  color: rgb(46 47 56 / var(--tw-text-opacity, 1));
}
.text-\[\#374151\]{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-\[\#567DFF\]{
  --tw-text-opacity: 1;
  color: rgb(86 125 255 / var(--tw-text-opacity, 1));
}
.text-\[\#6E7191\]{
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
}
.text-\[\#9837FF\]{
  --tw-text-opacity: 1;
  color: rgb(152 55 255 / var(--tw-text-opacity, 1));
}
.text-\[\#A0A3BD\]{
  --tw-text-opacity: 1;
  color: rgb(160 163 189 / var(--tw-text-opacity, 1));
}
.text-\[\#A953FF\]{
  --tw-text-opacity: 1;
  color: rgb(169 83 255 / var(--tw-text-opacity, 1));
}
.text-\[\#B7791F\]{
  --tw-text-opacity: 1;
  color: rgb(183 121 31 / var(--tw-text-opacity, 1));
}
.text-\[\#E89806\]{
  --tw-text-opacity: 1;
  color: rgb(232 152 6 / var(--tw-text-opacity, 1));
}
.text-\[\#E93C3C\]{
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.text-\[\#F5A623\]{
  --tw-text-opacity: 1;
  color: rgb(245 166 35 / var(--tw-text-opacity, 1));
}
.text-\[\#F6A609\]{
  --tw-text-opacity: 1;
  color: rgb(246 166 9 / var(--tw-text-opacity, 1));
}
.text-\[\#FB4E4E\]{
  --tw-text-opacity: 1;
  color: rgb(251 78 78 / var(--tw-text-opacity, 1));
}
.text-\[\#FF8C1A\]{
  --tw-text-opacity: 1;
  color: rgb(255 140 26 / var(--tw-text-opacity, 1));
}
.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-danger{
  --tw-text-opacity: 1;
  color: rgb(255 0 107 / var(--tw-text-opacity, 1));
}
.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-heading{
  --tw-text-opacity: 1;
  color: rgb(31 31 57 / var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-paragraph{
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
}
.text-primary{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
.text-primary-deep{
  --tw-text-opacity: 1;
  color: rgb(46 0 18 / var(--tw-text-opacity, 1));
}
.text-red-100{
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/90{
  color: rgb(255 255 255 / 0.9);
}
.underline{
  text-decoration-line: underline;
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.accent-\[\#00a094\]{
  accent-color: #00a094;
}
.opacity-0{
  opacity: 0;
}
.opacity-90{
  opacity: 0.9;
}
.opacity-95{
  opacity: 0.95;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_6px_10px_rgba\(105\2c _245\2c _216\2c _0\.28\)\]{
  --tw-shadow: 0px 6px 10px rgba(105, 245, 216, 0.28);
  --tw-shadow-colored: 0px 6px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_6px_10px_rgba\(251\2c _78\2c _78\2c _0\.24\)\]{
  --tw-shadow: 0px 6px 10px rgba(251, 78, 78, 0.24);
  --tw-shadow-colored: 0px 6px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_6px_10px_rgba\(26\2c _183\2c _89\2c _0\.24\)\]{
  --tw-shadow: 0px 6px 10px rgba(26, 183, 89, 0.24);
  --tw-shadow-colored: 0px 6px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-avatar{
  --tw-shadow: 0px 6px 10px rgba(23 114 255, 0.15);
  --tw-shadow-colored: 0px 6px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-cardCart{
  --tw-shadow: 0px 8px 16px rgba(23, 31, 70, 0.08);
  --tw-shadow-colored: 0px 8px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-coupon{
  --tw-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0px 4px 8px var(--tw-shadow-color), 0px 0px 2px var(--tw-shadow-color), 0px 0px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-db-card{
  --tw-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%);
  --tw-shadow-colored: 0 2px 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-paper{
  --tw-shadow: 0px 4px 40px rgba(23, 31, 70, 0.16);
  --tw-shadow-colored: 0px 4px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl-top{
  --tw-shadow: 0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 -8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 -20px 25px -5px var(--tw-shadow-color), 0 -8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs{
  --tw-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0px 6px 32px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline{
  outline-style: solid;
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-gray-300{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.ring-primary\/40{
  --tw-ring-color: rgb(77 0 31 / 0.4);
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-category{
  --tw-drop-shadow: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.duration-500{
  transition-duration: 500ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}

.swiper:hover .banner-swiper-navigate{
  opacity: 1;
}
.swiper-pagination-bullet{
  margin: 0px !important;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
  opacity: 1;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

body.bf-home .dropdown-list .swiper-pagination-bullet { color: #6E7191; }
.swiper-pagination-bullet-active{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* BANNER */
.banner-swiper .swiper-button-prev{
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 0.75rem !important;
  right: inherit !important;
  z-index: 50;
  display: flex;
  height: 2rem;
  width: 2rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-align: center;
  opacity: 0;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.banner-swiper .swiper-button-prev:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.banner-swiper .swiper-button-prev::after{
  font-family: 'Font Awesome 6 Free';
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-content: '\f053';
  content: var(--tw-content);
}
.banner-swiper .swiper-button-prev:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.banner-swiper .swiper-button-prev:hover::after{
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){

  .banner-swiper .swiper-button-prev{
    left: 1.75rem !important;
    height: 2.5rem;
    width: 2.5rem;
  }
}
.banner-swiper .swiper-button-next{
  visibility: hidden;
  position: absolute;
  top: 50%;
  right: 0.75rem !important;
  left: inherit !important;
  z-index: 50;
  display: flex;
  height: 2rem;
  width: 2rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-align: center;
  opacity: 0;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.banner-swiper .swiper-button-next:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
.banner-swiper .swiper-button-next::after{
  font-family: 'Font Awesome 6 Free';
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-content: '\f054';
  content: var(--tw-content);
}
.banner-swiper .swiper-button-next:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.banner-swiper .swiper-button-next:hover::after{
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){

  .banner-swiper .swiper-button-next{
    right: 1.75rem !important;
    height: 2.5rem;
    width: 2.5rem;
  }
}
.banner-swiper:hover .swiper-button-prev,
.banner-swiper:hover .swiper-button-next{
  visibility: visible;
  opacity: 1;
}
.banner-swiper .swiper-pagination{
  position: absolute;
  right: 50%;
  bottom: 1.25rem !important;
  z-index: 50;
  display: flex;
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.banner-swiper .swiper-pagination:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
@media (min-width: 640px){

  .banner-swiper .swiper-pagination{
    bottom: 1.75rem !important;
  }
}
.banner-swiper .swiper-pagination-bullet{
  margin: 0px !important;
  height: 0.375rem;
  width: 0.75rem;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  opacity: 0.3;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.banner-swiper .swiper-pagination-bullet-active{
  width: 1rem;
  flex-shrink: 0;
  opacity: 1;
}

.menu-swiper .swiper-button-prev,
.menu-swiper .swiper-button-next{
  visibility: visible;
  opacity: 1;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

.apexcharts-tooltip{
  overflow: hidden;
  border-radius: 0.375rem !important;
  border-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
  --tw-shadow: 0px 4px 40px rgba(23, 31, 70, 0.16) !important;
  --tw-shadow-colored: 0px 4px 40px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.apexcharts-tooltip-z-group,
.apexcharts-tooltip-goals-group{
  display: none !important;
}
.apexcharts-tooltip-title{
  margin-bottom: 0px !important;
  border-bottom-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.apexcharts-tooltip-series-group{
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.time-slot-gap { margin: 12px; }
.btnr{
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  --tw-shadow: 0px 3px 8px rgba(0,0,0,0.24);
  --tw-shadow-colored: 0px 3px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btnr:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}
#cursor{
  display: inline-block;
  padding-top: 0.625rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.btnr:active{
  --tw-bg-opacity: 1;
  background-color: rgb(177 176 176 / var(--tw-bg-opacity, 1));
}
.btnr:hover{
  background-color: rgb(77 0 31 / 0.05);
}
.num:hover{
  background-color: rgb(77 0 31 / 0.05);
}
.btnr::-moz-selection {
    -moz-user-select: none;
         user-select: none;
}
.btnr::selection {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.cs-custom-switcher{
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.cs-custom-switcher input{
  position: relative;
  height: 1.5rem;
  width: 2.75rem;
  flex-shrink: 0;
  cursor: pointer;
}
.cs-custom-switcher input::before{
  position: absolute;
  inset: 0px;
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(110 113 145 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}
.cs-custom-switcher input::after{
  position: absolute;
  top: 50%;
  height: 1.25rem;
  width: 1.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(255 255 255 / 0.7) var(--tw-gradient-to-position);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}
.cs-custom-switcher input:where([dir="ltr"], [dir="ltr"] *)::after{
  left: 26%;
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cs-custom-switcher input:where([dir="rtl"], [dir="rtl"] *)::after{
  right: 26%;
  content: var(--tw-content);
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cs-custom-switcher input:checked::before{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.cs-custom-switcher input:checked:where([dir="ltr"], [dir="ltr"] *)::after{
  content: var(--tw-content);
  left: 72%;
}
.cs-custom-switcher input:checked:where([dir="rtl"], [dir="rtl"] *)::after{
  content: var(--tw-content);
  right: 72%;
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px !important;
  }
}

.container.max-w-\[360px\] {
    max-width: 360px !important;
}

@media (min-width: 1536px) {
    .container {
        max-width: 1380px !important;
    }
}
body {
    background-color: rgb(var(--page-bg) / var(--tw-bg-opacity, 1)) !important;
}

/* Hero headline.
   The ported size, clamp(46px, 7.1vw, 104px), was chosen for the reference's
   "BOLD FLAVOUR / PERFECT SLICE.". The current copy is longer: measured in
   the live font at 102px, "UNFORGETTABLE." is 607px wide against a 576px
   copy column, so it overflowed the column and ran under the Order Online
   tile.

   68px is the largest ceiling at which "made unforgettable." still sets on
   one line (560px), so the headline returns to the two balanced lines the
   layout was designed around instead of stranding "MADE" on its own. The
   floor and vw factor are scaled by the same ratio to keep the curve. */
.bf-landing .bf-title {
    /* Anton is a single-weight display face - it reads bold no matter what
       font-weight says, and cannot be lightened. The body face at 400 is what
       actually gives a normal-weight headline. Case and tracking are unchanged. */
    font-family: var(--body);
    font-weight: 400;
    font-size: clamp(34px, 4.7vw, 68px);
    /* The reference set 0.92 for a tight display stack, which left the two
       lines almost touching. 1.12 opens the gap without changing the type
       size. Applies at every width, since the crowding was the same on a
       phone as on a desktop. */
    line-height: 1.12;
}

/* Phones: keep the headline to two lines.
 *
 * Below 480px the ported stylesheet applies
 *   .bf-landing .hero h1 { font-size: clamp(47px, 15vw, 58px) }
 * which is specificity (0,2,1) and so outranks the (0,2,0) rule above —
 * the headline was rendering at 58px, where "made unforgettable." measures
 * 477px against a 343px column and wrapped onto a third line. The selector
 * here is (0,3,0) so it wins, and the query bound matches theirs.
 *
 * The width scales with the font, so the fit holds at any phone size:
 * the string is ~8.22x the font-size, the column is 0.88x the viewport,
 * and at 9.8vw that leaves ~8% slack (0.806 vs 0.88).
 */
@media (max-width: 480px) {
    /* Retuned when the seal moved alongside the headline: the column now
       gives up 118px to it, so the width available for text is
       (0.88 x viewport - 118px). The string measures ~8.22x the font size,
       so the largest size that still sets on two lines is
       (0.88V - 118) / 8.22 ~= 0.107V - 14.4 — hence 10.7vw - 15px. */
    .bf-landing .hero .bf-title { font-size: clamp(18px, calc(10.7vw - 15px), 32px); }
}

/* ============================================================
   LEGIBILITY / TOUCH FIXES
   Defects inherited from the ported stylesheet. The first three are not
   mobile-specific — they measure the same at 1440px — but they are worst
   on a phone, where the surrounding type is smaller.
   ============================================================ */

/* Stats labels were 8px in --muted (#4a3212) on the crimson panel: a
   contrast ratio of 1.58 against WCAG AA's 4.5 minimum, i.e. effectively
   unreadable. White at 86% opacity gives ~6.4. */
.bf-landing .stats-section span {
    font-size: 12px;
    letter-spacing: 1.6px;
    color: rgba(255, 255, 255, 0.86);
}

/* 9px is below any reasonable minimum for body text on a phone. */
.bf-landing .testimonial-track p {
    font-size: 12px;
    letter-spacing: 1.4px;
}

/* The carousel dots were 28x2px and 55x2px — a 2px-tall touch target.
   The button becomes a 24px-tall hit area and the bar is drawn by ::after,
   so the visual is unchanged while the tappable region is not a hairline. */
.bf-landing .testimonial-dots button {
    height: 24px;
    background: transparent;
    position: relative;
}
.bf-landing .testimonial-dots button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: #fffbfb;
    transition: background 0.35s;
}
.bf-landing .testimonial-dots button.active { background: transparent; }
.bf-landing .testimonial-dots button.active::after { background: var(--lux-accent); }

/* ============================================================
   FEATURE STRIP IN THE HERO
   The strip now lives inside .bf-hero-copy under the CTA rather than as a
   full-width section below the hero. That column is ~576px instead of the
   1320px the reference sized it for, so the icon and type step down to fit
   three across. (This also retires the earlier seam fix: the strip no
   longer sits beneath the hero, so it can no longer be overlapped by the
   crimson panel's bottom edge.)
   ============================================================ */
.bf-landing .bf-hero-copy .bf-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    margin: 34px 0 0;
    padding: 0;
}
.bf-landing .bf-hero-copy .bf-features article {
    gap: 10px;
    padding: 0 12px;
}
.bf-landing .bf-hero-copy .bf-features article:first-child { padding-left: 0; }
.bf-landing .bf-hero-copy .bf-features article:last-child { padding-right: 0; }
.bf-landing .bf-hero-copy .bf-ficon {
    width: 42px;
    height: 42px;
}
.bf-landing .bf-hero-copy .bf-ficon svg {
    width: 19px;
    height: 19px;
}
.bf-landing .bf-hero-copy .bf-features h2 {
    font-size: 12px;
    letter-spacing: 0.04em;
}
.bf-landing .bf-hero-copy .bf-features p {
    font-size: 11px;
    line-height: 1.35;
}

/* One row on phones too. Side-by-side icon and text will not fit a ~100px
   column, so each item stacks the icon above its label instead.
   Measured at 360px (the narrowest common phone): the strip is 317px, so a
   column is ~100px, and the longest words — "delivery" at 12px (60px) and
   "exciting" at 11px (40px) — both fit. The type therefore stays at the
   same sizes as desktop rather than shrinking to fit. */
@media (max-width: 860px) {
    .bf-landing .bf-hero-copy .bf-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        -moz-column-gap: 8px;
             column-gap: 8px;
        row-gap: 0;
        margin-top: 24px;
    }
    .bf-landing .bf-hero-copy .bf-features article {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 8px;
        padding: 0 4px;
    }
    .bf-landing .bf-hero-copy .bf-ficon {
        width: 38px;
        height: 38px;
    }
    .bf-landing .bf-hero-copy .bf-ficon svg {
        width: 17px;
        height: 17px;
    }
    .bf-landing .bf-hero-copy .bf-features h2 { font-size: 12px; }
    .bf-landing .bf-hero-copy .bf-features p { font-size: 11px; line-height: 1.3; }
}

/* ============================================================
   SECTION RHYTHM
   The ported design butts its full-bleed bands edge to edge, so every gap
   on this page is 0 by default. Sections added since are meant to sit apart
   instead. One token, applied on both sides, so a new section inherits the
   rhythm rather than having its spacing decided again each time — and so
   the value changes in one place.

   Sibling margins collapse, so neighbours never double up: the venue row's
   72px bottom and the hall's top resolve to one gap, not their sum.
   ============================================================ */
.bf-landing {
    --section-gap: clamp(28px, 4vw, 64px);
    /* The footer is a darker red than the venue panel that closes the page, so
       with nothing between them the two reds butt together and read as one
       band. Padding, not margin: the last section's margin would collapse
       through this wrapper and the gap would never appear. */
    padding-bottom: var(--section-gap);
}
/* Every coloured band is now preceded by a .band-head, whose padding-top
   supplies the space above it — so the bands themselves carry no margin.
   The token still drives that padding, so the rhythm stays in one place. */

/* ============================================================
   PROMO BAND (video)
   Video fills the band; copy sits on the reddened right side, matching the
   reference's mirror of the feast band further down the page.

   The scrim is the brand red rather than the reference's neutral black, so
   the band belongs to the page's palette and the footage reads as part of
   the red section rather than a window cut into it.
   ============================================================ */
.bf-landing .promo-band {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: clamp(380px, 36vw, 520px);
    overflow: hidden;
    background: var(--accent);
    /* spacing comes from --section-gap above; the gap shows the amber page
       base, so it reads as the hero's colour running on, not a bare seam */
}
.bf-landing .promo-media {
    position: absolute;
    inset: 0;
}
/* A still background is framed exactly like the footage it replaces. */
.bf-landing .promo-media video,
.bf-landing .promo-media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    /* the subject sits left of centre in this footage, and the copy covers
       the right, so bias the framing away from the text */
    -o-object-position: 30% center;
       object-position: 30% center;
}
/* Scrim in the band's own red rather than a neutral black, so the footage
   reads as part of the red section instead of a window cut into it.
   77,0,31 is --accent; a gradient needs the channels, not the token. */
.bf-landing .promo-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        270deg,
        rgba(77, 0, 31, 0.95) 0%,
        rgba(77, 0, 31, 0.9) 34%,
        rgba(77, 0, 31, 0.5) 58%,
        rgba(77, 0, 31, 0.1) 82%,
        rgba(77, 0, 31, 0.04) 100%
    );
}
.bf-landing .promo-copy {
    position: relative;
    z-index: 2;
    width: min(52%, 620px);
    padding: 58px 5vw 58px 0;
    margin-right: 5vw;
}
.bf-landing .promo-copy h2 {
    margin: 0 0 16px;
    font-family: var(--display);
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.1;
    text-transform: none;
    color: #fff;
}
.bf-landing .promo-copy p {
    margin: 0 0 18px;
    /* 46ch suited the three-line teaser that used to sit here; against the
       longer welcome text it forced a 25-line column. 68ch stays inside the
       620px measure and keeps the line length readable. */
    max-width: 68ch;
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 246, 232, 0.82);
}
.bf-landing .promo-copy p:last-child {
    margin-bottom: 0;
}
.bf-landing .promo-points {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}
.bf-landing .promo-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 246, 232, 0.9);
}
.bf-landing .promo-points i {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(224, 178, 100, 0.55);
    border-radius: 50%;
    font-size: 15px;
    color: #e0b264;
}

@media (max-width: 900px) {
    /* copy spans the full width, so the scrim runs top-to-bottom instead */
    .bf-landing .promo-band {
        justify-content: stretch;
        min-height: 440px;
    }
    /* Flat --accent at 45%, the same tint the hero tiles use, in place of a
       ramp that reached 0.90-0.95 over the copy. At those values the footage
       played but read as a solid red block. Legibility comes from the text
       shadow on .promo-copy below instead, which costs the video nothing. */
    .bf-landing .promo-band::after {
        background: rgba(77, 0, 31, 0.45);
    }
    .bf-landing .promo-media video,
    .bf-landing .promo-media img { -o-object-position: center; object-position: center; }
    .bf-landing .promo-copy {
        width: auto;
        margin: 0;
        padding: 48px 6vw;
        /* Inherited by the heading, paragraphs and the points list, so one
           declaration carries the legibility the scrim used to buy with
           opacity. */
        text-shadow: 0 1px 4px rgba(40, 4, 6, 0.8);
        color: rgba(255, 246, 232, 0.96);
    }
    /* Both set their own colour, so the value on .promo-copy above does not
       reach them - and 0.82 was tuned against a near-solid scrim. */
    .bf-landing .promo-copy p,
    .bf-landing .promo-points li {
        color: rgba(255, 246, 232, 0.96);
    }
    .bf-landing .promo-points { gap: 12px 22px; }
}

/* Reduced motion no longer removes the footage — that left the band flat red
   with nothing in it, which looked like the video had failed. The component
   pauses the video instead (see mounted()), so its poster frame stays on
   screen: the imagery without the movement. */

/* ============================================================
   PRIVATE HALL
   Copy on a deep crimson panel at the left, photograph filling the right,
   following the supplied reference. The reference's plum ground is taken
   here from --accent-deep, the palette's own deep crimson, and its gold
   heading from the same #e0b264 used on the discount seal — so the section
   reads as this page rather than a pasted-in one.

   Also the section that now separates the amber menu from the amber venue
   row, which had been running together as one block of colour.
   ============================================================ */
.bf-landing .hall-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--accent-deep);
}
.bf-landing .hall-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 5vw, 84px) clamp(24px, 4vw, 64px);
    text-align: center;
}
.bf-landing .hall-copy h2 {
    margin: 0 0 26px;
    font-family: var(--display);
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.1;
    text-transform: none;
    color: #e0b264;
}
.bf-landing .hall-copy p {
    margin: 0 0 22px;
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 246, 232, 0.92);
}
.bf-landing .hall-copy p:last-child {
    margin-bottom: 0;
}
/* the standfirst carries the offer in one line — held apart from the body */
.bf-landing .hall-copy .hall-lead {
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.bf-landing .hall-media {
    position: relative;
    /* the photo is 600x480; without a floor the column would collapse to the
       copy's height on short text and letterbox it */
    min-height: clamp(320px, 34vw, 560px);
}
.bf-landing .hall-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

@media (max-width: 900px) {
    /* no room for two columns — photo first, then the copy under it */
    .bf-landing .hall-section {
        grid-template-columns: 1fr;
    }
    .bf-landing .hall-media {
        order: -1;
        min-height: 260px;
    }
    .bf-landing .hall-copy {
        padding: 44px 6vw 52px;
    }
}


/* ============================================================
   BAND HEADS
   Headings for the coloured bands (video, private hall, chef, stats) live
   outside their band, on the amber page base, so they can carry the same
   red eyebrow / black heading pair as the menu and gallery heads. Black
   only works out here — inside the crimson it measured 2.51:1.

   Matches the horizontal padding of .interactive-menu / .gallery-section
   (8vw, 20px on small screens) so every section head on the page lines up
   on the same left edge. The padding-top is also what separates one band
   from the next, replacing the margins the bands used to carry.
   ============================================================ */
.bf-landing .band-head {
    padding: var(--section-gap) 8vw 0;
}
.bf-landing .band-head .section-head {
    margin-bottom: clamp(32px, 4vw, 58px);
}
/* The bands themselves have no bottom padding, so a head after one needs its
   own. .gallery-section does (135px, 90px small), and the two stacked to
   264px of empty amber — twice every other head. Let its padding do the job.
   Sibling margins collapse; padding does not, so this has to be explicit. */
.bf-landing .gallery-section + .band-head {
    padding-top: 0;
}


/* ============================================================
   FOOD IMAGERY WASHED INTO THE PALE SECTIONS
   Our own dish photography behind the copy, per the reference.

   The photos are rectangular, so a plain faded image would read as a grey
   box rather than a watermark. A radial mask feathers the edges away to
   nothing, and the frame is pushed past the section edge, so what is left is
   the middle of the dish dissolving into the ground.

   Absolutely positioned elements paint above static ones, so the copy is
   lifted to z-index 1 rather than the image being pushed to -1 — at -1 it
   would sit behind the section's own background and never be seen.
   ============================================================ */
.bf-landing .interactive-menu,
.bf-landing .testimonials,
.bf-landing .gallery-section,
.bf-landing .page-cta {
    position: relative;
    overflow: hidden;
}
.bf-landing .interactive-menu > *:not(.bg-food),
.bf-landing .testimonials > *:not(.bg-food),
.bf-landing .gallery-section > *:not(.bg-food),
.bf-landing .page-cta > *:not(.bg-food) {
    position: relative;
    z-index: 1;
}
.bf-landing .bg-food {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: clamp(320px, 42vw, 620px);
    height: auto;
    opacity: 0.17;
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        #000 30%,
        rgba(0, 0, 0, 0.45) 55%,
        transparent 74%
    );
    mask-image: radial-gradient(
        ellipse at center,
        #000 30%,
        rgba(0, 0, 0, 0.45) 55%,
        transparent 74%
    );
}
.bf-landing .bg-food-right {
    top: -8%;
    right: -9vw;
}
.bf-landing .bg-food-left {
    bottom: -14%;
    left: -10vw;
}
/* The gallery is nothing but photographs below its heading, so this one is
   pinned to the head rather than centred on the section — anywhere lower and
   it would sit behind the masonry and never be seen. */
.bf-landing .bg-food-topleft {
    top: -10%;
    left: -9vw;
}
.bf-landing .bg-food-bottomright {
    bottom: -16%;
    right: -8vw;
}
/* Percentage top resolves against the section's own height, so on the tall
   category grid this lands around its middle rather than near the head. */
/* Wash behind the hero tiles. Hidden by default - the crimson panel fills that
   area on desktop - and shown on phones, where the panel was removed. Stretched
   to the tile group rather than the fixed clamp width the other washes use. */
/* Anchored at opposite corners and allowed to bleed past the group, rather than
   filling it: a wash the same size as the tiles sits entirely behind them and is
   never seen. These read in the space around and between the cards. */
.bf-landing .bg-food-tiles,
.bf-landing .bg-food-tiles-alt { display: none; }
@media (max-width: 860px) {
    .bf-landing .bg-food-tiles,
    .bf-landing .bg-food-tiles-alt {
        display: block;
        width: clamp(220px, 58vw, 400px);
        height: auto;
    }
    /* Pulled well above the group so a good part of it lands in the gap between
       "Home Delivery & Takeaway" and the tiles, instead of only peeking past the
       top corner. Nothing clips it - .bf-tiles sets no overflow. */
    .bf-landing .bg-food-tiles {
        top: -46%;
        left: -8vw;
        width: clamp(260px, 68vw, 460px);
    }
    .bf-landing .bg-food-tiles-alt {
        bottom: -7%;
        left: -10vw;
    }
}

.bf-landing .bg-food-midleft {
    top: 42%;
    left: -9vw;
}

/* On a phone the copy runs the full width rather than sitting in a column
   beside the wash, so it is eased back a little — smaller, and 12% instead
   of 17% — and pulled further off the edge. Most of what sits over it here
   is opaque (category cards, gallery photos) or large near-black type, so
   this costs nothing measurable in contrast. */
@media (max-width: 720px) {
    .bf-landing .bg-food {
        width: clamp(230px, 76vw, 400px);
        opacity: 0.14;
    }
    /* Pixel offsets here, not percentages. A percentage resolves against the
       section's height, and on a phone the category grid runs to ~2675px and
       the gallery to ~3955px — so top: -10% put those images ~400px above
       their own section and the overflow clipped them away entirely.
       Anchored to a fixed distance from the edge instead, they land in the
       open ground around each section head and foot, which is the only
       background a phone leaves visible: the cards and gallery photos are
       opaque and span the full width. */
    .bf-landing .bg-food-right {
        top: 16px;
        bottom: auto;
        right: -18vw;
    }
    .bf-landing .bg-food-topleft {
        top: 16px;
        bottom: auto;
        left: -18vw;
    }
    .bf-landing .bg-food-midleft {
        top: auto;
        bottom: 24px;
        left: -18vw;
    }
    .bf-landing .bg-food-left {
        top: auto;
        bottom: 16px;
        left: -18vw;
    }
    .bf-landing .bg-food-bottomright {
        top: auto;
        bottom: 16px;
        right: -14vw;
    }
}

/* ============================================================
   SECTION HEADS ON PHONES
   .section-head is a space-between row, which works at desktop width but on
   a phone squeezes both halves: the eyebrow broke onto two lines ("OUR /
   MENU") and the heading onto two or three. Stacking them gives each the
   full column, so the eyebrow fits on one line and the heading has the whole
   width to work with before it needs to shrink.

   The headings then hold one line via nowrap, with the size driven by vw so
   the longest one ("Welcome to Safrans Restaurant", 29 characters) still
   fits the 320px available at 360px wide.

   Vertical spacing is pulled in at the same time — at phone size the desktop
   rhythm left far more air around the headings than they needed.
   ============================================================ */
@media (max-width: 620px) {
    .bf-landing .section-head {
        display: block;
    }
    .bf-landing .section-head .eyebrow {
        margin-bottom: 10px;
        white-space: nowrap;
    }
    .bf-landing .section-head h2 {
        font-size: clamp(16px, 6.6vw, 30px);
        white-space: nowrap;
    }
    .bf-landing .band-head .section-head,
    .bf-landing .section-head {
        margin-bottom: 22px;
    }
}

/* ============================================================
   CHEF QUOTE
   Both lines were inherited from the ported palette, which assumed an amber
   ground. On the crimson band the quote came out at 1.58:1 and the signature
   at 1.0:1 — the signature was literally the background colour and could not
   be seen at all. Cream for the quote, the lighter gold for the signature.
   ============================================================ */
.bf-landing .chef-copy blockquote {
    color: rgba(255, 246, 232, 0.94);
}
.bf-landing .chef-copy .signature-script {
    color: #f0cb8e;
}

@media (max-width: 900px) {
    .bf-landing .band-head {
        padding-left: 20px; padding-right: 20px;
    }
}

/* ============================================================
   MASONRY GALLERY — HEIGHTS FOR ANY NUMBER OF FIGURES
   The ported stylesheet hard-codes heights for :nth-child(1) through (4)
   only. The figures have no intrinsic height (their img is height:100%),
   so a fifth or later figure collapses to zero and renders as nothing.
   The ported rhythm is 610 / 420 / 420 / 610, so this repeats it every
   four instead of stopping, and the gallery can hold any count.
   ============================================================ */
.bf-landing .masonry-gallery figure:nth-child(4n + 1),
.bf-landing .masonry-gallery figure:nth-child(4n + 4) { height: 610px; }
.bf-landing .masonry-gallery figure:nth-child(4n + 2),
.bf-landing .masonry-gallery figure:nth-child(4n + 3) { height: 420px; }

/* ============================================================
   KITCHEN GALLERY
   Replaces the chef section's single portrait with a scrolling row of the
   restaurant's own dishes.

   .chef-section is a 1.08fr / 0.92fr grid with a 760px column height, so
   the rail fills that column and scrolls horizontally inside it — the
   section's own layout is untouched.
   ============================================================ */
.bf-landing .chef-gallery {
    position: relative;
    height: 760px;
    overflow: hidden;
}
.bf-landing .chef-gallery-track {
    display: flex;
    height: 100%;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-landing .chef-gallery figure {
    position: relative;
    /* full width each, so exactly one photo fills the column and the rest
       wait off to the side */
    flex: 0 0 100%;
    margin: 0;
    overflow: hidden;
}
.bf-landing .chef-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-landing .chef-gallery figure:hover img { transform: scale(1.05); }
.bf-landing .chef-gallery figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 16px;
    background: linear-gradient(0deg, rgba(21, 12, 12, 0.88), transparent);
    color: #fff;
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Slide indicators, doubling as manual controls. 24px tall so they are a
   real touch target rather than the 2px hairline the ported testimonial
   dots shipped with. */
.bf-landing .chef-gallery-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 9px;
}
.bf-landing .chef-gallery-dots button {
    position: relative;
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.bf-landing .chef-gallery-dots button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.3s;
}
.bf-landing .chef-gallery-dots button.active::after { background: #fff; }

@media (prefers-reduced-motion: reduce) {
    .bf-landing .chef-gallery-track { transition: none; }
}

@media (max-width: 900px) {
    /* the chef section stacks here, so the slideshow gets a shorter band */
    .bf-landing .chef-gallery { height: 380px; }
}

/* ============================================================
   VENUE SECTION
   Reference layout: a solid panel of copy on the left, a rail of venue
   views running off the right edge.

   Theme colours rather than the reference's green — crimson panel, cream
   type, the same gold CTA the rest of the page uses. The rail bleeds past
   the right edge on purpose, which is what signals it scrolls.
   ============================================================ */
.bf-landing .venue-section {
    display: grid;
    grid-template-columns: minmax(280px, 30%) 1fr;
    align-items: stretch;
    background: var(--panel);
    /* No margin needed: the private hall's .band-head sits directly below and
       its padding-top provides the separation. */
}
.bf-landing .venue-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 72px 4vw;
    background: var(--accent);
    color: #fff;
}
.bf-landing .venue-intro .eyebrow { color: rgba(255, 240, 214, 0.92); }
.bf-landing .venue-intro .eyebrow span { background: rgba(255, 240, 214, 0.92); }
.bf-landing .venue-intro h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(30px, 3.1vw, 46px);
    line-height: 1.04;
    text-transform: uppercase;
    color: #fff;
}
.bf-landing .venue-copy {
    margin: 0;
    max-width: 30ch;
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 240, 214, 0.86);
}

/* ============================================================
   VENUE CONTACT
   Address and phone for the sister restaurant, between the blurb and the
   CTA. Cream at 0.86 like .venue-copy rather than full white, so the gold
   button stays the brightest thing in the panel and keeps the eye.

   <address> is italic by default in every browser, hence the font-style
   reset. The icons are sized in em so they track the 13px text.
   ============================================================ */
.bf-landing .venue-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 0;
    max-width: 30ch;
    font-style: normal;
    font-family: var(--body);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 240, 214, 0.86);
}
/* Grid rather than flex: the address wraps to a second line, and flex would
   centre the icon against the whole wrapped block. Two columns keep the icon
   on the first line with the text aligned to one left edge underneath. */
.bf-landing .venue-contact-line {
    display: grid;
    grid-template-columns: 1em 1fr;
    gap: 9px;
    align-items: start;
    color: inherit;
    text-decoration: none;
}
.bf-landing .venue-contact-line i {
    font-size: 1em;
    /* the glyphs sit slightly high against the cap height at this size */
    margin-top: 2px;
    /* NOT --lux-accent: that token is #4d001f, the same crimson as this
       panel, so the glyphs would vanish. The gold the chef signature uses. */
    color: #f0cb8e;
}
/* Only the phone is a link. Underline on interaction rather than always, so
   the block reads as one contact card at rest. */
.bf-landing a.venue-contact-line:hover,
.bf-landing a.venue-contact-line:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bf-landing .venue-cta {
    align-self: flex-start;
    margin-top: 8px;
}

.bf-landing .venue-rail {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bf-landing .venue-rail::-webkit-scrollbar { display: none; }

.bf-landing .venue-card {
    position: relative;
    /* grow, don't shrink. With a fixed basis the three cards came to ~968px
       and left a bare amber strip on the right of wide screens (376px at
       1920). Growing lets them share out whatever the rail has spare, while
       shrink:0 keeps them at full size and scrolling when the rail is
       narrower than their combined width. */
    flex: 1 0 clamp(210px, 24vw, 320px);
    margin: 0;
    overflow: hidden;
    scroll-snap-align: start;
    /* the rail's height follows the copy panel, so the cards fill it */
    min-height: 340px;
}
.bf-landing .venue-card img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-landing .venue-card:hover img { transform: scale(1.05); }
.bf-landing .venue-card figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 18px;
    background: rgba(77, 0, 31, 0.86);
    color: #fff;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Stacked below 900px: the copy panel sits above a full-width rail, which
   keeps the cards large enough to read on a phone. */
@media (max-width: 900px) {
    .bf-landing .venue-section { grid-template-columns: 1fr; }
    .bf-landing .venue-intro {
        padding: 54px 6vw;
        text-align: center;
        align-items: center;
    }
    .bf-landing .venue-copy { max-width: none; }
    /* The intro centres here. align-items shrinks each line to its own text
       so the pair centres as a group; the lines stay left-aligned inside, or
       the wrapped second line of the address would ladder about. */
    .bf-landing .venue-contact { max-width: none; align-items: center; }
    .bf-landing .venue-contact-line { text-align: left; }
    .bf-landing .venue-cta { align-self: center; }
    .bf-landing .venue-card {
        flex-basis: min(72vw, 300px);
        min-height: 260px;
    }
    .bf-landing .venue-rail { padding-right: 6vw; }
}

/* ============================================================
   DESKTOP NAV — ICON ABOVE LABEL
   Restyles the header nav in the reference's shape: a small icon stacked
   over its label, evenly spaced. Desktop only — the nav itself is
   `hidden lg:flex`, so this is bounded to lg: and up and the mobile bar is
   untouched.

   Theme colours throughout, not the reference's black bar: the header keeps
   its own background (white, or amber on the home page), labels use
   --heading, and the active/hover state is the crimson --primary the rest
   of the nav already used. Only the arrangement is borrowed.

   Not scoped to the home page: this is the shared header, and an icon nav
   on one page with a text nav on the next would read as a bug.
   ============================================================ */
@media (min-width: 1024px) {
    .ff-header .ff-nav {
        align-items: flex-start;
        gap: 34px;
    }
    .ff-header .ff-nav > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        min-width: 68px;
        line-height: 1.1;
        text-align: center;
        transition: color 0.25s;
    }
    .ff-header .ff-nav > a > i {
        font-size: 19px;
        line-height: 1;
        /* slightly lighter than the label so the word stays dominant */
        opacity: 0.78;
        transition: opacity 0.25s, transform 0.25s;
    }
    .ff-header .ff-nav > a > span {
        font-size: 14px;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }
    .ff-header .ff-nav > a:hover { color: rgb(var(--primary)); }
    .ff-header .ff-nav > a:hover > i {
        opacity: 1;
        transform: translateY(-1px);
    }
    /* the active link already gets .text-primary from the component */
    .ff-header .ff-nav > a.text-primary > i { opacity: 1; }
}

/* ============================================================
   DISCOUNT SEAL
   Circular promo sticker replacing the old .bf-badge ribbon. Absolutely
   positioned so it never enters the hero's flow — on phones the crimson
   tile panel has to stay above the fold, and an in-flow badge would push
   it down.

   Palette follows the page rather than the black-and-gold reference: a
   crimson disc with a gold ring, cream type and a white banner.
   ============================================================ */
.bf-landing .bf-seal {
    position: absolute;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background: var(--accent);
    /* double ring, as in the reference: thin outer, gap, thicker inner */
    border: 2px solid #f0c46a;
    box-shadow: 0 0 0 4px var(--accent), 0 0 0 6px rgba(240, 196, 106, 0.85),
                0 18px 34px -18px rgba(60, 8, 10, 0.9);
    transform: rotate(-11deg);
}
.bf-landing .bf-seal-eyebrow {
    font-family: var(--body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 240, 214, 0.9);
}
.bf-landing .bf-seal-value {
    margin-top: 2px;
    font-family: var(--display);
    font-size: 46px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
}
/* Banner across the lower third, running past the disc on both sides with
   notched ends. */
.bf-landing .bf-seal-ribbon {
    position: relative;
    margin-top: 6px;
    padding: 5px 20px;
    width: calc(100% + 34px);
    text-align: center;
    background: #fff;
    color: var(--accent);
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px -8px rgba(60, 8, 10, 0.8);
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%,
                       0 100%, 9px 50%);
}

/* Desktop: in flow inside the CTA row, immediately right of Order Now.
   Being a sibling of the button means it tracks the button's position at
   every width instead of needing a hand-tuned offset. */
@media (min-width: 861px) {
    .bf-landing .bf-actions {
        display: flex;
        align-items: center;
        gap: 30px;
    }
    .bf-landing .bf-seal {
        position: static;
        flex: none;
        width: 132px;
        height: 132px;
    }
    .bf-landing .bf-seal-value { font-size: 38px; }
    .bf-landing .bf-seal-eyebrow { font-size: 8px; letter-spacing: 0.15em; }
    .bf-landing .bf-seal-ribbon {
        margin-top: 5px;
        padding: 4px 16px;
        width: calc(100% + 26px);
        font-size: 9px;
    }
}

/* ============================================================
   HERO TILE MOSAIC
   Sits on the hero's crimson panel, replacing the circular photo
   and "Our Special" rail that were removed. One tall tile beside
   two stacked ones.

   .bf-crimson is the right 42% of the hero at desktop and a
   full-width band across the bottom below 860px, so the mosaic
   follows it: absolutely placed over the panel on desktop, and
   centred in the flow on small screens — the same treatment the
   removed .bf-art had.
   ============================================================ */
.bf-landing .bf-tiles {
    position: absolute;
    z-index: 2;
    top: 50%;
    /* tightened from 4.5vw to buy width for the larger tiles */
    right: 2.5vw;
    /* centred, then lifted 40px — sits a little above the hero's midline */
    transform: translateY(calc(-50% - 40px));
    /* every size below is the earlier value at 85% — the mosaic was scaled
       down as one block, so the 2-column arrangement and proportions hold */
    /* Widened from min(32vw, 442px). Bounded by .bf-crimson, which starts at
       58% of the viewport: at 1280 this leaves the mosaic ~45px inside the
       panel edge, so it grows without spilling onto the amber. */
    width: min(35vw, 470px);
    /* square rather than 1.08 landscape: height is unconstrained here, so
       this is where the tiles can grow most freely */
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* One value drives both arrangements - the desktop mosaic and the phone
       banner-over-pair - so the tiles read as one block rather than three
       separate cards. */
    gap: 8px;
}

/* The mosaic cannot simply scale up: it has to stay inside .bf-crimson
   (42% of the hero), and the panel itself cannot widen without running into
   .bf-hero-copy, which reaches 5vw + min(50%, 620px) from the left. Those
   two only stop competing above ~1280px, so the panel widens and the tiles
   take the extra room only from there. */
@media (min-width: 1280px) {
    .bf-landing .bf-crimson { width: 46%; }
    .bf-landing .bf-tiles { width: min(36vw, 524px); }
}

/* Extra width only, height held at its previous value. The panel can reach
   50% once the viewport is wide enough that .bf-hero-copy (5vw + 620px) no
   longer reaches into it — that crossover is ~1378px, hence 1400. Below
   this the copy and the panel are already nearly touching, so there is no
   width left to give. */
@media (min-width: 1400px) {
    .bf-landing .bf-crimson { width: 50%; }
    .bf-landing .bf-tiles {
        right: 1.5vw;
        width: min(41vw, 580px);
        /* explicit height overrides the square aspect-ratio above, so the
           tiles widen without growing any taller */
        height: min(36vw, 524px);
        aspect-ratio: auto;
    }
}

/* Order Online breaks out of the crimson panel onto the amber field.
 *
 * The overhang is calculated, not a fixed negative margin. The mosaic is
 * anchored to the right edge while the panel edge sits at 50vw, so the two
 * drift apart as the viewport grows — a fixed margin would overhang at
 * 1440px and then sit entirely inside the panel on a 1920px screen. This
 * keeps it at a constant 60px everywhere:
 *
 *   tile left  = 100vw - 1.5vw - 580px + margin-left
 *   target     = 50vw - 48px
 *   margin-left = 532px - 48.5vw
 *
 * Recalculated after the mosaic was scaled to 85%: the width it is measured
 * from went 682px -> 580px. The target is unchanged, so Order Online still
 * breaks the panel edge by the same 48px and the copy beside it is unaffected.
 *
 * Bounded at 1415px, the width at which the 580px cap takes over from 41vw
 * (580 / 0.41); below that the formula no longer holds.
 */
@media (min-width: 1415px) {
    .bf-landing .bf-tile-order { margin-left: calc(532px - 48.5vw); }
}

/* The copy is trimmed only across the band where the incoming tile would
 * otherwise reach it; past ~1560px the panel edge has moved far enough right
 * that the copy keeps its full 620px.
 *
 * 576px, not less: .bf-title is clamp(46px, 7.1vw, 104px), and at the 104px
 * ceiling "PERFECT SLICE." measures ~561px. A 560px column wrapped it onto a
 * third line on 1600px and wider screens — the headline is the constraint
 * here, not the paragraph.
 */
@media (min-width: 1421px) and (max-width: 1560px) {
    .bf-landing .bf-hero-copy { width: min(44%, 576px); }
}

/* Below 1180px the ported stylesheet narrows .bf-crimson from 42% to 38%,
   so the tiles have to give width back or they hang off the panel onto the
   amber. Bounded at both ends: the mobile rule below owns <=860px. */
@media (min-width: 861px) and (max-width: 1180px) {
    .bf-landing .bf-tiles { width: min(32vw, 470px); }
}

.bf-landing .bf-tile-order { grid-row: span 2; }

.bf-landing .bf-tile {
    position: relative;
    display: block;
    /* grid children default to min-height:auto, which lets a tall image
       push the row past its track */
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.22);
    border: 3px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 22px 40px -20px rgba(60, 8, 10, 0.85);
}
/* dashed while the image file is still missing */
.bf-landing .bf-tile.is-empty {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.42);
}
.bf-landing .bf-tile img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-landing .bf-tile:hover img { transform: scale(1.06); }

/* The label is two pieces on the photo: a tagline sitting directly on the
   image, and the action name inside a tinted pill below it. The wrapper
   itself is only positioning - it carries no background of its own, so the
   tint is on the button and the tagline reads against the artwork.

   One font-size on the wrapper drives both: the name inherits it and the
   tagline is 0.8em of it, so a breakpoint sets a single value. */
.bf-landing .bf-tile-label {
    position: absolute;
    /* Centred on the photo on both axes, so the block reads as the tile's
       title rather than a corner tag. */
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 24px);
    color: #fff;
    font-family: var(--body);
    /* Drives both children (tagline 0.8em, pill 0.78em). 17px is the ceiling
       for the 1280-1399px band, where the mosaic is still min(35vw, 470px) and
       the right column only ~208px: "TABLE RESERVATION" is nowrap here, and at
       18px it runs past the label's max-width. The >=1400px block below takes
       it considerably further, once the mosaic widens to min(41vw, 580px). */
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* On the bare photo, with no tint behind it, so the shadow is doing all the
   separating and is heavier than the one inside the pill. */
.bf-landing .bf-tile-tagline {
    display: block;
    /* the wrapper's nowrap would push this off the narrow tiles */
    white-space: normal;
    font-size: 0.8em;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    text-shadow: 0 1px 5px rgba(40, 4, 6, 0.9), 0 0 2px rgba(40, 4, 6, 0.6);
}

/* The button proper. --accent (#4d001f) at 45%, and deliberately no backdrop
   blur: the blur smears the photo behind the pill, which is exactly the
   detail that should stay readable through the tint. */
.bf-landing .bf-tile-name {
    display: block;
    /* Smaller than the tagline above it. The wrapper font-size still sets the
       scale for both, so this stays proportional at every breakpoint while
       the tagline keeps the size it had. */
    font-size: 0.78em;
    padding: 9px 16px;
    /* One line always: "Table Reservation" wrapped to two below 1280px, where
       the wrapper switches to white-space: normal for the tagline's sake. */
    white-space: nowrap;
    /* Tighter than the wrapper's tracking - 17 characters of it was most of
       what pushed the longest label past the narrow tiles. */
    letter-spacing: 0.03em;
    border-radius: 999px;
    background: rgba(77, 0, 31, 0.45);
    text-shadow: 0 1px 3px rgba(40, 4, 6, 0.55);
    transition: background 0.3s;
}
.bf-landing .bf-tile:hover .bf-tile-name {
    /* opaque on hover, so the button firms up under the pointer */
    background: var(--accent);
}

/* Below 1280px the right-hand tiles fall to ~117-155px wide, and
   "Table Reservation" on one line no longer fits — with nowrap and a
   max-width that clipped the text rather than shrinking it. Here the label
   is allowed to wrap and steps down a size, so it stays legible and inside
   the tile. Two steps, because the tiles shrink a long way across this
   range. */
@media (max-width: 1279px) {
    .bf-landing .bf-tile-label {
        max-width: calc(100% - 20px);
        font-size: 12px;
        line-height: 1.3;
        letter-spacing: 0.06em;
        white-space: normal;
        gap: 8px;
    }
    .bf-landing .bf-tile-name { padding: 6px 11px; }
}
/* At 861-1023px the mosaic is at its smallest — the right column is only
   ~117px wide, so even the wrapped word "Reservation" has to come down
   again to stay inside it. */
@media (max-width: 1023px) {
    .bf-landing .bf-tile-label {
        font-size: 10px;
        gap: 6px;
    }
    .bf-landing .bf-tile-name { padding: 4px 8px; }
}
/* The 1023px step above was tuned for the desktop mosaic at its narrowest.
   Phones are below that breakpoint but their tiles are the biggest on the
   page - Order Now spans the full width - so the label goes back up rather
   than inheriting a size meant for a 117px column. */
@media (max-width: 860px) {
    .bf-landing .bf-tile-label {
        font-size: 16px;
        gap: 9px;
    }
    /* Phones: capped at the 0.78em the wrapper would give, but allowed to
       shrink with the viewport so "BOOK CATERING" and "TABLE RESERVATION"
       still hold one line on the half-width tiles of a narrow phone.
       Measured at 360px, the narrowest common phone: the pair columns are
       ~165px, leaving ~145px inside the label, and the longest pill comes
       out ~139px here. */
    .bf-landing .bf-tile-name {
        padding: 8px 11px;
        font-size: clamp(10px, 2.95vw, 12px);
    }
    /* Order Now spans the full width on phones rather than sharing a row, so
       it has roughly twice the room and does not need the pair's ceiling. */
    .bf-landing .bf-tile-order .bf-tile-label {
        font-size: 20px;
    }
    .bf-landing .bf-tile-order .bf-tile-name {
        font-size: 15px;
        padding: 9px 16px;
    }
    /* The section carries .hero as well as .bf-hero, and .hero sets a fixed
       `height: 100vh`. On phones the mosaic sits in the flow, so the hero's
       content is taller than the viewport (scrollHeight 995 vs height 844)
       and .bf-hero's `overflow: hidden` was cutting the bottom off the
       Table Reservation tile. Let the hero grow instead. */
    .bf-landing .bf-hero {
        height: auto;
        /* Was 100vh. On a phone the stacked content finishes well before the
           viewport does, so the viewport floor was padding the hero out with
           empty ground between the feature strip and the next section. The
           content decides the height now. */
        min-height: 0;
        padding-bottom: 26px;
        /* Trimmed 28px -> 12px to close the gap under the header. The seal is
           anchored to the hero's top edge rather than to this padding, so it
           keeps its position beside the headline; the title's own
           padding-right is what stops the two colliding, not this. */
        padding-top: 12px;
    }

    .bf-landing .bf-tiles {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        /* 92vw is the practical ceiling — the viewport itself is the limit
           here, so the extra size comes mostly from the squarer ratio */
        width: min(92vw, 520px);
        /* the desktop lift is a transform; here the mosaic is in the flow,
           so the equivalent is a smaller top margin */
        margin: 20px auto 0;
    }
}

/* ============================================================
   MOBILE: RED PANEL DIRECTLY BELOW THE HERO TEXT
   Goal is that the whole crimson tile panel is on screen when the page
   opens, without scrolling.

   Ordering problem: .bf-features sits inside .bf-hero-copy while .bf-tiles
   is a sibling of that wrapper, so the two cannot be ordered against each
   other. display:contents dissolves the wrapper, making badge / title /
   script / CTA / features and the tiles all flex items of .bf-hero, which
   can then be ordered. The wrapper's 6vw side margin moves onto the hero
   as padding, and the panel cancels it with negative margins to stay
   full-bleed.

   .bf-crimson is anchored to the hero's bottom, which is no longer where
   the tiles are, so on phones the panel carries its own crimson background
   and the decorative band is dropped.
   ============================================================ */
@media (max-width: 860px) {
    .bf-landing .bf-hero {
        display: flex;
        flex-direction: column;
        /* .hero resolves to align-items: flex-end, which makes the flex items
           shrink to their content instead of filling the column. The panel's
           width then depends on how its fr tracks happen to resolve — it came
           out full-bleed at 390px but only 277px at 375px. */
        align-items: stretch;
        padding-left: 6vw;
        padding-right: 6vw;
    }
    .bf-landing .bf-hero-copy { display: contents; }
    .bf-landing .bf-crimson { display: none; }

    .bf-landing .bf-tiles {
        order: 2;
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: auto;
        max-width: none;
        margin: 0 -6vw 0;
        /* Sides trimmed 5vw -> 3vw, which is what widens the tiles on a phone.
           Top dropped from 24px: it was headroom inside the crimson panel,
           which phones no longer draw, so it was empty page above Order Now. */
        padding: 0 3vw 28px;
        /* No crimson panel behind the tiles on phones - they sit straight on the
           page field. The labels carry their own tint, so they still read;
           the side padding and radii are kept so the tiles hold their place. */
        background: transparent;
        /* 36px, not the 90px the reference used on its full-width band.
           The tiles sit 24px below the top edge and ~19px in from the sides,
           and a 90px corner is still curving there: the corner point (19.5,
           24) against a circle of radius 90 gives 9326 > 8100, i.e. outside
           the panel, so the tiles' top corners overhung onto the amber. At
           36px the same point gives 416 <= 1296, comfortably inside. */
        border-top-left-radius: 36px;
        border-top-right-radius: 36px;
        /* Explicit rows: without aspect-ratio the 1fr tracks would collapse,
           because the tiles have no intrinsic height of their own.

           The height is derived from the viewport so the panel always ends
           above the fold. Everything above it (header, badge, headline,
           script, CTA) measures a near-constant ~450px regardless of phone
           width, and the panel's own padding and gap add ~66px — so the
           space left for two rows is (100vh - ~430px), i.e. 50vh - 215px
           each; 220 leaves a few px of margin. A fixed 148px overflowed a
           667px-tall screen by 145px.

           Retuned from 262 when the Order Now button was hidden on phones:
           the content above lost ~88px, and leaving the old constant would
           have kept the tiles smaller than the space now allows. */
        aspect-ratio: auto;
        grid-template-rows: repeat(2, clamp(70px, calc(50vh - 220px), 148px));
    }

    .bf-landing .bf-hero-copy .bf-features { order: 3; }
    .bf-landing .cinematic-scroll { display: none; }
    /* The amber dot grid is pure decoration and there is no room for it at
       this width. It is anchored to the desktop mosaic's bottom-right corner
       (see the .bf-dots-bl block lower down), and the mosaic reflows to a
       full-width banner over a pair here, so that anchor means nothing. */
    .bf-landing .bf-dots-bl { display: none; }

    /* Phones: no corner is genuinely free for an absolute sticker — the
       headline spans the full column and the panel's own corners hold
       tiles. It instead takes the top-right of the hero in flow, in the
       band the ribbon used to occupy, so it reserves its own height
       rather than landing on top of the headline. It is the first flex
       item because it precedes .bf-hero-copy in the markup. */
    .bf-landing .bf-seal {
        position: relative;
        align-self: flex-end;
        margin: 0 0 4px auto;
        width: 96px;
        height: 96px;
        transform: rotate(-11deg);
    }
    .bf-landing .bf-seal-eyebrow { font-size: 7px; letter-spacing: 0.14em; }
    .bf-landing .bf-seal-value { font-size: 30px; }
    .bf-landing .bf-seal-ribbon {
        margin-top: 4px;
        padding: 3px 12px;
        width: calc(100% + 22px);
        font-size: 8px;
        letter-spacing: 0.12em;
        clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%,
                           0 100%, 6px 50%);
    }

    /* Order Now is hidden on phones — the tile panel below carries the same
       action. display:none also takes it out of the tab order, so it is not
       reachable while invisible. Desktop keeps the button.

       The row itself becomes display:contents rather than display:none,
       because the seal lives inside it and must survive: a descendant of a
       display:none box is not rendered at all, absolute or not. With the
       row dissolved, the seal's containing block falls through to .bf-hero. */
    .bf-landing .bf-hero-copy .bf-actions { display: contents; }
    .bf-landing .bf-hero-copy .bf-actions .bf-btn { display: none; }

    /* The hero clips by default, which would cut the seal off where it rises past
       the top edge. Nothing here bleeds right, so dropping the clip on phones costs
       no horizontal overflow. */
    .bf-landing .bf-hero { overflow: visible; }

    /* Seal sits beside the headline, at the right edge. Absolute, so it
       stays out of the flow and cannot push the tile panel below the fold. */
    .bf-landing .bf-seal {
        position: absolute;
        /* Lifted above the hero so roughly half of it sits on the white header
           block, tying the two sections together. */
        top: -32px;
        right: 4vw;
        margin: 0;
        width: 104px;
        height: 104px;
    }

    /* The headline is left-aligned and gives up the seal's column, so the
       two sit side by side instead of colliding. Reserving ~118px means the
       text has to set smaller to stay on two lines — see .bf-title below. */
    .bf-landing .bf-title {
        text-align: left;
        /* was 118px, reserving the seal's column; the seal is commented out in
           HomeComponent, so the headline takes the full width again. */
        padding-right: 0;
    }
    /* "Home Delivery & Takeaway" needed 284px on one line at 26px and so ran
       from x=23 to 307, under the seal's ribbon, which starts at 261. At 21px
       it needs 229px and stops clear of it, on one line and slightly shorter
       than before. The padding is a guard: if the wording ever grows it wraps
       rather than sliding back under the seal. */
    .bf-landing .bf-script {
        text-align: left;
        font-size: 21px;
        padding-right: 92px;
        /* Was 20px, then 4px - which read as squeezed once the tiles' own
           margin and padding were gone. This is the only gap left between
           this line and the Order Now tile, so it carries the whole space. */
        margin-bottom: 16px;
    }
}

/* ============================================================
   HOME PAGE CATEGORY RAIL
   Card-rail treatment for the home page's category section.
   Lives here rather than in home-cinematic.css because that file
   is generated from the reference page and gets overwritten.

   Categories carry only a name, slug, image and (rarely) a
   description — there is no per-item nutrition data behind this
   design, so the calories block is deliberately absent.
   ============================================================ */
/* Every category is laid out on the page — no horizontal scrolling. The
   column count follows the available width; the generous row gap is what
   keeps each row's discs off the cards in the row above. */
.bf-landing .cat-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-items: stretch;
    -moz-column-gap: 18px;
         column-gap: 18px;
    row-gap: 82px;
    max-width: 1200px;
    margin: 0 auto;
    /* top padding clears the artwork, which sits above each card */
    padding: 74px 4px 28px;
}

.bf-landing .cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Height is content-driven. Without the reference's ingredient and
       calorie blocks there is little to show, so a fixed min-height just
       left the lower half of every card empty. */
    /* top padding clears the disc, which reaches 80px into the card
       (-52px offset + 132px diameter), plus breathing room */
    padding: 100px 22px 24px;
    border-radius: 20px;
    background: #ecebe7;
    color: var(--heading);
    text-decoration: none;
    transition: background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Artwork breaks out of the card's top edge. The reference design uses
   cut-out dish photography; category covers here are rectangular crops, so
   they are framed in a disc rather than floated on transparency — the same
   silhouette, without the ragged edges a contain-fit would give. */
.bf-landing .cat-card-media {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    background: #f7d9a0;
    border: 5px solid #ecebe7;
    box-shadow: 0 18px 28px -12px rgba(60, 25, 5, 0.55);
    transition: border-color 0.45s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-landing .cat-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/*
   Category imagery switched off in the admin.

   With no disc, the three rules that reserved room for it have nothing to
   reserve: the rail's top padding (it cleared artwork hung above the first
   row), the row gap (it let each row's disc overhang the row above), and the
   card's top padding. Left alone they produce a tall card with a hole in it.

   The rail class is repeated in the selector so these outrank the base rules
   wherever those are restated further down in a media query, which is not
   something source order alone would settle.
*/
.bf-landing .cat-rail.cat-rail--plain {
    row-gap: 24px;
    padding-top: 28px;
}

.bf-landing .cat-rail.cat-rail--plain .cat-card {
    padding-top: 24px;
}

@media (max-width: 640px) {
    .bf-landing .cat-rail.cat-rail--plain {
        row-gap: 20px;
        padding-top: 24px;
    }

    .bf-landing .cat-rail.cat-rail--plain .cat-card {
        padding-top: 18px;
    }
}

.bf-landing .cat-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    /* Centres the name and the tag beneath it. The button is a flex child, so
       it takes align-self instead - see .cat-card-cta. */
    text-align: center;
}
/* Every card in the rail stretches to the tallest one, so unbounded text
   (one category is "BIG BURGER (alle mit Pommes frites und Cola 0,33l
   Dose)") would leave dead space in all the others. Clamp instead. */
.bf-landing .cat-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--display);
    font-size: 20px;
    line-height: 1.14;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color 0.45s;
}
.bf-landing .cat-card-tag {
    display: block;
    font-family: var(--body);
    color: var(--muted);
    transition: color 0.45s;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The button, and the only link on the card. White pill reads on both the
   grey resting surface and the crimson raised one. */
.bf-landing .cat-card-cta {
    margin-top: 22px;
    align-self: center;
    padding: 11px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--accent);
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Shown on every card, not just the raised one - it is the only thing
       that navigates now, so hiding it would leave a card with no action. */
    transition: background 0.3s, color 0.3s;
}

.bf-landing .cat-card.is-active {
    background: var(--accent);
    transform: translateY(-16px);
    box-shadow: 0 28px 48px -24px rgba(46, 0, 18, 0.8);
}
.bf-landing .cat-card.is-active .cat-card-name { color: #fff; }
.bf-landing .cat-card.is-active .cat-card-tag { color: rgba(255, 255, 255, 0.82); }
.bf-landing .cat-card.is-active .cat-card-media {
    border-color: var(--accent);
    transform: translateX(-50%) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .bf-landing .cat-card,
    .bf-landing .cat-card-media,
    .bf-landing .cat-card-cta { transition: none; }
    .bf-landing .cat-card.is-active { transform: none; }
    .bf-landing .cat-card.is-active .cat-card-media { transform: translateX(-50%); }
}

@media (max-width: 900px) {
    .bf-landing .cat-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        -moz-column-gap: 14px;
             column-gap: 14px;
        row-gap: 74px;
    }
}

/* Phones get an explicit 2-up. auto-fill was collapsing to a single column
   at 360px and below — two 150px tracks cannot fit a 288px content box — so
   all 17 cards stacked into a ~5,400px scroll. minmax(0, 1fr) (not auto)
   lets the tracks shrink below their content's intrinsic width. */
@media (max-width: 640px) {
    .bf-landing .cat-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        -moz-column-gap: 12px;
             column-gap: 12px;
        row-gap: 56px;
        padding: 56px 14px 24px;
    }
    .bf-landing .cat-card { padding: 62px 12px 18px; }
    .bf-landing .cat-card-media {
        width: 88px;
        height: 88px;
        top: -34px;
        border-width: 4px;
    }
    .bf-landing .cat-card-name { font-size: 15px; }
    /* margin-bottom guarantees a gap from the tag; the CTA's auto top margin
       then bottom-aligns it. Cards in a row stretch to a shared height, so
       without this the buttons sat at different heights wherever a category
       name wrapped to two lines. Only matters now that every CTA is shown. */
    .bf-landing .cat-card-tag { margin-top: 6px; margin-bottom: 14px; font-size: 10px; }
    .bf-landing .cat-card-cta {
        margin-top: auto;
        padding: 9px 14px;
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    /* Phones keep the active-only highlight rather than painting every card
       crimson: one card marked out is the point of the treatment, and with
       every card red there was nothing to distinguish. currentCategoryId
       falls back to the first category, so one card is always highlighted
       even though touch never fires mouseenter. */
}

/* ============================================================
   HOME PAGE HEADER THEME
   The whole site now sits on the #fff4f3 field (--page-bg), so the
   shared frontend header is retinted to match on every page, not just
   the home page. These selectors are frontend-only: .ff-header and
   .webcart appear nowhere in the admin panel, and the .dropdown-btn /
   .bg-red rules below are scoped under .ff-header because .dropdown-btn
   IS used in admin. HomeComponent still toggles .bf-home on <body>; it
   now carries only the rules that stay genuinely home-specific.

   Ported from the reference's .menu-theme-dark header rules. The
   companion rules are not optional: the search box, cart button and
   language switch are all styled for a white bar, and would read as
   white-on-amber (or dark-navy-on-amber) without them.
   ============================================================ */
.ff-header {
    /* The bar used to carry the same #fff4f3 as the body, so it only separated
       from the hero by a hairline - and by nothing at all on phones, where that
       line was removed. White gives it its own surface against the cream field,
       which reads as a bar at every width without depending on a border. */
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(77, 0, 31, 0.10);
    box-shadow: 0 1px 3px rgba(18, 16, 13, 0.05),
                0 6px 18px rgba(18, 16, 13, 0.05) !important;
}

/* Sticky: once it detaches and floats over the page, it needs to sit more
   clearly above the content it is covering. The top offset clears the utility
   bar above, which stays pinned at 0 - without it the fixed header would sit on
   top of the bar rather than under it. */
.ff-header.active {
    top: 34px;
    box-shadow: 0 2px 6px rgba(18, 16, 13, 0.07),
                0 10px 26px rgba(18, 16, 13, 0.08) !important;
}
/* Still no border on phones - it read as a stray line across the hero. The
   white background and the shadow now carry the separation there. */
@media (max-width: 860px) {
    .ff-header {
        border-bottom: 0;
    }
}

/* Search bar: hidden on the home page only, every other page keeps it. The
   form is a flex child of the header's tools group, so display:none drops it
   from the flow cleanly — no leftover gap, and on mobile its full-width row
   collapses. display:none also removes it from the tab order and the
   accessibility tree, so it cannot be focused while invisible.

   The amber retint this block previously applied to the search box has been
   removed with it: the amber bar exists only on the home page, which is the
   one page where the search box no longer renders. */
body.bf-home .header-search-group { display: none !important; }

/* Cart button. The cream #fff1d4 pill was picked when the bar was also cream;
   against the white header it lost nearly all contrast and stopped reading as a
   button. Back to the dark surface its own Tailwind classes ask for
   (bg-heading + text-white), which stands out on white and keeps the red count
   badge legible. Hover lightens rather than tints, so it cannot clash with the
   brand red on the Account button beside it. */
.webcart {
    background-color: #12100d !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}
.webcart:hover { background-color: #322d27 !important; }
.webcart i,
.webcart span:not([class*="bg-red"]) { color: #ffffff !important; }

/* language switch */
.ff-header .dropdown-btn[class~="bg-white"] {
    background-color: #fff1d4 !important;
    border-color: rgba(120, 60, 8, 0.22) !important;
}

/* keep the red cart-count badge legible */
.ff-header .bg-red-500,
.ff-header .bg-red-600 { color: #fff !important; }

/* Dropdown and modal panels stay light surfaces, so their text keeps the
   default dark colours rather than inheriting anything from the amber bar. */
body.bf-home .modal .modal-title,
body.bf-home .modal h3,
body.bf-home .modal h4,
body.bf-home .dropdown-list h3,
body.bf-home .dropdown-list h4,
body.bf-home .dropdown-list h5,
body.bf-home .dropdown-list span { color: #1F1F39 !important; }
body.bf-home .modal p,
body.bf-home .dropdown-list .text-paragraph { color: #6E7191 !important; }
/* ============================================================
   iOS INPUT ZOOM
   Safari on iPhone zooms the viewport whenever a focused field renders below
   16px, and it does not zoom back out afterwards. The base rule sets every
   input to 15px and the menu search field to 12px, so every field on the site
   triggered it - the search bar was just the one people hit first.

   16px is the browser's threshold, not a design preference: anything smaller
   brings the zoom straight back. Scoped to <=1023px so desktop keeps the
   smaller type, where the behaviour does not exist.
   ============================================================ */
@media (max-width: 1023px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* text-xs on the search field is a class, so it outranks the element
       selector above and needs naming explicitly. */
    .menu-search-field {
        font-size: 16px;
    }
}

/* Offers pill for phones: rightmost in the compact bar, and pinned to the
   photo's corner in the home header.

   Festive: a red-to-gold gradient with a gold rim, a shine that sweeps across
   every few seconds and a gift icon that gives a small wiggle in step with it.
   Both are slow and brief so it draws the eye without turning into noise, and
   both stop for anyone who has asked for less motion. */
.ff-offers-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 34px;
    padding: 0 12px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 9999px;
    border: 1px solid #f6d27a;
    background: linear-gradient(120deg, #9e0f2a 0%, #d8342a 55%, #f0a92a 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(80, 0, 15, 0.35);
    box-shadow: 0 2px 10px rgba(216, 52, 42, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* the sweeping shine */
.ff-offers-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 241, 200, 0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: ff-offers-shine 4.5s ease-in-out infinite;
}
.ff-offers-pill i {
    font-size: 13px;
    color: #ffe08a;
    animation: ff-offers-wiggle 4.5s ease-in-out infinite;
}
.ff-offers-pill-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #ffffff;
    color: #c0182b;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    text-shadow: none;
}
@keyframes ff-offers-shine {
    0%, 55% { transform: translateX(-120%); }
    80%, 100% { transform: translateX(120%); }
}
@keyframes ff-offers-wiggle {
    0%, 58%, 80%, 100% { transform: rotate(0); }
    63% { transform: rotate(-14deg) scale(1.12); }
    68% { transform: rotate(12deg) scale(1.12); }
    73% { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ff-offers-pill::before,
    .ff-offers-pill i { animation: none; }
}
.ff-home-head-offers {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}
[dir="rtl"] .ff-home-head-offers { right: auto; left: 12px; }
/* The narrowest phones cannot fit logo, label and Download App on one row
   (in German especially), so the bar's pill drops to icon and count. */
@media (max-width: 399px) {
    .ff-offers-pill--bar .ff-offers-pill-label { display: none; }
}
@media (min-width: 1024px) {
    .ff-offers-pill { display: none; }
}

/* ============================================================
   MOBILE HOME HEADER
   Hero photo with a rounded lower edge, the logo on a white tile straddling
   that edge, and the shop name beneath - the supplied reference. Scoped to the
   home page (.ff-home-head only renders there) and to <1024px; the class on the
   markup carries lg:hidden, and the standard bar is hidden alongside it here
   only. The red utility bar above is untouched.
   ============================================================ */

@media (max-width: 1023px) {
    /* the compact bar steps aside on the home page only */
    .ff-header-home {
        display: none;
    }

    .ff-home-head {
        position: relative;
        /* The wash behind the welcome line bleeds past the right edge; nothing else
           on the page clips it, and body has no overflow-x, so it widened the
           document and pushed everything left. Clipping here keeps the bleed as a
           bleed instead of horizontal scroll. */
        overflow: hidden;
        text-align: center;
        /* White under the photo and the logo, easing into the page field before the
           block ends - a flat white stopped dead against #FFF4F3 and drew a line
           across the page. The colour stop is the same token the body uses, so the
           two always finish on exactly the same value. */
        background-color: #ffffff;
        background-image: linear-gradient(
            to bottom,
            #ffffff 0%,
            #ffffff 52%,
            rgb(var(--page-bg)) 88%,
            rgb(var(--page-bg)) 100%
        );
        /* The fade finishes at 88%, so the last band is already pure page colour
           before the block ends. Landing on the target exactly at the edge left a
           step against the hero below - visible right where the discount seal sits,
           a few px under the join. */
        padding-bottom: 34px;
    }

    /* 16/9 rather than 16/11 - shorter bar, and it matches the reference shot.
       The class sits on either the Swiper or the single img, so the box owns the
       ratio and rounding while the images just fill it. */
    .ff-home-head-media {
        display: block;
        width: 100%;
        aspect-ratio: 2.6 / 1;
        overflow: hidden;
        border-bottom-left-radius: 26px;
        border-bottom-right-radius: 26px;
    }
    img.ff-home-head-media { -o-object-fit: cover; object-fit: cover; }
    .ff-home-head-media .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

    /*
       Hung across the banner's lower edge by a share of its own height, so
       the two cannot drift apart: --ff-head-logo-over is how much of the
       logo sits ON the photo, and the rest falls below it.

       0.3 rather than the old half. The banner is only 150px tall, and a
       logo sitting halfway down it covered the middle of the photograph.
    */
    .ff-home-head-logo {
        --ff-head-logo-size: 124px;
        --ff-head-logo-over: 0.3;
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--ff-head-logo-size);
        height: var(--ff-head-logo-size);
        margin-top: calc(var(--ff-head-logo-size) * var(--ff-head-logo-over) * -1);
        padding: 12px;
        border-radius: 28px;
        background-color: #ffffff;
        box-shadow: 0 6px 18px rgba(18, 16, 13, 0.14);
    }

    /*
       The white card behind the logo, switched off on the Home Page screen.
       Only the card goes - the logo keeps its size and its place, so nothing
       around it moves.
    */
    .ff-home-head-logo--bare {
        padding: 0;
        background-color: transparent;
        box-shadow: none;
    }

    /*
       Banner switched off on the Home Page screen.

       The logo's -62px margin exists to hang it over the banner's lower edge.
       With no banner there is nothing to hang over, and the margin would pull
       the logo up under the header bar - so it is released, and a little room
       is given above instead.
    */
    .ff-home-head--plain .ff-home-head-logo {
        margin-top: 18px;
    }

    .ff-home-head-logo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        -o-object-fit: contain;
           object-fit: contain;
    }

    /* Wash behind the welcome line. Same recipe as the .bg-food images on the
       home page - 17% and a radial fade - but its own class, because those are
       scoped under .bf-landing and the header sits outside it. Bleeds off the
       right edge so it reads as a corner accent rather than a panel. */
    .ff-home-head-wash {
        position: absolute;
        z-index: 0;
        bottom: -14%;
        right: -12vw;
        width: clamp(200px, 56vw, 340px);
        height: auto;
        opacity: 0.17;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0, 0, 0, 0.45) 55%, transparent 74%);
        mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0, 0, 0, 0.45) 55%, transparent 74%);
    }

    /* Longer line than the bare shop name, so it is a step smaller and padded
       in from the edges to wrap cleanly on a narrow screen. The stacking context
       keeps it above the wash, which is positioned and would otherwise paint over
       in-flow text. */
    /* Delivery facts: three figures split by rules, then a card. Left-aligned copy
       inside a centred block, so the card sets its own alignment. */
    .ff-home-facts {
        position: relative;
        z-index: 1;
        margin: 14px 16px 0;
    }
    .ff-home-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
    }
    .ff-home-stat {
        padding: 0 6px;
        text-align: center;
    }
    .ff-home-stat + .ff-home-stat {
        border-left: 1px solid rgba(18, 16, 13, 0.12);
    }
    .ff-home-stat strong {
        display: block;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        color: #12100d;
    }
    .ff-home-stat-star {
        margin-right: 4px;
        color: #f0b323;
        font-size: 14px;
    }
    .ff-home-stat span {
        display: block;
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.25;
        color: #6e7191;
    }
    .ff-home-head-name {
        position: relative;
        z-index: 1;
        margin: 12px 0 4px;
        padding: 0 24px;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        color: #000000;
    }
}

/* ============================================================
   MENU PAGE - VERTICAL CATEGORY NAV (DESKTOP)
   Categories run down the left as a sticky list while every section stays on
   the page; picking one scrolls to it rather than filtering the rest away.
   Phones are unchanged - the horizontal rail above still switches views.
   ============================================================ */
.menu-cat-section {
    /* clears the fixed chrome (34px utility bar + 74px header) plus a gap */
    scroll-margin-top: 128px;
}

/* Stands in for a category section's cards until they are mounted. It reuses
   the card classes for its box, so all this adds is the fill - kept faint
   because it sits a screen below the fold and should read as reserved space
   rather than as content. */
/* A category outside its serving hours stays on the page, but reads as closed
   and cannot be ordered from. pointer-events is what actually withdraws
   ordering - it stops every click inside reaching an add button or a card -
   while the heading and the hours above it stay fully legible. */
.menu-items-unavailable {
    opacity: 0.45;
    filter: grayscale(1);
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.menu-cat-closed-note {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;
}

/* The rail pill and the desktop nav row for a closed category. Dimmed rather
   than removed, so the customer can still see the category exists. */
.is-unavailable {
    opacity: 0.5;
    filter: grayscale(1);
}

/* ============================================================
   RESERVATION DAY BAR
   One service window drawn as a continuous strip. Stay length is the
   customer's choice, so there is no grid of slots to lay out - taken time
   is greyed in place and the customer slides their own booking around it.
   Segments are positioned in percent of the window's own span, so a three
   hour lunch and a five hour dinner both fill their strip.
   ============================================================ */
.reservation-bar {
    position: relative;
    height: 38px;
    border-radius: 8px;
    background: #EDEFF7;
    overflow: hidden;
    cursor: pointer;
}

.reservation-bar > div {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* Time that has already gone by today. Sits under the booked bands so a
   booking earlier in the day still reads as booked, not merely past. */
.reservation-bar-past {
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.05) 5px,
        transparent 5px,
        transparent 10px
    );
}

.reservation-bar-taken {
    background: #B9BDD0;
}

/* The customer's own proposed booking, drawn over the top so it is obvious
   when it lands on something already taken. */
.reservation-bar-mine {
    background: rgb(var(--primary));
    border-radius: 6px;
    box-shadow: 0 0 0 2px #ffffff;
}

/* ============================================================
   ORDER-SUCCESS SCRATCH CARD
   The prize is rendered underneath and a canvas of "foil" is painted over
   it; scratching erases the canvas rather than drawing on it, so the panel
   below simply shows through. Once the server has returned the outcome the
   canvas is removed from the DOM entirely.
   ============================================================ */
.scratch-card-block {
    margin: 12px 0 16px;
    text-align: center;
}

.scratch-card-kicker {
    font-size: 15px;
    font-weight: 700;
    color: #6D28D9;
    margin-bottom: 10px;
}

/* Sits under the card, where the reference puts it - it is an instruction for
   the panel above, not a label floating inside it. */
.scratch-card-cta {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #6D28D9;
}

.scratch-card {
    position: relative;
    /* Smaller than it was: it sits under the savings panel on a page the
       customer is reading, not at the centre of a game. */
    max-width: 170px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #FFF7F7;
    box-shadow: 0 8px 22px -12px rgba(155, 27, 31, 0.5);
}

.scratch-card-prize {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 14px;
}

.scratch-card-icon { font-size: 22px; }

.scratch-card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.scratch-card-code {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgb(var(--primary));
}

.scratch-card-note {
    font-size: 10px;
    line-height: 14px;
    color: #6B7280;
}

/* touch-action none, or a swipe scrolls the page instead of scratching. */
.scratch-card-foil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

/* Clears the selected range. Sits on each bar's heading so it is within reach
   of whichever bar was just clicked. Filled rather than a text link: it was a
   small underlined string before and went unnoticed, which is the whole reason
   it moved. */
.reservation-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 18px;
    font-weight: 600;
    white-space: nowrap;
    color: rgb(var(--primary));
    background: rgb(var(--primary) / 0.1);
    border: 1px solid rgb(var(--primary) / 0.3);
    transition: background 0.15s, color 0.15s;
}

.reservation-reset-btn:hover {
    color: #ffffff;
    background: rgb(var(--primary));
    border-color: rgb(var(--primary));
}

/* Follows the pointer along the bar showing the quarter hour a click will
   land on, so the customer commits to a time they have already seen. */
.reservation-bar-cursor {
    width: 0;
    border-left: 1px dashed rgba(17, 24, 39, 0.55);
    pointer-events: none;
}

.reservation-bar-cursor-label {
    position: absolute;
    top: -2px;
    left: 4px;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
    color: #ffffff;
    background: rgba(17, 24, 39, 0.8);
}

/* Quarter-hour ruler under each bar. Marks sit at every 15 minutes; only the
   hours are labelled, because a five hour window holds twenty-two marks and
   that many labels cannot be read on one strip. */
.reservation-ruler {
    position: relative;
    height: 22px;
    margin-top: 2px;
}

.reservation-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 4px;
    background: #C7CBDA;
    transform: translateX(-0.5px);
}

.reservation-tick.is-hour {
    height: 7px;
    background: #9BA1B8;
}

.reservation-tick-label {
    position: absolute;
    top: 8px;
    left: 0;
    transform: translateX(-50%);
    font-size: 10px;
    line-height: 12px;
    color: #6B7280;
    white-space: nowrap;
}

.reservation-bar-mine.is-clashing {
    background: repeating-linear-gradient(
        45deg,
        rgb(var(--primary)),
        rgb(var(--primary)) 6px,
        #ffffff 6px,
        #ffffff 12px
    );
}

.menu-skeleton {
    background-color: #EFF0F6;
    opacity: 0.55;
}

@media (min-width: 1024px) {
    .menu-body {
        display: grid;
        /* minmax(0,1fr) so the item grids cannot blow the column out */
        grid-template-columns: 248px minmax(0, 1fr);
        gap: 32px;
        align-items: start;
    }

    /* The filter row sits above the grid, so it is indented by the nav column
       plus the gap to line up with the sections beside it. Cheaper and safer than
       pulling it into the grid, which would drop it from the single-category view
       that phones still use. */
    /* The heading now occupies the nav column on this row, so the row no longer
       needs indenting past it. */
    .menu-filter-title {
        flex: 0 0 248px;
        /*
           Whatever follows this heading has to start where the content column
           does: 248px of nav plus the grid's 32px gap, so 280px in. The row is
           a flex with gap-3, which already supplies 12px of that - so the
           margin carries only the remainder.

           Written as a subtraction rather than as 20px so both numbers it
           depends on stay visible. With a plain 32px here the two were added
           together and the search sat 12px right of the category name below
           it, which went unnoticed while the chips - which line up with
           nothing - were what followed the heading.
        */
        margin-right: calc(32px - 12px);
    }

    .menu-cat-nav {
        position: sticky;
        top: 128px;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .menu-cat-nav-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Pill per the reference: the category image in a circle at the left end,
       the name beside it, on a light grey field. */
    .menu-cat-nav-list button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 5px 16px 5px 5px;
        border-radius: 999px;
        background-color: #f1f1f3;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        color: #000000;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .menu-cat-nav-thumb {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        -o-object-fit: cover;
           object-fit: cover;
        background-color: #ffffff;
    }

    .menu-cat-nav-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-cat-nav-list button:hover {
        background-color: #e6e6ea;
    }

    .menu-cat-nav-list button.is-active {
        background-color: rgb(var(--primary));
        color: #ffffff;
    }
}

/* ============================================================
   HERO HEADLINE - SCRIPT OVER DISPLAY
   Per the supplied reference: a warm script line sitting above a heavy display
   line, with a swash beneath it. Both faces are already loaded for this theme -
   Kaushan Script (--script) and Anton (--display) - so nothing new is fetched.
   ============================================================ */
/* Both lines are the same heavy sans at the same size, per the reference; only
   the second is amber and italic. The shared heading rule uppercases .bf-title
   and sets the display face, so each line has to opt out of both. */
.bf-landing .bf-title-script,
.bf-landing .bf-title em {
    display: block;
    font-family: var(--body);
    font-weight: 700;
    font-size: 1em;
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-transform: none;
}

.bf-landing .bf-title-script {
    /* Same face as "Welcome to Safrans Restaurant" (.section-head h2): the
       display face at 400, uppercased. It has to restate all four, because
       the shared rule above sets the body face, 700, and no transform. */
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: var(--heading);
}

.bf-landing .bf-title em {
    /* real italic - the font request carries the 700 italic cut, so this is not
       a browser-synthesised slant */
    font-style: italic;
    color: #f0b323;
}

/* Back control on the search results heading. Sized to sit level with the
   heading beside it rather than dominating it. */
.page-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #eff0f6;
    background-color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: #12100d;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.page-back-btn:hover {
    border-color: rgb(var(--primary));
    color: rgb(var(--primary));
}
.page-back-btn i {
    font-size: 11px;
}
/* My Cart on phones: filled with the brand colour so the way back to the
   menu is found at a glance. The bottom bar is hidden on this page, so this
   is the only way out. Desktop keeps the quiet outline. */
@media (max-width: 1023px) {
    .page-back-btn.cart-back-btn {
        border-color: rgb(var(--primary));
        background-color: rgb(var(--primary));
        color: #ffffff;
        box-shadow: 0 2px 8px rgb(var(--primary) / 0.28);
    }
    .page-back-btn.cart-back-btn:hover {
        color: #ffffff;
    }
}

/* Cart line cooking instruction: reads as a quiet note until clicked, then
   becomes a field in place. */
.cart-instruction-btn {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 1.35;
    color: #6e7191;
    transition: color 0.2s ease;
}
.cart-instruction-btn:hover {
    color: rgb(var(--primary));
}
.cart-instruction-btn i {
    margin-top: 2px;
    font-size: 10px;
    flex-shrink: 0;
}
.cart-instruction-field {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #eff0f6;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    color: #12100d;
    resize: none;
}
.cart-instruction-field:focus {
    outline: none;
    border-color: rgb(var(--primary));
}

/* Checkout button floats at the bottom of the viewport while the cart is on
   screen. Offset clears the mobile bottom nav: fixed at bottom:12px and 64px
   tall (a 48px cart button plus its py-2), so its top edge is at 76px. On
   desktop there is no such bar. */
.cart-checkout-bar {
    position: sticky;
    bottom: 88px;
    z-index: 20;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(18, 16, 13, 0.16);
}
@media (min-width: 1024px) {
    .cart-checkout-bar {
        bottom: 16px;
    }
}

/* Checkout bar: total on the left, action on the right. */
.cart-checkout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.cart-subtotal {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.cart-subtotal-label {
    font-size: 13px;
    text-transform: capitalize;
    color: #6e7191;
}
.cart-subtotal-value {
    font-size: 18px;
    font-weight: 700;
    color: #12100d;
    white-space: nowrap;
}
.cart-checkout-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 18px;
    border-radius: 12px;
    background-color: rgb(var(--primary));
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    transition: filter 0.2s ease;
}
.cart-checkout-btn:hover { filter: brightness(0.95); }
.cart-checkout-btn i { font-size: 12px; }

/* ============================================================
   CART SUGGESTIONS ("Perfect with your order")
   ItemComponent's list card is built for a full-width menu column and is far
   too tall here. Rather than a second card implementation - which would lose
   the variation modal and add-to-cart flow - the same markup is constrained
   into a compact horizontal rail.
   ============================================================ */
.cart-suggestions .grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* A visible track is the cue that there is more to the right. Desktop hides
       overlay scrollbars by default, so without this the only hint is the last
       card being clipped. */
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--primary) / 0.45) rgba(18, 16, 13, 0.07);
}
.cart-suggestions .grid::-webkit-scrollbar {
    height: 6px;
}
.cart-suggestions .grid::-webkit-scrollbar-track {
    border-radius: 999px;
    background-color: rgba(18, 16, 13, 0.07);
}
.cart-suggestions .grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: rgb(var(--primary) / 0.45);
}
.cart-suggestions .grid::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--primary) / 0.7);
}

.cart-suggestions .product-card-list {
    /* Wide enough that the price and the add control sit side by side without
       crowding; below this the two collide in the narrow text column. */
    flex: 0 0 232px;
    /* The theme centres the row for a full-width card. Here the text column is
       the taller side, so stretching keeps the two columns sharing a top edge. */
    align-items: stretch;
    overflow: hidden;
    scroll-snap-align: start;
}

/* the description is the bulk of the card's height, and these are add-ons the
   customer already knows - the name and price are enough */
.cart-suggestions .product-card-list-describe {
    display: none;
}

/* The title wraps to two or three lines in a card this narrow, and the info
   button is a flex sibling centred against the whole block - which left it
   floating beside the middle line. Pin it to the first line instead. */
.cart-suggestions .product-card-list-info-btn {
    align-self: flex-start;
    margin-top: 1px;
}

.cart-suggestions .product-card-list-image {
    align-self: center;
    width: 56px;
    height: 56px;
    margin: 10px 0 10px 10px;
    border-radius: 10px;
}

.cart-suggestions .product-card-list-content-group {
    /* w-full plus the image's own width overflows the fixed card, and the
       column cannot shrink back past its footer's min-content while min-width
       is auto - which is what pushed the add button through the border. */
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    padding: 10px;
}

.cart-suggestions .product-card-list-title {
    font-size: 12px;
    line-height: 1.3;
    /* The menu card holds its name to one line; these cards are narrow and
       the name is all they carry, so here it keeps wrapping. */
    white-space: normal;
    /* Names run to two or three lines here. Clamping them holds every card's
       text block to one height, so the prices line up across the rail. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The theme relies on the description's flex-auto to push this down; with the
   description hidden, auto margin takes over and keeps the footers on one line
   across cards whose titles differ in length. */
.cart-suggestions .product-card-list-footer-group {
    margin-top: auto;
    gap: 6px;
    min-width: 0;
}

.cart-suggestions .product-card-list-price-current {
    font-size: 13px;
    white-space: nowrap;
}

/* Both add controls come down a size to fit beside the price in this column. */
.cart-suggestions .product-card-list-cart-btn {
    width: 30px;
    height: 30px;
}
.cart-suggestions .item-card-stepper {
    gap: 4px;
    padding: 2px 4px;
}
.cart-suggestions .item-card-stepper-btn {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 9px;
}
.cart-suggestions .item-card-stepper-value {
    min-width: 12px;
    font-size: 12px;
}

/* Item card quantity stepper. Mirrors the cart page controls so the two read as
   the same thing; sized to fit where the round add button sat. */
.item-card-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 3px 6px;
    border-radius: 999px;
    background-color: rgb(var(--primary));
}
.item-card-stepper-btn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    transition: background-color 0.2s ease;
}
.item-card-stepper-btn:hover {
    background-color: rgba(255, 255, 255, 0.35);
}
.item-card-stepper-value {
    min-width: 14px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* ============================================================
   FOOTER ON MOBILE - HOME PAGE ONLY
   The footer carries `hidden md:block` on its link grid and `hidden sm:block`
   on the lower bar, so phones get no footer at all. HomeComponent puts
   .bf-home on <body> while the home route is mounted, which scopes this to
   that page without touching the shared component.
   ============================================================ */
@media (max-width: 767px) {
    body.bf-home .footer-d > .container.hidden {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 639px) {
    body.bf-home .footer-part.hidden {
        display: block;
    }
}

/* the bottom nav pill floats over the page, so the footer needs to clear it */
@media (max-width: 1023px) {
    body.bf-home .footer-part {
        padding-bottom: 84px;
    }
}

/* Cooking instruction editor: draft field with explicit Save / Cancel. */
.cart-instruction-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cart-instruction-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.cart-instruction-save,
.cart-instruction-cancel {
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cart-instruction-save {
    background-color: rgb(var(--primary));
    color: #ffffff;
}
.cart-instruction-save:hover {
    filter: brightness(0.95);
}
.cart-instruction-cancel {
    border: 1px solid #eff0f6;
    background-color: #ffffff;
    color: #6e7191;
}
.cart-instruction-cancel:hover {
    color: rgb(var(--primary));
}

/* ============================================================
   MOBILE: TILE MOSAIC AS A BANNER OVER A PAIR
   Phones get Order Now full width on the top row with Catering and Table
   Reservation splitting the row beneath it, rather than the desktop mosaic's
   one tall tile beside two stacked ones. Same two rows and same overall
   height, so the panel still lands above the fold; only the shape changes.

   Placed after the 860px block above so it overrides those rules on equal
   specificity. Desktop is untouched.
   ============================================================ */
@media (max-width: 860px) {
    .bf-landing .bf-tiles {
        /* the desktop 1.12fr weighting existed to give the tall Order tile the
           larger share; the bottom pair reads as a pair, so they split evenly */
        grid-template-columns: 1fr 1fr;
    }
    .bf-landing .bf-tile-order {
        grid-column: 1 / -1;
        /* clears the desktop span:2, which would otherwise push Catering and
           Reservation onto rows the template does not define */
        grid-row: auto;
    }
}

/* ============================================================
   MOBILE: TILE CAPTION UNDER THE PHOTO
   The label is centred on the artwork everywhere else. At phone size the
   tiles are small enough that it covers the food rather than captioning it,
   so here the tile stacks: photo, then a solid caption band.

   Only the phone arrangement changes. The desktop mosaic keeps the label on
   the image, where there is room for it.
   ============================================================ */
@media (max-width: 860px) {
    /* The rows were 1fr 1fr under a square aspect-ratio, which fixed each
       tile's height and left the caption nowhere to go but on top of the
       photo. Content decides the height now; the photo heights below are
       what keep the panel close to the size it already had. */
    .bf-landing .bf-tiles {
        aspect-ratio: auto;
        grid-template-rows: auto auto;
    }

    .bf-landing .bf-tile {
        display: flex;
        flex-direction: column;
        /* Opaque, so the band under the photo is a surface rather than a
           wash over the crimson panel behind it. The card then reads as one
           object: picture, then its caption. */
        background: var(--accent, #4d001f);
    }

    /* Fixed rather than filling the tile, so the caption below it is not
       competing for the same space. */
    .bf-landing .bf-tile img {
        flex: 0 0 auto;
        height: 118px;
    }
    .bf-landing .bf-tile-catering img,
    .bf-landing .bf-tile-reservation img {
        height: 106px;
    }

    .bf-landing .bf-tile-label {
        /* was absolutely centred on the photo */
        position: static;
        inset: auto;
        transform: none;
        max-width: none;
        width: 100%;
        /* Fills whatever the grid leaves when the pair of tiles are stretched
           to a common height, so the band reaches the bottom of the card
           instead of stopping short and showing a strip of panel. */
        flex: 1 1 auto;
        justify-content: center;
        display: flex;
        gap: 3px;
        padding: 9px 8px 10px;
    }

    .bf-landing .bf-tile-tagline {
        /* The shadow was separating it from the photo; on the band there is
           nothing to separate it from. */
        text-shadow: none;
        font-size: 0.78em;
        font-weight: 400;
        opacity: 0.82;
    }

    /* No tint and no padding: the band is the surface the pill used to
       provide, and nesting one inside the other reads as a box in a box. */
    .bf-landing .bf-tile-name {
        background: none;
        padding: 0;
        text-shadow: none;
        /* The pill shrank with the viewport to hold one line inside its own
           padding. With the padding gone the band is the full tile width, so
           the name can take a steadier size. */
        font-size: 0.82em;
        white-space: normal;
    }
    .bf-landing .bf-tile:hover .bf-tile-name {
        background: none;
    }

    /* The full-width tile has roughly twice the room, so its caption keeps
       the larger step it already had rather than the pair's. */
    .bf-landing .bf-tile-order .bf-tile-label {
        font-size: 17px;
        gap: 4px;
    }
    .bf-landing .bf-tile-order .bf-tile-name {
        font-size: 0.82em;
        padding: 0;
    }

    .bf-landing .bf-tile-catering .bf-tile-label,
    .bf-landing .bf-tile-reservation .bf-tile-label {
        font-size: 13px;
    }
}
/* ============================================================
   MOBILE: STICKY CATEGORY RAIL
   The horizontal rail scrolls with the page until it meets the header, then
   pins there so the categories stay reachable while the item list scrolls
   past. Phones and tablets only - the desktop layout has the vertical nav,
   which is already sticky.
   ============================================================ */
@media (max-width: 1023px) {
    /* The wrapper sticks rather than the rail and the filter row separately:
       stacked sticky elements each need the measured height of the ones above
       them, and the rail's height depends on its pill size. As one block there
       is a single offset to get right. */
    .menu-sticky-head {
        position: sticky;
        /* 0, not 110: on this page the utility bar and header scroll away with
           the rest of the content (see .bf-menu below), so there is no fixed
           chrome for the block to sit under - and the item list gets the 110px
           back. */
        top: 0;
        z-index: 20;
        /* Opaque, or the item cards show through as they scroll under. */
        background-color: rgb(var(--page-bg));
        /* No top padding: the rail inside brings its own, and this was four
           more pixels between the header and the first category. */
        padding-top: 0;
        /* Breathing room under the chips. Padding on the block, not margin on
           the row: a bottom margin on the last child collapses out through a
           wrapper with no bottom padding, so the gap would fall outside the
           opaque area and item cards would show inside it as they scroll up. */
        padding-bottom: 8px;
    }
}

/* Pinned block, tightened. Every pixel here is one the item list does not get,
   so the search row and the chips give up their slack. Phones only. */
@media (max-width: 1023px) {
    /* One line, not two: the search and the chips sit side by side here,
       which costs the pinned block 36px instead of 74. */
    .menu-sticky-head .menu-filter-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        /* the block's padding-bottom is the gap now - both would double it */
        margin-bottom: 0;
    }

    /* The search takes whatever the chips leave. Its own w-full would
       otherwise claim the whole row and push them onto a second one, and
       min-width:0 is what lets a flex item shrink below its content. */
    .menu-sticky-head .menu-filter-row > form {
        height: 36px;
        margin-bottom: 0;
        width: auto;
        /* basis 0, not auto: a text input reports a wide intrinsic size, and
           with basis auto the form claimed it and the chips were truncated
           even with no filter on. At 0 the chips are measured first and the
           search takes what is left. */
        flex: 1 1 0;
        /*
         | A floor, not zero. Every chip that is switched on grows by 32px for
         | its clear icon, and if the search is the only flexible thing in the
         | row it pays for all of them - it measured 11px wide with both on.
         | 130px keeps the magnifier and the placeholder.
         */
        min-width: 124px;
    }

    /* 28px still clears the 16px the iOS zoom guard forces on this field. */
    .menu-sticky-head .menu-search-field {
        line-height: 1;
    }

    /* Shrinkable, so that when the row runs out of room it is a chip label
       that loses its tail rather than the search field its existence.
       min-width:0 all the way down: a flex item will not shrink below its
       content while its minimum is auto, and neither will the text inside. */
    .menu-sticky-head .veg-navs {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
    }

    /*
     | Tighter chips, so there is a search field left to share the line with.
     |
     | The gap INSIDE the chip is left alone deliberately. The clear icon
     | hides by cancelling its own width and that gap with -ml-8; change one
     | without the other and the chip goes lopsided as soon as a filter is
     | switched on.
     */
    .menu-sticky-head .veg-navs > button {
        padding: 2px 8px 2px 6px;
        min-width: 0;
    }

    /* The label, not the coloured mark - which stays the size it is, since
       it is also the key to the marks on the cards below. */
    .menu-sticky-head .veg-navs > button > span:last-of-type {
        font-size: 10px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* The gaps below the rail and below the row were sized as spacing between
       separate elements. Inside a pinned block they are dead height on screen,
       and the card grid supplies the gap to the first item anyway. */
    .menu-sticky-head .menu-swiper {
        /* A little, not the 16px it had. The tiles carry some of the gap
           themselves in the strip below their label, but that strip alone
           left the search field looking stuck to the rail. */
        margin-bottom: 8px;
    }

    /*
     | The tiles were a fixed 7rem with their content top-aligned, which left
     | a dead strip under the label.
     |
     | Not a smaller fixed height - no fixed height. A fixed one has to be
     | guessed against the picture, the gap and the label, and when the guess
     | is short the label drops out of the tile and the swiper's hidden
     | overflow deletes it rather than letting it spill. That is exactly what
     | 5rem did. Letting the tile be as tall as its contents cannot do that.
     |
     | The padding and the gap give up the slack instead. They were sized for
     | a label that might wrap to a second line; none do any more.
     */
    .menu-category-bar .menu-category-pinned button,
    .menu-category-bar .swiper-slide button {
        height: auto;
        padding-top: 8px;
        padding-bottom: 6px;
        /* Side padding to the label: HUEHNCHEN-SPEZIALITAETEN overflowed by
           two pixels, a silly reason to lose the end of a word. */
        padding-left: 2px;
        padding-right: 2px;
        gap: 4px;
    }

    /*
     | Below the pinned block.
     |
     | The section heading and the gap between sections were sized for a
     | desktop column. On a phone 48px between one category and the next is
     | the better part of a card, spent on nothing.
     */
    .menu-cat-section {
        margin-bottom: 1.75rem;
    }

    /* Its own name, not a pile of utility classes: the build rewrites a
       selector made of them and it quietly stops matching. */
    .menu-cat-head {
        margin-bottom: 0.625rem;
    }
}


/* ============================================================
   MENU PAGE: HEADER SCROLLS AWAY
   The header and utility bar together hold 110px of a phone viewport for the
   whole session. On the menu that is 110px of item list, and the pinned
   category block already carries the navigation the header would offer. So
   here they scroll off like any other content and the block pins at the top
   instead. MenuComponent adds .bf-menu on mount and removes it on unmount, so
   every other page keeps its fixed header.

   Phones only: the desktop layout has the vertical category nav, which sticks
   below the header rather than in place of it.
   ============================================================ */
@media (max-width: 1023px) {
    /* .active is what makes the header fixed - added on any scroll by
       FrontendNavBarComponent. Overriding position rather than stopping the
       class being added keeps that logic in one place, and the class still
       carries the shadow that separates the header from the page. */
    body.bf-menu .ff-header.active {
        position: static;
    }
    body.bf-menu .ff-topbar {
        position: static;
    }
}

/* ============================================================
   REWARD POINTS BANNER (hero copy column)
   Sits between the CTA row and the feature strip. Spacing on both sides:
   its own margin-top above, and .bf-features' 34px margin-top below.

   Tinted rather than filled — the hero's amber ground and the crimson
   panel edge stay visible through it, and there is no backdrop-filter,
   which would flatten whatever sits behind. Contrast on the text comes
   from weight and colour, not from hiding the background.
   ============================================================ */
.bf-landing .bf-reward {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(26, 183, 89, 0.35);
    border-radius: 14px;
    background: rgba(26, 183, 89, 0.10);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bf-landing .bf-reward:hover {
    background: rgba(26, 183, 89, 0.16);
    border-color: rgba(26, 183, 89, 0.55);
    transform: translateY(-1px);
}
.bf-landing .bf-reward-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    background: #1AB759;
}
.bf-landing .bf-reward-icon svg { width: 20px; height: 20px; }
.bf-landing .bf-reward-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.bf-landing .bf-reward-copy strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: #12100d;
}
.bf-landing .bf-reward-copy span {
    font-size: 11.5px;
    line-height: 1.35;
    color: #4a4640;
}
.bf-landing .bf-reward-arrow {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    color: #1AB759;
    transition: transform 0.2s ease;
}
.bf-landing .bf-reward:hover .bf-reward-arrow { transform: translateX(3px); }

@media (max-width: 860px) {
    .bf-landing .bf-reward {
        margin-top: 22px;
        /* Phones stack the hero and reorder it: .bf-tiles is order 2 and the
           feature row order 3, so the tiles panel - not the features - is what
           sits directly under this strip. Neither the strip nor the panel
           carried any spacing between them, so they met flush. Just enough to
           separate them, owned here rather than left to the panel. */
        margin-bottom: 8px;
        padding: 10px 12px;
        gap: 10px;
    }
    .bf-landing .bf-reward-icon { width: 34px; height: 34px; }
    .bf-landing .bf-reward-icon svg { width: 17px; height: 17px; }
    .bf-landing .bf-reward-copy strong { font-size: 13px; }
    .bf-landing .bf-reward-copy span { font-size: 11px; }
}

/* ============================================================
   AMBER DOT GRID — straddling the Order Now tile's left edge
   Was bottom-left of the hero (home-cinematic.css .bf-dots-bl).

   --bf-tile-left is the x of that tile's left edge, and the grid is
   centred on it: half reads on the ground to the left, half is covered
   by the tile (dots are z-index 1, tiles 2). Vertically it uses the
   mosaic's own anchor — top: 50% with the same -40px lift — and the
   Order tile spans both rows, so the mosaic's centre is its centre.

   The edge is NOT simply "mosaic right offset + mosaic width". Above
   1415px .bf-tile-order carries a computed negative margin that breaks
   it out of the crimson panel onto the amber, holding its left edge at
   a constant 50vw - 48px (see that rule for the derivation). An earlier
   attempt here anchored to the mosaic box instead and landed ~430px too
   far right, entirely behind the tiles, which is why nothing showed.

   Each breakpoint below mirrors what .bf-tiles / .bf-tile-order do at
   that width. If either is re-sized, these follow.
   ============================================================ */
.bf-landing .bf-dots-bl {
    /* 1181-1399px: mosaic right: 2.5vw, width min(35vw, 470px) */
    --bf-tile-left: calc(100% - 2.5vw - min(35vw, 470px));
    right: auto;
    bottom: auto;
    left: var(--bf-tile-left);
    top: calc(50% - 40px);
    transform: translate(-50%, -50%);
}
/* 861-1180px: mosaic gives width back so it stays inside the narrowed panel */
@media (min-width: 861px) and (max-width: 1180px) {
    .bf-landing .bf-dots-bl { --bf-tile-left: calc(100% - 2.5vw - min(32vw, 470px)); }
}
/* 1400-1414px: mosaic widens and moves right, but the overhang has not started */
@media (min-width: 1400px) and (max-width: 1414px) {
    .bf-landing .bf-dots-bl { --bf-tile-left: calc(100% - 1.5vw - min(41vw, 580px)); }
}
/* 1415px+: the tile is pulled out onto the amber to a fixed 50vw - 48px */
@media (min-width: 1415px) {
    .bf-landing .bf-dots-bl { --bf-tile-left: calc(50vw - 48px); }
}

/* ============================================================
   TILE LABELS — larger on wide screens
   From 1400px the mosaic switches to min(41vw, 580px) (see .bf-tiles), so
   the right-hand column goes from ~208px to ~270px. That is the width that
   was holding the label down: "TABLE RESERVATION" is white-space: nowrap
   here, and the pill has to fit inside max-width: calc(100% - 24px).

   At a 22px wrapper the pill resolves to ~17.2px and measures ~234px
   against the ~243px available at 1400px — the tightest point in this
   range, since the mosaic is capped at 580px above ~1415px.
   ============================================================ */
@media (min-width: 1400px) {
    /* Makes cqw below resolve against each tile's own width. Scoped to this
       breakpoint so the narrower layouts, which wrap rather than clip, are
       untouched. Tiles are grid items on fixed tracks, so taking their inline
       size out of content's hands changes nothing about the mosaic. */
    .bf-landing .bf-tile {
        container-type: inline-size;
    }
    .bf-landing .bf-tile-label {
        font-size: 22px;
        gap: 12px;
    }
    .bf-landing .bf-tile-name {
        padding: 11px 22px;
    }
    /* One line, as the pill already is. The base rule lets the tagline wrap
       because on the narrower tiles below this breakpoint it has to; here the
       tiles are at their widest, so it does not.

       Sized from the tile rather than from a fixed step. .bf-tile is
       overflow: hidden, so a nowrap line that does not fit is clipped, and a
       single em value has to be small enough for the LONGEST tagline on the
       NARROWEST tile it might land on - which drags the short ones down with
       it for no reason.

       cqw is 1% of the tile's own width, so each tile sizes its tagline to
       the room it actually has: the wide Order Now tile takes the 17px cap,
       the narrow pair settle lower. The 0.62em above stays as the fallback
       for engines without container queries, where the whole declaration is
       simply ignored.

       4.6cqw is the coefficient that keeps the 39-character Order Now line
       inside its tile at the narrowest this breakpoint gets. */
    .bf-landing .bf-tile-tagline {
        white-space: nowrap;
        font-size: 0.62em;
        font-size: clamp(12px, 4.6cqw, 17px);
    }
}

/* ============================================================
   LOYALTY ICON
   One gift-box mark for the whole reward-points feature, rendered by
   <loyalty-icon> (registered globally in app.js).

   Deliberately dimensionless in its own right: 1em square with
   stroke: currentColor, so it takes size and colour from whatever it is
   dropped into. That is what the `lab` font icons it replaces did, which
   is why the existing text-* and lab-font-size-* classes on those call
   sites still size it correctly and none of them needed changing.

   vertical-align matches the optical baseline the font icons sat on, so
   swapping one for the other does not shift the text beside it.
   ============================================================ */
.loyalty-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* ============================================================
   COUPON AUTO-APPLIED CELEBRATION
   Shown once when a coupon attaches itself at checkout. An automatic
   discount changes what the customer is about to pay, so it gets an
   acknowledgement rather than a toast that slides away unread.

   Confetti is eight pre-placed pieces on one keyframe rather than a
   physics loop: it costs nothing, and nothing here may compete with the
   checkout for main-thread time while an order is being placed.
   ============================================================ */
.coupon-pop-backdrop {
    position: fixed;
    inset: 0;
    /* Above everything: the app already uses up to 1000 (modals, sticky
       header, mobile nav), and this overlay must not be painted over by any
       of them - it can appear on any page. */
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(18, 16, 13, 0.45);
}
.coupon-pop-card {
    position: relative;
    overflow: hidden;
    width: min(100%, 320px);
    padding: 28px 24px 22px;
    border-radius: 20px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 24px 60px -20px rgba(40, 4, 6, 0.55);
}
.coupon-pop-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border-radius: 50%;
    color: #ffffff;
    background: #1ab759;
    animation: coupon-pop-badge 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.coupon-pop-badge i { font-size: 30px; }
@keyframes coupon-pop-badge {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.coupon-pop-title {
    font-size: 18px;
    font-weight: 700;
    color: #12100d;
}
.coupon-pop-code {
    display: inline-block;
    margin: 8px 0 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #ffdb1f;
    color: #12100d;
}
.coupon-pop-saved {
    font-size: 14px;
    color: #4a4640;
}
.coupon-pop-btn {
    width: 100%;
    margin-top: 18px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    color: #ffffff;
    background: rgb(var(--primary));
}

/* Decorative pieces. Each starts above the card and falls past it once. */
.coupon-pop-confetti {
    position: absolute;
    top: -14px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: coupon-pop-fall 1.5s ease-in forwards;
}
@keyframes coupon-pop-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(320px) rotate(420deg); opacity: 0; }
}
.coupon-pop-confetti-1 { left: 10%; background: #4d001f; animation-delay: 0s;    }
.coupon-pop-confetti-2 { left: 22%; background: #ffdb1f; animation-delay: 0.12s; }
.coupon-pop-confetti-3 { left: 34%; background: #1ab759; animation-delay: 0.05s; }
.coupon-pop-confetti-4 { left: 46%; background: #ffdb1f; animation-delay: 0.22s; }
.coupon-pop-confetti-5 { left: 58%; background: #4d001f; animation-delay: 0.09s; }
.coupon-pop-confetti-6 { left: 70%; background: #1ab759; animation-delay: 0.28s; }
.coupon-pop-confetti-7 { left: 82%; background: #ffdb1f; animation-delay: 0.16s; }
.coupon-pop-confetti-8 { left: 92%; background: #4d001f; animation-delay: 0.33s; }

.coupon-pop-enter-active, .coupon-pop-leave-active { transition: opacity 0.25s ease; }
.coupon-pop-enter-from,   .coupon-pop-leave-to     { opacity: 0; }

/* Respect a reduced-motion preference: the overlay still appears and still
   says what happened, it just does not animate. */
@media (prefers-reduced-motion: reduce) {
    .coupon-pop-confetti { display: none; }
    .coupon-pop-badge { animation: none; }
}

/* ============================================================
   FLOATING COUPON NUDGE (ordering page)
   The applied coupon and the next one within reach, floated over the
   menu rather than sitting in its flow - the basket changes constantly
   while browsing, and inline these would push the category rail and the
   item grid down every time a threshold is crossed.

   Bottom-anchored and centred, clear of the mobile bottom nav (fixed at
   bottom:12px, ~56px tall, hidden from lg up). z-index sits above the
   page and that nav (z-20) but well below the coupon celebration
   overlay (1100), which must always cover this.

   pointer-events: none on the wrapper so the floated block never blocks
   a tap on the item card beneath it; the strips themselves are text
   only, so nothing inside needs to be clickable.
   ============================================================ */
.coupon-float {
    position: fixed;
    z-index: 40;
    left: 50%;
    /* clears the mobile bottom nav, whose top edge is at 76px */
    bottom: 88px;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 420px;
    pointer-events: none;
    /* Follows the bar down and back; same timing, so the two move together
       rather than one chasing the other. */
    transition: transform .22s ease;
}

/*
 | With the bar tucked away there is nothing left to clear, so the strips take
 | its place instead of hovering over the gap it left. 76px is exactly what
 | the bar occupied: its 64px of height and the 12px it floats above the edge.
 |
 | translateX has to be restated - a transform replaces the one it overrides
 | rather than adding to it, and dropping it would throw the strips off centre
 | by half their width.
 */
@media (max-width: 1023px) {
    body.mob-nav-away .coupon-float {
        transform: translateX(-50%) translateY(76px);
    }
}
.coupon-float > * {
    box-shadow: 0 10px 30px -12px rgba(40, 8, 10, 0.45);
}
/* The strips carry their own bottom margin for the stacked page layout;
   the last one does not need it when floating. */
.coupon-float > *:last-child {
    margin-bottom: 0;
}

/* The wrapper takes no pointer events so the floated block never blocks a tap
   on the item card beneath it. The close button on the applied-coupon notice
   is the one thing here that has to be clickable, so it takes them back. */
.coupon-float button {
    pointer-events: auto;
}

/*
 | And the tab strip, or it cannot be scrolled.
 |
 | The buttons alone were not enough: a tap on a tab worked, but a drag across
 | the strip went straight through to the page, so the tab hanging off the end
 | could never be reached. The row is what scrolls, so the row has to receive
 | the gesture.
 */
.coupon-float .offer-tabs-row {
    pointer-events: auto;
}

/* Desktop: the nudges move out of the centre and sit in the bottom-right
   corner, at a larger size. Centred above the foot of the page they ran across
   the item grid; in the corner they stay readable without covering the menu.

   The sizing is applied from the container rather than the strips themselves,
   so the same two components keep their compact form in the cart and on
   checkout, where they sit in the page flow instead of floating. Only the
   ordering page uses .coupon-float. */
@media (min-width: 1024px) {
    .coupon-float {
        left: auto;
        right: 24px;
        bottom: 24px;
        transform: none;
        width: 480px;
        max-width: calc(100vw - 48px);
    }

    .coupon-float > div {
        padding: 0.875rem 1rem;
        gap: 0.625rem;
        border-radius: 0.75rem;
    }

    .coupon-float p {
        font-size: 0.9375rem;
        line-height: 1.45;
    }

    .coupon-float i {
        font-size: 1.25rem;
    }
}

/* ============================================================
   ORDER SAVINGS PANEL
   Coupon and reward-point savings split out, plus the points the order
   earned back. Shared by the order-success screen, the customer's order
   details and the admin order screen.

   Neutral by default; .order-savings-celebrate adds the header and the
   burst, and is opt-in so the two details screens stay factual.
   ============================================================ */
.order-savings {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #D6EFE0;
    background: #F2FBF6;
}
.order-savings-head {
    position: relative;
    overflow: hidden;
    margin: -12px -14px 10px;
    padding: 16px 14px 12px;
    text-align: center;
    border-radius: 14px 14px 0 0;
    background: #E8F7EE;
}
.order-savings-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 50%;
    color: #ffffff;
    background: #1ab759;
    animation: order-savings-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.order-savings-badge i { font-size: 22px; }
@keyframes order-savings-pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.order-savings-total {
    font-size: 16px;
    font-weight: 700;
    color: #12100d;
}
.order-savings-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.order-savings-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #4a4640;
}
.order-savings-rows li small {
    font-size: 11px;
    opacity: 0.75;
}
.order-savings-amount {
    font-weight: 600;
    white-space: nowrap;
    color: #1ab759;
}
.order-savings-sum {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px dashed #C9E7D6;
    font-weight: 700;
    color: #12100d !important;
}
.order-savings-earned {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #C9E7D6;
    font-size: 12px;
    line-height: 1.4;
    color: #12100d;
}
.order-savings-earned .loyalty-icon {
    font-size: 15px;
    color: #1ab759;
}

/* Decorative only; the panel reads the same without them. */
.order-savings-confetti {
    position: absolute;
    top: -12px;
    width: 6px;
    height: 11px;
    border-radius: 2px;
    opacity: 0;
    animation: order-savings-fall 1.4s ease-in forwards;
}
@keyframes order-savings-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(150px) rotate(400deg); opacity: 0; }
}
.order-savings-confetti-1 { left: 12%; background: #4d001f; animation-delay: 0s;    }
.order-savings-confetti-2 { left: 28%; background: #ffdb1f; animation-delay: 0.14s; }
.order-savings-confetti-3 { left: 44%; background: #1ab759; animation-delay: 0.06s; }
.order-savings-confetti-4 { left: 60%; background: #ffdb1f; animation-delay: 0.24s; }
.order-savings-confetti-5 { left: 76%; background: #4d001f; animation-delay: 0.11s; }
.order-savings-confetti-6 { left: 90%; background: #1ab759; animation-delay: 0.3s;  }

@media (prefers-reduced-motion: reduce) {
    .order-savings-confetti { display: none; }
    .order-savings-badge { animation: none; }
}

/* ============================================================
   NO SITE HEADER ON PHONES  (cart, checkout, order success)
   These three opened with ~110px of furniture above the content: the
   site header, 76px and re-pinning itself as a fixed bar the moment you
   scroll, and then each page's own title or back-link row.

   On these pages the header is dropped outright and that row pins in
   its place, so the customer keeps a way back without paying for both.
   Nothing in the header is needed here: the bottom nav carries home,
   menu, offers and account, and each of these pages has its own back
   link. .ff-topbar stays - 34px, and the language picker lives nowhere
   else - which is why the pinned row sits at 34px rather than 0.

   Applied by each page component adding .hide-site-header to <body> for
   as long as it is mounted, and removing it in beforeUnmount. It must be
   removed: the class is on <body>, so leaving it set would suppress the
   header on every page afterwards.

   Desktop is untouched: there is room for all of it there.
   ============================================================ */
@media (max-width: 1023px) {
    body.hide-site-header .ff-header {
        display: none !important;
    }

    /* With the header gone, the section spacing that used to sit under it
       becomes a band of white between the red topbar and the page's own first
       row. The pinned bar carries its own 8px of padding, which is all the
       separation needed against the strip. */
    .bare-head-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .page-sticky-head {
        position: sticky;
        /* directly under .ff-topbar, which is sticky at 0 and 34px tall */
        top: 34px;
        z-index: 30;
        /* bleeds past .container's 10px side padding, so items scroll under
           the bar rather than appearing beside it */
        margin-left: -10px;
        margin-right: -10px;
        margin-bottom: 10px;
        padding: 8px 10px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(18, 16, 13, 0.06);
    }
    /* Smaller than the 20px it uses elsewhere: pinned, it is a label rather
       than a page title, and every pixel here is one taken off the list.
       Checkout has no heading in its row, so this simply does not apply. */
    .page-sticky-head h3 {
        font-size: 16px;
    }

    /* Chosen once and then scrolled past, so it does not need the gap it
       carries on desktop. */
    .cart-order-type {
        margin-bottom: 10px !important;
    }
}

/* ============================================================
   DELIVERY / TAKEAWAY SWITCH (cart page)
   The grey pill was sized by the generic grid classes it borrows:
   .row carries -m-3 and each .col-6 a 12px padding, so a ~28px label
   sat inside ~52px of pill. Those are page-grid values and mean nothing
   here - the switch is two short labels side by side.

   Padding moves onto the pill itself (3px, the gutter that makes the
   selected label read as a raised chip), the columns give theirs up,
   and the columns size to their content instead of taking half each -
   which also stops an empty half being reserved when only one of
   delivery or takeaway is enabled.
   ============================================================ */
.cart-order-type {
    margin: 0 auto 16px;
    padding: 3px;
}
.cart-order-type > .col-6 {
    width: auto;
    padding: 0;
}
.cart-order-type label {
    padding: 6px 16px;
}

/* ============================================================
   CHECKOUT: CLOSE THE GAP ABOVE CART SUMMARY  (phones)
   Stacked, the form card and the summary card were separated by ~48px
   of nothing: the form card's own mb-6 (24px) plus 12px of column
   padding at each side of the split. On desktop the two are side by
   side and none of that reads as a gap, which is why it is only closed
   here.

   12px is left - the form column's bottom padding - so the two cards
   still read as separate, and the Cart Summary heading moves up into
   the space rather than sitting below a band of empty page.
   ============================================================ */
@media (max-width: 767px) {
    .checkout-form-card {
        margin-bottom: 0 !important;
    }
    .checkout-summary-col {
        padding-top: 0 !important;
    }
}

/* ============================================================
   CHECKOUT SUMMARY TITLE ON THE PAGE HEADER  (desktop)
   "Cart Summary" moves out of the summary card and onto the page
   header row, opposite Back / Checkout. It sat on its own centred row
   inside the card, pushing the totals and the pay buttons down a line
   for no information gained - the header row already has empty space
   on the right, and the title lands roughly over the column it names.

   Two nodes rather than one moved: the header row and the card are
   different containers, so no single element can sit in both layouts.
   Only ever one is visible.
   ============================================================ */
.checkout-summary-title {
    display: none;
}
@media (min-width: 1024px) {
    .checkout-summary-title {
        display: block;
    }
    .checkout-summary-heading {
        display: none;
    }
}

/* ============================================================
   CHECKOUT ITEM LIST SCROLLS
   A long basket pushed the totals and the pay buttons far below the
   fold. The list now shows about three items and scrolls, so what the
   customer has to act on stays near the top of the column.

   max-height, not height: a one or two item basket still collapses to
   its own size rather than leaving a gap.

   Both breakpoints - a long list buries the buttons on a phone just as
   it does on desktop.
   ============================================================ */
.checkout-items {
    max-height: 270px;
    overflow-y: auto;
    /* keeps the scrollbar off the item text */
    padding-right: 8px;
    scrollbar-width: thin;
}
.checkout-items::-webkit-scrollbar {
    width: 6px;
}
.checkout-items::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(18, 16, 13, 0.18);
}
.checkout-items::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================================
   CHECKOUT HEADER: BOTH LABELS CENTRED OVER THEIR COLUMNS
   The row mirrors the 7 / 5 split of the two columns beneath it, and
   each label centres in its own half - "Checkout" over the form,
   "Cart Summary" over the summary card - rather than one being centred
   on the page and the other pinned to the right edge.

   The back button stays absolutely placed at the left, so it does not
   take part in the split and cannot pull "Checkout" off centre.

   Below 1024px .checkout-summary-title is display:none, leaving the
   heading as the row's only child, which the row's own justify-center
   then centres. So this block does not need a mobile counterpart.
   ============================================================ */
@media (min-width: 1024px) {
    .checkout-page-head > h3 {
        flex: 0 0 58.3333%;   /* matches md:col-7 */
        text-align: center;
    }
    .checkout-summary-title {
        display: block;
        flex: 0 0 41.6667%;   /* matches md:col-5 */
        text-align: center;
    }
}

/* ============================================================
   CHECKOUT PAYMENT ACTIONS - FLOATING
   The heading and the pay buttons stay within reach instead of sitting
   at the foot of a long form.

   The two breakpoints need different mechanisms, not different values:

   Phones - fixed. The page is one tall column and the buttons are the
   last thing in it, so sticky would only pin them once the customer had
   already scrolled to the end, which is the moment they no longer need
   the help. Fixed keeps them there throughout. Offset clears the bottom
   nav, whose top edge is at 76px.

   Desktop - sticky inside the summary column. Fixed would need that
   column's width and offset hard-coded, and both move with the
   viewport; sticky keeps the dock in the column's flow and lets the
   browser hold it. The column is stretched by .row to the height of the
   taller form beside it, which is what gives the dock room to travel.
   ============================================================ */
/* The dock reads as white-on-white where it meets the summary, which left the
   payment step easy to scroll past. A primary-tinted hairline marks it out as
   the panel the order is placed from - the same tint the schedule chips and the
   Add More Items button on this page already use, so it reads as one family
   rather than a new kind of box. */
.checkout-pay-actions {
    background: #ffffff;
    border: 1px solid rgb(var(--primary) / 0.25);
    border-radius: 16px;
}

@media (max-width: 1023px) {
    .checkout-pay-actions {
        position: fixed;
        z-index: 30;
        left: 12px;
        right: 12px;
        bottom: 88px;
        padding: 10px 12px;
        border-radius: 16px;
        box-shadow: 0 10px 30px -10px rgba(40, 8, 10, 0.35);
    }
    /* The dock is out of flow, so the page has to reserve the height it
       would have taken - otherwise it covers the total it belongs to. */
    .checkout-summary-col {
        padding-bottom: 190px !important;
    }
}

@media (min-width: 1024px) {
    .checkout-pay-actions {
        position: sticky;
        bottom: 16px;
        z-index: 20;
        /* Was padding-top alone, which left the new border hugging the select
           and the Pay button on three sides. */
        padding: 12px 14px;
        border-radius: 16px;
    }
}

/* ============================================================
   CHECKOUT ON PHONES: MAP, DIRECTIONS, ITEM SCROLLBAR
   ============================================================ */

/* The directions link stands in for the map on phones only. */
.checkout-directions {
    display: none;
}

@media (max-width: 1023px) {
    /* An embedded map is a lot of a phone screen for something the customer
       will open in their own maps app anyway. The branch address above it
       still names the place; this replaces the map, it does not hide it
       without a substitute. */
    .checkout-map {
        display: none;
    }
    .checkout-directions {
        display: inline-flex;
    }

    /* Phones get no styled scrollbar at all - see .checkout-items-wrap.
       Mobile browsers draw overlay scrollbars that appear only during a
       gesture, and ::-webkit-scrollbar does not reliably override that,
       so the affordance is drawn instead of asked for. */
}

/* ============================================================
   CHECKOUT TIME SLOTS - MORE PROMINENT  (phones)
   The choice was easy to miss: the block had no surface of its own, and
   the selected card was marked with a 5% tint and a 30% border, which
   at phone brightness is close to no marking at all. Customers reached
   the pay buttons without realising they had picked a time.

   Three changes, in order of how much they do: the block gets a tinted
   panel so it reads as something to answer, the cards share the width
   evenly instead of hugging their text, and the selected one is stated
   plainly - full-strength border, a real tint, and a ring.
   ============================================================ */
@media (max-width: 1023px) {
    /* Neutral surface, not a tinted one: the panel is here to group the
       choice, and recolouring the section red made the form look like it was
       flagging an error. */
    .checkout-time-slots {
        margin-bottom: 4px;
        padding: 12px;
        border-radius: 14px;
        border: 1px solid #EFF0F6;
        background: #FAFAFB;
    }
    /* Size only - the heading keeps the colour every other heading on the
       page uses. */
    .checkout-time-slots > h4 {
        font-size: 15px;
    }
    /* Equal halves rather than w-fit: bigger targets, and the pair reads as
       two options rather than two labels of different sizes. */
    .checkout-time-slots > div > label {
        flex: 1 1 0;
        min-width: 0;
        justify-content: space-between;
        gap: 10px;
    }
    /* The selected card keeps the template's own colours (bg-primary/5,
       border-primary/30). Weight is the only thing added, so the choice
       still reads at a glance without painting the card red. */
    .checkout-time-slots label:has(.custom-radio-field:checked) dt {
        font-weight: 600;
    }
}

/* ============================================================
   CHECKOUT ITEM LIST: A SCROLL CUE THAT ACTUALLY SHOWS
   Mobile browsers draw overlay scrollbars - they fade in during a
   gesture and are invisible at rest, and ::-webkit-scrollbar does not
   reliably override that on iOS. Asking for a visible native bar was
   the wrong approach; the cue is drawn instead.

   .is-scrollable is set by the template when the basket holds more
   items than the list shows, so a short basket gets no false hint.

   The fade is pointer-events: none - it sits over the last item, and
   must not eat a tap meant for it.
   ============================================================ */
.checkout-items-wrap {
    position: relative;
}
.checkout-items-wrap.is-scrollable::after {
    content: "";
    position: absolute;
    left: 0;
    right: 8px;
    bottom: 0;
    height: 44px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 92%);
}
/* Chevron sitting on the fade: the gradient alone reads as "there is more",
   the arrow says "and you can scroll to it". */
.checkout-items-wrap.is-scrollable::before {
    content: "\f078";                 /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    bottom: 4px;
    z-index: 1;
    transform: translateX(-50%);
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
    color: rgb(var(--primary));
    animation: checkout-items-nudge 1.6s ease-in-out infinite;
}
@keyframes checkout-items-nudge {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .checkout-items-wrap.is-scrollable::before { animation: none; }
}

/* ============================================================
   CHECKOUT PAYMENT ROW
   The method picker and the action share one row. Both get the same
   height so the row reads as a single control rather than a select
   with a button parked beside it.

   The select keeps its native appearance - the platform arrow is the
   clearest signal that it opens, and a custom one would have to be
   redrawn for every browser. Padding on the right leaves room for it.
   ============================================================ */
.checkout-pay-row > select,
.checkout-pay-row > button {
    height: 46px;
}
.checkout-pay-row > select {
    padding-right: 32px;
}

/* ============================================================
   MODALS ABOVE THE PINNED TOPBAR
   .modal is z-60 and .ff-topbar z-61, so the topbar painted over the
   top of every modal. On phones that is where the close button is -
   .ff-modal only clears the bar from lg up (top-[74px]) - so the time
   slot and coupon dialogs could be opened but not closed.

   Raised rather than offset: a modal draws a full-screen backdrop and
   is meant to be the top layer, so it should cover the bar rather than
   dodge it. .info-modal stays one step higher, keeping the order it
   had when it was z-70 against the base z-60.
   ============================================================ */
.modal {
    z-index: 80;
}
.info-modal {
    z-index: 90;
}

/* ============================================================
   ORIGINAL PRICE, STRUCK THROUGH
   Sits on its own line above the amount actually due, so the eye lands
   on what is payable first and reads the original as a footnote to it.
   Small, grey and never bold - it is context, not a second price
   competing with the real one.

   Only rendered when something has come off; see the v-if at each call
   site (cart bar, checkout total, order details total).
   ============================================================ */
.price-stack {
    text-align: right;
    line-height: 1.25;
}
.total-was,
.cart-subtotal-was {
    display: block;
    font-weight: 500;
    /* Was 11px in #9a958d: there, but not legible enough to carry the saving
       it is evidence of. Large enough to read, still clearly secondary to the
       amount actually due. */
    font-size: 13px;
    line-height: 1.2;
    color: #6e7191;
    text-decoration-thickness: 1.5px;
}

/* The old price and the rate sit on one line, right-aligned over the amount
   due. */
.cart-was-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Wraps, because the capped note can join the row and the old price and
       the rate must not be squeezed to make room for it. Right-aligned
       already, so a wrapped line sits under the rate it explains. */
    flex-wrap: wrap;
    gap: 6px;
}

/* Why a coupon paid less than its headline rate. A footnote to the saving,
   not a second claim about it, so it is small and grey next to the green
   badge rather than competing with it. */
.cart-cap-note {
    font-size: 10px;
    line-height: 1.5;
    /* Against the nowrap on the price line above: that keeps a figure from
       breaking in half, but this is a sentence, and inheriting it sent the
       note out under the checkout button instead of wrapping. */
    white-space: normal;
    text-transform: none;
    color: #6b7280;
}

/* In the cart bar it takes a line of its own, directly beneath the rate, so
   the column reads: old price and rate, why the rate is what it is, the new
   total. Inline there would crowd a row that is already a struck price and a
   badge on a phone. */
.cart-was-row .cart-cap-note {
    display: block;
    width: 100%;
    text-align: right;
}

.cart-was-row .cart-subtotal-was {
    display: inline;
}

/* The rate itself. Green because it is money the customer keeps, and quiet
   enough not to compete with the price it explains. */
.cart-saving-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: #15803d;
    background-color: #dcfce7;
}

/* The label belongs beside the amount that is actually due, not floating
   between the two lines. Centring put it in the gap; baseline alignment on
   its own would pin it to the struck line, since that is the first baseline.

   'last baseline' is the exact answer and the flex-end above is the fallback
   for engines without it - close enough that the difference is a descender.
   Applies to the cart bar and to every total row using .price-stack. */
.cart-subtotal:has(.cart-subtotal-was),
.flex:has(> .price-stack) {
    align-items: flex-end;
    align-items: last baseline;
}

/* ============================================================
   FIGURES INSIDE THE COUPON HINT
   The amount still to spend, and the discount it unlocks, carry the
   whole point of the sentence - the rest is scaffolding. Emphasising
   just those two gives the line something to catch the eye without
   turning it into a banner.

   Deep amber rather than the brand red: the hint sits on the amber
   #FFF8E1 chip, so this reads as part of it instead of an alert.
   ============================================================ */
/* The amount and the discount inside the unlock hint. A darker green than the
   card's icon: #1AB759 is right for an icon but too light to read as text on
   the pale green behind it. */
.hint-figure {
    font-weight: 700;
    color: #15803D;
}

/* ============================================================
   PRODUCT QUANTITY COUNTER
   The minus / value / plus group, wherever it appears - the cart line
   items and the item modal both use .indec-group.

   The cart version had no container of its own, so the two circular
   buttons and the number between them read as three loose controls
   rather than one stepper. A border draws them together.

   Pill radius to match the round buttons inside it, and the padding is
   set here so both places sit the same distance inside the border - the
   modal previously supplied its own and the cart supplied none.
   ============================================================ */
.indec-group {
    padding: 3px 8px;
    /* #D9DBE9 is what the project uses for form-control borders. The first
       attempt at #E3E5EA was too close to white to read at all, and closer
       still to the #F7F7FC the modal stepper sits on. */
    border: 1px solid #D9DBE9;
    border-radius: 999px;
}

/* ============================================================
   GAP ABOVE "SELECT PAYMENT METHOD"
   The totals card carried mb-6 (24px) and the pay dock adds its own
   padding on top of that, which left the heading floating well clear of
   the totals it follows. 12px is enough to separate the two blocks.
   ============================================================ */
.checkout-totals-card {
    margin-bottom: 12px !important;
}

/* ============================================================
   FIELD SHELLS - A BORDERED WRAPPER ROUND A BARE INPUT
   Most inputs here are themselves the bordered box, so their focus ring
   lands on the border and reads normally. These are the exception: the
   input sits inside a bordered wrapper - beside a country-code control,
   a search icon, or stepper buttons - so the ring drew a second
   rectangle inside the rounded border. That is the box that appeared in
   the field on click.

   The ring is moved rather than deleted: suppressing it outright would
   leave a keyboard user with no sign of where focus is, so the wrapper
   takes it on with :focus-within.

   Covers the phone fields (registration, guest login, edit profile),
   the admin message search, and the quantity stepper - whose border is
   applied from .indec-group above rather than in its markup.
   ============================================================ */
.field-shell:focus-within,
.indec-group:focus-within {
    border-color: rgb(var(--primary));
}
.field-shell input:focus,
.indec-group input:focus {
    outline: none;
    box-shadow: none;
}

/* ============================================================
   DELIVERY / TAKEAWAY DOCKS WHILE SCROLLING
   The order type governs what the rest of the page means - which
   charges apply, which fields show - so it stays reachable rather than
   scrolling away above a long list of items.

   The offsets clear whatever is already pinned above it:
     phones   topbar 34px + the pinned page head (~40px)
     desktop  topbar 34px + the site header, which is 74px once .active

   Only where the switch is a top-level element: the cart page, and the
   checkout page on phones. On checkout desktop it sits inside the
   summary card, and pinning it there would lift it out of the card it
   belongs to - so that slot deliberately carries no dock class.
   ============================================================ */
@media (max-width: 1023px) {
    .order-type-dock {
        position: sticky;
        top: 74px;
        z-index: 25;
    }
}
@media (min-width: 1024px) {
    .cart-order-type.order-type-dock {
        position: sticky;
        top: 112px;
        z-index: 25;
    }
}
/* Reads as a floating chip once it detaches: the page scrolls past on both
   sides of it, so it needs an edge of its own. */
.order-type-dock {
    box-shadow: 0 6px 18px -8px rgba(40, 8, 10, 0.35);
}

/* ---------------------------------------------------------------------------
   RIPPLE ON THE OFFER CARDS

   The offer cards - the "add x more to unlock" hint, the applied-coupon
   notice, the reward-point boxes and the coupons on the offers page - sit in
   quiet columns where they were easy to scroll straight past. Rings spread out
   from the left of the card like a drop landing in water.

   The rings are sized as a share of the card's own width rather than in pixels,
   so the same rule reads the same on a 360px cart strip and a 480px floating
   nudge. They are clipped by the card, which is what makes them look like
   water meeting an edge instead of circles hanging off the side.
   --------------------------------------------------------------------------- */
.ripple-card {
    position: relative;
    overflow: hidden;
    /*
       Makes the card a stacking context, which does two jobs: it keeps the
       rings from interleaving with anything else on the page, and it means a
       negative z-index on them paints above the card's own background but
       below its content. That is why nothing has to be declared on the
       children - a rule like `.ripple-card > *` would override the position
       of any child the card positions itself, such as a corner badge.
    */
    isolation: isolate;
}

/* Laid over the card, behind its content, and clipped by it. Named -layer to
   stay clear of the .ripple used for button click feedback on the landing
   page, which carries a transform of its own. */
.ripple-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    pointer-events: none;
}

.ripple-ring {
    position: absolute;
    top: 50%;
    /*
       Anchored to the right of the strip, away from the icon and the sentence
       on the left - the rings sit in the empty end of the card rather than
       travelling underneath the words.

       Inset far enough that a finished ring still has room: the widest one is
       --ripple-size across, so its radius has to fit between here and the
       edge or it would be cut off mid-wave.
    */
    left: var(--ripple-x, calc(100% - 2.75rem));
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    border-radius: 50%;
    border-style: solid;
    border-color: var(--ripple-color, rgb(var(--primary)));
    opacity: 0;
    /*
       Grown by width rather than by transform: scale() would magnify the
       border along with everything else, so a ring would get thicker as it
       travelled. Animating the width and the border independently is what
       lets a wave leave thick and arrive thin.
    */
    animation: ripple-out var(--ripple-duration, 5.5s) linear infinite;
}

@keyframes ripple-out {
    0% {
        width: 0.5rem;
        border-width: 4px;
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    /*
       Gone before it gets there. The ring keeps growing to its full size after
       this, but invisibly - so a wave always finishes in open card rather than
       being clipped in half by the edge.
    */
    88% {
        opacity: 0;
    }
    100% {
        width: var(--ripple-size, 5rem);
        border-width: 1px;
        opacity: 0;
    }
}

/* Decoration only: nobody loses information when it holds still. */
@media (prefers-reduced-motion: reduce) {
    .ripple-ring {
        animation: none;
    }
}

/* The ring colour. Only the unlock hint ripples today, so only its green is
   defined; another card would add its own alongside. */
.ripple-green { --ripple-color: rgb(26, 183, 89); }


/*
 | The star row shown on a menu card and beside a dish's price.
 |
 | Hidden entirely when a dish has no reviews - that is handled in the component
 | rather than here, because an empty row of outlines reads as a bad score.
 */
.item-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1;
}

.item-rating--sm {
    font-size: 11px;
}

.item-rating-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 10px;
}

.item-rating-figure {
    font-weight: 600;
    color: var(--heading, #14142B);
}

.item-rating-count {
    color: var(--paragraph, #6E7191);
}

/* The written reviews under a dish, in its modal. */
.item-reviews {
    max-height: 320px;
    overflow-y: auto;
}


/* ============================================================
   THE SCRATCH CARD HINT
   Sits in the same stack as the coupon and loyalty hints, and is
   deliberately the warmest of the three: of the things a basket can be
   close to, a card you scratch is the one worth noticing.
   ============================================================ */
.scratch-hint {
    background-color: #FFF4E5;
}

/* Once it is won the line stops being a nudge and becomes news, so it
   takes the same green the other "you have earned something" rows use. */
.scratch-hint-earned {
    background-color: #E8F7EE;
}

.scratch-hint-figure {
    font-weight: 700;
    color: #B45309;
}

.scratch-hint-earned .scratch-hint-figure {
    color: #15803D;
}


/* The rate, leading the celebration overlay.
   Sized to be the first thing read: this is the one number that says how good
   the offer is, and the amount beneath it says what that comes to. Green, as
   every figure on the site that means money kept. */
.coupon-pop-rate {
    margin: 4px 0 2px;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    white-space: nowrap;
    color: #15803D;
}

@media (max-width: 420px) {
    .coupon-pop-rate {
        font-size: 32px;
    }
}


/* ============================================================
   THE OFFER STRIP, AS TABS
   Every offer the basket can reach on one strip: what has been
   reached, and what is next. The ripple still runs behind it, so the
   content sits above its own stacking context.
   ============================================================ */
/* The wrapper holds the tabs and the panel together; it has no look of its
   own. */
.offer-tabs {
    display: block;
}

.offer-tabs-row {
    display: flex;
    /* One line. A tab that does not fit is reached by scrolling, and the half
       of it that shows is what says there is more. */
    flex-wrap: nowrap;
    align-items: flex-end;
    /* Tight enough that the tabs read as one strip rather than separate
       buttons; still a seam, so two adjacent borders do not merge into a
       single thick line. */
    gap: 2px;
    /* Flush with the panel below, which squares its own top-left corner to
       meet it. */
    padding-left: 0;
    /* Above the panel, so the open tab's join paints over its edge. */
    position: relative;
    z-index: 1;

    overflow-x: auto;
    /* Scrolling in one axis makes the other clip, and the tabs overlap the
       panel by a pixel - so the row carries that overlap instead of them. */
    overflow-y: hidden;
    margin-bottom: -1px;
    -webkit-overflow-scrolling: touch;

    /* No scrollbar: it would sit in the seam between the tabs and the panel
       and break the join they exist to make. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.offer-tabs-row::-webkit-scrollbar {
    display: none;
}

/* The answer to whichever tab is open. Carries the ripple, so it keeps room
   on the right for the rings to run in. */
.offer-tabs-panel {
    padding-right: 3.5rem;
    /* Squared where the first tab lands, so the two left edges are one line
       rather than a curve beside a straight edge. Every other corner keeps
       the card's radius. */
    border-top-left-radius: 0;
}

.offer-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Only as wide as the label, so the row reads as tabs rather than a
       segmented control. */
    /* Sized to its label and never squashed: a long tab runs off the end of
       the row, where it is scrolled to rather than folded up. */
    flex: 0 0 auto;
    padding: 7px 14px 8px;
    /* Square at the bottom: that edge belongs to the panel. */
    border-radius: 6px 6px 0 0;

    border: 1px solid rgba(26, 183, 89, 0.7);
    background-color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    /* Each label on one line; the row scrolls when they do not all fit. */
    white-space: nowrap;
    color: #15803d;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.offer-tab:hover {
    border-color: rgb(26, 183, 89);
    background-color: #F4FBF7;
}

/* The open tab. Filled rather than merely outlined, so which one the
   sentence belongs to is never in doubt. */
.offer-tab-on {
    background-color: #DAEEFC;
    border-color: rgba(26, 183, 89, 0.7);
    border-bottom-color: #DAEEFC;
    color: #15803d;
    font-weight: 700;
}

/* Reached already. Still readable and still selectable - a customer may
   well want to check what they have - but plainly no longer the thing to
   aim for. */
.offer-tab-done {
    border-color: rgba(110, 113, 145, 0.55);
    background-color: #fff;
    color: #6e7191;
}

.offer-tab-done.offer-tab-on {
    background-color: #DAEEFC;
    border-color: rgba(110, 113, 145, 0.55);
    border-bottom-color: #DAEEFC;
    color: #6e7191;
}

.offer-tab:first-child {
    border-top-left-radius: 8px;
}

.offer-tab-tick {
    font-size: 10px;
}

.offer-tabs-text {
    font-size: 11px;
    line-height: 1rem;
    color: var(--heading, #14142B);
}


/* The sentence and its action share a line, so the button reads as the answer
   to what the panel just said rather than as a separate control. */
.offer-tabs-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.offer-apply-btn {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: #fff;
    background-color: rgb(26, 183, 89);
    cursor: pointer;
    transition: background-color .15s ease;
}

.offer-apply-btn:hover {
    background-color: #15803d;
}

.offer-apply-btn:disabled {
    opacity: .6;
    cursor: default;
}

.offer-apply-error {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: rgb(var(--danger, 251 78 78));
}


/* The one note under a prize: what it covers. Quiet, and on its own line so
   it is not mistaken for part of the sentence above it. */
.offer-rules-note {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.45;
    color: #4b5563;
}


/* A better offer going unused. Amber rather than red: nothing is broken, but
   the customer is about to pay more than they need to. */
.offer-better-note {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
    color: #B45309;
}


/* The dialling code on the signup form.
   Sits inside the phone field rather than beside it, so it gives up the
   field's own border and padding and takes exactly the width of the code it
   is showing - no more, or the number beside it starts somewhere arbitrary. */
.signup-code {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* Full height, so its text centres on the field rather than on its own
       smaller box - which is what had it sitting a pixel or two high. */
    align-self: stretch;
    padding-right: 14px;
    cursor: pointer;
    /* The arrow, drawn rather than native: the native one is wider than the
       space between the code and the number beside it. */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236E7191' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 8px 5px;
}

/* What is actually read. It also sets the width of the whole control, which
   is the point of it. */
.signup-code-label {
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    color: #12100d;
}

/* The real control, over the top and invisible. Still focusable, still opens
   the native list, still announced - only its own rendering is given up. */
.signup-code-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Focus has to show on something, since the select itself draws nothing.
   On the label, not the select: the select is the sibling AFTER it, so there
   is no combinator that reaches back. */
.signup-code:focus-within .signup-code-label {
    outline: 2px solid rgb(var(--primary));
    outline-offset: 3px;
    border-radius: 2px;
}

/* Between the code and the number. Short of the field's full height so it
   reads as a divider rather than a second border. */
.signup-code-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    background: #D9DBE9;
}


/* ============================================================
   THE PAGE, TOP TO BOTTOM
   The footer belongs at the foot of the window, not directly under
   the header. Between leaving one route and the next one painting
   the router view is empty, and with nothing holding the page open
   the footer rode up the screen and dropped back a moment later.
   ============================================================ */
.frontend-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Phones measure 100vh against the window with the browser chrome hidden,
   which is taller than what is actually on screen. dvh is the visible
   height; the line above stays as the fallback. */
@supports (min-height: 100dvh) {
    .frontend-shell {
        min-height: 100dvh;
    }
}

/* Nothing in the column gives up height to fit - the page grows instead. */
.frontend-shell > * {
    flex-shrink: 0;
}

/* The slack goes here, so a short page pushes the footer to the bottom of
   the window rather than leaving it halfway up. */
.frontend-main {
    flex: 1 0 auto;
    /* Its children decide their own width; without this a long table or a
       wide image would stretch the column rather than scroll inside it. */
    min-width: 0;
}


/* ============================================================
   A MEAL, IN THE ADD-TO-CART MODAL
   One price covers every part, so nothing here carries an amount: a
   figure beside a choice reads as a surcharge, and a meal has none.
   ============================================================ */
.meal-part {
    padding: 12px 0;
    border-bottom: 1px dashed #EFF0F6;
}
.meal-part:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.meal-part-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.meal-part-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #14142B;
}

/* "1 / 2" while a part is still open, so the customer can see what the
   greyed-out Add button is waiting for. */
.meal-part-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    color: #B45309;
    background: #FEF3C7;
}
.meal-part-count.is-done {
    color: #15803d;
    background: #E8F7EE;
}

.meal-part-included {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6E7191;
}

/* What comes with the meal whatever else is chosen. */
.meal-included-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.meal-included-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #14142B;
}
.meal-included-list i {
    font-size: 10px;
    color: #1AB759;
}

.meal-option-grid {
    display: grid;
    /* Two to a row where there is width for it, one on a phone. The names are
       full dish names and wrap badly in anything narrower. */
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 640px) {
    .meal-option-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.meal-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #EFF0F6;
    border-radius: 8px;
    background: #F7F7FC;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.meal-option.is-picked {
    border-color: rgba(26, 183, 89, .7);
    background: #F4FBF7;
}

/* The radio itself is not drawn - the whole row is the control, and the
   border says which one is taken. */
.meal-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.meal-option-name {
    font-size: 12px;
    line-height: 1.4;
    color: #14142B;
}

.meal-option-step {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.meal-option-step button {
    width: 20px;
    height: 20px;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid rgb(var(--primary));
    color: rgb(var(--primary));
    background: #fff;
    transition: background-color .15s ease, color .15s ease;
}
.meal-option-step button:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.meal-option-step button:not(:disabled):hover {
    background: rgb(var(--primary));
    color: #fff;
}
.meal-option-step span {
    min-width: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #14142B;
}

/* The same picks, read back in the basket. */
.cart-meal-parts {
    margin: 2px 0 4px;
}
.cart-meal-parts li {
    font-size: 11px;
    line-height: 1.5;
    color: #6E7191;
}
.cart-meal-parts li::before {
    content: "·";
    margin-right: 5px;
}


/* A meal's parts on an order: the customer's order details, the admin screen
   and the kitchen ticket. Quiet beside the dish name, because the name is
   what identifies the line and these are what it was built from. */
.order-meal-parts {
    margin: 2px 0 6px;
}
.order-meal-parts li {
    font-size: 11px;
    line-height: 1.5;
    color: #6E7191;
}
.order-meal-part-name {
    font-weight: 600;
    color: #14142B;
}


/* "All 2 must come from the same category." Said before anything is picked,
   so the half of the list that greys out afterwards is expected. */
.meal-part-rule {
    margin: -4px 0 8px;
    font-size: 11px;
    line-height: 1.45;
    color: #6E7191;
}

/* A dish the same-category rule has put out of reach. Faded rather than
   hidden: the customer should see that the other kind is still there, and
   that clearing their pick brings it back. */
.meal-option.is-blocked {
    opacity: .4;
    pointer-events: none;
}


/* ============================================================
   REORDER, UNDER THE CATEGORIES
   Where someone who came back for their usual is already looking.
   Outlined rather than filled: it sits above a page of food and
   should not compete with the add buttons on the cards.
   ============================================================ */
/* The "ordered before" section needs no styling of its own: it is the
   menu's own section head and the menu's own item cards. Its rail-of-tiles
   predecessor, and the styles that went with it, are gone. */


/* ============================================================
   THE TIP PICKER, ON THE CHECKOUT
   Between the charges and the amount payable: the last thing the
   customer decides before the figure they are about to pay.
   ============================================================ */
.tip-picker {
    padding: 10px 12px;
    border-top: 1px dashed #EFF0F6;
}

.tip-picker-title {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #14142B;
}

.tip-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tip-option {
    flex: 1 1 auto;
    min-width: 62px;
    padding: 6px 10px;
    border: 1px solid #EFF0F6;
    border-radius: 8px;
    background: #F7F7FC;
    font-size: 12px;
    font-weight: 600;
    color: #14142B;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.tip-option:hover {
    border-color: rgba(26, 183, 89, .6);
}

/* The one taken. Filled, so which it is survives a glance. */
.tip-option.is-on {
    border-color: rgba(26, 183, 89, .8);
    background: #E8F7EE;
    color: #15803d;
}

.tip-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.tip-custom label {
    flex-shrink: 0;
    font-size: 12px;
    color: #6E7191;
}
.tip-custom input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #EFF0F6;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    color: #14142B;
}
.tip-custom input:focus {
    outline: none;
    border-color: rgb(var(--primary));
}


/* ============================================================
   WAITING FOR THE SCRATCH CARD
   Same box as the card, in the same place, so the answer arriving
   moves nothing on the page.
   ============================================================ */
.scratch-card-skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF1F1;
    border: 1px dashed rgba(155, 27, 31, .35);
    box-shadow: none;
}

.scratch-card-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(155, 27, 31, .22);
    border-top-color: #C62828;
    animation: scratch-card-spin .7s linear infinite;
}

@keyframes scratch-card-spin {
    to { transform: rotate(360deg); }
}

/* Respect a system setting that asks for less movement: the ring holds
   still and the dashed border alone says it is working. */
@media (prefers-reduced-motion: reduce) {
    .scratch-card-spinner {
        animation: none;
    }
}

.scratch-card-loading-note {
    margin-top: 8px;
    font-size: 12px;
    color: #6E7191;
}


/* ============================================================
   ORDERED BEFORE: ONE SCROLLABLE ROW
   The menu's own cards, smaller and in a single row that scrolls
   sideways. The size difference is the point: it has to read as a
   shortcut rather than as another category.
   ============================================================ */

/*
 | ItemComponent renders several siblings - the cards and the two modals -
 | so this reaches the card grid by its own class rather than by position.
 | Two classes beat Tailwind's own .grid, so no !important is needed.
 */
.menu-reorder-strip > .grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Room for the cards' hover lift and shadow, which the scroll
       container would otherwise crop. */
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* The bar itself is noise on a strip this short; the half-visible card at
   the right edge is what says it scrolls. */
.menu-reorder-strip > .grid::-webkit-scrollbar {
    display: none;
}

.menu-reorder-strip .product-card-grid {
    /* Narrower than the two-column cards below, and sized so the next one
       is always partly in view. */
    flex: 0 0 auto;
    width: 132px;
    scroll-snap-align: start;
}

.menu-reorder-strip .product-card-grid-content-group {
    padding: 6px 8px 8px;
}

/*
 | No description. At this width it would be a dozen characters before the
 | ellipsis, which tells nobody anything - and these are dishes the customer
 | has already eaten. The footer takes an auto margin because it was relying
 | on the description's flex-auto to push it down.
 */
.menu-reorder-strip .product-card-grid-describe {
    display: none;
}

.menu-reorder-strip .product-card-grid-footer-group {
    margin-top: auto;
}

.menu-reorder-strip .product-card-list-title {
    font-size: 11px;
    line-height: 15px;
}

.menu-reorder-strip .product-card-grid-price-current {
    font-size: 12px;
}

.menu-reorder-strip .product-card-grid-price-previous {
    font-size: 10px;
}

.menu-reorder-strip .product-card-grid-cart-btn {
    width: 26px;
    height: 26px;
}

.menu-reorder-strip .item-card-stepper {
    transform: scale(.85);
    transform-origin: right center;
}


/* ============================================================
   THE CATEGORY RAIL, CLOSER TO THE HEADER
   The swiper pads 12px top and bottom as headroom for the tiles'
   hover lift and its shadow. There is no hover on a phone, so on
   a phone that is 24px of nothing between the header and the food.
   Enough is kept that the tiles do not sit flush against the
   search row below them.
   ============================================================ */
@media (max-width: 1023px) {
    .menu-swiper .menu-slides {
        padding: 2px 0 6px;
    }
}


/* ============================================================
   PAGES WITH NO BOTTOM BAR
   The cart and the checkout do without it, so the three things
   that sat at bottom:88px only to clear it come down to 12px -
   the margin the bar itself kept from the screen edge.
   ============================================================ */
@media (max-width: 1023px) {
    body.mob-nav-off .coupon-float,
    body.mob-nav-off .cart-checkout-bar,
    body.mob-nav-off .checkout-pay-actions {
        bottom: 12px;
    }

    /*
     | The pay dock is out of flow, so the summary column reserves its height
     | to keep it from covering the total it belongs to. 190px was measured
     | with the dock standing 76px higher; without the bar it needs that much
     | less.
     */
    body.mob-nav-off .checkout-summary-col {
        padding-bottom: 114px !important;
    }

    /*
     | And on the cart, the panel reaches the foot of a short page rather than
     | stopping where the dishes do. The column is made at least as tall as
     | the window and the panel takes the slack as a top margin, which keeps
     | it in normal flow - so unlike a fixed dock it can never come to rest on
     | top of the last row.
     */
    body.mob-nav-off .bare-head-section > .container {
        display: flex;
        flex-direction: column;
        /* 34px of address strip above it, plus the section's own 16px below -
           measured, not guessed. If it is out the panel stops a little short
           of the edge or the page gains a little scroll; neither breaks. */
        min-height: calc(100dvh - 50px);
    }

    body.mob-nav-off .cart-checkout-bar {
        margin-top: auto;
    }

    /* The 96px under the section was there to clear the bottom bar. */
    body.mob-nav-off .bare-head-section {
        margin-bottom: 1rem;
    }
}

/* ============================================================
   BOTH PRINTED PRICES, ON THE DISH
   The flyer sets Abholung and Lieferung side by side, and the modal is where
   that pair earns its space: one dish, room to spare, and the moment the
   customer commits. The cards outside stay at one figure - the basket can
   follow only one order type, and a second line on every card is a line of
   scroll per dish for a number most will not act on.

   The one in force carries the weight. The other is grey and present, so the
   cost of the choice is visible without leaving the dish.
   ============================================================ */
.item-price-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.item-price-pair span {
    color: #9a958d;
}

.item-price-pair span.is-on {
    font-weight: 700;
    color: #12100d;
}

/* ============================================================
   BOTH PRINTED PRICES, ON THE CARD
   The flyer prints Abholung and Lieferung side by side and the menu now does
   the same, so nothing has to be selected before a price means anything. The
   basket still charges one of the two - that is settled in the cart - but
   reading the menu no longer depends on having chosen.

   Stacked rather than side by side: the card is half a phone wide with an add
   button next to it, and two labelled figures on one line only fit at a size
   nobody can read.

   Labelled, because two bare numbers beside each other ask a worse question
   than they answer.
   ============================================================ */
.card-price-pair {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.card-price-pair > span {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.card-price-pair .label {
    font-size: 9px;
    line-height: 1.4;
    color: #9a958d;
}

.card-price-pair .amount {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #12100d;
}

@media (min-width: 640px) {
    .card-price-pair .label { font-size: 11px; }
    .card-price-pair .amount { font-size: 15px; }
}

/* ============================================================
   CALL BUTTON - top bar
   Sits beside the language picker. The popup it opens lists the numbers
   configured in Settings > Call Numbers, each one a tel: or wa.me link.
   ============================================================ */
.ff-topbar-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    /* A touch lighter than the bar, so it reads as a control without
       introducing a second colour into a 34px strip. */
    background-color: rgba(255, 255, 255, 0.16);
    color: inherit;
    font-size: 12px;
    line-height: 1;
    transition: background-color 0.2s ease;
}
.ff-topbar-call:hover { background-color: rgba(255, 255, 255, 0.28); }

.ff-topbar-call-list {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 232px;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 17, 26, 0.18);
    /* Above the bar's own 61, or the header below would clip it. */
    z-index: 70;
}
.ff-topbar-call-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--heading, #1f1f39);
    text-decoration: none;
}
.ff-topbar-call-list a:hover { background-color: #f3f4f6; }
.ff-topbar-call-list i { font-size: 16px; flex-shrink: 0; }
.ff-topbar-call-wa { color: #25d366; }
.ff-topbar-call-list span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ff-topbar-call-list strong {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
/* The label under the number - what this line is for. */
.ff-topbar-call-list em {
    font-style: normal;
    font-size: 11px;
    color: #6e7191;
}

/* On a phone the bar is tight, so the word goes and the icon carries it. */
@media (max-width: 480px) {
    .ff-topbar-call span { display: none; }
    .ff-topbar-call { padding: 4px 8px; }
    .ff-topbar-call-list { min-width: 208px; }
}

/* The Call button in the footer.
   Shares .ff-topbar-call so the two controls cannot drift apart, with
   only the placement differing: the footer sits at the end of the
   document, so its panel opens upward instead of down - otherwise it
   would hang past the bottom of the page. */
.footer-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ff-topbar-call-list--up {
    top: auto;
    bottom: calc(100% + 8px);
}
/* The footer's ground is the brand colour, same as the top bar, so the
   button needs no restyling - only a little breathing room. */
.footer-call {
    flex-shrink: 0;
}

/* A dish name that will not fit one line on a grid card gets a second.
   Three columns made the cards wide enough for all but the longest few
   ("Gemischter Vorspeisenteller für 2 Personen"), and nowrap meant those
   could only ever be cut. Scoped to the grid: a list row is far wider and
   a single line is right there. */
.product-card-grid .product-card-list-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* Two lines of the 14px title. Keeps cards in a row the same height
       whether their name wraps or not. */
    min-height: 2.6em;
    line-height: 1.3;
    overflow: hidden;
}
@media (min-width: 640px){
    .sm\:col-3{
    width: 25%;
    padding: 0.75rem;
  }
    .sm\:col-5{
    width: 40%;
    padding: 0.75rem;
  }
    .sm\:col-6{
    width: 50%;
    padding: 0.75rem;
  }
    .sm\:col-7{
    width: 60%;
    padding: 0.75rem;
  }
    .sm\:col-12{
    width: 100%;
    padding: 0.75rem;
  }
    .sm\:form-col-2{
    width: 20%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
    .sm\:form-col-3{
    width: 25%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
    .sm\:form-col-4{
    width: 33.333333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
    .sm\:form-col-5{
    width: 40%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
    .sm\:form-col-6{
    width: 50%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
    .sm\:form-col-12{
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
@media (min-width: 768px){
    .md\:col-4{
    width: 33.333333%;
    padding: 0.75rem;
  }
    .md\:col-5{
    width: 40%;
    padding: 0.75rem;
  }
    .md\:col-6{
    width: 50%;
    padding: 0.75rem;
  }
    .md\:col-7{
    width: 60%;
    padding: 0.75rem;
  }
    .md\:col-8{
    width: 66.666667%;
    padding: 0.75rem;
  }
    .md\:form-col-12{
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
@media (min-width: 1024px){
    .lg\:col-3{
    width: 25%;
    padding: 0.75rem;
  }
    .lg\:col-6{
    width: 50%;
    padding: 0.75rem;
  }
    .lg\:col-9{
    width: 75%;
    padding: 0.75rem;
  }
}
@media (min-width: 1280px){
    .xl\:col-3{
    width: 25%;
    padding: 0.75rem;
  }
    .xl\:col-4{
    width: 33.333333%;
    padding: 0.75rem;
  }
    .xl\:col-6{
    width: 50%;
    padding: 0.75rem;
  }
    .xl\:col-9{
    width: 75%;
    padding: 0.75rem;
  }
}
.first-letter\:uppercase::first-letter{
  text-transform: uppercase;
}
.first-letter\:capitalize::first-letter{
  text-transform: capitalize;
}
.placeholder\:font-public::-moz-placeholder{
  font-family: 'Public Sans', sans-serif;
}
.placeholder\:font-public::placeholder{
  font-family: 'Public Sans', sans-serif;
}
.placeholder\:font-rubik::-moz-placeholder{
  font-family: 'Rubik', sans-serif;
}
.placeholder\:font-rubik::placeholder{
  font-family: 'Rubik', sans-serif;
}
.placeholder\:text-\[10px\]::-moz-placeholder{
  font-size: 10px;
}
.placeholder\:text-\[10px\]::placeholder{
  font-size: 10px;
}
.placeholder\:text-lg::-moz-placeholder{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.placeholder\:text-lg::placeholder{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.placeholder\:text-xs::-moz-placeholder{
  font-size: 0.75rem;
  line-height: 1rem;
}
.placeholder\:text-xs::placeholder{
  font-size: 0.75rem;
  line-height: 1rem;
}
.placeholder\:font-normal::-moz-placeholder{
  font-weight: 400;
}
.placeholder\:font-normal::placeholder{
  font-weight: 400;
}
.placeholder\:text-\[\#6E7191\]::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#6E7191\]::placeholder{
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#A0A3BD\]::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(160 163 189 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#A0A3BD\]::placeholder{
  --tw-text-opacity: 1;
  color: rgb(160 163 189 / var(--tw-text-opacity, 1));
}
.placeholder\:text-paragraph::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
}
.placeholder\:text-paragraph::placeholder{
  --tw-text-opacity: 1;
  color: rgb(110 113 145 / var(--tw-text-opacity, 1));
}
.before\:absolute::before{
  content: var(--tw-content);
  position: absolute;
}
.before\:inset-0::before{
  content: var(--tw-content);
  inset: 0px;
}
.before\:-top-2::before{
  content: var(--tw-content);
  top: -0.5rem;
}
.before\:left-0::before{
  content: var(--tw-content);
  left: 0px;
}
.before\:left-1\/2::before{
  content: var(--tw-content);
  left: 50%;
}
.before\:top-0::before{
  content: var(--tw-content);
  top: 0px;
}
.before\:top-1\/2::before{
  content: var(--tw-content);
  top: 50%;
}
.before\:-z-10::before{
  content: var(--tw-content);
  z-index: -10;
}
.before\:h-1::before{
  content: var(--tw-content);
  height: 0.25rem;
}
.before\:h-24::before{
  content: var(--tw-content);
  height: 6rem;
}
.before\:h-5::before{
  content: var(--tw-content);
  height: 1.25rem;
}
.before\:w-24::before{
  content: var(--tw-content);
  width: 6rem;
}
.before\:w-5::before{
  content: var(--tw-content);
  width: 1.25rem;
}
.before\:w-full::before{
  content: var(--tw-content);
  width: 100%;
}
.before\:-translate-x-1\/2::before{
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:-translate-y-1\/2::before{
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:scale-\[1\.03\]::before{
  content: var(--tw-content);
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:rounded-full::before{
  content: var(--tw-content);
  border-radius: 9999px;
}
.before\:border-\[3px\]::before{
  content: var(--tw-content);
  border-width: 3px;
}
.before\:border-primary::before{
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
}
.before\:bg-primary::before{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.before\:bg-white::before{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}
.after\:top-3::after{
  content: var(--tw-content);
  top: 0.75rem;
}
.after\:hidden::after{
  content: var(--tw-content);
  display: none;
}
.after\:h-2::after{
  content: var(--tw-content);
  height: 0.5rem;
}
.after\:w-2::after{
  content: var(--tw-content);
  width: 0.5rem;
}
.after\:rounded-full::after{
  content: var(--tw-content);
  border-radius: 9999px;
}
.after\:bg-\[\#FFDB1F\]::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 219 31 / var(--tw-bg-opacity, 1));
}
.after\:shadow::after{
  content: var(--tw-content);
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.last\:mb-0:last-child{
  margin-bottom: 0px;
}
.last\:border-0:last-child{
  border-width: 0px;
}
.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}
.last\:border-none:last-child{
  border-style: none;
}
.last\:pb-0:last-child{
  padding-bottom: 0px;
}
.last\:pr-3:last-child{
  padding-right: 0.75rem;
}
.focus-within\:border-primary:focus-within{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
}
.focus-within\:border-primary\/20:focus-within{
  border-color: rgb(77 0 31 / 0.2);
}
.focus-within\:bg-white:focus-within{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:-translate-y-1:hover{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-primary:hover{
  --tw-border-opacity: 1;
  border-color: rgb(77 0 31 / var(--tw-border-opacity, 1));
}
.hover\:border-primary\/30:hover{
  border-color: rgb(77 0 31 / 0.3);
}
.hover\:border-primary\/40:hover{
  border-color: rgb(77 0 31 / 0.4);
}
.hover\:bg-\[\#00749B\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 116 155 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#D8FFFC\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(216 255 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F7F7FC\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-deep:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(46 0 18 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-light:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 230 236 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary\/5:hover{
  background-color: rgb(77 0 31 / 0.05);
}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:text-gray-400:hover{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.hover\:text-primary:hover{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:opacity-70:hover{
  opacity: 0.7;
}
.hover\:shadow-filter:hover{
  --tw-shadow: 0px 8px 16px rgba(23, 31, 70, 0.08);
  --tw-shadow-colored: 0px 8px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xs:hover{
  --tw-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0px 6px 32px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:z-10:focus{
  z-index: 10;
}
.focus\:border-blue-300:focus{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.active\:bg-gray-100:active{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.active\:text-gray-500:active{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.active\:text-gray-700:active{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:opacity-40:disabled{
  opacity: 0.4;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.group:focus-within .group-focus-within\:visible{
  visibility: visible;
}
.group:hover .group-hover\:fill-white{
  fill: #fff;
}
.group:hover .group-hover\:text-primary{
  --tw-text-opacity: 1;
  color: rgb(77 0 31 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){

  .sm\:absolute{
    position: absolute;
  }

  .sm\:bottom-16{
    bottom: 4rem;
  }

  .sm\:left-8{
    left: 2rem;
  }

  .sm\:top-12{
    top: 3rem;
  }

  .sm\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }

  .sm\:mb-0{
    margin-bottom: 0px;
  }

  .sm\:mb-12{
    margin-bottom: 3rem;
  }

  .sm\:mb-16{
    margin-bottom: 4rem;
  }

  .sm\:mb-4{
    margin-bottom: 1rem;
  }

  .sm\:mb-6{
    margin-bottom: 1.5rem;
  }

  .sm\:mt-4{
    margin-top: 1rem;
  }

  .sm\:mt-8{
    margin-top: 2rem;
  }

  .sm\:block{
    display: block;
  }

  .sm\:inline-block{
    display: inline-block;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:h-12{
    height: 3rem;
  }

  .sm\:h-16{
    height: 4rem;
  }

  .sm\:h-28{
    height: 7rem;
  }

  .sm\:h-32{
    height: 8rem;
  }

  .sm\:h-40{
    height: 10rem;
  }

  .sm\:h-\[5\.25rem\]{
    height: 5.25rem;
  }

  .sm\:h-\[calc\(100vh_-_290px\)\]{
    height: calc(100vh - 290px);
  }

  .sm\:h-auto{
    height: auto;
  }

  .sm\:w-1\/2{
    width: 50%;
  }

  .sm\:w-28{
    width: 7rem;
  }

  .sm\:w-32{
    width: 8rem;
  }

  .sm\:w-36{
    width: 9rem;
  }

  .sm\:w-48{
    width: 12rem;
  }

  .sm\:w-60{
    width: 15rem;
  }

  .sm\:w-\[360px\]{
    width: 360px;
  }

  .sm\:w-\[5\.25rem\]{
    width: 5.25rem;
  }

  .sm\:w-\[8\.25rem\]{
    width: 8.25rem;
  }

  .sm\:w-fit{
    width: -moz-fit-content;
    width: fit-content;
  }

  .sm\:max-w-xs{
    max-width: 20rem;
  }

  .sm\:flex-1{
    flex: 1 1 0%;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[repeat\(auto-fill\2c _minmax\(185px\2c _1fr\)\)\]{
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:items-start{
    align-items: flex-start;
  }

  .sm\:items-center{
    align-items: center;
  }

  .sm\:justify-start{
    justify-content: flex-start;
  }

  .sm\:justify-end{
    justify-content: flex-end;
  }

  .sm\:justify-center{
    justify-content: center;
  }

  .sm\:justify-between{
    justify-content: space-between;
  }

  .sm\:gap-2{
    gap: 0.5rem;
  }

  .sm\:gap-3{
    gap: 0.75rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:gap-6{
    gap: 1.5rem;
  }

  .sm\:gap-\[18px\]{
    gap: 18px;
  }

  .sm\:rounded-xl{
    border-radius: 0.75rem;
  }

  .sm\:border-t-0{
    border-top-width: 0px;
  }

  .sm\:border-primary\/20{
    border-color: rgb(77 0 31 / 0.2);
  }

  .sm\:bg-\[\#00B3A5\]{
    --tw-bg-opacity: 1;
    background-color: rgb(0 179 165 / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-primary{
    --tw-bg-opacity: 1;
    background-color: rgb(77 0 31 / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .sm\:p-10{
    padding: 2.5rem;
  }

  .sm\:p-3{
    padding: 0.75rem;
  }

  .sm\:p-5{
    padding: 1.25rem;
  }

  .sm\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .sm\:py-1\.5{
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .sm\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:pb-16{
    padding-bottom: 4rem;
  }

  .sm\:pb-2{
    padding-bottom: 0.5rem;
  }

  .sm\:pt-0{
    padding-top: 0px;
  }

  .sm\:pt-4{
    padding-top: 1rem;
  }

  .sm\:pt-8{
    padding-top: 2rem;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:\!text-sm{
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-\[10px\]{
    font-size: 10px;
  }

  .sm\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:leading-4{
    line-height: 1rem;
  }

  .sm\:text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .sm\:shadow-xs{
    --tw-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.04);
    --tw-shadow-colored: 0px 6px 32px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 768px){

  .md\:top-\[85px\]{
    top: 85px;
  }

  .md\:z-10{
    z-index: 10;
  }

  .md\:mb-0{
    margin-bottom: 0px;
  }

  .md\:mb-20{
    margin-bottom: 5rem;
  }

  .md\:mb-\[70px\]{
    margin-bottom: 70px;
  }

  .md\:mt-0{
    margin-top: 0px;
  }

  .md\:mt-4{
    margin-top: 1rem;
  }

  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:grid{
    display: grid;
  }

  .md\:hidden{
    display: none;
  }

  .md\:h-\[calc\(100vh-117px\)\]{
    height: calc(100vh - 117px);
  }

  .md\:h-\[calc\(100vh-127px\)\]{
    height: calc(100vh - 127px);
  }

  .md\:h-\[calc\(100vh-85px\)\]{
    height: calc(100vh - 85px);
  }

  .md\:h-auto{
    height: auto;
  }

  .md\:w-80{
    width: 20rem;
  }

  .md\:w-\[322px\]{
    width: 322px;
  }

  .md\:w-\[350px\]{
    width: 350px;
  }

  .md\:w-\[calc\(100\%-340px\)\]{
    width: calc(100% - 340px);
  }

  .md\:w-auto{
    width: auto;
  }

  .md\:w-fit{
    width: -moz-fit-content;
    width: fit-content;
  }

  .md\:w-full{
    width: 100%;
  }

  .md\:flex-auto{
    flex: 1 1 auto;
  }

  .md\:flex-shrink-0{
    flex-shrink: 0;
  }

  .md\:grid-flow-row{
    grid-auto-flow: row;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:items-end{
    align-items: flex-end;
  }

  .md\:justify-center{
    justify-content: center;
  }

  .md\:justify-between{
    justify-content: space-between;
  }

  .md\:gap-16{
    gap: 4rem;
  }

  .md\:gap-4{
    gap: 1rem;
  }

  .md\:gap-5{
    gap: 1.25rem;
  }

  .md\:gap-6{
    gap: 1.5rem;
  }

  .md\:overflow-auto{
    overflow: auto;
  }

  .md\:rounded-lg{
    border-radius: 0.5rem;
  }

  .md\:pl-0{
    padding-left: 0px;
  }

  .md\:pl-8{
    padding-left: 2rem;
  }

  .md\:pt-3{
    padding-top: 0.75rem;
  }
}
@media (min-width: 1024px){

  .lg\:bottom-10{
    bottom: 2.5rem;
  }

  .lg\:bottom-8{
    bottom: 2rem;
  }

  .lg\:top-\[74px\]{
    top: 74px;
  }

  .lg\:order-last{
    order: 9999;
  }

  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .lg\:mx-14{
    margin-left: 3.5rem;
    margin-right: 3.5rem;
  }

  .lg\:mb-0{
    margin-bottom: 0px;
  }

  .lg\:mt-0{
    margin-top: 0px;
  }

  .lg\:block{
    display: block;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:\!hidden{
    display: none !important;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-16{
    height: 4rem;
  }

  .lg\:h-\[calc\(100vh-220px\)\]{
    height: calc(100vh - 220px);
  }

  .lg\:\!w-full{
    width: 100% !important;
  }

  .lg\:w-52{
    width: 13rem;
  }

  .lg\:w-\[305px\]{
    width: 305px;
  }

  .lg\:w-\[930px\]{
    width: 930px;
  }

  .lg\:w-\[calc\(100\%-320px\)\]{
    width: calc(100% - 320px);
  }

  .lg\:w-auto{
    width: auto;
  }

  .lg\:w-fit{
    width: -moz-fit-content;
    width: fit-content;
  }

  .lg\:max-w-xl{
    max-width: 36rem;
  }

  .lg\:flex-1{
    flex: 1 1 0%;
  }

  .lg\:flex-none{
    flex: none;
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:items-center{
    align-items: center;
  }

  .lg\:justify-start{
    justify-content: flex-start;
  }

  .lg\:justify-between{
    justify-content: space-between;
  }

  .lg\:gap-6{
    gap: 1.5rem;
  }

  .lg\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 1280px){

  .xl\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .xl\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .xl\:w-\[360px\]{
    width: 360px;
  }

  .xl\:w-\[calc\(100\%-377px\)\]{
    width: calc(100% - 377px);
  }

  .xl\:\!max-w-\[305px\]{
    max-width: 305px !important;
  }

  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:flex-row{
    flex-direction: row;
  }

  .xl\:gap-8{
    gap: 2rem;
  }
}
@media (min-width: 0px) and (max-width: 640px){

  .xst\:fixed{
    position: fixed;
  }

  .xst\:absolute{
    position: absolute;
  }

  .xst\:bottom-12{
    bottom: 3rem;
  }

  .xst\:bottom-5{
    bottom: 1.25rem;
  }

  .xst\:left-1\/2{
    left: 50%;
  }

  .xst\:z-10{
    z-index: 10;
  }

  .xst\:w-full{
    width: 100%;
  }

  .xst\:-translate-x-1\/2{
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .xst\:rounded-t-2xl{
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  .xst\:pb-16{
    padding-bottom: 4rem;
  }
}
@media (min-width: 0px) and (max-width: 767px){

  .xh\:fixed{
    position: fixed;
  }

  .xh\:left-0{
    left: 0px;
  }

  .xh\:w-full{
    width: 100%;
  }

  .xh\:justify-between{
    justify-content: space-between;
  }

  .xh\:border-y{
    border-top-width: 1px;
    border-bottom-width: 1px;
  }

  .xh\:border-\[\#EFF0F6\]{
    --tw-border-opacity: 1;
    border-color: rgb(239 240 246 / var(--tw-border-opacity, 1));
  }

  .xh\:bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .xh\:p-4{
    padding: 1rem;
  }
}
.ltr\:left-0:where([dir="ltr"], [dir="ltr"] *){
  left: 0px;
}
.ltr\:left-1\/2:where([dir="ltr"], [dir="ltr"] *){
  left: 50%;
}
.ltr\:right-0:where([dir="ltr"], [dir="ltr"] *){
  right: 0px;
}
.ltr\:right-1:where([dir="ltr"], [dir="ltr"] *){
  right: 0.25rem;
}
.ltr\:right-10:where([dir="ltr"], [dir="ltr"] *){
  right: 2.5rem;
}
.ltr\:right-2\.5:where([dir="ltr"], [dir="ltr"] *){
  right: 0.625rem;
}
.ltr\:right-3:where([dir="ltr"], [dir="ltr"] *){
  right: 0.75rem;
}
.ltr\:right-5:where([dir="ltr"], [dir="ltr"] *){
  right: 1.25rem;
}
.ltr\:-ml-8:where([dir="ltr"], [dir="ltr"] *){
  margin-left: -2rem;
}
.ltr\:ml-1:where([dir="ltr"], [dir="ltr"] *){
  margin-left: 0.25rem;
}
.ltr\:rounded-l-lg:where([dir="ltr"], [dir="ltr"] *){
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.ltr\:rounded-r-lg:where([dir="ltr"], [dir="ltr"] *){
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.ltr\:rounded-br-lg:where([dir="ltr"], [dir="ltr"] *){
  border-bottom-right-radius: 0.5rem;
}
.ltr\:rounded-tr-lg:where([dir="ltr"], [dir="ltr"] *){
  border-top-right-radius: 0.5rem;
}
.ltr\:pl-2:where([dir="ltr"], [dir="ltr"] *){
  padding-left: 0.5rem;
}
.ltr\:pr-28:where([dir="ltr"], [dir="ltr"] *){
  padding-right: 7rem;
}
.ltr\:text-left:where([dir="ltr"], [dir="ltr"] *){
  text-align: left;
}
.ltr\:text-right:where([dir="ltr"], [dir="ltr"] *){
  text-align: right;
}
.ltr\:after\:right-2\.5:where([dir="ltr"], [dir="ltr"] *)::after{
  content: var(--tw-content);
  right: 0.625rem;
}
@media (min-width: 640px){

  .ltr\:sm\:border-r:where([dir="ltr"], [dir="ltr"] *){
    border-right-width: 1px;
  }
}
@media (min-width: 768px){

  .ltr\:md\:right-5:where([dir="ltr"], [dir="ltr"] *){
    right: 1.25rem;
  }

  .md\:ltr\:text-left:where([dir="ltr"], [dir="ltr"] *){
    text-align: left;
  }
}
.rtl\:left-0:where([dir="rtl"], [dir="rtl"] *){
  left: 0px;
}
.rtl\:left-1:where([dir="rtl"], [dir="rtl"] *){
  left: 0.25rem;
}
.rtl\:left-10:where([dir="rtl"], [dir="rtl"] *){
  left: 2.5rem;
}
.rtl\:left-2\.5:where([dir="rtl"], [dir="rtl"] *){
  left: 0.625rem;
}
.rtl\:left-3:where([dir="rtl"], [dir="rtl"] *){
  left: 0.75rem;
}
.rtl\:left-5:where([dir="rtl"], [dir="rtl"] *){
  left: 1.25rem;
}
.rtl\:right-0:where([dir="rtl"], [dir="rtl"] *){
  right: 0px;
}
.rtl\:right-1\/2:where([dir="rtl"], [dir="rtl"] *){
  right: 50%;
}
.rtl\:-mr-8:where([dir="rtl"], [dir="rtl"] *){
  margin-right: -2rem;
}
.rtl\:mr-1:where([dir="rtl"], [dir="rtl"] *){
  margin-right: 0.25rem;
}
.rtl\:-rotate-90:where([dir="rtl"], [dir="rtl"] *){
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *){
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rtl\:rounded-l-lg:where([dir="rtl"], [dir="rtl"] *){
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rtl\:rounded-r-lg:where([dir="rtl"], [dir="rtl"] *){
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.rtl\:rounded-bl-lg:where([dir="rtl"], [dir="rtl"] *){
  border-bottom-left-radius: 0.5rem;
}
.rtl\:rounded-bl-none:where([dir="rtl"], [dir="rtl"] *){
  border-bottom-left-radius: 0px;
}
.rtl\:rounded-br-lg:where([dir="rtl"], [dir="rtl"] *){
  border-bottom-right-radius: 0.5rem;
}
.rtl\:rounded-tl-lg:where([dir="rtl"], [dir="rtl"] *){
  border-top-left-radius: 0.5rem;
}
.rtl\:pl-28:where([dir="rtl"], [dir="rtl"] *){
  padding-left: 7rem;
}
.rtl\:pr-2:where([dir="rtl"], [dir="rtl"] *){
  padding-right: 0.5rem;
}
.rtl\:text-left:where([dir="rtl"], [dir="rtl"] *){
  text-align: left;
}
.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *){
  text-align: right;
}
.rtl\:after\:left-2\.5:where([dir="rtl"], [dir="rtl"] *)::after{
  content: var(--tw-content);
  left: 0.625rem;
}
@media (min-width: 640px){

  .rtl\:sm\:border-l:where([dir="rtl"], [dir="rtl"] *){
    border-left-width: 1px;
  }
}
@media (min-width: 768px){

  .rtl\:md\:left-5:where([dir="rtl"], [dir="rtl"] *){
    left: 1.25rem;
  }

  .md\:rtl\:text-right:where([dir="rtl"], [dir="rtl"] *){
    text-align: right;
  }
}
.\[\&_li\]\:mb-6 li{
  margin-bottom: 1.5rem;
}
.\[\&_li\]\:text-\[40px\] li{
  font-size: 40px;
}
.\[\&_li\]\:font-semibold li{
  font-weight: 600;
}
.\[\&_li\]\:leading-10 li{
  line-height: 2.5rem;
}