/* =====================================================================
   FESTKART — BRAND DESIGN SYSTEM
   Brand colors from logo: Purple #6B21A8 | Orange #F97316 | Red #DC2626
   Linked last in index.html — overrides all prior styles
   ===================================================================== */

/* ── Design Tokens ──────────────────────────────────────────────────
   The variables (--ff-purple, --bk-bg, …) are defined in tokens.css, which
   is generated from shared/src/theme/tokens.js — the same values the mobile
   app uses. Change colours there, not here. */

/* ── Homepage Hero Slider ─────────────────────────────────────────
   Banners come from the admin at whatever shape the marketer uploaded, so
   the frame keeps a fixed aspect ratio and the image is CONTAINed inside it
   — nothing is ever cropped. A blurred copy of the same image fills the
   leftover space, which reads as intentional rather than as empty bars. */
.ff-hero-slider{position:relative;overflow:hidden;width:100%;background:var(--bk-dark);margin-bottom:0}
.ff-hero-track-wrap{overflow:hidden;width:100%;touch-action:pan-y}
.ff-hero-track{display:flex;transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);will-change:transform}
.ff-hero-track.is-dragging{transition:none}
.ff-hero-slide{flex:0 0 100%;width:100%;position:relative;aspect-ratio:16/9;min-height:180px;overflow:hidden;background:var(--bk-dark)}
.ff-hero-slide-link{display:block;width:100%;height:100%;position:relative;text-decoration:none;-webkit-user-drag:none}
.ff-hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) saturate(1.25);transform:scale(1.2);opacity:0.55;pointer-events:none}
.ff-hero-img{position:relative;display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.ff-hero-no-img{width:100%;height:100%;background:linear-gradient(135deg,var(--ff-purple) 0%,var(--ff-orange) 100%);display:flex;align-items:center;justify-content:center}
.ff-hero-placeholder-icon{font-size:44px;color:rgba(255,255,255,0.6)}

/* Caption sits in a gradient only as tall as it needs to be */
.ff-hero-overlay{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;padding:14px 16px 34px;background:linear-gradient(to top,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.35) 60%,transparent 100%);pointer-events:none}
.ff-hero-caption{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:min(560px,88%)}
.ff-hero-name{color:#fff;font-size:15px;font-weight:700;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,0.45);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ff-hero-subtitle-slide{color:rgba(255,255,255,0.88);font-size:12px;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,0.4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ff-hero-cta{display:inline-flex;align-items:center;gap:5px;margin-top:4px;background:var(--ff-orange);color:#fff;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:0.3px}

/* Arrows are desktop-only — on touch the slider is swipeable */
.ff-hero-arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:34px;height:34px;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(255,255,255,0.9);color:var(--bk-dark);font-size:16px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.25);transition:background 0.15s,transform 0.15s}
.ff-hero-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.ff-hero-arrow-left{left:12px}
.ff-hero-arrow-right{right:12px}

/* Dots centred, with tap targets big enough for a thumb */
.ff-hero-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;z-index:10}
.ff-hero-dot{width:22px;height:22px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ff-hero-dot:before{content:'';display:block;width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,0.55);box-shadow:0 1px 3px rgba(0,0,0,0.35);transition:width 0.25s,background 0.25s}
.ff-hero-dot-active:before{width:18px;background:#fff}

@media(min-width:600px){
  .ff-hero-slide{aspect-ratio:2.4/1}
  .ff-hero-name{font-size:19px}
  .ff-hero-subtitle-slide{font-size:13px}
  .ff-hero-overlay{padding:18px 22px 38px}
}
@media(min-width:993px){
  .ff-hero-slide{aspect-ratio:3/1}
  .ff-hero-arrow{display:flex}
  .ff-hero-name{font-size:22px}
  .ff-hero-cta{font-size:13px;padding:7px 18px}
}
@media(prefers-reduced-motion:reduce){
  .ff-hero-track{transition:none}
}

/* ── Product Image Placeholder ───────────────────────────────────── */
.prod-img-placeholder{width:100%;height:100%;min-height:80px;background:var(--ff-img-empty);display:flex;align-items:center;justify-content:center;border-radius:8px}
.prod-img-placeholder-icon{font-size:32px;color:var(--ff-img-empty-icon)}
/* Size constraints when placeholder renders inside specific containers */
.bk-search-item .prod-img-placeholder{width:40px;height:40px;min-height:40px;border-radius:6px;flex-shrink:0}
.bk-search-item .prod-img-placeholder-icon{font-size:16px}
.bk-prod-img .prod-img-placeholder{min-height:100px;border-radius:0}
.ff-prod-img-wrap .prod-img-placeholder{width:100%;min-height:120px;border-radius:0}

/* ── Base ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Roboto',sans-serif!important;background:var(--bk-bg)!important;color:var(--bk-dark)!important;margin:0;padding:0}
a{color:var(--bk-dark);text-decoration:none!important}
a:hover{color:var(--ff-purple)}
img{max-width:100%}
section,.section-b-space,.section-t-space{background:transparent}
.container,.container-fluid{max-width:1280px!important}

/* ── Loader ──────────────────────────────────────────────────────────
   The splash is styled inline in index.html <head> so it paints on the first
   frame. The old rules here set a solid purple background with !important,
   which beat those inline styles from further down the cascade — the logo
   ended up floating on flat purple. Nothing else uses .loader. */

/* ── TOP STRIP — HIDDEN (replaced by new header) ─────────────────── */
.top-header{display:none!important}

/* ── NEW FESTKART HEADER ─────────────────────────────────────────── */
.bk-header-bar{background:var(--ff-purple);position:sticky;top:0;z-index:1000;box-shadow:0 2px 16px rgba(82,26,130,0.45)}
.bk-header-inner{display:flex;align-items:center;gap:12px;padding:10px 16px;max-width:1280px;margin:0 auto}

/* Logo */
.bk-header-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.bk-header-logo img{height:44px;object-fit:contain;border-radius:8px}

/* Search bar */
.bk-header-search{flex:1;position:relative;display:flex;align-items:center;background:rgba(255,255,255,0.15);border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,0.25);transition:border-color 0.15s,background 0.15s;min-width:0}
.bk-header-search:focus-within{background:rgba(255,255,255,0.22);border-color:var(--ff-orange)}
.bk-search-icon{color:rgba(255,255,255,0.7);font-size:14px;padding:0 10px 0 14px;flex-shrink:0}
.bk-header-search input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:14px;padding:9px 0;min-width:0}
.bk-header-search input::placeholder{color:rgba(255,255,255,0.55)}
.bk-search-clear{background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;padding:0 12px;font-size:13px;flex-shrink:0}
.bk-search-clear:hover{color:#fff}

/* Search dropdown */
.bk-search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(107,33,168,0.2);z-index:2000;overflow:hidden;border:1px solid var(--bk-border)}
.bk-search-item{display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none!important;color:var(--bk-dark);transition:background 0.1s}
.bk-search-item:hover{background:var(--ff-purple-l);color:var(--bk-dark)}
.bk-search-thumb{width:40px;height:40px;object-fit:contain;border-radius:6px;border:1px solid var(--bk-border);flex-shrink:0}
.bk-search-item-info{min-width:0}
.bk-search-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-search-price{font-size:12px;color:var(--ff-purple);font-weight:600;margin-top:2px}
.bk-search-see-all{display:block;text-align:center;padding:10px;font-size:13px;color:var(--ff-purple);font-weight:600;border-top:1px solid var(--bk-border);text-decoration:none!important;background:var(--ff-purple-l)}
.bk-search-see-all:hover{background:var(--ff-purple);color:#fff}

/* Header action buttons */
.bk-header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.bk-header-btn{position:relative;background:none;border:none;cursor:pointer;color:#fff;font-size:22px;padding:6px 8px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background 0.15s;text-decoration:none!important}
.bk-header-btn:hover{background:rgba(255,255,255,0.15);color:#fff}
.bk-cart-pill{position:absolute;top:1px;right:1px;background:var(--ff-orange);color:#fff;font-size:9px;font-weight:700;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;line-height:1}

/* ── USER DRAWER ──────────────────────────────────────────────────── */
.bk-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1100;opacity:0;pointer-events:none;transition:opacity 0.25s}
.bk-drawer-overlay-visible{opacity:1;pointer-events:all}
.bk-drawer{position:fixed;top:0;right:0;bottom:0;width:280px;background:#fff;z-index:1101;transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);box-shadow:-4px 0 24px rgba(107,33,168,0.2);display:flex;flex-direction:column}
.bk-drawer-open{transform:translateX(0)}
.bk-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--ff-purple);flex-shrink:0}
.bk-drawer-title{color:#fff;font-size:16px;font-weight:700}
.bk-drawer-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.7);font-size:18px;padding:4px;line-height:1}
.bk-drawer-close:hover{color:#fff}
.bk-drawer-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.bk-drawer-link{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--bk-dark);text-decoration:none!important;font-size:15px;font-weight:500;border-radius:10px;transition:background 0.15s;border:none;background:none;cursor:pointer;width:100%;text-align:left}
.bk-drawer-link i{color:var(--ff-purple);font-size:18px;width:22px;text-align:center}
.bk-drawer-link:hover{background:var(--ff-purple-l);color:var(--ff-purple)}
.bk-drawer-logout{color:var(--ff-red)!important}
.bk-drawer-logout i{color:var(--ff-red)!important}
.bk-drawer-hint{font-size:13px;color:#888;margin:8px 0 16px;line-height:1.5}
.bk-drawer-login-btn{width:100%;padding:13px;background:var(--ff-purple);color:#fff;border:none;border-radius:var(--r-btn);font-size:15px;font-weight:700;cursor:pointer;transition:background 0.15s}
.bk-drawer-login-btn:hover{background:var(--ff-purple-d)}
.bk-drawer-register{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--ff-purple);font-weight:600;text-decoration:none!important}
.bk-drawer-register:hover{text-decoration:underline!important}

/* ── (old header selectors kept for safety) ───────────────────────── */
header.sticky,#sticky{position:sticky!important;top:0;z-index:1000}
.main-menu{background:transparent!important;border:none!important}

/* ── CART DROPDOWN ───────────────────────────────────────────────── */
.shopping-cart,.show-div.shopping-cart{background:#fff!important;border-radius:var(--r-card)!important;box-shadow:var(--bk-shadow-h)!important;border:1px solid var(--bk-border)!important}
.shopping-cart .media img{border-radius:8px!important}
.shopping-cart .total h5{font-weight:700;color:var(--bk-dark)}
.shopping-cart .view-cart{background:var(--bk-surface)!important;border:1.5px solid var(--ff-purple)!important;color:var(--ff-purple)!important;border-radius:var(--r-btn)!important;font-weight:600!important}
.shopping-cart .checkout{background:var(--ff-purple)!important;color:#fff!important;border-radius:var(--r-btn)!important;font-weight:600!important}

/* ── SERVICE STRIP ───────────────────────────────────────────────── */
.banner-padding.absolute-banner{background:var(--bk-surface)!important;border-bottom:1px solid var(--bk-border)!important}
.absolute-bg{background:transparent!important;padding:10px 0!important}
.service-block .media{padding:8px 12px!important}
.service-block .media-body h4{font-size:13px!important;font-weight:700!important;color:var(--bk-dark)!important;margin-bottom:2px!important;text-transform:capitalize!important}
.service-block .media-body p{font-size:11px!important;color:var(--bk-gray)!important;margin:0!important}

/* ── BREADCRUMB ──────────────────────────────────────────────────── */
.breadcrumb-section{background:var(--bk-surface)!important;padding:10px 0!important;border-bottom:1px solid var(--bk-border)!important}
.breadcrumb-section h2{font-size:18px!important;font-weight:700!important;color:var(--bk-dark)!important}
.breadcrumb{background:transparent!important}
.breadcrumb-item a{color:var(--bk-gray)!important;font-size:13px!important}
.breadcrumb-item.active{color:var(--bk-dark)!important;font-size:13px!important}
.breadcrumb-item+.breadcrumb-item::before{color:var(--bk-gray-l)!important}

/* ── PRODUCT CARDS ───────────────────────────────────────────────── */
.product-box{border-radius:var(--r-card)!important;border:1px solid var(--bk-border)!important;box-shadow:none!important;background:var(--bk-surface)!important;overflow:hidden!important;transition:box-shadow 0.2s,transform 0.2s!important;margin-bottom:0!important}
.product-box:hover{box-shadow:var(--bk-shadow)!important;transform:translateY(-2px)!important}
.product-box .img-wrapper{background:#faf7ff!important;border-bottom:1px solid var(--bk-border)!important;padding:12px!important;min-height:150px!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important}
.product-box .img-wrapper img{max-height:130px!important;object-fit:contain!important;border-radius:8px!important}
.product-box .lable3{background:var(--ff-purple)!important;color:#fff!important;font-size:10px!important;font-weight:700!important;padding:2px 7px!important;border-radius:var(--r-pill)!important;text-transform:uppercase!important}
.product-box .lable4{background:var(--ff-orange)!important;color:#fff!important;font-size:10px!important;font-weight:700!important;padding:2px 7px!important;border-radius:var(--r-pill)!important;text-transform:uppercase!important;margin-top:4px!important;display:block!important}
.product-box .product-detail,.product-box .product-info{padding:10px 12px 12px!important}
.product-box h6{font-size:13px!important;font-weight:600!important;color:var(--bk-dark)!important;line-height:1.4!important;margin-bottom:4px!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
.product-box .price,.product-box h4{font-size:15px!important;font-weight:700!important;color:var(--bk-dark)!important;margin:2px 0!important}
.product-box del{color:var(--bk-gray-l)!important;font-size:12px!important}

/* ADD button on cards */
.product-box .btn-solid,.product-box .cart-detail .btn{background:var(--bk-surface)!important;border:1.5px solid var(--ff-purple)!important;color:var(--ff-purple)!important;font-size:11px!important;font-weight:700!important;padding:4px 12px!important;border-radius:var(--r-btn)!important;text-transform:uppercase!important;transition:background 0.15s,color 0.15s!important;letter-spacing:0.3px!important}
.product-box .btn-solid:hover{background:var(--ff-purple)!important;color:#fff!important}
.product-box .cart-info a i,.product-box .cart-info button i{background:var(--bk-surface)!important;border:1px solid var(--bk-border)!important;border-radius:50%!important;color:var(--bk-dark)!important;width:32px!important;height:32px!important;line-height:30px!important;text-align:center!important;font-size:14px!important}
.product-box .cart-info a:hover i{background:var(--ff-orange)!important;border-color:var(--ff-orange)!important;color:#fff!important}

/* ── GLOBAL BUTTONS ──────────────────────────────────────────────── */
.btn-solid{background:var(--ff-purple)!important;border:2px solid var(--ff-purple)!important;color:#fff!important;border-radius:var(--r-btn)!important;font-weight:700!important;font-size:14px!important;padding:10px 28px!important;transition:background 0.15s,transform 0.1s!important;text-transform:uppercase!important}
.btn-solid:hover{background:var(--ff-orange)!important;border-color:var(--ff-orange)!important;color:#fff!important;transform:translateY(-1px)!important}
.btn-outline{background:transparent!important;border:2px solid var(--ff-purple)!important;color:var(--ff-purple)!important;border-radius:var(--r-btn)!important;font-weight:700!important;padding:10px 28px!important}
.btn-outline:hover{background:var(--ff-purple)!important;color:#fff!important}

/* ── HERO SLIDER ─────────────────────────────────────────────────── */
.home-slider .home{min-height:280px!important;background-size:cover!important;background-position:center!important;display:flex!important;align-items:center!important}
.home-slider .slider-contain h1{font-size:28px!important;font-weight:900!important;color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,0.5)!important;margin-bottom:16px!important}
.home-slider .slider-contain h4{font-size:13px!important;color:rgba(255,255,255,0.85)!important;font-weight:500!important;margin-bottom:6px!important;text-transform:uppercase!important;letter-spacing:2px!important}
.slick-dots li button:before{color:rgba(255,255,255,0.5)!important;font-size:8px!important}
.slick-dots li.slick-active button:before{color:var(--ff-orange)!important}
.slick-prev:before,.slick-next:before{color:var(--ff-orange)!important;font-size:22px!important}

/* ── BLINKIT HOME SECTIONS ───────────────────────────────────────── */
.bk-category-strip{background:var(--bk-surface);padding:12px 0 4px;border-bottom:1px solid var(--bk-border);overflow:hidden}
.bk-category-scroll{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:10px;padding:0 12px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap}
.bk-category-scroll::-webkit-scrollbar{display:none}
.bk-category-item{display:inline-flex;flex-direction:column;align-items:center;min-width:72px;max-width:72px;cursor:pointer;text-decoration:none!important;color:var(--bk-dark);flex-shrink:0;flex-grow:0}
.bk-category-icon{width:64px;height:64px;border-radius:14px;background:var(--ff-purple-l);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1.5px solid var(--bk-border);margin-bottom:6px;transition:border-color 0.15s,background 0.15s}
.bk-category-icon img{width:46px;height:46px;object-fit:contain}
.bk-category-item:hover .bk-category-icon,.bk-category-item:active .bk-category-icon{border-color:var(--ff-purple);background:var(--ff-purple-l)}
.bk-category-item span{font-size:10px;font-weight:600;text-align:center;color:var(--bk-dark);line-height:1.3;white-space:normal;word-break:break-word;width:72px}

.bk-section{background:var(--bk-surface);margin:10px 0;padding:14px 16px}
.bk-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bk-section-title{font-size:17px!important;font-weight:800!important;color:var(--bk-dark)!important;margin:0!important}
.bk-see-all{font-size:12px;font-weight:600;color:var(--ff-purple);display:flex;align-items:center;gap:2px}
.bk-see-all:hover{color:var(--ff-orange);text-decoration:underline}

.bk-product-scroll{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bk-product-scroll::-webkit-scrollbar{display:none}

/* Product card */
.bk-prod-card{background:var(--bk-surface);border-radius:12px;border:1px solid var(--bk-border);overflow:hidden;cursor:pointer;transition:box-shadow 0.2s;position:relative;min-width:150px;max-width:170px;flex-shrink:0}
@media(min-width:640px){.bk-prod-card{min-width:168px;max-width:190px}}
.bk-prod-card:hover{box-shadow:var(--bk-shadow)}
.bk-prod-img{background:var(--ff-img-bg);padding:12px;min-height:130px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--bk-border);position:relative}
.bk-prod-img img{max-height:100px;object-fit:contain}
/* z-index: the image link after it is positioned too and used to paint over the badge */
.bk-discount-badge{position:absolute;z-index:1;top:8px;left:8px;background:var(--ff-orange);color:#fff;font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px;line-height:1.4}
.bk-prod-info{padding:8px 10px 10px}
.bk-prod-name{font-size:12px;font-weight:600;color:var(--bk-dark);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk-prod-price-row{display:flex;align-items:center;justify-content:space-between;gap:4px;flex-wrap:wrap}
.bk-prod-price{font-size:14px;font-weight:700;color:var(--bk-dark)}
.bk-prod-mrp{font-size:10px;color:var(--bk-gray-l);text-decoration:line-through}
.bk-add-btn{background:var(--bk-surface);border:1.5px solid var(--ff-purple);color:var(--ff-purple);font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;cursor:pointer;transition:background 0.15s,color 0.15s;white-space:nowrap;letter-spacing:0.3px}
.bk-add-btn:hover,.bk-add-btn:focus{background:var(--ff-purple);color:#fff}

/* Qty stepper */
.bk-qty-stepper{display:flex;align-items:center;border:1.5px solid var(--ff-purple);border-radius:6px;overflow:hidden;background:var(--bk-surface)}
.bk-qty-btn{background:var(--ff-purple);color:#fff;border:none;font-size:15px;font-weight:700;width:26px;height:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.bk-qty-btn:hover{background:var(--ff-purple-d)}
.bk-qty-num{flex:1;font-size:12px;font-weight:700;color:var(--bk-dark);min-width:22px;text-align:center}

/* Promo banners */
.bk-banner-section{padding:14px 16px;background:var(--bk-surface);margin-bottom:10px}
.bk-banner-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.bk-banner-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.bk-banner-grid{grid-template-columns:repeat(3,1fr)}}
.bk-banner-card{border-radius:12px;overflow:hidden;padding:18px;color:#fff;cursor:pointer;min-height:110px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.bk-banner-card.bg-1{background:linear-gradient(135deg,#6B21A8 0%,#4c0fb8 100%)}
.bk-banner-card.bg-2{background:linear-gradient(135deg,#F97316 0%,#EA580C 100%)}
.bk-banner-card.bg-3{background:linear-gradient(135deg,#DC2626 0%,#991b1b 100%)}
.bk-banner-card.bg-4{background:linear-gradient(135deg,#521a82 0%,#6B21A8 100%)}
.bk-banner-title{font-size:16px;font-weight:800;line-height:1.2}
.bk-banner-subtitle{font-size:11px;opacity:0.85;margin-top:3px}
.bk-banner-cta{display:inline-block;background:rgba(255,255,255,0.25);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--r-pill);margin-top:10px;width:fit-content;border:1px solid rgba(255,255,255,0.4);transition:background 0.15s}
.bk-banner-cta:hover{background:rgba(255,255,255,0.4);color:#fff}

/* ── FORMS ───────────────────────────────────────────────────────── */
.form-control{border-radius:var(--r-btn)!important;border:1.5px solid var(--bk-border)!important;font-size:14px!important;color:var(--bk-dark)!important;background:var(--bk-surface)!important;padding:10px 14px!important}
.form-control:focus{border-color:var(--ff-purple)!important;box-shadow:0 0 0 3px rgba(107,33,168,0.15)!important;outline:none!important}
.input-group-text{border-radius:var(--r-btn) 0 0 var(--r-btn)!important;border:1.5px solid var(--bk-border)!important;background:var(--ff-purple-l)!important;font-size:13px!important;font-weight:600!important;color:var(--ff-purple)!important}

/* ── LOGIN / CARDS ───────────────────────────────────────────────── */
.login-page,.register-page{background:var(--bk-bg)!important}
.theme-card{background:var(--bk-surface)!important;border-radius:var(--r-card)!important;border:1px solid var(--bk-border)!important;padding:24px!important;box-shadow:var(--bk-shadow)!important}
.theme-card h3{font-size:22px!important;font-weight:800!important;color:var(--bk-dark)!important}
.theme-form label{font-size:13px!important;font-weight:600!important;color:var(--bk-dark)!important}

/* ── OTP MODAL ───────────────────────────────────────────────────── */
.react-responsive-modal-modal,.otp-modal{border-radius:var(--r-card)!important;padding:28px!important;max-width:380px!important;width:90vw!important;box-shadow:var(--bk-shadow-h)!important}
.react-responsive-modal-closeButton{top:14px!important;right:14px!important}

/* ── COLLECTION / LISTING ────────────────────────────────────────── */
.collection-wrapper{background:var(--bk-bg)!important}
.collection-filter{background:var(--bk-surface)!important;border-radius:var(--r-card)!important;border:1px solid var(--bk-border)!important;padding:16px!important}
.collection-filter-block{border-bottom:1px solid var(--bk-border)!important;padding:12px 0!important}
.collection-filter-block h3{font-size:13px!important;font-weight:700!important;color:var(--bk-dark)!important;text-transform:uppercase!important;letter-spacing:0.5px!important;margin-bottom:8px!important}
.product-top-filter{background:var(--bk-surface)!important;border-radius:var(--r-card)!important;border:1px solid var(--bk-border)!important;padding:10px 16px!important;margin-bottom:16px!important}
.product-wrapper-grid .product-box{margin-bottom:14px!important}

/* ── SINGLE PRODUCT ──────────────────────────────────────────────── */
.product-right h2{font-size:22px!important;font-weight:800!important;color:var(--bk-dark)!important}
.product-right h3{font-size:24px!important;font-weight:700!important;color:var(--ff-purple)!important}
.product-right del{color:var(--bk-gray-l)!important}
.qty-box input{border-radius:var(--r-btn)!important;border:1px solid var(--bk-border)!important}

/* ── CART ────────────────────────────────────────────────────────── */
.cart-section{background:var(--bk-bg)!important}
.order-box{background:var(--bk-surface)!important;border-radius:var(--r-card)!important;border:1px solid var(--bk-border)!important;padding:20px!important}
.order-box .title-box{font-size:15px!important;font-weight:700!important;border-bottom:1px solid var(--bk-border)!important;padding-bottom:10px!important;margin-bottom:12px!important}
.cart-section .table{border-radius:var(--r-card)!important;overflow:hidden!important}
.cart-section .table th{background:var(--ff-purple-l)!important;font-weight:700!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:0.5px!important;color:var(--ff-purple)!important}

/* ── FOOTER ──────────────────────────────────────────────────────── */
footer,.footer-theme,.footer-theme2{background:#1C1C1C!important;color:#cccccc!important}
.footer-theme .footer-title,.footer-theme2 .footer-title,footer h4{color:#fff!important;font-size:13px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:0.8px!important;margin-bottom:14px!important}
.footer-theme ul li a,.footer-theme2 ul li a{color:#aaaaaa!important;font-size:12px!important}
.footer-theme ul li a:hover{color:var(--ff-orange)!important}
.sub-footer{background:#111!important;border-top:1px solid #2a2a2a!important;padding:12px 0!important}
.sub-footer p{color:#777!important;font-size:12px!important;margin:0!important}

/* ── MOBILE BOTTOM NAV ───────────────────────────────────────────── */
.mobile-fix-option{padding-bottom:64px}
.bottom-fixed{display:none!important}

/* ── ALERTS / TOASTS ─────────────────────────────────────────────── */
.alert-danger{border-radius:var(--r-btn)!important;border:none!important;background:#fff0f0!important;color:var(--ff-red)!important}
.alert-success{border-radius:var(--r-btn)!important;border:none!important;background:var(--ff-purple-l)!important;color:var(--ff-purple)!important}
.Toastify__toast--success{background:var(--ff-purple)!important;border-radius:10px!important}
.Toastify__toast--error{background:var(--ff-red)!important;border-radius:10px!important}
.Toastify__toast{box-shadow:var(--bk-shadow)!important}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(min-width:993px){
  .home-slider .home{min-height:380px!important}
  .home-slider .slider-contain h1{font-size:44px!important}
  .bk-section{padding:20px 24px;margin:14px 0}
  .bk-section-title{font-size:20px!important}
}
@media(max-width:992px){
  .top-header{display:none!important}
  .compare-mobile{display:none!important}
}

/* ── MISC ────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--ff-purple-l)}
::-webkit-scrollbar-thumb{background:var(--ff-purple);border-radius:3px;opacity:0.5}
::selection{background:var(--ff-orange);color:#fff}
.nav-tabs .nav-link{color:var(--bk-gray)!important;font-weight:600!important;border:none!important}
.nav-tabs .nav-link.active{color:var(--ff-purple)!important;border-bottom:2px solid var(--ff-purple)!important;background:transparent!important}
.modal-dialog .modal-content{border-radius:var(--r-card)!important;overflow:hidden!important}

/* ── BK HOME PAGE ────────────────────────────────────────────────── */
.bk-home{background:var(--bk-bg);padding-bottom:80px}

/* ── SUBCATEGORY ROW ─────────────────────────────────────────────── */
.bk-subcategory-row{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:10px 12px 12px;background:var(--ff-purple-l);border-top:1px solid var(--bk-border);scrollbar-width:none}
.bk-subcategory-row::-webkit-scrollbar{display:none}
.bk-subcategory-chip{display:inline-flex;align-items:center;flex-shrink:0;padding:6px 14px;background:#fff;border:1.5px solid var(--ff-purple);border-radius:var(--r-pill);font-size:12px;font-weight:600;color:var(--ff-purple);text-decoration:none!important;transition:background 0.15s,color 0.15s;white-space:nowrap}
.bk-subcategory-chip:hover{background:var(--ff-purple);color:#fff}

/* ── CATEGORY ACTIVE STATE ───────────────────────────────────────── */
.bk-category-icon.bk-cat-active{background:var(--ff-purple)!important;border-color:var(--ff-purple)!important}
.bk-category-icon.bk-cat-active i{color:#fff!important}
.bk-cat-label-active{color:var(--ff-purple)!important;font-weight:700!important}

/* ── BK BOTTOM NAV ───────────────────────────────────────────────── */
.bk-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--bk-border);display:flex;align-items:center;justify-content:space-around;padding:4px 0 calc(4px + env(safe-area-inset-bottom));z-index:1000;box-shadow:0 -2px 12px rgba(107,33,168,0.12);height:58px}
.bk-bottom-nav .bk-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--bk-gray-l);font-size:9px;font-weight:600;cursor:pointer;flex:1;padding:2px 0;background:none;border:none;text-decoration:none}
.bk-bottom-nav .bk-nav-item i{font-size:20px;color:var(--bk-gray-l)}
.bk-bottom-nav .bk-nav-item:hover i,.bk-bottom-nav .bk-nav-item.bk-active i{color:var(--ff-purple)}
.bk-bottom-nav .bk-nav-item:hover span,.bk-bottom-nav .bk-nav-item.bk-active span{color:var(--ff-purple)}
.bk-bottom-nav .bk-cart-badge{position:absolute;top:-4px;right:calc(50% - 22px);background:var(--ff-orange);color:#fff;border-radius:50%;font-size:8px;font-weight:700;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
@media(min-width:993px){.bk-bottom-nav{display:none}}
@media(max-width:992px){body{padding-bottom:60px}}

/* ── BK SERVICE STRIP ────────────────────────────────────────────── */
.bk-service-strip{display:flex;justify-content:space-around;background:#fff;border-radius:var(--r-card);margin:12px 12px 0;padding:14px 8px;box-shadow:var(--bk-shadow)}
.bk-service-item{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--bk-gray)}
.bk-service-item i{font-size:22px;color:var(--ff-purple)}

/* ── BK FOOTER ───────────────────────────────────────────────────── */
.bk-footer{background:#1C1C1C;color:#ccc;margin-top:24px}
.bk-footer-inner{max-width:1280px;margin:0 auto;padding:32px 20px 16px}
.bk-footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
.bk-footer-col h6{color:#fff;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:14px}
.bk-footer-col ul{list-style:none;padding:0;margin:0}
/* display:flex overrides the theme-wide `li{display:inline-block}` (color11.css) that
   otherwise runs these links together on one line; flex-start keeps a wrapped line
   (the address) aligned with its icon instead of tucking under it. */
.bk-footer-col ul li{display:flex;align-items:flex-start;font-size:12px;color:#aaa;margin-bottom:8px;line-height:1.5}
.bk-footer-col ul li i{flex-shrink:0;margin-top:3px}
.bk-footer-col ul li a{color:#aaa;text-decoration:none}
.bk-footer-col ul li a:hover,.bk-footer-col ul li a:focus{color:var(--ff-orange)}
.bk-footer-bottom{border-top:1px solid #2a2a2a;padding-top:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:11px;color:#666}
@media(max-width:600px){.bk-footer-grid{grid-template-columns:1fr 1fr}.bk-footer-bottom{flex-direction:column;text-align:center}}

/* ═══════════════════════════════════════════════════════════════════
   COLLECTION / CATEGORY PAGE  (Amazon / Flipkart standard)
   ═══════════════════════════════════════════════════════════════════ */

/* Page shell */
.ff-collection-page{background:var(--bk-bg);min-height:100vh}

/* Breadcrumb */
.ff-breadcrumb{background:#fff;border-bottom:1px solid var(--bk-border);padding:10px 0}
.ff-breadcrumb-inner{max-width:1280px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bk-gray)}
.ff-breadcrumb a{color:var(--ff-purple);font-weight:500;text-decoration:none!important}
.ff-breadcrumb a:hover{text-decoration:underline!important}
.ff-breadcrumb .fa-chevron-right{font-size:10px;color:var(--bk-gray-l)}
.ff-breadcrumb span{color:var(--bk-dark);font-weight:600}

/* Two-column layout */
.ff-collection-body{display:flex;align-items:flex-start;max-width:1280px;margin:0 auto;padding:16px;gap:16px;position:relative;background:var(--bk-surface)}

/* ── SIDEBAR ── */
.ff-sidebar{width:240px;flex-shrink:0;background:#fff;border-radius:12px;border:1px solid var(--bk-border);position:sticky;top:72px;max-height:calc(100vh - 90px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ff-purple) var(--ff-purple-l)}
.ff-sidebar::-webkit-scrollbar{width:4px}
.ff-sidebar::-webkit-scrollbar-thumb{background:var(--ff-purple);border-radius:4px}
.ff-sidebar-inner{padding:0 0 16px}
.ff-sidebar-close-row{display:none}

/* Filter panel — squared off and denser, matching the rest of the storefront */
.ff-filter-panel{font-size:12.5px}
.ff-filter-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;border-bottom:1px solid var(--bk-border);background:var(--bk-bg);
}
.ff-filter-panel-title{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--ff-purple);text-transform:uppercase;letter-spacing:0.5px}
.ff-filter-clear{border:none;background:none;padding:0;font-size:11px;font-weight:700;color:var(--ff-orange-d);cursor:pointer;text-decoration:underline}
.ff-filter-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 5px;
  background:var(--ff-orange);color:#fff;font-size:9.5px;font-weight:700;
}

.ff-filter-section{border-bottom:1px solid var(--bk-border)}
.ff-filter-section-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 14px;background:none;border:none;cursor:pointer;
  font-size:11px;font-weight:700;color:var(--bk-dark);text-transform:uppercase;letter-spacing:0.6px;
}
.ff-filter-section-label{display:flex;align-items:center;gap:6px}
.ff-filter-section-head i{color:var(--ff-purple);font-size:10px;opacity:0.75}
.ff-filter-section-head:hover{background:var(--ff-purple-l)}
.ff-filter-section.is-open .ff-filter-section-head{color:var(--ff-purple)}
.ff-filter-section-body{padding:2px 14px 12px}
.ff-filter-empty{margin:4px 0 0;font-size:11.5px;color:var(--bk-gray)}

/* Category tree — children read as inside their parent */
.ff-cat-list,.ff-subcat-list{list-style:none;padding:0;margin:0}
.ff-subcat-list{margin:2px 0 2px 8px;padding-left:0;border-left:1px solid var(--bk-border)}
.ff-cat-item{margin:0}
.ff-cat-link{
  display:block;padding:5px 8px;border-radius:0;font-size:12.5px;line-height:1.3;
  color:var(--bk-dark);text-decoration:none!important;transition:background 0.12s,color 0.12s;
}
.ff-cat-link:hover{background:var(--ff-purple-l);color:var(--ff-purple)}
.ff-cat-active{
  background:var(--ff-purple-l)!important;color:var(--ff-purple)!important;font-weight:700!important;
  box-shadow:inset 2px 0 0 var(--ff-purple);
}
.ff-subcat-list .ff-cat-link{font-size:12px}

/* Brand search + list */
.ff-filter-search{
  width:100%;border:1px solid var(--bk-border);border-radius:0;padding:6px 10px;
  font-size:12px;margin-bottom:6px;outline:none;color:var(--bk-dark);height:32px;
}
.ff-filter-search:focus{border-color:var(--ff-purple);box-shadow:0 0 0 2px rgba(107,33,168,0.10)}
.ff-checkbox-list{display:flex;flex-direction:column;max-height:190px;overflow-y:auto}
.ff-checkbox-list::-webkit-scrollbar{width:4px}
.ff-checkbox-list::-webkit-scrollbar-thumb{background:var(--bk-border)}
.ff-checkbox-label{
  display:flex;align-items:center;gap:8px;padding:5px 6px;
  font-size:12.5px;color:var(--bk-dark);cursor:pointer;
}
.ff-checkbox-label input[type=checkbox]{accent-color:var(--ff-purple);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.ff-checkbox-label:hover{background:var(--ff-purple-l);color:var(--ff-purple)}

/* Price / discount ranges */
.ff-range-wrap{padding:10px 4px 4px}
.ff-range-labels{display:flex;justify-content:space-between;gap:8px;margin-bottom:14px}
.ff-range-labels span{
  padding:3px 8px;background:var(--ff-purple-l);color:var(--ff-purple);
  font-size:11px;font-weight:700;
}
.input-range__slider{background:var(--ff-purple)!important;border-color:var(--ff-purple)!important;width:14px;height:14px;margin-top:-9px}
.input-range__track{height:4px}
.input-range__track--active{background:var(--ff-purple)!important}
.input-range__label{display:none}

/* ── MAIN CONTENT ── */
.ff-main{flex:1;min-width:0}

/* Top bar */
.ff-topbar{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:10px;border:1px solid var(--bk-border);padding:10px 16px;margin-bottom:14px;gap:12px}
.ff-filter-toggle{display:none;align-items:center;gap:6px;background:var(--ff-purple);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.ff-filter-toggle:hover{background:var(--ff-purple-d)}
.ff-sort-bar{display:flex;align-items:center;justify-content:space-between;flex:1;gap:12px}
.ff-sort-count{font-size:13px;color:var(--bk-gray)}
.ff-sort-count strong{color:var(--bk-dark);font-weight:700}
.ff-sort-right{display:flex;align-items:center;gap:8px}
.ff-sort-label{font-size:13px;color:var(--bk-gray);white-space:nowrap}
.ff-sort-select{border:1.5px solid var(--bk-border);border-radius:8px;padding:6px 10px;font-size:13px;color:var(--bk-dark);background:#fff;cursor:pointer;outline:none}
.ff-sort-select:focus{border-color:var(--ff-purple)}

/* Product grid */
.ff-product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.ff-product-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.ff-product-grid{grid-template-columns:repeat(4,1fr)}}

/* Product card */
.ff-prod-card{background:#fff;border-radius:12px;border:1px solid var(--bk-border);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow 0.2s,transform 0.15s;position:relative}
.ff-prod-card:hover{box-shadow:var(--bk-shadow-h);transform:translateY(-2px)}
.ff-prod-img-wrap{display:block;background:var(--ff-img-bg);padding:16px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;text-decoration:none!important}
.ff-prod-img{max-width:100%;max-height:160px;object-fit:contain}
.ff-prod-badge{position:absolute;top:8px;left:8px;background:var(--ff-orange);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;line-height:1.5}
.ff-prod-body{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1}
.ff-prod-name{font-size:13px;font-weight:600;color:var(--bk-dark);line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:none!important}
.ff-prod-name:hover{color:var(--ff-purple)}
.ff-prod-brand{font-size:11px;color:var(--bk-gray);margin-bottom:2px;font-weight:500}
.ff-prod-weight{font-size:11px;color:var(--bk-gray-l);margin-bottom:4px}
.ff-prod-pricing{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin-bottom:10px;margin-top:auto}
.ff-prod-price{font-size:15px;font-weight:800;color:var(--bk-dark)}
.ff-prod-mrp{font-size:11px;color:var(--bk-gray-l);text-decoration:line-through}
.ff-prod-discount{font-size:11px;color:var(--ff-orange);font-weight:700}

/* ADD / Qty */
.ff-prod-actions{margin-top:auto}
.ff-add-btn{width:100%;padding:7px;background:#fff;border:1.5px solid var(--ff-purple);color:var(--ff-purple);border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:0.3px;transition:background 0.15s,color 0.15s;display:flex;align-items:center;justify-content:center;gap:6px}
.ff-add-btn:hover{background:var(--ff-purple);color:#fff}
.ff-qty-stepper{display:flex;align-items:center;border:1.5px solid var(--ff-purple);border-radius:0;overflow:hidden;width:100%}
.ff-qty-btn{background:var(--ff-purple);color:#fff;border:none;font-size:16px;font-weight:700;flex:0 0 36px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.12s}
.ff-qty-btn:hover{background:var(--ff-purple-d)}
.ff-qty-num{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--bk-dark)}

/* Loading / Empty */
.ff-loading{display:flex;justify-content:center;padding:24px}
.ff-spinner{width:32px;height:32px;border:3px solid var(--ff-purple-l);border-top-color:var(--ff-purple);border-radius:50%;animation:spin 0.7s linear infinite}
.ff-end-msg{text-align:center;color:var(--bk-gray);font-size:13px;padding:20px;border-top:1px dashed var(--bk-border);margin-top:12px}
.ff-empty{text-align:center;padding:48px 16px;background:#fff;border-radius:12px;border:1px solid var(--bk-border)}
.ff-empty-img{max-width:200px;margin-bottom:16px;opacity:0.7}
.ff-empty h3{font-size:18px;font-weight:700;color:var(--bk-dark);margin-bottom:8px}
.ff-empty p{font-size:14px;color:var(--bk-gray);margin-bottom:20px}

/* Mobile filter overlay */
.ff-filter-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1050}

/* ── RESPONSIVE ── */
@media(max-width:992px){
  .ff-collection-body{padding:12px 10px;gap:0}
  .ff-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:1051;border-radius:0;max-height:100vh;transform:translateX(-100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1)}
  .ff-sidebar-open{transform:translateX(0)}
  .ff-sidebar-close-row{display:flex;justify-content:flex-end;padding:12px 16px 0;border-bottom:1px solid var(--bk-border);margin-bottom:4px}
  .ff-sidebar-close{background:none;border:none;font-size:13px;color:var(--ff-purple);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
  .ff-filter-toggle{display:flex}
  .ff-product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ff-prod-img-wrap{padding:10px}
  .ff-prod-img{max-height:120px}
}
@media(max-width:480px){
  .ff-sort-count{display:none}
}

/* ── Dashboard › Orders ──────────────────────────────────────────
   Compact order list in the style of a marketplace orders page:
   meta strip, status line, thumbnails, two actions. Mobile-first —
   the min-width block below only loosens spacing on larger screens. */
.ff-dash-section{padding-top:14px;padding-bottom:24px}
.ff-ord-col{padding-left:10px;padding-right:10px}
.ff-ord-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.ff-ord-head h2{font-size:17px;font-weight:700;margin:0;color:var(--bk-dark)}
.ff-ord-head span{font-size:11px;color:var(--bk-dark);opacity:0.6}

.ff-ord-card{border:1px solid var(--bk-border);border-radius:0;background:var(--bk-surface);margin-bottom:10px;overflow:hidden}
.ff-ord-meta{display:flex;flex-wrap:wrap;gap:14px;padding:11px 14px;background:var(--bk-bg);border-bottom:1px solid var(--bk-border)}
.ff-ord-meta-cell{display:flex;flex-direction:column;line-height:1.3}
.ff-ord-meta-cell span{font-size:9px;text-transform:uppercase;letter-spacing:0.6px;color:var(--bk-dark);opacity:0.55}
.ff-ord-meta-cell strong{font-size:12px;font-weight:600;color:var(--bk-dark)}
.ff-ord-meta-id{margin-left:auto;text-align:right}

.ff-ord-body{padding:14px}
.ff-ord-status{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:600;color:var(--ff-orange-d)}
.ff-ord-status i{font-size:13px}
.ff-ord-status-delivered{color:#1B8A3A}
.ff-ord-status-cancelled{color:var(--ff-red)}
.ff-ord-eta{width:100%;font-size:11px;font-weight:400;color:var(--bk-dark);opacity:0.65}

.ff-ord-items{display:flex;align-items:center;gap:10px;margin-top:8px}
.ff-ord-thumbs{display:flex;gap:4px;flex-shrink:0}
.ff-ord-thumb{width:44px;height:44px;min-height:0;border-radius:0;object-fit:cover;border:1px solid var(--bk-border);background:#fff}
.ff-ord-thumb .prod-img-placeholder-icon{font-size:16px}
.ff-ord-thumb-more{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ff-purple);background:var(--ff-purple-l)}
.ff-ord-names{margin:0;font-size:12px;line-height:1.35;color:var(--bk-dark);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.ff-ord-actions{display:flex;gap:8px;padding:0 14px 14px}
.ff-ord-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:0;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none}
.ff-ord-btn-primary{background:var(--ff-purple);color:#fff}
.ff-ord-btn-primary:hover,.ff-ord-btn-primary:focus{background:var(--ff-purple-d);color:#fff}
.ff-ord-btn-soft{background:var(--ff-purple-l);color:var(--ff-purple)}
.ff-ord-btn-soft:hover,.ff-ord-btn-soft:focus{background:#E7D3FF;color:var(--ff-purple)}

.ff-ord-empty{text-align:center;padding:34px 16px;border:1px dashed var(--bk-border);border-radius:0;background:var(--bk-surface)}
.ff-ord-empty i{font-size:34px;color:var(--ff-purple);opacity:0.35}
.ff-ord-empty h3{font-size:15px;font-weight:700;margin:10px 0 4px;color:var(--bk-dark)}
.ff-ord-empty p{font-size:12px;color:var(--bk-dark);opacity:0.65;margin-bottom:14px}
.ff-ord-loading,.ff-ord-end{margin:0;padding:10px 0;text-align:center;font-size:11px;color:var(--bk-dark);opacity:0.6}

/* ── Order detail / tracking modal ── */
/* The library injects its own styles at the top of <head>, so these class
   overrides win on source order. Keep margin:auto — the overlay is a flex row
   and the default centering depends on it. */
.ff-od-overlay{background:rgba(28,28,28,0.55);padding:12px}
.ff-od-modal{width:100%;max-width:560px;margin:auto;padding:0;border-radius:0;box-shadow:var(--bk-shadow-h)}
.ff-od-close{top:10px;right:10px}
.ff-od{padding:18px;font-size:12px;color:var(--bk-dark)}
.ff-od-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-right:26px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--bk-border)}
.ff-od-head h4{margin:0;font-size:14px;font-weight:700}
.ff-od-sub{font-size:11px;opacity:0.6}
.ff-od-badge{margin-left:auto;padding:3px 8px;border-radius:0;background:var(--ff-purple-l);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px}

.ff-od-items{display:flex;flex-direction:column;gap:8px;max-height:210px;overflow-y:auto}
.ff-od-item{display:flex;align-items:center;gap:10px}
.ff-od-item-img{width:40px;height:40px;min-height:0;flex-shrink:0;border-radius:0;object-fit:cover;border:1px solid var(--bk-border)}
.ff-od-item-img .prod-img-placeholder-icon{font-size:15px}
.ff-od-item-info{display:flex;flex-direction:column;flex:1;min-width:0}
.ff-od-item-name{font-size:12px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-od-item-qty{font-size:11px;opacity:0.6}
.ff-od-item-price{font-size:12px;font-weight:700;white-space:nowrap}
.ff-od-empty-items{margin:0;font-size:12px;opacity:0.6}

.ff-od-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.ff-od-block{padding:14px;border-radius:0;background:var(--bk-bg)}
.ff-od-block h5{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;opacity:0.6}
.ff-od-list{list-style:none;margin:0;padding:0}
.ff-od-list li{display:flex;justify-content:space-between;padding:2px 0;font-size:12px}
.ff-od-list-total{margin-top:4px;padding-top:6px;border-top:1px solid var(--bk-border);font-weight:700}
.ff-od-address{margin:0;font-size:12px;line-height:1.5}
.ff-od-note{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:11px;opacity:0.7}

.ff-track{list-style:none;margin:0 0 12px;padding:0}
.ff-track-step{display:flex;gap:10px;position:relative;padding-bottom:14px}
.ff-track-step:last-child{padding-bottom:0}
.ff-track-step:not(:last-child):before{content:'';position:absolute;left:6px;top:15px;bottom:2px;width:2px;background:var(--bk-border)}
.ff-track-step.is-done:not(:last-child):before{background:var(--ff-purple)}
.ff-track-step i{position:relative;z-index:1;font-size:14px;line-height:1;color:var(--bk-gray-l);background:var(--bk-surface)}
.ff-track-step.is-done i{color:var(--ff-purple)}
.ff-track-text{display:flex;flex-direction:column;margin-top:-2px;line-height:1.35}
.ff-track-title{font-size:12px;font-weight:600}
.ff-track-sub{font-size:11px;opacity:0.6}

@media(min-width:768px){
  .ff-dash-section{padding-top:20px}
  .ff-ord-head h2{font-size:20px}
  .ff-ord-meta{gap:26px;padding:12px 18px}
  .ff-ord-body{padding:16px 18px}
  .ff-ord-actions{padding:0 18px 16px}
  .ff-ord-eta{width:auto}
  .ff-ord-thumb{width:52px;height:52px}
  .ff-od{padding:22px}
  .ff-od-grid{grid-template-columns:1fr 1fr}
}

/* ── Cart ────────────────────────────────────────────────────────────
   Row-per-item list instead of a wide table (the old markup rendered the
   same item twice — once for the table, once for a mobile block). Summary
   sits beside the list on desktop and collapses to a sticky bar on mobile. */
.ff-cart{padding-bottom:76px}
.ff-cart-wrap{padding-top:10px}
.ff-cart-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.ff-cart-head h2{margin:0;font-size:17px;font-weight:700;color:var(--bk-dark)}
.ff-cart-head span{font-size:11px;color:var(--bk-dark);opacity:0.6}
.ff-cart-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}

/* One continuous list rather than separated cards — no gutters between rows */
.ff-cart-items{display:flex;flex-direction:column}
.ff-cart-items > .ff-cart-item + .ff-cart-item{border-top:none}
.ff-cart-item{display:flex;gap:10px;padding:9px 10px;background:var(--bk-surface);border:1px solid var(--bk-border);border-radius:0}
.ff-cart-thumb-link{flex-shrink:0;display:block}
.ff-cart-thumb{width:52px;height:52px;min-height:0;border-radius:0;object-fit:cover;border:1px solid var(--bk-border);background:#fff}
.ff-cart-thumb .prod-img-placeholder-icon{font-size:20px}
.ff-cart-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ff-cart-name{font-size:12px;font-weight:600;line-height:1.3;color:var(--bk-dark);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.ff-cart-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px}
.ff-cart-final{font-size:12.5px;font-weight:700;color:var(--bk-dark)}
.ff-cart-mrp{font-size:11px;color:var(--bk-dark);opacity:0.5;text-decoration:line-through}
.ff-cart-off{font-size:10px;font-weight:700;color:#1B8A3A}

.ff-cart-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.ff-qty{display:inline-flex;align-items:center;border:1px solid var(--bk-border);border-radius:0;overflow:hidden;background:#fff}
.ff-qty-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;background:var(--ff-purple-l);color:var(--ff-purple);font-size:9.5px;cursor:pointer;padding:0}
.ff-qty-btn:disabled{opacity:0.4;cursor:not-allowed}
.ff-qty-val{min-width:24px;text-align:center;font-size:11.5px;font-weight:700;color:var(--bk-dark)}
.ff-cart-line-total{font-size:13px;font-weight:700;color:var(--bk-dark);margin-left:auto}
.ff-cart-remove{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:none;padding:0;font-size:12px;color:var(--bk-dark);opacity:0.5;cursor:pointer;flex-shrink:0}
.ff-cart-remove:hover{opacity:1;color:var(--ff-red)}

.ff-cart-notes{display:flex;flex-wrap:wrap;gap:8px;font-size:10px;margin-top:1px}
.ff-cart-saved{display:inline-flex;align-items:center;gap:4px;color:#1B8A3A;font-weight:600}
.ff-cart-stock{color:var(--ff-orange-d);font-weight:600}

.ff-cart-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:0;padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none}
.ff-cart-btn-primary{background:var(--ff-purple);color:#fff}
.ff-cart-btn-primary:hover,.ff-cart-btn-primary:focus{background:var(--ff-purple-d);color:#fff}
.ff-cart-btn-soft{background:var(--ff-purple-l);color:var(--ff-purple)}
.ff-cart-btn-soft:hover,.ff-cart-btn-soft:focus{background:#E7D3FF;color:var(--ff-purple)}
.ff-cart-continue{align-self:flex-start;margin-top:2px}

.ff-cart-summary{padding:16px;background:var(--bk-surface);border:1px solid var(--bk-border);border-radius:0}
.ff-cart-summary h5{margin:0 0 8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--bk-dark);opacity:0.6}
.ff-cart-lines{list-style:none;margin:0;padding:0}
.ff-cart-lines li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px;color:var(--bk-dark)}
.ff-cart-neg{color:#1B8A3A;font-weight:600}
.ff-cart-muted{opacity:0.55}
.ff-cart-lines-total{margin-top:5px;padding-top:7px;border-top:1px solid var(--bk-border);font-size:13px;font-weight:700}
.ff-cart-summary-note{display:flex;align-items:center;gap:6px;margin:8px 0 0;padding:6px 8px;border-radius:0;background:rgba(27,138,58,0.08);font-size:11px;font-weight:600;color:#1B8A3A}
.ff-cart-summary-fine{margin:8px 0 10px;font-size:10.5px;color:var(--bk-dark);opacity:0.55}
.ff-cart-checkout{width:100%}

.ff-cart-empty{text-align:center;padding:38px 16px;border:1px dashed var(--bk-border);border-radius:0;background:var(--bk-surface)}
.ff-cart-empty i{font-size:36px;color:var(--ff-purple);opacity:0.35}
.ff-cart-empty h3{margin:10px 0 4px;font-size:15px;font-weight:700;color:var(--bk-dark)}
.ff-cart-empty p{margin-bottom:14px;font-size:12px;color:var(--bk-dark);opacity:0.65}

.ff-cart-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bk-surface);border-top:1px solid var(--bk-border);box-shadow:0 -2px 14px rgba(107,33,168,0.10)}
.ff-cart-bar-total{display:flex;flex-direction:column;line-height:1.2}
.ff-cart-bar-total span{font-size:10px;text-transform:uppercase;letter-spacing:0.6px;opacity:0.55}
.ff-cart-bar-total strong{font-size:15px;font-weight:700}
.ff-cart-bar-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:0;background:var(--ff-purple);color:#fff;font-size:13px;font-weight:700;text-decoration:none}
.ff-cart-bar-btn:hover,.ff-cart-bar-btn:focus{background:var(--ff-purple-d);color:#fff}

@media(min-width:992px){
  .ff-cart{padding-bottom:24px}
  .ff-cart-wrap{padding-top:18px}
  .ff-cart-head h2{font-size:20px}
  .ff-cart-grid{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
  .ff-cart-item{padding:11px 12px}
  .ff-cart-thumb{width:58px;height:58px}
  .ff-cart-name{font-size:12.5px}
  .ff-cart-summary{position:sticky;top:84px}
  .ff-cart-bar{display:none}
}

/* ── Checkout ────────────────────────────────────────────────────────
   Four mandatory steps, gated in order: a step is locked until the one
   before it is satisfied, and only the active step renders its body. */
.ff-co{padding-bottom:24px}
.ff-co-wrap{padding-top:12px}
.ff-co-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.ff-co-head h2{margin:0;font-size:17px;font-weight:700;color:var(--bk-dark)}
.ff-co-head span{font-size:11px;color:var(--bk-dark);opacity:0.6}
.ff-co-progress{height:3px;border-radius:0;background:var(--bk-border);overflow:hidden;margin-bottom:12px}
.ff-co-progress-fill{display:block;height:100%;background:var(--ff-purple);transition:width 0.35s ease}
.ff-co-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.ff-co-steps{display:flex;flex-direction:column;gap:8px}

.ff-step{background:var(--bk-surface);border:1px solid var(--bk-border);border-radius:0;overflow:hidden}
/* The theme pads every <section> 30px at the top; a step card should not have that blank strip */
section.ff-step{padding:0}
.ff-step.is-locked{opacity:0.55}
.ff-step.is-active{border-color:var(--ff-purple);box-shadow:var(--bk-shadow)}
.ff-step-head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.ff-step-head.is-active{background:var(--ff-purple-l)}
.ff-step-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bk-border);color:var(--bk-dark);font-size:11px;font-weight:700}
.ff-step-head.is-active .ff-step-num{background:var(--ff-purple);color:#fff}
.ff-step-head.is-done .ff-step-num{background:#1B8A3A;color:#fff}
.ff-step-titles{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.ff-step-title{font-size:12.5px;font-weight:700;color:var(--bk-dark)}
.ff-step-title i{margin-right:5px;color:var(--ff-purple)}
.ff-step-summary{font-size:11px;color:var(--bk-dark);opacity:0.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-step-change{border:none;background:var(--ff-purple-l);color:var(--ff-purple);font-size:11px;font-weight:700;padding:4px 10px;border-radius:0;cursor:pointer}
.ff-step-lock{font-size:11px;opacity:0.4}
.ff-step-body{padding:14px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;border-top:1px solid var(--bk-border)}
.ff-step-loading{flex-direction:row;align-items:center;gap:8px;padding:16px 14px;font-size:12px;opacity:0.7}
.ff-step-note{margin:0;font-size:11px;color:var(--bk-dark);opacity:0.65}
.ff-step-error{color:var(--ff-red);opacity:1;font-weight:600;display:flex;align-items:center;gap:6px}

.ff-co-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:0;padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none}
.ff-co-btn-primary{background:var(--ff-purple);color:#fff}
.ff-co-btn-primary:hover,.ff-co-btn-primary:focus{background:var(--ff-purple-d);color:#fff}
.ff-co-btn-primary:disabled{background:var(--bk-gray-l);cursor:not-allowed}
.ff-co-btn-soft{background:var(--ff-purple-l);color:var(--ff-purple)}
.ff-co-btn-soft:hover,.ff-co-btn-soft:focus{background:#E7D3FF;color:var(--ff-purple)}

/* Step 1 — addresses */
.ff-addr-grid{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
.ff-addr-card{border:1px solid var(--bk-border);border-radius:0;padding:14px;background:var(--bk-surface)}
.ff-addr-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ff-addr-top h4{margin:0;font-size:12.5px;font-weight:700;color:var(--bk-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-addr-edit{border:none;background:none;padding:0;font-size:11px;font-weight:600;color:var(--ff-purple);cursor:pointer;flex-shrink:0}
.ff-addr-body{margin:6px 0 10px;font-size:11.5px;line-height:1.5;color:var(--bk-dark);opacity:0.8}
.ff-addr-pick{width:100%}
.ff-addr-add{display:flex;align-items:center;gap:12px;width:100%;min-height:88px;padding:14px;border:1px dashed var(--ff-purple);border-radius:0;background:var(--bk-bg);text-align:left;cursor:pointer;transition:background 0.15s}
.ff-addr-add:hover{background:var(--ff-purple-l)}
.ff-addr-add-icon{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--ff-purple);color:#fff;font-size:13px}
.ff-addr-add-text{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.ff-addr-add-text strong{font-size:12.5px;font-weight:700;color:var(--ff-purple)}
.ff-addr-add-text span{font-size:11px;color:var(--bk-dark);opacity:0.6}

/* Step 2 — availability */
.ff-avail-block{width:100%}
.ff-avail-block h5{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--bk-dark);opacity:0.6}
.ff-avail-out h5{color:var(--ff-orange-d);opacity:1}
.ff-avail-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--bk-border)}
.ff-avail-item:last-child{border-bottom:none}
.ff-avail-img{width:34px;height:34px;min-height:0;flex-shrink:0;border-radius:0;object-fit:cover;border:1px solid var(--bk-border)}
.ff-avail-img .prod-img-placeholder-icon{font-size:13px}
.ff-avail-name{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-avail-price{font-size:12px;font-weight:700}
.ff-avail-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:0}
.ff-avail-tag-out{background:rgba(220,38,38,0.10);color:var(--ff-red)}

/* Step 3 — slots */
/* Reservation banner — label, live mm:ss, and a bar that drains over the hold */
.ff-hold{width:100%;padding:11px 14px 10px;border:1px solid rgba(249,115,22,0.30);border-radius:0;background:rgba(249,115,22,0.08)}
.ff-hold-row{display:flex;align-items:center;gap:7px}
.ff-hold-icon{font-size:13px;color:var(--ff-orange-d)}
.ff-hold-label{font-size:11.5px;font-weight:700;color:var(--ff-orange-d)}
.ff-hold-bar{display:block;height:3px;margin-top:7px;border-radius:0;background:rgba(249,115,22,0.20);overflow:hidden}
.ff-hold-bar-fill{display:block;height:100%;border-radius:0;background:var(--ff-orange);transition:width 1s linear}
.ff-hold.is-urgent{border-color:rgba(220,38,38,0.35);background:rgba(220,38,38,0.07)}
.ff-hold.is-urgent .ff-hold-icon,.ff-hold.is-urgent .ff-hold-label{color:var(--ff-red)}
.ff-hold.is-urgent .ff-hold-bar{background:rgba(220,38,38,0.20)}
.ff-hold.is-urgent .ff-hold-bar-fill{background:var(--ff-red)}

/* Single-gateway pay panel */
.ff-pay-panel{width:100%;padding:16px;border:1px solid var(--bk-border);border-radius:0;background:var(--bk-bg)}
.ff-pay-amount{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ff-pay-amount span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;opacity:0.6}
.ff-pay-amount strong{font-size:20px;font-weight:800;color:var(--bk-dark)}
.ff-pay-modes{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:11px;color:var(--bk-dark);opacity:0.65}
.ff-slot-days{display:flex;gap:6px;width:100%;overflow-x:auto;padding-bottom:2px}
.ff-slot-day{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;padding:7px 8px;border:1px solid var(--bk-border);border-radius:0;background:var(--bk-surface);cursor:pointer;line-height:1.2}
.ff-slot-day.is-active{border-color:var(--ff-purple);background:var(--ff-purple-l)}
.ff-slot-dow{font-size:10px;text-transform:uppercase;letter-spacing:0.4px;opacity:0.6}
/* Today / Tomorrow are named days — call them out over a plain weekday */
.ff-slot-day.is-named .ff-slot-dow{font-weight:800;opacity:1;color:var(--ff-purple)}
.ff-slot-day.is-named{border-color:var(--ff-purple)}
.ff-slot-day.is-named.is-active .ff-slot-dow{color:var(--ff-purple)}
.ff-slot-date{font-size:15px;font-weight:700;color:var(--bk-dark)}
.ff-slot-mon{font-size:10px;opacity:0.6}
.ff-slot-times{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.ff-slot-time{position:relative;padding:8px 6px;border:1px solid var(--bk-border);border-radius:0;background:var(--bk-surface);font-size:11.5px;font-weight:600;color:var(--bk-dark);cursor:pointer}
.ff-slot-time.is-active{border-color:var(--ff-purple);background:var(--ff-purple-l);color:var(--ff-purple)}
.ff-slot-time.is-full{opacity:0.45;cursor:not-allowed;text-decoration:line-through}
.ff-slot-full{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;text-decoration:none}

/* Step 4 — payment */
.ff-pay-list{display:flex;flex-direction:column;gap:8px;width:100%}
.ff-pay-option{display:flex;align-items:center;gap:10px;margin:0;padding:14px;border:1px solid var(--bk-border);border-radius:0;background:var(--bk-surface);cursor:pointer}
.ff-pay-option.is-active{border-color:var(--ff-purple);background:var(--ff-purple-l)}
.ff-pay-option input{position:absolute;opacity:0;width:0;height:0}
.ff-pay-radio{flex-shrink:0;width:16px;height:16px;border-radius:50%;border:2px solid var(--bk-gray-l);position:relative}
.ff-pay-option.is-active .ff-pay-radio{border-color:var(--ff-purple)}
.ff-pay-option.is-active .ff-pay-radio:after{content:'';position:absolute;top:3px;left:3px;width:6px;height:6px;border-radius:50%;background:var(--ff-purple)}
.ff-pay-icon{font-size:16px;color:var(--ff-purple);width:20px;text-align:center}
.ff-pay-text{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.ff-pay-title{font-size:12.5px;font-weight:700;color:var(--bk-dark)}
.ff-pay-sub{font-size:11px;opacity:0.6}
.ff-pay-tag{flex-shrink:0;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:3px 7px;border-radius:0;background:rgba(27,138,58,0.12);color:#1B8A3A}
.ff-co-place{width:100%;padding:11px 16px;font-size:13px}
.ff-pay-secure{display:flex;align-items:center;gap:6px}

/* Summary rail */
.ff-co-summary{padding:16px;background:var(--bk-surface);border:1px solid var(--bk-border);border-radius:0}
.ff-co-summary h5{margin:0 0 8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--bk-dark);opacity:0.6}
.ff-co-lines{list-style:none;margin:0 0 10px;padding:0}
.ff-co-lines li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px;color:var(--bk-dark)}
.ff-co-neg{color:#1B8A3A;font-weight:600}
.ff-co-muted{opacity:0.55;font-style:normal;font-size:11px}
.ff-co-lines-total{margin-top:5px;padding-top:7px;border-top:1px solid var(--bk-border);font-size:13px;font-weight:700}
.ff-co-back{width:100%}

/* Payment return page */
.ff-pr{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.ff-pr-card{width:100%;max-width:420px;text-align:center;padding:28px 20px;background:var(--bk-surface);border:1px solid var(--bk-border);border-radius:0;box-shadow:var(--bk-shadow)}
.ff-pr-icon{font-size:44px;margin-bottom:10px}
.ff-pr-icon-ok{color:#1B8A3A}
.ff-pr-icon-fail{color:var(--ff-red)}
.ff-pr-icon-wait{color:var(--ff-orange)}
.ff-pr-card h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--bk-dark)}
.ff-pr-card p{margin:0 0 6px;font-size:12px;color:var(--bk-dark);opacity:0.7}
.ff-pr-order{display:inline-block;margin:8px 0 14px;padding:5px 12px;border-radius:0;background:var(--ff-purple-l);color:var(--ff-purple);font-size:12px;font-weight:700}
.ff-pr-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}

@media(min-width:600px){
  .ff-addr-grid{grid-template-columns:1fr 1fr}
  .ff-slot-times{grid-template-columns:repeat(3,1fr)}
  .ff-pr-actions{flex-direction:row;justify-content:center}
}
@media(min-width:992px){
  .ff-co-wrap{padding-top:18px}
  .ff-co-head h2{font-size:20px}
  .ff-co-grid{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
  .ff-co-summary{position:sticky;top:84px}
  .ff-step-body{padding:18px}
  .ff-step-head{padding:14px 18px}
}

/* Checkout hold countdown */
.ff-timer{display:inline-flex;align-items:center;margin-left:auto;padding:2px 9px;border-radius:0;background:var(--ff-orange);color:#fff;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0.5px}
.ff-hold.is-urgent .ff-timer{background:var(--ff-red);animation:ff-timer-pulse 1s ease-in-out infinite}
@keyframes ff-timer-pulse{0%,100%{opacity:1}50%{opacity:0.65}}

/* ── Address form modal ──────────────────────────────────────────── */
.ff-af-modal{width:100%;max-width:620px;margin:auto;padding:0;border-radius:0;box-shadow:var(--bk-shadow-h)}
.ff-af{display:flex;flex-direction:column;max-height:88vh;color:var(--bk-dark)}
.ff-af-head{padding:18px 18px 14px;border-bottom:1px solid var(--bk-border);background:var(--ff-purple-l)}
.ff-af-head h4{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;color:var(--ff-purple)}
.ff-af-head p{margin:3px 0 0;font-size:11.5px;color:var(--bk-dark);opacity:0.6}
.ff-af-body{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.ff-af-section h5{margin:0 0 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;opacity:0.55}
.ff-af-grid{display:grid;grid-template-columns:1fr;gap:12px}
.ff-af-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.ff-af-field label{margin:0;font-size:11px;font-weight:600;color:var(--bk-dark);opacity:0.75}
.ff-af-input{width:100%;height:38px;padding:0 12px;border:1px solid var(--bk-border);border-radius:0;background:var(--bk-surface);color:var(--bk-dark);font-size:12.5px;outline:none;transition:border-color 0.15s,box-shadow 0.15s}
.ff-af-input:focus{border-color:var(--ff-purple);box-shadow:0 0 0 2px rgba(107,33,168,0.12)}
.ff-af-input:disabled{background:var(--bk-bg);opacity:0.7;cursor:not-allowed}
select.ff-af-input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ff-purple) 50%),linear-gradient(135deg,var(--ff-purple) 50%,transparent 50%);background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.ff-af-error{font-size:10.5px;color:var(--ff-red);line-height:1.3}
.ff-af-error .srv-validation-message{color:var(--ff-red)}
.ff-af-check{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12px;cursor:pointer}
.ff-af-check input{position:absolute;opacity:0;width:0;height:0}
.ff-af-check-box{flex-shrink:0;width:17px;height:17px;border:1.5px solid var(--bk-gray-l);display:flex;align-items:center;justify-content:center;color:transparent;font-size:9px}
.ff-af-check input:checked + .ff-af-check-box{background:var(--ff-purple);border-color:var(--ff-purple);color:#fff}
.ff-af-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--bk-border);background:var(--bk-bg)}
@media(min-width:600px){
  .ff-af-grid{grid-template-columns:1fr 1fr}
  .ff-af-wide{grid-column:1 / -1}
}

/* ── Address location picker ─────────────────────────────────────── */
.ff-map{width:100%;display:flex;flex-direction:column;gap:8px}
.ff-map-search{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ff-map-search > i{position:absolute;left:11px;top:12px;font-size:12px;color:var(--ff-purple);pointer-events:none}
.ff-map-search .ff-af-input{flex:1;min-width:180px;padding-left:32px}
.ff-map-gps{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--ff-purple);background:var(--ff-purple-l);color:var(--ff-purple);font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ff-map-gps:disabled{opacity:0.6;cursor:not-allowed}
.ff-map-canvas{position:relative;width:100%;border:1px solid var(--bk-border);background:var(--bk-bg);overflow:hidden}
.ff-map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--bk-dark);opacity:0.6}
.ff-map-note{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:11px;color:var(--bk-dark);opacity:0.65;line-height:1.4}
.ff-map-note.is-set{color:var(--ff-purple);opacity:1;font-weight:600}
.ff-map-note-warn{color:var(--ff-orange-d);opacity:1;font-weight:600}
.ff-map-manual{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ff-map-picked{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;padding:8px 10px;background:rgba(27,138,58,0.08);color:#1B8A3A;font-size:11px;font-weight:600;line-height:1.4}

/* Google's Places dropdown is appended to <body>, so it is styled globally */
.pac-container{z-index:100000;border:1px solid var(--bk-border);border-radius:0;box-shadow:var(--bk-shadow-h);font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Roboto',sans-serif;background:var(--bk-surface)}
.pac-item{padding:8px 12px;font-size:12px;color:var(--bk-dark);border-top:1px solid var(--bk-border);cursor:pointer}
.pac-item:first-child{border-top:none}
.pac-item:hover,.pac-item-selected{background:var(--ff-purple-l)}
.pac-item-query{font-size:12.5px;color:var(--bk-dark)}
.pac-matched{color:var(--ff-purple);font-weight:700}
.pac-icon{display:none}
.pac-logo:after{margin:4px 8px}
.ff-addr-pin{display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;padding:3px 8px;background:var(--ff-purple-l);color:var(--ff-purple);font-size:10.5px;font-weight:700;text-decoration:none}
a.ff-addr-pin:hover{background:#E7D3FF;color:var(--ff-purple)}
.ff-af-field label{display:flex;align-items:center;gap:6px;justify-content:space-between}
.ff-af-locked{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:var(--ff-purple);opacity:0.75}
.ff-af-input:disabled{color:var(--bk-dark);opacity:0.85;cursor:not-allowed}

/* Product page without the filter rail — the two panels share the full width */
.ff-pdp-main{margin-left:0;margin-right:0}
.ff-pdp .product-thumbnail{padding-left:0}
.ff-pdp-specs{margin-top:14px}
.ff-pdp-desc{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--bk-dark);opacity:0.8}
.ff-pdp-spec-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.ff-pdp-spec-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--bk-border);font-size:12px;
}
.ff-pdp-spec-list li:last-child{border-bottom:none}
.ff-pdp-spec-list span{color:var(--bk-dark);opacity:0.55}
.ff-pdp-spec-list strong{font-weight:600;color:var(--bk-dark);text-align:right}
@media(min-width:768px){
  .ff-pdp-spec-list{grid-template-columns:1fr 1fr;column-gap:24px}
}

/* Gallery placeholders — ProductImage puts the class on the <img> and on the
   placeholder div, so these size both. */
.ff-pdp-main-img{width:100%;background:var(--bk-surface)}
.prod-img-placeholder.ff-pdp-main-img{min-height:300px;border:1px solid var(--bk-border);border-radius:0}
.prod-img-placeholder.ff-pdp-main-img .prod-img-placeholder-icon{font-size:44px}
.prod-img-placeholder.ff-pdp-thumb{min-height:64px;height:64px;border:1px solid var(--bk-border);border-radius:0}
.prod-img-placeholder.ff-pdp-thumb .prod-img-placeholder-icon{font-size:18px}
@media(min-width:768px){
  .prod-img-placeholder.ff-pdp-main-img{min-height:380px}
}

/* ── Product buy box (marketplace-style) ─────────────────────────────
   Gallery sticks on desktop; the buy box carries brand, price, benefits,
   quantity and the two primary actions. On phones the actions repeat in a
   fixed bar at the bottom of the viewport. */
.ff-pdp .product-thumbnail{align-self:flex-start}
@media(min-width:992px){
  .ff-pdp .product-thumbnail{position:sticky;top:80px}
}

.ff-buybox{padding:4px 0 0}
.ff-bb-brand{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:var(--ff-purple);margin-bottom:3px}
.ff-bb-name{font-size:17px!important;font-weight:700;line-height:1.35;margin:0 0 6px!important;color:var(--bk-dark);text-transform:none!important}
.ff-bb-stock{font-size:11.5px;font-weight:700;color:#1B8A3A;margin-bottom:10px}
.ff-bb-stock.is-out{color:var(--ff-red)}

.ff-bb-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px}
.ff-bb-final{font-size:26px;font-weight:800;color:var(--bk-dark);line-height:1.1}
.ff-bb-mrp{font-size:14px;color:var(--bk-dark);opacity:0.45;text-decoration:line-through}
.ff-bb-off{font-size:12.5px;font-weight:800;color:#1B8A3A}
.ff-bb-tax{font-size:11px;color:var(--bk-dark);opacity:0.55;margin-top:2px}

.ff-bb-benefits{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;padding:10px 0;border-top:1px solid var(--bk-border);border-bottom:1px solid var(--bk-border)}
.ff-bb-benefit{display:flex;align-items:center;gap:7px;min-width:130px;font-size:11.5px;color:var(--bk-dark)}
.ff-bb-benefit i{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--ff-purple-l);color:var(--ff-purple);font-size:12px;flex-shrink:0}

.ff-bb-block{margin:14px 0}
.ff-bb-label{font-size:10px!important;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--bk-dark);opacity:0.6;margin-bottom:7px!important}
.ff-bb-note{display:inline-block;margin-left:10px;font-size:11px;color:var(--ff-orange-d);font-weight:600}
.ff-bb-variants{list-style:none;padding:0;margin:0 0 12px}

/* Quantity */
.ff-qty{display:inline-flex;align-items:center;border:1px solid var(--bk-border);background:var(--bk-surface)}
.ff-qty-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:var(--ff-purple-l);color:var(--ff-purple);font-size:11px;cursor:pointer}
.ff-qty-btn:disabled{opacity:0.4;cursor:not-allowed}
.ff-qty-val{min-width:42px;text-align:center;font-size:13px;font-weight:700;color:var(--bk-dark)}

/* Actions */
.ff-bb-actions{display:flex;gap:8px;margin-top:16px}
.ff-bb-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 14px;border:none;font-size:12.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.4px;cursor:pointer;text-decoration:none!important;
}
.ff-bb-btn-cart{background:var(--ff-purple);color:#fff}
.ff-bb-btn-cart:hover{background:var(--ff-purple-d);color:#fff}
.ff-bb-btn-cart:disabled{background:var(--bk-gray-l);cursor:not-allowed}
.ff-bb-btn-buy{background:var(--ff-orange);color:#fff}
.ff-bb-btn-buy:hover{background:var(--ff-orange-d);color:#fff}
.ff-bb-btn-buy.is-disabled{background:var(--bk-gray-l);pointer-events:none}
.ff-bb-btn-remove{background:var(--ff-red);color:#fff}

.ff-pdp-specs{margin-top:18px;padding-top:14px;border-top:1px solid var(--bk-border)}

/* Fixed action bar — phones only. It sits on top of the bottom nav (58px +
   the home-indicator inset), which used to cover it completely. */
.ff-bb-bar{
  position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:900;
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--bk-surface);border-top:1px solid var(--bk-border);
  box-shadow:0 -2px 14px rgba(107,33,168,0.10);
}
.ff-bb-bar .ff-bb-btn{padding:11px 10px;font-size:11.5px}
.ff-bb-bar-price{display:flex;flex-direction:column;line-height:1.15;flex-shrink:0;padding-right:4px}
.ff-bb-bar-price span{font-size:15px;font-weight:800;color:var(--bk-dark)}
.ff-bb-bar-price small{font-size:10px;font-weight:700;color:#1B8A3A}
.ff-pdp{padding-bottom:132px}
@media(min-width:768px){
  .ff-bb-bar{display:none}
  .ff-pdp{padding-bottom:24px}
  .ff-bb-name{font-size:21px!important}
  .ff-bb-final{font-size:30px}
}

/* ── Search screen (/search) — same layout as the app's SearchScreen ── */
.ff-search-body{display:block;min-height:420px}
.ff-search-field{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;margin-bottom:14px;border:1.5px solid var(--bk-border);border-radius:10px;background:#fff}
.ff-search-field i{color:var(--ff-purple);font-size:16px}
.ff-search-field input{flex:1;min-width:0;border:none;outline:none;font-size:15px;color:var(--bk-dark);background:transparent}
.ff-search-field button{border:none;background:none;color:var(--bk-gray);font-size:14px;padding:4px;cursor:pointer}
.ff-search-count{font-size:13px;color:var(--bk-gray);margin:0 0 12px 2px}
.ff-search-count strong{color:var(--bk-dark)}
.ff-search-hint{text-align:center;padding:48px 16px}
.ff-search-hint i{font-size:34px;color:var(--ff-purple);opacity:0.35}
.ff-search-hint h3{font-size:16px;font-weight:700;margin:16px 0 8px;color:var(--bk-dark)}
.ff-search-hint p{font-size:13px;color:var(--bk-gray);margin:0}

/* ═══════════════════════════════════════════════════════════════════
   Store redesign (2026-09-14): bottom tabs, hot categories, All Categories,
   Account tab, cart. The app (mobile/) draws the same screens with the same
   sizes — change both together.
   ═══════════════════════════════════════════════════════════════════ */

/* Bottom tabs: Home · Categories · Account · Alerts · Cart.
   Five across a phone leaves ~72px each, so this is a size down from the
   four-tab bar it replaced — the app's BottomNav.js matches these numbers. */
.bk-bottom-nav{height:calc(58px + env(safe-area-inset-bottom));padding:7px 0 env(safe-area-inset-bottom);align-items:flex-start;border-top:1px solid #E8E8EC;box-shadow:none}
.bk-bottom-nav .bk-nav-item{gap:2px;font-size:10px;font-weight:400;letter-spacing:0;color:var(--bk-dark);opacity:1;padding:2px}
.bk-bottom-nav .bk-nav-icon{position:relative;display:block;height:22px}
.bk-bottom-nav .bk-nav-label{color:var(--bk-dark);opacity:0.85}
.bk-bottom-nav .bk-nav-item.bk-active .bk-nav-label{color:var(--ff-purple);font-weight:700;opacity:1}
.bk-bottom-nav .bk-cart-badge{top:-5px;right:-8px;left:auto;min-width:15px;width:auto;height:15px;padding:0 3.5px;border:1.5px solid #fff;border-radius:8px;font-size:8.5px}
/* Signed out on a policy or info page: one Home tab, the way back to signing in */
.bk-bottom-nav.bk-nav-only{justify-content:center}
.bk-bottom-nav.bk-nav-only .bk-nav-item{flex:0 0 auto;min-width:120px}

/* Phones only: the logo and the bell come out of the header. Notifications are
   the Alerts tab in the bottom bar, and the search field wants the width the
   logo was taking. Desktop keeps both — it has the room and needs the brand. */
@media(max-width:992px){
  .bk-header-logo{display:none}
  .bk-header-bar .bk-bell{display:none}
}
@media(max-width:992px){
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  /* On phones the account is a tab and the footer's links live in it */
  .bk-header-account{display:none!important}
  .bk-footer{display:none}
}

/* Home */
.bk-home{background:var(--bk-surface);padding-bottom:16px}
.bk-hot-strip{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:12px 8px 10px;background:var(--bk-surface);border-bottom:1px solid #EFEFF2;scrollbar-width:none}
.bk-hot-strip::-webkit-scrollbar{display:none}
/* Pull to refresh (components/common/PullToRefresh.jsx) */
.ff-ptr{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:height .22s ease}
.ff-ptr.is-dragging{transition:none}
.ff-ptr-dot{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--bk-surface);color:var(--ff-purple);box-shadow:0 2px 10px rgba(28,28,28,0.14);font-size:16px;transition:background .15s,color .15s}
.ff-ptr-dot.is-ready{background:var(--ff-purple);color:#fff}
@media (prefers-reduced-motion:reduce){.ff-ptr{transition:none}}
/* Hot categories as names only, stuck under the header once the icon strip has scrolled away (home) */
.ff-hot-bar{position:fixed;left:0;right:0;z-index:999;display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 8px;background:var(--bk-surface);border-bottom:1px solid #EFEFF2;box-shadow:0 4px 12px rgba(28,28,28,0.06);scrollbar-width:none;transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .2s ease,opacity .2s ease,visibility 0s linear .2s}
.ff-hot-bar::-webkit-scrollbar{display:none}
.ff-hot-bar.is-shown{transform:none;opacity:1;visibility:visible;transition:transform .2s ease,opacity .2s ease,visibility 0s}
.ff-hot-bar a{flex-shrink:0;padding:11px 10px;font-size:13px;font-weight:600;line-height:18px;letter-spacing:0.2px;white-space:nowrap;text-transform:capitalize;color:var(--bk-dark);text-decoration:none!important}
.ff-hot-bar a:hover,.ff-hot-bar a:focus-visible{color:var(--ff-purple)}
@media (prefers-reduced-motion:reduce){.ff-hot-bar,.ff-hot-bar.is-shown{transition:none}}
.ff-cat-tile{display:inline-flex;flex-direction:column;align-items:center;flex-shrink:0;text-decoration:none!important;color:var(--bk-dark)}
.ff-cat-tile-box{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#F4F4F6;margin-bottom:6px;color:var(--ff-purple)}
.ff-cat-tile-box img{width:100%;height:100%;object-fit:cover}
.ff-cat-tile-label{font-size:11.5px;font-weight:600;line-height:14.5px;text-align:center;text-transform:capitalize;letter-spacing:0.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%}
.ff-cat-tile:hover .ff-cat-tile-box{background:var(--ff-purple-l)}

.ff-hero-wrap{position:relative;padding:12px 12px 0;background:var(--bk-surface)}
.ff-hero-wrap .ff-hero-slider{border-radius:16px}
.ff-hero-wrap .ff-hero-slide{min-height:170px}
.ff-hero-wrap .ff-hero-overlay{padding-bottom:16px}
.ff-hero-wrap .ff-hero-dots{position:static;gap:2px;padding:6px 0 4px}
.ff-hero-wrap .ff-hero-dot{width:auto;height:16px;padding:0 2px}
.ff-hero-wrap .ff-hero-dot:before{width:14px;height:4px;background:#D9D9DE;box-shadow:none}
.ff-hero-wrap .ff-hero-dot-active:before{width:26px;background:var(--ff-purple)}

.bk-home .bk-section{margin:16px 12px 0;border-radius:20px;padding:14px 12px}
.bk-home .bk-section-header{margin-bottom:12px;padding:0 2px}
.bk-home .bk-section-title{font-size:18px!important;font-weight:800!important;letter-spacing:0.2px}
.bk-see-all{gap:4px;padding:4px 10px;border-radius:var(--r-pill);background:#fff;font-weight:700}
.bk-home .bk-service-strip{margin:16px 12px 0}

/* Product card in rows (home, suggestions, similar products) */
.bk-prod-card{background:#fff;border:none;border-radius:14px;padding:8px;min-width:156px;max-width:156px;display:flex;flex-direction:column}
.bk-prod-card:hover{box-shadow:none}
.bk-prod-card .bk-prod-img{height:150px;min-height:0;padding:0;margin-bottom:8px;border:none;border-radius:12px;background:#F4F4F6;overflow:hidden}
.bk-prod-card .bk-prod-img img{max-width:86%;max-height:86%}
.bk-prod-card .bk-prod-img .prod-img-placeholder{min-height:150px;border-radius:12px}
.bk-prod-card .bk-discount-badge{top:8px;left:8px;padding:2px 6px;border-radius:6px;font-size:10px;letter-spacing:0.2px}
.bk-prod-card .bk-prod-name{font-size:13px;font-weight:600;line-height:17px;min-height:34px;margin:0;color:var(--bk-dark);text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:0.2px}
.bk-prod-card .bk-prod-weight{font-size:11px;color:var(--bk-gray);margin-top:2px}
.bk-prod-card .bk-prod-price-row{justify-content:flex-start;align-items:baseline;gap:6px;margin:4px 0 8px;flex-wrap:nowrap}
.bk-prod-card .bk-prod-mrp{font-size:12px;color:#8A8A93}
.bk-prod-card .bk-prod-price{font-size:16px;font-weight:800}
.bk-prod-card .bk-add-btn{width:100%;height:34px;padding:0;border-radius:8px;border:1.5px solid var(--ff-purple);font-size:13px;letter-spacing:0.2px}
.bk-prod-card .bk-qty-stepper{height:34px;border:none;border-radius:8px;background:var(--ff-purple)}
.bk-prod-card .bk-qty-btn{width:38px;height:34px;background:transparent;font-size:18px}
.bk-prod-card .bk-qty-num{flex:1;color:#fff;font-size:14px}
.bk-product-scroll{gap:10px}

/* All Categories: sidebar + panel */
.ff-cats{background:var(--bk-surface);min-height:70vh}
.ff-cats-title{padding:12px 16px;border-bottom:1px solid #EFEFF2;font-size:18px;font-weight:700;letter-spacing:0.2px}
.ff-cats-body{display:flex;align-items:stretch;min-height:calc(100vh - 180px)}
.ff-cats-side{width:96px;flex-shrink:0;background:#F4F4F6;overflow-y:auto}
.ff-cats-side-item{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:12px 6px;border:none;border-bottom:1px solid #E8E8EC;background:none;cursor:pointer}
.ff-cats-side-item.is-active{background:var(--bk-surface)}
.ff-cats-side-item.is-active:before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--ff-purple)}
.ff-cats-side-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--bk-surface);overflow:hidden;margin-bottom:6px;color:#6E6E78;font-size:22px}
.ff-cats-side-icon img{width:100%;height:100%;object-fit:cover}
.ff-cats-side-item.is-active .ff-cats-side-icon{background:var(--ff-purple-l);color:var(--ff-purple)}
.ff-cats-side-label{font-size:11.5px;line-height:14.5px;text-align:center;color:#5A5A64;text-transform:capitalize;letter-spacing:0.2px}
.ff-cats-side-item.is-active .ff-cats-side-label{color:var(--ff-purple);font-weight:700}
.ff-cats-main{flex:1;min-width:0;padding:12px}
.ff-cats-banner{display:flex;align-items:center;gap:10px;padding:16px;margin-bottom:20px;border-radius:20px;background:var(--ff-purple-l);color:var(--bk-dark);text-decoration:none!important}
.ff-cats-banner-text{flex:1;display:flex;flex-direction:column}
.ff-cats-banner-text strong{font-size:19px;font-weight:800;line-height:24px;text-transform:capitalize;letter-spacing:0.2px}
.ff-cats-banner-text small{font-size:12px;line-height:16px;margin-top:4px;opacity:0.65}
.ff-cats-banner-go{display:inline-flex;align-items:center;justify-content:center;width:38px;height:26px;margin-top:12px;border-radius:13px;background:var(--bk-dark);color:#fff;font-size:13px}
.ff-cats-banner-icon{display:flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:37px;background:rgba(255,255,255,0.7);color:var(--ff-purple);font-size:46px;opacity:0.85}
.ff-cats-banner-icon{overflow:hidden}
.ff-cats-banner-icon img{width:100%;height:100%;object-fit:cover}
.ff-cats-banner-img{display:block;margin-bottom:20px;border-radius:20px;overflow:hidden;background:var(--ff-purple-l);aspect-ratio:12/5}
.ff-cats-banner-img img{display:block;width:100%;height:100%;object-fit:cover}
.ff-cats-section{margin-bottom:20px;padding:0}
.ff-cats-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ff-cats-section-head h3{margin:0;font-size:16px;font-weight:800;text-transform:capitalize;letter-spacing:0.2px;color:var(--bk-dark)}
.ff-cats-section-head a{font-size:12px;font-weight:700;color:var(--ff-purple)}
.ff-cats-grid{display:flex;flex-wrap:wrap;row-gap:14px;column-gap:6px}
.ff-cats-empty{padding:20px;opacity:0.6}

/* Account tab */
.ff-acc{background:var(--bk-surface);max-width:720px;margin:0 auto;padding-bottom:12px}
.ff-acc-profile{display:flex;align-items:center;gap:14px;margin:16px;padding:18px;border-radius:18px;background:var(--ff-purple-l)}
.ff-acc-avatar{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex-shrink:0;border-radius:26px;background:var(--ff-purple);color:#fff;font-size:22px;font-weight:800}
.ff-acc-who{display:flex;flex-direction:column;min-width:0}
.ff-acc-who strong,.ff-acc-guest strong{font-size:20px;font-weight:800;letter-spacing:0.2px;color:var(--bk-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-acc-who small,.ff-acc-guest small{font-size:13px;margin-top:4px;color:var(--bk-dark);opacity:0.65}
.ff-acc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 16px}
.ff-acc-tile{display:flex;align-items:center;gap:12px;padding:16px 14px;border:1px solid #E3E3E8;border-radius:10px;background:#fff;color:var(--bk-dark);font-size:15px;font-weight:700;letter-spacing:0.2px;text-decoration:none!important}
.ff-acc-tile i{font-size:20px;color:var(--ff-purple);width:20px;text-align:center}
.ff-acc-tile:hover{background:var(--ff-purple-l);color:var(--bk-dark)}
.ff-acc-gap{height:10px;background:#F1F1F4}
.ff-acc-group{padding:18px 0 6px}
.ff-acc-group h3{margin:0 0 6px;padding:0 16px;font-size:19px;font-weight:800;letter-spacing:0.2px;color:var(--bk-dark)}
.ff-acc-row{display:flex;align-items:center;gap:16px;padding:15px 16px;color:var(--bk-dark);font-size:15.5px;letter-spacing:0.2px;text-decoration:none!important}
.ff-acc-row>i:first-child{width:24px;text-align:center;font-size:19px;color:var(--ff-purple)}
.ff-acc-row span{flex:1}
.ff-acc-row .ff-acc-chevron{font-size:18px;color:#9A9AA3}
.ff-acc-row:hover{background:#F7F7F9;color:var(--bk-dark)}
.ff-acc-guest{display:flex;flex-direction:column;margin:16px;padding:20px;border-radius:18px;background:var(--ff-purple-l)}
.ff-acc-login{align-self:flex-start;margin-top:14px;padding:11px 20px;border:none;border-radius:10px;background:var(--ff-purple);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.ff-acc-login:hover{background:var(--ff-purple-d)}
.ff-acc-logout-wrap{padding:20px 16px 6px;background:#F1F1F4}
.ff-acc-logout{width:100%;height:50px;border:1px solid #DADAE0;border-radius:10px;background:#fff;color:var(--ff-purple);font-size:17px;font-weight:700;cursor:pointer}
.ff-acc-logout:hover{background:var(--ff-purple-l)}
.ff-acc-copy{margin:0;padding:16px;text-align:center;font-size:11px;line-height:17px;color:#8A8A93;background:#F1F1F4}

/* Pages inside the Account tab (orders, addresses) */
.ff-acc-page{background:var(--bk-surface);max-width:720px;margin:0 auto;min-height:60vh}
.ff-acc-page-bar{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid #EFEFF2}
.ff-acc-page-bar button{border:none;background:none;padding:0;font-size:18px;color:var(--bk-dark);cursor:pointer}
.ff-acc-page-bar h2{flex:1;margin:0;font-size:18px;font-weight:700;letter-spacing:0.2px;text-transform:none;color:var(--bk-dark)}
.ff-acc-page-right,.ff-ord-count{font-size:11px;opacity:0.6}
.ff-acc-page-body{padding:12px}
.ff-acc-page .ff-ord-card{border-radius:12px;border-color:#E3E3E8;margin-bottom:12px}
.ff-addr-add-page{width:100%;margin-bottom:12px;border-radius:12px}
.ff-addr-none{text-align:center;opacity:0.6;padding:24px 0}
.ff-addr-saved{padding:14px;margin-bottom:12px;border:1px solid #E3E3E8;border-radius:12px;background:#fff}
.ff-addr-saved-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ff-addr-tags{display:flex;gap:6px}
.ff-addr-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:3px 8px;border-radius:6px;background:#F1F1F4;color:#55555E}
.ff-addr-tag.is-default{background:var(--ff-purple-l);color:var(--ff-purple)}
.ff-addr-saved .ff-addr-edit{font-size:12px;font-weight:700}
.ff-addr-saved-name{display:block;font-size:15px;margin-bottom:4px;color:var(--bk-dark)}
.ff-addr-saved-body{margin:0 0 4px;font-size:13px;line-height:19px;color:var(--bk-dark);opacity:0.8}
.ff-addr-saved .ff-addr-pin{margin-top:6px;border-radius:6px}

/* Cart: empty state, suggestions, bar above the tabs */
.ff-cart-empty-card{display:flex;flex-direction:column;align-items:center;margin:16px;padding:32px 20px;border-radius:24px;background:#F4F4F6;text-align:center}
.ff-cart-empty-art{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:60px;background:#fff;margin-bottom:18px;font-size:54px;color:var(--ff-purple)}
.ff-cart-empty-card h3{margin:0;font-size:20px;font-weight:700;letter-spacing:0.2px;text-transform:none;color:var(--bk-dark)}
.ff-cart-empty-card p{margin:6px 0 18px;font-size:13px;color:var(--bk-dark);opacity:0.6}
.ff-cart-start{padding:12px 34px;border-radius:10px;background:var(--ff-purple);color:#fff!important;font-size:16px;font-weight:700;text-decoration:none!important}
.ff-cart-start:hover{background:var(--ff-purple-d)}
.ff-cart-suggest{padding:10px 12px 8px;max-width:1280px;margin:0 auto}
.ff-cart-suggest h3{margin:0 0 12px 4px;font-size:19px;font-weight:800;letter-spacing:0.2px;text-transform:none;color:var(--bk-dark)}
@media(max-width:992px){
  .ff-cart-bar{bottom:calc(62px + env(safe-area-inset-bottom))}
  .ff-cart{padding-bottom:76px}
  .ff-bb-bar{bottom:calc(62px + env(safe-area-inset-bottom))}
}

/* ── Notifications (components/pages/notifications.jsx; app: NotificationsScreen) ── */
.ff-nt-tabs{display:flex;gap:6px;margin:0 0 12px}
.ff-nt-tabs button{flex:1;padding:9px 0;border:1px solid var(--bk-border);background:var(--bk-surface);font-size:13px;font-weight:700;color:var(--bk-dark);border-radius:10px}
.ff-nt-tabs button.is-on{background:var(--ff-purple-l);border-color:var(--ff-purple);color:var(--ff-purple)}
.ff-acc-page-bar .ff-nt-link{border:0;background:none;padding:0;font-size:12px;font-weight:700;color:var(--ff-purple)}
.ff-acc-page-right:has(> .ff-nt-link){opacity:1}
.ff-nt-list{display:flex;flex-direction:column;gap:8px}
.ff-nt-item{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px;border:1px solid #EFEFF2;border-radius:14px;background:var(--bk-surface);text-align:left}
.ff-nt-item.is-unread{background:var(--ff-purple-l);border-color:var(--bk-border)}
.ff-nt-ico{flex:0 0 38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#F4F4F6;color:var(--ff-purple);font-size:16px}
.ff-nt-item.is-unread .ff-nt-ico{background:#fff}
.ff-nt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ff-nt-text strong{font-size:14px;font-weight:700;color:var(--bk-dark)}
.ff-nt-text span{font-size:13px;line-height:18px;color:var(--bk-dark);opacity:0.8}
.ff-nt-text small{font-size:11px;opacity:0.55;margin-top:2px}
.ff-nt-dot{flex:0 0 8px;height:8px;border-radius:4px;background:var(--ff-orange);margin-top:6px}
.ff-nt-empty{padding:40px 16px;text-align:center;color:var(--bk-dark)}
.ff-nt-empty i{font-size:36px;color:var(--ff-purple);opacity:0.6}
.ff-nt-empty h3{font-size:17px;font-weight:800;margin:10px 0 4px}
.ff-nt-empty p{font-size:13px;opacity:0.7;margin:0 0 12px}
.ff-nt-loading{padding:12px;text-align:center;font-size:13px;opacity:0.6}
.ff-nt-more,.ff-nt-btn{align-self:center;padding:8px 16px;border:0;border-radius:10px;background:var(--ff-purple);color:#fff;font-size:13px;font-weight:700}
.ff-nt-settings{display:flex;flex-direction:column;gap:12px}
.ff-nt-card{border:1px solid #EFEFF2;border-radius:14px;background:var(--bk-surface);padding:4px 12px}
.ff-nt-card-title{padding:10px 0 4px;font-size:11px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--ff-purple)}
.ff-nt-row{display:flex;align-items:center;gap:12px;padding:12px 0;margin:0;border-top:1px solid #F1F1F4;cursor:pointer}
.ff-nt-card .ff-nt-row:first-child,.ff-nt-card-title+.ff-nt-row{border-top:0}
.ff-nt-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ff-nt-row-text strong{font-size:14px;font-weight:600;color:var(--bk-dark)}
.ff-nt-row-text small{font-size:12px;opacity:0.65;line-height:16px}
.ff-nt-on{font-size:12px;font-weight:700;color:#15803D}
.ff-nt-switch{appearance:none;-webkit-appearance:none;flex:0 0 42px;width:42px;height:24px;border-radius:12px;background:#D4D4DA;position:relative;cursor:pointer;transition:background .18s;margin:0}
.ff-nt-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.ff-nt-switch:checked{background:var(--ff-purple)}
.ff-nt-switch:checked::after{transform:translateX(18px)}
.ff-nt-switch:focus-visible{outline:2px solid var(--ff-purple);outline-offset:2px}
.bk-bell .fa{font-size:20px}
.ff-ord-missing{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#FFF7ED;color:#9A3412;font-size:13px}
/* Product alerts in the buy box (components/common/ProductAlerts.jsx) */
.ff-pa{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.ff-pa-notify{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border:0;border-radius:10px;background:var(--ff-purple);color:#fff;font-size:14px;font-weight:700}
.ff-pa-notify.is-on{background:#DCFCE7;color:#15803D}
.ff-pa-price{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 0;border:0;background:none;font-size:13px;font-weight:600;color:var(--ff-purple)}
.ff-pa-price.is-on{color:#15803D}
.ff-pa-msg{font-size:12px;color:#B91C1C}
/* Live delivery (components/common/LiveDelivery.jsx; app: mobile/src/components/LiveDelivery.js) */
.ff-ld{display:flex;flex-direction:column;gap:10px;margin:4px 0 16px;padding:12px;border-radius:14px;background:var(--ff-purple-l)}
.ff-ld-head{display:flex;gap:10px;align-items:flex-start}
.ff-ld-dot{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#9CA3AF;flex:none}
.ff-ld-dot.is-live{background:#16A34A;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:ff-ld-pulse 1.6s infinite}
@keyframes ff-ld-pulse{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@media (prefers-reduced-motion:reduce){.ff-ld-dot.is-live{animation:none}}
.ff-ld-label{margin:0;font-size:14px;font-weight:700;color:var(--bk-dark);letter-spacing:.2px}
.ff-ld-eta{margin:2px 0 0;font-size:12px;opacity:.7}
.ff-ld-map{width:100%;height:220px;border:0;border-radius:12px;background:#EEE9F5;display:block}
.ff-ld-agent{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#fff}
.ff-ld-avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--ff-purple-l);color:var(--ff-purple);flex:none}
.ff-ld-agent-main{display:flex;flex-direction:column;min-width:0;flex:1}
.ff-ld-agent-main strong{font-size:13px}
.ff-ld-agent-main small{font-size:11.5px;opacity:.65}
.ff-ld-call{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--ff-purple);color:#fff!important;font-size:12px;font-weight:700;text-decoration:none}
.ff-ld-otp{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#fff;border:1.5px dashed var(--ff-purple)}
.ff-ld-otp span{font-size:12px;opacity:.75}
.ff-ld-otp strong{font-size:22px;letter-spacing:6px;color:var(--ff-purple);font-variant-numeric:tabular-nums}
.ff-ld-note{margin:0;font-size:12px;opacity:.8}
.ff-ld-note.is-bad{color:#B91C1C;opacity:1}

/* ── Offers & coupons (cart + checkout) ───────────────────────────────
   Shown in both places from the same component, so a code applied in the
   cart reads identically on the payment step. Every figure comes from the
   server's quote; nothing here is worked out in the browser. */
.ff-offers{margin:0 0 14px;padding:12px;background:var(--bk-surface);border:1px solid var(--bk-border)}
.ff-offers-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ff-offers-head h5{display:flex;align-items:center;gap:6px;margin:0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--bk-dark);opacity:0.6}
.ff-offers-toggle{border:none;background:none;padding:0;font-size:11.5px;font-weight:700;color:var(--ff-purple);cursor:pointer}
.ff-offer-applied{display:flex;align-items:flex-start;gap:8px;padding:8px;margin-bottom:8px;background:var(--ff-purple-l);border:1px dashed var(--ff-purple)}
.ff-offer-tick{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:#1B8A3A;color:#fff;font-size:10px}
.ff-offer-applied-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.ff-offer-applied-text strong{font-size:12.5px;font-weight:700;color:var(--bk-dark)}
.ff-offer-applied-text span{font-size:11.5px;color:var(--bk-dark);opacity:0.7}
.ff-offer-remove{border:none;background:none;padding:0;font-size:11.5px;font-weight:700;color:var(--ff-red);cursor:pointer}
.ff-offer-entry{display:flex;gap:8px}
.ff-offer-input{flex:1 1 auto;min-width:0;height:36px;padding:0 10px;border:1px solid var(--bk-border);background:var(--bk-bg);font-size:12.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--bk-dark)}
.ff-offer-input::placeholder{font-weight:400;letter-spacing:0;text-transform:none;opacity:0.5}
.ff-offer-apply{flex:0 0 auto;height:36px;padding:0 16px;border:none;background:var(--ff-purple);color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.ff-offer-apply:disabled{opacity:0.5;cursor:default}
.ff-offer-error{margin:8px 0 0;font-size:11.5px;color:var(--ff-red)}
.ff-offer-list{margin-top:10px;border-top:1px solid var(--bk-border);padding-top:8px;display:flex;flex-direction:column;gap:8px}
.ff-offer-row{display:flex;align-items:flex-start;gap:10px}
.ff-offer-row.is-locked{opacity:0.55}
.ff-offer-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.ff-offer-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;font-weight:700;color:var(--bk-dark)}
.ff-offer-code{padding:1px 6px;background:var(--ff-purple-l);color:var(--ff-purple);font-size:11px;font-weight:800;letter-spacing:0.6px}
.ff-offer-badge{padding:1px 6px;background:var(--ff-orange);color:#fff;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px}
.ff-offer-sub{font-size:11.5px;color:var(--bk-dark);opacity:0.7}
.ff-offer-missing{font-size:11px;font-weight:700;color:var(--ff-orange)}
.ff-offer-use{flex:0 0 auto;height:28px;padding:0 12px;border:none;background:var(--ff-purple);color:#fff;font-size:11.5px;font-weight:700;cursor:pointer}
.ff-offer-auto{flex:0 0 auto;font-size:10.5px;font-weight:700;color:#1B8A3A;text-transform:uppercase;letter-spacing:0.4px}
.ff-offer-none{margin:0;font-size:11.5px;color:var(--bk-dark);opacity:0.6}
.ff-offer-choice{margin-bottom:8px}
.ff-offer-choice-head{margin:0 0 6px;font-size:11.5px;font-weight:700;color:var(--bk-dark)}
.ff-offer-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ff-offer-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--bk-border);background:var(--bk-bg);cursor:pointer}
.ff-offer-pick.is-picked{border-color:var(--ff-purple);background:var(--ff-purple-l)}
.ff-offer-pick-img{width:44px;height:44px;object-fit:contain}
.ff-offer-pick-name{font-size:10.5px;line-height:1.2;text-align:center;color:var(--bk-dark)}
.ff-offer-pick-price{font-size:10.5px;font-weight:800;color:#1B8A3A}

/* Offer lines in the totals */
.ff-co-offer{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-co-was{margin-right:6px;text-decoration:line-through;opacity:0.5;font-style:normal}
.ff-co-gifts{display:flex;flex-direction:column;gap:3px;margin:8px 0;padding:8px;background:var(--ff-purple-l)}
.ff-co-gift-head{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:var(--ff-purple)}
.ff-co-gift{font-size:11.5px;color:var(--bk-dark)}
.ff-co-saved{margin:6px 0 0;font-size:11.5px;font-weight:700;color:#1B8A3A}
.ff-co-nudge,.ff-cart-nudge{margin:6px 0 0;font-size:11.5px;font-weight:700;color:var(--ff-orange)}

/* ── Policy pages (shipping · delivery · returns · privacy) ───────────
   One layout for all four, from shared/src/content/policies.js. Long legal
   text, so: a readable measure, clear section starts, the three things people
   came to find out raised into cards, and a contents list on wide screens. */
.ff-pol { background: var(--bk-bg); }
.ff-pol-head { padding: 24px 0 20px; background: var(--ff-purple-l); border-bottom: 1px solid var(--bk-border); }
.ff-pol-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:var(--ff-purple) }
.ff-pol-head h1 { margin:6px 0 6px; font-size:24px; font-weight:800; color:var(--bk-dark); line-height:1.15 }
.ff-pol-summary { margin:0; max-width:60ch; font-size:13.5px; line-height:1.6; color:var(--bk-dark); opacity:0.75 }
.ff-pol-updated { display:inline-block; margin-top:10px; font-size:11px; color:var(--bk-dark); opacity:0.55 }

.ff-pol-wrap { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding-top:20px; padding-bottom:40px }
.ff-pol-main { min-width:0 }

/* The one thing a reader must not miss */
.ff-pol-notice { display:flex; gap:12px; padding:14px; margin-bottom:20px; background:var(--bk-surface); border:1px solid var(--ff-orange); border-left-width:4px }
.ff-pol-notice-icon { flex:0 0 auto; font-size:17px; color:var(--ff-orange); line-height:1.3 }
.ff-pol-notice h2 { margin:0 0 6px; font-size:14.5px; font-weight:800; color:var(--bk-dark) }
.ff-pol-notice p { margin:0 0 6px; font-size:13px; line-height:1.65; color:var(--bk-dark); opacity:0.85 }
.ff-pol-notice p:last-child { margin-bottom:0 }

.ff-pol-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:24px }
.ff-pol-card { padding:14px; background:var(--bk-surface); border:1px solid var(--bk-border) }
.ff-pol-card-icon { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin-bottom:8px; background:var(--ff-purple-l); color:var(--ff-purple); font-size:14px }
.ff-pol-card h3 { margin:0 0 4px; font-size:13px; font-weight:700; color:var(--bk-dark) }
.ff-pol-card p { margin:0; font-size:12.5px; line-height:1.6; color:var(--bk-dark); opacity:0.75 }

.ff-pol-section { padding:18px 0; border-top:1px solid var(--bk-border) }
.ff-pol-section:first-of-type { border-top:none; padding-top:0 }
.ff-pol-section h2 { margin:0 0 10px; font-size:16px; font-weight:800; color:var(--ff-purple); line-height:1.3 }
.ff-pol-section p { margin:0 0 10px; max-width:68ch; font-size:13.5px; line-height:1.75; color:var(--bk-dark); opacity:0.88 }
.ff-pol-section p:last-child { margin-bottom:0 }
.ff-pol-section ul { margin:0 0 10px; padding-left:20px }
.ff-pol-section li { margin-bottom:6px; max-width:68ch; font-size:13.5px; line-height:1.7; color:var(--bk-dark); opacity:0.88 }

.ff-pol-more { margin-top:28px; padding-top:20px; border-top:1px solid var(--bk-border) }
.ff-pol-more h3 { margin:0 0 10px; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:var(--bk-dark); opacity:0.6 }
.ff-pol-more-links { display:grid; grid-template-columns:minmax(0,1fr); gap:8px }
.ff-pol-more-link { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bk-surface); border:1px solid var(--bk-border); color:var(--bk-dark) }
.ff-pol-more-link:hover { border-color:var(--ff-purple); color:var(--bk-dark) }
.ff-pol-more-link > i:first-child { flex:0 0 auto; width:18px; text-align:center; color:var(--ff-purple) }
.ff-pol-more-link span { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto }
.ff-pol-more-link strong { font-size:13px; font-weight:700 }
.ff-pol-more-link em { font-style:normal; font-size:11.5px; opacity:0.7 }
.ff-pol-more-go { flex:0 0 auto; opacity:0.5 }

.ff-pol-toc { display:none }

@media (min-width:600px) {
  .ff-pol-cards { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .ff-pol-head h1 { font-size:30px }
}
@media (min-width:992px) {
  .ff-pol-head { padding:36px 0 28px }
  .ff-pol-wrap { grid-template-columns:minmax(0,1fr) 220px; gap:36px; padding-top:28px }
  .ff-pol-toc { display:block; position:sticky; top:90px; align-self:start }
  .ff-pol-toc-title { display:block; margin-bottom:8px; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:var(--bk-dark); opacity:0.55 }
  .ff-pol-toc ol { margin:0; padding-left:18px }
  .ff-pol-toc li { margin-bottom:6px; font-size:12px; line-height:1.5 }
  .ff-pol-toc a { color:var(--bk-dark); opacity:0.75 }
  .ff-pol-toc a:hover { color:var(--ff-purple); opacity:1 }
  .ff-pol-more-links { grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* Accepting the policies, in the login sheet. One box, the pages linked, and
   "Get OTP" stays off until it is ticked. */
.ff-otp-consent { display:flex; align-items:flex-start; gap:9px; margin:14px 0 4px; cursor:pointer }
.ff-otp-consent input { position:absolute; opacity:0; width:0; height:0 }
.ff-otp-consent-box { flex:0 0 auto; width:18px; height:18px; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--bk-border); background:var(--bk-surface); color:transparent; font-size:10px; transition:background 0.12s, border-color 0.12s }
.ff-otp-consent input:checked + .ff-otp-consent-box { background:var(--ff-purple); border-color:var(--ff-purple); color:#fff }
.ff-otp-consent input:focus-visible + .ff-otp-consent-box { outline:2px solid var(--ff-purple); outline-offset:2px }
.ff-otp-consent-text { font-size:11.5px; line-height:1.55; color:var(--bk-dark); opacity:0.85 }
.ff-otp-consent-text a { color:var(--ff-purple); font-weight:600; text-decoration:underline !important }
.ff-otp-consent-note { display:block; margin-top:3px; font-style:normal; font-size:11px; font-weight:600; color:var(--ff-orange-d) }

/* ── Delivery area, and the gates in front of the shop ───────────────
   Nothing can be shown without knowing who is buying and where they are, so
   the login sheet and the pincode sheet come before the catalogue. */
.bk-header-area { display:none; align-items:center; gap:6px; padding:5px 9px; border:1px solid rgba(255,255,255,0.35); background:rgba(255,255,255,0.12); color:#fff; cursor:pointer }
.bk-header-area:hover { background:rgba(255,255,255,0.2) }
.bk-header-area-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1 }
.bk-header-area-text em { font-style:normal; font-size:9px; opacity:0.8; letter-spacing:0.4px; text-transform:uppercase }
.bk-header-area-text strong { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums }
@media (min-width:600px) { .bk-header-area { display:inline-flex } }

.ff-locked { display:flex; align-items:center; justify-content:center; min-height:52vh; padding:32px 16px }
.ff-locked-card { width:100%; max-width:420px; padding:28px 22px; text-align:center; background:var(--bk-surface); border:1px solid var(--bk-border) }
.ff-locked-icon { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; margin-bottom:12px; background:var(--ff-purple-l); color:var(--ff-purple); font-size:19px }
.ff-locked-card h2 { margin:0 0 8px; font-size:19px; font-weight:800; color:var(--bk-dark) }
.ff-locked-card p { margin:0 0 16px; font-size:13px; line-height:1.65; color:var(--bk-dark); opacity:0.75 }
.ff-locked-btn { width:100%; height:42px; border:none; background:var(--ff-purple); color:#fff; font-size:13.5px; font-weight:700; cursor:pointer }
.ff-locked-links { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)) }
/* The header carries no logo any more, so signing in is where the brand shows */
.ff-locked-brand { display:flex; justify-content:center; padding:18px 0 4px }
/* On-screen keyboard up: the viewport shrinks, so the card goes to the top and
   the logo stands down, keeping the number being typed above the keys */
@media (max-height:560px){
  .ff-locked{justify-content:flex-start;min-height:0;padding-top:10px}
  .ff-locked-brand{display:none}
  .ff-locked-links{display:none}
}
.ff-locked-brand img { width:168px; height:auto; border-radius:10px }
.ff-locked-links a { font-size:11.5px; color:var(--ff-purple); text-decoration:underline !important }

.ff-pin-overlay { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(28,28,28,0.55) }
.ff-pin-sheet { position:relative; width:100%; max-width:430px; max-height:88vh; overflow-y:auto; padding:24px 20px 20px; background:var(--bk-surface); box-shadow:var(--bk-shadow-h) }
.ff-pin-close { position:absolute; top:10px; right:10px; width:30px; height:30px; border:none; background:none; color:var(--bk-dark); opacity:0.6; font-size:15px; cursor:pointer }
.ff-pin-title { margin:0 0 6px; font-size:19px; font-weight:800; color:var(--bk-dark) }
.ff-pin-sub { margin:0 0 16px; font-size:12.5px; line-height:1.6; color:var(--bk-dark); opacity:0.75 }
.ff-pin-form { display:flex; gap:8px }
.ff-pin-field { flex:1 1 auto; display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; border:1px solid var(--bk-border); background:var(--bk-bg); color:var(--ff-purple) }
.ff-pin-input { flex:1 1 auto; min-width:0; border:none; background:none; font-size:15px; font-weight:700; letter-spacing:1px; color:var(--bk-dark); outline:none; font-variant-numeric:tabular-nums }
.ff-pin-go { flex:0 0 auto; height:44px; padding:0 20px; border:none; background:var(--ff-purple); color:#fff; font-size:13.5px; font-weight:700; cursor:pointer }
.ff-pin-go:disabled { opacity:0.5; cursor:default }
.ff-pin-miss { margin-top:14px; padding:12px; background:var(--ff-purple-l); border:1px dashed var(--ff-purple) }
.ff-pin-miss p { margin:0 0 8px; font-size:12.5px; line-height:1.6; color:var(--bk-dark) }
.ff-pin-ask { width:100%; height:38px; border:none; background:var(--ff-purple); color:#fff; font-size:12.5px; font-weight:700; cursor:pointer }
.ff-pin-note { margin:0; font-size:11.5px; opacity:0.75 }
.ff-pin-done { display:flex; align-items:center; gap:8px; margin-top:14px; padding:12px; background:#E8F6EC; border:1px solid #1B8A3A; font-size:12.5px; color:#14682C }
.ff-pin-error { margin:12px 0 0; font-size:12px; color:var(--ff-red) }
.ff-pin-list { margin-top:18px; padding-top:14px; border-top:1px solid var(--bk-border) }
.ff-pin-list-title { display:block; margin-bottom:8px; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; opacity:0.55 }
.ff-pin-chips { display:flex; flex-wrap:wrap; gap:6px }
.ff-pin-chip { padding:6px 12px; border:1px solid var(--bk-border); background:var(--bk-bg); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--bk-dark); cursor:pointer }
.ff-pin-chip.is-on, .ff-pin-chip:hover { border-color:var(--ff-purple); background:var(--ff-purple-l); color:var(--ff-purple) }
.ff-pin-foot { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:12px; border-top:1px solid var(--bk-border) }
.ff-pin-foot a { font-size:11px; color:var(--bk-dark); opacity:0.7; text-decoration:underline !important }

/* The delivery promise, where the slot picker used to be */
.ff-co-promise { display:flex; gap:10px; padding:12px; margin-bottom:12px; background:var(--ff-purple-l); border:1px solid var(--ff-purple) }
.ff-co-promise-icon { flex:0 0 auto; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; background:var(--ff-purple); color:#fff; font-size:13px }
.ff-co-promise strong { display:block; font-size:13.5px; font-weight:800; color:var(--bk-dark) }
.ff-co-promise em { display:block; margin-top:2px; font-style:normal; font-size:11.5px; line-height:1.6; color:var(--bk-dark); opacity:0.8 }

/* "Tell me when it's back", against an out-of-stock line at checkout */
.ff-avail-notify { display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:6px 10px; border:1px solid var(--ff-purple); background:var(--bk-surface); color:var(--ff-purple); font-size:11.5px; font-weight:700; cursor:pointer }
.ff-avail-notify:hover { background:var(--ff-purple-l) }
.ff-avail-notify:disabled { opacity:0.6; cursor:default }
.ff-avail-tag-told { display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:6px 10px; background:#E8F6EC; color:#14682C; font-size:11.5px; font-weight:700 }

/* ── About · How to order · Contact ───────────────────────────────────
   One layout for the three information pages, from shared/src/content/
   company.js. Same hero as the policy pages, then whatever the page is: three
   facts, nine numbered steps, or two contact cards. */
.ff-info { background: var(--bk-bg) }
.ff-info-head { padding:24px 0 20px; background:var(--ff-purple-l); border-bottom:1px solid var(--bk-border) }
.ff-info-eyebrow { display:inline-block; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:var(--ff-purple) }
.ff-info-head h1 { margin:6px 0; font-size:24px; font-weight:800; line-height:1.15; color:var(--bk-dark) }
.ff-info-summary { margin:0; max-width:62ch; font-size:13.5px; line-height:1.65; color:var(--bk-dark); opacity:0.78 }
.ff-info-wrap { padding-top:20px; padding-bottom:40px }

.ff-info-facts { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:24px }
.ff-info-fact { padding:16px; background:var(--bk-surface); border:1px solid var(--bk-border) }
.ff-info-fact-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin-bottom:10px; background:var(--ff-purple-l); color:var(--ff-purple); font-size:14px }
.ff-info-fact strong { display:block; font-size:18px; font-weight:800; color:var(--bk-dark) }
.ff-info-fact span { display:block; margin-top:3px; font-size:12px; line-height:1.55; color:var(--bk-dark); opacity:0.72 }

.ff-info-body { max-width:70ch; margin:0 auto }
.ff-info-section { padding:18px 0; border-top:1px solid var(--bk-border) }
.ff-info-section:first-child { border-top:none; padding-top:0 }
.ff-info-section h2 { margin:0 0 10px; font-size:16px; font-weight:800; line-height:1.3; color:var(--ff-purple) }
.ff-info-section p { margin:0 0 10px; font-size:13.5px; line-height:1.75; color:var(--bk-dark); opacity:0.88 }
.ff-info-section p:last-child { margin-bottom:0 }

/* The nine steps */
.ff-steps { list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; counter-reset:none }
.ff-step-card { display:flex; align-items:flex-start; gap:12px; padding:14px; background:var(--bk-surface); border:1px solid var(--bk-border) }
.ff-step-no { flex:0 0 auto; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:var(--ff-purple); color:#fff; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums }
.ff-step-icon { flex:0 0 auto; width:26px; height:26px; display:none; align-items:center; justify-content:center; background:var(--ff-purple-l); color:var(--ff-purple); font-size:12px }
.ff-step-text { min-width:0 }
.ff-step-text h3 { margin:0 0 4px; font-size:13.5px; font-weight:700; color:var(--bk-dark) }
.ff-step-text p { margin:0; font-size:12.5px; line-height:1.7; color:var(--bk-dark); opacity:0.78 }

.ff-info-notes { margin:8px 0 24px; padding:16px; background:var(--bk-surface); border:1px solid var(--bk-border) }
.ff-info-notes h2 { margin:0 0 10px; font-size:13px; font-weight:800; color:var(--bk-dark) }
.ff-info-notes ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.ff-info-notes li { display:flex; gap:8px; font-size:12.5px; line-height:1.65; color:var(--bk-dark); opacity:0.85 }
.ff-info-notes li i { flex:0 0 auto; margin-top:3px; color:var(--ff-orange) }

/* Contact */
.ff-contact-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:22px }
.ff-contact-card { padding:18px; background:var(--bk-surface); border:1px solid var(--bk-border) }
.ff-contact-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-bottom:10px; background:var(--ff-purple-l); color:var(--ff-purple); font-size:15px }
.ff-contact-card h2 { margin:0 0 6px; font-size:14px; font-weight:800; color:var(--bk-dark) }
.ff-contact-card p { margin:0 0 4px; font-size:13px; line-height:1.7; color:var(--bk-dark); opacity:0.85 }
.ff-contact-action { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; font-weight:700; color:var(--ff-purple) }
.ff-contact-help { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.ff-contact-help li { display:flex; flex-direction:column; gap:2px }
.ff-contact-help strong { font-size:12.5px; color:var(--bk-dark) }
.ff-contact-help span { font-size:12.5px; line-height:1.65; color:var(--bk-dark); opacity:0.78 }

.ff-info-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; padding:16px; background:var(--ff-purple); color:#fff }
.ff-info-cta strong { display:block; font-size:14.5px; font-weight:800 }
.ff-info-cta span { display:block; margin-top:2px; font-size:12.5px; opacity:0.85 }
.ff-info-cta-btn { flex:0 0 auto; padding:10px 18px; background:#fff; color:var(--ff-purple); font-size:13px; font-weight:800 }
.ff-info-cta-btn:hover { color:var(--ff-purple-d) }
.ff-info-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; padding-top:14px; border-top:1px solid var(--bk-border) }
.ff-info-links a { font-size:11.5px; color:var(--bk-dark); opacity:0.7; text-decoration:underline !important }
.ff-info-links a:hover { color:var(--ff-purple); opacity:1 }

@media (min-width:600px) {
  .ff-info-head h1 { font-size:30px }
  .ff-info-facts { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .ff-contact-cards { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ff-step-icon { display:inline-flex }
  .ff-steps { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:992px) {
  .ff-info-head { padding:36px 0 28px }
  .ff-steps { grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* Checkout summary when the branch has none of the basket */
.ff-co-empty { display:flex; flex-direction:column; gap:4px; padding:12px; margin-bottom:10px; background:var(--ff-purple-l); border:1px dashed var(--ff-orange) }
.ff-co-empty i { color:var(--ff-orange); font-size:15px }
.ff-co-empty strong { font-size:13px; color:var(--bk-dark) }
.ff-co-empty span { font-size:11.5px; line-height:1.6; color:var(--bk-dark); opacity:0.8 }

/* A card for something the serving branch has none of */
.bk-out-badge { position:absolute; top:6px; left:6px; padding:2px 6px; background:rgba(28,28,28,0.75); color:#fff; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.4px }
.bk-notify-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:32px; border:1px solid var(--ff-purple); background:var(--bk-surface); color:var(--ff-purple); font-size:11.5px; font-weight:700; cursor:pointer }
.bk-notify-btn:disabled { opacity:0.6; cursor:default }
.bk-notified { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:32px; background:#E8F6EC; color:#14682C; font-size:11.5px; font-weight:700 }

/* Grid card for something the serving branch has none of */
.ff-prod-out { position:absolute; top:8px; left:8px; z-index:2; padding:3px 7px; background:rgba(28,28,28,0.75); color:#fff; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.4px }
.ff-prod-notify { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:32px; border:1px solid var(--ff-purple); background:var(--bk-surface); color:var(--ff-purple); font-size:11.5px; font-weight:700; cursor:pointer }
.ff-prod-notify:disabled { opacity:0.6; cursor:default }
.ff-prod-notified { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:32px; background:#E8F6EC; color:#14682C; font-size:11.5px; font-weight:700 }

/* ── Header on phones ─────────────────────────────────────────────────
   A smaller logo, and no cart icon: the bottom nav already has a Cart tab
   with the same count, and two of them crowd a 360px screen. */
@media (max-width: 599px) {
  .bk-header-logo img { height: 32px; border-radius: 6px }
  .bk-header-cart { display: none }
}

/* ── Forced sign-in and area, as pages rather than popups ─────────────
   A visitor who is not signed in has nothing to browse, so the flow itself is
   the page; same for choosing an area straight afterwards. */
.ff-locked { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:62vh; padding:24px 16px }
.ff-otp-page { width:100%; display:flex; justify-content:center }
.ff-otp-panel { width:100%; max-width:420px; padding:26px 22px; background:var(--bk-surface); border:1px solid var(--bk-border) }
.ff-pin-page { display:flex; align-items:center; justify-content:center; min-height:62vh; padding:24px 16px; background:var(--bk-bg) }
.ff-pin-page .ff-pin-sheet { max-width:430px; box-shadow:none; border:1px solid var(--bk-border) }

/* Keeps the header balanced when the search box is not shown (signed out) */
.bk-header-spacer { flex: 1 }