/* generated by engine/build.mjs from clients/dhaka-street-food/client.json "brand": the client's colors on the storefront's tokens (assets/app/site.css). Edit client.json, not this file. */
:root {
  --brand-red: #8a1f12;
  --brand-red-deep: #5a0f0c;
  --brand-gold: #b06a14;
  --brand-yellow: #ffc222;
  --brand-paint-tile: url("../../assets/img/dsf/line-art-tile.png");
  --brand-paint: linear-gradient(100deg, #4a0b09 0%, #8c1a10 30%, #c8391d 52%, #8c1a10 74%, #4a0b09 100%);
  --theme2: var(--brand-red);
}

/* clients/dhaka-street-food/client.css */
/* Dhaka Street Food: the storefront's client layer, appended to the generated assets/app/client.css
   after the brand tokens (engine/build.mjs). Rules here are about the owner's own pictures. */

/* ---------------------------------------------------------------- one header everywhere
   Inner pages wear the home header (client.json layout.header = header-3), which is absolute over the
   page top; the banner starts under it (the template's 270px was for its taller inner header). */
.breadcrumb-wrapper { margin-top: 106px; }
@media (max-width: 991px) { .breadcrumb-wrapper { margin-top: 101px; } }

/* ---------------------------------------------------------------- the inner cover
   The demo template's anatomy (owner, 2026-09-19): a picture behind the title, the dish at the left
   edge where the template's pizza stands, the person beside it where its girl stands (both from
   1200px up, as the template shows them). The owner's picture (2026-09-20, his second file): the
   courtyard with the truck and the queue at the RIGHT, 1920x344, centred and covering, so the title
   lives on the red wall between the couple and the truck.
   Measured on the demo at 1920 (the banner 365px tall): shape-1 (the pizza cut by the left edge, a
   leaf floating above it, the tomatoes above its right end touching the girl's hair) 493px wide at
   the left edge; the girl 319x320 at 397px, standing on the banner's bottom edge with 45px of air
   above her head, beside the pizza's end (400px); the title centred in the rest. Here shape-1 is the
   platter with the leaf (pictures.py cover_dish, a 454px design from -60px so the plate is cut by
   the edge and its rim sinks 12px under the wave) and the girl is the couple with the tomatoes
   hanging from the banner's top beside her head (cover_person, a 463px design standing on the
   bottom edge, its top 2px under the banner's top), the couple pushed 60px left over the platter's
   end so the plate she holds stands in front of the chotpoti bowl (owner: the platter goes a little
   behind them, the tomatoes at the top). Owner, 2026-09-20: the platter and the couple a fifth
   smaller everywhere, then the couple a tenth bigger, so the platter's design is shown at 0.8
   (363px from -48px, rim 10px under) and the couple's at 0.88 (407px wide at 270px) with the
   tomatoes drawn bigger inside the couple's picture so they keep their own size and their top; the
   leaf floats over the platter a quarter of the way from the fuchka pile toward her (page x 137,
   in the platter's picture, so it holds still while she steps nearer on laptops). On laptops nothing shrinks or drops (the owner checked 1280 and 1440): the
   couple only steps left over the platter as the template's girl steps over its pizza (its 200px
   and 150px steps; here 240 from 1600, 184 from 1400, 136 from 1200), so the wall between them and
   the truck still holds the title. The pictures are 2x files. */
.breadcrumb-wrapper .shape-1 { width: 363px; max-width: none; bottom: -10px; left: -48px; }
.breadcrumb-wrapper .shape-1 img { width: 100%; }
.breadcrumb-wrapper .girl-shape { z-index: 2; left: 270px; }
.breadcrumb-wrapper .girl-shape img { width: 407px; }
/* the heading's room is measured from the viewport's edges (the couple's right edge + 20px, the
   truck's left edge - 20px; the truck's bumper is at x 1262 of the 1920x344 picture, which centred
   and covering a 365px band puts it at 50vw + 320px, 65.7vw past 2037px), so the banner's container
   goes full width from 1200px. */
@media (min-width: 1200px) {
  .breadcrumb-wrapper .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
  .breadcrumb-wrapper .page-heading { padding-left: 697px; padding-right: calc(50vw - 300px); }
  .breadcrumb-wrapper .breadcrumb-items { flex-wrap: nowrap; white-space: nowrap; }
}
@media (min-width: 2037px) { .breadcrumb-wrapper .page-heading { padding-right: calc(34.3vw + 20px); } }
@media (min-width: 1600px) and (max-width: 1799px) { .breadcrumb-wrapper .girl-shape { left: 240px; } .breadcrumb-wrapper .page-heading { padding-left: 667px; } }
@media (min-width: 1400px) and (max-width: 1599px) { .breadcrumb-wrapper .girl-shape { left: 184px; } .breadcrumb-wrapper .page-heading { padding-left: 611px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .breadcrumb-wrapper .girl-shape { left: 136px; } .breadcrumb-wrapper .page-heading { padding-left: 563px; } }

/* ---------------------------------------------------------------- home offer cards and the special card
   The template's first two offer cards carry text-art pictures and the third a two-line title;
   ours carry the item's name, a line and its price (info-cont), which is shorter, so the cards
   fell from the template's 336px to 260px and the dish, standing bottom right, climbed onto the
   title. The cards keep the template's heights, measured on the demo at each width (336 from
   1400px, 271 from 1200, 272 from 992; stacked cards under 992 take their own height like the
   demo's), and the dishes stand at the bottom of their canvases (pictures.py, align="bottom").
   The special card is the demo's 416px too, so it does not shrink on weekends when the
   countdown gives way to a line (363 from 1200, 361 from 992, 328 from 768; its dish is hidden
   under 768px by the template). */
@media (min-width: 1400px) { .food-offer-wrapper-3 .food-offer-banner { min-height: 336px; } .food-banner-items { min-height: 416px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .food-offer-wrapper-3 .food-offer-banner { min-height: 300px; } .food-banner-items { min-height: 363px; } }   /* 300 = the 1920 card's 336 at the laptop column's share (owner, 2026-09-21: the 1920 design on laptops) */
@media (min-width: 992px) and (max-width: 1199px) { .food-banner-items { min-height: 361px; } }
@media (min-width: 768px) and (max-width: 991px) { .food-banner-items { min-height: 328px; } }

/* ---------------------------------------------------------------- menu page: the special banner's dish
   The owner's height for the dish (2026-09-20): 20% of the picture's 294px up from the
   template's 70px under the banner, then 10% back down (59px up, 29px down: 40px under). */
@media (min-width: 1200px) { .special-menu-banner-wrapper-two .pizza-image { bottom: -40px; } }

/* ---------------------------------------------------------------- menu page: the middle special card
   The demo's card is 428px tall with a two-line title and a long line; ours (Momo, one line) is
   shorter, so the card keeps the demo's heights, measured per width, and the dish stands at the
   right edge where the demo's bowl stands (the demo's wider text pushes it there). */
@media (min-width: 1400px) { .best-food-menu-wrap-two { min-height: 428px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .best-food-menu-wrap-two { min-height: 432px; } }
@media (min-width: 992px) and (max-width: 1199px) { .best-food-menu-wrap-two { min-height: 381px; } }
@media (min-width: 768px) and (max-width: 991px) { .best-food-menu-wrap-two { min-height: 371px; } }
@media (min-width: 1200px) { .best-food-menu-wrap-two .rice-image { margin-left: auto; } }

/* ---------------------------------------------------------------- the "Hot and Delicious" band
   The template's 155px script heading held its one short word (Burger); the owner's crab curry
   made it "Crab Curry" (2026-09-20), a longer word, and the dish stands the band's full height
   at the right like the template's burger (site.css .dsf-band-dish: 560px wide at 596px tall,
   its left edge at 682px of a 1411px band at 1440). Measured: 140px keeps "Crab Curry" 60px
   left of the bowl on a 1920 screen, 120px keeps it 40px left on 1400-1599 laptops, 80px on
   992-1199 where the band is 960px wide. The template's own 90px and 50px steps stay elsewhere. */
@media (min-width: 1600px) { .food-offer-wrapper-3 .hot-pizza-image .food-content h2 { font-size: 140px; } }
@media (min-width: 1400px) and (max-width: 1599px) { .food-offer-wrapper-3 .hot-pizza-image .food-content h2 { font-size: 120px; } }
@media (min-width: 992px) and (max-width: 1199px) { .food-offer-wrapper-3 .hot-pizza-image .food-content h2 { font-size: 80px; } }
/* the band's dish is an <img> over the scene (index.html .dsf-band-dish, placed by site.css), so the
   owner can change it in Admin > The site; the scene under it is the smoky room alone. */

/* ---------------------------------------------------------------- the catering band (reservation.html)
   The template's green band carried its orange eyebrow and orange flourish; ours is the brand
   paint, on which brand red vanishes. The eyebrow goes yellow (the brand's second color), the
   flourish is the same shape in yellow (assets/img/dsf/sec-line-yellow.png, pictures.py). */
.comboo-offer-section-two .section-title .sub-title { color: var(--brand-yellow); }

/* ---------------------------------------------------------------- the testimonial strip's logos
   The template runs six partner-brand logos under the testimonials; the truck has none, so the
   strip carries its own dishes (pictures.py home-3/b-1..6, 2x files), one height for the row. */
.brand-wrapper-3 .brand-image img { height: 85px; width: auto; }

/* ---------------------------------------------------------------- the menu section's board
   The picture left of the menu tabs is the owner's chalkboard (photos/menu-board.jpg, straight on,
   1034x1610 framed), a board people read. The box is the template's (680px from 1400, 500, 400,
   350 below; the owner keeps the demo's layout, 2026-09-20); the board sits inside it whole, at
   the top, never stretched or cropped. */
.best-food-menu-wrapper-3 .food-menu-image img { object-fit: contain; object-position: center top; }

/* ---------------------------------------------------------------- the story page: the owner's border on the pictures
   The template's history list put a numbered circle between each picture and its words; the owner
   (2026-09-20) wants his border there instead: a deep red bar with a yellow edge and a chevron,
   standing beside the picture's inner edge and pointing at the words. It is as tall as the
   picture and stands 1px clear of its edge, its file trimmed to its paint (over the edge it cut the
   picture's rounded corners; 6px, then 2px plus the file's own margin, read as a gap: the owner), mirrored when the picture is on the right; the template stacks the rows under
   992px, where the border and its timeline go. */
@media (min-width: 992px) { .history-food-list-wrap .history-food-list-items { gap: 86px; } }   /* the room the template's circle took stays between the picture and the words: the chevron points across it */
.dsf-story-figure { position: relative; }
.history-food-list-wrap .history-food-list-items .dsf-story-figure .thumb { max-width: none; }
/* the picture's edge that meets the border runs straight, so the two line up (the owner: the pictures match the border, 0.02 inch = 2px between them); the outer corners keep the template's rounding */
.history-food-list-wrap .history-food-list-items .dsf-story-figure .thumb, .history-food-list-wrap .history-food-list-items .dsf-story-figure .thumb img { border-radius: 20px 0 0 20px; }
.history-food-list-wrap .history-food-list-items .dsf-story-figure.is-right .thumb, .history-food-list-wrap .history-food-list-items .dsf-story-figure.is-right .thumb img { border-radius: 0 20px 20px 0; }
/* the bar itself starts 33% into the file's width (its hooks reach left of it, over the picture's
   corners, its chevron right of it), so the file is moved by the rest of its width plus 1px: the bar
   stands 1px off the picture's edge */
.dsf-story-figure .dsf-story-border { position: absolute; top: 0; right: 0; height: 100%; width: auto; z-index: 2; pointer-events: none; transform: translateX(calc(67% + 1px)); }
.dsf-story-figure.is-right .dsf-story-border { right: auto; left: 0; transform: translateX(calc(-67% - 1px)) scaleX(-1); }
@media (max-width: 1399px) { .history-food-list-wrap .history-food-list-items .dsf-story-figure { max-width: 480px; } }
@media (max-width: 1199px) { .history-food-list-wrap .history-food-list-items .dsf-story-figure { max-width: 380px; } }
@media (max-width: 991px) { .history-food-list-wrap .history-food-list-items .dsf-story-figure { margin: 0 auto; } .dsf-story-figure .dsf-story-border { display: none; } }
/* the dashed line down the middle of the story list (the template's timeline) goes: the owner, 2026-09-20 */
.history-food-list-wrap::before { display: none; }

/* the home weekend card carries the menu card's tagline line (the owner wants the two cards alike, 2026-09-20) */
.food-banner-items .content .text { font-size: 14px; font-weight: 700; color: var(--white); }

/* phones (owner, 2026-09-20): the inner footer's logo column and the copyright strip sit in the middle */
@media (max-width: 767px) {
  .footer-widget-wrapper.style-widget-wrapper-4 .footer-widget-items .footer-content { text-align: center; }
  .footer-widget-wrapper.style-widget-wrapper-4 .footer-widget-items .footer-content .footer-logo img { margin: 0 auto; display: block; }
  .footer-widget-wrapper.style-widget-wrapper-4 .footer-widget-items .footer-content .text,
  .footer-widget-wrapper.style-widget-wrapper-4 .footer-widget-items .footer-content h2 { text-align: center; }
  .footer-widget-wrapper.style-widget-wrapper-4 .footer-widget-items .footer-content .contact-items a,
  .footer-widget-wrapper.style-widget-wrapper-4 .footer-widget-items .footer-content .contact-items p { display: block; text-align: center; }
  .footer-widget-wrapper.style-widget-wrapper-4 .footer-widget-items .footer-content .contact-items i { margin-right: 8px; }
  .footer-bottom.style-3 .footer-bottom-wrapper { justify-items: center; text-align: center; }
  .footer-bottom.style-3 .footer-bottom-wrapper p { white-space: normal; }
  .footer-bottom.style-3 .app-image img { margin: 0 auto; }
}

/* phones and small tablets (owner, 2026-09-20: the mobile pass) */
@media (max-width: 767px) {
  /* the "Hot and Delicious" band: the dish is our own picture over the template's art, so the arrow
     stays at the left (the template centres it from 471px) and the dish keeps clear of it */
  /* the words big across the top, the crab bowl big in the middle, the small yellow arrow at the foot (owner, 2026-09-20) */
  .food-offer-wrapper-3 .hot-pizza-image { height: 560px; }
  .food-offer-wrapper-3 .hot-pizza-image .food-content { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; top: 24px; bottom: 22px; left: 20px; right: 20px; text-align: center; }
  .food-offer-wrapper-3 .hot-pizza-image .food-content h2 { font-size: 52px; max-width: none; width: 100%; line-height: 0.9; white-space: nowrap; }
  .food-offer-wrapper-3 .hot-pizza-image .food-content .circle-box { width: 72px; min-width: 72px; height: 72px; }
  .hot-pizza-image .dsf-band-dish { right: auto; left: 50%; transform: translateX(-50%); top: auto; bottom: 100px; height: 47%; }
  /* the home menu list: the picture beside the words (the template drops it onto its own line) */
  .best-food-menu-wrapper-3 .food-menu-mid-item .food-menu-items-3 .food-menu-itemss { flex-wrap: nowrap; align-items: flex-start; }
  .best-food-menu-wrapper-3 .food-menu-mid-item .food-menu-items-3 .food-menu-itemss .thumb { width: 84px; flex: none; }
  .best-food-menu-wrapper-3 .food-menu-mid-item .food-menu-items-3 .food-menu-itemss .content { width: auto; flex: 1 1 auto; min-width: 0; }
  /* the menu page's Special Momo card: on a phone the plate sits under the words at full width, so the 50% OFF scribble moves to the plate's top right corner instead of covering the food */
  .best-food-menu-wrap-two .rice-image .discount { top: -58px; left: auto; right: 0; }   /* its foot in the plate box's empty top right corner, like the home card */
}

/* phones (owner, 2026-09-20): the home Special Momo card shows its plate too, under the words at full
   width like the menu page's card (the template hides the plate, the scribble and the splash below 768px) */
@media (max-width: 767px) {
  .food-banner-items { display: flex; flex-direction: column; }
  .food-banner-items .content { display: contents; }   /* its words, timer and button join the card's column so the button can follow the plate (owner, 2026-09-20) */
  .food-banner-items .chiken-image { display: block; position: static; width: 100%; max-width: 344px; margin: 56px auto 0; order: 1; }   /* room over the plate for the scribble, clear of the timer */
  .food-banner-items .content .theme-btn { order: 2; align-self: flex-start; margin-top: 18px; }
  .food-banner-items .content .coming-soon-time { margin-bottom: 0; }
  .food-banner-items .chiken-image img { width: 100%; height: auto; display: block; }
  /* the scribble sits in the empty right half of the Order Now row (the words above stack to the same
     height on every phone width), its right edge on the plate's right edge and its foot on the plate's
     rim, so it reads as the plate's tag and covers neither the words nor the food (owner: two sizes bigger, lined up with the product) */
  .food-banner-items .offer-image { display: block; top: auto; bottom: 338px; right: max(30px, calc(50% - 172px)); width: 100px; }   /* its foot 44px into the plate's empty top right corner; the plate is 271px tall from 428px up, over the button row (71px) and the card's 40px bottom padding */
  .food-banner-items .offer-image img { width: 100%; height: auto; }
}
@media (max-width: 427px) { .food-banner-items .offer-image { width: 100px; bottom: calc((100vw - 84px) * 0.7878 + 67px); } }   /* below 428px the plate fills the card's inner width (100vw minus the gutters and padding, 84px); its height is 271/344 of that */
@media (max-width: 339px) { .food-banner-items .offer-image { width: 88px; } }   /* the narrowest phones: clear of the button */

/* the home offer cards on phones and tablets, iPad landscape included (owner, 2026-09-20/21; below 1200px the template's cards cut the phone number under an 85..127px dish) */
@media (max-width: 1199px) {
  /* the offer cards: the template floats a 127px dish over the card's corner, on a phone under the art's
     own words. Here the card flows: the art (or the title and price) across the top, then one row with
     the button or the phone number at the left and a bigger dish at the right, nothing under anything */
  .food-offer-wrapper-3 .food-offer-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 10px; min-height: 0; }
  .food-offer-wrapper-3 .food-offer-banner .special-thumb, .food-offer-wrapper-3 .food-offer-banner .info-cont { flex: 0 0 100%; margin-bottom: 0; }
  .food-offer-wrapper-3 .food-offer-banner .special-thumb img { max-width: 100%; }
  .food-offer-wrapper-3 .food-offer-banner .info-items { margin-top: 0; flex: 1 1 0; min-width: 0; width: auto; }
  .food-offer-wrapper-3 .food-offer-banner .info-items .number { font-size: 20px; white-space: nowrap; }
  .food-offer-wrapper-3 .food-offer-banner .theme-btn { flex: none; padding: 0 22px; }
  .food-offer-wrapper-3 .food-offer-banner .food-img, .food-offer-wrapper-3 .food-offer-banner .food-img.style-2 { position: static; flex: none; width: 140px; max-width: 140px; height: auto; margin-left: auto; }
  .food-offer-wrapper-3 .food-offer-banner .food-img img { width: 100%; height: auto; display: block; }
}

/* the home page on phones (owner, 2026-09-20: "text and design tidy, the products not small") */
@media (max-width: 767px) {
  /* the story block ("Where quality food meets") and the catering block under it: in the middle */
  .why-choose-us-section-3 .choose-us-content { text-align: center; }
  .why-choose-us-section-3 .choose-us-content .section-title { text-align: center; }
  .why-choose-us-section-3 .choose-us-content .sec-line img { margin: 0 auto; }
  .why-choose-us-section-3 .choose-us-content .choose-button { justify-content: center; text-align: center; }
  .why-choose-us-section-3 .choose-us-content .content { text-align: center; }
  .why-choose-us-section-3 .single-circle-bar { justify-content: center; }
  .why-choose-us-section-3 .single-circle-bar .content { text-align: left; }
  /* the big pale scrolling words: the template's three moving rows land on each other on a phone, so they stay off phones */
  /* the home page's dark footer: everything in the middle, like the inner pages' footer */
  .footer-section.style-3 .footer-top-items-3, .footer-section.style-3 .footer-top-items-3 .footer-left, .footer-section.style-3 .footer-top-items-3 .footer-right { text-align: center; }
  .footer-section.style-3 .footer-top-items-3 .footer-left .footer-logo img { margin: 0 auto; }
  .footer-section.style-3 .footer-top-items-3 .footer-left .footer-contentt form { margin: 0 auto; }
  .footer-section.style-3 .footer-top-items-3 .footer-left .footer-contentt form .form-clt input { text-align: center; }
  .footer-section.style-3 .footer-top-items-3 .footer-left .footer-contentt form .form-clt .theme-btn { margin: 14px auto 0; display: inline-flex; }
  .footer-section.style-3 .footer-top-items-3 .footer-right .app-item, .footer-section.style-3 .footer-top-items-3 .footer-right .app-btn { margin-left: auto; margin-right: auto; justify-content: center; }
  .footer-section.style-3 .footer-widget-items { text-align: center; }
  .footer-section.style-3 .footer-widget-items .widget-head .dashed { margin-left: auto; margin-right: auto; }
  .footer-section.style-3 .footer-widget-items .list-items li, .footer-section.style-3 .footer-widget-items .opening-hours-list li { justify-content: center; }
  .footer-section.style-3 .footer-widget-items .recent-items { justify-content: center; text-align: left; }
  .footer-section.style-3 .footer-widget-items .contact-items a, .footer-section.style-3 .footer-widget-items .contact-items p { display: block; text-align: center; }
  .footer-section.style-3 .footer-widget-items .contact-items i { margin-right: 8px; }
  .footer-section.style-3 .footer-widget-items .footer-content .text { margin-left: auto; margin-right: auto; }   /* the template caps this paragraph at 246px and leaves it at the left */
}
@media (max-width: 404px) { .food-offer-wrapper-3 .food-offer-banner .food-img, .food-offer-wrapper-3 .food-offer-banner .food-img.style-2 { width: 118px; max-width: 118px; } }   /* narrow phones: the phone number and the dish share one row */
@media (max-width: 339px) { .food-offer-wrapper-3 .food-offer-banner .info-items .number { font-size: 16px; } .food-offer-wrapper-3 .food-offer-banner .food-img, .food-offer-wrapper-3 .food-offer-banner .food-img.style-2 { width: 100px; max-width: 100px; } }

/* phones only (owner, 2026-09-20): the "Order Ahead" block in the middle; desktop and laptop untouched */
@media (max-width: 767px) {
  .best-delivery-section-3 .best-delivery-content, .best-delivery-section-3 .best-delivery-content .section-title { text-align: center; }
  .best-delivery-section-3 .best-delivery-content .sec-line img { margin: 0 auto; }
}

/* phones only (owner, 2026-09-20): the Reviews block in the middle; desktop and laptop untouched */
@media (max-width: 767px) {
  .testimonial-wrapper-3 .testimonial-content, .testimonial-wrapper-3 .testimonial-content .section-title { text-align: center; }
  .testimonial-wrapper-3 .testimonial-content .sec-line img { margin: 0 auto; }
  .testimonial-wrapper-3 .testimonial-content .rating-box { flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; }
  .testimonial-wrapper-3 .testimonial-content .rating-box .rating-content { text-align: center; }
  .testimonial-wrapper-3 .testimonial-content .rating-box .rating-image { display: flex; justify-content: center; }
}

/* phones only (owner, 2026-09-20): the menu section's person picture at its own portrait height (the template squares it to 350px) */
@media (max-width: 767px) {
  .best-food-menu-wrapper-3 .food-menu-image-2 { height: auto; }
  .best-food-menu-wrapper-3 .food-menu-image-2 img { height: auto; aspect-ratio: 786 / 1024; max-height: 520px; object-fit: cover; object-position: center top; }   /* a wide phone held sideways still gets a picture, not a wall */
}
@media (max-width: 359px) { .food-offer-wrapper-3 .hot-pizza-image .food-content h2 { font-size: 44px; } }   /* the narrowest phones: Crab Curry still on one line */

/* phones and tablets (owner, 2026-09-20): the Shahi Jhalmuri card like the Healthy Menu card: the words on top,
   the plate big in the middle, the button under it */
@media (max-width: 1199px) {
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) { min-height: 0; align-items: center; align-content: flex-start; }
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .info-cont { order: 1; flex: 0 0 100%; margin: 0; }
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .info-cont h2 { font-size: 42px; line-height: 1; }
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .info-cont h2 br { display: inline; }   /* the template hides every <br> under 992px; the name wants its two lines (owner) */
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .info-cont p { font-size: 15px; }
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .info-cont h3 { font-size: 32px; }
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .food-img, .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .food-img.style-2 { order: 2; position: static; transform: none; flex: 0 0 100%; width: auto; max-width: none; margin: 0; display: flex; justify-content: center; }
  /* the product picture is a square with clear air above and below the plate (15% each): the box is cut
     to the plate's own band so the plate sits right under the words, big, with the white burst of the
     card's art shifted left under it and the button at the right (owner, 2026-09-20) */
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .food-img img { width: 86%; max-width: 340px; aspect-ratio: auto; object-fit: fill; margin: max(-98px, -24%) 0 0; }   /* the whole picture, nothing cut: the slot picture (home-3/rice, 536x546) stands the plate on its floor with 29% clear air above it, and that air is pulled out with the top margin so the plate sits right under the words */
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) { background-position: 78% 50%; }
  .food-offer-wrapper-3 .food-offer-banner:has(.info-cont) .theme-btn { order: 3; flex: 0 0 auto; margin-top: 4px; margin-left: auto; }
}

/* phones and tablets (owner, 2026-09-20): the Healthy Menu card keeps its art on top, then the plate big in the middle, then Call to order under it */
@media (max-width: 1199px) {
  .food-offer-wrapper-3 .food-offer-banner:has(.info-items) .special-thumb { order: 1; }
  .food-offer-wrapper-3 .food-offer-banner:has(.info-items) .food-img, .food-offer-wrapper-3 .food-offer-banner:has(.info-items) .food-img.style-2 { order: 2; position: static; flex: 0 0 100%; width: auto; max-width: none; margin: 4px 0 0; display: flex; justify-content: center; }
  /* bigger, and up under the art: the slot picture (home-3/pizza-3, 454x538) stands the plate on its floor with 20% clear air above it, pulled out with the top margin (owner) */
  .food-offer-wrapper-3 .food-offer-banner:has(.info-items) .food-img img { width: 90%; max-width: 340px; margin-top: max(-79px, -21%); }
  .food-offer-wrapper-3 .food-offer-banner:has(.info-items) .info-items { order: 3; flex: 0 0 100%; }
}

/* phones only (owner, 2026-09-20): the band's words start at the left; nothing else moves */
@media (max-width: 767px) {
  .food-offer-wrapper-3 .hot-pizza-image .food-content h2 { text-align: left; }
}

/* phones and tablets (owner, 2026-09-20): the Today's Special card like the Healthy Menu card: the art on top, the plate big in the middle, the button under it */
@media (max-width: 1199px) {
  .food-offer-wrapper-3 .food-offer-banner:not(:has(.info-items)):not(:has(.info-cont)) .special-thumb { order: 1; }
  .food-offer-wrapper-3 .food-offer-banner:not(:has(.info-items)):not(:has(.info-cont)) .food-img { order: 2; position: static; flex: 0 0 100%; width: auto; max-width: none; margin: 4px 0 0; display: flex; justify-content: center; }
  /* bigger, and up under the art: the slot picture (home-3/burger-3, 536x626) stands the plate on its floor with 28% clear air above it, pulled out with the top margin (owner) */
  .food-offer-wrapper-3 .food-offer-banner:not(:has(.info-items)):not(:has(.info-cont)) .food-img img { width: 90%; max-width: 340px; margin-top: max(-110px, -29%); }
  .food-offer-wrapper-3 .food-offer-banner:not(:has(.info-items)):not(:has(.info-cont)) .theme-btn { order: 3; flex: 0 0 auto; }
}

/* phones only (owner, 2026-09-20): the home momo card's name big, in its two lines (the template hides every <br> under 992px) */
@media (max-width: 767px) {
  .food-banner-items .content .title { font-size: 54px; line-height: 0.95; }
  .food-banner-items .content .title br { display: inline; }
}
@media (max-width: 359px) { .food-banner-items .content .title { font-size: 46px; } }

/* phones only (owner, 2026-09-20): the home momo card keeps its orange splash behind the plate like the PC card (the template hides it under 768px) */
@media (max-width: 767px) {
  .food-banner-items .shape-image { display: block; position: absolute; right: 0; bottom: 0; z-index: -1; width: 96%; max-width: 460px; }
  .food-banner-items .shape-image img { width: 100%; height: auto; display: block; }
}

/* phones only (owner, 2026-09-20): the menu page's best-seller cards keep the picture beside the words
   (the template drops it onto its own line with the words under it) */
@media (max-width: 767px) {
  .best-food-selling-item-4 { flex-wrap: nowrap; align-items: flex-start; gap: 16px; padding: 18px 16px 16px 18px; margin-top: 20px; }
  .best-food-selling-item-4 .thumb { width: 96px; height: 96px; flex: none; }
  .best-food-selling-item-4 .content { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* phones only (owner, 2026-09-20): the menu page's Special Momo card like the home page's: the name big in
   two lines, the plate under the words, the button under the plate, the orange splash kept behind the plate */
@media (max-width: 767px) {
  .best-food-menu-wrap-two { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 40px 30px; }
  .best-food-menu-wrap-two .content { display: contents; }
  .best-food-menu-wrap-two .content .title { font-size: 54px; line-height: 0.95; }
  .best-food-menu-wrap-two .content .title br { display: inline; }
  .best-food-menu-wrap-two .content .text { margin-top: 10px; }
  .best-food-menu-wrap-two .content .price-items { margin-top: 12px; }
  .best-food-menu-wrap-two .rice-image { order: 1; width: 100%; max-width: 344px; margin: 44px auto 0; }
  .best-food-menu-wrap-two .rice-image img { width: 100%; }
  .best-food-menu-wrap-two .content .theme-btn { order: 2; align-self: flex-start; margin-top: 18px; }
  .best-food-menu-wrap-two .bg-shape { display: block; top: auto; bottom: 0; right: 0; height: 58%; }
  .best-food-menu-wrap-two .bg-shape img { height: 100%; width: auto; display: block; }
}
@media (max-width: 359px) { .best-food-menu-wrap-two .content .title { font-size: 46px; } }

/* phones and tablets: the template's three moving rows of pale words land on each other below 992px */
@media (max-width: 991px) { .why-choose-us-section-3 .marquee-section { display: none; } }

/* tablets (owner, 2026-09-21: the iPad pass) */
@media (min-width: 768px) and (max-width: 991px) {
  /* the third offer card no longer sits alone in half the row */
  .food-offer-wrapper-3 .row > [class*="col-"]:nth-child(3) { flex: 0 0 100%; max-width: 100%; }
  /* the Hot and Delicious band: the words and a smaller arrow at the left, the crab bowl at the right, nothing under the arrow */
  .food-offer-wrapper-3 .hot-pizza-image .food-content { justify-content: flex-start; gap: 24px; }
  .food-offer-wrapper-3 .hot-pizza-image .food-content .circle-box { width: 120px; min-width: 120px; height: 120px; }
  .hot-pizza-image .dsf-band-dish { right: 0; height: 72%; }
}
@media (max-width: 991px) {
  /* the best-seller cards' add button on phones and tablets: below the words, never over them (the 44px hit area was pulled up over the description) */
  .best-food-selling-item-4 .content .dsf-add { margin: 6px 0 0; }
}

/* iPad landscape and small laptops (owner, 2026-09-21): the band's arrow sits by the words, the crab bowl at the right, nothing under the arrow */
@media (min-width: 992px) and (max-width: 1199px) {
  .food-offer-wrapper-3 .hot-pizza-image .food-content { justify-content: flex-start; gap: 30px; flex-wrap: nowrap; }
  .food-offer-wrapper-3 .hot-pizza-image .food-content .circle-box { width: 130px; min-width: 130px; height: 130px; }
  .hot-pizza-image .dsf-band-dish { right: 0; height: 78%; }
}

/* client.json "type".zones base: each zone's body/h1..h6 weights inside its elements */
[class*="header"], [class*="topbar"], [class*="main-menu"], [class*="mean-menu"], [class*="mobile-menu"], [class*="homemenu"], [class*="offcanvas"], [class*="footer"] { font-weight: 300; }
.hero-3 .hero-content h1 { font-weight: 700; }
[class*="food-offer-banner"], [class*="food-banner-items"], [class*="best-food-menu-wrap-two"], [class*="special-menu-banner-two"], [class*="feature-box-items"], [class*="special-delivery-box"], [class*="choose-box"], [class*="counter-items"] { font-weight: 500; }
[class*="food-offer-banner"] h1, [class*="food-banner-items"] h1, [class*="best-food-menu-wrap-two"] h1, [class*="special-menu-banner-two"] h1, [class*="feature-box-items"] h1, [class*="special-delivery-box"] h1, [class*="choose-box"] h1, [class*="counter-items"] h1 { font-weight: 700; }
[class*="food-offer-banner"] h2, [class*="food-banner-items"] h2, [class*="best-food-menu-wrap-two"] h2, [class*="special-menu-banner-two"] h2, [class*="feature-box-items"] h2, [class*="special-delivery-box"] h2, [class*="choose-box"] h2, [class*="counter-items"] h2 { font-weight: 600; }
[class*="food-offer-banner"] h3, [class*="food-banner-items"] h3, [class*="best-food-menu-wrap-two"] h3, [class*="special-menu-banner-two"] h3, [class*="feature-box-items"] h3, [class*="special-delivery-box"] h3, [class*="choose-box"] h3, [class*="counter-items"] h3 { font-weight: 600; }
[class*="food-offer-banner"] h4, [class*="food-banner-items"] h4, [class*="best-food-menu-wrap-two"] h4, [class*="special-menu-banner-two"] h4, [class*="feature-box-items"] h4, [class*="special-delivery-box"] h4, [class*="choose-box"] h4, [class*="counter-items"] h4 { font-weight: 600; }
[class*="food-offer-banner"] h5, [class*="food-banner-items"] h5, [class*="best-food-menu-wrap-two"] h5, [class*="special-menu-banner-two"] h5, [class*="feature-box-items"] h5, [class*="special-delivery-box"] h5, [class*="choose-box"] h5, [class*="counter-items"] h5 { font-weight: 600; }
[class*="food-offer-banner"] h6, [class*="food-banner-items"] h6, [class*="best-food-menu-wrap-two"] h6, [class*="special-menu-banner-two"] h6, [class*="feature-box-items"] h6, [class*="special-delivery-box"] h6, [class*="choose-box"] h6, [class*="counter-items"] h6 { font-weight: 600; }