/* The engine's storefront additions to the template's sections (the ordering, account, legal,
   gift, catering and delivery blocks), loaded after the template's main.css and after app.css.
   The brand colors are tokens (:root below); each client's own values come after this file in
   assets/app/client.css, written by engine/build.mjs from clients/<slug>/client.json "brand".
   The template's own rules are never edited. */

/* a held order on the tracking page: the code form */
.dsf-review { margin: 18px 0; padding: 20px 22px; border-radius: 16px; background: #fff6e8; border: 1px solid #f3dcab; }
.dsf-review h4 { margin: 0 0 6px; font-size: 18px; color: #25130e; }
.dsf-review p { margin: 0 0 12px; color: #6f6259; font-size: 15px; }
.dsf-review-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dsf-review-form input { flex: 0 1 200px; padding: 12px 14px; border: 1px solid #ddd3c7; border-radius: 12px; font: inherit; font-size: 22px; letter-spacing: 6px; text-align: center; background: #fff; }
.dsf-review-form input:focus { outline: 0; border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(138, 31, 18, .14); }

/* ---------------------------------------------------------------- THE BRAND COLOR RULE (owner, 2026-09-19)
   Every accent on this site is the truck's: the deep red with the golden glow (the paint of the
   footer's copyright strip and the phone dock) and the yellow. The template's GREEN (--theme2,
   #00833E: button hover, script sub-titles, ornaments, links) is never shown. New work uses these
   tokens; a green that means "success" (paid, ready, open now, points earned) may stay green. */
:root {
  --brand-red: #8a1f12;        /* accents, links, script titles */
  --brand-red-deep: #5a0f0c;   /* the strip's base */
  --brand-gold: #b06a14;       /* the glow */
  --brand-yellow: #ffc222;     /* the truck's yellow, the template's --theme */
  /* the paint: deep red ends, a red glow in the middle (the golden middle read as coffee; owner, 2026-09-19) */
  --brand-paint-tile: url("../img/dsf/line-art-tile.png");   /* a texture over the paint, or none */
  --brand-paint: linear-gradient(100deg, #4a0b09 0%, #8c1a10 30%, #c8391d 52%, #8c1a10 74%, #4a0b09 100%);
  --theme2: var(--brand-red);  /* the template reads its green from here: 83 rules turn brand red at once */
}
/* the button hover: the template sweeps a green disc across; it is the strip's paint now */
.theme-btn::before { background-color: var(--brand-red-deep); background-image: var(--brand-paint-tile), var(--brand-paint); background-size: 180px 180px, 100% 100%; background-repeat: repeat, no-repeat; }
/* the greens the template hard-codes on pages we publish */
.sign-in-section .forgot-password a, .sign-in-section .forgot-password a:hover, .testimonial-wrapper-3 .testimonial-right-item .arrow-button .array-prev { color: var(--brand-red); }
.special-delivery-section-3 .section-title .sub-title { color: var(--brand-yellow); }   /* the script line over the red band: red on red could not be read (the owner, 2026-09-20) */
.food-banner-items .content .price, .best-food-menu-wrap-two .content .price-items span { color: var(--brand-yellow); }   /* the special cards' prices, the template's green on the dark cards */
/* found by a computed-style scan of every built page (2026-09-20): the hero's phone link, the order-ahead pins, the story page's list box */
.hero-3 .hero-content .icon-item .content h2 a { color: var(--brand-yellow); }
.special-delivery-wrapper-3 .left-item .number span { background-color: var(--brand-red); }
.why-choose-us-wrapper-4 .choose-us-content .choose-us-box { border-left-color: var(--brand-red); }
.why-choose-us-wrapper-4 .choose-us-content .choose-us-box .list li i { color: var(--brand-red); }
.view-order-tracking-wrapper .order-journey-container .journey-card .timeline-stepper .step.active .icon-wrapper { background-color: var(--brand-red); }
.view-order-tracking-wrapper .order-journey-container .journey-card .status-detail-box .detail-content .expected-time, .view-order-tracking-sidebar-area .summary-card .info-row .payment-status { color: var(--brand-red); }
.view-order-tracking-wrapper .order-journey-container .journey-card .timeline-stepper .step.active::after { background-color: var(--brand-red); }
.testimonial-section .swiper-dots .dots-line { background: linear-gradient(270deg, var(--brand-red) 4.85%, rgba(255, 255, 255, 0) 96.39%); }
.testimonial-section .swiper-dots .dots-line2 { background: linear-gradient(90deg, var(--brand-red) 4.85%, rgba(255, 255, 255, 0) 96.39%); }
.why-choose-us-wrapper-3 .burger-image .choose-box, .award-box-items .award-text { background-color: var(--brand-red); border-color: var(--brand-red); }
.footer-widget-wrapper.style-widget-wrapper-4 .footer-widget-items .widget-head .dashed { border-bottom-color: var(--brand-yellow); }

/* ---------------------------------------------------------------- home hero: the two actions
   The pill button and the play link the client had on the first (Lisra-hosted) home page,
   carried over as they were: yellow pill with a 3D edge and a soft glow, arrow that nudges,
   white play disc with a ripple. They sit between "Hot and Special" and "Call for Order". */
.hero-3 .hero-content .hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  margin-top: 40px;
}
.hero-3 .hero-content .hero-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  background: #ffc928; color: #25130e;
  font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.45;
  box-shadow: 0 5px 0 #b16d07;
  transition: transform .2s, box-shadow .2s;
  animation: dsf-cta-glow 2.8s ease-out infinite;
}
.hero-3 .hero-content .hero-cta:hover { color: #25130e; transform: translateY(-2px); box-shadow: 0 7px 0 #b16d07; }
/* the template styles every span in .hero-content as the 76px "Special Offer" line; these two are not that */
.hero-3 .hero-content .hero-cta span, .hero-3 .hero-content .hero-play span {
  font: inherit; color: inherit; line-height: 1; text-transform: none;
}
.hero-3 .hero-content .hero-cta span { display: inline-block; animation: dsf-cta-arrow 1.6s ease-in-out infinite; }
.hero-3 .hero-content .hero-play {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  color: #fff; font-family: "Nunito", sans-serif; font-size: 15px; font-weight: 400;
}
.hero-3 .hero-content .hero-play:hover { color: #ffc928; }
.hero-3 .hero-content .hero-play span {
  display: grid; place-items: center; flex: 0 0 33px; width: 33px; height: 33px;
  border-radius: 50%; background: #fff; color: #c8102e; font-size: 13px; padding-left: 3px;
  animation: dsf-play-ripple 2.4s ease-out infinite, dsf-play-beat 2.4s ease-in-out infinite;
}
.hero-3 .hero-content .hero-play:hover span { animation-play-state: paused; }
@keyframes dsf-cta-glow {
  0%, 100% { box-shadow: 0 5px 0 #b16d07, 0 0 0 0 rgba(255, 201, 40, .55); }
  60% { box-shadow: 0 5px 0 #b16d07, 0 0 0 16px rgba(255, 201, 40, 0); }
}
@keyframes dsf-cta-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes dsf-play-ripple {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes dsf-play-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (max-width: 1399px) {
  .hero-3 .hero-content .hero-actions { margin-top: 30px; }
}
@media (max-width: 991px) {
  .hero-3 .hero-content .hero-actions { justify-content: center; }
}
@media (max-width: 575px) {
  .hero-3 .hero-content .hero-actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-3 .hero-content .hero-cta { width: 100%; }
  .hero-3 .hero-content .hero-play { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-3 .hero-content .hero-cta, .hero-3 .hero-content .hero-cta span, .hero-3 .hero-content .hero-play span { animation: none; }
}

/* ---------------------------------------------------------------- home header: the bar 40% thinner
   The template's bar is 116px (96px logo canvas + 10px padding, 68px menu links). The client
   wants it squeezed top and bottom: logo canvas 58px, 6px padding, 50px links = 70px, and the
   hero follows the bar up. The sticky state shares these rules. */
.header-3 .header-main { padding: 10px 0; }        /* 50px links + 20px = the 70px bar (the logo is shorter than the links now) */
.header-3 .header-main .main-menu nav > ul > li > a { padding: 11px 0; }
.hero-3 { margin-top: 70px; }

/* ---------------------------------------------------------------- home hero: the white sparkle
   The template's tara.png (99x70) is a fan of rays radiating from a point at (52,60) of the
   graphic, spanning from up-left round to the right. Turned 30 degrees anticlockwise the fan
   opens over the top of the head, left to right, as the client sketched; the radiating point
   sits on the crown of the girl's hair (29.6% / 14.4% of the picture). The sparkle lives
   INSIDE the picture's tilt box (index.html .hero-figure) so it moves with the picture; the
   template's own rule still hides it under 1400px. */
.hero-3 .hero-figure { position: relative; }
.hero-3 .hero-figure .shape { position: absolute; right: auto; left: calc(29.6% - 71.9px); top: calc(14.4% - 33.6px); }   /* 11px (15% of its size) lower than the crown, at the client's word */
.hero-3 .hero-figure .shape img { width: auto; height: auto; transform: rotate(-55deg); }   /* right side up, left side down (client), in two steps from the -30 he approved */

/* ---------------------------------------------------------------- home hero: the tomatoes
   30px higher than the template's -15px (client): clear of the headline. The hero clips at
   its top edge, so the top tomato is cut a little more than the template already cut it. */
.hero-3 .tomato-shape { top: -45px; }

/* ---------------------------------------------------------------- home hero: the client's words
   The demo page's copy in the template's slots, styled as the template styled "Special Offer /
   Delicious!": the white line at the template's size, the yellow h1 at the template's full 144px
   on two lines ("Flavor" / "always.", each fits the column), the script line replaced by a plain
   lead paragraph, a small eyebrow above as on the demo page. Margins are trimmed so the block
   still fits beside the picture without making the hero taller. */
.hero-3 .hero-content .hero-eyebrow {
  display: block; margin-bottom: 12px;
  font-family: "Nunito", sans-serif; font-size: 14px; font-weight: 300; line-height: 1; letter-spacing: .18em;
  color: #ffc928; text-transform: uppercase;
}
.hero-3 .hero-content .hero-eyebrow::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%;
  background: #ff6a13; vertical-align: 1px;
}
.hero-3 .hero-content h1 { line-height: .9; margin-top: 4px; }
.hero-3 .hero-content .hero-lead {
  max-width: 540px; margin-top: 10px;
  font-family: "Nunito", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.6; color: #fff;
}
.hero-3 .hero-content .hero-actions { margin-top: 20px; }
.hero-3 .hero-content .icon-item { margin-top: 28px; }
@media (max-width: 1399px) {
  .hero-3 .hero-content .hero-lead { font-size: 17px; }
  .hero-3 .hero-content .icon-item { margin-top: 30px; }
}
@media (max-width: 991px) {
  .hero-3 .hero-content .hero-lead { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575px) {
  .hero-3 .hero-content .hero-lead { font-size: 16px; }
}

/* ---------------------------------------------------------------- the four cards under the hero
   The demo page's four points with its emoji icons inside the template's icon discs. */
.feature-box-items-3 .icon .emoji { display: inline-block; font-size: 28px; line-height: 60px; font-style: normal; }
/* hover (client): the card lifts, the disc turns yellow as in the template, the emoji wobbles
   with the template's own wobble keyframes (the template only wobbled an <img> in the disc) */
.feature-box-items-3 { transition: transform .35s cubic-bezier(.25, 1, .5, 1), box-shadow .35s ease; }
.feature-box-items-3:hover { transform: translateY(-8px); box-shadow: 5px 18px 40px 4px rgba(0, 0, 0, .16); }
.feature-box-items-3:hover .icon .emoji { animation: wobble 1.5s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .feature-box-items-3, .feature-box-items-3:hover { transition: none; transform: none; }
  .feature-box-items-3:hover .icon .emoji { animation: none; }
}

/* The hero's top-left corner: the client's Shahi Jhalmuri plate in the template's pizza's
   place (hero-shape-1.png, drawn at 2x by the client's pictures.py, so the box is capped at the
   template's 309px where the template gives it no width). Between 1400 and 1600px the corner
   is 160px wide and the eyebrow line starts at the container's edge inside it, so the text
   gets a thin dark edge to stay readable over the plate. */
@media (min-width: 1601px) { .hero-3 .left-shape { max-width: 309px; } }
.hero-3 .hero-content .hero-eyebrow { text-shadow: 0 1px 2px rgba(60, 0, 0, .7), 0 0 8px rgba(60, 0, 0, .5); position: relative; z-index: 2; }   /* over the template's leaf at the top left, which reaches the words at 1440px (audit F10) */

/* ---------------------------------------------------------------- home offer cards: the dish keeps its shape
   The template's second and third offer cards size the picture box by its top and bottom
   offsets (40px / 20px of a 336px card) and stretch the picture to fill it (width and height
   100%), which pulled our bowls tall (175x277 for a round bowl). The picture now fits inside
   the box without stretching, sitting at its bottom like the template's food. */
.food-offer-wrapper-3 .food-offer-banner .food-img.style-2 img { object-fit: contain; object-position: center bottom; }
/* Above 1600px the template gives the first offer card's picture box no width, so it takes
   the file's own size: the template's file is 268px wide, ours is 2x (536), which blew the
   plate up over the whole card. Capped at the template's width; the other two boxes are
   sized by their offsets and unaffected. */
@media (min-width: 1601px) {
  .food-offer-wrapper-3 .food-offer-banner .food-img { max-width: 268px; }
}

/* ---------------------------------------------------------------- home header: the top bar and the buttons
   The client's first home page had a dark top bar (tagline, phone, My Order, Sign In) and, in the
   header, a round yellow cart button and an orange "Book Catering" pill. The top bar sits above
   the template's header bar (the client's header override writes it) and hides when the header sticks. */
.dsf-topbar { background: #1c1216; color: #fff; font-family: "Nunito", sans-serif; font-size: 13px; line-height: 1.2; }
.dsf-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.dsf-topbar__tag { color: rgba(255, 255, 255, .88); }
.dsf-topbar__links { display: flex; align-items: center; gap: 18px; }
.dsf-topbar__links a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; color: #fff; font-size: 12px; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; }
.dsf-topbar__links a:hover { color: #ffc222; }
.dsf-topbar__links .dsf-topbar__phone { font-size: 14px; letter-spacing: 0; text-transform: none; }
.dsf-topbar__phone i { color: #ffc222; font-size: 13px; }
.dsf-topbar__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .28); }
.header-3.sticky .dsf-topbar { display: none; }
.hero-3 { margin-top: 106px; }                       /* 70px bar + 36px top bar */
.dsf-topbar__links a { white-space: nowrap; }
@media (max-width: 991px) {   /* tablets and phones: the tagline goes, the three links sit centred on one line (at 768 they wrapped beside it) */
  .dsf-topbar__tag { display: none; }
  .dsf-topbar .container { justify-content: center; }
  .dsf-topbar__links { gap: 14px; }
}
/* a narrow phone (360): the three links on one line, a touch smaller and tighter, never wrapped */
@media (max-width: 400px) {
  .dsf-topbar__links { gap: 10px; }
  .dsf-topbar__links a { gap: 5px; letter-spacing: .04em; font-size: 11px; }
  .dsf-topbar__links .dsf-topbar__phone { font-size: 13px; }
}
/* the cart: a solid yellow disc; the pill: the brand paint (the strip's deep red with the golden
   glow; owner, 2026-09-19: "brand color"), uppercase, letter-spaced, no arrow; the hover sweep
   is the yellow disc with dark words, like the bag beside it */
.header-3 .shop-icon-right .shop-icon { background: var(--brand-yellow); border-color: var(--brand-yellow); color: #1e1d23; }
.header-3 .shop-icon-right .shop-icon span { background: #1e1d23; color: #fff; }
.header-3 .header-right .theme-btn.small-btn {
  height: 44px; line-height: 44px; padding: 0 24px; border-radius: 999px;
  background-color: var(--brand-red-deep); background-image: var(--brand-paint-tile), var(--brand-paint); background-size: 180px 180px, 100% 100%; background-repeat: repeat, no-repeat;
  color: #fff; font-size: 13px; font-weight: 300; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(90, 15, 12, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.header-3 .header-right .theme-btn.small-btn::before { background-color: var(--brand-yellow); background-image: none; }
.header-3 .header-right .theme-btn.small-btn:hover { color: #1e1d23; }

/* the home page's catering strip ("Book the Truck"): the template paints it with an inline picture
   (its green band, redrawn as the brand paint by the client's pictures.py); on top of that the CSS
   paint itself, so the line art keeps the strip's 180px scale at every width instead of zooming
   with bg-cover on a tall phone band. !important: the picture is set inline by the template. */
.contact-booking-wrapper-3 { background-color: var(--brand-red-deep); background-image: var(--brand-paint-tile), var(--brand-paint) !important; background-size: 180px 180px, 100% 100% !important; background-repeat: repeat, no-repeat !important; background-position: 0 0, center !important; }

/* ---------------------------------------------------------------- logos 25% smaller (client)
   Header wordmark 103x44 (the file and its size attributes), the phone header's 140px rule
   becomes 105px, the drawer's 120px / 130px become 90px / 98px. */
@media (max-width: 575px) { .header-main .logo-1 img { width: 105px; } }
.offcanvas__wrapper .offcanvas__logo img { width: 90px; }
@media (max-width: 575px) { .offcanvas__wrapper .offcanvas__logo img { width: 98px; } }

/* ---------------------------------------------------------------- home footer bottom strip (client)
   The template's green strip becomes a dark red with the hero's food line art tiled small over it
   (assets/img/dsf/line-art-tile.png, lifted from the template's orange panel by prepare-images.py). */
.footer-bottom.style-3,
.app-tabbar {
  background-color: var(--brand-red-deep);
  /* dark red with a soft golden glow running through it, like the truck's paint; the phone's
     tab bar wears the same paint (owner, 2026-09-19) */
  background-image: var(--brand-paint-tile), var(--brand-paint);
  background-size: 180px 180px, auto;
  background-repeat: repeat, no-repeat;
  background-position: 0 0, center;
  /* a slim strip (owner, 2026-09-19): the band starts AT the thin line, nothing above it */
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0;
}
.footer-bottom.style-3 .footer-bottom-wrapper { border-top: 0; padding: 13px 0; }
.footer-bottom.style-3 .footer-bottom-wrapper p { font-size: 15px; line-height: 25px; margin: 0; }
.footer-bottom.style-3 .app-image img { height: 25px; width: auto; display: block; }
@media (max-width: 767px) { .footer-bottom.style-3 .footer-bottom-wrapper { gap: 10px; padding: 13px 0; } }
/* the strip is the very bottom of the page (owner, 2026-09-19): the template kept 120px of dark
   space under it for its floating burger; that decoration now floats above the strip instead */
.footer-section.style-3.footer-fix-padding-3, .footer-section-4.footer-fix-padding-7 { padding-bottom: 0 !important; }   /* the demo's own page ends at its copyright strip; the template's padding class would leave a blank band under it */
.footer-section.style-3 .bottom-shape { bottom: 64px; }

/* the tab bar on that paint (owner, 2026-09-19): a floating dock with 30px corners, the glyph of
   the current tab lit in a yellow pill, white glyphs elsewhere */
.app-tabbar {
  /* the same paint as the strip and the buttons */
  background-color: var(--brand-red-deep);
  background-image: var(--brand-paint-tile), var(--brand-paint);
  --dock-gap: 10px;
  left: var(--dock-gap); right: var(--dock-gap); bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom));
  border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.22); border-top-color: rgba(255, 255, 255, 0.34);
  padding: 0 6px; box-shadow: 0 14px 34px rgba(30, 6, 4, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.app-tabbar a { gap: 2px; color: rgba(255, 255, 255, 0.82); font-size: 10.5px; letter-spacing: 0.2px; transition: color 0.2s, transform 0.15s; }
/* the label inherited the template's 28px line height, which pushed it 9px away from the glyph */
.app-tabbar a span { line-height: 1.2; }
.app-tabbar a:active { transform: scale(0.94); }
/* duotone glyphs: white with a golden second layer; dark on the lit pill */
.app-tabbar a i {
  display: grid; place-items: center; width: 46px; height: 28px; border-radius: 14px; font-size: 20px;
  --fa-primary-color: #fff; --fa-secondary-color: #ffd45c; --fa-secondary-opacity: 0.62;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.app-tabbar a.is-current { color: #ffc222; }
.app-tabbar a.is-current i {
  --fa-primary-color: #2a0906; --fa-secondary-color: #7a1c10; --fa-secondary-opacity: 0.6;
  background: linear-gradient(135deg, #ffd45c, #ffb400);
  box-shadow: 0 6px 16px rgba(255, 180, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); transform: translateY(-1px);
}
/* the cart: the app's main action, a raised round yellow button in the middle of the dock */
.app-tabbar a.app-tabbar-cart { height: var(--app-tabbar-h); justify-content: flex-end; padding-bottom: 10.7px; }   /* its label on the same line as the others, the circle overflows upward */
.app-tabbar a.app-tabbar-cart i, .app-tabbar a.app-tabbar-cart.is-current i {
  flex: none; width: 56px; height: 56px; border-radius: 50%; font-size: 22px; transform: none; margin-bottom: 7px;   /* the ring never touches the Cart label */
  color: var(--brand-red); --fa-primary-color: var(--brand-red); --fa-secondary-color: var(--brand-red-deep); --fa-secondary-opacity: 0.8;
  /* the brand yellow with the same line art as the strip, the basket in the brand red (owner, 2026-09-20; it was red with a white basket), a white ring cut into the dock */
  background-color: #ffc222;
  background-image: url("../img/dsf/line-art-tile.png"), linear-gradient(145deg, #ffd65e 0%, #ffc222 55%, #e5a70f 100%);
  background-size: 110px 110px, auto; background-position: center, center;
  box-shadow: 0 10px 22px rgba(120, 15, 10, 0.5), 0 0 0 4px #fff, inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(90, 10, 8, 0.45);
}
.app-tabbar a.app-tabbar-cart.is-current i { box-shadow: 0 10px 22px rgba(120, 15, 10, 0.6), 0 0 0 4px #fff, 0 0 0 7px rgba(255, 194, 34, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(90, 10, 8, 0.45); }
.app-tabbar a.app-tabbar-cart:active i { transform: scale(0.94); }
.app-tabbar-count { top: 6px; left: calc(50% + 8px); box-shadow: 0 0 0 2px var(--brand-red-deep); }
/* the cart count: red, white digits, a white ring, on the circle's top-right */
.app-tabbar a.app-tabbar-cart .app-tabbar-count { top: -18px; left: calc(50% + 12px); min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px; background: #ffc222; color: var(--brand-red-deep); font-size: 12px; font-weight: 400; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, 0.35); }
@media (max-width: 991px), (hover: none) and (pointer: coarse) {
  /* the dock floats 10px above the bottom edge, so the page needs that much more clearance */
  #smooth-content { padding-bottom: calc(var(--app-tabbar-h) + 10px + env(safe-area-inset-bottom)); }
  .back-to-top { bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 26px); }
  .app-install { bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 22px); }
}

/* footer "Get the app": the two buttons of the first build (Add to Home screen, Order for Pickup) */
.app-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 22px 8px 16px; border: 0; border-radius: 10px;
  background: #fff; color: #1e1d23; font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 300; line-height: 1.1; text-align: left; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
}
.app-btn i { font-size: 28px; color: var(--brand-red); --fa-primary-color: var(--brand-red); --fa-secondary-color: #ffc222; --fa-secondary-opacity: 0.9; }
.app-btn small { display: block; font-size: 11px; font-weight: 400; color: #76756d; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.app-btn:hover, .app-btn:focus-visible { background: #ffc222; color: #1e1d23; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32); outline: 0; }
.app-btn:hover small { color: #5a4a10; }
.app-btn i { width: 32px; text-align: center; flex: none; }
.app-btn { min-width: 196px; }
/* the two columns breathe: the right one wraps its line instead of leaning on the Subscribe button,
   and both button rows end on the same line */
@media (min-width: 1200px) {
  .footer-section.style-3 .footer-top-items-3 { gap: 40px; align-items: flex-end; }
  .footer-section.style-3 .footer-top-items-3 .footer-right { flex: 0 1 470px; max-width: 470px; }
  .footer-section.style-3 .footer-top-items-3 .footer-right .app-item { margin-top: 6px; margin-bottom: 5px; gap: 18px; }
  .footer-section.style-3 .footer-top-items-3 .footer-left { align-items: flex-end; }
  .footer-section.style-3 .footer-top-items-3 .footer-left .footer-logo { align-self: center; }
}

/* ---------------------------------------------------------------- the home header on inner pages
   A client whose layout puts the home header (header-3, absolute over the page top) on every page sets
   the banner's top margin under it in its client.css (the template's 270px is for its own taller
   inner header, which a client without that layout choice keeps). */
.header-3 { background: #fff; }
/* the inner cover: the client's picture behind the title, shown centred and covering (the template's
   WebGL effect stretched it; app.js takes that off). The template's own pictures (the dish at the
   left edge, the person beside it) keep their places from main.css; a client whose pictures have
   other sizes, or whose background leaves the title less room, sets them in its client.css (Dhaka:
   clients/dhaka-street-food/client.css). */
.breadcrumb-wrapper { background-position: center center; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
.breadcrumb-wrapper .shape-1 img, .breadcrumb-wrapper .girl-shape img { height: auto; }
/* app.js sizes the cover title to the room the heading has (the template's 60px when a line holds it,
   smaller to 52px, then two lines at the size the widest line allows, never under 36px): .dsf-title-2
   marks two lines and trims the paddings so the banner stays the template's 365px, and the title
   block never gets shorter than a 60px line (or two) for the same reason. */
.breadcrumb-wrapper .breadcrumb-sub-title { min-height: 57px; display: flex; align-items: center; justify-content: center; }
.breadcrumb-wrapper.dsf-title-2 .page-heading { padding-top: 106px; padding-bottom: 106px; }
.breadcrumb-wrapper.dsf-title-2 .breadcrumb-sub-title { min-height: 115px; }
/* that margin used to collapse THROUGH #smooth-content, so ScrollSmoother measured the page 106px
   short and the footer's last 106px could never be scrolled to (found 2026-09-19 when the copyright
   strip moved to the very bottom and vanished). A formatting context keeps the margin inside. */
#smooth-content { display: flow-root; }

/* ---------------------------------------------------------------- ordering: the storefront layer
   Everything the online ordering adds to the template's pages: the location chip, the item
   sheet, the basket rows, the checkout boxes, the account page. Template classes do the
   heavy lifting (theme-btn, checkout-single, cart tables); these only fill the gaps. */
.dsf-chip-host { margin-bottom: 22px; }
.dsf-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff6e8; border: 1px solid #f3dcab; color: #25130e; font-size: 15px; font-family: inherit; }
button.dsf-chip { cursor: pointer; }
.dsf-chip i { color: #f47b25; }
.dsf-chip small { color: #6f6259; }
.dsf-chip__change { border: 0; background: none; color: #d3641a; font-weight: 400; cursor: pointer; padding: 0 2px; text-decoration: underline; }
.dsf-paused { display: block; margin-top: 8px; color: #8a2a1f; font-weight: 400; }
.dsf-modal .modal-content { border-radius: 18px; border: 0; }
.dsf-modal .modal-header { border-bottom: 1px solid #f0e8de; padding: 18px 22px; }
.dsf-modal .modal-title { font-size: 22px; font-weight: 300; color: #25130e; }
.dsf-modal .modal-body { padding: 18px 22px 22px; }
.dsf-modal-lead { color: #6f6259; margin-bottom: 14px; }
.dsf-locations { display: grid; gap: 10px; }
.dsf-location { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 2px solid #ece4da; background: #fff; cursor: pointer; font-family: inherit; }
.dsf-location:hover { border-color: #f47b25; }
.dsf-location.is-current { border-color: #f47b25; background: #fff6e8; }
.dsf-location.is-paused { opacity: .6; }
.dsf-location__name { font-weight: 400; font-size: 17px; color: #25130e; }
.dsf-location__addr { color: #6f6259; font-size: 14px; }
.dsf-location__hours { color: #1f8a4c; font-size: 13px; font-weight: 400; }
.dsf-location.is-paused .dsf-location__hours { color: #8a2a1f; }
.dsf-item-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.dsf-item-top img { width: 110px; height: 110px; object-fit: contain; flex: none; }
.dsf-item-desc { margin: 0 0 6px; color: #6f6259; }
.dsf-item-price { font-size: 20px; color: #f47b25; }
.dsf-note { font-size: 13px; color: #7a4f0d; margin-top: 4px; }
.dsf-group { border: 0; padding: 0; margin: 0 0 14px; }
.dsf-group legend { font-weight: 400; font-size: 15px; margin-bottom: 6px; color: #25130e; }
.dsf-group legend small { color: #6f6259; font-weight: 400; }
.dsf-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #ece4da; border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.dsf-option:has(input:checked) { border-color: #f47b25; background: #fff6e8; }
.dsf-option input { width: 18px; height: 18px; accent-color: #f47b25; margin: 0; }
.dsf-option span { flex: 1; }
.dsf-option em { font-style: normal; color: #6f6259; font-size: 13px; }
.dsf-field { display: block; margin-bottom: 14px; }
.dsf-field span { display: block; font-size: 13px; font-weight: 400; margin-bottom: 5px; }
.dsf-field input { width: 100%; padding: 10px 12px; border: 1px solid #ddd3c7; border-radius: 10px; font: inherit; }
.dsf-item-actions { display: flex; align-items: center; gap: 12px; }
.dsf-item-actions .theme-btn { flex: 1; justify-content: center; }
.dsf-qty { display: inline-flex; align-items: center; border: 1px solid #ddd3c7; border-radius: 999px; overflow: hidden; }
.dsf-qty button { width: 42px; height: 44px; border: 0; background: #fff; font-size: 20px; cursor: pointer; }
.dsf-qty input { width: 44px; height: 44px; border: 0; text-align: center; font: inherit; font-weight: 400; color: #1e1d23; background: #fff; -moz-appearance: textfield; }   /* the template paints modal inputs white on white */
.dsf-qty button { color: #1e1d23; }
.dsf-qty input::-webkit-outer-spin-button, .dsf-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dsf-sold-out, .dsf-days { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 400; margin-bottom: 6px; }
.dsf-sold-out { background: #fde3e0; color: #8a2a1f; }
.dsf-days { background: #fff1d6; color: #7a4f0d; }
.is-sold-out .thumb img { opacity: .45; filter: grayscale(1); }
.is-sold-out .icon a { pointer-events: none; opacity: .4; }
/* the Add door on every card: the brand's yellow pill with dark words (the theme-btn's own colors), red on hover */
.dsf-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 14px; border-radius: 999px; background: var(--brand-yellow, #ffc222); color: #1e1d23 !important; font-size: 13px; font-weight: 400; line-height: 22px; white-space: nowrap; transition: background .2s, color .2s; }
.dsf-add:hover { background: var(--brand-red, #8a1f12); color: #fff !important; }
.dsf-add i { font-size: 11px; }
/* the home menu tabs (siteRender): the pill beside the price, on the price's line */
.food-menu-items-3 .food-menu-itemss .content .dsf-add { display: inline-flex; margin: 8px 0 0 auto; }
.food-menu-items-3 .food-menu-itemss .content { display: flex; flex-direction: column; align-items: flex-start; }
.food-menu-items-3 .food-menu-itemss .content .dsf-add { align-self: flex-end; }
/* the board could not load: one line on the ordering pages saying so, with the phone */
.dsf-down { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 24px; padding: 12px 16px; border-radius: 12px; background: #fff4d6; border: 1px solid #ecd28a; color: #5a3a00; font-size: 14px; }
.dsf-down a { color: var(--brand-red, #8a1f12); font-weight: 400; white-space: nowrap; }
.dsf-select { width: 100%; padding: 8px 10px; border: 1px solid #ddd3c7; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.dsf-empty { text-align: center; padding: 30px 10px; }
.dsf-empty p { margin-bottom: 14px; font-size: 18px; }
.dsf-mods { display: block; font-size: 13px; color: #6f6259; font-weight: 400; white-space: normal; }
.cart-total-items .dsf-earn { color: #1f8a4c; }
.cart-total-items .theme-btn.is-disabled { opacity: .5; pointer-events: none; }
.dsf-alert { margin: 12px 0 0; padding: 0; font-weight: 400; min-height: 0; }
.dsf-alert:not(:empty) { padding: 10px 14px; border-radius: 10px; }
.dsf-alert.is-error { background: #fdecea; color: #8a2a1f; }
.dsf-alert.is-info { background: #eef6ff; color: #1c4f80; }
.dsf-alert.is-ok { background: #eaf7ee; color: #1a5c33; }
.dsf-muted { color: #6f6259; font-size: 14px; margin: 0; }
.dsf-recent { margin-top: 22px; }
.dsf-recent h3 { font-size: 16px; margin-bottom: 8px; }
.dsf-recent a { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #ece4da; color: #25130e; }
.dsf-recent a span { flex: 1; color: #6f6259; font-size: 14px; }
/* checkout */
.dsf-summary .dsf-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #ece4da; }
.dsf-summary .dsf-line small { display: block; color: #6f6259; font-size: 13px; }
.dsf-totals { list-style: none; margin: 12px 0 0; padding: 0; }
.dsf-totals li { display: flex; justify-content: space-between; padding: 4px 0; }
.dsf-totals .dsf-grand { font-weight: 400; font-size: 18px; border-top: 2px solid #25130e; margin-top: 6px; padding-top: 8px; }
.dsf-totals .dsf-earn { color: #1f8a4c; font-size: 14px; }
.dsf-edit { display: inline-block; margin-top: 10px; font-size: 14px; text-decoration: underline; }
.dsf-pay-methods .checkout-radio-single label small { display: block; font-size: 12px; color: #6f6259; }
.dsf-choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dsf-choice { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #ddd3c7; border-radius: 10px; cursor: pointer; margin: 0; }
.dsf-choice:has(input:checked) { border-color: #f47b25; background: #fff6e8; }
.dsf-choice input { width: 18px; height: 18px; accent-color: #f47b25; margin: 0; }
.dsf-choice small { color: #6f6259; }
.dsf-pickup select { width: 100%; padding: 12px 14px; border: 1px solid #ddd3c7; border-radius: 10px; font: inherit; background: #fff; }
.dsf-time-note { color: #8a2a1f; font-weight: 400; margin: 8px 0; min-height: 0; }
.dsf-time-note:empty { display: none; }
.dsf-coupon { display: flex; gap: 8px; margin-bottom: 12px; }
.dsf-coupon input { flex: 1; padding: 10px 14px; border: 1px solid #ddd3c7; border-radius: 10px; font: inherit; text-transform: uppercase; }
.dsf-points-toggle { width: 100%; }
.dsf-points-amount { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dsf-points-amount input { width: 110px; padding: 8px 10px; border: 1px solid #ddd3c7; border-radius: 10px; font: inherit; }
.dsf-points-amount small { flex-basis: 100%; color: #7a4f0d; }
.checkout-single .input-single input.is-invalid, .checkout-single .input-single textarea.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.dsf-fine { margin-top: 12px; font-size: 12px; color: #6f6259; }
#card-container { min-height: 90px; }
#apple-pay-button, #google-pay-button, #cash-app-pay-button { margin-bottom: 10px; min-height: 0; }
.dsf-apple-pay { width: 100%; height: 48px; border-radius: 8px; border: 0; background: #000; cursor: pointer; -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: black; }
.theme-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.shop-btn.is-disabled { opacity: .5; pointer-events: none; }
/* site forms: emails are never capitalized, the reply line sits above the button */
.comboo-contact-form form .form-clt input[type=email], .contact-form-box .form-clt input[type=email], .comboo-contact-form form .form-clt input[name=message] { text-transform: none; }
.comboo-contact-form form .dsf-alert, .contact-form-box .dsf-alert { margin: 0 0 12px; }
.contact-form-box .dsf-alert.is-info { background: rgba(255, 255, 255, .92); }
/* account: the member dashboard (header card, side nav, cards) */
.dsf-account { --ink: #25130e; --mute: #6f6259; --line: #ece4da; --cream: #fff6e8; --brand: #f47b25; color: var(--ink); }
.dsf-account a { color: inherit; }
.dsf-account h2, .dsf-account h3 { color: var(--ink); margin: 0; }
.dsf-avatar { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #ffb45c, #f47b25); color: #fff; font-weight: 400; font-size: 20px; letter-spacing: .5px; overflow: hidden; flex: none; }
.dsf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsf-avatar.is-big { width: 104px; height: 104px; font-size: 36px; box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(37, 19, 14, .14); }
.dsf-acct-head { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 28px 32px; border-radius: 22px; background: #fff; box-shadow: 0 10px 40px rgba(37, 19, 14, .07); margin-bottom: 26px; position: relative; overflow: hidden; }
.dsf-acct-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg, #ffc222, #f47b25); }
.dsf-acct-photo { position: relative; display: block; line-height: 0; }
.dsf-avatar-edit { position: absolute; right: 0; bottom: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 0 0 3px #fff; transition: transform .2s; }
.dsf-acct-photo:hover .dsf-avatar-edit { transform: scale(1.1); background: var(--brand); }
.dsf-acct-who h2 { font-size: 28px; line-height: 1.15; }
.dsf-acct-who p { margin: 4px 0 0; color: var(--mute); font-size: 15px; }
.dsf-account .dot { color: #cdbfb1; margin: 0 4px; }
.dsf-acct-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dsf-acct-badges > * { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 400; }
.dsf-acct-badges .is-ok { background: #e3f4e9; color: #1a5c33; }
.dsf-acct-badges .is-warn { background: #fde3e0; color: #8a2a1f; }
.dsf-acct-badges .is-warn:hover { background: #8a2a1f; color: #fff; }
.dsf-acct-badges .is-pts { background: #fff1d6; color: #7a4f0d; }
.dsf-acct-badges .is-aff { background: #eef0ff; color: #3a3f8f; }
.dsf-acct-progress { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--cream); min-width: 250px; }
.dsf-acct-progress .ring { --p: 0; flex: none; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p) * 1%), #f1e4d3 0); display: grid; place-items: center; }
.dsf-acct-progress .ring b { width: 46px; height: 46px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-size: 13px; }
.dsf-acct-progress strong { display: block; font-size: 15px; }
.dsf-acct-progress small { display: block; color: var(--mute); font-size: 13px; line-height: 1.35; }
.dsf-acct-progress a { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--brand); text-decoration: underline; }
.dsf-acct-progress.is-done .ring { background: #1a5c33; }
.dsf-acct-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 26px; align-items: start; }
.dsf-acct-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 10px 40px rgba(37, 19, 14, .06); position: sticky; top: 100px; }
.dsf-acct-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; font-weight: 400; font-size: 15px; transition: background .15s, color .15s; }
.dsf-acct-nav a i { width: 18px; text-align: center; color: var(--mute); font-size: 15px; }
.dsf-acct-nav a:hover { background: var(--cream); }
.dsf-acct-nav a.is-active { background: var(--ink); color: #fff; }
.dsf-acct-nav a.is-active i { color: #ffc222; }
.dsf-acct-nav [data-logout] { margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; color: #8a2a1f; }
.dsf-acct-nav [data-logout] i { color: #8a2a1f; }
.dsf-acct-main { display: grid; gap: 18px; min-width: 0; }
.dsf-card { background: #fff; border-radius: 18px; padding: 22px 24px; box-shadow: 0 10px 40px rgba(37, 19, 14, .06); }
.dsf-card.is-hint { box-shadow: 0 0 0 2px var(--brand), 0 10px 40px rgba(37, 19, 14, .06); }
.dsf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dsf-card-head h3 { font-size: 19px; }
.dsf-card-head a { font-size: 14px; font-weight: 400; color: var(--brand); }
.dsf-card > p:last-child { margin-bottom: 0; }
.dsf-pill { padding: 3px 10px; border-radius: 999px; background: var(--cream); color: #7a4f0d; font-size: 13px; font-weight: 400; }
.dsf-eyebrow { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--mute); font-weight: 400; }
.dsf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dsf-tile { display: block; padding: 18px 18px 16px; border-radius: 18px; background: #fff; box-shadow: 0 10px 40px rgba(37, 19, 14, .06); transition: transform .2s, box-shadow .2s; min-width: 0; }
.dsf-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(37, 19, 14, .12); }
.dsf-tile i { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--cream); color: var(--brand); font-size: 16px; margin-bottom: 12px; }
.dsf-tile b { display: block; font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.dsf-tile span { display: block; color: var(--mute); font-size: 14px; margin-top: 4px; }
.dsf-tile small { color: #1a5c33; font-weight: 400; }
.dsf-complete { background: linear-gradient(135deg, #fff9ef, #fff); }
.dsf-bar { height: 8px; border-radius: 999px; background: #f1e4d3; overflow: hidden; margin: 2px 0 12px; }
.dsf-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffc222, #f47b25); border-radius: 999px; transition: width .4s; }
.dsf-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.dsf-steps a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 400; font-size: 15px; transition: border-color .15s, transform .15s; }
.dsf-steps a:hover { border-color: var(--brand); transform: translateX(2px); }
.dsf-steps a span { flex: 1; }
.dsf-steps a i:first-child { color: var(--brand); }
.dsf-steps a i:last-child { color: #cdbfb1; font-size: 13px; }
.dsf-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dsf-stack { display: grid; gap: 18px; }
.dsf-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: 15px; }
.dsf-dl dt { color: var(--mute); font-weight: 400; }
.dsf-dl dd { margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.dsf-dl dd a { color: var(--brand); text-decoration: underline; }
.dsf-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dsf-quick a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--cream); font-weight: 400; font-size: 14px; }
.dsf-quick a:hover { background: #ffe9cf; }
.dsf-quick i { color: var(--brand); width: 16px; text-align: center; }
.dsf-orders { display: grid; gap: 10px; }
.dsf-order { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s, background .15s; }
.dsf-order:hover { border-color: var(--brand); background: #fffaf3; }
.dsf-order-main { min-width: 0; }
.dsf-order-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dsf-order b { font-size: 17px; }
.dsf-order-main > span { display: block; color: var(--mute); font-size: 14px; }
.dsf-order-main > span .dot { display: inline; }
.dsf-order small { display: block; color: var(--mute); font-size: 13px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsf-order-right { text-align: right; flex: none; display: flex; align-items: center; gap: 12px; }
.dsf-order-right em { font-style: normal; font-weight: 400; font-size: 17px; }
.dsf-order-right i { color: #cdbfb1; font-size: 13px; }
.dsf-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 400; background: #efe9e1; color: var(--mute); }
.dsf-status.st-received, .dsf-status.st-accepted, .dsf-status.st-preparing { background: #fff1d6; color: #7a4f0d; }
.dsf-status.st-ready { background: #e3f4e9; color: #1a5c33; }
.dsf-status.st-cancelled, .dsf-status.st-refunded { background: #fde3e0; color: #8a2a1f; }
.dsf-points-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; background: linear-gradient(135deg, #fff9ef, #fff); }
.dsf-points-balance { font-size: 20px; margin: 6px 0 4px; }
.dsf-points-balance b { font-size: 42px; color: var(--brand); line-height: 1; }
.dsf-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.dsf-rules li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.dsf-rules i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--cream); color: var(--brand); font-size: 12px; flex: none; }
.dsf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dsf-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--mute); padding: 8px; border-bottom: 1px solid var(--line); }
.dsf-table td { padding: 10px 8px; border-bottom: 1px solid #f0e8de; }
.dsf-table td.is-plus { color: #1a5c33; font-weight: 400; }
.dsf-table td.is-minus { color: #8a2a1f; font-weight: 400; }
.dsf-share { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.dsf-share input { flex: 1 1 240px; min-width: 0; padding: 10px 14px; border: 1px solid #ddd3c7; border-radius: 10px; font: inherit; font-size: 15px; background: #fffaf3; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.dsf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 14px; }
.dsf-stats div { background: var(--cream); border-radius: 12px; padding: 12px; text-align: center; }
.dsf-stats b { display: block; font-size: 20px; }
.dsf-stats span { color: var(--mute); font-size: 13px; }
.dsf-form { display: grid; gap: 18px; }
.dsf-form label, .dsf-label { display: block; font-weight: 400; font-size: 14px; color: var(--ink); }
.dsf-form label small { font-weight: 400; color: var(--mute); }
.dsf-form input:not([type=checkbox]):not([type=radio]), .dsf-form select { display: block; width: 100%; margin-top: 6px; padding: 11px 14px; border: 1px solid #ddd3c7; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 400; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.dsf-form input:focus, .dsf-form select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(244, 123, 37, .18); }
.dsf-form input:disabled { background: #f6f1ea; color: var(--mute); }
.dsf-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f6259' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.dsf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.dsf-grid .span2 { grid-column: 1 / -1; }
.dsf-locked { position: relative; display: block; }
.dsf-locked i { position: absolute; right: 14px; bottom: 13px; color: #1a5c33; }
.dsf-locked a { position: absolute; right: 12px; bottom: 10px; font-size: 13px; font-weight: 400; color: var(--brand); text-decoration: underline; }
.dsf-form .dsf-choice-row { margin: 8px 0 0; }
.dsf-form .dsf-choice { font-weight: 400; font-size: 14px; }
.dsf-form .dsf-choice.span2 { display: flex; }
.dsf-form [data-spice] .dsf-choice { position: relative; padding: 9px 18px; }
.dsf-form [data-spice] .dsf-choice input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.dsf-form [data-spice] .dsf-choice:has(input:checked) { border-color: #f47b25; background: #f47b25; color: #fff; }
.dsf-form [data-spice] .dsf-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(244, 123, 37, .3); }
.dsf-photo-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dsf-photo-row > div { flex: 1 1 240px; }
.dsf-photo-row .dsf-muted { margin-bottom: 10px; }
.dsf-photo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dsf-file { cursor: pointer; margin: 0; }
.dsf-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 400; color: #8a2a1f; text-decoration: underline; cursor: pointer; }
.dsf-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dsf-form-foot .dsf-alert { margin: 0; flex: 1 1 200px; }
.dsf-form-foot .theme-btn { flex: none; }
.dsf-account .theme-btn.radius-xs { border-radius: 10px; }
.dsf-account .theme-btn:disabled { opacity: .7; }
@media (max-width: 1199px) { .dsf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dsf-two { grid-template-columns: 1fr; } .dsf-acct-head { grid-template-columns: auto 1fr; } .dsf-acct-progress { grid-column: 1 / -1; } }
@media (max-width: 991px) { .dsf-acct-body { grid-template-columns: 1fr; } .dsf-acct-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 8px; gap: 4px; } .dsf-acct-nav::-webkit-scrollbar { display: none; } .dsf-acct-nav a { flex: none; padding: 9px 13px; font-size: 14px; } .dsf-acct-nav [data-logout] { margin: 0 0 0 auto; border: 0; border-radius: 12px; } .dsf-points-hero { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .dsf-acct-head { padding: 22px 20px 20px; gap: 16px; } .dsf-acct-head::before { inset: 0 0 auto 0; width: auto; height: 6px; } .dsf-avatar.is-big { width: 84px; height: 84px; font-size: 30px; } .dsf-acct-who h2 { font-size: 22px; } .dsf-card { padding: 18px 16px; border-radius: 16px; } .dsf-grid { grid-template-columns: 1fr; } .dsf-tiles { gap: 10px; } .dsf-tile { padding: 14px; } .dsf-tile b { font-size: 22px; } .dsf-order-right em { font-size: 15px; } .dsf-quick { grid-template-columns: 1fr; } .dsf-item-top img { width: 80px; height: 80px; } }
@media (max-width: 480px) { .dsf-acct-head { grid-template-columns: 1fr; text-align: center; } .dsf-acct-photo { justify-self: center; } .dsf-acct-badges { justify-content: center; } .dsf-acct-progress { text-align: left; } .dsf-tiles { grid-template-columns: 1fr 1fr; } .dsf-form-foot .theme-btn { width: 100%; } }
.dsf-support-link { display: flex; align-items: center; gap: 12px; color: inherit; width: 100%; }
.dsf-pay-methods .checkout-radio-single { display: flex; align-items: flex-start; gap: 10px; }
.dsf-pay-methods .checkout-radio-single label { flex: 1; }
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single input[type=email], .checkout-single-wrapper .checkout-single .checkout-single-form .input-single input[type=tel], .checkout-single .input-single input[type=email], .checkout-single .input-single input[type=tel], .dsf-coupon input, .signup-form input[type=email] { text-transform: none; }

/* ---------------------------------------------------------------- the arrival intro
   The truck races in from the left, brakes in the middle of the screen (nose dips, dust,
   skid marks), the headlights come on, it honks, the wordmark rises under it, then it tears
   off to the right and the red curtain lifts on the page. Once per session (sessionStorage),
   any tap skips, reduced motion never sees it, and nothing moves until the truck picture has
   loaded (html.dsf-intro-go). Only transforms and opacity animate. */
.dsf-intro { display: none; position: fixed; inset: 0; z-index: 100000000; overflow: hidden; background: #3a0706; cursor: pointer;
  --truck-w: min(70vw, 980px, 60vh * 1.76); --truck-h: calc(var(--truck-w) / 1.7604); }
html.dsf-intro-on .dsf-intro { display: block; }
.dsf-intro__sky { position: absolute; inset: 0; background: radial-gradient(120% 85% at 50% 58%, #ad251b 0%, #7c1310 42%, #3a0706 100%); }
.dsf-intro__sky::after { content: ""; position: absolute; inset: 0; background: url(../img/dsf/line-art-tile.png) 0 0 / 220px repeat; opacity: .10; }
.dsf-intro__stage { position: absolute; inset: 0; display: grid; place-items: center; }
.dsf-intro__road { position: absolute; left: 0; right: 0; top: calc(50% + var(--truck-h) * .5 - 3px); height: 30%; background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, 0)); }
.dsf-intro__road::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 44px, transparent 44px 88px); opacity: .7; }
.dsf-intro__truck { position: relative; width: var(--truck-w); aspect-ratio: 1200 / 682; transform: translate3d(-135vw, 0, 0); transform-origin: 50% 100%; will-change: transform; }
.dsf-intro__truck img { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.dsf-intro__truck > span { position: absolute; display: block; pointer-events: none; }
.dsf-intro__shadow { z-index: 1; left: 4%; right: 4%; top: 91%; height: 11%; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%); filter: blur(6px); }
.dsf-intro__skid { z-index: 1; top: 95.5%; height: 1.5%; border-radius: 999px; background: rgba(28, 4, 4, .6); transform: scaleX(0); transform-origin: 100% 50%; }
.dsf-intro__skid--rear { left: 6%; width: 17%; }
.dsf-intro__skid--front { left: 58%; width: 16%; }
.dsf-intro__lines { position: absolute; inset: 0; z-index: 1; }
.dsf-intro__lines b { position: absolute; height: .9%; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 240, 220, .8)); transform-origin: 100% 50%; opacity: 0; }
.dsf-intro__lines b:nth-child(1) { top: 20%; left: -60%; width: 58%; }
.dsf-intro__lines b:nth-child(2) { top: 36%; left: -46%; width: 44%; }
.dsf-intro__lines b:nth-child(3) { top: 52%; left: -66%; width: 64%; }
.dsf-intro__lines b:nth-child(4) { top: 68%; left: -42%; width: 40%; }
.dsf-intro__lines b:nth-child(5) { top: 84%; left: -56%; width: 54%; }
.dsf-intro__dust { z-index: 3; left: 12%; top: 88%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(rgba(255, 214, 170, .6), rgba(255, 214, 170, 0) 70%); filter: blur(2px); opacity: 0; }
.dsf-intro__dust:nth-of-type(2) { left: 6%; width: 8%; }
.dsf-intro__dust:nth-of-type(3) { left: 18%; width: 7%; }
.dsf-intro__wheel { z-index: 3; aspect-ratio: 1; border-radius: 50%; opacity: 0; mix-blend-mode: soft-light; transform: translate(-50%, -50%);
  background: conic-gradient(rgba(255, 255, 255, .9) 0 6%, transparent 6% 20%, rgba(255, 255, 255, .9) 20% 26%, transparent 26% 40%, rgba(255, 255, 255, .9) 40% 46%, transparent 46% 60%, rgba(255, 255, 255, .9) 60% 66%, transparent 66% 80%, rgba(255, 255, 255, .9) 80% 86%, transparent 86% 100%); }
.dsf-intro__wheel--rear { left: 22.38%; top: 80.05%; width: 8.55%; }
.dsf-intro__wheel--front { left: 73.41%; top: 85.19%; width: 10.26%; }
.dsf-intro__lamp { z-index: 3; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0;
  background: radial-gradient(rgba(255, 246, 210, 1) 0, rgba(255, 232, 150, .65) 32%, rgba(255, 200, 80, 0) 70%); }
.dsf-intro__lamp--l { left: 88.67%; top: 64.37%; }
.dsf-intro__lamp--r { left: 97.79%; top: 64.62%; }
.dsf-intro__beep { z-index: 4; left: 76%; top: -7%; padding: .42em .9em; border-radius: 999px; background: #fff; color: #8e1a16; white-space: nowrap;
  font: 800 clamp(14px, 1.7vw, 24px)/1 "Signika", "Nunito", sans-serif; letter-spacing: .02em; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); opacity: 0; transform: scale(0); transform-origin: 18% 130%; }
.dsf-intro__beep::after { content: ""; position: absolute; left: 16%; bottom: -30%; width: .9em; height: .9em; background: #fff; transform: skewX(24deg) rotate(20deg); clip-path: polygon(0 0, 100% 0, 25% 100%); }
.dsf-intro__brand { position: absolute; left: 50%; top: calc(50% + var(--truck-h) * .5 + 4vh); transform: translate(-50%, 14px); text-align: center; opacity: 0; width: max-content; max-width: 90vw; }
.dsf-intro__brand img { width: clamp(150px, 15vw, 230px); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.dsf-intro__brand p { margin: 10px 0 0; color: #ffe3c2; font: 600 clamp(12px, 1.05vw, 15px)/1.4 "Signika", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.dsf-intro__skip { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 5; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .32); color: #fff; font: 600 13px/1 "Nunito", sans-serif; cursor: pointer; opacity: 0; }
/* --- the choreography, only once the picture is in */
html.dsf-intro-go .dsf-intro__truck { animation: dsf-truck-in 1.3s both, dsf-truck-out .55s cubic-bezier(.55, 0, .95, .45) 2.45s forwards; }
html.dsf-intro-go .dsf-intro__truck img { animation: dsf-bob .14s linear 0s 6 alternate, dsf-bob .14s linear 2.45s 4 alternate; }
html.dsf-intro-go .dsf-intro__road::before { animation: dsf-road .11s linear 0s 8, dsf-road .11s linear 2.45s 5; }
html.dsf-intro-go .dsf-intro__lines b { animation: dsf-line .42s ease-out both, dsf-line .42s ease-out 2.56s forwards; }
html.dsf-intro-go .dsf-intro__lines b:nth-child(1) { animation-delay: .04s, 2.58s; }
html.dsf-intro-go .dsf-intro__lines b:nth-child(2) { animation-delay: .14s, 2.66s; }
html.dsf-intro-go .dsf-intro__lines b:nth-child(3) { animation-delay: .02s, 2.56s; }
html.dsf-intro-go .dsf-intro__lines b:nth-child(4) { animation-delay: .2s, 2.7s; }
html.dsf-intro-go .dsf-intro__lines b:nth-child(5) { animation-delay: .1s, 2.62s; }
html.dsf-intro-go .dsf-intro__wheel { animation: dsf-spin .2s linear 0s 6 both, dsf-spin .2s linear 2.45s 4 forwards; }
html.dsf-intro-go .dsf-intro__dust { animation: dsf-dust .7s ease-out .78s both, dsf-dust .6s ease-out 2.5s forwards; }
html.dsf-intro-go .dsf-intro__dust:nth-of-type(2) { animation-delay: .86s, 2.56s; }
html.dsf-intro-go .dsf-intro__dust:nth-of-type(3) { animation-delay: .94s, 2.62s; }
html.dsf-intro-go .dsf-intro__skid { animation: dsf-skid .26s ease-out .8s forwards; }
html.dsf-intro-go .dsf-intro__lamp { animation: dsf-lamp .55s ease-out .92s forwards; }
html.dsf-intro-go .dsf-intro__beep { animation: dsf-beep .4s cubic-bezier(.34, 1.56, .64, 1) 1.35s both, dsf-beep-wobble .5s ease-in-out 1.78s, dsf-beep-out .25s ease-in 2.18s forwards; }
html.dsf-intro-go .dsf-intro__brand { animation: dsf-brand-in .55s cubic-bezier(.2, .8, .3, 1) 1.45s both, dsf-brand-out .3s ease-in 2.35s forwards; }
html.dsf-intro-go .dsf-intro__skip { animation: dsf-skip-in .3s ease-out .9s forwards; }
html.dsf-intro-go .dsf-intro__sky { animation: dsf-sky 3.2s cubic-bezier(.2, .6, .3, 1) forwards; transform-origin: 50% 60%; }
html.dsf-intro-go .dsf-intro { animation: dsf-lift .6s cubic-bezier(.7, 0, .3, 1) 2.88s forwards; }
html.dsf-intro-off .dsf-intro, .dsf-intro.is-skipped { animation: dsf-fade .4s ease-in forwards !important; }
@keyframes dsf-truck-in {
  0% { transform: translate3d(-135vw, 0, 0) scaleX(1.16) skewX(-7deg); animation-timing-function: cubic-bezier(.22, .72, .3, 1); }
  55% { transform: translate3d(3.5vw, 0, 0) scaleX(1.1) skewX(-5deg); animation-timing-function: ease-out; }
  62% { transform: translate3d(4.8vw, 0, 0) scaleX(1.02) skewX(-2deg); animation-timing-function: ease-in-out; }
  72% { transform: translate3d(-1.3vw, 0, 0) scaleX(.95) rotate(2.3deg); animation-timing-function: ease-in-out; }
  84% { transform: translate3d(.7vw, 0, 0) scaleX(1.01) rotate(-1.1deg); animation-timing-function: ease-in-out; }
  92% { transform: translate3d(-.25vw, 0, 0) rotate(.45deg); animation-timing-function: ease-out; }
  100% { transform: translate3d(0, 0, 0) scaleX(1) rotate(0); }
}
@keyframes dsf-truck-out {
  0% { transform: translate3d(0, 0, 0) scaleX(1); animation-timing-function: ease-in; }
  24% { transform: translate3d(-3vw, 0, 0) scaleX(.96) rotate(-1.6deg); animation-timing-function: cubic-bezier(.7, 0, .95, .55); }
  100% { transform: translate3d(140vw, 0, 0) scaleX(1.18) skewX(-8deg); }
}
@keyframes dsf-bob { from { transform: translateY(0); } to { transform: translateY(-.55%); } }
@keyframes dsf-road { from { background-position: 0 0; } to { background-position: -88px 0; } }
@keyframes dsf-line { 0% { opacity: 0; transform: scaleX(.15); } 35% { opacity: .95; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.5); } }
@keyframes dsf-spin { from { opacity: .85; transform: translate(-50%, -50%) rotate(0); } to { opacity: .85; transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes dsf-dust { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(-110%, -45%) scale(2); } }
@keyframes dsf-skid { to { transform: scaleX(1); } }
@keyframes dsf-lamp { 0% { opacity: 0; } 35% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }
@keyframes dsf-beep { 0% { opacity: 0; transform: scale(0) rotate(-10deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes dsf-beep-wobble { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.06) rotate(-4deg); } 75% { transform: scale(1.06) rotate(4deg); } }
@keyframes dsf-beep-out { to { opacity: 0; transform: scale(.5); } }
@keyframes dsf-brand-in { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes dsf-brand-out { to { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes dsf-skip-in { to { opacity: 1; } }
@keyframes dsf-sky { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes dsf-lift { to { transform: translateY(-102%); visibility: hidden; } }
@keyframes dsf-fade { to { opacity: 0; visibility: hidden; } }
@media (max-width: 767px) {
  .dsf-intro { --truck-w: min(94vw, 52vh * 1.76); }
  .dsf-intro__beep { left: 66%; top: -10%; }
  .dsf-intro__brand { top: calc(50% + var(--truck-h) * .5 + 5vh); }
  .dsf-intro__brand img { width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .dsf-intro { display: none !important; } }

/* ---------------------------------------------------------------- the loading screen
   The template's preloader spelled "Foodies" in outlined letters; the client's truck idles
   there instead, small, on a road line that slides under it. Everything the template's
   .loader rule set (the text stroke, the liquid-fill animation) is switched off. */
.preloader .loader::before { content: none; }
.preloader .dsf-loader { position: relative; width: 180px; height: auto; font-size: 0; line-height: 0; color: transparent; -webkit-text-stroke: 0; background: none; animation: none; text-align: center; }
.preloader .dsf-loader img { display: block; width: 180px; height: auto; margin: 0 auto; filter: drop-shadow(0 8px 10px rgba(60, 20, 10, .16)); animation: dsf-loader-bob .34s ease-in-out infinite alternate; }
/* the road: a hairline of short orange dashes that fades out at both ends and slides under the wheels */
.preloader .dsf-loader i { display: block; width: 240px; height: 2px; margin: 2px auto 0; border-radius: 1px; opacity: .85;
  background: repeating-linear-gradient(90deg, #f47b25 0 14px, transparent 14px 28px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); mask: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  animation: dsf-loader-road .55s linear infinite; }
@keyframes dsf-loader-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes dsf-loader-road { to { background-position: -28px 0; } }
@media (max-width: 575px) { .preloader .dsf-loader, .preloader .dsf-loader img { width: 140px; } .preloader .dsf-loader i { width: 190px; } }

/* ---------------------------------------------------------------- our story: the owners' cards
   The template's team cards carry a name and a job; here they carry the two owners and a line
   from each, so the card text may run to three lines and the picture keeps its face. */
.dsf-owners .team-card-items-2 .content p { font-size: 16px; line-height: 1.6; font-style: italic; color: #5c4f46; }
.dsf-owners .team-card-items-2 .content .title { margin-bottom: 8px; }
.dsf-owners .section-title p { max-width: 640px; margin: 0 auto 10px; }
.history-food-list .section-title { margin-bottom: 50px; }
/* the timeline badges carry words (Dhaka, Weekends), not the template's four-digit years */
.history-food-list-wrap .history-food-list-items .year-icon { display: flex; align-items: center; justify-content: center; line-height: 1.1; font-size: 15px; padding: 0 6px; flex: none; }
/* the story page's number strip (the template's counter from its ice-cream home) in the brand's colours */
.dsf-numbers .counter-wrap-5 .counter-items .counter-title { color: #f47b25; font-family: "Signika", sans-serif; font-weight: 700; font-size: 64px; }
.dsf-numbers .counter-wrap-5 .counter-items .content p { margin: 0; color: #6f6259; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.dsf-numbers .counter-wrap-5 .counter-items .content .title-2 { font-size: 20px; }
@media (max-width: 767px) { .dsf-numbers .counter-wrap-5 .counter-items .counter-title { font-size: 48px; } }

/* ---------------------------------------------------------------- legal layer (phase 2, 2026-09-19)
   consent boxes at checkout and sign-up (the words are the API's, the same the proof stores),
   the allergen line on an item, the allergy note at checkout, the delete-account card */
.dsf-consents { display: grid; gap: 10px; margin: 18px 0 4px; }
.dsf-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 13px; border: 1px solid #ddd3c7; border-radius: 10px; cursor: pointer; font-size: 13px; line-height: 1.5; color: #4a4038; }
.dsf-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #f47b25; }
.dsf-consent a { color: var(--brand-red); text-decoration: underline; }
.dsf-consent:has(input:checked) { border-color: #f47b25; background: #fff6e8; }
.dsf-consent.is-invalid { border-color: var(--brand-red); background: #fff1ee; }
.signup-form .dsf-consents { margin: 6px 0 16px; }
.dsf-allergens { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #4a4038; }
.dsf-allergens i { color: var(--brand-red); margin-right: 2px; }
.dsf-allergens a { margin-left: 4px; color: var(--brand-red); text-decoration: underline; font-size: 12px; white-space: nowrap; }
.dsf-id-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--brand-yellow); color: #3d2a00; font-size: 12px; font-weight: 400; }
.details-text + .dsf-allergens { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--brand-yellow); background: #fff9ec; border-radius: 0 10px 10px 0; }
.dsf-allergy label { display: block; font-size: 14px; font-weight: 400; color: #3d2a00; margin: 8px 0 6px; }
.dsf-allergy label i { color: var(--brand-red); }
.dsf-allergy label small { font-weight: 400; color: #6f6259; }
.dsf-allergy textarea { border-color: #ecd9a4 !important; background: #fffdf6; }
.dsf-allergy .dsf-muted { display: block; margin-top: 6px; font-size: 12px; }
.dsf-allergy .dsf-muted a { color: var(--brand-red); text-decoration: underline; }
.dsf-danger .dsf-card { border: 1px solid #f1cfc8; }
.dsf-danger .dsf-card h3 { color: var(--brand-red); }
.dsf-danger .theme-btn { background: var(--brand-red-deep); color: #fff; }
.dsf-danger .theme-btn span { color: #fff; }

/* the eight policy pages: the template's policy anatomy, its sidebar buttons as links between the
   pages, a dated line under the title, a plain table for the cookie list */
.dsf-policy .policy-sidebar .private-policy-tab-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; padding: 0 12px; line-height: 1.2; }
.dsf-policy .policy-content .dsf-policy-meta { font-size: 14px; color: #6f6259; margin: -12px 0 28px; }
.dsf-policy .policy-content h3 { font-size: 24px; margin-top: 34px; }
.dsf-policy .policy-content p, .dsf-policy .policy-content li { font-size: 16px; line-height: 28px; }
.dsf-policy .policy-content ul { padding-left: 22px; margin-bottom: 18px; }
.dsf-policy .policy-content ul li { list-style: disc; margin-bottom: 8px; }
.dsf-policy .policy-content a { color: var(--brand-red); text-decoration: underline; }
.dsf-policy .dsf-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.dsf-policy-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dsf-policy-table th, .dsf-policy-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #ecdfcd; vertical-align: top; }
.dsf-policy-table th { background: #fff6e8; font-weight: 400; }
.dsf-policy-table code { font-size: 14px; color: var(--brand-red-deep); }
.dsf-policy-table small { color: #6f6259; }
.dsf-allergen-list { columns: 3; column-gap: 24px; }
@media (max-width: 575px) { .dsf-allergen-list { columns: 2; } .dsf-policy .policy-content h3 { font-size: 20px; } }
/* accessibility: the decorative motion (floating shapes, entrance animations) stops on request */
@media (prefers-reduced-motion: reduce) {
  .float-bob-y, .float-bob-x, .wow, [class*="animate__"], .ripple-image, .spin-anim, .rotate-anim { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
}
/* the policy links in the copyright strip (legal layer): small, white, between the copyright and the card badges */
.footer-bottom.style-3 .footer-bottom-wrapper { gap: 12px 24px; }
.footer-bottom.style-3 .footer-bottom-wrapper p, .footer-bottom.style-3 .app-image { flex: none; white-space: nowrap; }
.footer-bottom.style-3 .dsf-policy-links { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin: 0; padding: 0; list-style: none; }
.footer-bottom.style-3 .dsf-policy-links li { list-style: none; }
.footer-bottom.style-3 .dsf-policy-links a { color: rgba(255, 255, 255, .85); font-size: 13px; line-height: 25px; text-decoration: none; white-space: nowrap; }
/* on touch screens the strip's policy links and the top bar's links get a 44px hit area without moving (the app.css pattern) */
@media (hover: none), (max-width: 991px) {
  .footer-bottom.style-3 .dsf-policy-links a { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
  .dsf-topbar__links a { min-height: 44px; padding: 0 4px; margin: -4px -4px; }
}
.footer-bottom.style-3 .dsf-policy-links a:hover { color: var(--brand-yellow); }
/* under 1200px the strip has no room for a third block on one row: the links take a tidy second row */
@media (max-width: 1199px) { .footer-bottom.style-3 .footer-bottom-wrapper { flex-wrap: wrap; gap: 2px 20px; } .footer-bottom.style-3 .dsf-policy-links { width: 100%; order: 3; } }
@media (max-width: 767px) { .footer-bottom.style-3 .footer-bottom-wrapper { justify-content: center; gap: 8px 20px; } .footer-bottom.style-3 .footer-bottom-wrapper p { white-space: normal; text-align: center; } }

/* ---------------------------------------------------------------- sell more (phase 3, 2026-09-19)
   the tip row, the gift card box at checkout, the saved cards, the gift cards page */
.dsf-tipbox .dsf-choice-row { margin-bottom: 6px; }
.dsf-tipbox .dsf-choice small { color: var(--brand-red); font-weight: 400; margin-left: 4px; }
.dsf-tipbox .dsf-points-amount input { width: 120px; }
.dsf-giftbox { margin-top: 10px; }
[data-gift-note] { margin-top: 8px; }
[data-gift-note] a { color: var(--brand-red); text-decoration: underline; margin-left: 4px; }
.dsf-saved-cards { display: grid; gap: 8px; margin-bottom: 12px; }
.dsf-saved-cards .dsf-choice small { color: #6f6259; margin-left: 4px; }
.dsf-savecard { margin-top: 10px; }
.dsf-savedcard { align-items: center; }
.dsf-gift-section .comboo-contact-form .dsf-gift-amounts { margin-bottom: 0; }
.dsf-gift-section .comboo-contact-form .dsf-choice { background: #fff; }
.dsf-gift-section .comboo-contact-form .dsf-gift-when { display: block; color: #4a4038; font-size: 14px; }
.dsf-gift-section .comboo-contact-form .dsf-gift-when span { display: block; font-weight: 400; margin-bottom: 6px; }
.dsf-gift-section .comboo-contact-form .dsf-gift-when small { display: block; color: #6f6259; margin-top: 6px; font-size: 12px; }
.dsf-gift-section .comboo-contact-form .dsf-alert:empty { display: none; }
.dsf-gift-balance { margin-top: 30px; padding: 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.dsf-gift-balance h3 { color: #fff; font-size: 20px; margin: 0 0 12px; }
.dsf-gift-balance form { display: flex; gap: 10px; flex-wrap: wrap; }
.dsf-gift-balance input { flex: 1 1 220px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .95); color: #25130e; font: inherit; letter-spacing: 1px; text-transform: uppercase; }   /* the section paints inputs white: the typed code must stay readable on the white box */
.dsf-gift-balance input::placeholder { color: #8a7f75; text-transform: none; letter-spacing: 0; }
.dsf-gift-balance .dsf-alert { margin: 10px 0 0; }
.dsf-gift-balance .dsf-alert:empty { display: none; }
/* the customer's own moves on the tracking page (kitchen phase): I am here, cancel before the kitchen starts */
.dsf-moves { margin: 18px 0; }
.dsf-arrive { padding: 20px 22px; border-radius: 16px; background: #fff6e8; border: 1px solid #f3dcab; margin-bottom: 10px; }
.dsf-arrive h4 { margin: 0 0 6px; font-size: 18px; color: #25130e; }
.dsf-arrive p { margin: 0 0 12px; color: #6f6259; font-size: 15px; }
.dsf-arrive .dsf-review-form input { flex: 1 1 260px; font-size: 15px; letter-spacing: 0; text-align: left; }
.dsf-moves .dsf-fine a { color: var(--brand-red); text-decoration: underline; }
.dsf-moves .dsf-alert:empty { display: none; }

/* ---------------------------------------------------------------- catering quotes and tables (phase 5, 2026-09-19) */
.dsf-quote-page .policy-sidebar { padding: 18px; }
.dsf-quote-facts b { display: block; font-size: 18px; margin-bottom: 6px; }
.dsf-quote-facts .dsf-status { display: inline-block; margin-bottom: 12px; }
.dsf-quote-facts .dsf-dl { margin: 0; }
.dsf-quote-facts .dsf-dl dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6f6259; margin-top: 10px; }
.dsf-quote-facts .dsf-dl dd { margin: 2px 0 0; font-size: 15px; }
.dsf-quote-facts .dsf-muted { margin-top: 14px; }
.dsf-quote-table .num { text-align: right; white-space: nowrap; }
.dsf-quote-table tr.dsf-grand td { border-top: 2px solid #3d2a00; }
.dsf-quote-accept { margin-top: 26px; padding: 22px 24px; border-radius: 16px; background: #fff6e8; border: 1px solid #f3dcab; }
.dsf-quote-accept h3 { margin-top: 0 !important; }
.dsf-quote-accept .theme-btn { margin-top: 6px; }
.dsf-quote-accept .dsf-alert:empty { display: none; }
.dsf-tables-card { max-width: 760px; margin: 0 auto; padding: 30px; border-radius: 20px; background: #fff; box-shadow: 0 18px 45px rgba(0, 0, 0, .08); }
.dsf-tables-card .dsf-alert:empty { display: none; }
/* delivery at checkout (phase 6): the address block under the pickup choice */
.dsf-address { margin: 4px 0 14px; padding: 14px 16px; border-radius: 12px; background: #fff9ec; border: 1px solid #ecd9a4; }
.dsf-address .dsf-muted { margin: 10px 0 0; font-size: 13px; }

/* ---------------------------------------------------------------- the gift card as a picture
   One card everywhere: the live preview and the holder's view on gift-cards.html (store.js), the
   printed card (api/gift-card.php, admin/print.php?gift=) and, as tables, the email. It wears the
   brand paint (the strip's tile over the gradient) with the client's card logo (client.json
   brand.gift_logo), the amount, who it is for and from, and the code in a dark pill. */
.dsf-giftcard { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1.6; box-sizing: border-box; padding: 22px 24px 20px; border-radius: 22px; color: #fff;   /* the ratio is the preferred shape; longer words make the card taller, never clipped */
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  background-color: var(--brand-red-deep); background-image: var(--brand-paint-tile), var(--brand-paint); background-size: 180px 180px, 100% 100%; background-repeat: repeat, no-repeat;
  box-shadow: 0 18px 40px rgba(60, 10, 6, .32), inset 0 1px 0 rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .14); }
.dsf-giftcard > * { position: relative; z-index: 1; }
.dsf-giftcard__bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }   /* the ghost of the truck in the middle, clipped to the card's corners (its alpha is baked into the file) */
.dsf-giftcard__bg img { position: absolute; left: 50%; top: 50%; width: 60%; height: auto; transform: translate(-50%, -50%); }
.dsf-giftcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 52px; }
.dsf-giftcard__logo { display: block; width: 27%; max-width: 130px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
/* "GIFT CARD": a black tag hanging from the card's top edge, inside the card's side margin, square
   at the top and rounded below (the owner's correction, 2026-09-19) */
.dsf-giftcard__label { position: absolute; top: 0; right: 24px; z-index: 2; margin: 0; padding: 22px 9px 12px; background: #111; color: var(--brand-yellow); font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; line-height: 1; border-radius: 0 0 12px 12px; }   /* measured on the owner's mockup: the tag reaches lower, the words sit low in it, little room at the sides */
.dsf-giftcard__amount { font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.dsf-giftcard__amount small { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; opacity: .92; text-shadow: none; }
.dsf-giftcard__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.dsf-giftcard__who { min-width: 0; font-size: 14px; line-height: 1.5; }
.dsf-giftcard__who div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.dsf-giftcard__who span { opacity: .9; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.dsf-giftcard__who b { font-size: 18px; font-weight: 400; }
.dsf-giftcard__who em { display: block; margin-top: 3px; font-size: 14px; font-style: italic; opacity: .95; max-height: 2.9em; overflow: hidden; }
.dsf-giftcard__code { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; letter-spacing: .06em; white-space: nowrap; padding: 11px 16px; border-radius: 14px; background: rgba(0, 0, 0, .42); color: var(--brand-yellow); border: 1px solid rgba(255, 255, 255, .12); }
.dsf-giftcard__code.is-soon { font-family: inherit; font-size: 12px; letter-spacing: 0; color: #fff; background: rgba(255, 255, 255, .12); }
.dsf-giftcard[data-status="empty"] .dsf-giftcard__amount, .dsf-giftcard[data-status="disabled"] .dsf-giftcard__amount, .dsf-giftcard[data-status="void"] .dsf-giftcard__amount { opacity: .6; }
.dsf-giftcard-wrap { margin: 22px 0 26px; }
.dsf-giftcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.dsf-giftcard-print { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.dsf-giftcard-print:hover { color: var(--brand-yellow); }
@media (max-width: 480px) {
  .dsf-giftcard { padding: 16px 18px; border-radius: 18px; aspect-ratio: auto; min-height: 185px; gap: 14px; }   /* grows to its words instead of clipping them */
  .dsf-giftcard__logo { width: 28%; }
  .dsf-giftcard__label { right: 18px; padding: 18px 8px 10px; font-size: 11px; border-radius: 0 0 10px 10px; }
  .dsf-giftcard__amount { font-size: 36px; }
  .dsf-giftcard__bottom { flex-wrap: wrap; }
  .dsf-giftcard__who b { font-size: 16px; }
  .dsf-giftcard__code { font-size: 14px; padding: 9px 12px; }
  .dsf-giftcard__who div { max-width: 220px; }
}

/* ---------------------------------------------------------------- the policy pages' type scale
   The template's media steps make the policy pages' h4, h5 and h6 all 28px under 1200px (bigger
   than at full width, and the three levels the same); these pages are the client's own, so the
   sizes step down like the rest of the page. (The demo's own pages keep the demo's sizes, the
   owner's rule of 2026-09-20: the layout is the demo's until he says otherwise.) */
@media (min-width: 1200px) and (max-width: 1399px) { .policy-section .policy-wrapper .policy-content h2 { font-size: 40px; } }
@media (max-width: 1199px) {
  .policy-section .policy-wrapper .policy-content h4 { font-size: 24px; }
  .policy-section .policy-wrapper .policy-content h5 { font-size: 20px; }
  .policy-section .policy-wrapper .policy-content h6 { font-size: 16px; }
}
@media (max-width: 767px) {
  .policy-section .policy-wrapper .policy-content h4 { font-size: 22px; }
  .policy-section .policy-wrapper .policy-content h5 { font-size: 19px; }
  .policy-section .policy-wrapper .policy-content h6 { font-size: 16px; }
}
@media (max-width: 575px) {
  .policy-section .policy-wrapper .policy-content h4 { font-size: 21px; }
  .policy-section .policy-wrapper .policy-content h5 { font-size: 18px; }
  .policy-section .policy-wrapper .policy-content h6 { font-size: 16px; }
}


/* ---------------------------------------------------------------- touch targets that leave the demo's look alone
   engine/tools/audit-layout.mjs at 375px: small links and icons under the 44px a finger needs.
   Only the hit areas that change nothing on screen are here (padding paid back by the same
   negative margin, or a wider box behind left-aligned text); the owner keeps the demo's sizes
   for everything visible (2026-09-20) and decides the rest himself. */
@media (hover: none), (max-width: 991px) {
  .sign-in-section a, .policy-section .policy-content a, .contact-flag-section-in a[href^="mailto:"], .contact-flag-section-in a[href^="tel:"], .team-details-section a[href^="mailto:"], .team-details-section a[href^="tel:"] { display: inline-block; padding: 12px 2px; margin: -12px -2px; }
  .best-food-menu-list-two li .content .price-list .cart-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -8px -10px; }
  .shop-details-section .product-details-content .star a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -11px -13px; }
  .best-food-selling-item-4 .content .dsf-add { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px -10px -12px 0; }
  .best-food-selling-item-4 .content .title a, .best-food-menu-list-two li .content .title a { display: inline-block; min-width: 44px; }
}
.food-category-card-item .food a, .best-food-selling-item-4 .thumb a, .best-food-menu-list-two li .thumb a, .food-menu-itemss .thumb a { display: block; height: 100%; }

/* ---------------------------------------------------------------- the site from the board (store.js siteRender)
   The "Hot and Delicious" band's dish is an <img> over the scene, where the template's picture
   had it baked in: set like the template's burger, the band's full height from the top edge to
   the table, right of the words, its right side under the arrow button (the button is 163px
   inside the band's 160px/100px edge); smaller under 1200px where the words need the room. */
.hot-pizza-image .dsf-band-dish { position: absolute; right: 12%; top: 0; bottom: 0; height: 100%; z-index: 1; pointer-events: none; }
.hot-pizza-image .dsf-band-dish img { height: 100%; width: auto; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .55)); }
.hot-pizza-image .food-content { z-index: 2; }
/* a spot's swapped picture keeps the built picture's box and stands at its bottom, unstretched */
.dsf-fit { object-fit: contain; object-position: center bottom; }
@media (min-width: 992px) and (max-width: 1199px) { .hot-pizza-image .dsf-band-dish { top: auto; height: 84%; } }
@media (max-width: 991px) { .hot-pizza-image .dsf-band-dish { right: 8%; top: auto; height: 80%; } }
@media (max-width: 767px) { .hot-pizza-image .dsf-band-dish { right: 3%; height: 58%; } }
/* the special cards' price badge, drawn as text so a price change on the item shows in it too */
.dsf-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--brand-yellow); color: var(--brand-yellow); font-family: "Signika", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg); line-height: 1.1; }
.dsf-badge b { font-size: 30px; letter-spacing: 0; }
.food-banner-items .offer-image .dsf-badge { width: 152px; height: 152px; }
.dsf-on-now { color: #fff; font-weight: 400; margin: 8px 0 18px; }
.best-food-menu-wrap-two .rice-image .discount .dsf-badge { background: rgba(0, 0, 0, .35); }

/* the type rule (owner, 2026-09-20): the browser's own bold for b/strong and the select widget's picked option follow the client's "type" weights (bold maps to type.strong) */
b, strong { font-weight: 500; }
.nice-select .option.selected, .nice-select .current { font-weight: 400; }
th { font-weight: 400; }   /* the browser's own bold table headings */
.badge { --bs-badge-font-weight: 400; }   /* bootstrap's badge weight, a variable the type pass reads too */

/* the shop cards' "Order Now": the template's outline button in its yellow on white could not be read (the owner, 2026-09-20); brand red outline and words, red fill with white words on hover */
.shop-category-items .content .pricing-item .theme-btn { border-color: var(--brand-red); color: var(--brand-red); }
.shop-category-items .content .pricing-item .theme-btn::before { background-color: var(--brand-red); }
.shop-category-items .content .pricing-item .theme-btn:hover { color: #fff; }

/* The owner's writing (a post, a page of their own, api/lib/pages.php site_markup): the template
   resets every p and ul, so the writing gets its paragraph gaps, bullets and picture box here */
.dsf-post-body > * + * { margin-top: 18px; }
.dsf-post-body h3, .dsf-post-body h4 { margin-top: 28px; }
.dsf-post-body ul { list-style: disc; padding-left: 22px; }
.dsf-post-body ol { list-style: decimal; padding-left: 22px; }
.dsf-post-body li + li { margin-top: 6px; }
.dsf-post-body .hilight-text { margin-top: 28px; margin-bottom: 28px; }
.dsf-post-body .details-image img { width: 100%; height: auto; border-radius: 8px; }

/* A footer widget title that is a link (the home footer's "Recent Posts" opens the blog) keeps the title's own color */
.footer-widget-items .widget-title a { color: inherit; }
.footer-widget-items .widget-title a:hover { color: var(--brand-yellow, #ffc222); }

/* The footers' social row (the Business page's links): the brand's yellow circle with the red mark,
   the same on the dark home footer and the white inner footer (the owner, 2026-09-21: brand colors,
   and the white-on-dark circles were too faint to see). The template styles .social-icon only under
   style-widget-wrapper-4, so the home footer (style-3) gets the box here too. */
/* The home footer's water ripple (.ripple-image, position:absolute, first in the footer) paints an
   opaque copy of the background once the WebGL plugin runs (a real browser; not the laptop pane,
   where the plugin fails and this went unseen). The template's own text sits above it because
   every li/head is position:relative; anything static is painted UNDER it. So the row and its
   label are positioned too (measured on the live site 2026-09-21: the icons were there, covered). */
.footer-section.style-3 .footer-widget-items .social-icon { gap: 10px; margin-top: 28px; position: relative; }
.footer-section.style-3 .footer-widget-items .dsf-follow { position: relative; }
.footer-section.style-3 .footer-widget-items .social-icon a { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; font-size: 15px; transition: all .3s ease; }
.footer-section .footer-widget-wrapper .footer-widget-items .social-icon a, .footer-section-4 .footer-widget-wrapper .footer-widget-items .social-icon a { border: 1px solid var(--brand-red, #8a1f12); background-color: var(--brand-red, #8a1f12); color: var(--brand-yellow, #ffc222); }
.footer-section .footer-widget-wrapper .footer-widget-items .social-icon a:hover, .footer-section-4 .footer-widget-wrapper .footer-widget-items .social-icon a:hover { border-color: var(--brand-yellow, #ffc222); background-color: var(--brand-yellow, #ffc222); color: var(--brand-red, #8a1f12); }

/* The news pages' "From the Menu" box (data-menu-widget): the price big and bold in the brand red,
   the row lifting on hover (the owner, 2026-09-21) */
.main-sideber .single-sideber-widget [data-menu-items] .recent-items { padding: 6px; margin-left: -6px; margin-right: -6px; border-radius: 10px; transition: background-color .25s ease, transform .25s ease; }
.main-sideber .single-sideber-widget [data-menu-items] .recent-items:hover { background-color: #fff6e0; transform: translateX(4px); }
.main-sideber .single-sideber-widget [data-menu-items] .recent-thumb img { transition: transform .3s ease; }
.main-sideber .single-sideber-widget [data-menu-items] .recent-items:hover .recent-thumb img { transform: scale(1.06); }
.main-sideber .single-sideber-widget [data-menu-items] .recent-items:hover .recent-content h4 a { color: var(--brand-red, #8a1f12); }
.main-sideber .single-sideber-widget [data-menu-items] .recent-content ul li { font-size: 18px; font-weight: 400; color: var(--brand-red, #8a1f12); }
.main-sideber .single-sideber-widget [data-menu-items] .recent-content ul li .dsf-sold-out { font-size: 12px; font-weight: 400; margin-left: 8px; vertical-align: middle; }

/* A post's reviews (news-details.html, data-reviews): the reader's initials where the template
   showed a photo, the star picker on the form, the honeypot nobody sees */
.blog-single-comment .image .dsf-avatar { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: var(--brand-red, #8a1f12); color: var(--brand-yellow, #ffc222); font-size: 22px; font-weight: 400; letter-spacing: .02em; }
.dsf-review-summary { margin: 6px 0 0; font-size: 15px; }
.dsf-review-summary .star i { color: var(--brand-yellow, #ffc222); font-size: 14px; margin-right: 2px; }
.blog-single-comment .content .head .star i.fa-regular { color: rgba(30, 29, 35, 0.25); }
.dsf-rating { display: flex; align-items: center; gap: 4px; flex-direction: row-reverse; justify-content: flex-end; }
.dsf-rating .dsf-rating-label { order: 10; margin-right: 12px; font-size: 15px; color: var(--text, #5f5f5f); }
.dsf-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dsf-rating label { cursor: pointer; font-size: 26px; line-height: 1; color: rgba(30, 29, 35, 0.2); transition: color .15s ease; }
.dsf-rating input:checked ~ label, .dsf-rating label:hover, .dsf-rating label:hover ~ label { color: var(--brand-yellow, #ffc222); }
.dsf-rating input:focus-visible + label { outline: 2px solid var(--brand-red, #8a1f12); outline-offset: 2px; border-radius: 4px; }
.dsf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.comment-form-wrap form { position: relative; }

/* "Follow us" over the footers' social row (hidden with the row while no link is set) */
.footer-section .footer-widget-items .dsf-follow, .footer-section-4 .footer-widget-items .dsf-follow { display: block; margin-top: 26px; margin-bottom: -18px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-yellow, #ffc222); }
.footer-section-4 .footer-widget-items .dsf-follow { color: var(--brand-red, #8a1f12); }


/* ---------------------------------------------------------------- the app layer: phones and tablets (owner, 2026-09-21)
   "The website is fine on a computer; on a phone and an iPad it should feel like a food app:
   small buttons everywhere." Nothing here touches screens over 991px. What changes: every card's
   buttons become compact pills on one line with the price (Order Now = the plate's page, + Add =
   into the order), the product page's stepper and Add button sit in one 46px row, the order
   page's steppers are round 34px buttons a thumb can hit, and the inner footer's blocks sit
   centred once the columns stack. */
@media (max-width: 991px) {
  /* cards: the price row carries both pills, small */
  .best-food-selling-item-4 .content .pricing-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; }
  .best-food-selling-item-4 .content .pricing-item .theme-btn.small-btn, .food-category-card-item .theme-btn.small-btn, .food-menu-item .theme-btn.small-btn { padding: 0 14px; height: 34px; line-height: 34px; font-size: 12px; border-radius: 999px; }
  .best-food-selling-item-4 .content .pricing-item .theme-btn.small-btn i, .food-category-card-item .theme-btn.small-btn i { font-size: 11px; }
  .best-food-selling-item-4 .content .dsf-add, .food-menu-items-3 .food-menu-itemss .content .dsf-add, .best-food-menu-list-two li .content .dsf-add { height: 34px; padding: 0 14px; font-size: 12px; line-height: 34px; min-height: 0; margin: 0; }
  .best-food-selling-item-4 .content .dsf-add { margin-left: auto; }
  .food-menu-items-3 .food-menu-itemss .content .dsf-add { margin: 6px 0 0 auto; }
  /* the menu page list's basket icon and the shop grid's + : round 34px buttons */
  .best-food-menu-list-two li .content .price-list .cart-icon { min-width: 34px; min-height: 34px; width: 34px; height: 34px; margin: 0 0 0 8px; border-radius: 50%; background: var(--brand-yellow, #ffc222); color: #1e1d23; font-size: 13px; }
  .food-category-items-4 .icon a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-yellow, #ffc222); color: #1e1d23; }
  .food-category-items-4 .icon a i { margin: 0; font-size: 13px; }
  .food-category-items-4 .icon { top: 10px; right: 10px; display: flex; gap: 6px; }
  .shop-list-inner .icon a { width: 34px; height: 34px; }
  /* the product page: stepper + Add in one row, app height */
  .shop-details-wrapper .product-details-content .cart-quantity { flex-wrap: nowrap; gap: 10px; margin: 20px 0; }
  .shop-details-wrapper .product-details-content .cart-quantity .qty { width: auto; flex: 0 0 auto; height: 46px; line-height: 46px; padding: 0 6px; border-radius: 999px; gap: 0; margin: 0; }
  .shop-details-wrapper .product-details-content .cart-quantity .qty button { width: 34px; height: 34px; border-radius: 50%; font-size: 20px; background: #f3efe8; border: 0; }
  .shop-details-wrapper .product-details-content .cart-quantity .qty input { width: 40px; height: 46px; font-size: 16px; font-weight: 400; }
  .shop-details-wrapper .product-details-content .cart-quantity .shop-btn { flex: 1 1 auto; height: 46px; line-height: 46px; padding: 0 16px; font-size: 14px; border-radius: 999px; text-align: center; }
  .shop-details-wrapper .product-details-content .cart-quantity .icon-item { display: none; }
  /* the order page: round steppers a thumb can hit, the remove cross too */
  .cart-list-area .quantity { padding: 2px 4px !important; gap: 4px !important; border-radius: 999px !important; }
  .cart-list-area .quantity .quantityDecrement, .cart-list-area .quantity .quantityIncrement { width: 34px; height: 34px; border-radius: 50%; background: #f3efe8; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
  .cart-list-area .quantity .quantityValue { width: 34px; height: 34px; font-size: 15px; font-weight: 400; }
  .cart-list-area .fa-times, .cart-list-area .fa-xmark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #f3efe8; }
  .cart-total-items .theme-btn, .coupon-items .theme-btn { height: 46px; line-height: 46px; padding: 0 18px; font-size: 14px; border-radius: 999px; }
  /* the order page on phones and tablets: the template's table is 900px wide and scrolled sideways
     (the stepper off screen on an iPad too); each line becomes a card: picture, name and choices,
     then price, stepper and line total */
  @media (max-width: 991px) {
    .cart-list-area .table-responsive { overflow: visible; }
    .cart-list-area table.common-table, .cart-list-area table.common-table tbody { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; }
    .cart-list-area table.common-table tbody tr { width: 100%; }
    .cart-list-area table.common-table thead { display: none; }
    .cart-list-area table.common-table tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "item item" "price qty" "total total"; gap: 10px 12px; padding: 14px 0 !important; border-bottom: 1px solid #eee5d8; }
    .cart-list-area table.common-table tbody tr > td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; }
    .cart-list-area table.common-table tbody tr > td:nth-child(1) { grid-area: item; }
    .cart-list-area table.common-table tbody tr > td:nth-child(2) { grid-area: price; align-self: center; }
    .cart-list-area table.common-table tbody tr > td:nth-child(3) { grid-area: qty; justify-self: end; }
    .cart-list-area table.common-table tbody tr > td:nth-child(4) { grid-area: total; font-weight: 400; }
    .cart-list-area table.common-table tbody tr > td:nth-child(4)::before { content: "Line total "; font-weight: 400; color: #6b625a; }
    .cart-list-area .cart-item-thumb { gap: 12px !important; width: 100% !important; flex-wrap: nowrap !important; }   /* the template gives it 86px and wraps */
    .cart-list-area .cart-item-thumb img { width: 64px !important; height: 64px; object-fit: cover; border-radius: 10px; flex: 0 0 64px; }
    .cart-list-area .cart-item-thumb .head { white-space: normal !important; flex: 1 1 auto; }
    .cart-list-area .cart-item-thumb .fa-times { order: 3; margin-left: auto; }
    .cart-list-area table.common-table tbody tr > td:only-child { grid-column: 1 / -1; }
    .cart-list-area .coupon-items { flex-wrap: wrap; gap: 10px; }
    .cart-total-area ul li { gap: 12px !important; justify-content: space-between; font-size: 17px; }   /* the template's 220px gap squeezed "MD sales tax" into a 40px column */
  }
  /* the item sheet (choices) */
  .dsf-item-actions .dsf-qty button { width: 38px; height: 40px; }
  .dsf-item-actions .dsf-qty input { width: 40px; height: 40px; }
  /* the inner footer: every block centred once the columns stack (owner: "take them from the middle") */
  .footer-section-4 .footer-widget-items { text-align: center; }
  .footer-section-4 .footer-widget-items .widget-head .dashed { margin-left: auto; margin-right: auto; }
  .footer-section-4 .footer-widget-items .social-icon { justify-content: center; }
  .footer-section-4 .footer-widget-items .list-items li a, .footer-section-4 .footer-widget-items .contact-items li, .footer-section-4 .footer-widget-items .opening-hours-list li { justify-content: center; }
  .footer-section-4 .footer-widget-items .footer-logo img { margin: 0 auto; }
  .footer-section-4 .footer-widget-items .contact-items li { display: flex; align-items: flex-start; }
  .footer-section-4 .footer-bottom-wrapper { justify-content: center; text-align: center; }
  .footer-section-4 .dsf-policy-links { justify-content: center; }
  .footer-section-4 .footer-widget-items .list-items li a { min-width: 44px; }
  .footer-section-4 .dsf-policy-links a, .footer-bottom.style-3 .dsf-policy-links a { display: inline-block; min-width: 44px; text-align: center; }
  /* the small pills keep a finger's 44px hit area behind their 34px look */
  .dsf-add, .best-food-menu-list-two li .content .price-list .cart-icon, .food-category-items-4 .icon a, .shop-list-inner .icon a, .cart-list-area .quantity button, .cart-quantity .qty button, .btn-close { position: relative; }
  .dsf-add::before, .best-food-menu-list-two li .content .price-list .cart-icon::before, .food-category-items-4 .icon a::before, .shop-list-inner .icon a::before, .cart-list-area .quantity button::before, .cart-quantity .qty button::before, .btn-close::before { content: ""; position: absolute; inset: -6px; }
}

/* ---------------------------------------------------------------- the home hero on laptops (owner, 2026-09-21)
   The template hides every hero decoration (the orange swoosh with the line art, the tomatoes,
   the leaves, the chili, the arrow, the star and the Google rating box) under 1400px, so a 1280
   or 1366 laptop got a bare red band with the photo. The owner wants the full design on every
   laptop. Between 992 and 1399 the pieces show at the 1440 design's proportions: every size
   and anchor is the 1440 measurement divided by 14.4, in vw, so the picture scales as one. */
@media (min-width: 768px) and (max-width: 1399px) {
  .hero-3 .right-shape, .hero-3 .left-shape, .hero-3 .bottom-shape, .hero-3 .chili-shape, .hero-3 .arrow-shape, .hero-3 .tomato-shape, .hero-3 .shape, .hero-3 .leaf, .hero-3 .leaf-2, .hero-3 .leaf-3 { display: block; }
  /* the 1920 stacking: words in front, then the torn white edge over the photo's flat bottom, then
     the photo, then the scenery; and the four feature cards ride up over the hero's edge as at 1920
     (the template drops them 100px below it under 1400) */
  .hero-3 .hero-content { position: relative; z-index: 3; }
  .hero-3 .hero-image { position: relative; z-index: 1; }
  .hero-3 .bottom-shape { z-index: 2; }
  .hero-3 .right-shape, .hero-3 .left-shape, .hero-3 .chili-shape, .hero-3 .arrow-shape, .hero-3 .tomato-shape, .hero-3 .shape, .hero-3 .leaf, .hero-3 .leaf-2, .hero-3 .leaf-3, .hero-3 .ratting-box { z-index: 0; }
  .hero-3 .ratting-box { z-index: 4; }
  .feature-section-3 { margin-top: -100px; }
  .hero-3 .ratting-box { display: block !important; top: 4.9vw; right: 5%; width: 10.6vw; }
  .hero-3 .ratting-box img { width: 100%; height: auto; }
  .hero-3 .right-shape { width: 77.3vw; }
  .hero-3 .left-shape { max-width: 11.1vw; }
  .hero-3 .chili-shape { width: 13.4vw; bottom: 5.6vw; }
  .hero-3 .arrow-shape { width: 6.7vw; right: 11.1vw; top: 17.8vw; }
  .hero-3 .tomato-shape { width: 21.5vw; top: -3.1vw; right: 43%; }
  .hero-3 .leaf { width: 15.1vw; top: -0.7vw; left: 22%; }
  .hero-3 .leaf-2 { width: 17.4vw; bottom: 3.5vw; }
  .hero-3 .leaf-3 { width: 26.2vw; bottom: -3.8vw; left: 44%; }
  .hero-3 .chili-shape img, .hero-3 .arrow-shape img, .hero-3 .tomato-shape img, .hero-3 .leaf img, .hero-3 .leaf-2 img, .hero-3 .leaf-3 img { width: 100%; height: auto; }
}

/* ---------------------------------------------------------------- the home page's decorations on laptops and iPads (owner, 2026-09-21)
   Same rule as the hero above: the template hides every side decoration of the home page
   (bread, tomatoes, leaves, chili, the frames, the text art, the top overlays) under 1400px.
   Between 768 and 1399 they show at the 1440 design's proportions: the 1440 width and anchors
   divided by 14.4, in vw. Pieces the template also hides at 1440 (its 1600px rules) stay hidden. */
@media (min-width: 768px) and (max-width: 1399px) {
  .food-category-section .left-shape { display: block; width: 19.65vw; left: 0; top: 10.42vw; }
  .food-category-section .left-shape img { width: 100%; height: auto; }
  .why-choose-us-section-3 .top-shape { display: block; }
  .why-choose-us-section-3 .text-shape { display: block; width: 48.61vw; top: 13.89vw; left: 1.39vw; max-width: none; }
  .why-choose-us-section-3 .text-shape img { width: 100%; height: auto; }
  .why-choose-us-section-3 .frame-shape { display: block; width: 13.75vw; top: 15.97vw; right: 0; }
  .why-choose-us-section-3 .frame-shape img { width: 100%; height: auto; }
  .why-choose-us-section-3 .frame-shape-2 { display: block; width: 7.22vw; top: 11.11vw; left: 35%; }
  .why-choose-us-section-3 .frame-shape-2 img { width: 100%; height: auto; }
  .special-delivery-section-3 .right-shape { display: block; width: 33.33vw; right: 0; top: 13.89vw; }
  .special-delivery-section-3 .right-shape img { width: 100%; height: auto; }
  .special-delivery-section-3 .bread-shape { display: block; width: 27.78vw; right: 1.04vw; top: 6.94vw; }
  .special-delivery-section-3 .bread-shape img { width: 100%; height: auto; }
  .special-delivery-section-3 .tomato-shape { display: block; width: 16.6vw; left: 22.15vw; top: 2.78vw; }
  .special-delivery-section-3 .tomato-shape img { width: 100%; height: auto; }
  .special-delivery-section-3 .meat-shape { display: block; width: 14.65vw; top: 13.75vw; left: 0; }
  .special-delivery-section-3 .meat-shape img { width: 100%; height: auto; }
  .special-delivery-section-3 .leaf-shape { display: block; width: 25.07vw; left: 17.36vw; top: 20.83vw; }
  .special-delivery-section-3 .leaf-shape img { width: 100%; height: auto; }
  .special-delivery-section-3 .leaf-shape-2 { display: block; width: 19.72vw; right: 0.69vw; top: 33.33vw; }
  .special-delivery-section-3 .leaf-shape-2 img { width: 100%; height: auto; }
  .special-delivery-wrapper-3 .vector-1 { display: block; width: 9.93vw; left: 29.86vw; top: 4.86vw; }
  .special-delivery-wrapper-3 .vector-1 img { width: 100%; height: auto; }
  .special-delivery-wrapper-3 .vector-2 { display: block; width: 9.93vw; right: 29.86vw; top: 4.86vw; }
  .special-delivery-wrapper-3 .vector-2 img { width: 100%; height: auto; }
  .special-delivery-wrapper-3 .vector-3 { display: block; width: 9.93vw; left: 28.26vw; bottom: 4.51vw; }
  .special-delivery-wrapper-3 .vector-3 img { width: 100%; height: auto; }
  .special-delivery-wrapper-3 .vector-4 { display: block; width: 9.93vw; right: 28.26vw; bottom: 4.51vw; }
  .special-delivery-wrapper-3 .vector-4 img { width: 100%; height: auto; }
  .shop-category-section .lef-shape { display: block; width: 16.25vw; top: 0; left: 0; }
  .shop-category-section .lef-shape img { width: 100%; height: auto; }
  .shop-category-section .right-shapee { display: block; width: 17.85vw; right: 0; bottom: 0; }
  .shop-category-section .right-shapee img { width: 100%; height: auto; }
  .best-delivery-wrapper-3 .chili { display: block; width: 5.42vw; top: 22.92vw; left: 44%; }
  .best-delivery-wrapper-3 .chili img { width: 100%; height: auto; }
  .best-delivery-wrapper-3 .frame-shape { display: block; width: 7.64vw; right: 0; top: 6.94vw; }
  .best-delivery-wrapper-3 .frame-shape img { width: 100%; height: auto; }
  .contact-booking-wrapper-3 .tomato-shape { display: block; width: 15.56vw; left: 0; top: 0; }
  .contact-booking-wrapper-3 .tomato-shape img { width: 100%; height: auto; }
  .news-section-3 .left-shape { display: block; width: 24.31vw; left: 0; top: 0; }
  .news-section-3 .left-shape img { width: 100%; height: auto; }
  .news-section-3 .right-shape { display: block; width: 13.54vw; right: 0; top: 6.94vw; }
  .news-section-3 .right-shape img { width: 100%; height: auto; }
  .footer-section.style-3 .top-shape { display: block; }
  /* on these widths the words and cards stay in front: the pieces are scenery, never over a
     heading (at 1440 the template floats the leaf at z-index 99; measured overlaps at 1280,
     1024 and 768 were the leaf, the meat, the bread frame and the chili over headings) */
  .food-category-section .container, .why-choose-us-section-3 .container, .special-delivery-section-3 .container, .shop-category-section .container, .best-delivery-section-3 .container, .contact-booking-section-3 .container, .news-section-3 .container, .why-choose-us-section-4 .container, .special-menu-banner-two .container { position: relative; z-index: 2; }
  .special-delivery-section-3 .leaf-shape, .special-delivery-section-3 .leaf-shape-2, .special-delivery-section-3 .meat-shape, .special-delivery-section-3 .tomato-shape, .why-choose-us-section-3 .frame-shape, .why-choose-us-section-3 .frame-shape-2, .why-choose-us-section-3 .top-shape, .best-delivery-wrapper-3 .chili, .best-delivery-wrapper-3 .frame-shape, .contact-booking-wrapper-3 .tomato-shape, .news-section-3 .left-shape, .news-section-3 .right-shape, .shop-category-section .lef-shape, .shop-category-section .right-shapee, .food-category-section .left-shape { z-index: 0; }
}
/* the special card hangs over the next section's torn top edge (measured at 1280: the edge covered
   "PHENOMENON MOMO TASTE"); its section stays in front of the edge */
@media (min-width: 768px) and (max-width: 1399px) { .food-offer-section-3, .food-category-section { position: relative; z-index: 3; } }
/* the menu section's two right-edge pieces sit on the prices once the list is full width (measured at 768) */
@media (min-width: 768px) and (max-width: 991px) { .food-menu-section-3 .right-shape, .food-menu-section-3 .right-shape-2 { display: none; } }
/* the chili inside the delivery band lands on its paragraph under 1200px (measured at 1007) */
@media (min-width: 768px) and (max-width: 1199px) { .best-delivery-wrapper-3 .chili { display: none; } }
/* the four doodles around the feature boxes sit on the boxes once they stack */
@media (min-width: 768px) and (max-width: 991px) {
  .special-delivery-wrapper-3 .vector-1, .special-delivery-wrapper-3 .vector-2, .special-delivery-wrapper-3 .vector-3, .special-delivery-wrapper-3 .vector-4 { display: none; }
}
/* the inner pages' pieces the template hides under 1400px: the story page's two dishes at the
   "why choose" edges, the menu banner's two ornaments; same proportions as above */
@media (min-width: 768px) and (max-width: 1399px) {
  .why-choose-us-section-4 .left-shape { display: block; width: 8.33vw; bottom: 0; left: 0; }
  .why-choose-us-section-4 .right-shape { display: block; width: 10.83vw; top: 13.06vw; right: 0; }
  .special-menu-banner-two .shape { display: block; width: 11.88vw; bottom: 0; left: 0; }
  .special-menu-banner-two .shape-2 { display: block; width: 9.93vw; top: 0; right: 0; }
  .why-choose-us-section-4 .left-shape img, .why-choose-us-section-4 .right-shape img, .special-menu-banner-two .shape img, .special-menu-banner-two .shape-2 img { width: 100%; height: auto; }
}

/* ---------------------------------------------------------------- the pieces the template shows only over 1600px (owner, 2026-09-21:
   "the 1080p design on every screen"). The 1920 design carries fourteen more pieces (the dish
   cut-outs at the section edges, the home footer's chili, tomatoes, leaf and frames, the
   testimonial strip's dishes) that the template drops under 1601px. From 768 to 1600 they show
   at the 1920 design's proportions: the 1920 width and anchors divided by 19.2, in vw. */
@media (min-width: 768px) and (max-width: 1600px) {
  .food-category-section .left-shape-2 { display: block; width: 8.54vw; left: 5.21vw; bottom: 10.42vw; z-index: 0; }
  .food-category-section .left-shape-2 img { width: 100%; height: auto; }
  .food-category-section .right-shape { display: block; width: 9.17vw; top: 14.06vw; right: 8.75vw; z-index: 0; }
  .food-category-section .right-shape img { width: 100%; height: auto; }
  .food-category-section .right-shape-2 { display: block; width: 7.81vw; bottom: 0; right: 0; z-index: 0; }
  .food-category-section .right-shape-2 img { width: 100%; height: auto; }
  .food-menu-section-3 .right-shape { display: block; width: 8.33vw; top: 16.41vw; right: 3.39vw; z-index: 0; }
  .food-menu-section-3 .right-shape img { width: 100%; height: auto; }
  .food-menu-section-3 .right-shape-2 { display: block; width: 10.62vw; right: 0; bottom: 10.42vw; z-index: 0; }
  .food-menu-section-3 .right-shape-2 img { width: 100%; height: auto; }
  .testimonial-section-3 .left-shape { display: block; width: 11.09vw; left: 0.52vw; bottom: 12.5vw; z-index: 0; }
  .testimonial-section-3 .left-shape img { width: 100%; height: auto; }
  .testimonial-section-3 .right-shape { display: block; width: 7.5vw; right: 0; bottom: 0; z-index: 0; }
  .testimonial-section-3 .right-shape img { width: 100%; height: auto; }
  .footer-section.style-3 .chili-shape { display: block; width: 10.31vw; left: 0; top: 20.83vw; z-index: 0; }
  .footer-section.style-3 .chili-shape img { width: 100%; height: auto; }
  .footer-section.style-3 .tomato-shape { display: block; width: 13.8vw; right: 0; top: 7.81vw; z-index: 0; }
  .footer-section.style-3 .tomato-shape img { width: 100%; height: auto; }
  .footer-section.style-3 .bottom-shape { display: block; width: 7.71vw; right: 0; bottom: 2.08vw; z-index: 0; }
  .footer-section.style-3 .bottom-shape img { width: 100%; height: auto; }
  .footer-section.style-3 .left-shape { display: block; width: 12.34vw; left: 0; top: 7.81vw; z-index: 0; }
  .footer-section.style-3 .left-shape img { width: 100%; height: auto; }
  .footer-section.style-3 .right-shape { display: block; width: 5.99vw; right: 0; top: 23.44vw; z-index: 0; }
  .footer-section.style-3 .right-shape img { width: 100%; height: auto; }
  .footer-section.style-3 .leaf-shape { display: block; width: 15.26vw; top: 5.21vw; left: 46%; z-index: 0; }
  .footer-section.style-3 .leaf-shape img { width: 100%; height: auto; }
  .food-offer-wrapper-3 .food-offer-banner .shape { display: block; width: 13.39vw; top: -4.69vw; right: 6.77vw; z-index: 0; }
  .food-offer-wrapper-3 .food-offer-banner .shape img { width: 100%; height: auto; }
  .food-offer-wrapper-3 .food-offer-banner .info-cont, .food-offer-wrapper-3 .food-offer-banner .theme-btn { position: relative; z-index: 1; }
  .food-category-section .container, .food-menu-section-3 .container, .testimonial-section-3 .container, .footer-section.style-3 .container { position: relative; z-index: 2; }
}
/* Scenery never takes a tap: measured at 1440 to 1600 the hero's leaf-2 (a 250x330 picture, mostly
   transparent) sat over the left two thirds of "Order for Pickup" and over the phone link, so a
   click there hit the leaf. Every decoration wrapper lets the tap through to what is under it. */
.hero-3 .right-shape, .hero-3 .left-shape, .hero-3 .bottom-shape, .hero-3 .chili-shape, .hero-3 .arrow-shape, .hero-3 .tomato-shape, .hero-3 .shape, .hero-3 .leaf, .hero-3 .leaf-2, .hero-3 .leaf-3, .hero-3 .ratting-box,
.food-category-section .left-shape, .food-category-section .left-shape-2, .food-category-section .right-shape, .food-category-section .right-shape-2,
.why-choose-us-section-3 .top-shape, .why-choose-us-section-3 .text-shape, .why-choose-us-section-3 .frame-shape, .why-choose-us-section-3 .frame-shape-2,
.food-offer-wrapper-3 .food-offer-banner .shape, .food-menu-section-3 .right-shape, .food-menu-section-3 .right-shape-2,
.special-delivery-section-3 .right-shape, .special-delivery-section-3 .bread-shape, .special-delivery-section-3 .tomato-shape, .special-delivery-section-3 .meat-shape, .special-delivery-section-3 .leaf-shape, .special-delivery-section-3 .leaf-shape-2, .special-delivery-wrapper-3 .vector-1, .special-delivery-wrapper-3 .vector-2, .special-delivery-wrapper-3 .vector-3, .special-delivery-wrapper-3 .vector-4,
.shop-category-section .lef-shape, .shop-category-section .right-shapee, .testimonial-section-3 .left-shape, .testimonial-section-3 .right-shape,
.best-delivery-wrapper-3 .chili, .best-delivery-wrapper-3 .frame-shape, .contact-booking-wrapper-3 .tomato-shape, .news-section-3 .left-shape, .news-section-3 .right-shape,
.footer-section.style-3 .top-shape, .footer-section.style-3 .chili-shape, .footer-section.style-3 .tomato-shape, .footer-section.style-3 .bottom-shape, .footer-section.style-3 .left-shape, .footer-section.style-3 .right-shape, .footer-section.style-3 .leaf-shape,
.why-choose-us-section-4 .left-shape, .why-choose-us-section-4 .right-shape, .special-menu-banner-two .shape, .special-menu-banner-two .shape-2, .comboo-offer-section-two .shape-1, .comboo-offer-section-two .shape-2, .comboo-offer-section-two .shape-3, .breadcrumb-wrapper .girl-shape, .breadcrumb-wrapper .shape-1 { pointer-events: none; }
/* 1400 to 1600 (the template's own layout): its leaf floats at z-index 99 over the first feature
   box ("FAST PICKUP", measured at 1536); the boxes stay in front there too */
@media (min-width: 1400px) and (max-width: 1600px) {
  .special-delivery-section-3 .container { position: relative; z-index: 2; }
  .special-delivery-section-3 .leaf-shape, .special-delivery-section-3 .leaf-shape-2, .special-delivery-section-3 .meat-shape, .special-delivery-section-3 .tomato-shape { z-index: 0; }
}
/* the home Special Momo card between 1200 and 1399: the card is 546px instead of 636 but the plate
   stayed 344px and sat on the countdown's last two numbers (measured); the plate takes the same
   share of the card as at 1920 and the numbers tighten a little */
@media (min-width: 1200px) and (max-width: 1399px) {
  .food-banner-items .chiken-image { width: 54%; }
  .food-banner-items .chiken-image img { width: 100%; height: auto; }
  .food-banner-items .content .coming-soon-time { gap: 6px; }
  .food-banner-items .content .coming-soon-time .timer-content h2 { font-size: 24px; }
  .food-banner-items .content .coming-soon-time .timer-content span { font-size: 11px; }
}
/* the home offer cards and the story badge on laptops, the 1920 look: the template shrinks the
   cards' dishes to 85px and hides the "years" badge under 1400px; here the dish keeps the 1920
   card's share (210px of a 400px card = 190 of 356) and the badge shows at 0.88 of its size */
@media (min-width: 1200px) and (max-width: 1399px) {
  .food-offer-wrapper-3 .food-offer-banner { padding: 32px 30px; }
  .food-offer-wrapper-3 .food-offer-banner .special-thumb { margin-bottom: 36px; }
  .food-offer-wrapper-3 .food-offer-banner .food-img { max-width: 168px; }
  .food-offer-wrapper-3 .food-offer-banner .food-img.style-2 { max-width: 136px; bottom: 34px; }   /* clear of the phone number's line (the owner's laptop cut "262-4646" under the plate) */
  .food-offer-wrapper-3 .food-offer-banner .info-cont h2 { font-size: 40px; }
  .food-offer-wrapper-3 .food-offer-banner .info-items { margin-top: 44px; }
  .food-offer-wrapper-3 .food-offer-banner .info-items .number { font-size: 23px; }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .why-choose-us-wrapper-3 .burger-image .choose-box { display: block; left: -30px; bottom: -150px; padding: 36px 36px 42px; }   /* at 1920 the badge hangs 265px under the bowl into the marquee's room; on laptops that room is smaller and the offer cards start sooner (measured: it reached card 1's button at -200) */
  .why-choose-us-wrapper-3 .burger-image .choose-box .content h2 { font-size: 56px; }
  .why-choose-us-wrapper-3 .burger-image .choose-box .content p { font-size: 16px; }
}
/* the feature boxes' numbered dots (01 to 04), hidden by the template under 1400px; the 1920 look */
@media (min-width: 992px) and (max-width: 1399px) {
  .special-delivery-wrapper-3 .left-item .number { display: block; }
  .special-delivery-wrapper-3 .left-item .number span { width: 34px; height: 34px; line-height: 34px; font-size: 14px; }
}
/* the four best sellers stay one row on laptops (the template's col-xl-4 wrapped the fourth card alone under 1400px) */
@media (min-width: 1200px) and (max-width: 1399px) { .shop-category-section .row > [class*="col-"] { width: 25%; } }
/* the home footer's top row on laptops: logo, subscribe and the app buttons in one line as at 1920
   (the template wrapped the row under 1400px: the logo alone, the app block dropped to the right) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .footer-section.style-3 .footer-top-items-3 { margin-top: 60px; }
  .footer-section.style-3 .footer-top-items-3 .footer-left { flex-wrap: nowrap; gap: 26px; }
  .footer-section.style-3 .footer-top-items-3 .footer-left .footer-contentt { width: 380px; }
  .footer-section.style-3 .footer-top-items-3 .footer-right { max-width: 400px; }
}
/* the header's Book Catering button on laptops (the template hides it under 1400px) */
@media (min-width: 1200px) and (max-width: 1399px) { .header-3 .header-right .theme-btn { display: inline-block; } }
@media (min-width: 992px) and (max-width: 1199px) { .header-3 .header-right .theme-btn { display: inline-block; padding: 0 16px; font-size: 12px; } }
/* the best sellers' price and Order Now stay on one line on laptops (the card is 262px there) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .shop-category-items .content .pricing-item { flex-wrap: nowrap; gap: 12px; }
  .shop-category-items .content .pricing-item .price { font-size: 26px; }
  .shop-category-items .content .pricing-item .theme-btn { padding: 0 16px; font-size: 13px; }
}
/* the three small news cards on laptops: author and date on one line as at 1920 (they wrapped to
   two lines each in the 1280 column), the title at the 1920 card's share */
@media (min-width: 1200px) and (max-width: 1399px) {
  .news-wrapper-3 .news-mini-card .news-content ul { gap: 14px; }
  .news-wrapper-3 .news-mini-card .news-content ul li { font-size: 13px; white-space: nowrap; }
  .news-wrapper-3 .news-mini-card .news-content h4, .news-wrapper-3 .news-mini-card .news-content .title { font-size: 17px; }
}
/* the booking band's tomatoes sit inside the band's wrapper: its words and form stay in front */
@media (min-width: 768px) and (max-width: 1399px) { .contact-booking-wrapper-3 > *:not(.tomato-shape) { position: relative; z-index: 1; } }

/* the four feature cards under the hero on laptops: one line of words each, so all four stand the
   same height (at 1280 three of them wrapped to two lines and stood 28px taller than the fourth) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .feature-section-3 .row { align-items: stretch; }
  .feature-section-3 .row > [class*="col-"] > .feature-box-items-3 { height: 100%; }
  .feature-box-items-3 { padding: 16px 14px; gap: 10px; }
  .feature-box-items-3 .icon { width: 52px; height: 52px; line-height: 52px; flex: 0 0 52px; }
  .feature-box-items-3 .icon .emoji { font-size: 24px; line-height: 52px; }
  .feature-box-items-3 .content h2 { font-size: 16px; margin-bottom: 6px; }
  .feature-box-items-3 .content p { font-size: 13px; white-space: nowrap; }
}