/* f4p-mobile-header.css — extracted from header_f4p_mobile.tpl inline <style> block */
/* CDN: https://flower-connection.b-cdn.net/v4/_css/f4p-mobile-header.css */

/* Cocon logo font — load before first paint (flowers4pakistan mobile header) */
@font-face {
  font-family: 'Cocon';
  font-style: normal;
  font-weight: 400;
  src: local('Cocon'), local('Cocon-Regular'),
       url('https://flower-connection.b-cdn.net/v4/_css/fonts/font1.woff2') format('woff2'),
       url('https://flower-connection.b-cdn.net/v4/_css/fonts/font1.woff') format('woff');
  font-display: swap;
}

/* Flag sprites — show on first paint (do not wait for deferred JS) */
.f4pm-lang-trigger .icon3,
.f4pm-lang-drop .icon3,
.f4pm-header .icon3,
.header-bg .icon3 {
  background-image: url("https://flower-connection.b-cdn.net/v4/_css/images/flags-small-v5.png") !important;
  background-repeat: no-repeat !important;
}

/* Mobile nav drawer — above fixed .f4pm-header (99000) and legacy header chrome */
.f4pm-overlay {
  z-index: 100100 !important;
}
.f4pm-overlay.open {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 100100 !important;
}
#f4pm-menu-panel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999999 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}
#f4pm-menu-panel.f4pm-menu-open {
  z-index: 9999999 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#f4pm-menu-panel .f4pm-menu-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}
#f4pm-menu-panel .f4pm-close-btn {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
  justify-content: flex-end !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
html body.f4pm-nav-open .f4pm-header {
  z-index: 99980 !important;
}
html body.f4pm-nav-open .header-bg,
html body.f4pm-nav-open .header-center,
html body.f4pm-nav-open #menu-wrapper {
  z-index: 1 !important;
}

/* Delivery search modal — centered card over dimmed hero (above f4pm-header 99000) */
@media only screen and (max-width: 1366px) {
  body.popup-open {
    overflow: hidden !important;
  }
  body.popup-open .f4pm-header {
    z-index: 500000 !important;
    visibility: visible !important;
  }
  body.popup-open .f4pm-hero,
  body.popup-open .f4pm-hero-trustpilot,
  body.popup-open .f4p-home-delivery-wrap,
  body.popup-open .wrapper.f4p-home-delivery-wrap {
    z-index: 1 !important;
    pointer-events: none !important;
  }
  body.popup-open .f4pm-hero-trustpilot {
    visibility: hidden !important;
  }
  body.popup-open .popup-content2.f4p-dlv-wrap:not(.modal-form),
  body.popup-open .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap:not(.modal-form) {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  .modal-backdrop-google {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 500001 !important;
  }
  body.popup-open .modal-backdrop-google {
    display: block !important;
    z-index: 500001 !important;
  }
  /* Hero/mobile delivery card only — NOT desktop header row-dropdown (771px+ uses Pakistan modal) */
  .popup-content2.f4p-dlv-wrap.modal-form {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 500003 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }
  @media only screen and (max-width: 770px) {
    .row-dropdown.modal-form,
    .row-dropdown-header.modal-form {
      display: grid !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 500003 !important;
      pointer-events: auto !important;
      isolation: isolate !important;
    }
  }
  .popup-content2.f4p-dlv-wrap.modal-form {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 92vw !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 16px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    background: linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
    border: 1px solid #d8d0c4 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 10px 30px rgba(15, 23, 42, 0.18) !important;
  }
  @media only screen and (max-width: 770px) {
    .row-dropdown.modal-form,
    .row-dropdown-header.modal-form {
      position: fixed !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 92vw !important;
      max-width: 360px !important;
      margin: 0 !important;
      padding: 16px !important;
      overflow: visible !important;
      background: linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
      border: 1px solid #d8d0c4 !important;
      border-radius: 12px !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 10px 30px rgba(15, 23, 42, 0.18) !important;
    }
    .row-dropdown.modal-form .popup-image,
    .row-dropdown-header.modal-form .popup-image {
      display: none !important;
    }
  }
  .popup-content2.f4p-dlv-wrap.modal-form .google-dropdown.date_width .calendar-bg::before,
  .popup-content2.f4p-dlv-wrap.modal-form .google-dropdown.date_width .calender_container::before {
    content: none !important;
    display: none !important;
  }
  .popup-content2.f4p-dlv-wrap.modal-form .f4p-delivery-inner-title {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #374151 !important;
    text-align: center !important;
  }
  .popup-content2.f4p-dlv-wrap.modal-form .google-dropdown:not(.date_width):not(.button_width) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }
  .popup-content2.f4p-dlv-wrap.modal-form .google-dropdown.date_width {
    grid-column: 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .popup-content2.f4p-dlv-wrap.modal-form .popup-currency {
    grid-column: 2 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .popup-content2.f4p-dlv-wrap.modal-form .google-dropdown.button_width {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
  }
  body .select2-container--open .select2-dropdown {
    z-index: 100096 !important;
  }
  #ui-datepicker-div,
  body.f4p-datepicker-open #ui-datepicker-div,
  body.popup-open #ui-datepicker-div {
    z-index: 5000105 !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1366px) {
  .popup-content2.f4p-dlv-wrap.modal-form {
    width: 70vw !important;
    max-width: 70vw !important;
  }
}

/* Mobile typography — match h2.entry-title (15px Inter) across delivery, categories, date chips */
@media only screen and (max-width: 1023px) {
  h2.entry-title,
  h2.a-center.entry-title,
  .customer_txt h2.a-center.entry-title,
  .f4p-seo-text-hd {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    color: #333 !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
  }
  h2.entry-title span,
  h2.a-center.entry-title span,
  .f4p-seo-text-hd span {
    color: #3596b5 !important;
    font-weight: 700 !important;
  }

  h2.index-mh-delivery,
  h2.desktop_hidden.index-mh-delivery,
  h3.index-mh-delivery {
    display: none !important;
  }

  .popup-content2.f4p-dlv-wrap .f4p-delivery-inner-title {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #333 !important;
    text-align: center !important;
  }

  /* Section titles — Pakistan f4_responsive (1rem / 600 / #333) */
  h2.f4p-cats-mob-title,
  h3.f4p-cats-mob-title,
  #explorecollection,
  h3#explorecollection,
  .f4p-cats-mob-title {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #333 !important;
    text-align: center !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }
  h2.f4p-cats-mob-title,
  h3.f4p-cats-mob-title {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    padding: 4px 16px 8px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }
  h3#explorecollection {
    margin: 12px 0 12px !important;
    padding: 4px 16px 8px !important;
    display: block !important;
    visibility: visible !important;
  }

  .popup-content2 .google-dropdown .select2-selection__rendered,
  .popup-content2 .google-dropdown .select2-selection__placeholder,
  .popup-content2 .calendar-bg input[type="text"],
  .popup-content2 .calendar-bg input,
  .popup-content2 .calender_container input[type="text"],
  .popup-content2 .calender_container input,
  .popup-content2 #book_form_date2,
  .popup-content2 #book_form_date2_home,
  html body .popup-content2 #book_form_date2_home {
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: Inter, system-ui, sans-serif !important;
  }
  /* Date row — one calendar icon on input only (kill legacy green icon on wrapper) */
  html body .popup-content2 .google-dropdown.date_width,
  html body .popup-content2.f4p-dlv-wrap .google-dropdown.date_width,
  html body .row-dropdown .google-dropdown.date_width {
    background: transparent !important;
    background-image: none !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 0 0 !important;
  }
  html body .popup-content2 .google-dropdown.date_width::before,
  html body .popup-content2 .google-dropdown.date_width::after,
  html body .popup-content2 .google-dropdown.date_width .calendar-bg::before,
  html body .popup-content2 .google-dropdown.date_width .calender_container::before,
  html body .row-dropdown .google-dropdown.date_width::before,
  html body .row-dropdown .google-dropdown.date_width .calendar-bg::before,
  html body .row-dropdown .google-dropdown.date_width .calender_container::before {
    content: none !important;
    display: none !important;
  }
  html body .popup-content2 .calendar-bg,
  html body .popup-content2 .calender_container {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  .popup-content2 .calendar-bg input[type="text"],
  .popup-content2 .calendar-bg input,
  .popup-content2 .calender_container input[type="text"],
  .popup-content2 .calender_container input,
  .popup-content2 #book_form_date,
  .popup-content2 #book_form_date2,
  .popup-content2 #book_form_date2_home,
  html body .header .opening .row-dropdown-header #book_form_date,
  html body .popup-content2 #book_form_date2_home {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    line-height: normal !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !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;
    pointer-events: auto !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: Inter, system-ui, sans-serif !important;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat 11px center / 16px 16px !important;
  }
  html body .popup-content2 .popup-currency {
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }
  html body .popup-content2 .popup-currency form {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  html body .popup-content2 .popup-currency form::before {
    content: '' !important;
    position: absolute !important;
    left: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    z-index: 10 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M14.5 9a3 2.5 0 0 0-5 0c0 1.5 1 2 2.5 2.5S15 13 15 14.5a3 2.5 0 0 1-6 0'/%3E%3Cline x1='12' y1='6' x2='12' y2='8'/%3E%3Cline x1='12' y1='16' x2='12' y2='18'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
  }
  html body .popup-content2 .popup-currency select.sort-dropdown,
  html body .popup-content2 #ch_curr_2,
  html body .popup-content2 #ch_curr_2_home,
  html body .popup-content2 #ch_curr_3,
  html body .popup-content2 select.f4p-delivery-currency {
    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;
    height: 46px !important;
    line-height: 1.25 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0 28px 0 38px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  h3.f4p-cat-heading {
    display: none !important;
  }

  .popup-content2 .google-dropdown.button_width .md_button.green,
  html body .popup-content2.f4p-dlv-wrap .google-dropdown.button_width .md_button.green {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
  .popup-content2 .google-dropdown.button_width .md_button.green span {
    display: inline-block !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
  }

  html body:has(.f4pm-hero) .f4p-home-delivery-wrap,
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap {
    position: relative !important;
    z-index: 150 !important;
    isolation: isolate !important;
    display: flow-root !important;
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
  }
  /* index.tpl sets z-index:100 on .main-container3 > .wrapper .container — keep SEO below hero card */
  html body:has(.f4pm-hero):has(.f4p-home-delivery-wrap) .main-container3 > .wrapper .container {
    z-index: 1 !important;
    position: relative !important;
  }
  html body:has(.f4pm-hero) .f4pm-hero ~ .f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap,
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .popup-content2.f4p-dlv-wrap {
    margin-bottom: 28px !important;
  }
  html body:has(.f4pm-hero) .main-container3 > section.login-block:has(.customer_txt) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body:has(.f4pm-hero):has(.f4p-home-delivery-wrap) .main-container3 .grid-col > .f4p-seo-text.desktop_hidden {
    position: relative !important;
    z-index: 0 !important;
    margin-top: 16px !important;
    padding-top: 0 !important;
    clear: both !important;
    overflow: visible !important;
  }
  html body:has(.f4pm-hero):not(:has(.f4p-home-delivery-wrap)) .main-container3 .grid-col > .f4p-seo-text.desktop_hidden {
    margin-top: 20px !important;
    padding-top: 48px !important;
  }
  html body:has(.f4pm-hero) .main-container3 .f4p-seo-text-hd {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body:has(.f4pm-hero) .grid-col > .clear {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }
  html body:has(.f4pm-hero) .flower-categories-container {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
  }
  html body:has(.f4pm-hero) .main-content,
  html body:has(.f4pm-hero) .main-content > .wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html body:has(.f4pm-hero) .filter-header-container,
  html body:has(.f4pm-hero) #day-filter-top {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
  }
}

@media only screen and (max-width: 1366px) {
  h2.f4p-cats-mob-title,
  h3.f4p-cats-mob-title {
    display: block !important;
  }
  .f4p-cats-mob {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding: 2px 12px 4px !important;
    margin-bottom: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body:has(.f4pm-hero) h2.f4p-cats-mob-title,
  html body:has(.f4pm-hero) h3.f4p-cats-mob-title {
    margin-bottom: 2px !important;
    padding-bottom: 4px !important;
  }
  html body:has(.f4pm-hero) h2.f4p-cats-mob-title ~ .flower-categories-container,
  html body:has(.f4pm-hero) h3.f4p-cats-mob-title ~ .flower-categories-container {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
  }
  .f4p-cat-mob-chip {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 18px !important;
    border-radius: 9999px !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    color: #4a4a4a !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-sizing: border-box !important;
  }
  .f4p-cat-mob-chip--active {
    background: #2d6a4f !important;
    border-color: #2d6a4f !important;
    color: #fff !important;
    font-weight: 700 !important;
  }
  html body .flower-categories-container > .cta-container {
    display: none !important;
  }
  html body:has(.f4pm-hero) .main-container3 .f4p-seo-text-hd {
    overflow: visible !important;
    line-height: 1.35 !important;
  }
}

/* Delivery date row + cards — Pakistan f4_header_mobile (max-width 991px) */
@media only screen and (max-width: 991px) {
  html body .filter-header-container,
  html body .filter-header-container.collapsed,
  html body .filter-header-container.active,
  html body #day-filter-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: calc(100% - 28px) !important;
    margin: 6px 14px 0 !important;
    padding: 0 0 12px 0 !important;
    background: none !important;
    position: relative !important;
    border-radius: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  html body .filter-heading.secondary,
  html body #day-filter-top .filter-heading.secondary {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 6px !important;
    border-radius: 12px !important;
    border: 1.5px solid #d1d5db !important;
    background: #fff !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: Inter, system-ui, sans-serif !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    min-height: 62px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    transition: background 0.15s, border-color 0.15s !important;
    box-sizing: border-box !important;
  }
  html body .filter-heading.secondary span,
  html body #day-filter-top .filter-heading.secondary span {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    margin-top: 3px !important;
    font-family: Inter, system-ui, sans-serif !important;
    display: block !important;
    line-height: 1.25 !important;
  }
  html body .filter-heading.secondary.active,
  html body .filter-heading.secondary:hover,
  html body #day-filter-top .filter-heading.secondary.active,
  html body #day-filter-top .filter-heading.secondary:hover {
    background: #3596b5 !important;
    border-color: #3596b5 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(53, 150, 181, 0.2) !important;
  }
  html body .filter-heading.secondary.active span,
  html body .filter-heading.secondary:hover span,
  html body #day-filter-top .filter-heading.secondary.active span,
  html body #day-filter-top .filter-heading.secondary:hover span {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  html body .filter-heading.secondary.calendar,
  html body #day-filter-top .filter-heading.secondary.calendar,
  html body .filter-heading.secondary.calendar.delivery-filter-date {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
    padding: 10px 12px 10px 10px !important;
    background: #fff !important;
    background-image: none !important;
    position: relative !important;
  }
  html body .filter-heading.secondary.calendar::before,
  html body #day-filter-top .filter-heading.secondary.calendar::before,
  html body .filter-heading.secondary.calendar.delivery-filter-date::before {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    flex: 0 0 20px !important;
    order: -1 !important;
    align-self: center !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233596b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 20px 20px !important;
  }
  html body .filter-heading.secondary.calendar.active,
  html body .filter-heading.secondary.calendar:hover,
  html body #day-filter-top .filter-heading.secondary.calendar.active,
  html body #day-filter-top .filter-heading.secondary.calendar:hover,
  html body .filter-heading.secondary.calendar.delivery-filter-date.active,
  html body .filter-heading.secondary.calendar.delivery-filter-date:hover {
    background: #3596b5 !important;
    background-image: none !important;
    border-color: #3596b5 !important;
    color: #fff !important;
  }
  html body .filter-heading.secondary.calendar.active::before,
  html body .filter-heading.secondary.calendar:hover::before,
  html body #day-filter-top .filter-heading.secondary.calendar.active::before,
  html body #day-filter-top .filter-heading.secondary.calendar:hover::before,
  html body .filter-heading.secondary.calendar.delivery-filter-date.active::before,
  html body .filter-heading.secondary.calendar.delivery-filter-date:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  }

  html body .main-content .wrapper {
    background: #fff !important;
    background-image: none !important;
  }
}

/* Category pages — full-bleed hero, breadcrumbs, delivery card (flowers4pakistan) */
@media only screen and (max-width: 1023px) {
  @media only screen and (max-width: 770px) {
    html body:has(.f4p-cat-hero),
    html body:has(.f4p-cat-hero):has(.f4pm-hero) {
      padding-top: 0 !important;
    }
  }
  html body .grid-wrap.half-gutter:has(.f4p-cat-hero),
  html body .grid-wrap:has(.f4p-cat-hero),
  html body .grid-col:has(.f4p-cat-hero) {
    overflow: visible !important;
  }
  html body ul.breadcrumbs li::before {
    content: ">" !important;
    padding: 0 6px !important;
    color: #6b7280 !important;
  }
  html body ul.breadcrumbs li:first-child::before {
    content: none !important;
    padding: 0 !important;
  }
  html body ul.breadcrumbs {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  html body .wrapper:has(.f4p-cat-hero),
  html body .main-container3:has(.f4p-cat-hero) {
    overflow-x: visible !important;
  }
  html body .main-container3:has(.f4p-cat-hero) > .wrapper:first-child {
    margin-top: 0 !important;
  }
  html body .main-container3 .wrapper .grid-wrap.half-gutter .grid-col > .f4p-cat-hero,
  html body .wrapper .grid-wrap.half-gutter .grid-col > .f4p-cat-hero {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    scroll-margin-top: var(--f4pm-mobile-header-offset, 104px) !important;
    overflow: visible !important;
  }
  html body .main-container3 .wrapper .grid-wrap.half-gutter .grid-col > .f4p-cat-hero .f4p-cat-hero-visual,
  html body .wrapper .grid-wrap.half-gutter .grid-col > .f4p-cat-hero .f4p-cat-hero-visual {
    border-radius: 0 !important;
    min-height: min(85vw, 360px) !important;
  }
  html body .f4p-cat-hero .f4p-cat-hero-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  html body .f4p-cat-hero-content {
    padding: 24px 18px 96px !important;
    justify-content: center !important;
  }
  html body h2.index-mh-delivery,
  html body h3.index-mh-delivery {
    display: none !important;
  }
  html body .f4p-cat-hero ~ .popup-content2.f4p-dlv-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: -76px auto 18px !important;
    padding: 16px !important;
    max-width: calc(100% - 24px) !important;
    z-index: 4 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%),
      linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
    box-shadow: none !important;
  }
  html body .f4p-cat-hero ~ .popup-content2.f4p-dlv-wrap .f4p-delivery-inner-title {
    grid-column: 1 / -1 !important;
    display: block !important;
    text-align: center !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 0 10px !important;
  }
  html body .f4p-cat-hero ~ .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  html body .f4p-cat-hero ~ .popup-content2.f4p-dlv-wrap .google-dropdown.button_width {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  html body .f4p-cat-hero ~ .popup-content2.f4p-dlv-wrap .google-dropdown.button_width .md_button.green {
    width: 100% !important;
    background: #3596b5 !important;
    border: none !important;
    color: #fff !important;
    height: 46px !important;
    line-height: 46px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
  }
  @media only screen and (max-width: 770px) {
    html body .content-box {
      display: block !important;
      width: 100% !important;
      margin: 12px 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
  }
  html body .content-box .customer_txt.f4p-category-seo .bg.panel-text-wrapper.f4p-category-intro-card,
  html body .content-box .customer_txt.f4p-category-seo .bg.panel-text-wrapper.f4p-intro-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
    padding: 16px !important;
    margin: 0 auto 12px !important;
    overflow: visible !important;
    position: relative !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper .btn-read-more,
  html body .content-box .customer_txt.f4p-category-seo a.show-more,
  html body .content-box .customer_txt.f4p-category-seo a.hide-more {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper:not(.expanded) .panel-text {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    visibility: visible !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper:not(.expanded) .panel-text p {
    display: none !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper:not(.expanded) .panel-text h2 {
    display: block !important;
    visibility: visible !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper.expanded .panel-text {
    display: block !important;
    overflow: visible !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper.expanded .panel-text p {
    display: block !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text h2 {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: center !important;
    text-shadow: none !important;
    margin: 0 !important;
    line-height: 1.35 !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text p {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
    line-height: 1.6em !important;
    text-align: left !important;
  }
  html body .content-box .customer_txt.f4p-category-seo a.show-more,
  html body .content-box .customer_txt.f4p-category-seo a.hide-more {
    align-self: center !important;
    display: inline-flex !important;
    background: none !important;
    border: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    color: #3596b5 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: Inter, system-ui, sans-serif !important;
    text-decoration: none !important;
  }
  html body .content-box .customer_txt.f4p-category-seo a.show-more::after {
    content: " \2193" !important;
    font-size: 11px !important;
  }
  html body .content-box .customer_txt.f4p-category-seo a.hide-more::after {
    content: " \2191" !important;
    font-size: 11px !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper:not(.expanded) .hide-more {
    display: none !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper.expanded .show-more {
    display: none !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .panel-text-wrapper.expanded .hide-more {
    display: inline-flex !important;
  }
  html body .content-box .customer_txt.f4p-category-seo .arrow-down,
  html body .content-box .customer_txt.f4p-category-seo .arrow-up {
    display: none !important;
  }
}

/* Mobile homepage fixes — gap above hero, duplicate intro, floating calendar */
@media screen and (max-width: 770px) {
  .f4p-seo-text.desktop_hidden {
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  html body:has(.f4pm-hero):has(.f4p-home-delivery-wrap) .main-container3 .grid-col > .f4p-seo-text.desktop_hidden {
    margin-top: 16px !important;
    padding-top: 0 !important;
    z-index: 0 !important;
  }
  html body:has(.f4pm-hero):not(:has(.f4p-home-delivery-wrap)) .main-container3 .grid-col > .f4p-seo-text.desktop_hidden {
    margin-top: 20px !important;
    padding-top: 48px !important;
  }
  .f4p-seo-text-body,
  #f4p-seo-body {
    display: none !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #444 !important;
    margin: 8px 0 0 !important;
    padding: 0 4px !important;
  }
  .f4p-seo-text-body.is-open,
  #f4p-seo-body.is-open {
    display: block !important;
  }
  .f4p-seo-text.desktop_hidden .f4p-seo-text-hd {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #333 !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
  }
  .f4p-seo-text.desktop_hidden .f4p-seo-text-hd span {
    color: #111827 !important;
    font-weight: 600 !important;
  }
  .f4p-seo-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 6px auto 16px auto !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #3596b5 !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .f4p-seo-more-btn::after {
    content: ' ↓' !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  .f4p-seo-more-btn.is-open::after {
    content: ' ↑' !important;
  }
  .f4p-seo-more-btn:hover {
    color: #3596b5 !important;
    text-decoration: underline !important;
  }

  html body:has(.f4pm-hero) {
    padding-top: 0 !important;
  }
  html body:has(.f4pm-header) .header-bg,
  html body:has(.f4pm-header) .header-center,
  html body:has(.f4pm-header) #busywindow,
  html body:has(.f4pm-header) .header.header_mobile_search,
  html body:has(.f4pm-header) #menu-wrapper {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }
  html body .f4pm-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html body:has(.f4pm-hero) section.login-block:has(.customer_txt),
  html body:has(.f4pm-hero) .login-block:has(.customer_txt),
  html body:has(.f4pm-hero) .login-block:has(.customer_txt) .login-sec,
  html body:has(.f4pm-hero) .login-block:has(.customer_txt) .row.login-box,
  html body:has(.f4pm-hero) .login-block .customer_txt:not(.f4p-category-seo),
  html body:has(.f4pm-hero) .login-block .customer_txt .f4p-intro-card,
  html body:has(.f4pm-hero) .login-block .panel-text-wrapper.f4p-intro-card {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Hide duplicate delivery box in main flow — SEO h2 sits directly below it in DOM */
  html body:has(.f4pm-hero):has(.f4p-home-delivery-wrap) .main-container3 .grid-col > .popup-content2.f4p-dlv-wrap,
  html body:has(.f4pm-hero) .popup-content2.f4p-dlv-wrap.f4p-home-delivery-desktop-only,
  html body:has(.f4pm-hero) .main-container3 > .wrapper h2.index-mh-delivery,
  html body:has(.f4pm-hero) .main-container3 > .wrapper h3.index-mh-delivery {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* Hero delivery card under f4pm-hero — restore on phones */
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap,
  html body:has(.f4pm-hero) .f4pm-hero ~ .f4p-home-delivery-wrap {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap:not(.f4p-home-delivery-desktop-only):not(.modal-form) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 151 !important;
    width: 100% !important;
    max-width: calc(100% - 24px) !important;
    margin: -76px auto 24px !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    background-color: #ebe4da !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(235, 228, 218, .92) 38%),
                      linear-gradient(145deg, #f4efe8 0%, #ebe4da 42%, #ddd5c8 100%) !important;
    border: 1px solid #d8d0c4 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
                inset 0 -1px 0 rgba(0, 0, 0, .05),
                0 8px 28px rgba(15, 23, 42, 0.14) !important;
  }
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .f-text {
    display: none !important;
  }
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .f4p-delivery-inner-title {
    display: block !important;
    visibility: visible !important;
    grid-column: 1 / -1 !important;
  }
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown:not(.date_width):not(.button_width) {
    grid-column: 1 / -1 !important;
  }
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown.date_width {
    grid-column: 1 !important;
  }
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .popup-currency {
    grid-column: 2 !important;
    display: block !important;
  }
  html body:has(.f4pm-hero) .wrapper.f4p-home-delivery-wrap .grid-col > .popup-content2.f4p-dlv-wrap .google-dropdown.button_width {
    grid-column: 1 / -1 !important;
  }
  .filter-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: fixed !important;
    right: 14px !important;
    bottom: 88px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #3596b5 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22) !important;
    z-index: 100098 !important;
  }
  .filter-toggle.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .filter-toggle .calendar-icon {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    background-size: 20px 20px !important;
    filter: brightness(0) invert(1) !important;
  }
  html body .f4pm-header .calendar-bg,
  html body .f4pm-header .calender_container,
  html body .f4pm-header-cart .calendar-icon {
    display: none !important;
  }

  /* Product cards — see f4_product_cards_mobile.css (footer, after f4_responsive) */
  html body ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.125rem !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Ensure the product grid is constrained and centred on small screens */
  html body ul.products {
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 6px !important;
    justify-content: center !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body ul.products {
    align-items: stretch !important;
  }
  html body ul.products li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    height: 100% !important;
  }
  /* Centre each card inside its grid cell and cap card width for consistency */
  html body ul.products li {
    justify-content: center !important;
  }
  html body ul.products li div.ext,
  html body ul.products li div.ext-basket {
    max-width: 260px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  html body ul.products li div.ext,
  html body ul.products li div.ext-basket {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0.5px solid #e8e0e0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html body ul.products li div.ext .prod_img,
  html body ul.products li div.ext-basket .prod_img {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 16px 16px 0 0 !important;
  }
  html body ul.products li div.ext .prod_img a,
  html body ul.products li div.ext-basket .prod_img a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  html body ul.products li div.ext .prod_img img,
  html body ul.products li div.ext-basket .prod_img img,
  html body ul.products li div.ext .prod_img picture img,
  html body ul.products li div.ext-basket .prod_img picture img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }
  html body ul.products li div.ext .prod_det,
  html body ul.products li div.ext-basket .prod_det {
    position: static !important;
    padding: 6px 10px 0 !important;
    text-align: center !important;
    font-family: Inter, system-ui, sans-serif !important;
  }
  html body ul.products li div.ext .prod_det h4,
  html body ul.products li div.ext .prod_det h4 a,
  html body ul.products li div.ext-basket .prod_det h4,
  html body ul.products li div.ext-basket .prod_det h4 a {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1a1a1a !important;
    text-align: center !important;
    margin: 0 0 2px !important;
    min-height: 2.5em !important;
  }
  html body ul.products li div.ext .prod_det > span:not(.avail_color) {
    display: none !important;
  }
  html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle,
  html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle,
  html body ul.products li div.ext > h5.f4p-delivery-subtitle,
  html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 2px 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    z-index: auto !important;
    font-family: Inter, system-ui, sans-serif !important;
    color: #16b085 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }
  html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle::before,
  html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle::before,
  html body ul.products li div.ext > h5.f4p-delivery-subtitle::before,
  html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle::before {
    display: none !important;
  }
  html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
  html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
  html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
  html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
  html body ul.products li div.ext > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
  html body ul.products li div.ext > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2,
  html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1,
  html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line2 {
    display: inline !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: #16b085 !important;
    font-weight: 500 !important;
    background: transparent !important;
  }
  html body ul.products li div.ext .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1::before,
  html body ul.products li div.ext-basket .prod_det h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1::before,
  html body ul.products li div.ext > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1::before,
  html body ul.products li div.ext-basket > h5.f4p-delivery-subtitle .f4p-delivery-subtitle__line1::before {
    content: none !important;
    display: none !important;
  }
  html body ul.products li div.ext .prod_price,
  html body ul.products li div.ext-basket .prod_price {
    padding: 0 10px 10px !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    font-family: Inter, system-ui, sans-serif !important;
  }
  html body ul.products li div.ext .prod_price > span,
  html body ul.products li div.ext-basket .prod_price > span {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: center !important;
    width: 100% !important;
  }
  html body ul.products li div.ext .prod_price span.a-center small,
  html body ul.products li div.ext-basket .prod_price span.a-center small {
    display: none !important;
  }
  html body ul.products li div.ext .prod_price span.a-center strong,
  html body ul.products li div.ext-basket .prod_price span.a-center strong {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    margin: 0 auto 2px !important;
    padding: 0 !important;
  }
  html body ul.products li div.ext .prod_price span.a-center:not(.prod_price-row),
  html body ul.products li div.ext-basket .prod_price span.a-center:not(.prod_price-row) {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #aaaaaa !important;
    line-height: 1.2 !important;
  }
  html body ul.products li div.ext .prod_price span.a-center br,
  html body ul.products li div.ext-basket .prod_price span.a-center br,
  html body ul.products li div.ext .prod_price span.a-center strong br,
  html body ul.products li div.ext-basket .prod_price span.a-center strong br {
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }
  html body ul.products li div.ext .prod_btn,
  html body ul.products li div.ext-basket .prod_btn {
    width: 100% !important;
    margin-top: 6px !important;
    padding: 0 !important;
  }
  html body ul.products li .prod_btn .md_button.green,
  html body ul.products li .prod_price .md_button.green {
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 0 22px !important;
    border-radius: 9999px !important;
    border: none !important;
    background: #3596b5 !important;
    background-color: #3596b5 !important;
    box-shadow: 0 4px 16px rgba(53, 150, 181, 0.42), 0 2px 6px rgba(15, 23, 42, 0.1) !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  html body ul.products li .prod_btn .md_button.green a,
  html body ul.products li .prod_price .md_button.green a {
    color: #ffffff !important;
    background: transparent !important;
    width: 100% !important;
    min-height: 48px !important;
    line-height: 1.15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 1023px) {
  html body:has(.f4pm-hero) section.login-block:has(.customer_txt),
  html body:has(.f4pm-hero) .login-block:has(.customer_txt),
  html body:has(.f4pm-hero) .login-block:has(.customer_txt) .login-sec,
  html body:has(.f4pm-hero) .login-block:has(.customer_txt) .f4p-intro-heading-row,
  html body:has(.f4pm-hero) .login-block:has(.customer_txt) .customer_txt {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}