/* Family Food V27 — single responsive and overlay layer, loaded last. */
:root{
  --ff27-text:#3a281b;
  --ff27-surface:#fffefa;
  --ff27-border:#f0dcc9;
  --ff27-orange:#e7661d;
  --ff27-soft:#fff1e2;
  --ff27-shadow:0 12px 32px rgba(155,89,31,.09);
  --ff27-header-layer:1010;
  --ff27-bottom-layer:1020;
  --ff27-drawer-backdrop:2100;
  --ff27-drawer-layer:2110;
  --ff27-dialog-layer:3500;
  --ff27-alert-layer:2147483646;
}
html{max-width:100%;scroll-padding-top:clamp(76px,12vh,132px)}
body{min-width:0;max-width:100%;overflow-x:clip}
.app-main{width:100%;min-width:0;max-width:1480px;padding-inline:clamp(12px,2vw,26px);overflow:visible}
.app-main :where(.grid,.panel,.stat,.product-card,.exp-product,.ff26-product-card,.ff26-featured,.ff26-photo-wall,.dashboard-layout,.dashboard-main,.sale-left,.sale-right,.sale-cart-panel,.product-purchase,.product-gallery,.cart-line,.order-card,.table-wrap,.form-grid,.form-grid > *, .page-head,.poster-wall,.ff-poster-preview,.product-poster,.ff-tv-stage,.ff26-mosaic,.ff26-tile,.ff26-copy){min-width:0;max-width:100%}
.app-main :where(h1,h2,h3,h4,p,.muted,.price,.stat .value,.ff-card-number){overflow-wrap:anywhere}
.app-main :where(img,video,svg,canvas){max-width:100%}
.app-main :where(.panel,.stat,.exp-product,.product-card,.ff26-product-card,.quick-product,.ff26-quick-link,.ff-poster-format){border:1px solid var(--ff27-border)!important;background:linear-gradient(180deg,#fffefa 0%,#fff8f0 100%)!important;box-shadow:var(--ff27-shadow)!important;border-radius:clamp(16px,2vw,25px)!important}
.app-main :where(.product-card,.exp-product,.ff26-product-card,.ff26-quick-link){transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
@media(hover:hover){.app-main :where(.product-card,.exp-product,.ff26-product-card,.ff26-quick-link):hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(166,88,22,.14)!important;border-color:#edb789!important}}
:where(.btn,button,.icon-btn,.header-action,.ff26-category-row button,.ff-category-pill,.chip){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.app-main .btn{border-radius:15px!important;min-height:44px;max-width:100%;white-space:normal;line-height:1.3;text-align:center;box-shadow:0 7px 17px rgba(139,75,24,.07)}
.app-main :where(.btn-primary,.sale-checkout,.btn-success){box-shadow:0 9px 22px rgba(219,100,27,.16)!important}
.app-main :where(.btn,input,select,textarea,button):focus-visible{outline:3px solid rgba(245,148,66,.55)!important;outline-offset:2px}
.app-main :where(.field,input,select,textarea,.sale-line,.cart-line,.table-wrap){min-width:0}
.app-main :where(input:not([type=checkbox]):not([type=radio]),select,textarea){max-width:100%}
.app-main :where(.actions,.split-actions,.ff-premium-section-head,.ff26-section-head,.page-head){min-width:0;gap:10px}
.app-main .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border-radius:16px}
.app-main :where(.table,.data-table){border-collapse:collapse}
.app-main :where(.table td,.table th){overflow-wrap:normal;white-space:nowrap}
.app-main :where(.ff-product-qr-mark,.ff-qr-visual,.qr-large,.card-qr-box){max-width:100%;aspect-ratio:1/1}
.app-main :where(.ff-product-qr-mark,.ff-qr-visual,.qr-large,.card-qr-box) svg{display:block;width:100%;height:auto;aspect-ratio:1/1}

/* A coherent layer stack overrides the historical enormous z-index values. */
.topbar{z-index:var(--ff27-header-layer)!important}
.mobile-bottom-nav{z-index:var(--ff27-bottom-layer)!important}
#ff-menu-backdrop{z-index:var(--ff27-drawer-backdrop)!important}
#mobile-menu{z-index:var(--ff27-drawer-layer)!important}
#ff-menu-backdrop, #mobile-menu{isolation:isolate}
.ff-map-modal,.ff-modal,.modal,.modal-backdrop,.crop-modal,.lightbox,.drawer,[role='dialog'].is-open{z-index:var(--ff27-dialog-layer)!important}
/* The native showModal() top-layer supersedes any z-index: use the overlay portal too. */
:where(dialog[open]){z-index:var(--ff27-dialog-layer)!important}
:where(dialog[open])::backdrop{background:rgba(25,17,12,.65)}
#toast.toast,
.swal2-container,
.iziToast-wrapper,
.notyf,
.toastr,
.toast-container,
#toast-container,
.ff-alert-layer{z-index:var(--ff27-alert-layer)!important}
#toast.toast{position:fixed!important;inset:auto 12px calc(20px + env(safe-area-inset-bottom,0px)) auto!important;width:max-content!important;max-width:min(420px,calc(100vw - 24px))!important;padding:13px 18px!important;border-radius:16px!important;background:#312219!important;color:#fff!important;box-shadow:0 20px 54px rgba(30,20,12,.29)!important;line-height:1.45!important;overflow-wrap:anywhere!important;opacity:0;visibility:hidden;pointer-events:none!important;transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important}
#toast.toast.show{opacity:1!important;visibility:visible!important;transform:translateY(0)!important}
#toast.toast.is-ok{border-left:5px solid #43b777!important}
#toast.toast.is-error{border-left:5px solid #f16e5b!important}
.swal2-container{position:fixed!important;inset:0!important;isolation:isolate}
.swal2-popup{max-width:min(94vw,540px)!important;width:min(94vw,540px)!important;border-radius:24px!important;box-sizing:border-box!important;background:#fffaf6!important;color:#39261a!important;padding:clamp(18px,3vw,30px)!important;box-shadow:0 28px 80px rgba(24,16,9,.3)!important}
.swal2-title{font-size:clamp(1.2rem,2.6vw,1.8rem)!important;overflow-wrap:anywhere}
.swal2-html-container{max-height:45dvh;overflow:auto;overflow-wrap:anywhere}
.swal2-actions{gap:8px;flex-wrap:wrap}
.swal2-actions button{border-radius:14px!important;min-height:44px}
/* Inside a native modal, overlay layers are portaled to the modal so they are on the browser top-layer too. */
dialog[open] > #toast.toast{
  z-index:2147483647!important;position:absolute!important;
  left:50%!important;right:auto!important;top:12px!important;bottom:auto!important;
  width:max-content!important;max-width:calc(100% - 24px)!important;
  transform:translate(-50%,0)!important;
}
dialog[open] > #toast.toast.show{transform:translate(-50%,0)!important}
dialog[open] > .swal2-container{
  z-index:2147483647!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  padding:10px!important;box-sizing:border-box!important;
}
dialog[open] > .swal2-container .swal2-popup{max-height:calc(100% - 20px)!important;overflow-y:auto}


/* Fullscreen maps/TV screens are also in the browser top layer. */
:fullscreen > #toast.toast{position:absolute!important;top:12px!important;bottom:auto!important;right:12px!important;left:auto!important;transform:none!important;max-width:calc(100% - 24px)!important}
:fullscreen > .swal2-container{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}

/* All grids: retain clear design without forcing a fixed width wider than a phone. */
:where(.grid,.dashboard-layout,.sale-workspace,.ff26-showcase-grid,.ff26-grid,.ff26-mosaic,.product-grid,.exp-products,.ff26-product-grid,.poster-wall,.ff-poster-format-grid,.loyalty-poster-content,.loyalty-showcase-grid,.ff26-featured-grid,.ff26-home-actions,.ff26-photo-stack,.footer-inner){min-width:0}
:where(.grid)>*, :where(.dashboard-layout)>*, :where(.sale-workspace)>*, :where(.ff26-grid)>*, :where(.ff26-showcase-grid)>*, :where(.ff-poster-format-grid)>*, :where(.loyalty-poster-content)>*{min-width:0}
.ff26-showcase{max-width:100%;overflow:hidden}
.ff26-showcase-grid{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)!important}
.ff26-copy,.ff26-copy-top,.ff26-mosaic,.ff26-tile{min-width:0}
.ff26-copy h1{font-size:clamp(2.05rem,5vw,4.5rem);overflow-wrap:normal}
.ff26-copy-bottom{grid-template-columns:repeat(3,minmax(0,1fr))}
.sale-workspace.sale-workspace-v26{grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr)!important;align-items:start}
.sale-right{position:relative;min-width:0}
.sale-cart-panel{max-width:100%}
.sale-summary-top{flex-wrap:wrap}
.sale-line,.sale-line-main,.sale-subtotal{min-width:0}
.sale-line-main b{overflow-wrap:anywhere}
.sale-checkout-row,.sale-checkout-block{min-width:0}
.ff26-loyalty-wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;max-width:100%}
.ff26-loyalty-aside,.ff26-loyalty-stage{min-width:0}
.ff26-loyalty-reader{min-height:260px}
.ff26-loyalty-manual input{min-width:0}
.ff26-loyalty-wrap :where(video,canvas){max-width:100%}
.ff26-showcase-grid img,.ff26-product-thumb img,.ff26-photo-stack img{object-fit:cover}
.product-poster-body{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)!important}
.ff-poster-preview{overflow:hidden}
.ff-poster-preview .ff-poster-qr-side,.product-poster-foot>*{min-width:0}

@media(max-width:1200px){
 .sale-workspace.sale-workspace-v26{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important}
 .ff26-home-actions,.ff26-copy-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
 .sale-workspace.sale-workspace-v26,.ff26-showcase-grid,.ff26-grid,.ff26-loyalty-wrap,.product-poster-body,.loyalty-poster-content,.ff-poster-format-grid{grid-template-columns:minmax(0,1fr)!important}
 .dashboard-layout{grid-template-columns:minmax(0,1fr)!important}
 .sidebar{position:static!important;width:100%;max-width:100%}
 .grid-4,.kpi-row,.product-grid,.card-mini-grid,.ff26-home-actions,.sale-hero-strip,.poster-wall{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .ff26-showcase-grid{min-height:unset!important}
 .ff26-mosaic{min-height:310px}
 .ff26-loyalty-stage{min-height:380px}
 .sale-right{position:static}
}
@media(max-width:760px){
 .app-main{padding:12px 12px calc(var(--ff-v19-navbar,76px) + env(safe-area-inset-bottom,0px) + 44px)!important}
 .panel,.stat{padding:clamp(12px,3vw,18px)!important}
 .grid-2,.grid-3,.grid-4,.kpi-row,.form-grid,.preferences-grid,.auth-layout,.dashboard-layout,.ff26-product-grid,.ff26-featured-grid,.ff26-photo-stack,.poster-wall,.ff26-home-actions,.ff26-copy-bottom,.sale-hero-strip,.loyalty-showcase-grid,.ff-poster-format-grid{grid-template-columns:minmax(0,1fr)!important}
 .grid-item,.field{min-width:0}
 .ff26-mosaic{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important}
 .ff26-tile.big{grid-row:auto!important}
 .ff26-showcase{padding:14px!important;border-radius:24px!important}
 .ff26-copy h1{font-size:clamp(2.1rem,9vw,3rem)!important}
 .ff26-tile{min-height:190px!important}
 .ff26-showcase-grid{gap:14px}
 .ff26-home-search,.ff-premium-search{grid-template-columns:minmax(0,1fr)!important}
 .ff26-home-search>button,.ff-premium-search .actions .btn{max-width:100%;justify-content:center}
 .ff26-product-thumb{height:auto!important;aspect-ratio:1.2/1}
 .ff26-product-grid,.exp-products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .ff26-product-card{padding:9px;border-radius:18px!important}
 .ff26-product-card .ff26-product-meta{display:grid;gap:6px;align-content:start}
 .ff26-product-card .ff26-product-meta h3{font-size:.94rem}
 .ff26-product-card .ff26-product-meta strong{font-size:1rem}
 .sale-checkout-row,.sale-cart-actions,.sale-loyalty-card .actions,.sale-slim-search{grid-template-columns:minmax(0,1fr)!important}
 .sale-footer{display:grid!important;grid-template-columns:1fr!important;gap:10px}
 .sale-checkout,.sale-checkout-row>.btn{width:100%;min-height:50px}
 .sale-line{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px;align-items:center}
 .sale-line-main{grid-column:1 / -1}
 .sale-line>.sale-subtotal{grid-column:1 / 2}
 .sale-line>.danger-icon{justify-self:end}
 .quick-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .ff26-loyalty-stage{padding:12px}
 #ff26-loyalty-dialog{max-width:calc(100vw - 12px)!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important;border-radius:18px!important}
 .ff26-loyalty-reader{min-height:200px}
 .ff26-loyalty-aside{padding:14px}
 .ff26-loyalty-manual{grid-template-columns:minmax(0,1fr)!important}
 .ff26-loyalty-manual button{min-height:44px}
 .ff23-pos-shell,.ff22-scanner-shell{max-height:calc(100dvh - 20px)!important;overflow-y:auto!important}
 .ff23-scan-body,.ff22-scan-body{grid-template-columns:minmax(0,1fr)!important}
 .ff23-camera-area,.ff23-scan-side{min-width:0}
 .poster-wall{gap:12px}
 .product-poster{min-height:0!important;padding:14px}
 .product-poster-body,.product-poster-foot{grid-template-columns:minmax(0,1fr)!important}
 .product-poster-photo{height:220px!important}
 .ff-card-bottom,.v24-card-meta{grid-template-columns:minmax(0,1fr)!important}
 .card-qr-box{justify-self:center}
 .footer-inner{grid-template-columns:minmax(0,1fr)!important;gap:16px}
 #toast.toast{bottom:calc(var(--ff-v19-navbar,76px) + env(safe-area-inset-bottom,0px) + 14px)!important;left:50%!important;right:auto!important;max-width:calc(100vw - 24px)!important;transform:translate(-50%,12px)!important;text-align:center}
 #toast.toast.show{transform:translate(-50%,0)!important}
}
@media(max-width:390px){
 .ff26-product-grid,.exp-products,.quick-product-grid{grid-template-columns:minmax(0,1fr)!important}
 .ff26-showcase h1{font-size:2.15rem!important}
 .ff26-photo-stack{grid-template-columns:minmax(0,1fr)!important}
 .ff26-product-thumb{aspect-ratio:1.5/1}
 .app-main .actions .btn{flex:1 1 auto}
 .mobile-bottom-nav a span{font-size:10px}
}
@media(max-height:520px) and (orientation:landscape){
 #ff26-loyalty-dialog,.ff23-pos-dialog{max-height:calc(100dvh - 8px)!important;overflow:auto!important}
 #toast.toast{bottom:10px!important}
}
@media(prefers-reduced-motion:reduce){.app-main .btn,.app-main .product-card,.app-main .exp-product{transition:none!important}}
@media print{#toast,.swal2-container,.ff-alert-layer{display:none!important}}