@import url(https://fonts.googleapis.com/css?family=Montserrat:900);
@import url(https://fonts.googleapis.com/css?family=Prata&display=swap);
/*html, body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #11998e, #38ef7d);
}*/

.accomItemBox .disabledContainer{
  position:absolute;
  top:0px;
  right:0px;
  width:100%;
  min-height:435px;
  transition: all 2.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  background-color:rgba(255,255,255,0.7);
}
.accomItemBox .disabledContainer:hover{
  transition: opacity 1s ease-out;
  opacity: 0; 
  height: 0;
  overflow: hidden;
}
.accomItemBox .closedMsg{
  text-align:center;
  font-weight:400;
  font-size:14px;
  margin-top:70px;
}

.accomItemBox .disabledContainer:hover > .closedMsg{
  opacity:0.7
}

.accomItemBox {
    position: relative;
    display: inline-block;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: #ececec solid 1px;
    
    margin: 5px;
    vertical-align: top;
    min-height: 320px;
    width: 97%;
}

.accomItemBox::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.accomItemBox:hover {}

.accomItemBox:hover::after {
    opacity: 1;
}

.accomItemBoxOutside {
    float: left;
}

@media screen and (max-width: 480px) {
    .accomItemBoxOutside {
        width: 100%;
    }
}

@media screen and (max-width: 780px) and (min-width: 480px) {
    .accomItemBoxOutside {
        width: 50%;
    }
}

@media screen and (max-width: 1280px) and (min-width: 780px) {
    .accomItemBoxOutside {
        width: 50%;
    }
}

@media screen and (max-width: 1440px) and (min-width: 1280px) {
    .accomItemBoxOutside {
        width: 50%;
    }
}

@media screen and (min-width: 1440px) {
    .accomItemBoxOutside {
        width: 33.3%;
    }
}
.apartItemBox .disabledContainer{
  position:absolute;
  top:0px;
  right:0px;
  width:100%;
  min-height:535px;
  transition: all 2.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  background-color:rgba(255,255,255,0.7);
}
.apartItemBox .disabledContainer:hover{
  transition: opacity 1s ease-out;
  opacity: 0; 
  height: 0;
  overflow: hidden;
}
.apartItemBox .closedMsg{
  text-align:center;
  font-weight:400;
  font-size:14px;
  margin-top:70px;
}

.apartItemBox .disabledContainer:hover > .closedMsg{
  opacity:0.7
}

.apartItemBox {
    position: relative;
    display: inline-block;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: #ececec solid 1px;
    
    margin: 5px;
    vertical-align: top;
    min-height: 420px;
    width: 97%;
}

.apartItemBox::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.apartItemBox:hover {}

.apartItemBox:hover::after {
    opacity: 1;
}

.apartItemBoxOutside {
    float: left;
}

@media screen and (max-width: 480px) {
    .apartItemBoxOutside {
        width: 100%;
    }
}

@media screen and (max-width: 780px) and (min-width: 480px) {
    .apartItemBoxOutside {
        width: 50%;
    }
}

@media screen and (max-width: 1280px) and (min-width: 780px) {
    .apartItemBoxOutside {
        width: 50%;
    }
}

@media screen and (max-width: 1440px) and (min-width: 1280px) {
    .apartItemBoxOutside {
        width: 50%;
    }
}

@media screen and (min-width: 1440px) {
    .apartItemBoxOutside {
        width: 33.3%;
    }
}
.RecItemBox {
    position: relative;
    display: inline-block;
    text-align: left;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: #efefef solid 1px;
    /*padding: 20px;*/
    margin: 5px;
    vertical-align: top;
    /*min-height: 435px;*/
    width: 97%;
}
.hover-dim{
    -webkit-transition: all .4s ease-in-out;
    -webkit-font-smoothing: antialiased;
}
.hover-dim:hover{
    filter:brightness(0.8);    
}
.slick-next {
    right: 0px !important;
}

.slick-prev {
    left: 0px !important;
    z-index: 1;
}
.img-hover-zoom{
    -webkit-transition: all .4s ease-in-out;
    -webkit-font-smoothing: antialiased;
}
    .img-hover-zoom:hover{
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
}   
nextjs-portal{
  /*display :none;*/
}

a{
  text-decoration: none;
}
span.fontawesome{
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  width:16px;
}
.scroll {
  opacity: 0.5;  
  border:#ccc solid 2px;
  z-index:5;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 95px;
  right: 30px;
  border-radius: 25px;
  border: none;
  z-index: 5;
}
.scroll:hover {
    opacity: 0.8;
}
.callMeButton, .fb_dialog_content{
  opacity: 0.4;
}
.callMeButton:hover, .fb_dialog_content:hover{
  opacity: 1;
}

.slider-wrapper > .nextButton:hover, .slider-wrapper > .previousButton:hover{
    transition: all 0.5s ease-in-out !important;
    transition: all 0.5s ease-in-out !important;
    -webkit-transition: all 0.5s ease-in-out !important; /** Chrome & Safari **/
    -moz-transition: all 0.5s ease-in-out !important; /** Firefox **/
    -o-transition: all 0.5s ease-in-out !important; /** Opera **/
}

.closeNotify{
  padding:6px;
  filter: invert(1);
  display: inline-block;
  float: right;
  width:20px;
  height:20px;
  font-size: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYWxxdWVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDM5MS4yIDM5MS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzOTEuMiAzOTEuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxyZWN0IHg9Ii03Mi43IiB5PSIxODcuMSIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxIC0wLjcwNzEgMC43MDcxIDAuNzA3MSAtODAuOTU2NSAxOTUuNTE3MSkiIHdpZHRoPSI1MzYuNSIgaGVpZ2h0PSIxNi43Ii8+Cgk8cmVjdCB4PSIxODcuMiIgeT0iLTcyLjgiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSAtMC43MDcxIDAuNzA3MSAwLjcwNzEgLTgwLjk1NjUgMTk1LjUxNzEpIiB3aWR0aD0iMTYuNyIgaGVpZ2h0PSI1MzYuNSIvPgo8L2c+Cjwvc3ZnPgo=)
    
}
.fb_dialog{
  z-index: 3 !important;
}

#page-wrap{
  min-height: 100%;
  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto auto;
}

.Phone {
  position: relative;
  display: block;
  margin: 0;
  width: 60px;
  height: 60px;
  font-size: 25vmin;
  border-radius: 0.5em;
  box-shadow:
    0 0 0 0em rgba(#3498db, 0),
    0em 0.05em 0.1em rgba(#000000, 0.2);
  transform: translate3d(0, 0, 0) scale(1);
}

.Phone::before,
.Phone::after {
  position: absolute;
  content: "";
}

.Phone::before {
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(#fff, 0.1);
  border-radius: 100%;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(0);
}

.Phone::after {
  top: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTYuNiAxMC44YzEuNCAyLjggMy44IDUuMSA2LjYgNi42bDIuMi0yLjJjLjMtLjMuNy0uNCAxLS4yIDEuMS40IDIuMy42IDMuNi42LjUgMCAxIC40IDEgMVYyMGMwIC41LS41IDEtMSAxLTkuNCAwLTE3LTcuNi0xNy0xNyAwLS42LjQtMSAxLTFoMy41Yy41IDAgMSAuNCAxIDEgMCAxLjIuMiAyLjUuNiAzLjYuMS40IDAgLjctLjIgMWwtMi4zIDIuMnoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0, 0, 0);
}

.Phone.is-animating {
  animation: phone-outer 3000ms infinite;
  
  &::before {
    animation: phone-inner 3000ms infinite;
  }
  
  &::after {
    animation: phone-icon 3000ms infinite;
  }
}

@keyframes phone-outer {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
      0 0 0 0em rgba(#3498db, 0),
      0em 0.05em 0.1em rgba(#000000, 0.2);
  }
  33.3333% {
    transform: translate3d(0, 0, 0) scale(1.1);
    box-shadow:
      0 0 0 0em rgba(#3498db, 0.1),
      0em 0.05em 0.1em rgba(#000000, 0.5);
  }
  66.6666% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
      0 0 0 0.5em rgba(#3498db, 0),
      0em 0.05em 0.1em rgba(#000000, 0.2);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
      0 0 0 0em rgba(#3498db, 0),
      0em 0.05em 0.1em rgba(#000000, 0.2);
  }
}

@keyframes phone-inner {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0);
  }
  33.3333% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  66.6666% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
  }
}

@keyframes phone-icon {
  0% { transform: translate3d(0em, 0, 0); }
  2% { transform: translate3d(0.01em, 0, 0); }
  4% { transform: translate3d(-0.01em, 0, 0); }
  6% { transform: translate3d(0.01em, 0, 0); }
  8% { transform: translate3d(-0.01em, 0, 0); }
  10% { transform: translate3d(0.01em, 0, 0); }
  12% { transform: translate3d(-0.01em, 0, 0); }
  14% { transform: translate3d(0.01em, 0, 0); }
  16% { transform: translate3d(-0.01em, 0, 0); }
  18% { transform: translate3d(0.01em, 0, 0); }
  20% { transform: translate3d(-0.01em, 0, 0); }
  22% { transform: translate3d(0.01em, 0, 0); }
  24% { transform: translate3d(-0.01em, 0, 0); }
  26% { transform: translate3d(0.01em, 0, 0); }
  28% { transform: translate3d(-0.01em, 0, 0); }
  30% { transform: translate3d(0.01em, 0, 0); }
  32% { transform: translate3d(-0.01em, 0, 0); }
  34% { transform: translate3d(0.01em, 0, 0); }
  36% { transform: translate3d(-0.01em, 0, 0); }
  38% { transform: translate3d(0.01em, 0, 0); }
  40% { transform: translate3d(-0.01em, 0, 0); }
  42% { transform: translate3d(0.01em, 0, 0); }
  44% { transform: translate3d(-0.01em, 0, 0); }
  46% { transform: translate3d(0em, 0, 0); }
}
/*
 * Facelift design tokens + primitives.
 *
 * Goal: bring the older Next 9.4 storefront closer to the modern Nuxt site
 * without changing component logic or rebuilding styles.
 *
 * Usage:
 *   - Tokens are exposed on :root and on `.fl-root` (component-scoped).
 *   - Brand colour + display font are injected at runtime in layout.js as
 *     CSS variables (`--fl-brand`, `--fl-font-display-brand`) so each store's
 *     palette/font carries through automatically.
 *   - Primitives use the `.fl-` prefix to coexist with existing Bootstrap /
 *     styled-jsx / styled-components rules without overriding them globally.
 */

:root {
  /* Type */
  --fl-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fl-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Brand-injected at runtime; fallback to display token */
  --fl-font-display-brand: var(--fl-font-display);

  /* Brand colour — overridden per store at runtime via inline style on
     #outer-container.  Do NOT define brand-derived variables (like
     --fl-brand-soft) at :root: nested var() inside a custom-property value
     resolves at the SCOPE WHERE THE PROPERTY IS DEFINED, not at use-time —
     so :root would lock --fl-brand-soft to the fallback colour and ignore
     the per-store override.  Brand-derived helpers live in .fl-root below. */
  --fl-brand: #e8943a; /* warm orange default (Bagel Brothers vibe) */
  --fl-brand-ink: #ffffff; /* contrast on top of brand */

  /* Neutrals */
  --fl-ink: #1a1a1a;
  --fl-ink-2: #4a4a4a;
  --fl-ink-3: #6b7280;
  --fl-line: #ece6dd;
  --fl-cream: #fef9f3;
  --fl-paper: #ffffff;

  /* Spacing scale (rem) */
  --fl-s-1: 0.25rem;
  --fl-s-2: 0.5rem;
  --fl-s-3: 0.75rem;
  --fl-s-4: 1rem;
  --fl-s-5: 1.5rem;
  --fl-s-6: 2rem;
  --fl-s-7: 3rem;
  --fl-s-8: 4rem;
  --fl-s-9: 6rem;

  /* Radii */
  --fl-r-sm: 0.5rem;
  --fl-r-md: 0.875rem;
  --fl-r-lg: 1.25rem;
  --fl-r-xl: 1.5rem;
  --fl-r-pill: 999px;

  /* Shadows */
  --fl-shadow-sm: 0 1px 2px rgba(15, 12, 8, 0.06),
    0 2px 8px rgba(15, 12, 8, 0.04);
  --fl-shadow-md: 0 6px 18px rgba(15, 12, 8, 0.08),
    0 1px 3px rgba(15, 12, 8, 0.06);
  --fl-shadow-brand: 0 8px 24px
    color-mix(in srgb, var(--fl-brand) 28%, transparent);

  /* Motion */
  --fl-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Brand-derived helpers — redeclared on every element where --fl-brand may
   be overridden (html for portaled modals, .fl-app-root for the main tree,
   .fl-root for the legacy nested wrapper).  Custom property values resolve
   nested var() at definition scope, so we must redeclare these at the same
   element where --fl-brand is overridden — not at :root. */
html,
.fl-app-root,
.fl-root {
  --fl-brand-soft: color-mix(in srgb, var(--fl-brand, #e8943a) 12%, #ffffff);
  --fl-brand-tint: color-mix(in srgb, var(--fl-brand, #e8943a) 6%, #ffffff);
}

/* Reset that only applies inside an .fl-root opt-in container so the rest of
   the app is unaffected. */
.fl-root {
  font-family: var(--fl-font-body);
  color: var(--fl-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fl-root,
.fl-root * {
  box-sizing: border-box;
}

/* ── Typography primitives ────────────────────────────────────────────── */
.fl-eyebrow {
  font-family: var(--fl-font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fl-brand);
}

.fl-display {
  font-family: var(--fl-font-display-brand);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  color: var(--fl-ink);
}

.fl-headline {
  font-family: var(--fl-font-display-brand);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  color: var(--fl-ink);
}

.fl-tagline {
  font-family: var(--fl-font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--fl-ink-2);
  max-width: 38ch;
}

.fl-meta {
  font-family: var(--fl-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--fl-ink-3);
}

/* ── Pill / button primitives ────────────────────────────────────────── */
.fl-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-s-2);
  padding: 0.85rem 1.5rem;
  font-family: var(--fl-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: var(--fl-r-pill);
  border: 1.5px solid transparent;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.18s var(--fl-ease), background-color 0.18s,
    box-shadow 0.18s, border-color 0.18s, color 0.18s;
  -webkit-appearance: none;
  appearance: none;
}

.fl-pill--primary {
  background-color: var(--fl-brand);
  color: var(--fl-brand-ink);
  box-shadow: var(--fl-shadow-brand);
}
.fl-pill--primary:hover {
  background-color: color-mix(in srgb, var(--fl-brand) 88%, #000);
  transform: translateY(-1px);
  color: var(--fl-brand-ink);
}
.fl-pill--primary:active {
  transform: translateY(0);
}

.fl-pill--ghost {
  background-color: transparent;
  color: var(--fl-ink);
  border-color: color-mix(in srgb, var(--fl-ink) 18%, transparent);
}
.fl-pill--ghost:hover {
  background-color: var(--fl-brand-soft);
  border-color: var(--fl-brand);
  color: var(--fl-ink);
}

.fl-pill--inverse {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.fl-pill--inverse:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* ── Card primitive ──────────────────────────────────────────────────── */
.fl-card {
  background: var(--fl-paper);
  border-radius: var(--fl-r-lg);
  box-shadow: var(--fl-shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.25s var(--fl-ease),
    transform 0.25s var(--fl-ease);
}
@media (hover: hover) and (pointer: fine) {
  .fl-card:hover {
    box-shadow: var(--fl-shadow-md);
    transform: translateY(-2px);
  }
}

/* ── Input primitive ─────────────────────────────────────────────────── */
.fl-input,
.fl-textarea,
.fl-select {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--fl-font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--fl-ink);
  background: var(--fl-paper);
  border: 1.5px solid var(--fl-line);
  border-radius: var(--fl-r-md);
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
  appearance: none;
}
.fl-input:focus,
.fl-textarea:focus,
.fl-select:focus {
  outline: none;
  border-color: var(--fl-brand);
  box-shadow: 0 0 0 4px
    color-mix(in srgb, var(--fl-brand) 18%, transparent);
}
.fl-textarea {
  min-height: 6rem;
  resize: vertical;
}

/* ── Section wrappers ────────────────────────────────────────────────── */
.fl-section {
  padding: var(--fl-s-8) var(--fl-s-4);
}
@media (min-width: 768px) {
  .fl-section {
    padding: var(--fl-s-9) var(--fl-s-5);
  }
}

.fl-container {
  max-width: 1200px;
  margin-inline: auto;
}

/* ── Stagger reveal (IntersectionObserver-driven) ────────────────────── */
.fl-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--fl-ease),
    transform 0.6s var(--fl-ease);
}
.fl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fl-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--fl-ease),
    transform 0.5s var(--fl-ease);
}
.fl-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.fl-stagger.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
.fl-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.fl-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
.fl-stagger.is-visible > *:nth-child(4) { transition-delay: 0.16s; }
.fl-stagger.is-visible > *:nth-child(5) { transition-delay: 0.20s; }
.fl-stagger.is-visible > *:nth-child(6) { transition-delay: 0.24s; }
.fl-stagger.is-visible > *:nth-child(7) { transition-delay: 0.28s; }
.fl-stagger.is-visible > *:nth-child(8) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .fl-reveal,
  .fl-stagger > * {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ── Featured products section (Home) ────────────────────────────────── */
.fl-featured-section {
  background: var(--fl-cream);
}

.fl-featured-heading {
  text-align: center;
  margin-bottom: var(--fl-s-7);
}
.fl-featured-heading .fl-eyebrow {
  display: block;
  margin-bottom: var(--fl-s-3);
}
.fl-featured-heading-link {
  text-decoration: none !important;
  cursor: pointer;
  color: inherit;
}
.fl-featured-heading-link h2 {
  margin: 0;
}

.fl-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fl-s-5);
}
@media (min-width: 768px) {
  .fl-featured-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fl-s-6);
  }
}

.fl-product-card {
  display: block;
  text-decoration: none !important;
  color: var(--fl-ink) !important;
  cursor: pointer;
  transition: transform 0.3s var(--fl-ease);
}
.fl-product-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--fl-r-lg);
  background: var(--fl-paper);
  box-shadow: var(--fl-shadow-sm);
  transition: box-shadow 0.3s var(--fl-ease);
}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .fl-product-card__media {
    height: 0;
    padding-bottom: 100%;
  }
}
.fl-product-card__image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.7s var(--fl-ease);
}
@media (hover: hover) and (pointer: fine) {
  .fl-product-card:hover .fl-product-card__media {
    box-shadow: var(--fl-shadow-md);
  }
  .fl-product-card:hover .fl-product-card__image {
    transform: scale(1.04);
  }
}
.fl-product-card__title {
  font-family: var(--fl-font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  margin: var(--fl-s-4) 0 0;
  text-align: center;
  color: var(--fl-ink);
  transition: color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .fl-product-card:hover .fl-product-card__title {
    color: var(--fl-brand);
  }
}

/* ── Overrides for existing legacy markup ─────────────────────────────
   Scoped under .fl-root so the rest of the app (admin etc.) is unaffected. */

/* Section heading: lift the .border_heading h2 into editorial typography
   while keeping the original markup intact. Replace the thin connecting
   rules with a subtle eyebrow-style decoration. */
.fl-root .border_heading {
  font-family: var(--fl-font-display-brand) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--fl-ink) !important;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important;
  margin: 0 auto var(--fl-s-3);
}
.fl-root .border_heading:before,
.fl-root .border_heading:after {
  background-color: color-mix(in srgb, var(--fl-brand) 60%, transparent) !important;
  height: 1px !important;
  width: clamp(40px, 8vw, 90px) !important;
  margin: 0 var(--fl-s-4);
  vertical-align: middle;
  opacity: 0.7;
}

/* Product grid card refinement: rounded corners, soft shadow, smooth
   hover lift. Touch-safe via @media (hover: hover). */
.fl-root .productsItemBoxOutside {
  padding: var(--fl-s-2);
}
.fl-root .productsItemBox {
  border: 0 !important;
  border-radius: var(--fl-r-md) !important;
  box-shadow: var(--fl-shadow-sm) !important;
  padding: var(--fl-s-3) !important;
  margin: 0 !important;
  width: 100% !important;
  transition: box-shadow 0.3s var(--fl-ease),
    transform 0.3s var(--fl-ease) !important;
  overflow: hidden;
}
.fl-root .productsItemBox::after {
  display: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .fl-root .productsItemBox:hover {
    box-shadow: var(--fl-shadow-md) !important;
    transform: translateY(-2px);
  }
}
.fl-root .productsItemBox-closed {
  border: 0 !important;
  border-radius: var(--fl-r-md) !important;
  background-color: var(--fl-cream) !important;
  padding: var(--fl-s-3) !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Product title + price typography */
.fl-root .productsItemBox h3,
.fl-root .productsItemBox h4,
.fl-root .productsItemBox .itemTitle {
  font-family: var(--fl-font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fl-ink);
}
/* Note: `.prdPrice` text is used as the label for inline-styled buttons
   (BtnCSS sets its own white color). Don't !important the color here, or
   it overrides the inline white and the button text disappears. We just
   tighten typography and let the inline colour win when applicable. */
.fl-root .prdPrice {
  font-family: var(--fl-font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Search bar lift inside the products section */
.fl-root .search input[type="text"],
.fl-root #products_search,
.fl-root .searchBar input {
  border-radius: var(--fl-r-pill);
  border: 1.5px solid var(--fl-line);
  padding: 0.7rem 1.1rem;
  font-family: var(--fl-font-body);
}
.fl-root .search input[type="text"]:focus,
.fl-root #products_search:focus,
.fl-root .searchBar input:focus {
  border-color: var(--fl-brand);
  box-shadow: 0 0 0 4px
    color-mix(in srgb, var(--fl-brand) 18%, transparent);
  outline: none;
}

/* ── Top promo bar (above the header) ────────────────────────────────── */
/* Note: this is intentionally NOT sticky. The navbar uses Headroom.js to
   slide back into view on scroll-up; if we stick the promo bar, it'll
   occlude the navbar when it returns. Promo bar scrolls away with content. */
.fl-promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-s-2);
  padding: 0.55rem var(--fl-s-4);
  background: var(--fl-brand, #e8943a);
  color: var(--fl-brand-ink, #fff);
  font-family: var(--fl-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 5;
}
.fl-promo-bar__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
}
.fl-promo-bar__label {
  opacity: 0.85;
}
.fl-promo-bar__store {
  font-weight: 700;
}
.fl-promo-bar__change {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
  padding: 0.18rem 0.6rem 0.18rem 0.75rem;
  background: rgba(255, 255, 255, 0.18);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-family: var(--fl-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s var(--fl-ease), border-color 0.18s var(--fl-ease), transform 0.18s var(--fl-ease);
}
.fl-promo-bar__change:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
  color: #fff !important;
}
.fl-promo-bar__change:active {
  transform: translateY(0);
}

/* Book Now CTA removed per design feedback. The legacy .fl-book-now and
   the header padding-right rule that gave it room are no longer needed. */

/* ── Navigation refinement ───────────────────────────────────────────── */
/* Ensure the Headroom-wrapped navbar sits above other content when it
   slides back into view on scroll-up. */
header .headroom,
header .headroom--pinned,
.headroom {
  z-index: 100 !important;
}
header .headroom--pinned {
  /* Lift back into view on scroll-up with a subtle shadow */
  box-shadow: 0 4px 16px rgba(15, 12, 8, 0.08);
}
.fl-root .custom-navbar .nav,
.fl-root .custom-navbar .nav-item,
.fl-root .custom-navbar a {
  text-shadow: none !important;
}
.fl-root .custom-navbar .nav-link,
.fl-root .custom-navbar a {
  font-family: var(--fl-font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 0.93rem;
  color: var(--fl-ink);
  transition: color 0.18s var(--fl-ease);
  position: relative;
}
.fl-root .custom-navbar .nav-link:hover,
.fl-root .custom-navbar a:hover {
  color: var(--fl-brand);
}
/* Subtle brand underline grow on hover for nav items */
.fl-root .custom-navbar .nav-link::after,
.fl-root .custom-navbar .nav > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--fl-brand);
  border-radius: 1px;
  transition: width 0.25s var(--fl-ease), left 0.25s var(--fl-ease);
}
@media (hover: hover) and (pointer: fine) {
  .fl-root .custom-navbar .nav-link:hover::after,
  .fl-root .custom-navbar .nav > a:hover::after {
    width: 22px;
    left: calc(50% - 11px);
  }
}

/* ── Cart drawer / pop-out refinement ────────────────────────────────── */
.fl-root .cart_container,
.fl-root .cart-content,
.fl-root .cart-popout,
.fl-root .cart-drawer {
  font-family: var(--fl-font-body);
}
.fl-root .cart_container .cartItem,
.fl-root .cart-drawer .cartItem,
.fl-root .cart-item {
  border-radius: var(--fl-r-md);
  border-bottom: 1px solid var(--fl-line);
  padding: var(--fl-s-3) 0;
}
.fl-root .cart_container .cartItem:last-child,
.fl-root .cart-drawer .cartItem:last-child,
.fl-root .cart-item:last-child {
  border-bottom: 0;
}
.fl-root .cart-total,
.fl-root .cart_total,
.fl-root .cart-subtotal {
  font-family: var(--fl-font-display-brand);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ── HeroImage refinement (collage / slide hero) ─────────────────────── */
.fl-root #hero-section,
.fl-root .hero-section {
  position: relative;
}
.fl-root #hero-section img,
.fl-root .hero-section img {
  transition: transform 8s var(--fl-ease);
}
/* Subtle Ken-Burns on hero image when present */
.fl-root #hero-section .slick-active img,
.fl-root .hero-section .slick-active img {
  transform: scale(1.03);
}

/* Editorial overlay floating over the home hero slider. The slider is the
   visual; this is the editorial composition that gives the page a clear
   POV before products. Pointer-events: none on the wrapper so the slider
   remains tappable; restored on the CTA. */
.fl-hero-section {
  position: relative;
  /* 3/4-viewport hero per Sean's spec — image only, no text overlay. */
  min-height: 75vh !important;
  height: 75vh !important;
  max-height: 75vh !important;
  background: var(--fl-cream); /* shows behind a short image */
  overflow: hidden !important;
}
/* Hide the editorial overlay (Welcome to / Title / Tagline / View Menu)
   on the home hero — the visual is the image alone now. */
.fl-hero-overlay {
  display: none !important;
}
/* Make the slider fill the section. Parent uses height:auto + min-height
   so children's height:100% computes against `auto` (= can't resolve →
   collapses to content's intrinsic height = 1px once slick lays them out).
   We pin the outer slider absolutely to the section's rendered box. */
.fl-root .fl-hero-section .hero-slider,
.fl-root .fl-hero-section > .slick-slider {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fl-root .fl-hero-section .slick-list,
.fl-root .fl-hero-section .slick-track {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fl-root .fl-hero-section .slick-slide,
.fl-root .fl-hero-section .slick-slide > div,
.fl-root .fl-hero-section .slick-slide > div > div,
.fl-root .fl-hero-section .slick-slide > div > div > div,
.fl-root .fl-hero-section .slick-slide > div > div > div > a,
.fl-root .fl-hero-section .slick-slide a {
  height: 100% !important;
  display: block !important;
}
/* The image inside each slide is a <div> with backgroundImage; force it to
   absolutely fill its slide. */
.fl-root .fl-hero-section .full-image,
.fl-root .fl-hero-section .half-image,
.fl-root .fl-hero-section .video-fullscreen,
.fl-root .fl-hero-section .video-halfscreen {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  display: block !important;
}
/* Video / iframe slides fill the section */
.fl-hero-section video,
.fl-hero-section iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.fl-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fl-s-5);
  pointer-events: none;
  /* Soft scrim that gradients out toward the bottom of the hero so the
     product photography below still feels connected. */
  background: linear-gradient(
    180deg,
    rgba(15, 12, 8, 0.0) 0%,
    rgba(15, 12, 8, 0.22) 35%,
    rgba(15, 12, 8, 0.45) 100%
  );
}
.fl-hero-overlay__inner {
  text-align: center;
  max-width: 720px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.fl-hero-overlay__eyebrow {
  font-family: var(--fl-font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--fl-s-3);
}
.fl-hero-overlay__title {
  font-family: var(--fl-font-display-brand);
  font-weight: 700;
  font-size: clamp(2.6rem, 7.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 var(--fl-s-4);
}
.fl-hero-overlay__tagline {
  font-family: var(--fl-font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 auto var(--fl-s-6);
  max-width: 38ch;
}
.fl-hero-overlay__cta-row {
  display: inline-flex;
  gap: var(--fl-s-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.fl-hero-overlay__cta-row > * {
  pointer-events: auto;
}
@media (max-width: 640px) {
  .fl-hero-overlay {
    /* Push content lower on mobile so the centered image still reads */
    align-items: flex-end;
    padding-bottom: var(--fl-s-7);
  }
  .fl-hero-overlay__tagline {
    display: none; /* hide tagline on very small screens to reduce noise */
  }
}

/* Floating phone / filter buttons — refine for modern look */
.fl-root .phone-button,
.fl-root .floating-phone,
.fl-root .filter-button-fab {
  box-shadow: var(--fl-shadow-md);
  transition: transform 0.2s var(--fl-ease),
    box-shadow 0.2s var(--fl-ease);
}
.fl-root .phone-button:hover,
.fl-root .floating-phone:hover,
.fl-root .filter-button-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--fl-shadow-brand);
}

/* CallMe (Phone) FAB — keep the visual but refine it.
   The legacy .callMeButton sits at 0.4 opacity which makes the brand-orange
   button feel hesitant. Restore full presence with a soft brand shadow,
   rounder corners, and a hover lift. The pulsing :is-animating ring is kept
   for affordance. */
.fl-root .callMeButton {
  opacity: 1 !important;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--fl-brand) 32%, transparent))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
  transition: transform 0.2s var(--fl-ease);
}
.fl-root .callMeButton:hover {
  transform: translateY(-2px) scale(1.03);
}
.fl-root .callMeButton .Phone {
  border-radius: 18px !important; /* a touch rounder than the legacy 0.5em */
  box-shadow: none !important; /* shadow now lives on the parent for crisper transition */
}

/* Product card image zoom on hover + rounded corners. The image lives
   inside a Slider, so we target the slick container and all its inner
   wrappers so the rounded mask is applied at the outermost layer. */
.fl-root .productsItemBox .slick-slider,
.fl-root .productsItemBox .slick-list,
.fl-root .productsItemBox .slick-track,
.fl-root .productsItemBox .slick-slide,
.fl-root .productsItemBox .slick-slide img,
.fl-root .productsItemBox .slick-slide [style*="background-image"],
.fl-root .productsItemBox .slick-slide [style*="backgroundImage"] {
  overflow: hidden;
  border-radius: 18px !important;
}
.fl-root .productsItemBox .slick-slide > div {
  border-radius: 18px;
  overflow: hidden;
}
.fl-root .productsItemBox .slick-slide img,
.fl-root .productsItemBox [style*="backgroundImage"] {
  transition: transform 0.7s var(--fl-ease);
}
@media (hover: hover) and (pointer: fine) {
  .fl-root .productsItemBox:hover .slick-slide img,
  .fl-root .productsItemBox:hover [style*="backgroundImage"] {
    transform: scale(1.05);
  }
}

/* Product detail page — main hero image carousel + thumbnails get the same
   rounded treatment. ProductDetails renders a Slider with col-lg-6 alongside
   the description column. */
.fl-root .col-lg-6 .slick-slider,
.fl-root .col-lg-6 .slick-list,
.fl-root .col-lg-6 .slick-track,
.fl-root .col-lg-6 .slick-slide,
.fl-root .col-lg-6 .slick-slide > div,
.fl-root .col-lg-6 .slick-slide img,
.fl-root .col-lg-6 .slick-slide [style*="backgroundImage"],
.fl-root .col-lg-6 .slick-slide [style*="background-image"] {
  border-radius: 36px !important;
  overflow: hidden !important;
}
/* Direct images on detail page (hero, thumb strip) */
.fl-root .col-lg-6 img,
.fl-root .col-lg-6 [style*="background-image"],
.fl-root .col-lg-6 [style*="backgroundImage"] {
  border-radius: 36px !important;
  overflow: hidden !important;
}
/* HeroImage (single product banner if present) */
.fl-root [class*="HeroImage"] img,
.fl-root .hero-image img,
.fl-root .product-hero img {
  border-radius: 28px;
}
/* Give the detail-page image column a little inset so the rounded
   corners are visible against the page background (avoids the image
   sitting flush at viewport x=0). */
.fl-root .col-lg-6:has(> .slick-slider),
.fl-root .col-lg-6:has(> div > .slick-slider) {
  padding: 0 var(--fl-s-4) !important;
}

/* ── Locations section refinement ────────────────────────────────────── */
.fl-root #locations {
  background: var(--fl-cream);
  padding: var(--fl-s-8) var(--fl-s-4);
}
@media (min-width: 768px) {
  .fl-root #locations {
    padding: var(--fl-s-9) var(--fl-s-5);
  }
}
/* Heading gets an eyebrow above it via CSS-only ::before */
.fl-root #locations .border_heading {
  position: relative;
  display: inline-block;
  margin-top: var(--fl-s-3);
}
.fl-root #locations .border_heading::before,
.fl-root #locations .border_heading::after {
  display: none !important;
}
/* Lift each location card into a refined fl-card */
.fl-root #locations .row > .col-xs-12,
.fl-root #locations .row > [class*="col-"]:not(.col-sm-12):not(.col-md-12):not(.col-lg-12):not(.col-sm-3):not(.col-sm-6):not(.col-sm-9) {
  padding: var(--fl-s-3);
}
/* The image slider container becomes a rounded card top */
.fl-root #locations .slick-slider {
  border-radius: var(--fl-r-lg) var(--fl-r-lg) 0 0;
  overflow: hidden;
  box-shadow: var(--fl-shadow-sm);
}
.fl-root #locations .grayscale {
  border-radius: 0 !important;
}
/* Locations info block under the slider */
.fl-root #locations .info-container,
.fl-root #locations .price-bucket {
  border-radius: 0 0 var(--fl-r-lg) var(--fl-r-lg);
  background: var(--fl-paper);
  box-shadow: var(--fl-shadow-sm);
  padding: var(--fl-s-4) !important;
}
.fl-root #locations h2,
.fl-root #locations h3,
.fl-root #locations h4,
.fl-root #locations h5 {
  font-family: var(--fl-font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fl-ink);
}
.fl-root #locations p,
.fl-root #locations span,
.fl-root #locations div {
  font-family: var(--fl-font-body);
}
/* Hours table refinement */
.fl-root #locations .row > .col-sm-6,
.fl-root #locations .row > .col-sm-3 {
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCTS SECTION — Nuxt-style refinement
   ════════════════════════════════════════════════════════════════════ */

/* ── Search bar (react-tagsinput) → large pill with icon ─────────────── */
.fl-root .react-tagsinput {
  border: 1.5px solid var(--fl-line) !important;
  border-radius: var(--fl-r-pill) !important;
  background: var(--fl-paper) !important;
  padding: 0.7rem 1.25rem 0.7rem 2.75rem !important;
  font-family: var(--fl-font-body) !important;
  transition: border-color 0.18s, box-shadow 0.18s;
  position: relative;
  box-shadow: var(--fl-shadow-sm);
}
.fl-root .react-tagsinput::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.fl-root .react-tagsinput--focused {
  border-color: var(--fl-brand) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-brand) 18%, transparent),
              var(--fl-shadow-sm) !important;
}
.fl-root .react-tagsinput-input {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font-family: var(--fl-font-body) !important;
  font-size: 0.95rem !important;
  color: var(--fl-ink) !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.fl-root .react-tagsinput-tag {
  background: var(--fl-brand-soft) !important;
  border: 1px solid color-mix(in srgb, var(--fl-brand) 30%, transparent) !important;
  border-radius: var(--fl-r-pill) !important;
  color: color-mix(in srgb, var(--fl-brand) 80%, #000) !important;
  font-family: var(--fl-font-body) !important;
  padding: 0.2rem 0.7rem !important;
  margin: 0.15rem 0.3rem 0.15rem 0 !important;
  font-size: 0.85rem !important;
}

/* ── Filter pills (Reactstrap Nav with NavLinks) ─────────────────────── */
.fl-root #products_section .nav,
.fl-root #categories .nav,
.fl-root section nav.nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--fl-s-2);
  padding: var(--fl-s-3) 0 var(--fl-s-2);
  margin: 0 calc(var(--fl-s-4) * -1);
  padding-left: var(--fl-s-4);
  padding-right: var(--fl-s-4);
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--fl-line);
}
.fl-root #products_section .nav::-webkit-scrollbar,
.fl-root #categories .nav::-webkit-scrollbar,
.fl-root section nav.nav::-webkit-scrollbar {
  display: none;
}
.fl-root .nav .nav-item {
  flex: 0 0 auto;
  list-style: none;
}
.fl-root .nav .nav-link {
  font-family: var(--fl-font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fl-ink-2) !important;
  padding: 0.55rem 1.15rem !important;
  border-radius: var(--fl-r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--fl-ease),
    color 0.2s var(--fl-ease),
    border-color 0.2s var(--fl-ease);
  white-space: nowrap;
}
.fl-root .nav .nav-link:hover {
  background: var(--fl-brand-soft);
  color: var(--fl-ink) !important;
}
.fl-root .nav .nav-link.active,
.fl-root .nav .nav-item.active .nav-link {
  background: var(--fl-ink) !important;
  color: #fff !important;
  border-color: var(--fl-ink);
}

/* ── Product cards — clean up, refined pill CTA ──────────────────────── */
/* Hide the small heart + search icons that clutter the bottom of each
   card. Affordance is still available via the product detail page. */
.fl-root .productsItemBox img[src*="heart-light.svg"],
.fl-root .productsItemBox img[src*="heart-solid.svg"],
.fl-root .productsItemBox img[src*="search-light.svg"] {
  opacity: 0;
  pointer-events: none;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
/* Tighten card padding + spacing now that we removed icons */
.fl-root .productsItemBox {
  min-height: auto !important;
  padding: var(--fl-s-3) !important;
  display: flex !important;
  flex-direction: column;
}
/* Description: allow up to 2 lines instead of fixed 40px-height clip */
.fl-root .productsItemBox > div > div[style*="height: 40px"],
.fl-root .productsItemBox > div > div[style*="height:40px"] {
  height: auto !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--fl-s-3);
  color: var(--fl-ink-3) !important;
  font-size: 0.85rem !important;
  line-height: 1.5;
}
/* Refine the add-to-cart pill — keep its current shape but make it less
   wide so it feels like a confident accent at the bottom of the card,
   not a banner. The "from X vnd" reads as the price affordance. */
.fl-root .productsItemBox button.btn {
  width: auto !important;
  max-width: 100% !important;
  min-width: 130px;
  margin: var(--fl-s-3) auto 0 !important;
  padding: 0.7rem 1.25rem !important;
  border-radius: var(--fl-r-pill) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--fl-s-2);
  transition: transform 0.18s var(--fl-ease),
    box-shadow 0.18s var(--fl-ease) !important;
  border: 0 !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fl-brand) 32%, transparent) !important;
}
.fl-root .productsItemBox button.btn::before {
  content: "+";
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  margin-right: 0.1rem;
  opacity: 0.92;
}
@media (hover: hover) and (pointer: fine) {
  .fl-root .productsItemBox button.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--fl-brand) 40%, transparent) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TOP NAV — sticky, refined, active state
   ════════════════════════════════════════════════════════════════════ */
.fl-root .custom-navbar,
.fl-root header > div {
  /* The InlineCss in NavBar sets some inline styles — these refine on top */
  transition: padding 0.25s var(--fl-ease),
    box-shadow 0.25s var(--fl-ease),
    background-color 0.25s var(--fl-ease);
}
.fl-root header .custom-navbar .navbar-brand img,
.fl-root header img[alt*="Brothers"],
.fl-root header img[alt*="Ngon"],
.fl-root header img[alt*="Bagel"] {
  transition: transform 0.25s var(--fl-ease);
}
@media (hover: hover) and (pointer: fine) {
  .fl-root header .custom-navbar .navbar-brand:hover img {
    transform: scale(1.05);
  }
}
/* Cart icon — refined hover affordance */
.fl-root header a[href*="/cart"],
.fl-root header .cart-icon,
.fl-root header [class*="cart"] svg {
  transition: transform 0.18s var(--fl-ease);
}
@media (hover: hover) and (pointer: fine) {
  .fl-root header a[href*="/cart"]:hover {
    transform: translateY(-1px);
  }
}

/* ════════════════════════════════════════════════════════════════════
   BREADCRUMBS — refined typography + brand chevron
   ════════════════════════════════════════════════════════════════════ */
.fl-root .fl-breadcrumb {
  font-family: var(--fl-font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--fl-ink-3) !important;
  margin: var(--fl-s-5) 0 var(--fl-s-2) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: var(--fl-s-2);
  flex-wrap: wrap;
}
.fl-root .fl-breadcrumb a {
  color: var(--fl-ink-3) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.18s;
  font-weight: 500;
}
.fl-root .fl-breadcrumb a:hover {
  color: var(--fl-brand) !important;
}
/* Hide the chevron <img> (CSS pseudo-elements don't work on replaced
   elements) and inject a clean text chevron before each non-first anchor. */
.fl-root .fl-breadcrumb img {
  display: none !important;
}
.fl-root .fl-breadcrumb a:not(:first-of-type)::before {
  content: "\203A";
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--fl-brand) 70%, #000);
  margin-right: 0.5rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ════════════════════════════════════════════════════════════════════
   CART DRAWER (Cart.js mini-cart) — Nuxt-style refinement
   ════════════════════════════════════════════════════════════════════ */
/* The cart uses an absolutely-positioned div with class `mini-cart`.
   Lift it into a refined drawer: header bar, clean rows, big checkout. */
.fl-root .mini-cart {
  border: 0 !important;
  border-radius: var(--fl-r-lg) !important;
  box-shadow: 0 20px 60px rgba(15, 12, 8, 0.18),
              0 4px 14px rgba(15, 12, 8, 0.08) !important;
  font-family: var(--fl-font-body) !important;
  background: var(--fl-paper) !important;
  color: var(--fl-ink) !important;
  font-size: 0.92rem !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Mini-cart table refinement */
.fl-root .mini-cart table,
.fl-root .mini-cart .table {
  border: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.fl-root .mini-cart thead {
  background: var(--fl-cream);
}
.fl-root .mini-cart thead th {
  font-family: var(--fl-font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fl-ink-3) !important;
  padding: var(--fl-s-3) var(--fl-s-3) !important;
  border: 0 !important;
}
.fl-root .mini-cart tbody td {
  vertical-align: middle !important;
  border: 0 !important;
  border-top: 1px solid var(--fl-line) !important;
  padding: var(--fl-s-3) !important;
  font-family: var(--fl-font-body) !important;
}
.fl-root .mini-cart tbody tr:first-child td {
  border-top: 0 !important;
}
/* Store header row in the cart (logo + name + min not reached) */
.fl-root .mini-cart h4 {
  font-family: var(--fl-font-display-brand) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.005em;
  margin: var(--fl-s-4) var(--fl-s-4) var(--fl-s-2) !important;
  color: var(--fl-ink) !important;
}
/* Discount / Subtotal / Total rows */
.fl-root .mini-cart .text-right {
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}
/* Total row stands out */
.fl-root .mini-cart tfoot th,
.fl-root .mini-cart tr:last-child th {
  background: var(--fl-cream);
  font-family: var(--fl-font-display-brand) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--fl-ink) !important;
}
/* Close (×) icon — refine to a circle hit target */
.fl-root .mini-cart i.times {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fl-cream);
  font-style: normal;
  font-size: 18px;
  color: var(--fl-ink-2) !important;
  transition: background 0.18s, transform 0.18s;
  cursor: pointer;
  left: 0 !important;
}
.fl-root .mini-cart i.times::before {
  content: "\D7";
}
.fl-root .mini-cart i.times:hover {
  background: color-mix(in srgb, var(--fl-brand) 18%, var(--fl-cream));
  transform: rotate(90deg);
}
/* The product-option rows — make the title bold and clear */
.fl-root .mini-cart .product-options strong,
.fl-root .mini-cart .product-options b {
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  color: var(--fl-ink) !important;
}
/* "REMOVE" link refinement */
.fl-root .mini-cart a[onclick*="remove"],
.fl-root .mini-cart [class*="remove"],
.fl-root .mini-cart [class*="Remove"] {
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fl-ink-3) !important;
  transition: color 0.18s;
}
.fl-root .mini-cart a[onclick*="remove"]:hover {
  color: var(--fl-brand) !important;
}
/* Checkout button — big, confident, brand-orange, sticky-feeling */
.fl-root .mini-cart button[onclick*="checkout"],
.fl-root .mini-cart a[href*="checkout"] button,
.fl-root .mini-cart .btn-primary,
.fl-root .mini-cart button[class*="checkout"] {
  width: calc(100% - 2 * var(--fl-s-4)) !important;
  margin: var(--fl-s-3) var(--fl-s-4) var(--fl-s-4) !important;
  padding: 1rem 1.5rem !important;
  border-radius: var(--fl-r-pill) !important;
  background: var(--fl-brand) !important;
  color: #fff !important;
  border: 0 !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fl-brand) 35%, transparent) !important;
  transition: transform 0.18s var(--fl-ease),
    box-shadow 0.18s var(--fl-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
  .fl-root .mini-cart button[onclick*="checkout"]:hover,
  .fl-root .mini-cart .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--fl-brand) 45%, transparent) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FINAL POLISH PASS — Closer to the Nuxt menu look
   ════════════════════════════════════════════════════════════════════ */

/* ── Section header pattern: title + count + thin rule ───────────────── */
.fl-root .fl-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--fl-s-3);
  padding: 0 0 var(--fl-s-3);
  margin: 0 0 var(--fl-s-4);
  border-bottom: 1px solid var(--fl-line);
}
.fl-root .fl-section-title {
  font-family: var(--fl-font-display-brand) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important;
  color: var(--fl-ink) !important;
  margin: 0 !important;
  display: inline-block !important;
}
/* Hide the legacy border_heading flanking lines inside the header */
.fl-root .fl-section-header .fl-section-title::before,
.fl-root .fl-section-header .fl-section-title::after {
  display: none !important;
}
.fl-root .fl-section-count {
  font-family: var(--fl-font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--fl-ink-3);
  white-space: nowrap;
}

/* ── Product card refresh: white background, confident dark CTA ──────── */
/* Lose the cream/orange image background — let product photography sit on
   the card's white surface like the Nuxt cards. */
.fl-root .productsItemBox {
  background: var(--fl-paper) !important;
  position: relative;
}
.fl-root .productsItemBox .slick-slider,
.fl-root .productsItemBox .slick-list,
.fl-root .productsItemBox .slick-slide,
.fl-root .productsItemBox .slick-slide > div {
  background: transparent !important;
}
/* CTA pill — dark Nuxt-style, white "+" prefix, brand-orange price.
   The prdPrice span (= "from 155,000 vnd") is the button's child; we tint
   it to brand orange via the descendant rule below. */
.fl-root .productsItemBox button.btn {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  margin: var(--fl-s-3) auto 0 !important;
  padding: 0.65rem 1.25rem 0.65rem 1.05rem !important;
  border-radius: var(--fl-r-pill) !important;
  background: var(--fl-ink) !important;
  color: #fff !important;
  font-family: var(--fl-font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: transform 0.18s var(--fl-ease),
    box-shadow 0.18s var(--fl-ease),
    background-color 0.18s var(--fl-ease) !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(15, 12, 8, 0.18) !important;
}
.fl-root .productsItemBox button.btn::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fl-brand);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
.fl-root .productsItemBox button.btn .prdPrice,
.fl-root .productsItemBox button.btn .prdPrice span {
  color: var(--fl-brand) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem !important;
}
@media (hover: hover) and (pointer: fine) {
  .fl-root .productsItemBox button.btn:hover {
    background: color-mix(in srgb, var(--fl-ink) 88%, var(--fl-brand)) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(15, 12, 8, 0.25) !important;
  }
}

/* ── Filter pills polish ─────────────────────────────────────────────── */
.fl-root .nav .nav-link {
  padding: 0.6rem 1.25rem !important;
  font-size: 0.92rem !important;
  border: 1.5px solid color-mix(in srgb, var(--fl-ink) 12%, transparent);
  background: var(--fl-paper);
}
.fl-root .nav .nav-link:hover {
  border-color: color-mix(in srgb, var(--fl-brand) 50%, transparent);
  background: var(--fl-brand-soft);
}
.fl-root .nav .nav-link.active,
.fl-root .nav .nav-item.active .nav-link {
  background: var(--fl-ink) !important;
  border-color: var(--fl-ink);
  color: #fff !important;
}

/* ── Product detail: Required pill + refined radio options ───────────── */
.fl-root .fl-customization {
  margin: var(--fl-s-6) 0;
}
.fl-root .fl-customization__title {
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.005em !important;
  color: var(--fl-ink) !important;
  margin: 0 0 var(--fl-s-3) !important;
  display: flex !important;
  align-items: center;
  gap: var(--fl-s-3);
  flex-wrap: wrap;
}
.fl-root .fl-required-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  background: var(--fl-brand-soft);
  color: color-mix(in srgb, var(--fl-brand) 85%, #000);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--fl-r-pill);
  border: 1px solid color-mix(in srgb, var(--fl-brand) 22%, transparent);
}

/* Full-width bordered pill for each radio option. Uses :checked + sibling
   to style label/price; the radio input itself is display:none in the JSX. */
.fl-root .fl-radio-option {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-s-3);
  padding: 0.85rem 1.1rem 0.85rem 2.6rem;
  margin: var(--fl-s-2) 0;
  border: 1.5px solid var(--fl-line);
  border-radius: var(--fl-r-md);
  background: var(--fl-paper);
  cursor: pointer;
  transition: border-color 0.18s var(--fl-ease),
    background-color 0.18s var(--fl-ease),
    box-shadow 0.18s var(--fl-ease);
}
/* Hand-drawn radio dot at left */
.fl-root .fl-radio-option::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fl-ink) 22%, transparent);
  background: var(--fl-paper);
  transition: border-color 0.18s, background-color 0.18s;
  box-sizing: border-box;
}
.fl-root .fl-radio-option--check::before {
  border-radius: 4px;
}
/* Selected state: when input[type=radio]:checked or input[type=checkbox]:checked
   is a child, style the parent via :has() (supported in modern browsers). */
.fl-root .fl-radio-option:has(input:checked) {
  border-color: var(--fl-brand);
  background: color-mix(in srgb, var(--fl-brand) 6%, var(--fl-paper));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-brand) 12%, transparent);
}
.fl-root .fl-radio-option:has(input:checked)::before {
  border-color: var(--fl-brand);
  background: var(--fl-brand);
  /* Inner check dot via inset shadow */
  box-shadow: inset 0 0 0 3px var(--fl-paper),
              inset 0 0 0 9px var(--fl-brand);
}
.fl-root .fl-radio-option--check:has(input:checked)::before {
  background: var(--fl-brand);
  box-shadow: none;
}
.fl-root .fl-radio-option:hover {
  border-color: color-mix(in srgb, var(--fl-brand) 40%, var(--fl-line));
}
/* Label inside option: clean Inter, takes the available space */
.fl-root .fl-radio-option .optionLabel {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  top: 0 !important;
  font-family: var(--fl-font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--fl-ink) !important;
  flex: 1;
  cursor: pointer;
}
.fl-root .fl-radio-option:has(input:checked) .optionLabel {
  font-weight: 600 !important;
  color: var(--fl-ink) !important;
}
.fl-root .fl-radio-option .optionPrice {
  float: none !important;
  font-family: var(--fl-font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--fl-ink-3) !important;
}
.fl-root .fl-radio-option:has(input:checked) .optionPrice {
  color: var(--fl-brand) !important;
  font-weight: 600 !important;
}

/* ── Cart row: qty stepper visual + trash icon for "×" close ─────────── */
.fl-root .mini-cart select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--fl-cream) !important;
  border: 1px solid var(--fl-line) !important;
  border-radius: var(--fl-r-pill) !important;
  width: 56px !important;
  height: 36px !important;
  padding: 0 0.5rem !important;
  text-align: center;
  text-align-last: center;
  font-family: var(--fl-font-body) !important;
  font-weight: 600 !important;
  color: var(--fl-ink) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  cursor: pointer;
}
.fl-root .mini-cart select:focus {
  outline: none;
  border-color: var(--fl-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-brand) 18%, transparent);
}

/* Remove (×) icon — turn into a trash glyph via Unicode */
.fl-root .mini-cart tbody td > a > i.times {
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 8px;
  color: var(--fl-ink-3) !important;
  font-size: 0;
  position: relative;
  left: 0 !important;
  top: 0 !important;
  transition: background 0.18s, color 0.18s;
}
.fl-root .mini-cart tbody td > a > i.times::before {
  content: "" !important;
  position: absolute;
  inset: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.fl-root .mini-cart tbody td > a > i.times:hover {
  background: color-mix(in srgb, var(--fl-brand) 12%, transparent);
}
.fl-root .mini-cart tbody td > a > i.times: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='%23e8943a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
}

/* Add a subtle "Order via..." hint below the checkout button via ::after.
   Targets the Checkout row in the cart. */
.fl-root .mini-cart .text-right + td:last-child::after,
.fl-root .mini-cart tr:has(> th:contains('TOTAL'))::after {
  /* unsupported in many browsers — skip; we use a dedicated CSS hook below */
}

/* ── Checkout — final polish ─────────────────────────────────────────── */
.fl-root .checkout-experience-root {
  /* Already updated in earlier pass; verify rounded inputs + brand focus */
}
.fl-root .checkout-experience-root input[type="text"],
.fl-root .checkout-experience-root input[type="email"],
.fl-root .checkout-experience-root input[type="tel"],
.fl-root .checkout-experience-root input[type="number"],
.fl-root .checkout-experience-root textarea,
.fl-root .checkout-experience-root select {
  border-radius: var(--fl-r-md) !important;
  padding: 0.85rem 1rem !important;
  font-family: var(--fl-font-body) !important;
  font-size: 0.95rem !important;
  border: 1.5px solid var(--fl-line) !important;
  background: var(--fl-paper) !important;
  transition: border-color 0.18s, box-shadow 0.18s;
}
/* Small inline-styled qty <select> elements (width <= 50px from JSX) get
   crushed by the global padding. Reset padding for them so the number
   stays visible. */
.fl-root .checkout-experience-root select[style*="width:30"],
.fl-root .checkout-experience-root select[style*="width: 30"],
.fl-root .checkout-experience-root select[style*="width:50"],
.fl-root .checkout-experience-root select[style*="width: 50"],
.fl-root .checkout-summary-panel select,
.fl-root .checkout-summary-col select {
  padding: 0 6px !important;
  min-width: 48px !important;
  width: 48px !important;
  height: 36px !important;
  border-radius: var(--fl-r-pill) !important;
  background: var(--fl-cream) !important;
  border: 1.5px solid var(--fl-line) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--fl-ink) !important;
  text-align: center;
  text-align-last: center;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
}
.fl-root .checkout-experience-root input:focus,
.fl-root .checkout-experience-root textarea:focus,
.fl-root .checkout-experience-root select:focus {
  outline: none !important;
  border-color: var(--fl-brand) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-brand) 16%, transparent) !important;
}
/* Checkout primary CTA — confident brand-orange pill */
.fl-root .checkout-experience-root .btn-primary,
.fl-root .checkout-experience-root button[type="submit"] {
  background: var(--fl-brand) !important;
  border: 0 !important;
  border-radius: var(--fl-r-pill) !important;
  padding: 1rem 1.5rem !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #fff !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fl-brand) 35%, transparent) !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}
@media (hover: hover) and (pointer: fine) {
  .fl-root .checkout-experience-root .btn-primary:hover,
  .fl-root .checkout-experience-root button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--fl-brand) 45%, transparent) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PASS-6 corrections — match Nuxt reference set more closely
   ════════════════════════════════════════════════════════════════════ */

/* 1) Remove the funnel filter icon (used for marketplace mode; not needed
      inside an individual store experience). */
.fl-root a:has(img[src*="filter-light"]) {
  display: none !important;
}

/* 2) Fix the radio-option text overlap from the previous pass.
      Bumping the left padding so the circle + text never collide. The
      .optionLabel margin from InlineCss in ProductDetails (margin:10px)
      was contributing to misalignment — reset hard. */
.fl-root .fl-radio-option {
  padding: 0.9rem 1.1rem 0.9rem 3.1rem !important;
  align-items: center !important;
}
.fl-root .fl-radio-option::before {
  left: 1.1rem !important;
  width: 20px !important;
  height: 20px !important;
}
.fl-root .fl-radio-option .optionLabel {
  margin: 0 0 0 0 !important;
  padding-left: 0.25rem !important;
  display: inline-block !important;
  position: static !important;
  top: 0 !important;
}
.fl-root .fl-radio-option > input[type="radio"],
.fl-root .fl-radio-option > input[type="checkbox"] {
  position: absolute !important;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
/* Neutralise the legacy label::before / label::after circles created by the
   InlineCss `.product-options [type="radio"] + label:before/after` rules
   inside ProductDetails. They collide with our .fl-radio-option::before
   and appear as duplicate ghost circles at the top-left of each pill. */
.fl-root .fl-radio-option .optionLabel::before,
.fl-root .fl-radio-option .optionLabel::after,
.product-options .fl-radio-option [type="radio"] + label::before,
.product-options .fl-radio-option [type="radio"] + label::after,
.product-options .fl-radio-option [type="radio"]:checked + label::before,
.product-options .fl-radio-option [type="radio"]:checked + label::after,
.product-options .fl-radio-option [type="radio"]:not(:checked) + label::before,
.product-options .fl-radio-option [type="radio"]:not(:checked) + label::after,
.product-options .fl-radio-option [type="checkbox"] + label::before,
.product-options .fl-radio-option [type="checkbox"] + label::after,
.product-options .fl-radio-option [type="checkbox"]:checked + label::before,
.product-options .fl-radio-option [type="checkbox"]:checked + label::after,
.product-options .fl-radio-option [type="checkbox"]:not(:checked) + label::before,
.product-options .fl-radio-option [type="checkbox"]:not(:checked) + label::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* 3) Product card — match image 31 exactly:
      [image]
      [title (left, bold)]
      [description (left, gray, 2-line)]
      [price (brand-orange, left)        + button (black, right)]
   The price is .fl-card-price-display injected via JSX. The + button is
   the legacy <Button> with text hidden and ::before "+", positioned at
   the bottom-right of the card body inline with the price. */
.fl-root .productsItemBox {
  background: var(--fl-paper) !important;
  position: relative;
  text-align: left;
  padding: var(--fl-s-2) !important;
  min-height: auto !important;
}
.fl-root .productsItemBox > div:first-of-type,
.fl-root .productsItemBox .slick-slider {
  position: relative;
}
/* Hide the heart/search icons row entirely on cards in this layout */
.fl-root .productsItemBox a:has(> span img[src*="heart"]),
.fl-root .productsItemBox a:has(> span img[src*="search-light"]) {
  display: none !important;
}
/* Title — left-aligned, bold black */
.fl-root .productsItemBox > div > a {
  display: block !important;
  text-decoration: none !important;
  text-align: left !important;
}
.fl-root .productsItemBox > div > a > div {
  text-align: left !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--fl-ink) !important;
  margin: var(--fl-s-3) 0 0 !important;
  padding: 0 var(--fl-s-2);
  height: auto !important;
  line-height: 1.3;
  white-space: normal !important;
  overflow: visible !important;
}
/* Types row (the small "American, Cafe, Desserts" categories) — hide
   entirely in the new layout (image 57 doesn't show them).  The legacy
   div is rendered 3-deep: productsItemBox > div > div > div, with
   inline style font-weight:400 + height:20px + <a><span> children.
   Use descendant combinator (not child) so depth doesn't matter. */
.fl-root .productsItemBox div[style*="font-weight: 400"][style*="height: 20px"],
.fl-root .productsItemBox div[style*="height: 20px"]:has(> a > span[style*="color: rgb(153"]),
.fl-root .productsItemBox div:has(> a > span[style*="color: rgb(153"]),
.fl-root .productsItemBox div:has(> a > span[style*="font-size: 10px"]) {
  display: none !important;
}
/* Description — left, gray, 2-line clamp */
.fl-root .productsItemBox div[style*="height: 40px"] {
  text-align: left !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis;
  height: auto !important;
  max-height: 2.7em;
  margin: var(--fl-s-2) 0 var(--fl-s-3) !important;
  color: var(--fl-ink-3) !important;
  font-size: 0.84rem !important;
  line-height: 1.4;
  padding: 0 var(--fl-s-2);
}
/* The visible price element — image 57 style: bold black price at bottom-
   left, inline with the small + button at bottom-right. No "from" prefix. */
.fl-card-price-display {
  display: inline-block;
  font-family: var(--fl-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fl-ink);
  margin: 0 !important;
  padding: 0;
  position: absolute;
  left: 0;
  bottom: 0.7rem;
  line-height: 1.2;
  padding-left: var(--fl-s-3);
  letter-spacing: -0.005em;
}
.fl-card-price-display__from {
  display: none;
}
/* The + button — BLACK rounded-square, smaller (32x32 per image 57). */
.fl-root .productsItemBox button.btn {
  position: absolute !important;
  right: var(--fl-s-3) !important;
  bottom: 0.55rem !important;
  top: auto !important;
  left: auto !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--fl-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(15, 12, 8, 0.15) !important;
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  z-index: 3;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s !important;
}
.fl-root .productsItemBox button.btn::before {
  content: "+" !important;
  font-size: 18px !important;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  display: inline-block;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.fl-root .productsItemBox button.btn .prdPrice,
.fl-root .productsItemBox button.btn .prdPrice * {
  display: none !important; /* the visible price is .fl-card-price-display */
}
/* The button's direct child <div> has min-width: 100px (legacy inline
   style for the add_cart_msg wrapper). That pushes the ::before "+" out
   of the 36px button bounds. Hide the wrapper entirely. */
.fl-root .productsItemBox button.btn > div {
  display: none !important;
}
.fl-root .productsItemBox button.btn > span {
  display: none !important;
}
.fl-root .productsItemBox button.btn:hover {
  background: color-mix(in srgb, var(--fl-ink) 85%, var(--fl-brand)) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 12, 8, 0.28) !important;
}
/* Card body needs bottom padding so price+button row doesn't overlap with
   description above. */
.fl-root .productsItemBox > div:last-child {
  padding-bottom: 3rem !important;
}
.fl-root .productsItemBoxOutside {
  padding: var(--fl-s-2) !important;
}
.fl-root .productsItemBox {
  padding-bottom: 3.5rem !important;
}

/* Products page: search bar + category chip nav — give the chip strip
   real breathing room from the search input above (image 58 fix). */
.fl-root #products div[style*="border-bottom"]:has(> ul.nav > .nav-item) {
  margin: 2rem 0 1.25rem !important;
  padding: 0.25rem 0 1.25rem !important;
  border-bottom: 1px solid var(--fl-line) !important;
}
/* Add a touch of breathing room above the search row too */
.fl-root #products .react-autosuggest__container,
.fl-root #products input[placeholder*="Seach"],
.fl-root #products input[placeholder*="Search"] {
  /* nothing structural here, but ensure the parent wrapper has spacing */
}
.fl-root #products > div > div:has(> .react-autosuggest__container),
.fl-root #products > div > div:has(> input[placeholder*="Seach"]) {
  padding: 0.75rem 0 0.25rem !important;
  margin-bottom: 0.5rem !important;
}
/* Chip nav itself — keep horizontal scrolling smooth, tidy spacing */
.fl-root #products ul.nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}
.fl-root #products ul.nav::-webkit-scrollbar { display: none; }

/* Section header: bold title + count subtitle + thin underline (image 17). */
.fl-root .fl-products-section-header {
  display: flex !important;
  align-items: baseline;
  gap: var(--fl-s-3);
  padding: 0 var(--fl-s-3) var(--fl-s-3);
  margin: var(--fl-s-5) 0 var(--fl-s-4);
  border-top: 0 !important;
  border-bottom: 1px solid var(--fl-ink) !important;
}
.fl-root .fl-products-section-header .fl-section-title {
  font-family: var(--fl-font-display-brand) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  font-size: clamp(1.85rem, 3vw, 2.5rem) !important;
  color: var(--fl-ink) !important;
  margin: 0 !important;
  line-height: 1.05;
}
.fl-root .fl-products-section-header .fl-section-count {
  font-family: var(--fl-font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fl-ink-3);
}

/* Product detail bottom action bar (matches image 19): rounded qty stepper
   on the left + big orange Add pill with cart icon on the right. */
.fl-root .fl-product-action-bar {
  position: sticky;
  bottom: 0;
  background: var(--fl-paper);
  padding: var(--fl-s-3) var(--fl-s-4) !important;
  border-top: 1px solid var(--fl-line);
  z-index: 30;
  margin: 0 !important;
}
.fl-root .fl-product-action-bar__inner {
  display: flex !important;
  align-items: center;
  gap: var(--fl-s-3);
  max-width: 720px;
  margin: 0 auto !important;
  text-align: left !important;
}
/* Quantity select → pill stepper visual */
.fl-root .fl-product-action-bar__inner > select {
  width: 72px !important;
  max-width: 72px !important;
  height: 48px !important;
  border-radius: var(--fl-r-pill) !important;
  border: 1.5px solid var(--fl-line) !important;
  background: var(--fl-cream) !important;
  text-align: center;
  text-align-last: center;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--fl-ink) !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
}
.fl-root .fl-product-action-bar__inner > select:focus {
  outline: none;
  border-color: var(--fl-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-brand) 18%, transparent);
}
/* The Add button → big rounded orange pill */
.fl-root .fl-product-action-bar__inner > .btn,
.fl-root .fl-product-action-bar__inner > button.btn {
  flex: 1 !important;
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 1.5rem !important;
  background: var(--fl-brand) !important;
  border: 0 !important;
  border-radius: var(--fl-r-pill) !important;
  color: #fff !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--fl-brand) 35%, transparent) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 !important;
  position: relative;
}
/* Replace the legacy plus-light.svg <img> with a clean cart icon. */
.fl-root .fl-product-action-bar__inner > .btn > div > img[src*="plus-light"] {
  width: 18px !important;
  height: 18px !important;
  filter: brightness(0) invert(1);
  margin-right: 0.5rem !important;
  position: static !important;
  float: none !important;
  top: 0 !important;
  display: inline-block !important;
  vertical-align: middle;
}
/* No ::before icon — the JSX already renders one via plus-light.svg img */
.fl-root .fl-product-action-bar__inner > .btn::before {
  content: none !important;
  display: none !important;
}
/* Add to Cart pill in product detail — the legacy add_cart_msg div has
   inline `min-width: 100` which crushes the layout; force flex spacing
   on the inner children so "Add 1 to Cart" and "150,000 vnd" don't run
   together with the cart icon ::before. */
.fl-root .fl-product-action-bar__inner > .btn > div {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  min-width: 0 !important;
  width: auto !important;
}
.fl-root .fl-product-action-bar__inner > .btn .prdPrice {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700 !important;
  color: #fff !important;
}
.fl-root .fl-product-action-bar__inner > .btn .prdPrice br {
  display: none !important;
}
/* The legacy ProductDetails Add button content is plain text with no
   spacing — ensure the button is a clean flex row with proper gaps. */
.fl-root .fl-product-action-bar__inner > .btn,
.fl-root .fl-product-action-bar__inner > button.btn {
  gap: 0.5rem !important;
  white-space: nowrap;
}
.fl-root .fl-product-action-bar__inner > .btn:hover {
  background: color-mix(in srgb, var(--fl-brand) 88%, #000) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--fl-brand) 45%, transparent) !important;
}
/* Hide the inner h5 that was showing total — the button label is sufficient */
.fl-root .fl-product-action-bar__inner .btn h5 {
  font-size: 1rem !important;
  margin: 0 !important;
  font-weight: 700;
  color: #fff !important;
  display: inline;
}

/* 6) Top nav — match the Nuxt reference (image 23): UPPERCASE, spacing,
      no Book Now. Nav items are inside the navbar's right-side nav. */
header .custom-navbar .ml-auto.nav a,
header .custom-navbar .nav-link,
header .custom-navbar .nav .nav-link,
header .custom-navbar .nav > a {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  font-family: var(--fl-font-body) !important;
  color: var(--fl-ink) !important;
  padding: 0.5rem 0.75rem !important;
}
header .custom-navbar .ml-auto.nav a:hover,
header .custom-navbar .nav-link:hover {
  color: var(--fl-brand) !important;
}
/* Brand wordmark — let the logo image scale up a touch for confidence */
header .custom-navbar .navbar-brand img {
  height: auto !important;
  max-height: 56px !important;
  width: auto !important;
}

/* 7) Cart panel — restructured drawer (matches image 24) */
.fl-root .mini-cart {
  max-width: 420px !important;
  width: 420px !important;
  padding: 0 !important;
  background: var(--fl-paper) !important;
  border: 0 !important;
  border-radius: var(--fl-r-lg) !important;
  box-shadow: 0 24px 64px rgba(15, 12, 8, 0.18),
              0 6px 18px rgba(15, 12, 8, 0.08) !important;
  overflow: hidden;
}
/* Unify all typography inside the cart drawer to Inter so we don't have
   4+ different fonts (Fraunces, Inter, brand display, system, italic). */
.fl-root .mini-cart,
.fl-root .mini-cart * {
  font-family: var(--fl-font-body) !important;
}
.fl-root .mini-cart .fl-cart-header__title {
  font-family: var(--fl-font-body) !important;
}
.fl-root .mini-cart .fl-cart-notes__textarea::placeholder {
  font-style: normal !important;
}
.fl-root .mini-cart .fl-cart-footer__value {
  font-family: var(--fl-font-body) !important;
}
@media (max-width: 480px) {
  .fl-root .mini-cart {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
}

/* Header bar: icon + Your Cart + count + close */
.fl-cart-header {
  display: flex;
  align-items: center;
  gap: var(--fl-s-3);
  padding: var(--fl-s-4) var(--fl-s-4);
  border-bottom: 1px solid var(--fl-line);
  background: var(--fl-paper);
}
.fl-cart-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fl-brand-soft);
  color: var(--fl-brand);
  flex-shrink: 0;
}
.fl-cart-header__titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.fl-cart-header__title {
  font-family: var(--fl-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--fl-ink);
}
.fl-cart-header__count {
  font-family: var(--fl-font-body);
  font-size: 0.82rem;
  color: var(--fl-ink-3);
  margin: 0;
}
.fl-cart-header__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--fl-ink-3);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.fl-cart-header__close:hover {
  background: var(--fl-cream);
  color: var(--fl-ink);
}

/* Compact cart row layout via display:flex on table rows */
.fl-root .mini-cart .table,
.fl-root .mini-cart table {
  margin: 0 !important;
  border: 0 !important;
}
.fl-root .mini-cart tbody tr {
  display: block;
  padding: 0;
  border: 0;
}
.fl-root .mini-cart tbody td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Suppress the legacy entry markup completely — the new card replaces it. */
.fl-root .mini-cart .fl-cart-item-legacy {
  display: none !important;
}
.fl-root .mini-cart .product-options > div > div > a,
.fl-root .mini-cart .product-options > div > a {
  /* Hide the store-logo + store-title strip above items (image 60 omits it) */
  display: none !important;
}

/* ------------ Drawer is now full-height fixed panel ------------ */
.fl-root .mini-cart.fl-cart-drawer--fixed {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}
.fl-root .mini-cart.fl-cart-drawer--fixed > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fl-root .mini-cart.fl-cart-drawer--fixed .fl-cart-header {
  flex-shrink: 0;
}
.fl-cart-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--fl-cream);
  padding: var(--fl-s-3) var(--fl-s-3) 0;
}
.fl-cart-scroll::-webkit-scrollbar { width: 6px; }
.fl-cart-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
}
.fl-root .mini-cart.fl-cart-drawer--fixed .fl-cart-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--fl-line);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.04);
}

/* Backdrop */
.fl-cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 8, 0.32);
  z-index: 999;
  animation: fl-cart-backdrop-in 0.18s ease-out;
}
@keyframes fl-cart-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------ Item card (image 60 layout) ------------ */
.fl-cart-item-card {
  display: flex;
  align-items: stretch;
  gap: var(--fl-s-3);
  background: var(--fl-paper);
  border-radius: var(--fl-r-md);
  padding: var(--fl-s-3);
  margin-bottom: var(--fl-s-3);
  box-shadow: 0 1px 3px rgba(15,12,8,0.04);
  transition: box-shadow 0.18s var(--fl-ease);
}
.fl-cart-item-card:hover {
  box-shadow: 0 4px 12px rgba(15,12,8,0.08);
}
.fl-cart-item-card__image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--fl-r-md);
  overflow: hidden;
  background: var(--fl-cream);
}
.fl-cart-item-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.fl-cart-item-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: space-between;
}
.fl-cart-item-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fl-s-2);
}
.fl-cart-item-card__title {
  font-family: var(--fl-font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--fl-ink) !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.fl-cart-item-card__title:hover {
  color: var(--fl-brand) !important;
}
.fl-cart-item-card__icons {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.fl-cart-item-card__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fl-ink-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fl-cart-item-card__icon-btn:hover {
  background: var(--fl-cream);
  color: var(--fl-brand);
}
.fl-cart-item-card__icon-btn--danger:hover {
  color: #d33;
  background: rgba(211, 51, 51, 0.08);
}
.fl-cart-item-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-s-2);
}
.fl-cart-item-card__price {
  font-family: var(--fl-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fl-brand);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.fl-cart-item-card__preorder {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--fl-brand);
  margin-top: 0.15rem;
}
.fl-cart-item-card__unavailable {
  font-size: 0.78rem;
  font-weight: 600;
}

/* Qty pill: - N + */
.fl-cart-qty-pill {
  display: inline-flex;
  align-items: center;
  background: var(--fl-paper);
  border: 1px solid var(--fl-line);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
}
.fl-cart-qty-pill__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--fl-brand);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fl-cart-qty-pill__btn:hover:not(:disabled) {
  background: var(--fl-brand);
  color: #fff;
}
.fl-cart-qty-pill__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.fl-cart-qty-pill__value {
  font-family: var(--fl-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fl-ink);
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Override notes background since scroll area is cream */
.fl-root .mini-cart .fl-cart-scroll + .fl-cart-notes,
.fl-root .mini-cart .fl-cart-notes {
  background: var(--fl-cream);
}
.fl-root .mini-cart .fl-cart-notes__textarea {
  background: var(--fl-paper);
}
/* Hide the legacy remove anchor & subtotal/total rows inside the new card layout */
.fl-root .mini-cart .mini-cart-remove,
.fl-root .mini-cart .mini-cart-price {
  display: none !important;
}

/* Hide the legacy tfoot Subtotal/Total rows — replaced by fl-cart-footer.
   Use a higher-specificity selector and also hide table-row-group display
   that Bootstrap might force. */
.fl-root .mini-cart tfoot,
.fl-root .mini-cart .table tfoot,
.fl-cart-drawer tfoot,
.mini-cart.fl-cart-drawer > div > .table > tfoot {
  display: none !important;
}
.fl-root .mini-cart tfoot tr,
.fl-cart-drawer tfoot tr {
  display: none !important;
}

/* Order notes block */
.fl-cart-notes {
  padding: var(--fl-s-4);
  border-top: 1px solid var(--fl-line);
  background: var(--fl-paper);
}
.fl-cart-notes__label {
  display: block;
  font-family: var(--fl-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fl-ink-3);
  margin-bottom: var(--fl-s-2);
}
.fl-cart-notes__textarea {
  width: 100%;
  min-height: 64px;
  padding: 0.7rem 0.9rem;
  font-family: var(--fl-font-body);
  font-size: 0.9rem;
  color: var(--fl-ink);
  background: var(--fl-cream);
  border: 1.5px solid transparent;
  border-radius: var(--fl-r-md);
  resize: vertical;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.fl-cart-notes__textarea:focus {
  outline: none;
  border-color: var(--fl-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-brand) 18%, transparent);
}
.fl-cart-notes__textarea::placeholder {
  color: var(--fl-ink-3);
}

/* Footer: subtotal row + checkout pill + subtitle */
.fl-cart-footer {
  padding: var(--fl-s-4) var(--fl-s-4) var(--fl-s-4);
  border-top: 1px solid var(--fl-line);
  background: var(--fl-paper);
}
.fl-cart-footer__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--fl-s-3);
}
.fl-cart-footer__label {
  font-family: var(--fl-font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fl-ink-2);
}
.fl-cart-footer__value {
  font-family: var(--fl-font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fl-ink);
  font-variant-numeric: tabular-nums;
}
.fl-cart-footer__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--fl-s-2);
  width: 100%;
  height: 54px;
  background: var(--fl-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--fl-r-pill) !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--fl-brand) 35%, transparent) !important;
  transition: transform 0.18s var(--fl-ease), box-shadow 0.18s var(--fl-ease) !important;
  cursor: pointer;
}
.fl-cart-footer__cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--fl-brand) 45%, transparent) !important;
}
.fl-cart-footer__cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fl-cart-footer__subtitle {
  display: none;
}

/* 8) Checkout — orange header strip with title + step indicator
      (matches image 26). We render an overlay header via CSS ::before
      on .checkout-experience-root so we don't need JSX changes. */
.fl-root .checkout-experience-root {
  position: relative;
  padding-top: 96px !important;
}
.fl-root .checkout-experience-root::before {
  content: "Checkout";
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--fl-s-5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  background: var(--cx-accent, var(--fl-brand));
  color: #fff;
  font-family: var(--fl-font-display-brand);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.005em;
  z-index: 10;
}
/* Step indicator strip — refined, NOT orange (avoids the heavy double-band).
   Renders on a cream backdrop with brand-orange accent on the active step,
   muted neutrals on the inactive ones, and a subtle border below. */
.fl-root .checkout-experience-root::after {
  content: "\25CF   Details         \25CB   Payment";
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-s-3);
  padding: 0 var(--fl-s-5);
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 36px;
  background: var(--fl-cream);
  color: var(--fl-ink);
  font-family: var(--fl-font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 10;
  border-bottom: 1px solid var(--fl-line);
  /* Use a faux split: brand orange on the first half (active), muted on the
     second half (inactive). Achieved via a linear-gradient background mask. */
}
/* Tighten the spacing below the strips since we adjusted height. */
.fl-root .checkout-experience-root {
  padding-top: 100px !important;
}
/* The page title that the route already shows — hide visually since the
   ::before strip provides it. */
.fl-root .checkout-experience-root .checkout-page-title {
  font-size: 1.1rem !important;
  margin-top: var(--fl-s-3) !important;
}

/* Wrap form sections in soft rounded cards on cream backdrop */
.fl-root .checkout-experience-root .checkout-panel,
.fl-root .checkout-experience-root .checkout-summary-panel {
  background: var(--fl-paper) !important;
  border: 1px solid var(--fl-line) !important;
  border-radius: var(--fl-r-lg) !important;
  padding: var(--fl-s-4) !important;
  margin-bottom: var(--fl-s-4) !important;
  box-shadow: var(--fl-shadow-sm) !important;
}

/* Stronger Continue / Submit button at the bottom of checkout */
.fl-root .checkout-experience-root .btn-primary,
.fl-root .checkout-experience-root button[type="submit"] {
  height: 56px;
  background: var(--fl-brand) !important;
  border-radius: var(--fl-r-pill) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fl-brand) 35%, transparent) !important;
}

/* Fix overlapping warning messages in the checkout sidebar footer.
   Two legacy elements use negative margins (margin: -30 on checkoutError,
   marginTop: -50 on the Login/Register prompt) which pulls them on top of
   each other.  Neutralise the negatives, give each a clean stacked block. */
.fl-root .checkout-experience-root .disabledContainer,
.fl-root .checkout-experience-root tfoot .disabledContainer {
  margin: 0 0 var(--fl-s-3) !important;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--fl-brand) 8%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--fl-brand) 25%, transparent);
  border-radius: var(--fl-r-md);
}
.fl-root .checkout-experience-root .disabledContainer .closedMsg {
  color: color-mix(in srgb, var(--fl-brand) 80%, #000) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  line-height: 1.4;
  margin: 0 !important;
  font-family: var(--fl-font-body) !important;
}
/* Login/Register prompt — neutralise the -50 marginTop, give it a clean card */
.fl-root .checkout-experience-root tfoot tr th > div > div[style*="margin-top: -50"],
.fl-root .checkout-experience-root tfoot tr th > div > div[style*="marginTop: -50"] {
  margin: 0 0 var(--fl-s-3) !important;
  padding: 0.75rem 1rem;
  background: var(--fl-cream);
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-r-md);
}
/* Generic catch-all for any inline-styled negative margin block inside the
   tfoot — these were chained legacy spacing hacks. */
.fl-root .checkout-experience-root tfoot th > div {
  position: relative;
}
.fl-root .checkout-experience-root tfoot th > div > div[style*="margin: -30"],
.fl-root .checkout-experience-root tfoot th > div > .disabledContainer {
  margin: 0 0 var(--fl-s-3) !important;
}

/* ─── Clean up the wall-of-pink warning paragraphs in the checkout footer ───
   The legacy markup uses raw <p style={{color: layout.primTxtColor}}> blocks
   and a full-bleed pink panel for "If you can't checkout...".  Tone down
   to neutral body text with brand accents, proper card containers, and a
   readable hierarchy. */

/* All <p> children inside the footer's th — neutral readable text, not pink */
.fl-root .checkout-experience-root tfoot th p {
  color: var(--fl-ink-2) !important;
  font-family: var(--fl-font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  font-style: normal !important;
  opacity: 1 !important;
  margin: var(--fl-s-3) 0 !important;
  text-align: left !important;
}

/* The bold "Please change delivery time..." sentence — turn into a clean
   alert card with warning icon, brand-soft background + brand-tinted border. */
.fl-root .checkout-experience-root tfoot th p > b:first-child,
.fl-root .checkout-experience-root tfoot th .closedMsg {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--fl-brand-soft);
  border: 1px solid color-mix(in srgb, var(--fl-brand) 25%, transparent);
  border-left: 4px solid var(--fl-brand);
  border-radius: var(--fl-r-md);
  padding: 0.85rem 1rem;
  color: color-mix(in srgb, var(--fl-brand) 78%, #000) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  margin: var(--fl-s-3) 0 !important;
  text-align: left !important;
}
.fl-root .checkout-experience-root tfoot th p > b:first-child::before,
.fl-root .checkout-experience-root tfoot th .closedMsg::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Group the EN + VN policy paragraphs into a single quieter container so
   the wall of text reads as a "policy" block, not standalone warnings. */
.fl-root .checkout-experience-root tfoot th p:has(> br + br) {
  background: var(--fl-cream);
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-r-md);
  padding: 0.85rem 1rem;
  margin: var(--fl-s-3) 0 !important;
  font-size: 0.84rem !important;
  color: var(--fl-ink-2) !important;
  line-height: 1.55 !important;
}
.fl-root .checkout-experience-root tfoot th p:has(> br + br) br + br {
  display: block;
  margin: 0.5rem 0;
  content: "";
}

/* "I understand and agree" checkbox label — brand-coloured tick + neutral
   body text instead of pink. */
.fl-root .checkout-experience-root tfoot th input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid color-mix(in srgb, var(--fl-ink) 22%, transparent);
  border-radius: 4px;
  background: var(--fl-paper);
  cursor: pointer;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 0.5rem 0 0 !important;
  vertical-align: middle;
  transition: background 0.18s, border-color 0.18s;
}
.fl-root .checkout-experience-root tfoot th input[type="checkbox"]:checked {
  background: var(--fl-brand);
  border-color: var(--fl-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.fl-root .checkout-experience-root tfoot th p > b:last-of-type {
  color: var(--fl-ink) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  vertical-align: middle;
  display: inline-block;
  opacity: 1 !important;
}

/* "If you can't checkout, try changing the delivery date..." — info card,
   distinct from the warning card by using brand-tint (lighter wash) and an
   info-circle icon prefix instead of warning triangle. */
.fl-root .checkout-experience-root tfoot th div[style*="background-color: rgb"],
.fl-root .checkout-experience-root tfoot th div[style*="backgroundColor: rgb"] {
  background: var(--fl-brand-tint) !important;
  border: 1px solid color-mix(in srgb, var(--fl-brand) 22%, transparent);
  border-radius: var(--fl-r-md);
  padding: 0.85rem 1rem !important;
  margin: var(--fl-s-4) 0 var(--fl-s-3) !important;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.fl-root .checkout-experience-root tfoot th div[style*="background-color: rgb"]::before,
.fl-root .checkout-experience-root tfoot th div[style*="backgroundColor: rgb"]::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: var(--fl-brand);
}
.fl-root .checkout-experience-root tfoot th div[style*="background-color: rgb"] p,
.fl-root .checkout-experience-root tfoot th div[style*="backgroundColor: rgb"] p {
  color: var(--fl-ink) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-align: left !important;
  background: transparent !important;
  flex: 1;
}
.fl-root .checkout-experience-root tfoot th div[style*="background-color: rgb"] a,
.fl-root .checkout-experience-root tfoot th div[style*="backgroundColor: rgb"] a {
  color: color-mix(in srgb, var(--fl-brand) 85%, #000) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: 700 !important;
}

/* Agreement row: turn the checkbox + label into a subtle agreement card so
   it reads as a deliberate action, not floating loose text. */
.fl-root .checkout-experience-root tfoot th p:has(> input[type="checkbox"]),
.fl-root .checkout-experience-root tfoot th p input[type="checkbox"] + b {
  /* When the checkbox sits inside a <p> with a <b> label sibling, style it. */
}
.fl-root .checkout-experience-root tfoot th p > input[type="checkbox"] {
  /* checkbox sits inline before the label */
  margin-right: 0.6rem !important;
}
.fl-root .checkout-experience-root tfoot th p > input[type="checkbox"] + b {
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: var(--fl-ink) !important;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════
   ACCOUNT SECTION — Profile / Orders / Favourites
   ════════════════════════════════════════════════════════════════════ */

/* Reactstrap nav tabs in Account — refined pill style */
.fl-root .nav-tabs {
  display: flex;
  gap: var(--fl-s-2);
  border-bottom: 0 !important;
  padding: var(--fl-s-2) 0 var(--fl-s-4);
  margin: var(--fl-s-4) 0;
}
.fl-root .nav-tabs .nav-item {
  list-style: none;
}
.fl-root .nav-tabs .nav-link {
  font-family: var(--fl-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--fl-ink-2) !important;
  padding: 0.55rem 1.4rem !important;
  border-radius: var(--fl-r-pill) !important;
  border: 1.5px solid var(--fl-line) !important;
  background: var(--fl-paper) !important;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
.fl-root .nav-tabs .nav-link:hover {
  border-color: color-mix(in srgb, var(--fl-brand) 40%, var(--fl-line)) !important;
  background: color-mix(in srgb, var(--fl-brand) 6%, var(--fl-paper)) !important;
}
.fl-root .nav-tabs .nav-link.active {
  background: var(--fl-ink) !important;
  color: #fff !important;
  border-color: var(--fl-ink) !important;
}

/* Section headlines on account tabs ("Customer Details", "Orders", "Favourites") */
.fl-root .tab-content > .tab-pane > div > div:first-child:not([style*="row"]),
.fl-root .tab-content h2,
.fl-root .tab-content h3 {
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* Profile form labels */
.fl-root .tab-content label {
  font-family: var(--fl-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: var(--fl-ink-3) !important;
  margin-bottom: 0.4rem !important;
  display: block;
}
/* Profile inputs — refined pill style, brand-orange focus ring */
.fl-root .tab-content input[type="text"],
.fl-root .tab-content input[type="email"],
.fl-root .tab-content input[type="tel"],
.fl-root .tab-content input[type="password"],
.fl-root .tab-content textarea {
  font-family: var(--fl-font-body) !important;
  font-size: 0.95rem !important;
  padding: 0.85rem 1rem !important;
  border: 1.5px solid var(--fl-line) !important;
  border-radius: var(--fl-r-md) !important;
  background: var(--fl-paper) !important;
  width: 100% !important;
  color: var(--fl-ink) !important;
  transition: border-color 0.18s, box-shadow 0.18s;
  margin-bottom: var(--fl-s-3) !important;
}
.fl-root .tab-content input:focus,
.fl-root .tab-content textarea:focus {
  outline: none !important;
  border-color: var(--fl-brand) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-brand) 16%, transparent) !important;
}
/* SAVE DETAILS button — branded rounded pill */
.fl-root .tab-content button[onclick*="save"],
.fl-root .tab-content button.btn-primary,
.fl-root .tab-content .btn-primary,
.fl-root #updateUser,
.fl-root .tab-pane > div > div > button {
  background: var(--fl-brand) !important;
  border: 0 !important;
  border-radius: var(--fl-r-pill) !important;
  padding: 0.9rem 2rem !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--fl-brand) 35%, transparent) !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
  margin: var(--fl-s-3) 0 !important;
  width: auto !important;
  min-width: 200px;
}
.fl-root .tab-content button.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--fl-brand) 45%, transparent) !important;
}

/* ── Orders cards ─────────────────────────────────────────────────────── */
.fl-root .tab-pane > div[id="orders"],
.fl-root #orders,
.fl-root .tab-content > .tab-pane > div {
  /* Make grid spacing */
}

/* Each order card is a column wrapper containing the card UI. Apply refined
   card styling to whatever the legacy order item is. */
.fl-root [class*="order-item"],
.fl-root [class*="orderItem"],
.fl-root [class*="account-order"] {
  background: var(--fl-paper) !important;
  border-radius: var(--fl-r-lg) !important;
  box-shadow: var(--fl-shadow-sm) !important;
  overflow: hidden !important;
}

/* Action buttons VIEW ORDER / CONTACT — pill */
.fl-root .tab-pane button[onclick*="openOrderPage"],
.fl-root .tab-pane a[href*="/order/"] button,
.fl-root .tab-pane button[onclick*="contact"] {
  border-radius: var(--fl-r-pill) !important;
  padding: 0.75rem 1.5rem !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em;
  background: var(--fl-brand) !important;
  color: #fff !important;
  border: 0 !important;
}

/* ── Favourites list — refined cards ─────────────────────────────────── */
.fl-root #favourites,
.fl-root [class*="favourite"] {
  /* placeholder — actual styling below */
}

/* ── Order details page ──────────────────────────────────────────────── */
.fl-root .order-experience-root {
  font-family: var(--fl-font-body) !important;
}
.fl-root .order-experience-root .order-confirmation-store-title {
  font-family: var(--fl-font-display-brand) !important;
  font-weight: 700 !important;
}
.fl-root .order-experience-root .order-confirmation-sheet,
.fl-root .order-confirmation-sheet {
  border-radius: var(--fl-r-lg) !important;
  box-shadow: var(--fl-shadow-md) !important;
  overflow: hidden;
}
.fl-root .order-experience-root .btn,
.fl-root .order-experience-root button.btn {
  border-radius: var(--fl-r-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem !important;
  padding: 0.85rem 1.5rem !important;
}

/* ════════════════════════════════════════════════════════════════════
   SET LOCATION MODAL — seamless modern style matching the facelift
   ════════════════════════════════════════════════════════════════════ */
.fl-set-location-modal {
  font-family: var(--fl-font-body);
}
.fl-set-location-modal .modal-content {
  border-radius: var(--fl-r-lg) !important;
  border: 0 !important;
  box-shadow: 0 24px 64px rgba(15, 12, 8, 0.18),
              0 6px 18px rgba(15, 12, 8, 0.08) !important;
  overflow: hidden;
}
.fl-set-location-modal .modal-header {
  border-bottom: 1px solid var(--fl-line) !important;
  padding: var(--fl-s-4) var(--fl-s-5) !important;
  background: var(--fl-paper);
}
.fl-set-location-modal .modal-header .close {
  font-size: 1.5rem;
  color: var(--fl-ink-3);
  opacity: 1;
  padding: var(--fl-s-2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s;
}
.fl-set-location-modal .modal-header .close:hover {
  background: var(--fl-cream);
  color: var(--fl-ink);
}
.fl-set-location-modal .modal-body {
  padding: 0 !important;
  background: var(--fl-paper);
}
.fl-set-location-modal .modal-body > div {
  padding: var(--fl-s-4) var(--fl-s-5) !important;
  margin: 0 !important;
}
/* Map preview — rounded corner */
.fl-set-location-modal .col-sm-4[style*="staticmap"] {
  border-radius: var(--fl-r-md) !important;
  overflow: hidden;
  min-height: 180px;
}
/* Inputs — refined pill style with brand-orange focus halo */
.fl-set-location-modal .geosuggest__input,
.fl-set-location-modal input[type="text"],
.fl-set-location-modal select {
  border: 1.5px solid var(--fl-line) !important;
  border-radius: var(--fl-r-md) !important;
  padding: 0.85rem 1rem !important;
  font-family: var(--fl-font-body) !important;
  font-size: 0.95rem !important;
  background: var(--fl-paper) !important;
  height: auto !important;
  width: 100% !important;
  margin-bottom: var(--fl-s-3) !important;
  transition: border-color 0.18s, box-shadow 0.18s;
  color: var(--fl-ink) !important;
}
.fl-set-location-modal select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  padding-right: 2.5rem !important;
  cursor: pointer;
}
.fl-set-location-modal .geosuggest__input:focus,
.fl-set-location-modal input[type="text"]:focus,
.fl-set-location-modal select:focus {
  outline: none !important;
  border-color: var(--fl-brand) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-brand) 16%, transparent) !important;
}
.fl-set-location-district {
  margin-top: var(--fl-s-3);
}
.fl-set-location-error {
  background: color-mix(in srgb, var(--fl-brand) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--fl-brand) 30%, transparent);
  color: color-mix(in srgb, var(--fl-brand) 80%, #000);
  font-family: var(--fl-font-body);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  border-radius: var(--fl-r-md);
  margin: 0 var(--fl-s-3) var(--fl-s-3);
  text-align: center;
}
.fl-set-location-modal label {
  font-family: var(--fl-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--fl-ink-3) !important;
  margin-top: var(--fl-s-3) !important;
  margin-bottom: var(--fl-s-1) !important;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Brand-orange pill button at the bottom */
.fl-set-location-modal button[onclick*="addNewAddress"],
.fl-set-location-modal .modal-body .btn,
.fl-set-location-modal .modal-body button {
  background: var(--fl-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--fl-r-pill) !important;
  padding: 1rem 1.5rem !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em;
  height: auto !important;
  width: calc(100% - 2 * var(--fl-s-3)) !important;
  margin: var(--fl-s-3) auto !important;
  display: block !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--fl-brand) 35%, transparent) !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
  position: relative !important;
  top: 0 !important;
}
.fl-set-location-modal button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--fl-brand) 45%, transparent) !important;
}

/* Universal breadcrumb styling — applies wherever .fl-breadcrumb is used.
   Used by ProductDetails (.row > col-sm-10 > .fl-breadcrumb) and Order
   (.col-sm-10.breadcrumb-row.fl-breadcrumb), plus other pages later. */
.fl-root .breadcrumb-row.fl-breadcrumb,
.fl-root .fl-breadcrumb {
  font-family: var(--fl-font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--fl-ink-3) !important;
  /* Override the inline margin:30 set by older components so the breadcrumb
     aligns flush with the rest of the page content, not pushed away from
     the page edge by an arbitrary 30px on all sides. */
  margin: 1.25rem 0 0.75rem !important;
  padding: 0 var(--fl-s-5) !important;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  line-height: 1.4;
}
.fl-root .fl-breadcrumb a:last-of-type,
.fl-root .fl-breadcrumb a:last-child {
  color: var(--fl-ink) !important;
  font-weight: 600 !important;
  pointer-events: none;
  cursor: default;
}
.fl-root .fl-breadcrumb a:last-of-type:hover,
.fl-root .fl-breadcrumb a:last-child:hover {
  color: var(--fl-ink) !important;
}

/* Page-level "Back" button used on product detail (and elsewhere) — push it
   up to sit next to the breadcrumb instead of below it, and de-emphasize the
   styling so it matches the refined visual language. */
.fl-root .row:has(> .col-sm-10 > .fl-breadcrumb) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: center;
}
.fl-root .row:has(> .col-sm-10 > .fl-breadcrumb) > .col-sm-2 button {
  margin: 0 var(--fl-s-5) 0 0 !important;
  background: var(--fl-paper) !important;
  border: 1px solid var(--fl-line) !important;
  color: var(--fl-ink-2) !important;
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.fl-root .row:has(> .col-sm-10 > .fl-breadcrumb) > .col-sm-2 button:hover {
  background: var(--fl-cream) !important;
  border-color: var(--fl-brand) !important;
  color: var(--fl-brand) !important;
}

/* ============================================================
   AddressForm (Phase 1) — used by the Change modal, Checkout
   inline section, and the Account → Addresses page.
   ============================================================ */
.fl-addr-form {
  display: flex;
  flex-direction: column;
  gap: var(--fl-s-3);
  padding: var(--fl-s-3) 0;
  font-family: var(--fl-font-body);
  color: var(--fl-ink);
}

/* Saved-address chips strip */
.fl-addr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-s-2);
  padding-bottom: var(--fl-s-2);
  border-bottom: 1px solid var(--fl-line);
  margin-bottom: var(--fl-s-2);
}
.fl-addr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  background: var(--fl-paper);
  border: 1.5px solid var(--fl-line);
  border-radius: 999px;
  font-family: var(--fl-font-body);
  font-size: 0.82rem;
  color: var(--fl-ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fl-addr-chip:hover {
  border-color: var(--fl-brand);
  background: var(--fl-cream);
}
.fl-addr-chip--active {
  border-color: var(--fl-brand);
  background: color-mix(in srgb, var(--fl-brand) 8%, white);
}
.fl-addr-chip__label { font-weight: 500; }
.fl-addr-chip__fee {
  font-weight: 600;
  color: var(--fl-brand);
  font-variant-numeric: tabular-nums;
}

/* Search row + Use my location */
.fl-addr-row {
  display: flex;
  gap: var(--fl-s-2);
  align-items: stretch;
}
.fl-addr-row--search {
  align-items: center;
}
/* Search input + leading 🔍 + trailing 📍 — one unified pill, search is the
   hero action and "use my location" is a quiet trailing icon. */
.fl-addr-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--fl-paper);
  border: 1.5px solid var(--fl-line);
  border-radius: var(--fl-r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fl-addr-search-wrap:focus-within {
  border-color: var(--fl-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-brand) 18%, transparent);
}
.fl-addr-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  flex: 0 0 38px;
  color: var(--fl-ink-3);
  pointer-events: none;
}
.fl-addr-search-wrap .geosuggest {
  flex: 1 1 auto !important;
  min-width: 0;
  width: 100% !important;
  display: block !important;
}
.fl-addr-search-wrap .geosuggest__input-wrapper {
  width: 100% !important;
}
.fl-addr-search-wrap .fl-addr-input--search,
.fl-addr-search-wrap .geosuggest__input {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box;
  padding: 0.7rem 0.4rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--fl-font-body);
  font-size: 0.95rem;
  color: var(--fl-ink);
}
.fl-addr-search-wrap .geosuggest__input:focus,
.fl-addr-search-wrap .fl-addr-input--search:focus {
  box-shadow: none !important;
  border: 0 !important;
}
.fl-addr-form .geosuggest__suggests-wrapper {
  position: relative;
  width: 100%;
}
.fl-addr-form .geosuggest__suggests {
  position: absolute;
  z-index: 20;
  left: -40px;
  right: -40px;
  background: var(--fl-paper);
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-r-md);
  max-height: 240px;
  overflow-y: auto;
  margin-top: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  list-style: none;
  padding: 4px 0;
}
.fl-addr-form .geosuggest__suggests--hidden { display: none; }
.fl-addr-form .geosuggest__item {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: var(--fl-ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fl-addr-form .geosuggest__item:hover,
.fl-addr-form .geosuggest__item--active {
  background: var(--fl-cream);
  color: var(--fl-brand);
}

.fl-addr-locate-btn {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--fl-ink-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fl-addr-locate-btn:hover {
  background: color-mix(in srgb, var(--fl-brand) 12%, white);
  color: var(--fl-brand);
}
.fl-addr-locate-btn:active {
  transform: scale(0.95);
}

/* Static map preview */
.fl-addr-map {
  position: relative;
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  border-radius: var(--fl-r-md);
  overflow: hidden;
}
.fl-addr-map__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  color: var(--fl-brand);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* Two-column row for apt + district */
.fl-addr-row--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fl-s-3);
}
@media (max-width: 480px) {
  .fl-addr-row--two-col { grid-template-columns: 1fr; }
}

/* Labelled field */
.fl-addr-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fl-addr-field__label {
  font-family: var(--fl-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fl-ink-3);
}

/* Inputs */
.fl-addr-input,
.fl-addr-form .geosuggest__input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-family: var(--fl-font-body);
  font-size: 0.95rem;
  color: var(--fl-ink);
  background: var(--fl-paper);
  border: 1.5px solid var(--fl-line);
  border-radius: var(--fl-r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.fl-addr-input:focus,
.fl-addr-form .geosuggest__input:focus {
  border-color: var(--fl-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-brand) 18%, transparent);
}
.fl-addr-input--textarea {
  resize: vertical;
  min-height: 56px;
  font-family: var(--fl-font-body);
}
.fl-addr-form select.fl-addr-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23666' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2rem;
}

/* Fee summary block */
.fl-addr-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-s-2);
  padding: 0.75rem 1rem;
  border-radius: var(--fl-r-md);
  font-family: var(--fl-font-body);
  font-size: 0.9rem;
}
.fl-addr-zone--ok {
  background: color-mix(in srgb, var(--fl-brand) 8%, white);
  color: var(--fl-ink);
  border: 1px solid color-mix(in srgb, var(--fl-brand) 25%, transparent);
}
.fl-addr-zone--ok strong { font-weight: 600; }
.fl-addr-zone__fee {
  font-weight: 700;
  color: var(--fl-brand);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}
.fl-addr-zone--blocked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  background: #fff4f4;
  color: #a53b3b;
  border: 1px solid #f3c1c1;
}
.fl-addr-zone--blocked strong { font-weight: 700; color: #8a2b2b; }
.fl-addr-zone--blocked span { font-size: 0.85rem; }

/* Error */
.fl-addr-error {
  padding: 0.6rem 0.9rem;
  background: #fff4f4;
  color: #a53b3b;
  border: 1px solid #f3c1c1;
  border-radius: var(--fl-r-md);
  font-size: 0.88rem;
}

/* Save button — brand pill, matches cart's Proceed pattern */
.fl-addr-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--fl-s-2);
}
.fl-addr-save {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  padding: 0 1.5rem !important;
  background: var(--fl-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--fl-r-pill) !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fl-brand) 30%, transparent) !important;
  transition: transform 0.18s var(--fl-ease), box-shadow 0.18s var(--fl-ease) !important;
  cursor: pointer;
}
.fl-addr-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--fl-brand) 40%, transparent) !important;
}
.fl-addr-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Modal-mode tightening */
.fl-addr-modal {
  font-family: var(--fl-font-body);
}
.modal-dialog.fl-addr-modal {
  max-width: 540px;
}
.fl-addr-modal .modal-content {
  border-radius: var(--fl-r-lg) !important;
  border: 0 !important;
  box-shadow: 0 24px 64px rgba(15, 12, 8, 0.18),
              0 6px 18px rgba(15, 12, 8, 0.08) !important;
  overflow: hidden;
}
.fl-addr-modal .modal-header {
  border-bottom: 1px solid var(--fl-line) !important;
  padding: var(--fl-s-4) var(--fl-s-5) !important;
  background: var(--fl-paper);
}
.fl-addr-modal .modal-header .close {
  font-size: 1.5rem;
  color: var(--fl-ink-3);
  opacity: 1;
  padding: 0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s;
}
.fl-addr-modal .modal-header .close:hover {
  background: var(--fl-cream);
  color: var(--fl-ink);
}
.fl-addr-modal .modal-body {
  padding: var(--fl-s-4) var(--fl-s-5) var(--fl-s-5) !important;
  background: var(--fl-paper);
}
@media (max-width: 480px) {
  .modal-dialog.fl-addr-modal {
    margin: 0;
    max-width: 100vw;
    min-height: 100vh;
  }
  .fl-addr-modal .modal-content {
    min-height: 100vh;
    border-radius: 0;
  }
}

/* ============================================================
   Account → Addresses tab (Phase 2c)
   ============================================================ */
.fl-addresses-tab {
  padding: var(--fl-s-5) var(--fl-s-4);
  font-family: var(--fl-font-body);
  color: var(--fl-ink);
}
.fl-addresses-tab__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fl-s-4);
  padding-bottom: var(--fl-s-3);
  border-bottom: 1px solid var(--fl-line);
}
.fl-addresses-tab__title {
  font-family: var(--fl-font-display-brand);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.fl-addresses-tab__add-btn {
  background: var(--fl-brand);
  color: #fff;
  border: 0;
  border-radius: var(--fl-r-pill);
  padding: 0.55rem 1.1rem;
  font-family: var(--fl-font-body);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fl-brand) 30%, transparent);
}
.fl-addresses-tab__add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--fl-brand) 40%, transparent);
}
.fl-addresses-tab__empty {
  text-align: center;
  padding: var(--fl-s-6) var(--fl-s-4);
  color: var(--fl-ink-3);
  background: var(--fl-cream);
  border-radius: var(--fl-r-md);
}
.fl-addresses-tab__empty p { margin: 0.25rem 0; }
.fl-addresses-tab__empty p:first-child {
  font-weight: 600;
  color: var(--fl-ink);
  font-size: 1.05rem;
}

/* Saved address card list */
.fl-saved-addr-list {
  display: flex;
  flex-direction: column;
  gap: var(--fl-s-3);
  margin-bottom: var(--fl-s-4);
}
.fl-saved-addr-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--fl-s-3);
  background: var(--fl-paper);
  border: 1.5px solid var(--fl-line);
  border-radius: var(--fl-r-md);
  padding: var(--fl-s-3) var(--fl-s-4);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fl-saved-addr-card:hover {
  border-color: color-mix(in srgb, var(--fl-brand) 30%, var(--fl-line));
  box-shadow: 0 4px 12px rgba(15,12,8,0.04);
}
.fl-saved-addr-card--current {
  border-color: var(--fl-brand);
  background: color-mix(in srgb, var(--fl-brand) 6%, white);
}
.fl-saved-addr-card__main {
  flex: 1;
  min-width: 0;
}
.fl-saved-addr-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--fl-s-2);
  margin-bottom: 0.2rem;
}
.fl-saved-addr-card__title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fl-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-saved-addr-card__badge {
  display: inline-block;
  background: var(--fl-brand);
  color: #fff;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fl-saved-addr-card__meta {
  font-size: 0.85rem;
  color: var(--fl-ink-3);
  margin-top: 0.15rem;
}
.fl-saved-addr-card__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fl-saved-addr-card__action {
  background: transparent;
  border: 1.5px solid var(--fl-line);
  border-radius: var(--fl-r-pill);
  padding: 0.35rem 0.85rem;
  font-family: var(--fl-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--fl-ink-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.fl-saved-addr-card__action:hover {
  border-color: var(--fl-brand);
  color: var(--fl-brand);
}
.fl-saved-addr-card__action--danger {
  color: #a53b3b;
  border-color: transparent;
}
.fl-saved-addr-card__action--danger:hover {
  background: #fff4f4;
  border-color: #f3c1c1;
  color: #8a2b2b;
}
.fl-saved-addr-card__action--solid-danger {
  background: #d33;
  color: #fff;
  border-color: #d33;
}
.fl-saved-addr-card__action--solid-danger:hover {
  background: #b82a2a;
  border-color: #b82a2a;
  color: #fff;
}
.fl-saved-addr-card__confirm-text {
  font-size: 0.82rem;
  color: var(--fl-ink-2);
  margin-right: 0.25rem;
}

/* Inline-expand "Add new" form */
.fl-addresses-tab__add-form {
  border: 1.5px solid var(--fl-brand);
  background: color-mix(in srgb, var(--fl-brand) 4%, white);
  border-radius: var(--fl-r-md);
  padding: var(--fl-s-3) var(--fl-s-4);
  margin-top: var(--fl-s-3);
}
.fl-addresses-tab__add-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fl-s-2);
  padding-bottom: var(--fl-s-2);
  border-bottom: 1px solid var(--fl-line);
  font-family: var(--fl-font-body);
  font-weight: 600;
  font-size: 1rem;
}
.fl-addresses-tab__add-form-cancel {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fl-ink-3);
  cursor: pointer;
  padding: 0 0.25rem;
}
.fl-addresses-tab__add-form-cancel:hover { color: var(--fl-ink); }

/* ============================================================
   Delivery Time modal — match AddressForm visual language.
   Reactstrap puts our className on .modal-dialog (not the outer .modal),
   so the selectors target the dialog level directly.
   ============================================================ */
.modal-dialog.fl-dt-modal {
  max-width: 480px;
}
.fl-dt-modal .modal-content {
  border-radius: var(--fl-r-lg) !important;
  border: 0 !important;
  box-shadow: 0 24px 64px rgba(15, 12, 8, 0.18),
              0 6px 18px rgba(15, 12, 8, 0.08) !important;
  overflow: hidden;
}
.fl-dt-modal .modal-header {
  border-bottom: 1px solid var(--fl-line) !important;
  padding: var(--fl-s-4) var(--fl-s-5) !important;
  background: var(--fl-paper);
}
.fl-dt-modal .modal-header .close {
  font-size: 1.5rem;
  color: var(--fl-ink-3);
  opacity: 1;
  padding: 0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s;
}
.fl-dt-modal .modal-header .close:hover {
  background: var(--fl-cream);
  color: var(--fl-ink);
}
.fl-dt-modal__title {
  font-family: var(--fl-font-body);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--fl-ink);
}
.fl-dt-modal .modal-body {
  padding: var(--fl-s-4) var(--fl-s-5) var(--fl-s-5) !important;
  background: var(--fl-paper);
}
.fl-dt-form {
  display: flex;
  flex-direction: column;
  gap: var(--fl-s-3);
}
.fl-dt-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fl-dt-field__label {
  font-family: var(--fl-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fl-ink-3);
}
.fl-dt-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--fl-font-body);
  font-size: 0.95rem;
  color: var(--fl-ink);
  background: var(--fl-paper);
  border: 1.5px solid var(--fl-line);
  border-radius: var(--fl-r-md);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23666' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2rem;
  cursor: pointer;
}
.fl-dt-input:focus {
  border-color: var(--fl-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-brand) 18%, transparent);
}
.fl-dt-zone {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 1rem;
  border-radius: var(--fl-r-md);
  font-family: var(--fl-font-body);
  font-size: 0.9rem;
}
.fl-dt-zone--blocked {
  background: #fff4f4;
  color: #a53b3b;
  border: 1px solid #f3c1c1;
}
.fl-dt-zone--blocked strong { font-weight: 700; color: #8a2b2b; }
.fl-dt-zone--blocked span { font-size: 0.85rem; }
.fl-dt-actions {
  display: flex;
  justify-content: stretch;
  margin-top: var(--fl-s-2);
}
.fl-dt-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 1.5rem !important;
  background: var(--fl-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--fl-r-pill) !important;
  font-family: var(--fl-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fl-brand) 30%, transparent) !important;
  transition: transform 0.18s var(--fl-ease), box-shadow 0.18s var(--fl-ease) !important;
  cursor: pointer;
}
.fl-dt-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--fl-brand) 40%, transparent) !important;
}
.fl-dt-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .modal-dialog.fl-dt-modal {
    margin: 0;
    max-width: 100vw;
    min-height: 100vh;
  }
  .fl-dt-modal .modal-content {
    min-height: 100vh;
    border-radius: 0;
  }
}