/* Global fix: cap ratings text so long translations never push right-side items off screen */
.c-ratings {
    max-width: 30% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Base mobile header layout from reference; final overrides live at the end of this file. */
@media screen and (max-width: 767px) {
    .header-center,
    .header-left,
    .header-right,
    #menu-wrapper.mobile-navi2 {
        display: none !important;
    }

    .header-bg {
        position: relative !important;
        width: 100% !important;
        height: 134px !important;
        min-height: 134px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .header_top,
    ul.nav_header,
    ul.nav_header.nav_header2 {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
        height: 134px !important;
        min-height: 134px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    ul.nav_header.nav_header2 > li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    .header,
    .header_mobile_search {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 84px !important;
        min-height: 84px !important;
        padding: 0 70px !important;
        margin: 0 !important;
        border: 0 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .logo {
        width: 100% !important;
        height: 84px !important;
        min-height: 84px !important;
        padding: 8px 0 5px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .logo h1 {
        width: auto !important;
        max-width: 232px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 0.97 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-shadow: none !important;
        white-space: normal !important;
    }

    .logo h1 a {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: #3596b5 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 0.97 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    .logo h1 a .f4p-logo-main {
        display: block !important;
        color: #1f2733 !important;
    }

    .logo h1 a .f4p-logo-for {
        display: inline !important;
        color: #3596b5 !important;
        font-style: normal !important;
    }

    .logo h1 small,
    .logo .country_name_mobile,
    .logo h1 > img.iphone_hidden,
    .logo h1 > img.ipad_hidden {
        display: none !important;
    }

    .logo h1 > img.desktop_hidden {
        display: block !important;
        width: 110px !important;
        max-width: 110px !important;
        height: 12px !important;
        margin: 6px auto 0 !important;
        object-fit: contain !important;
    }

    ul.nav_header.nav_header2 > li.desktop_hidden:first-child {
        position: absolute !important;
        top: 4px !important;
        left: 20px !important;
        z-index: 5 !important;
        width: 26px !important;
        height: 22px !important;
    }

    ul.nav_header.nav_header2 > li.desktop_hidden:first-child .topmenu,
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child nav,
    #menuToggle {
        position: static !important;
        width: 26px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        background: transparent !important;
    }

    #menuToggle input {
        position: absolute !important;
        top: -8px !important;
        left: -8px !important;
        width: 42px !important;
        height: 38px !important;
        margin: 0 !important;
        opacity: 0 !important;
        z-index: 2 !important;
        cursor: pointer !important;
    }

    #menuToggle span {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 24px !important;
        height: 2px !important;
        margin: 0 0 6px 0 !important;
        display: block !important;
        background: #1f2733 !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    .cartdiv {
        position: absolute !important;
        top: 4px !important;
        right: 21px !important;
        z-index: 5 !important;
        width: 36px !important;
        height: 36px !important;
    }

    .cartdiv p,
    .cartdiv a {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    .cartdiv img {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    .cartdiv .cart_title {
        display: none !important;
    }

    #basket_counter2,
    .cartdiv .basket_counter {
        position: absolute !important;
        top: -3px !important;
        right: -2px !important;
        left: auto !important;
        min-width: 16px !important;
        width: auto !important;
        height: 16px !important;
        padding: 0 4px !important;
        display: block !important;
        box-sizing: border-box !important;
        border: 2px solid #fff !important;
        border-radius: 999px !important;
        background: #3596b5 !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 12px !important;
        text-align: center !important;
    }

    .langdiv,
    .currencydiv,
    .logindiv,
    .searchdiv {
        position: absolute !important;
        top: 74px !important;
        z-index: 4 !important;
        width: 25% !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: #fff !important;
        border-top: 1px solid #e9e4dd !important;
        border-bottom: 1px solid #e9e4dd !important;
        box-sizing: border-box !important;
    }

    .langdiv {
        left: 0 !important;
        border-left: 0 !important;
    }

    .currencydiv {
        left: 25% !important;
        border-left: 1px solid #e9e4dd !important;
    }

    .logindiv {
        left: 50% !important;
        border-left: 1px solid #e9e4dd !important;
    }

    .searchdiv {
        left: 75% !important;
        border-left: 1px solid #e9e4dd !important;
    }

    .logindiv a,
    .searchdiv a,
    .langdiv > ul.languages_right > li,
    .currencydiv .currency-select {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-decoration: none !important;
        transform: none !important;
        writing-mode: horizontal-tb !important;
    }

    .logindiv img,
    .searchdiv img {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    .logindiv a::after,
    .searchdiv a::after,
    .langdiv > ul.languages_right > li::after,
    .currencydiv .currency-select::after {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        color: #1f2733 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-transform: none !important;
        white-space: nowrap !important;
        transform: none !important;
        rotate: 0deg !important;
        writing-mode: horizontal-tb !important;
    }

    .logindiv a::after {
        content: "Log In" !important;
    }

    .searchdiv a::after {
        content: "Search" !important;
    }

    .langdiv > ul.languages_right {
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .langdiv > ul.languages_right > li::after {
        content: "Language" !important;
    }

    .langdiv > ul.languages_right > li::before {
        content: "" !important;
        position: absolute !important;
        top: 16px !important;
        left: calc(50% + 18px) !important;
        width: 5px !important;
        height: 5px !important;
        border-right: 1px solid #555 !important;
        border-bottom: 1px solid #555 !important;
        background: transparent !important;
        transform: rotate(45deg) !important;
        pointer-events: none !important;
    }

    .langdiv > ul.languages_right > li > span.icon3 {
        width: 24px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        flex: 0 0 auto !important;
        transform: none !important;
    }

    .langdiv .iphone_hidden,
    .langdiv .ipad_hidden,
    .currencydiv .iphone_hidden,
    .currencydiv .ipad_hidden {
        display: none !important;
    }

    .langdiv > ul.languages_right > li > ul,
    .currencydiv .select-items {
        top: 60px !important;
        left: 0 !important;
        right: auto !important;
        min-width: 220px !important;
        z-index: 100020 !important;
    }

    .currencydiv form,
    .currencydiv .languages_right {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .currencydiv .currency-select::after {
        content: "Currency" !important;
        margin-top: 4px !important;
    }

    .currencydiv select,
    .currencydiv .select-selected {
        width: auto !important;
        max-width: 72px !important;
        height: 18px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 14px 0 2px !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #1f2733 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: center !important;
        text-align-last: center !important;
        appearance: none !important;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23555'/%3E%3C/svg%3E") no-repeat right center !important;
    }

    .header .opening,
    .header > .cart,
    .header #cartDiv {
        display: none !important;
    }
}
.c-ratings div,
.c-ratings a {
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
/* Only truncate the text part — stars always stay visible */
.c-ratings-text {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.c-ratings-stars {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
/* Keep right-side items from being squeezed out */
.langdiv,
.currencydiv {
    flex-shrink: 0 !important;
}

/* Fix: language & currency hover dropdowns appearing behind the delivery city search bar */
.langdiv,
.currencydiv,
ul.languages_right,
ul.languages_right li {
    position: relative !important;
    z-index: 1 !important;
}
ul.languages_right li ul,
.currencydiv ul,
.nav_header .languages_right li ul {
    position: absolute !important;
    z-index: 999999 !important;
}
/* Ensure the search/opening area sits below the header_top dropdowns */
.header .opening,
.header .row-dropdown,
.header .select2-container {
    z-index: 9000 !important;
}

body.popup-open .row-dropdown.modal-form, body.popup-open .row-dropdown.modal-form h3.featured{
    font-size: 18px !important;
    color: #333 !important;
    line-height: 1.3em !important;
    font-weight: 600 !important;

    margin-lefT: 44px;
}

.popup-image h3{
  margin-bottom:0px !important
}


/* Desktop top blue bar dropdowns: never clip language/currency/call-us menus */
.header-bg {
    padding-top: 0 !important;
}

@media screen and (min-width: 771px) {
    .header-bg,
    .header_top,
    ul.nav_header.nav_header2,
    ul.nav_header.nav_header2 > li {
        overflow: visible !important;
    }
    ul.nav_header.nav_header2 {
        position: relative !important;
        z-index: 100000 !important;
    }
    .langdiv,
    .currencydiv,
    .languages_right_call,
    .languages_right_call > li,
    .languages_right > li {
        position: relative !important;
        z-index: 100001 !important;
    }
    .languages_right_call ul,
    .languages_right > li > ul,
    .currencydiv .select-items {
        position: absolute !important;
        z-index: 100010 !important;
    }
}
/* Stable popup stack across all domains/devices */
.modal-backdrop-google {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 2147483500 !important;
}
.row-dropdown.modal-form,
.modal-form {
    display: block !important;
    position: fixed !important;
    z-index: 2147483600 !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.22) !important;
    isolation: isolate !important;
}
/* Desktop popup layout: show image + content side by side */
.row-dropdown.modal-form .popup-body,
.modal-form .popup-body {
    display: flex !important;
    align-items: stretch !important;
}
.row-dropdown.modal-form .popup-image,
.modal-form .popup-image {
    display: block !important;
    width: 44% !important;
    min-width: 280px !important;
}
.row-dropdown.modal-form .popup-content,
.modal-form .popup-content,
.row-dropdown.modal-form .popup-content2,
.modal-form .popup-content2 {
    width: 56% !important;
    max-width: 100% !important;
}
/* France-like popup typography */
.row-dropdown.modal-form .featured,
.modal-form .featured {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 700 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    padding-right: 36px !important;
}
.row-dropdown.modal-form .f-text,
.modal-form .f-text {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    text-align: left !important;
}
/* France-like popup control icons/colors across domains */
.row-dropdown.modal-form .select2-container .select2-selection--single .select2-selection__rendered,
.modal-form .select2-container .select2-selection--single .select2-selection__rendered {
    background: url(https://internetflorist.b-cdn.net/v4/_css/images/locationpin-4.svg?22a3) no-repeat 8px center !important;
    background-size: 20px 20px !important;
    padding-left: 36px !important;
}
.row-dropdown.modal-form .calendar-bg,
.modal-form .calendar-bg {
    background: #fff url(https://internetflorist.b-cdn.net/v4/_css/images/calendar-icon-green-v4.webp) no-repeat 8px center !important;
    background-size: 20px 20px !important;
}
.row-dropdown.modal-form #ch_curr_2,
.modal-form #ch_curr_2 {
    /* Full paint (border/font/padding) set in unified modal block below */
    background: #fff url(https://flower-connection.b-cdn.net/v4/_css/images/currency-icon-v5.webp?222a2) no-repeat 8px center !important;
    background-size: 20px 20px !important;
}

@media screen and (min-width: 771px) {
    /* Match France desktop popup heading look */
    .row-dropdown.modal-form .featured,
    .modal-form .featured {
        font-weight: 700 !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin-top: 6px !important;
    }
}
.row-dropdown.modal-form .close-popup,
.modal-form .close-popup {
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 2147483700 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-size: 30px !important;
}
/* While popup is open, keep non-modal delivery widgets behind */
body.popup-open .opening .row-dropdown:not(.modal-form),
body.popup-open .opening .row-dropdown:not(.modal-form) * {
    z-index: 1 !important;
}
body.popup-open .opening .select2-container,
body.popup-open .opening .select2-dropdown,
body.popup-open .opening #book_form_date {
    z-index: 2 !important;
}
body.popup-open .row-dropdown.modal-form .select2-container,
body.popup-open .row-dropdown.modal-form .select2-dropdown,
body.popup-open .row-dropdown.modal-form #book_form_date {
    z-index: 2147483660 !important;
}
/* Select2 menu is appended outside modal container; keep it above popup while open */
body.popup-open .select2-container--open,
body.popup-open .select2-dropdown {
    z-index: 2147483680 !important;
}
/* Keep select2 searchable UI visible inside popup like France */
body.popup-open .select2-search--dropdown,
body.popup-open .select2-container--open .select2-search--dropdown {
    display: block !important;
}
body.popup-open .select2-search--dropdown .select2-search__field {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.header_top {
    position: relative !important;
    z-index: 99999 !important;
}

    .prodcut-details-box-trustpilot{

        padding-bottom: 0px !important;
    }
     .popup-content2{
    z-index:0
  }

  .select2-container--open .select2-dropdown--below{
        z-index: 10000;
  }

/* Fix header/menu overlap when resizing browser window at intermediate viewport widths.
   The CDN css_header_v2.css uses min-device-width queries which only match physical
   device screen size — they don't fire when a desktop window is resized.
   These min-width/max-width queries respond to actual viewport width instead. */
@media screen and (max-width: 1280px) {

    .header,
    .logo {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    ul.nav {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #menu-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .header_top {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    ul.nav_header {
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        font-size: 12px !important;
    }
    /* Tighten item spacing so all dropdowns fit in one line */
    ul.nav_header li {
        padding: 0 4px !important;
    }
    ul.nav_header li:first-child {
        padding: 0 !important;
    }
    /* Narrow viewports: shrink ratings column further */
    .c-ratings {
        min-width: 0 !important;
        flex: 0 1 auto !important;
        max-width: 25% !important;
    }
    .c-ratings a,
    .c-ratings div {
        font-size: 12px !important;
    }
    /* Keep dropdowns readable but compact */
    .langdiv,
    .currencydiv {
        flex-shrink: 0 !important;
    }
    .currency-select select,
    .currencydiv select {
        font-size: 11px !important;
        padding: 0 2px !important;
    }
}

@media screen and (min-width: 771px) and (max-width: 1280px) {
    /* Mirror the device-width tablet fix for actual viewport resize */
    #menu-wrapper2 {
        top: -75px !important;
    }
    .logo {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 8px 10px !important;
    }
    .header {
        padding: 0 10px !important;
    }
    .logo h1 {
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    .header .opening {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

@media screen and (max-width: 770px) {
    .row-dropdown.modal-form,
    .modal-form {
        left: 10px !important;
        right: 10px !important;
        top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - env(safe-area-inset-top, 0px) - 20px) !important;
        width: auto !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .row-dropdown.modal-form .popup-body,
    .modal-form .popup-body {
        display: block !important;
    }
    .row-dropdown.modal-form .popup-image,
    .modal-form .popup-image {
        display: none !important;
    }
    .row-dropdown.modal-form .popup-content,
    .modal-form .popup-content,
    .row-dropdown.modal-form .popup-content2,
    .modal-form .popup-content2 {
        width: 100% !important;
    }
    /* Match France mobile popup typography + icons */
    body.popup-open .row-dropdown.modal-form .featured,
    body.popup-open .modal-form .featured {
        font-family: Montserrat, sans-serif, Verdana !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin-top: 22px !important;
        padding-right: 36px !important;
    }
    body.popup-open .row-dropdown.modal-form .f-text,
    body.popup-open .modal-form .f-text {
        font-family: Montserrat, sans-serif, Verdana !important;
        font-weight: 400 !important;
    }
    /* Delivery row: normal weight (not bold) */
    body.popup-open .row-dropdown.modal-form .select2-container .select2-selection--single .select2-selection__rendered,
    body.popup-open .modal-form .select2-container .select2-selection--single .select2-selection__rendered,
    body.popup-open .row-dropdown.modal-form .select2-container--default .select2-selection--single .select2-selection__placeholder,
    body.popup-open .modal-form .select2-container--default .select2-selection--single .select2-selection__placeholder,
    body.popup-open .row-dropdown.modal-form #book_form_date,
    body.popup-open .modal-form #book_form_date,
    body.popup-open .row-dropdown.modal-form #ch_curr_2,
    body.popup-open .modal-form #ch_curr_2 {
        font-family: Montserrat, sans-serif, Verdana !important;
        font-weight: 400 !important;
    }
    /* Force France-like cyan pin icon inside delivery city */
    body.popup-open .row-dropdown.modal-form .select2-container .select2-selection--single .select2-selection__rendered,
    body.popup-open .modal-form .select2-container .select2-selection--single .select2-selection__rendered {
        background: url(https://internetflorist.b-cdn.net/v4/_css/images/locationpin-4.svg?22a3) no-repeat 8px center !important;
        background-size: 20px 20px !important;
        padding-left: 36px !important;
    }
    /* Force France-like calendar/currency icons in popup controls (padding on .calender_container only) */
    body.popup-open .row-dropdown.modal-form .calendar-bg,
    body.popup-open .modal-form .calendar-bg {
        background: #fff url(https://internetflorist.b-cdn.net/v4/_css/images/calendar-icon-green-v4.webp) no-repeat 8px center !important;
        background-size: 20px 20px !important;
    }
    body.popup-open .row-dropdown.modal-form #ch_curr_2,
    body.popup-open .modal-form #ch_curr_2 {
        background: #fff url(https://flower-connection.b-cdn.net/v4/_css/images/currency-icon-v5.webp?222a2) no-repeat 8px center !important;
        background-size: 20px 20px !important;
        padding-left: 36px !important;
    }
    .header { padding-top: 0 !important;}
}

/* At narrow desktop/tablet sizes, hide ratings + tighten spacing so all items fit in one line */
@media screen and (min-width: 771px) and (max-width: 1000px) {
    .c-ratings {
        display: none !important;
    }
    ul.nav_header {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    ul.nav_header li {
        padding: 0 3px !important;
        font-size: 11px !important;
    }
    ul.nav_header li img {
        width: 15px !important;
        height: 15px !important;
    }
    .langdiv,
    .currencydiv {
        flex-shrink: 0 !important;
    }
    /* Truncate currency label text if too long */
    .currencydiv select,
    .currency-select select {
        max-width: 130px !important;
        font-size: 11px !important;
    }
}

/* FINAL modal priority guard: keep popup above all site widgets */
body.popup-open .modal-backdrop-google {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483500 !important;
}
body.popup-open .row-dropdown.modal-form,
body.popup-open .modal-form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 2147483600 !important;background: #f5f1eb !important;
}
body.popup-open .row-dropdown.modal-form .close-popup,
body.popup-open .modal-form .close-popup {
    z-index: 2147483700 !important;
}
/* jQuery UI datepicker is appended to body; keep it above popup form */
body.popup-open #ui-datepicker-div,
body.popup-open .ui-datepicker {
    z-index: 2147483720 !important;
}
/* Hide all non-modal delivery-city/search blocks while popup is active */
body.popup-open .row-dropdown:not(.modal-form),
body.popup-open .row-dropdown:not(.modal-form) * {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Keep modal internals visible and interactive */
body.popup-open .row-dropdown.modal-form,
body.popup-open .row-dropdown.modal-form *,
body.popup-open .modal-form,
body.popup-open .modal-form * {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
@media screen and (max-width: 770px) {
    body.popup-open .row-dropdown.modal-form,
    body.popup-open .modal-form {
        bottom: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - env(safe-area-inset-top, 0px) - 20px) !important;
    }
}

/* Delivery city, date, currency: same font as Select2 + same border (#ddd / 0.28rem) + aligned text (41px = 5px+36px like Select2) */
.row-dropdown.modal-form .select2-container--default .select2-selection--single,
.modal-form .select2-container--default .select2-selection--single {
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    border: 1px solid #ddd !important;
    border-radius: 0.28rem !important;
    background-color: #fff !important;
    box-shadow: none !important;
    padding: 5px 5px !important;
}
.row-dropdown.modal-form .select2-container .select2-selection--single .select2-selection__rendered,
.modal-form .select2-container .select2-selection--single .select2-selection__rendered,
.row-dropdown.modal-form .select2-container--default .select2-selection--single .select2-selection__placeholder,
.modal-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased !important;
}
/* Override global Select2 { font-weight: 600 } so modal fields stay normal weight */
.row-dropdown.modal-form .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.modal-form .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.row-dropdown.modal-form .select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder,
.modal-form .select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder,
body.popup-open .row-dropdown.modal-form .select2-container--default .select2-selection--single .select2-selection__rendered,
body.popup-open .modal-form .select2-container--default .select2-selection--single .select2-selection__rendered,
body.popup-open .row-dropdown.modal-form .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.popup-open .modal-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-weight: 400 !important;
}
body.popup-open .select2-dropdown .select2-results__option,
body.popup-open .select2-dropdown .select2-search__field {
    font-weight: 400 !important;
}
.row-dropdown.modal-form #ch_curr_2 option,
.modal-form #ch_curr_2 option,
.popup-content2.header #ch_curr_2 option {
    font-weight: 400 !important;
}
.row-dropdown.modal-form .select2-container--default .select2-selection--single .select2-selection__arrow,
.modal-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}
.row-dropdown.modal-form .calendar-bg.calender_container,
.modal-form .calendar-bg.calender_container {
    height: 40px !important;
    min-height: 40px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    border: 1px solid #ddd !important;
    border-radius: 0.28rem !important;
    background-color: #fff !important;
    box-shadow: none !important;
    /* Match Select2 __rendered text inset: same 36px as pin row (single box = no extra +5px) */
    padding: 5px 10px 5px 36px !important;
}
.row-dropdown.modal-form .calendar-bg.calender_container input#book_form_date,
.modal-form .calendar-bg.calender_container input#book_form_date,
.row-dropdown.modal-form .calendar-bg.calender_container input#book_form_date2,
.modal-form .calendar-bg.calender_container input#book_form_date2 {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased !important;
}
.row-dropdown.modal-form #ch_curr_2,
.modal-form #ch_curr_2 {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    padding: 5px 28px 5px 36px !important;
    border: 1px solid #ddd !important;
    border-radius: 0.28rem !important;
    background-color: #fff !important;
    background-image: url(https://flower-connection.b-cdn.net/v4/_css/images/currency-icon-v5.webp?222a2) !important;
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    background-size: 20px 20px !important;
    box-shadow: none !important;
}
.row-dropdown.modal-form .popup-currency form,
.modal-form .popup-currency form {
    align-items: center !important;
}
.row-dropdown.modal-form .popup-content > .google-dropdown,
.modal-form .popup-content > .google-dropdown,
.row-dropdown.modal-form .popup-content > .popup-currency,
.modal-form .popup-content > .popup-currency {
    margin-bottom: 0 !important;
}
.row-dropdown.modal-form .popup-content > .button_width,
.modal-form .popup-content > .button_width {
    margin-bottom: 10px !important;
}

/* popup-content2.header card — flowers4dubai design */
.popup-content2.header {
    background: #fff;
    border: 1px solid #e0dbd5 !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10) !important;
    padding: 20px !important;
    box-sizing: border-box !important; margin-top: 10px;
}
.popup-delivery-title {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2733 !important;
    text-align: center !important;
    margin: 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
/* Date + Currency side by side */
.popup-row-split {
    display: flex !important;
    gap: 10px !important;
}
.popup-row-split > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}
/* Search button full width */
.popup-content2.header .google-dropdown.button_width {
    width: 100% !important;
    margin: 0 !important;
}
.popup-content2.header .google-dropdown.button_width .md_button.green {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
/* Currency select in index strip (id=ch_curr_3, not ch_curr_2) */
.popup-content2.header #ch_curr_3 {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-size: 16px !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    padding: 5px 28px 5px 36px !important;
    border: 1px solid #ddd !important;
    border-radius: 0.28rem !important;
    background-color: #fff !important;
    background-image: url(https://flower-connection.b-cdn.net/v4/_css/images/currency-icon-v5.webp?222a2) !important;
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    background-size: 20px 20px !important;
    box-shadow: none !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: 30px !important;
}
@media screen and (max-width: 480px) {
    .popup-row-split {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* Index "check delivery areas" strip: same font/border/alignment as modal */
.popup-content2.header .select2-container--default .select2-selection--single {
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    border: 1px solid #ddd !important;
    border-radius: 0.28rem !important;
    background-color: #fff !important;
    box-shadow: none !important;
    padding: 5px 5px !important;
}
.popup-content2.header .select2-container .select2-selection--single .select2-selection__rendered {
    background: url(https://internetflorist.b-cdn.net/v4/_css/images/locationpin-4.svg?22a3) no-repeat 8px center !important;
    background-size: 20px 20px !important;
    padding-left: 36px !important;
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased !important;
}
.popup-content2.header .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-size: 16px !important;
}
.popup-content2.header .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.popup-content2.header .select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-weight: 400 !important;
}
.popup-content2.header .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}
.popup-content2.header .calendar-bg {
    background: #fff url(https://internetflorist.b-cdn.net/v4/_css/images/calendar-icon-green-v4.webp) no-repeat 8px center !important;
    background-size: 17px 26px !important;
}
.popup-content2.header .calendar-bg.calender_container {
    height: 40px !important;
    min-height: 40px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    border: 1px solid #ddd !important;
    border-radius: 0.28rem !important;
    background-color: #fff !important;
    box-shadow: none !important;
    padding: 5px 10px 5px 36px !important;
}
.popup-content2.header .calendar-bg.calender_container input#book_form_date2 {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased !important;
}
.popup-content2.header #ch_curr_2 {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-weight: 400 !important;
    color: #444 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    padding: 5px 28px 5px 36px !important;
    border: 1px solid #ddd !important;
    border-radius: 0.28rem !important;
    background-color: #fff !important;
    background-image: url(https://flower-connection.b-cdn.net/v4/_css/images/currency-icon-v5.webp?222a2) !important;
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    background-size: 20px 20px !important;
    box-shadow: none !important;
}
.popup-content2.header .popup-currency form {
    align-items: center !important;
}

@media screen and (max-width: 767px) {
    .header-center,
    .header-left,
    .header-right {
        display: none !important;
    }
    .header-bg {
        position: relative !important;
        background: #fff !important;
        min-height: 138px !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .header_top {
        position: absolute !important;
        inset: 0 !important;
        height: 138px !important;
        padding: 0 !important;
        overflow: visible !important;
        z-index: auto !important;
    }
    ul.nav_header,
    ul.nav_header.nav_header2 {
        position: relative !important;
        width: 100% !important;
        height: 138px !important;
        left: 0 !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        font-size: 0 !important;
        text-align: initial !important;
        max-width: none !important;
    }
    ul.nav_header.nav_header2 > li {
        padding: 0 !important;
        margin: 0 !important;
    }
    .header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 3 !important;
        min-height: 82px !important;
        height: 82px !important;
        padding: 0 66px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .header_mobile_search {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    .logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 82px !important;
        text-align: center !important;
        padding: 6px 0 3px !important;
        box-sizing: border-box !important;
    }
    .logo h1 {
        width: auto !important;
        max-width: 230px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        line-height: 0.97 !important;
        letter-spacing: 0 !important;
        text-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .logo h1 a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        color: #3596b5 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        text-decoration: none !important;
        text-align: center !important;
        white-space: normal !important;
    }
    .logo h1 a span {
        color: #1f2733 !important;
        font-weight: 700 !important;
        display: inline !important;
    }
    .logo h1 a .f4p-logo-main {
        display: block !important;
        color: #1f2733 !important;
    }
    .logo h1 a .f4p-logo-for {
        display: inline !important;
        color: #3596b5 !important;
        font-style: normal !important;
    }
    .logo h1 small {
        display: none !important;
    }
    /* Compact by-internet-florist badge on mobile */
    .logo h1 > img.desktop_hidden {
        max-width: 110px !important;
        height: auto !important;
        margin: 5px auto 0 !important;
        display: block !important;
    }
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child {
        position: absolute !important;
        top: 33px !important;
        left: 18px !important;
        width: 34px !important;
        height: 34px !important;
        z-index: 5 !important;
    }
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child .topmenu {
        width: 34px !important;
        height: 34px !important;
        display: block !important;
    }
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child nav {
        width: 34px !important;
        height: 34px !important;
        display: block !important;
    }
    #menuToggle {
        top: 0 !important;
        left: 0 !important;
        width: 34px !important;
    }
    #menuToggle input {
        top: -8px !important;
        left: -2px !important;
        width: 36px !important;
        height: 36px !important;
    }
    #menuToggle span {
        width: 22px !important;
        height: 2px !important;
        top: 0 !important;
        left: 0 !important;
        margin-bottom: 6px !important;
        background: #23262d !important;
        border-radius: 999px !important;
    }
    .cartdiv {
        position: absolute !important;
        top: 27px !important;
        right: 20px !important;
        width: 36px !important;
        height: 36px !important;
        z-index: 5 !important;
    }
    .cartdiv p,
    .cartdiv a {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
    }
    .cartdiv img {
        width: 24px !important;
        height: 24px !important;
    }
    .cart_title {
        display: none !important;
    }
    #basket_counter2,
    .cartdiv .basket_counter {
        top: 1px !important;
        right: -2px !important;
        left: auto !important;
        min-width: 16px !important;
        width: auto !important;
        height: 16px !important;
        line-height: 16px !important;
        padding: 0 4px !important;
        background: #3596b5 !important;
        border: 2px solid #fff !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }
    .langdiv,
    .currencydiv,
    .logindiv,
    .searchdiv {
        position: absolute !important;
        top: 72px !important;
        width: 25% !important;
        height: 56px !important;
        display: block !important;
        background: #fff !important;
        border-top: 1px solid #eaeaea  !important;
        border-bottom: 1px solid #eaeaea  !important;
        box-sizing: border-box !important;
        z-index: 4 !important;
    }
    .langdiv {
        left: 0 !important;
    }
    .currencydiv {
        left: 25% !important;
        border-left: 1px solid #e9e4dd !important;
    }
    .logindiv {
        left: 50% !important;
        border-left: 1px solid #e9e4dd !important;
    }
    .searchdiv {
        left: 75% !important;
        border-left: 1px solid #e9e4dd !important;
    }
    .logindiv a,
    .searchdiv a {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: transparent !important;
        font-size: 0 !important;
        text-decoration: none !important;
    }
    .logindiv a::after,
    .searchdiv a::after {
        color: #1f2733 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }
    .logindiv a::after {
        content: "Log In";
    }
    .searchdiv a::after {
        content: "Search";
    }
    .logindiv img,
    .searchdiv img {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }
    .langdiv > ul.languages_right {
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    .langdiv > ul.languages_right > li {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
    .langdiv > ul.languages_right > li::after {
        content: "Language" !important;
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        border: 0 !important;
        color: #1f2733 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        background: none !important;
        margin-top: 0 !important;
    }
    .langdiv > ul.languages_right > li > ul {
        position: absolute !important;
        top: 57px !important;
        right: auto !important;
        left: 0 !important;
        min-width: 220px !important;
        z-index: 100020 !important;
    }
    .langdiv .icon3 {
        margin: 0 !important;
    }
    .langdiv .icon3_undefined,
    .langdiv .icon3.flag_w {
        transform: scale(1.02) !important;
    }
    /* Flag row: show flag + ▾ side by side, centered */
    .langdiv > ul.languages_right > li > span.icon3 {
        flex-shrink: 0 !important;
    }
    .langdiv > ul.languages_right > li::before {
        content: "▾" !important;
        position: absolute !important;
        top: 16px !important;
        font-size: 9px !important;
        color: #555 !important;
        pointer-events: none !important;
        /* Center: flag is 24px centered. Put chevron 14px right of center */
        left: calc(50% + 14px) !important;
    }
    .langdiv > ul.languages_right > li::before {
        content: "" !important;
        top: 13px !important;
        width: 6px !important;
        height: 6px !important;
        border-right: 1px solid #555 !important;
        border-bottom: 1px solid #555 !important;
        transform: rotate(45deg) !important;
        font-size: 0 !important;
        color: transparent !important;
    }
    .currencydiv .currency-select {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
    }
    .currencydiv .currency-select::after {
        content: "Currency" !important;
        position: static !important;
        color: #1f2733 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        margin-top: 4px !important;
    }
    /* Currency select: remove native arrow, add SVG chevron as background */
    .currencydiv select {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        border: 0 !important;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23555'/%3E%3C/svg%3E") no-repeat right center !important;
        cursor: pointer !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        height: 18px !important;
        min-height: 0 !important;
        line-height: 18px !important;
        color: #1f2733 !important;
        text-align: center !important;
        text-align-last: center !important;
        padding: 0 16px 0 4px !important;
        max-width: 72px !important;
    }
    .currencydiv .languages_right,
    .currencydiv form {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .currencydiv .select-selected {
        width: 100% !important;
        padding: 0 16px 0 0 !important;
        color: #1f2733 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        height: 18px !important;
        line-height: 18px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .currencydiv .select-items {
        top: 57px !important;
        left: -1px !important;
        min-width: 220px !important;
    }
    .header .opening,
    .header > .cart,
    .header #cartDiv {
        display: none !important;
    }
    .header-bg::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: #fff !important;
        z-index: 0 !important;
    }
    .header_top,
    .header,
    .langdiv,
    .currencydiv,
    .logindiv,
    .searchdiv,
    .cartdiv,
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child {
        position: absolute !important;
    }

    /* ── Mobile nav drawer — flowers4dubai style ── */

    /* Fix position: override CDN left:-33px and padding offsets */
    #menuMobile {
        left: -20px !important;
        top: -4px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        border: 0 !important;
        background: #faf5f0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-width: 300px;
        position: absolute;
        max-height: 100vh;
        overflow: auto;
    }
    #menuToggle input:checked ~ ul {
        background: #faf5f0 !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
    }

    /* Teal welcome bar */
    li.mobile-welcome {
        height: 52px !important;
        min-height: 52px !important;
        background: #3a97b3 !important;
        border: 0 !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
    .mobile-nav-welcome {
        color: #fff !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 0.5 !important;
    }
    .mobile-nav-close {
        color: #fff !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 8px 0 !important;
        background: none !important;
        border: 0 !important;
    }

    /* Categories container */
    #menuMobile li.categories-menu {
        background: #faf5f0 !important;
        border-top: 0 !important;
    }
    .menu-hb {
        background: #faf5f0 !important;
    }
   
    /* Allow full list height — sidebar itself scrolls */
    ul.menu-cont {
        max-height: none !important;
        overflow: visible !important;
    }
    /* "Menu & Options" section divider */
    .menu-cont > li > h4 {
        padding: 12px 20px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #999 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        border-bottom: 1px solid #e9e4dd !important;
        margin: 0 !important;
        background: #faf5f0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    #menuMobile li span { background: none !important; margin-bottom: 0; }
}

/* Final 767px header guard: match the reference layout and override all earlier mobile rules. */
@media screen and (max-width: 767px) {
    .header-bg {
        height: 134px !important;
        min-height: 134px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .header_top,
    ul.nav_header,
    ul.nav_header.nav_header2 {
        height: 134px !important;
        min-height: 134px !important;
        display: block !important;
        overflow: visible !important;
    }
    .menu-hb ul.menu-cont li{ line-height: 15px; }
    .menu-hb ul.menu-cont li a{ color: #1a1a1a !important; }
    .header,
    .header_mobile_search,
    .logo {
        height: 84px !important;
        min-height: 84px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: #fff !important;
    }

    .header,
    .header_mobile_search {
        top: -10px !important;
        padding-left: 70px !important;
        padding-right: 70px !important;
    }

    .logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .logo h1,
    .logo h1 a {
        max-width: 232px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: #3596b5 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 0.97 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    .logo h1 a .f4p-logo-main {
        color: #1f2733 !important;
        display: block !important;
    }

    .logo h1 a .f4p-logo-for {
        color: #3596b5 !important;
    }

    .logo h1 > img.desktop_hidden {
        display: block !important;
        width: 110px !important;
        max-width: 110px !important;
        height: 12px !important;
        margin: 6px auto 0 !important;
    }

    .logo h1 {
        transform: translateY(-10px) !important;
    }

    .logo h1 a {
        transform: none !important;
    }

    ul.nav_header.nav_header2 > li.desktop_hidden:first-child {
        top: 4px !important;
        left: 20px !important;
        width: 26px !important;
        height: 22px !important;
    }

    #menuToggle,
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child .topmenu,
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child nav {
        width: 26px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #menuToggle span {
        width: 24px !important;
        height: 2px !important;
        margin: 0 0 6px !important;
        background: #1f2733 !important;
        border-radius: 0 !important;
        transform: none !important;
    }
 #menuMobile li.mobile-welcome { background: #3a97b3 !important; color: #fff !important;padding: 0 20px !important; }
    #menuMobile li.mobile-welcome span.mobile-nav-welcome { color: #fff !important; }
     #menuMobile li.mobile-welcome span.mobile-nav-close { color: #fff !important; }
    /* "ALL CATEGORIES" heading — flowers4dubai style */
    #side-menu-hb > h4 {
        background: none;
        padding: 18px 20px 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #3a97b3 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        border-bottom: 2px solid #3a97b3 !important;
        margin: 0 0 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        position: relative !important;
    }
    /* Teal dot below the ALL CATEGORIES underline */
    #side-menu-hb > h4::after {
        content: "" !important;
        position: absolute !important;
        bottom: -5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 8px !important;
        height: 8px !important;
        background: #3a97b3 !important;
        border-radius: 50% !important;
    }
    #side-menu-hb > h4 > img {
        width: 16px !important;
        height: 16px !important;
        filter: none !important;
        flex-shrink: 0 !important;
    }

    /* Each category item */
    .menu-hb ul.menu-cont > li {
        height: auto !important;
        min-height: 20px !important;
        border-bottom: 1px solid #e9e4dd !important;
        padding: 0 !important;
        background: #faf5f0 !important;
    }
    .menu-hb ul.menu-cont > li > a {
        background: #faf5f0 !important;
        padding: 10px 20px !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        border-bottom: 0 !important;
        min-height: 20px !important;
        text-decoration: none !important;
    }
    .menu-hb ul.menu-cont > li > a > span {
        color: #2d6a4f !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-transform: none !important;
        display: inline !important;
        background: none !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        width: auto !important;
    }
    /* Remove any pseudo-element dashes from category spans */
    .menu-hb ul.menu-cont li a span::before,
    .menu-hb ul.menu-cont li a span::after {
        content: none !important;
        display: none !important;
    }
    /* Show SVG icon colors — remove the black filter */
    .menu-hb ul.menu-cont li a img {
        filter: none !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
    }
    .cartdiv {
        top: 4px !important;
        right: 21px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .cartdiv p,
    .cartdiv a {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
    }

    .cartdiv img {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #basket_counter2,
    .cartdiv .basket_counter {
        top: -3px !important;
        right: -2px !important;
        width: auto !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        background: #3596b5 !important;
        border: 2px solid #fff !important;
        border-radius: 999px !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 12px !important;
        text-align: center !important;
    }

    .langdiv,
    .currencydiv,
    .logindiv,
    .searchdiv {
        top: 74px !important;
        height: 60px !important;
        background: #fff !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    .langdiv {
        left: 0 !important;
        border-left: 0 !important;
    }

    .currencydiv {
        left: 25% !important;
    }

    .logindiv {
        left: 50% !important;
    }

    .searchdiv {
        left: 75% !important;
    }

    .currencydiv,
    .logindiv,
    .searchdiv {
        border-left: 0 !important;
    }

    .logindiv a,
    .searchdiv a,
    .langdiv > ul.languages_right > li,
    .currencydiv .currency-select {
        height: 60px !important;
        gap: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        writing-mode: horizontal-tb !important;
    }

    .logindiv a::after,
    .searchdiv a::after,
    .langdiv > ul.languages_right > li::after,
    .currencydiv .currency-select::after {
        position: static !important;
        display: block !important;
        color: #1f2733 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        transform: none !important;
        rotate: 0deg !important;
        writing-mode: horizontal-tb !important;
    }

    .langdiv > ul.languages_right > li::after {
        content: "Language" !important;
    }

    .currencydiv .currency-select::after {
        content: "Currency" !important;
        margin-top: 4px !important;
    }

    .logindiv a::after {
        content: "Log In" !important;
    }

    .searchdiv a::after {
        content: "Search" !important;
    }

    .logindiv img,
    .searchdiv img {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }

    .langdiv > ul.languages_right > li > span.icon3 {
        width: 24px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .langdiv > ul.languages_right > li::before {
        content: "" !important;
        top: 16px !important;
        left: calc(50% + 18px) !important;
        width: 5px !important;
        height: 5px !important;
        border-right: 1px solid #555 !important;
        border-bottom: 1px solid #555 !important;
        transform: rotate(45deg) !important;
    }

    .currencydiv select,
    .currencydiv .select-selected {
        width: auto !important;
        max-width: 72px !important;
        height: 18px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 14px 0 2px !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #1f2733 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: center !important;
        text-align-last: center !important;
        appearance: none !important;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23555'/%3E%3C/svg%3E") no-repeat right center !important;
    }

    .header-bg,
    .header-bg::before,
    .header_top,
    .header,
    .header_mobile_search,
    .logo,
    ul.nav_header,
    ul.nav_header.nav_header2,
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child,
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child .topmenu,
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child nav,
    #menuToggle,
    .cartdiv,
    .cartdiv p,
    .cartdiv a,
    .langdiv,
    .currencydiv,
    .logindiv,
    .searchdiv {
        border: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    .langdiv,
    .currencydiv,
    .logindiv,
    .searchdiv {
        border-top: 1px solid #eaeaea !important;
        border-bottom: 1px solid #eaeaea !important;
    }

    .currencydiv,
    .logindiv,
    .searchdiv {
        border-left: 1px solid #eaeaea !important;
    }

    .langdiv {
        border-left: 0 !important;
    }
}

/* ── Modal redesign: flowers4dubai compact card style ── */

/* Desktop: narrow centered card, no image panel */
@media screen and (min-width: 771px) {
    body.popup-open .row-dropdown.modal-form,
    body.popup-open .modal-form {
        width: 440px !important;
        max-width: calc(100vw - 32px) !important;
        left: 50% !important;
        top: 90px !important;
        transform: translateX(-50%) !important;
        padding: 28px 24px 24px !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
    }
    .row-dropdown.modal-form .popup-image,
    .modal-form .popup-image {
        display: none !important;
    }
    .row-dropdown.modal-form .popup-content,
    .modal-form .popup-content,
    .row-dropdown.modal-form .popup-content2,
    .modal-form .popup-content2 {
        width: 100% !important;
        padding: 0 !important;
    }
    .row-dropdown.modal-form .popup-body,
    .modal-form .popup-body {
        display: block !important;
    }
}

/* Mobile: same compact style */
 .hide-lg { display: block; }
 .hide-sm { display: none; }
@media screen and (max-width: 770px) {
 .hide-lg { display: none; }
 .hide-sm { display: block; }
    body.popup-open .row-dropdown.modal-form,
    body.popup-open .modal-form {
        padding: 24px 18px 20px !important;
        border-radius: 14px !important;max-width: 480px;
        margin: 0 auto !important;
        top: 20vh !important;
    }
    .row-dropdown.modal-form .featured,
.modal-form .featured,
body.popup-open .row-dropdown.modal-form .featured,
body.popup-open .modal-form .featured {
    margin: 0 0 0 !important; padding-top: 0px !important;
}
    .modal-form .popup-content{gap: 5px !important;}
    .row-dropdown.modal-form .popup-content > .button_width, .modal-form .popup-content > .button_width{ margin-bottom: 10px; }
}

/* Title: "Choose your delivery city" — centered bold */
.row-dropdown.modal-form .featured,
.modal-form .featured,
body.popup-open .row-dropdown.modal-form .featured,
body.popup-open .modal-form .featured {
    font-family: Montserrat, sans-serif, Verdana !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2733 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0 0 18px !important;
    padding-right: 0 !important;
}

/* Sub-text below title */
.row-dropdown.modal-form .f-text,
.modal-form .f-text,
body.popup-open .row-dropdown.modal-form .f-text,
body.popup-open .modal-form .f-text {
    text-align: center !important;
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 14px !important;
}

/* Fields: each row has bottom margin */
.row-dropdown.modal-form .google-dropdown,
.modal-form .google-dropdown,
.row-dropdown.modal-form .popup-currency {
    margin-bottom: 10px !important;
}

/* Search button: teal pill */
.row-dropdown.modal-form .popup-content .button_width .md_button,
.modal-form .popup-content .button_width .md_button,
.row-dropdown.modal-form .popup-content .button_width span.md_button,
.modal-form .popup-content .button_width span.md_button {
    display: block !important;
    width: 100% !important;
    background: #3596b5 !important;
    border-radius: 50px !important;
    height: 46px !important;
    line-height: 46px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    box-shadow: 0 2px 10px rgba(53, 150, 181, 0.35) !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}
.row-dropdown.modal-form .popup-content .button_width .md_button:hover,
.modal-form .popup-content .button_width .md_button:hover {
    background: #2a80a0 !important;
    box-shadow: 0 6px 18px rgba(53, 150, 181, 0.45) !important;
}
.row-dropdown.modal-form .popup-content .button_width .md_button a,
.modal-form .popup-content .button_width .md_button a {
    color: #fff !important;
    display: block !important;
    text-decoration: none !important;
    line-height: 46px !important;
}

/* Close button: subtle top-right */
.row-dropdown.modal-form .close-popup,
.modal-form .close-popup,
body.popup-open .row-dropdown.modal-form .close-popup,
body.popup-open .modal-form .close-popup {
    top: 10px !important;
    right: 14px !important;
    font-size: 22px !important;
    color: #999 !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

/* Hamburger bars: hide when mobile menu is open, reappear when closed */
#menuToggle input:checked ~ span {
    display: none !important;
}

/* Language dropdown: always above all page content (sticky filter, hero, delivery widget, etc.) */
ul.nav_header,
ul.nav_header.nav_header2 {
    overflow: visible !important;
}
ul.nav_header.nav_header2 > li {
    overflow: visible !important;
}
/* Desktop only: langdiv is in normal flow; position:relative enables z-index stacking */
@media screen and (min-width: 768px) {
    .langdiv,
    ul.nav_header .langdiv {
        position: relative !important;
        z-index: 999999 !important;
        overflow: visible !important;
    }
}
/* Mobile: langdiv is position:absolute (set in mobile block above); just ensure overflow + z-index */
@media screen and (max-width: 767px) {
    .langdiv,
    ul.nav_header .langdiv {
        z-index: 999999 !important;
        overflow: visible !important;
    }
}
.langdiv > ul.languages_right,
.langdiv ul.languages_right {
    overflow: visible !important;
}
.langdiv > ul.languages_right > li > ul,
.langdiv ul.languages_right li ul,
ul.nav_header .languages_right li ul,
.nav_header .languages_right li ul {
    position: absolute !important;
    z-index: 9999999 !important;max-height: 50vh;
    overflow: auto;
}

/* Currency dropdown: appear above all page content on all viewports */
@media screen and (min-width: 768px) {
    .currencydiv,
    ul.nav_header .currencydiv {
        position: relative !important;
        z-index: 999999 !important;
        overflow: visible !important;
    }
}
@media screen and (max-width: 767px) {
    .currencydiv,
    ul.nav_header .currencydiv {
        z-index: 999999 !important;
        overflow: visible !important;
    }
}
.currencydiv .select-items {
    position: absolute !important;
    z-index: 9999999 !important;
}

/* Sidebar: overlap everything and backdrop overlay */
@media screen and (max-width: 770px) {
    ul.nav_header.nav_header2 > li.desktop_hidden:first-child {
        z-index: 9999999 !important;
    }
    #menuMobile {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 9999999 !important;
    }
    #menuToggle input:checked ~ ul {
        z-index: 9999999 !important;
    }

    /* Backdrop overlay — toggled via body.menu-open class set by JS */
    .menu-backdrop {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999998 !important;
        cursor: pointer !important;
    }
    body.menu-open .menu-backdrop {
        display: block !important;
    }
}




/* ── Header delivery form — desktop ≥ 1367px only ── */
#hdr-dlv-form {
    display: none !important;
}
@media screen and (min-width: 1367px) {
    /* Hide the existing opening/popup form so its Select2 init cannot reflow the header */
    .header .opening {
        display: none !important;
    }

    /* Pin form to the right of logo, left of cart */
    #hdr-dlv-form {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: 12px !important;
    }

    /* Layout: horizontal flex row, no background/border/shadow */
    #hdr-dlv-form .popup-content2.f4p-dlv-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 5px !important;
        max-width: none !important;
        width: auto !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Reset grid-column on all inner divs, set fixed widths */
    #hdr-dlv-form .popup-content2 .google-dropdown,
    #hdr-dlv-form .popup-content2 .google-dropdown.date_width,
    #hdr-dlv-form .popup-content2 .google-dropdown.button_width {
        grid-column: auto !important;
        flex: 0 0 auto !important;
        float: none !important;
        margin: 0 !important;
    }
    #hdr-dlv-form .popup-content2 .google-dropdown:not(.date_width):not(.button_width) {
        width: 240px !important;
        position: relative !important;
    }
    #hdr-dlv-form .popup-content2 .google-dropdown.date_width {
        width: 200px !important;
    }

    /* Native <select> before Select2 initialises */
    #hdr-dlv-form .popup-content2 .google-dropdown select {
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        border: 1.5px solid #d1d5db !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #374151 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        font-family: 'Inter', system-ui, sans-serif !important;
        padding: 0 36px 0 38px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        cursor: pointer !important;
    }

    /* ── Select2 city — exact form A field look ── */
    #hdr-dlv-form .popup-content2 .google-dropdown .select2-container,
    #hdr-dlv-form .popup-content2 .google-dropdown .select2-container--default {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }
    #hdr-dlv-form .popup-content2 .google-dropdown .select2-selection--single,
    #hdr-dlv-form .popup-content2 .google-dropdown .select2-selection {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 46px !important;
        border: 1.5px solid #d1d5db !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    #hdr-dlv-form .popup-content2 .google-dropdown .select2-selection__rendered {
        display: block !important;
        width: 100% !important;
        color: #374151 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        font-family: 'Inter', system-ui, sans-serif !important;
        line-height: 44px !important;
        height: 44px !important;
        padding: 0 10px 0 38px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: transparent !important;
    }
    #hdr-dlv-form .popup-content2 .google-dropdown .select2-selection__placeholder {
        color: #374151 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        font-family: 'Inter', system-ui, sans-serif !important;
        opacity: 1 !important;
    }
    #hdr-dlv-form .popup-content2 .google-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100% !important;
        min-height: 46px !important;
        top: 0 !important;
        right: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #hdr-dlv-form .popup-content2 .google-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #374151 transparent transparent transparent !important;
        border-width: 5px 4px 0 4px !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        position: relative !important;
    }

    /* Location pin icon on city dropdown */
    #hdr-dlv-form .popup-content2 .google-dropdown:not(.date_width):not(.button_width)::before {
        content: '' !important;
        position: absolute !important;
        left: 11px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 18px !important;
        height: 18px !important;
        z-index: 10 !important;
        pointer-events: none !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") no-repeat center !important;
        background-size: contain !important;
    }

    /* ── Calendar input — exact form A field look ── */
    #hdr-dlv-form .popup-content2 .calendar-bg,
    #hdr-dlv-form .popup-content2 .calender_container {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #hdr-dlv-form .popup-content2 .google-dropdown.date_width .calendar-bg::before,
    #hdr-dlv-form .popup-content2 .google-dropdown.date_width .calender_container::before {
        content: none !important;
        display: none !important;
    }
    #hdr-dlv-form .popup-content2 .calendar-bg input[type="text"],
    #hdr-dlv-form .popup-content2 .calendar-bg input,
    #hdr-dlv-form .popup-content2 .calender_container input[type="text"],
    #hdr-dlv-form .popup-content2 .calender_container input,
    #hdr-dlv-form #hdr-book-date {
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        line-height: normal !important;
        border: 1.5px solid #d1d5db !important;
        border-radius: 8px !important;
        background-color: #ffffff !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: 11px center !important;
        background-size: 16px 16px !important;
        color: #374151 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        font-family: 'Inter', system-ui, sans-serif !important;
        padding: 0 10px 0 38px !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        outline: none !important;
        margin: 0 !important;
        cursor: pointer !important;
    }
    #hdr-dlv-form .popup-content2 .calendar-bg input::placeholder,
    #hdr-dlv-form .popup-content2 .calender_container input::placeholder {
        color: #374151 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        font-family: 'Inter', system-ui, sans-serif !important;
        opacity: 1 !important;
    }

    /* ── Search button — exact form A style ── */
    #hdr-dlv-form .popup-content2 .google-dropdown.button_width {
        width: auto !important;
    }
    #hdr-dlv-form .popup-content2 .md_button.green {
        display: block !important;
        width: 100% !important;
        padding: 13px 24px !important;
        border-radius: 50px !important;
        background: #3596b5 !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-align: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        letter-spacing: 0.04em !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(45, 122, 95, .25) !important;
        margin: 0 !important;
        font-family: 'Inter', system-ui, sans-serif !important;
        white-space: nowrap !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY-PAGE OVERRIDES
   Applied via .container-category (set in index.tpl when BannerShow != "show")
   and .header-category (on the search form for inner pages)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Cancel negative grid-wrap margin so banner isn't left-shifted */
.container-category .grid-wrap {
    margin-left: 0 !important;
}

/* 2. Center the category banner — full-width block, no overflow */
.banner-images-gifts {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding-bottom: 50px !important;
}
.banner-images-gifts img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* 3. Search form overlaps banner bottom by 50px */
.popup-content2.header-category {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: -50px !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Title and info text stay full width */
.popup-content2.header-category h3.popup-delivery-title,
.popup-content2.header-category .f-text {
    flex: 0 0 100% !important;
    width: 100% !important;
}

/* City select: left 50% */
.popup-content2.header-category > .google-dropdown:not(.button_width) {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Date row: right 50% */
.popup-content2.header-category > .popup-row-split {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

/* Date fills full width of its half */
.popup-content2.header-category .popup-row-split > .google-dropdown.date_width {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Hide currency on category pages */
.popup-content2.header-category .popup-currency {
    display: none !important;
}

/* Search button full width */
.popup-content2.header-category > .google-dropdown.button_width {
    flex: 0 0 100% !important;
    width: 100% !important;
}

/* 4. Restore horizontal padding at mobile (base CSS strips it to 0) */
@media screen and (max-width: 767px) {
    .container-category {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

/* 5. Product page: 3-item header bar at full width with equal tabs */
@media screen and (max-width: 767px) {
    .langdiv, .currencydiv, .logindiv { width: 33.333% !important; }
    .currencydiv { left: 33.333% !important; }
    .logindiv { left: 66.666% !important; }
}

/* CDN f4_header_mobile.css adds padding-top:104px to body at ≤770px for a fixed header.
   .f4pm-header is position:sticky so no body offset is needed — zero it out. */
@media screen and (max-width: 770px) {
    html body:has(.f4pm-header) {
        padding-top: 0 !important;
    }
}

/* Category pages: breadcrumbs must appear above SEO text block.
   Uses div.content-box (specificity 13) to beat inline-style html body .content-box (specificity 12). */
@media screen and (max-width: 770px) {
    html body div.content-box {
        display: flex !important;
        flex-direction: column !important;
    }
    html body div.content-box > .customer_txt.f4p-category-seo {
        order: 1 !important;
    }
}