/* Device class is resolved at the same URL, independently of window width. */
.dsf-desktop { padding-bottom:0!important; }
.dsf-desktop #smooth-content { padding-bottom:0; }
.dsf-desktop.fc-site #main-content { padding-top:106px; }
.dsf-desktop .app-tabbar,.dsf-desktop .fc-bottom-nav { display:none!important; }
.dsf-desktop .back-to-top { bottom:24px; }
.fc-site.fc-device-app { --fc-nav-height:5.25rem; padding-bottom:calc(var(--fc-nav-height) + env(safe-area-inset-bottom)); }   /* the dock stands 66px and floats 10px up, so 84px clears it with 8 to spare; 96 left a band of white (owner, 2026-09-24) */
.fc-device-app .fc-footer,.fc-device-app .fc-feed-desktop { display:none!important; }
/* The dock IS the classic site's: app.css .app-tabbar plus site.css's paint, ported box for box
   so the two device views measure the same (owner, 2026-09-23). Measured on the live site at
   375px: bar 355x66 radius 30 padding 0 6px sitting 10px up; every anchor 64 tall; the plain
   glyph pill 46x28 radius 14 starting 11px down; the Cart circle 56x56 starting 23px ABOVE the
   bar; every label 10.5px ending 12px above the bar's bottom, the Cart's among them. The circle
   overflows upward because its anchor has a FIXED height, not a min-height. */
.fc-site.fc-device-app .fc-bottom-nav {
  --app-tabbar-h:64px; --fc-cart-size:39px;
  display:grid; grid-template-columns:repeat(7,1fr); align-items:stretch;
  position:fixed; inset:auto 10px calc(10px + env(safe-area-inset-bottom)); width:auto; max-width:none; margin:0; z-index:120;
  min-height:0; overflow:visible;
  background-color:var(--brand-red-deep); background-image:var(--brand-paint-tile),var(--brand-paint);
  background-size:180px 180px,auto; background-repeat:repeat,no-repeat; background-position:0 0,center;
  border-radius:30px; border:1px solid rgba(255,255,255,.22); border-top-color:rgba(255,255,255,.34);
  padding:0 6px; box-shadow:0 14px 34px rgba(30,6,4,.45), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.fc-site.fc-device-app .fc-bottom-nav>a {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:0; min-height:var(--app-tabbar-h); padding:0; border-radius:0; background:none;
  color:rgba(255,255,255,.82); font-family:"Nunito",system-ui,sans-serif; font-size:10.5px; font-weight: 400; letter-spacing:.2px;
  text-decoration:none; transition:color .2s, transform .15s;
}
.fc-site.fc-device-app .fc-bottom-nav>a>span { line-height:1.2; }
.fc-site.fc-device-app .fc-bottom-nav>a>i {
  display:grid; place-items:center; width:41.4px; height:28px; border-radius:14px; font-size:20px; line-height:1;   /* 46px less 5% from each side: the lit tab showed too much yellow beside the glyph (owner, 2026-09-23) */
  --fa-primary-color:#fff; --fa-secondary-color:#ffd45c; --fa-secondary-opacity:.62;
  transition:background .25s, color .25s, box-shadow .25s, transform .25s;
}
.fc-site.fc-device-app .fc-bottom-nav>a[aria-current] { color:var(--brand-yellow); background:transparent; }
.fc-site.fc-device-app .fc-bottom-nav>a[aria-current]>i {
  --fa-primary-color:#2a0906; --fa-secondary-color:#7a1c10; --fa-secondary-opacity:.6;
  background:linear-gradient(135deg,#ffd45c,#ffb400);
  box-shadow:0 6px 16px rgba(255,180,0,.35), inset 0 1px 0 rgba(255,255,255,.5); transform:translateY(-1px);
}
.fc-site.fc-device-app .fc-bottom-nav>a:active { transform:scale(.94); }
.fc-site.fc-device-app .fc-bottom-nav>a:focus-visible { outline:2px solid var(--brand-yellow); outline-offset:-3px; }
/* the cart: the app's main action, a raised round yellow button in the middle of the dock. Its
   label sits on the same line as the others; the circle overflows the fixed-height box upward. */
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-cart { height:var(--app-tabbar-h); justify-content:flex-end; padding-bottom:10.7px; }
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-cart>i,
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-cart[aria-current]>i {
  flex:none; width:var(--fc-cart-size); height:var(--fc-cart-size); border-radius:50%; font-size:calc(var(--fc-cart-size) * .393); transform:none; margin-bottom:7px;
  color:var(--brand-red); --fa-primary-color:var(--brand-red); --fa-secondary-color:var(--brand-red-deep); --fa-secondary-opacity:.8;
  background-color:var(--brand-yellow);
  background-image:var(--brand-paint-tile), linear-gradient(145deg,#ffd65e 0%,var(--brand-yellow) 55%,#e5a70f 100%);
  background-size:110px 110px,auto; background-position:center,center;
  box-shadow:0 10px 22px rgba(120,15,10,.5), 0 0 0 4px #fff, inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(90,10,8,.45);
}
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-cart[aria-current]>i { box-shadow:0 10px 22px rgba(120,15,10,.6), 0 0 0 4px #fff, 0 0 0 7px rgba(255,194,34,.75), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(90,10,8,.45); }
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-cart:active>i { transform:scale(.94); }
.fc-site.fc-device-app .fc-bottom-nav .fc-dock-count {
  position:absolute; top:-18px; left:calc(50% + 3px); min-width:20px; width:max-content; height:20px; line-height:20px; padding:0 5px;
  /* width:max-content, or the anchor's 49px column shrink-wraps the badge to 20px and clips the
     second digit: a cart of 30 read as 3 (owner, 2026-09-23) */
  border-radius:10px; background:var(--brand-red); color:#fff; font-size:12px; font-weight: 400; text-align:center;
  box-shadow:0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.35);
}
.fc-site.fc-device-app .fc-bottom-nav .fc-dock-count[hidden] { display:none; }
@media (max-width:359px) { .fc-site.fc-device-app .fc-bottom-nav>a { font-size:10px; letter-spacing:0; } .fc-site.fc-device-app .fc-bottom-nav>a>i { width:36px; } }
/* iPad landscape, including a connected trackpad, keeps the app header. */
.fc-site.fc-device-app .fc-header-inner { display:grid; grid-template-columns:1fr auto 1fr; width:100%; padding:.45rem 3.3%; min-height:4rem; gap:0; }
.fc-site.fc-device-app .fc-header>.fc-header-inner>.fc-logo { position:static; transform:none; width:clamp(8rem,25vw,11rem); }
.fc-site.fc-device-app .fc-header .fc-nav-toggle { display:inline-flex; }
.fc-site.fc-device-app .fc-header .fc-search-link,.fc-site.fc-device-app .fc-header-catering { display:none; }
.fc-site.fc-device-app .fc-header-actions { justify-self:end; }
.fc-site.fc-device-app .fc-header .fc-cart-link { background:transparent; }
.fc-site.fc-device-app .fc-navigation { display:none; position:absolute; inset:100% 0 auto; background:var(--fc-header-bg,var(--fc-paper)); padding:1rem; max-height:calc(100dvh - 12rem); overflow:auto; box-shadow:0 .7rem 1rem #2f140d22; }
.fc-site.fc-device-app .fc-navigation.is-open { display:block; }
.fc-site.fc-device-app .fc-navigation>ul { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.fc-site.fc-device-app .fc-navigation a { display:block; padding:.8rem; font-size:1rem; border:1px solid var(--fc-line); border-radius:.65rem; }
.fc-site.fc-device-app .fc-utility-inner { justify-content:center; }
.fc-site.fc-device-app .fc-utility p,.fc-site.fc-device-app .fc-utility-orders { display:none; }
.fc-site.fc-device-app .fc-utility nav { justify-content:space-between; width:100%; max-width:36rem; }
.fc-site.fc-device-app .fc-utility a { min-height:2.75rem; }
@media (prefers-reduced-motion:reduce) { .fc-site.fc-device-app .fc-bottom-nav>a,.fc-site.fc-device-app .fc-bottom-nav .fc-dock-icon { transition:none; transform:none!important; } }

/* A portrait laptop keeps the original artwork without a giant stacked hero. */
@media (min-width:600px) and (max-width:991px) {
  .dsf-desktop .hero-3 { padding:4.5rem 0 4rem; min-height:0; }
  .dsf-desktop .hero-3>.container { max-width:none; width:94%; }
  .dsf-desktop .hero-3>.container>.row { flex-wrap:nowrap; align-items:center!important; }
  .dsf-desktop .hero-3 .col-lg-6 { width:50%; min-width:0; }
  .dsf-desktop .hero-3 .hero-content { margin:0; text-align:left; }
  .dsf-desktop .hero-3 .hero-content .split-title { font-size:clamp(1.8rem,4vw,2.7rem); }
  .dsf-desktop .hero-3 .hero-content h1 { font-size:clamp(3.4rem,8.2vw,5rem); line-height:.96; margin-top:.6rem; }
  .dsf-desktop .hero-3 .hero-content h1 br { display:initial; }
  .dsf-desktop .hero-3 .hero-content .hero-eyebrow { font-size:.67rem; line-height:1.4; }
  .dsf-desktop .hero-3 .hero-content .hero-lead { font-size:.9rem; line-height:1.55; margin:1rem 0; }
  .dsf-desktop .hero-3 .hero-actions { justify-content:flex-start; gap:1rem; }
  .dsf-desktop .hero-3 .hero-play { font-size:.75rem; }
  .dsf-desktop .hero-3 .hero-cta { font-size:.85rem; padding:.7rem 1rem; }
  .dsf-desktop .hero-3 .hero-content .icon-item { justify-content:flex-start; margin-top:1.2rem; gap:.5rem; }
  .dsf-desktop .hero-3 .icon-item>img { width:36px; }
  .dsf-desktop .hero-3 .icon-item .content h2 { font-size:1.1rem; }
  .dsf-desktop .hero-3 .hero-image { position:absolute; right:2%; bottom:0; width:48%; margin:0; }
  .dsf-desktop .hero-3 .hero-figure>img { width:100%; height:auto; object-fit:contain; }
  .dsf-desktop .hero-3 .hero-figure .shape { width:45px; left:12%; top:5%; }
  .dsf-desktop .hero-3 .hero-figure .shape img { width:100%; }
  .dsf-desktop .feature-section-3 { margin-top:-2.5rem; }
  .dsf-desktop .hero-3 .ratting-box { display:none!important; }
}
@media (max-width:599px) {
  .dsf-desktop .hero-3 { padding:3rem 0; }
  .dsf-desktop .hero-3 .hero-image { max-width:20rem; margin:1rem auto 0; }
}

/* The intro overlay belongs to the site, not to the storefront UI. The app's blanket
   `.fc-site p { font:inherit; color:inherit }` was repainting its tagline in the body ink
   (#171717) on the dark red, which read as almost black (owner, 2026-09-23). Its own colours
   and type are restored here, where nothing else can reach them. */
.fc-site #dsf-intro p, .fc-site .dsf-intro__brand p {
  color:#ffe3c2; font:600 clamp(12px,1.05vw,15px)/1.4 "Signika",system-ui,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; margin:10px 0 0;
}
.fc-site .dsf-intro__beep { color:#8e1a16; background:#fff; font-weight: 400; }
.fc-site .dsf-intro__skip { color:#fff9eb; }

/* ---------------------------------------------------------------- the inner page banner, every width
   One banner for the app on a phone, an iPad and a wide screen (owner, 2026-09-23): the classic
   site's photographed red with its tomatoes, leaf and truck, the couple and the plates on the
   left at the desktop banner's own share of the width, the torn cream edge, the dark shade down
   the left that the wide card already had, and the title and breadcrumb in the middle.
   The pieces carry Bootstrap's d-none and two app rules hide them with !important, so these
   selectors are deliberately heavier than `.fc-page-about .fc-legacy-content
   .breadcrumb-wrapper>div:not(.container):not(.fc-cover-media)`. */
.fc-site.fc-device-app .fc-legacy-content .breadcrumb-wrapper,
.fc-site.fc-device-app .breadcrumb-wrapper.fc-inner-cover {
  position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:8.5rem!important;
  background:var(--brand-red-deep) url("../img/breadcrumb-bg.jpg") center/cover no-repeat!important;
}
/* the dark shade down the left, the wide card's own gradient, at every width */
.fc-site.fc-device-app .fc-legacy-content .breadcrumb-wrapper::after,
.fc-site.fc-device-app .breadcrumb-wrapper.fc-inner-cover::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;   /* over the photographed red, under the people: the model keeps the desktop banner's own light */
  background:linear-gradient(90deg,rgba(30,10,5,.94),rgba(43,13,6,.80) 35%,rgba(43,13,6,.13) 70%,transparent);
}
.fc-site.fc-device-app .fc-legacy-content .breadcrumb-wrapper>div.shape-1:not(.container) {
  display:block!important; position:absolute; z-index:2; left:-3.75%; bottom:-4px; height:82%; width:auto; max-width:none;
}
.fc-site.fc-device-app .fc-legacy-content .breadcrumb-wrapper>div.girl-shape:not(.container) {
  display:block!important; position:absolute; z-index:3; left:10.6%; bottom:0; height:99%; width:auto; max-width:none;
}
.fc-site.fc-device-app .fc-legacy-content .breadcrumb-wrapper>div.bottom-shape:not(.container) {
  display:block!important; position:absolute; z-index:5; left:0; right:0; bottom:-1px; width:100%; max-width:none;
}
.fc-site.fc-device-app .breadcrumb-wrapper .shape-1 img,
.fc-site.fc-device-app .breadcrumb-wrapper .girl-shape img { width:auto; height:100%; display:block; }
.fc-site.fc-device-app .breadcrumb-wrapper .bottom-shape img { width:100%; height:auto; display:block; }
/* the title and its breadcrumb sit in the middle of the band, across and down */
.fc-site.fc-device-app .breadcrumb-wrapper .container { position:relative; z-index:6; width:100%; }
.fc-site.fc-device-app .breadcrumb-wrapper .page-heading,
.fc-site.fc-device-app .fc-legacy-content .fc-inner-cover .page-heading { padding:0 .6rem!important; text-align:center!important; max-width:none; }
/* storefront-app.css sizes the title at clamp(2rem,4vw,3.5rem) with five classes, so this needs six */
.fc-site.fc-device-app .fc-legacy-content .breadcrumb-wrapper .page-heading .breadcrumb-title,
.fc-site.fc-device-app .breadcrumb-wrapper .breadcrumb-title { font-size:clamp(1.6rem,3.2vw,2.8rem)!important; line-height:1.02; margin:0; }
.fc-site.fc-device-app .breadcrumb-wrapper .breadcrumb-title::after { display:none; }   /* the wide card's yellow rule under the title */
/* on a wide screen the app makes this a left-aligned flex row and caps the title's width, so
   text-align alone cannot centre it */
.fc-site.fc-device-app .breadcrumb-wrapper .breadcrumb-sub-title { display:flex!important; flex-direction:column; align-items:center!important; justify-content:center; width:100%; }
.fc-site.fc-device-app .breadcrumb-wrapper .breadcrumb-title { max-width:none!important; text-align:center!important; text-shadow:0 2px 10px rgba(30,8,4,.75), 0 1px 2px rgba(30,8,4,.6); }
.fc-site.fc-device-app .breadcrumb-wrapper .breadcrumb-items { text-shadow:0 1px 6px rgba(30,8,4,.8); }
.fc-site.fc-device-app .breadcrumb-wrapper .breadcrumb-items { justify-content:center!important; flex-wrap:wrap; font-size:.72rem; line-height:1.1; margin-top:0; padding:0; }
/* the app's own cover picture and eyebrow stay off: the classic banner is the picture here */
.fc-site.fc-device-app .breadcrumb-wrapper .fc-cover-media,
.fc-site.fc-device-app .breadcrumb-wrapper .fc-cover-eyebrow { display:none!important; }
@media (min-width:768px) { .fc-site.fc-device-app .fc-legacy-content .breadcrumb-wrapper, .fc-site.fc-device-app .breadcrumb-wrapper.fc-inner-cover { min-height:15rem!important; } }
}

/* The Menu tab's open book had blank pages, so it did not read as a menu (owner, 2026-09-23:
   "tiny dots so it looks like something is written"). Font Awesome's duotone glyph already uses
   both of the <i>'s pseudo-elements, so the ruled lines are drawn on the anchor instead, one
   block per page, positioned over the glyph's ink. */
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-menu::before,
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-menu::after {
  content:""; position:absolute; z-index:2; pointer-events:none;
  width:6px; height:10px; top:19px;
  background-image:linear-gradient(to bottom,currentColor 1px,transparent 1px);
  background-size:100% 3.5px; background-repeat:repeat-y;
  opacity:.5; color:#7a1c10;
}
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-menu::before { left:calc(50% - 8.5px); }
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-menu::after  { left:calc(50% + 2.5px); color:#4a0b09; opacity:.45; }
/* on the lit tab the duotone flips: the left page goes near-black and the right page mid-brown,
   so the ruling flips with it or it disappears into the page */
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-menu[aria-current]::before { color:#ffd98a; opacity:.5; }
.fc-site.fc-device-app .fc-bottom-nav>a.fc-dock-menu[aria-current]::after { color:#2a0906; opacity:.45; }

/* The header cart's count sat on the icon, and at three characters ("99+") it swallowed the
   whole cart (owner, 2026-09-23). It moves to the icon's top-right corner and wears a ring in
   the header's own colour, the same trick the dock's badge uses, so it reads as a badge on the
   cart rather than a lozenge over it. */
.fc-site.fc-device-app .fc-cart-link [data-cart-count] {
  top:-.35rem; right:-.45rem; padding:0 .28rem;
  font:700 .62rem/1.1rem "Nunito",system-ui,sans-serif; min-width:1.1rem;
  box-shadow:0 0 0 2px var(--fc-header-bg,#fff);
}

/* On a phone the centred title (32% to 69% of the band at 375px) ran over the couple, who
   reached 42%. They and the plates behind them move left and down a size so the title clears
   them; on a tablet there is room and both keep the desktop proportions (owner, 2026-09-23). */


/* ---------------------------------------------------------------- the classic view's inner banner
   The desktop and laptop pages keep their own design everywhere (owner, 2026-09-24), with one
   change: their inner page banner takes the app banner's treatment, the dark shade running down
   the left and the title and breadcrumb in the middle. The couple, the plates, the tomatoes and
   the truck are already there; only the shade and the centring are new. */
.dsf-desktop .breadcrumb-wrapper { position:relative; }
.dsf-desktop .breadcrumb-wrapper::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(30,10,5,.94),rgba(43,13,6,.80) 35%,rgba(43,13,6,.13) 70%,transparent);
}
.dsf-desktop .breadcrumb-wrapper .shape-1 { z-index:2; }
.dsf-desktop .breadcrumb-wrapper .girl-shape { z-index:3; }
.dsf-desktop .breadcrumb-wrapper .bottom-shape { z-index:4; }
.dsf-desktop .breadcrumb-wrapper .container { position:relative; z-index:5; }
.dsf-desktop .breadcrumb-wrapper .page-heading { padding-left:0!important; padding-right:0!important; text-align:center!important; }
.dsf-desktop .breadcrumb-wrapper .breadcrumb-title { text-shadow:0 2px 12px rgba(30,8,4,.6); }
.dsf-desktop .breadcrumb-wrapper .breadcrumb-items { justify-content:center!important; }

/* the foot of the home feed sat in about 144px of white: the links' own margin, the feed's
   bottom padding and the dock's reserve, stacked (owner, 2026-09-24) */
.fc-site.fc-device-app .fc-home-feed { padding-bottom:.6rem; }
.fc-site.fc-device-app .fc-feed-end-links { margin-top:.4rem; }
/* the two links close the home feed, so they carry a little weight and a picture each: a
   reader for the story, a pin for where the truck stands (owner, 2026-09-24). bold, not a
   number, so the client's own type rules decide how heavy that is. */
.fc-site.fc-device-app .fc-feed-end-links a { gap:.45rem; font-weight: 500; letter-spacing:.005em; }
.fc-site.fc-device-app .fc-feed-end-links i { font-size:1.05em; }
/* the catering card sat 31px under the extras row: the section's 18.4px of bottom padding and
   the card's own 12.8px margin, stacked with no rule between them to give it meaning. The card
   pulls up so the gap matches the feed's other spacing (owner, 2026-09-24) */
.fc-site.fc-device-app .fc-feed-truck { margin-top:-.3rem; }

/* ---------------------------------------------------------------- the same banner on the app's own pages
   catering, contact, news, reservation and the rest build their cover as a <header class="fc-page-heading
   fc-inner-cover"> rather than the template's breadcrumb-wrapper, so they kept the old card. The
   figures are now in their markup too (covers.mjs); these rules give them the same band. */
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover {
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  min-height:8.5rem!important; padding:1rem .6rem!important; margin-bottom:1.5rem; border-radius:0!important;
  background:var(--brand-red-deep) url("../img/breadcrumb-bg.jpg") center/cover no-repeat!important;
  text-align:center!important; max-width:none;
}
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(30,10,5,.94),rgba(43,13,6,.80) 35%,rgba(43,13,6,.13) 70%,transparent);
}
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover>div.shape-1 {
  display:block!important; position:absolute; z-index:2; left:-3.75%; bottom:-4px; height:82%; width:auto; max-width:none;
}
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover>div.girl-shape {
  display:block!important; position:absolute; z-index:3; left:10.6%; bottom:0; height:99%; width:auto; max-width:none;
}
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover>div.bottom-shape {
  display:block!important; position:absolute; z-index:5; left:0; right:0; bottom:-1px; width:100%; max-width:none;
}
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover>div.shape-1 img,
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover>div.girl-shape img { width:auto; height:100%; display:block; }
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover>div.bottom-shape img { width:100%; height:auto; display:block; }
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover>.container { position:relative; z-index:6; width:100%; }
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover .page-heading { text-align:center!important; padding:0!important; }
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover h1 {
  color:#fff9eb!important; font-size:clamp(1.6rem,3.2vw,2.8rem)!important; line-height:1.02; margin:0; max-width:none!important; text-align:center!important;
  text-shadow:0 2px 10px rgba(30,8,4,.75), 0 1px 2px rgba(30,8,4,.6);
}
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover h1::after { display:none!important; }
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover>p,
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover .page-heading p { color:#fff5e2!important; font-size:.72rem; line-height:1.1; margin:.15rem 0 0; text-shadow:0 1px 6px rgba(30,8,4,.8); }
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover .fc-cover-media,
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover .fc-cover-eyebrow,
.fc-site.fc-device-app header.fc-page-heading.fc-inner-cover .fc-eyebrow { display:none!important; }
@media (min-width:768px) { .fc-site.fc-device-app header.fc-page-heading.fc-inner-cover { min-height:15rem!important; } }
/* a promo carrying a photograph fills its side of the card; the others carry cut-out dishes,
   which is why the feed contains them. A photograph has no cut-out edge, so its left side is
   dissolved into whatever colour the card is wearing; a straight edge there read as a mark
   on the card (owner, 2026-09-24). */
.fc-site .fc-home-feed .fc-small-promo--photo>img { object-fit:cover; object-position:68% 40%; width:62%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%); mask-image:linear-gradient(90deg,transparent 0,#000 30%); }
/* the card colour covers the picture's edge and is gone by 57%, so seven tenths of the
   photograph carries no veil at all and the faces stay sharp (owner, 2026-09-24) */
.fc-site .fc-home-feed .fc-small-promo--photo::after { background:linear-gradient(90deg,var(--promo-bg) 0 38%,transparent 57%); }

/* --- Our Story on a phone and an iPad (owner, 2026-09-24) -------------------------------------
   The page is the template's about page, and four things came out wrong on a touch screen.
   The opening section kept the template's left-aligned heading while every other section on the
   page centres. Its two buttons sat on the left in two different sizes. The story blocks zigzag
   on a desktop by alternating the order of picture and words in the markup, so stacked they put
   the picture above its words in one block and below them in the next. And the theme's slider
   library does not run on an app page, so the gallery's slides were laid out by the slider's
   leftover spacing instead of by anything. */
.fc-site.fc-device-app .why-choose-us-section-4 .section-title,
.fc-site.fc-device-app .why-choose-us-section-4 .section-title h2,
.fc-site.fc-device-app .why-choose-us-section-4 .sub-title,
.fc-site.fc-device-app .why-choose-us-section-4 .sec-line { text-align:center; }
.fc-site.fc-device-app .why-choose-us-section-4 .sec-line img { margin-inline:auto; }
/* the words themselves keep their left edge: a centred paragraph is harder to read */
.fc-site.fc-device-app .why-choose-us-section-4 .section-title p { text-align:left; }

.fc-site.fc-device-app .choose-button { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
.fc-site.fc-device-app .choose-button .theme-btn { min-width:13rem; justify-content:center; text-align:center; }

.fc-site.fc-device-app .history-food-list-items { display:flex; flex-direction:column; }
.fc-site.fc-device-app .history-food-list-items>.dsf-story-figure { order:1; }
.fc-site.fc-device-app .history-food-list-items>.content { order:2; }

/* a slider the theme never starts here becomes a plain row of cards that wraps */
.fc-site.fc-device-app .swiper:not(.swiper-initialized) .swiper-wrapper {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.8rem; transform:none!important; }
.fc-site.fc-device-app .swiper:not(.swiper-initialized) .swiper-slide {
  width:auto!important; height:auto!important; margin:0!important; }
.fc-site.fc-device-app .gallery-area { padding-inline:1rem; }
.fc-site.fc-device-app .gallery-btn { display:flex; justify-content:center; margin-top:1.1rem; }
/* the theme gives a gallery tile a fixed 450px box, which on a phone left 200px of nothing
   under each picture; the tile takes the picture's own height instead */
.fc-site.fc-device-app .gallery-block-one { height:auto; }
.fc-site.fc-device-app .gallery-block-one img { display:block; width:100%; height:auto; }

/* --- buttons: thinner, and the yellow hover the rest of the site has (owner, 2026-09-24) ------
   He asked for 15% off the top and 15% off the bottom, so a button stands 30% shorter. The height
   was never in the padding: a product button was held at 44px and a category at 48px by a minimum
   of their own, and a template button at 56px by a fixed height, so the minimum and the padding
   have to come down together or nothing moves at all.
   The hover is the one the classic pages have always had: a brand red button fills with the
   truck's yellow (.theme-btn draws it with a growing circle in --theme). The app's own buttons
   only darkened, so they take the same yellow here. The already yellow, outline and light
   buttons keep their own. */
/* four classes, because storefront-ratings.css holds this button at 44px with four of its own */
.fc-site .fc-products .fc-product .fc-button { min-height:1.95rem; padding-block:.3rem; }
.fc-site .fc-category { min-height:2.1rem; padding-block:.3rem; }
/* min-height:0 as well, or storefront.css holds every template button at 2.8rem and the height
   above does nothing. In the app view that same rule paints them all brand red, so the
   growing circle behind them is red on red and the hover cannot be seen: it takes the
   truck's yellow here, which is what a red button does on the classic pages. */
/* the template centres its label with a line-height equal to a fixed height, which spills a long
   label out of the box (reservation's "Call +1 (240) 262-4646" wraps). Padding centres it
   instead, so one line stands at the same 39px and two lines make the button taller. */
/* padding on both axes: something in the app layer zeroes the template's 32px sides, and the
   words then touch both edges of the button (owner's picture of the booking page) */
.fc-site.fc-device-app .theme-btn { min-height:39px; height:auto; line-height:1.15; padding:.6rem 1.25rem; }
.fc-site.fc-device-app .theme-btn.small-btn { min-height:37px; padding:.55rem 1.4rem; }
.fc-site.fc-device-app .theme-btn::before { background-color:var(--brand-yellow); }
.fc-site.fc-device-app .theme-btn:hover,
.fc-site.fc-device-app .theme-btn:focus-visible { background-color:var(--brand-yellow); color:var(--brand-red-deep); }

.fc-site .fc-button:not(.fc-button-yellow):not(.fc-button-outline):not(.fc-button-light):not(:disabled):hover,
.fc-site .fc-button:not(.fc-button-yellow):not(.fc-button-outline):not(.fc-button-light):not(:disabled):focus-visible {
  background:var(--brand-yellow); border-color:var(--brand-yellow); color:var(--brand-red-deep); }
.fc-site .fc-category:not([aria-pressed=true]):hover,
.fc-site .fc-category:not([aria-pressed=true]):focus-visible {
  background:var(--brand-yellow); border-color:var(--brand-yellow); color:var(--brand-red-deep); }

/* The same 30% for every other button family, so the home, cart, order and catering pages match
   the menu (owner, 2026-09-24: "tumi shudhu thik korechho Menu page er button"). Each one carries
   its own height from the theme, at four classes deep, so each needs naming here:
     the app's own button   48px -> 34px      (storefront.css holds it at 3rem for a touch screen)
     sign in and sign up    46px -> 32px
     the policy tabs        52px -> 36px
     order tracking         50px -> 35px
   Icon buttons are left alone: the menu toggle, the search and the close cross are square targets,
   not the thick pills he is looking at, and a finger still has to find them. */
.fc-site .fc-button { min-height:2.1rem; padding-block:.35rem; }
/* the home feed's item buttons carry their own 44px minimum at three classes, and the menu's
   location button its own: both come down like the rest */
/* the home page's item buttons were the outline style while the menu's were solid: one button,
   one colour, the brand's own (owner, 2026-09-24: "home page er button er color thik hoyni") */
.fc-site .fc-feed-products .fc-button { min-height:1.95rem; padding-block:.3rem;
  background:var(--brand-red); border-color:var(--brand-red); color:#fff; }
.fc-site .fc-feed-products .fc-button:disabled { background:#e9e2d7; border-color:#e9e2d7; color:#6f6a63; }
.fc-site .fc-menu-toolbar>.fc-button { min-height:2.1rem; padding-block:.35rem; }
.fc-site.fc-device-app .signup-form .signup-btn { height:32px; }
.fc-site.fc-device-app .policy-sidebar .private-policy-tab-btn { height:36px; }
.fc-site.fc-device-app .theme-btn-border { height:35px; line-height:35px; }

/* --- the classic pages wear the brand colour too (owner, 2026-09-24) -------------------------
   The template's primary button is its yellow, with a red circle growing over it on hover. The
   owner wants the opposite, the way his red buttons already behave: the brand colour at rest,
   the truck's yellow under the mouse. The footer's Subscribe keeps the yellow, because it sits
   on the red footer and a red button would disappear into it. */
.dsf-desktop .theme-btn { background-color:var(--brand-red); color:#fff; }
.dsf-desktop .theme-btn::before { background-color:var(--brand-yellow); }
.dsf-desktop .theme-btn:hover { color:var(--brand-red-deep); }
/* the footer is the red band, so its buttons keep the yellow: the newsletter's Subscribe is
   written by the theme with dark text, which on brand red would be unreadable */
.dsf-desktop .email-btn,
.dsf-desktop .footer-section .theme-btn { background-color:var(--brand-yellow); color:var(--brand-red-deep); }

/* --- the last of the button faults the sweep found (owner, 2026-09-24) -----------------------
   On an iPad the category list is a 128px column, and "Fuchka and chaat" wrapped to two lines,
   so that one chip stood 57px against its neighbours' 34px. The label stays on one line and the
   chip keeps its height.
   On a laptop the policy tabs have a fixed 52px height, so "Refunds and Cancellations" wrapped
   out of its own box; it grows instead.
   And the classic Our Story page put a 56px button beside a 53px one. */
@media (min-width:768px) { .fc-site.fc-device-app .fc-category { white-space:nowrap; padding-inline:.55rem; font-size:.8rem; } }
/* four classes, because the theme fixes this tab's height with four of its own. The longest
   label, "Refunds and Cancellations", needed 224px in a 216px tab and wrapped out of that
   fixed height; a point smaller and a narrower gutter and it sits on one line, so every tab
   in the column still stands the same height. */
.dsf-desktop .policy-wrapper .policy-sidebar .private-policy-tab-btn { font-size:15px; padding-inline:8px; white-space:nowrap; }
.dsf-desktop .choose-button .theme-btn { height:56px; line-height:56px; }
/* the two app badges are written with a small line over a big one, so one stood 61px and the
   other 56px beside it; both take the taller */
.dsf-desktop .app-btn { min-height:61px; }
/* "Request Catering" needed 209px of a 201px button and wrapped out of its fixed 56px height;
   a narrower gutter keeps it on one line without changing the button's height */
.dsf-desktop .theme-btn.w-100 { padding-inline:1rem; }
/* the theme parks the blog sidebar's search button at right:-2px, so it hangs two pixels
   outside the form it belongs to */
.dsf-desktop .main-sideber .single-sideber-widget .search-widget form button { right:0; }

/* --- the classic header wears the app's yellow (owner, 2026-09-24) ---------------------------
   The app's header band is the truck's yellow, measured rgb(255,194,34) on .fc-header, with near
   black words. The classic header was white. It takes the same yellow, both at rest and once it
   sticks to the top of the window. The menu's words are already rgb(30,29,35), which reads at
   about 11:1 on this yellow, so they stay as they are. The cart's circle was yellow on white and
   would have disappeared into the band, so the circle turns white and keeps its dark bag. */
.dsf-desktop header.header-3,
.dsf-desktop header.header-3.sticky { background-color:var(--brand-yellow); }
.dsf-desktop header.header-3 .shop-icon { background-color:#fff; }

/* --- a button on a photographed band (owner, 2026-09-24) -------------------------------------
   The brand red button disappears into the dark red bands: Today's Special, Shahi Jhalmuri and
   Book the Truck for Your Event, all of them marked bg-cover by the theme because they carry a
   picture. Measured: the button rgb(138,31,18) on a band whose own colour is rgb(90,15,12) under
   a photograph. There the button wears the truck's yellow with dark red words, and fills deep
   red with white words under the mouse, which is the same pair the other way round. */
.dsf-desktop .bg-cover .theme-btn,
.dsf-desktop .contact-booking-wrapper-3 .theme-btn {
  background-color:var(--brand-yellow); color:var(--brand-red-deep); }
.dsf-desktop .bg-cover .theme-btn::before,
.dsf-desktop .contact-booking-wrapper-3 .theme-btn::before { background-color:var(--brand-red-deep); }
.dsf-desktop .bg-cover .theme-btn:hover,
.dsf-desktop .contact-booking-wrapper-3 .theme-btn:hover { background-color:var(--brand-red-deep); color:#fff; }

/* The theme fills a button by growing a circle over 0.8 seconds while the words change colour at
   once, so for most of a second the words sit on the colour they were not chosen for and cannot
   be read (the owner's picture of Request Catering, caught mid hover). The fill is a plain swap
   now, so the colour and the words change together and every moment is readable. The header's
   own button cannot take the yellow, since it stands on the yellow band. */
.dsf-desktop .theme-btn::before { display:none; }
.dsf-desktop .theme-btn { transition:background-color .18s ease, color .18s ease; }
.dsf-desktop .theme-btn:hover { background-color:var(--brand-yellow); color:var(--brand-red-deep); }
/* the theme paints this one's hover words with its own !important, so this needs one too */
.dsf-desktop header.header-3 .theme-btn:hover { background-color:var(--brand-red); color:#fff!important; }
/* Our Best Selling Food: the theme leaves these Order Now buttons hollow, an outline on white,
   while every other button on the page is filled. They take the brand colour like the rest
   (owner, 2026-09-24). Five classes, because the theme's own rule carries four. */
.dsf-desktop .shop-category-items .content .pricing-item .theme-btn,
.dsf-desktop .shop-category-items .theme-btn {
  background-color:var(--brand-red); border-color:var(--brand-red); color:#fff; }
.dsf-desktop .shop-category-items .content .pricing-item .theme-btn:hover,
.dsf-desktop .shop-category-items .theme-btn:hover {
  background-color:var(--brand-yellow); border-color:var(--brand-yellow); color:var(--brand-red-deep); }
/* "Sold out" stood as a 65x32 pink chip beside a 172x53 button, so that card read as unfinished
   next to its neighbours. It keeps the button's height, shape and type size and says clearly
   that there is nothing to press: a quiet warm surface, muted words, a soft edge (owner,
   2026-09-24). */
.dsf-desktop .dsf-sold-out {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:53px; padding:0 28px; border-radius:8px;
  background:#f3ede4; border:1px solid #e4dbcd; color:#7b7469;
  font-size:17px; font-weight:400; letter-spacing:0; cursor:not-allowed; }
/* Classic footer, narrow window: below 767px the theme centres the footer's words, but the
   social row is a flex row with no justify of its own, so the icons stayed at the left edge of a
   full width box, measured 20px off centre in a 246px box (owner, 2026-09-24). Wide windows keep
   the left edge, where the column's words are left aligned too. */
@media (max-width:767px) { .dsf-desktop footer .social-icon { justify-content:center; } }