.modal.show {z-index: 9999999;}
.modal-backdrop.show {z-index: 999999;}
.po-wrap {display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-radius: 16px; background: linear-gradient(135deg, #f0fdf4, #ecfeff); border: 1px solid #bbf7d0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);backdrop-filter: blur(10px);margin: 20px 0;transition: all 0.3s ease;overflow: hidden;position: relative;}
.po-wrap:hover {transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);}
.po-wrap::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#22c55e,transparent);animation: glowMove 3s linear infinite;}
@keyframes glowMove {
  100% {left: 100%;}
}
.po-icon-wrap {flex-shrink: 0;}
.po-text {margin: 0; font-size: 15px; font-weight: 500; color: #14532d; line-height: 1.5; letter-spacing: 0.2px;}
.po-text strong {color: #059669; font-size: 16px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: rgba(16, 185, 129, 0.12);}
@media (max-width: 768px) {
  .po-wrap {flex-direction: column; text-align: center; padding: 18px;}
  .po-icon-wrap svg {width: 170px; height: auto;}
  .po-text {font-size: 14px;}
}
.cashback-badge-modal {display: inline-block; background: linear-gradient(135deg, #ff512f, #dd2476); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 30px; margin: 6px 0; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(221, 36, 118, 0.25); animation: pulseBogof 1.8s infinite; text-transform: uppercase;}
.cashback-badge {display: inline-block; background: #e8fff1; color: #0f8a4b; border: 1px solid #0f8a4b; border-radius: 4px; padding: 3px 8px; font-size: 12px; font-weight: 600; margin-top: 4px; margin-bottom: 4px;}
.header,
.main-header,
.navbar,
.top-header {position: sticky; top: 0; z-index: 999999; background: #fff;}
.layout-horizontal {position: relative;}
.horizontal-sticky-header {position: sticky; top: 40px; z-index: 9999; background: #fff; width: 100%; padding: 12px 0; border: 0 !important; box-shadow: none !important;}
.horizontal-sticky-header::before,
.horizontal-sticky-header::after,
.container-header::before,
.container-header::after,
.menu-tabs::before,
.menu-tabs::after,
.slider-tabs::before,
.slider-tabs::after {display: none !important; content: none !important; border: 0 !important; box-shadow: none !important;}
.horizontal-sticky-header *,
.container-header,
.menu-tabs,
.slider-tabs {border-bottom: 0 !important; box-shadow: none !important;}
.layout-horizontal,
.layout-horizontal .container,
.layout-horizontal .container-header,
.layout-horizontal #products-container {overflow: visible !important;}
.menu-tabs {display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0 !important; margin-bottom: 0 !important; border: 0 !important; box-shadow: none !important;}
.menu-tabs::-webkit-scrollbar {display: none;}
.menu-tabs .categ {flex-shrink: 0; display: flex; align-items: center; gap: 8px; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 0 !important; margin: 0 18px 0 0 !important; font-weight: 600;}
.menu-tabs .categ.active {border-bottom: 2px solid #000 !important;}
.menu-tabs .categ:hover,
.menu-tabs .categ:focus,
.menu-tabs .categ:active {background: transparent !important; box-shadow: none !important; outline: none !important;}
.icon-categories {width: 22px; height: 22px; object-fit: contain;}
html,
body {overflow-x: hidden;}
@keyframes slideDown {
  from {opacity: 0; transform: translateY(-12px);}
  to {opacity: 1; transform: translateY(0);}
}
@keyframes ripple {
  0% {transform: scale(1); opacity: 0.8;}
  100% {transform: scale(2.4); opacity: 0;}
}
@keyframes float {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-4px);}
}
@keyframes swing {
  0%, 100% {transform: rotate(-6deg);}
  50% {transform: rotate(6deg);}
}
@keyframes blink {
  0%, 100% {opacity: 1;}
  50% {opacity: 0.4;}
}
.banner {border-radius: 16px; overflow: hidden; display: flex; align-items: stretch; border: 1.5px solid; animation: slideDown 0.5s ease both; margin-bottom: 14px;}
.b-side {width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 0; flex-shrink: 0;}
.icon-circle {width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; animation: float 2.5s ease-in-out infinite;}
.icon-circle svg {width: 26px; height: 26px;}
.rring {position: absolute; inset: -2px; border-radius: 50%; border: 2px solid; animation: ripple 2s ease-out infinite;}
.rring2 {animation-delay: 0.7s;}
.b-body {flex: 1; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border-left: 1.5px solid;}
.b-title {font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px;}
.b-sub {font-size: 13px; margin: 0; line-height: 1.6;}
.live-badge {font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 20px; letter-spacing: 0.08em; text-transform: uppercase; animation: blink 1.8s ease-in-out infinite;}
.avail-pill {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-top: 4px; width: fit-content;}
.adot {width: 7px; height: 7px; border-radius: 50%;}
.tag-wrap {display: flex; justify-content: center; align-items: flex-start; padding: 20px 0 10px;}
.tag-swing {animation: swing 3s ease-in-out infinite; transform-origin: center top;}
@keyframes nowPulse {
  0%, 100% {opacity: 1;}
  50% {opacity: 0.6;}
}
.now-t {animation: nowPulse 1.4s ease-in-out infinite;}
.am .banner {background: #fffbf0; border-color: #d97706;}
.am .b-side {background: #fef3c7;}
.am .icon-circle {background: #fde68a;}
.am .icon-circle svg {stroke: #92400e;}
.am .rring {border-color: #f59e0b;}
.am .b-body {border-color: #fcd34d;}
.am .b-title {color: #78350f;}
.am .b-sub {color: #92400e;}
.am .live-badge {background: #f59e0b; color: #451a03;}
.am .avail-pill {background: #fef3c7; color: #78350f;}
.am .adot {background: #d97706;}
.am strong {color: #78350f;}
.tl .banner {background: #f0fdf8; border-color: #059669;}
.tl .b-side {background: #d1fae5;}
.tl .icon-circle {background: #a7f3d0;}
.tl .icon-circle svg {stroke: #064e3b;}
.tl .rring {border-color: #10b981;}
.tl .b-body {border-color: #6ee7b7;}
.tl .b-title {color: #064e3b;}
.tl .b-sub {color: #065f46;}
.tl .live-badge {background: #10b981; color: #022c22;}
.tl .avail-pill {background: #d1fae5; color: #064e3b;}
.tl .adot {background: #059669;}
.tl strong {color: #064e3b;}
.herosection {padding-top: 0px;}
.discount-icon {width: 130px !important; height: auto !important; object-fit: contain !important; margin-bottom: 5px;}
.rec-discount-icon {width: 89px !important; height: auto !important; object-fit: contain !important; margin-bottom: 5px;}
.price-original {font-size: 0.78rem; font-weight: 700; color: #252020; text-decoration: line-through; margin-left: 6px; letter-spacing: 0;}
#toast {position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); z-index: 1050111111; transition: bottom 0.5s ease, opacity 0.5s ease; opacity: 0;}
#toast.show-toast {bottom: 90px; opacity: 1 !important; display: block !important;}
.menu-list .icon img {max-width: 30px; margin-right: 5px;}
.menu-tabs .btn .icon-categories {max-width: 24px;}
.menu-card {background: #fff; border-radius: 14px; border: 1px solid #f0f0f0; padding: 14px; gap: 14px; align-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; overflow: hidden; position: relative; min-height: 110px; margin-left: 23px;}
.menu-card:hover {transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); border-color: #e0e0e0;}
.menu-card > img {width: 96px; height: 96px; min-width: 96px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #f5f5f5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease;}
.menu-card:hover > img {transform: scale(1.04);}
/* The product name on a menu card. Everything EXCEPT its size, which comes
   from the heading scale in style.css (2026-10-15).

   WHY: `.product-name` sits on an <h3> in a flat category and on an <h4> under
   a subcategory. A font-size here is a CLASS selector, so it beat the element
   rules in style.css and forced BOTH to 0.95rem = 15.2px. Measured in Chrome at
   1440px on a populated menu: h3 came out at two different sizes (15.2px on 250
   of them, 19px on the 111 that carry .subcategory-heading instead), and h3/h4
   were indistinguishable at 15.2px - which is the exact "same level, two sizes"
   defect the heading scale was introduced to remove.

   Dropping the size lets h3 be 19px and h4 16px everywhere, so a size variant
   no longer looks identical to the dish it belongs to. `.menu-card h6` keeps
   its own size: an h6 is a different level and was never part of that clash. */
.menu-card h6 {font-size: 0.95rem;}
.menu-card h6, .menu-card .product-name {font-weight: 700; color: #1a1a1a; margin-bottom: 4px; line-height: 1.35; letter-spacing: -0.01em;}
.menu-card .price {display: inline-block; font-size: 0.95rem; font-weight: 700; color: #c05621; background: #fff7ed; border-radius: 6px; padding: 2px 10px; margin-bottom: 6px; letter-spacing: 0.01em;}
.menu-card .text-muted.small {font-size: 0.8rem; color: #888 !important; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.menu-card:hover::after {opacity: 1; transform: scale(1);}
/* The category band. Size comes from the heading scale in style.css: this class
   sits only on an <h2>, and a font-size here would beat the element rule and
   hold every category heading at 1.2rem = 19.2px (measured in Chrome) while the
   scale says 25px - leaving a category heading smaller than the h3 dish names
   that are meant to sit UNDER it. Everything else here is this band's own look
   and is unchanged. */
.category-heading {letter-spacing: -0.02em; color: #111; padding-bottom: 8px; border-bottom: 2.5px solid #f0f0f0; margin-bottom: 18px !important; display: flex; align-items: center; gap: 8px;}
.category-heading::before {content: ''; display: inline-block; width: 4px; height: 20px; background: #c05621; border-radius: 4px;}
.row.g-4 {--bs-gutter-y: 1rem;}
.categories-section-custom {position: sticky; top: 100px; overflow: unset;}
.vertical-sidebar {position: sticky; top: 80px; align-self: flex-start; max-height: calc(100vh - 100px); overflow-y: auto; border-right: 1px solid #e9ecef; padding-right: 12px; margin-right: 24px; scrollbar-width: thin;}
.vertical-sidebar::-webkit-scrollbar {width: 4px;}
.vertical-sidebar::-webkit-scrollbar-track {background: transparent;}
.vertical-sidebar::-webkit-scrollbar-thumb {background: #dee2e6; border-radius: 4px;}
body.index-page.bg-white {overflow: unset !important;}
@media only screen and (min-width: 1024px) {
  body {overscroll-behavior: none;}
}
.ul-header-bottom {position: fixed; width: 100%;}
.layout-vertical #products-container {flex: 1; overflow: visible; height: auto;}
.vertical-cat-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;}
.vertical-cat-btn {width: 100%; text-align: left; display: flex; align-items: center; padding: 10px 14px; border-radius: 8px; border: none; background: transparent; font-weight: 500; color: #495057; transition: background 0.2s, color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.vertical-cat-btn:hover {background: #f8f9fa; color: #212529;}
.vertical-cat-btn.active {background: #fff3cd; color: #212529; font-weight: 600;}
.vertical-cat-btn .icon-categories {width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;}
.layout-horizontal .container-header {position: sticky; top: 30px; z-index: 100; background: #fff; padding-top: 12px; padding-bottom: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);}
@media (max-width: 768px) {
  .layout-vertical .layout-vertical-wrapper {display: block !important;}
  .vertical-sidebar {width: 100%; min-width: unset; position: sticky; height: auto; max-height: unset; border-right: none; border-bottom: 1px solid #e9ecef; padding-right: 0; padding-bottom: 12px; margin-right: 0; margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; z-index: 99999; background: #fff3cd;}
  .layout-vertical #products-container {height: auto; overflow: visible;}
  .vertical-cat-list {flex-direction: row; gap: 8px;}
  .vertical-cat-btn {white-space: nowrap; padding: 8px 12px;}
  .categories-section-custom {margin-top: 30px;}
  .layout-vertical #products-container {height: calc(80vh - 100%); overflow-y: auto; overflow-x: auto;}
}
.layout-horizontal .container-header {position: sticky; top: 0; z-index: 100; background: #fff; padding-top: 12px; padding-bottom: 4px;}
.layout-horizontal #products-container {height: auto; overflow: visible; padding-top: 16px;}
:root {
  --m-brand: #e8472a;
  --m-brand-dark: #c73a20;
  --m-brand-light: #fff2ef;
  --m-ink: #111827;
  --m-muted: #6b7280;
  --m-border: #f0f0f0;
  --m-bg: #fafafa;
  --m-white: #ffffff;
  --m-radius: 24px;
  --m-radius-sm: 12px;
  --m-radius-xs: 8px;
  --m-shadow: 0 24px 64px rgba(0, 0, 0, .16), 0 4px 16px rgba(0, 0, 0, .08);
}
#productModal {padding: 0 !important;}
#productModal .modal-dialog {margin: auto !important; width: 100% !important;}
#productModal .modal-content {border: none !important; border-radius: var(--m-radius) !important; box-shadow: var(--m-shadow) !important; overflow: hidden; max-height: calc(100dvh - 1.5rem); display: flex; flex-direction: column; background: var(--m-white);}
#productModal .btn-close {width: 22px !important; height: 22px !important; background-color: var(--m-white) !important; border-radius: 50% !important; opacity: 1 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .14) !important; top: 0px !important; right: 0px !important; z-index: 20; transition: transform .15s;}
#productModal .btn-close:hover {transform: scale(1.1);}
#productModal .btn-close:focus { box-shadow: none !important; outline: none;}
#productModal .modal-body {flex: 1 1 auto; overflow: hidden; padding: 0 !important;}
#productModal .row.g-0 {height: 100%; min-height: 0;}
#productModal .col-lg-5 {position: relative;}
#productModal .product-image-wrapper {position: relative; background: #e5e7eb; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
#productModal #modalProductImage {max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply;}
#productModal .image-overlay {position: absolute; inset: 0; background: linear-gradient(160deg,transparent 40%,rgba(0, 0, 0, .28) 100%);pointer-events: none;}
#productModal .col-lg-7 {display: flex; flex-direction: column; max-height: calc(100dvh - 1.5rem - 88px); min-height: 0; overflow: hidden;}
#productModal .product-details-wrapper {flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 28px 28px 32px !important; scrollbar-width: thin; scrollbar-color: #e0e0e0 transparent;}
#productModal .product-details-wrapper::-webkit-scrollbar {width: 3px;}
#productModal .product-details-wrapper::-webkit-scrollbar-thumb {background: #e0e0e0; border-radius: 4px;}
#productModal .product-header {margin-bottom: 14px !important;}
#productModal .product-title {font-family: 'Syne', sans-serif !important; font-size: 1.5rem !important; font-weight: 700 !important; color: var(--m-ink) !important; line-height: 1.25 !important; margin-bottom: 6px !important;}
#productModal .product-price {font-size: 1.35rem !important; font-weight: 700 !important; color: var(--m-brand) !important; letter-spacing: -.3px;}
#productModal .product-description {font-size: .875rem !important; color: var(--m-muted) !important; line-height: 1.6 !important; margin-bottom: 0 !important; padding-bottom: 16px; border-bottom: 1px solid var(--m-border);}
#productModal .modifier-groups-container {margin-bottom: 12px !important;}
#productModal .modifier-group-wrapper {margin-bottom: 0;}
#productModal .modifier-group-wrapper > hr {border: none; border-top: 1px solid var(--m-border); margin: 14px 0 10px;}
#productModal .modifier-group-wrapper h6 {font-family: 'Syne', sans-serif; font-size: .92rem; font-weight: 700; color: var(--m-ink); margin-bottom: 2px !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
#productModal .modifier-group-wrapper small.text-muted {font-size: .75rem !important; color: var(--m-muted) !important; display: block; margin-bottom: 8px;}
#productModal span.required {font-size: .65rem; font-weight: 700; background: var(--m-brand); color: #fff; padding: 2px 8px; border-radius: 20px; letter-spacing: .4px; text-transform: uppercase;}
#productModal .form-check {display: flex !important; align-items: center !important; justify-content: space-between !important; flex-direction: row-reverse !important; padding: 11px 14px !important; margin: 0 0 5px !important; border-radius: var(--m-radius-xs) !important; background: var(--m-bg) !important; border: 1.5px solid transparent !important; cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s;}
#productModal .form-check:hover {border-color: #e0e0e0 !important; background: #f3f3f3 !important;}
#productModal .form-check:has(input:checked) {border-color: var(--m-brand) !important; background: var(--m-brand-light) !important; box-shadow: 0 0 0 3px rgba(232, 71, 42, .07);}
#productModal .form-check-label {font-size: .875rem !important; font-weight: 500 !important; color: var(--m-ink) !important; cursor: pointer !important; flex: 1; line-height: 1.4; padding-left: 11px !important; margin: 0 !important;}
#productModal .form-check-input {width: 20px !important; height: 20px !important; flex-shrink: 0 !important; cursor: pointer !important; accent-color: var(--m-brand) !important; margin: 0 0 0 10px !important; border: 2px solid #d1d5db !important;}
#productModal .form-check-input[type="radio"] {border-radius: 50% !important;}
#productModal .form-check-input[type="checkbox"] {border-radius: 5px !important;}
#productModal .linked-group-wrapper {padding-left: 14px; border-left: 3px solid var(--m-brand); border-radius: 0 0 0 6px;}
#productModal .linked-group-wrapper .modifier-group-wrapper > hr { margin: 8px 0 8px;}
#productModal .special-instructions-wrapper {margin-top: 4px;}
#productModal .special-instructions-wrapper .form-label {font-size: .82rem !important; font-weight: 600 !important; color: var(--m-ink) !important; margin-bottom: 6px !important;}
#productModal #specialInstructions {font-size: .85rem !important; border: 1.5px solid var(--m-border) !important; border-radius: var(--m-radius-sm) !important; background: var(--m-bg) !important; resize: none !important; transition: border-color .18s, box-shadow .18s;}
#productModal #specialInstructions:focus {border-color: var(--m-brand) !important; box-shadow: 0 0 0 3px rgba(232, 71, 42, .1) !important; outline: none !important;}
#productModal .modal-footer {flex-shrink: 0 !important; border-top: 1px solid var(--m-border) !important; background: var(--m-white) !important; padding: 14px 22px !important; border-radius: 0 0 var(--m-radius) var(--m-radius);}
#productModal .btn-quantity {width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 1.5px solid #e0e0e0 !important; background: var(--m-white) !important; color: var(--m-ink) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; font-size: 1rem; transition: all .15s;}
#productModal .btn-quantity:hover {border-color: var(--m-brand) !important; color: var(--m-brand) !important; background: var(--m-brand-light) !important;}
#productModal .quantity-display {font-size: 1rem !important; font-weight: 700 !important; min-width: 28px; text-align: center; color: var(--m-ink);}
#productModal .btn-add-to-cart {background: var(--m-ink) !important; border: none !important; border-radius: var(--m-radius-sm) !important; font-family: 'Syne', sans-serif !important; font-size: .92rem !important; font-weight: 700 !important; letter-spacing: .3px !important; padding: 13px 24px !important; color: var(--m-white) !important; position: relative; overflow: hidden; transition: background .2s, transform .12s, box-shadow .2s; box-shadow: 0 4px 16px rgba(17, 24, 39, .2);}
#productModal .btn-add-to-cart::after {content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); transform: translateX(-100%); transition: transform .4s;}
#productModal .btn-add-to-cart:hover {background: #1f2937 !important; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(17, 24, 39, .28);}
#productModal .btn-add-to-cart:hover::after {transform: translateX(100%);}
#productModal .btn-add-to-cart:active { transform: translateY(0);}
@media (min-width: 768px) {
  #productModal .modal-dialog {display: flex !important; align-items: center !important; min-height: calc(100% - 1.5rem) !important; margin: 0.75rem auto !important;}
  #productModal .modal-content {width: 100% !important;}
  #productModal .col-lg-5 {position: relative !important; min-height: 460px !important;}
  #productModal .row.g-0 {min-height: 460px !important; align-items: stretch !important;}
}
@media (max-width: 767.98px) {
  #productModal .modal-dialog {margin: 0 !important; max-width: 100% !important; width: 100% !important; min-height: 100% !important; align-items: flex-end !important;}
  #productModal .modal-content {border-radius: 22px 22px 0 0 !important; max-height: 93 dvh !important;width: 100%;}
  #productModal .col-lg-5 {width: 100%;}
  #productModal .col-lg-7 {width: 100%; max-height: calc(93dvh - 210px - 76px) !important;}
  #productModal .product-details-wrapper {padding: 18px 18px 96px !important;}
  #productModal .product-title {font-size: 1.2rem !important;}
  #productModal .product-price {font-size: 1.15rem !important;}
  #productModal .modal-footer {padding: 12px 16px !important;}
  #productModal .btn-add-to-cart {font-size: .85rem !important; padding: 12px 16px !important;}
  #productModal .modal-footer > .d-flex {display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important;}
  #productModal .btn-add-to-cart {flex: 1 1 auto !important; width: auto !important; white-space: nowrap; min-width: 0;}
}
@media (min-width: 992px) {
  #productModal .modal-content {max-height: 88 dvh !important;}
  #productModal .col-lg-7 {max-height: calc(88dvh - 88px) !important;}
  #productModal .row.g-0 {height: calc(88dvh - 1.5rem - 88px);}
}
#storeClosedOverlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(3px);z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: all;}
.overlay-content {background: #fff; padding: 30px 40px; border-radius: 10px; text-align: center; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);}
body.store-closed {overflow: hidden;}
.store-closed {pointer-events: none;}
body.store-closed *:not(#storeClosedOverlay):not(#storeClosedOverlay *) {pointer-events: none;}
#storeClosedOverlay {pointer-events: all;}
.bogof-badge {display: inline-block; background: linear-gradient(135deg, #ff512f, #dd2476); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 30px; margin: 6px 0; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(221, 36, 118, 0.25); animation: pulseBogof 1.8s infinite; text-transform: uppercase;}
@keyframes pulseBogof {
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}
.slide-inner {
  position: relative;
  width: 100%;
  /* 2:1, matching the shape banners are ACTUALLY uploaded at (measured: every
     live custom banner is ~1600x803 = 1.99:1). Do not shorten this without
     changing the images too.

     A 2.5:1 slot was tried and REVERTED: with `background-size: cover` it
     crops 20.3% of every existing banner's height - 163px of 803, about 80px
     off the top and 80px off the bottom. On a promotional image that is where
     the shop name and the call to action usually sit, so it silently destroys
     the content of all 80 live banners. Shortening the slot therefore requires
     re-cutting the artwork first; see docs/04 for what that involves.

     The old fixed 500px made the slot 2.28:1 at desktop and progressively
     wronger as the viewport narrowed, which is why banners looked oversized
     and cropped at the sides. aspect-ratio holds the shape at every width;
     height is the fallback for browsers without aspect-ratio support. */
  height: 500px;
  aspect-ratio: 2 / 1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

@supports (aspect-ratio: 2 / 1) {
  .slide-inner {
    height: auto;
  }
}

.banner-content{
  padding: 10px 0 15px;
}

.banner-title {
  font-size: 42px;
  font-weight: 700;
  margin: 0;
  line-height: 1.0;
  color: #333;
  text-transform: capitalize;
}

.banner-subtitle {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  color: #333;
  text-transform: capitalize;
}

/* Animate text with slide */
.swiper-slide .banner-content {
  opacity: 0;
  transform: translateY(-40px);
  /*transition: all .7s ease;*/
}

.swiper-slide-active .banner-content {
  opacity: 1;
  transform: translateY(0);
}

.slide-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: unset !important;
  z-index: 1;
}

.swiper-slide{
  display: flex;
  flex-direction: column;
}

/* style.css:276 fixes `.hero-slider` at 700px and the slide is a flex column,
   so the slot was STRETCHED to fill whatever height the title and terms left
   over - which overrides aspect-ratio and put the slot at 1.50:1 at 768px
   even though the ratio was applied. Let the section take its height from the
   banner instead, and stop the slot flexing. */
.hero-slider {
  height: auto;
}

.hero-slider .swiper-slide > .slide-inner {
  flex: 0 0 auto;
  height: auto;
}

/* When a banner names a category it is wrapped in a link. The anchor has to
   fill the slide the same way the bare .slide-inner did, otherwise it shrinks
   to its content and the slot has no width to derive its height from. */
.hero-slider .swiper-slide > .slide-link {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

.hero-slider .swiper-slide > .slide-link > .slide-inner {
  flex: 0 0 auto;
  height: auto;
}

.swiper-button-next,
.swiper-button-prev {
  top: calc(50% + 40px) !important; /* adjust 40px as needed */
  transform: translateY(-50%);
}

@media (max-width: 992px) {

  .hero-slider .slide-inner {
    /* No height cap: a cap overrides aspect-ratio and crops the image again,
       which is the bug this change exists to fix. The slot keeps its shape. */
    aspect-ratio: 2 / 1;
  }

  .banner-title {
    font-size: 34px;
  }

  .banner-subtitle {
    font-size: 20px;
  }
}

@media (max-width: 768px) {

  .hero-slider .slide-inner {
    aspect-ratio: 2 / 1;
    border-radius: 16px;
  }

  .banner-content {
    padding: 8px 0 12px;
  }

  .banner-title {
    font-size: 28px;
    line-height: 1.2;
  }

  .banner-subtitle {
    font-size: 18px;
    line-height: 1.35;
  }
}

@media (max-width: 576px) {

  .hero-slider .slide-inner {
    aspect-ratio: 2 / 1;
    border-radius: 12px;
  }

  .banner-content {
    padding: 6px 0 10px;
  }

  .banner-title {
    font-size: 22px;
    line-height: 1.2;
  }

  .banner-subtitle {
    font-size: 15px;
    line-height: 1.3;
  }
}

@media (max-width: 400px) {

  .slide-inner {
    aspect-ratio: 2 / 1;
  }

  .banner-title {
    font-size: 18px;
  }

  .banner-subtitle {
    font-size: 14px;
  }
}
.dining-switch {font-size: 14px;font-weight: 500;}
.dining-switch .form-check-input {width: 50px;height: 25px;cursor: pointer;}
.dining-switch span {min-width: 70px;text-align: center;}