@charset "UTF-8";

/* =============================================================================
   Babuka - Restaurant & Fast Food HTML Template
   Responsive stylesheet
   Author : ThemeDevo
   Version: 1.0.0
   -----------------------------------------------------------------------------
   Load this file AFTER style.css.

   Breakpoints (mobile last - the base styles are the desktop composition):
     01. 1920px and up ....... large desktop
     02. 1400px - 1599px ..... desktop
     03. 1200px - 1399px ..... small desktop / large laptop
     04. 992px  - 1199px ..... laptop
     05. 768px  - 991px ...... tablet  (main navigation collapses here)
     06. 576px  - 767px ...... large mobile
     07. up to 575px ......... mobile
     08. up to 374px ......... small mobile
     09. landscape phones
     10. print
   ========================================================================== */

/* =============================================================================
   01. LARGE DESKTOP - 1920px and up
   -----------------------------------------------------------------------------
   Give the widest screens a little more air rather than an endless line length.
   ========================================================================== */
@media (min-width: 1920px) {
  :root {
    --bb-section-y: 8.5rem;
    --bb-container-pad: 2.5rem;
  }
  .bb-hero--cinema { min-height: 880px; }
  .bb-gallery-grid { gap: var(--bb-space-5); }
}

/* =============================================================================
   02. DESKTOP - 1400px to 1599px
   ========================================================================== */
@media (max-width: 1599.98px) {
  .bb-hero__seal { right: 0; }
  .bb-mega { width: min(820px, calc(100vw - 3rem)); }
}

/* =============================================================================
   03. SMALL DESKTOP - up to 1399px
   ========================================================================== */
@media (max-width: 1399.98px) {
  :root { --bb-header-h: 82px; }

  .bb-nav__link { padding-inline: 0.7rem; }
  .bb-hero__media-sub { left: -4%; width: 42%; }
  .bb-seal { width: 116px; height: 116px; }
  .bb-stat-strip { padding: var(--bb-space-7); }
  .bb-testimonial-feature { grid-template-columns: 0.9fr 1.1fr; }
}

/* =============================================================================
   04. LAPTOP - up to 1199px
   ========================================================================== */
@media (max-width: 1199.98px) {
  :root { --bb-header-h: 78px; }

  /* Navigation gets tight before it collapses - drop the label spacing */
  .bb-nav__list { gap: 0; }
  .bb-nav__link { padding-inline: 0.55rem; font-size: 0.875rem; }
  .bb-header__actions { gap: 0.4rem; }
  .bb-header__action { width: 42px; height: 42px; }

  .bb-mega { width: min(720px, calc(100vw - 2.5rem)); }
  .bb-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-mega__promo { display: none; }

  /* Hero */
  .bb-hero--classic .bb-hero__grid { grid-template-columns: 1fr 0.9fr; }
  .bb-hero__seal { display: none; }
  .bb-hero__media-sub { width: 46%; border-width: 6px; }

  /* Grids that need one fewer column */
  .bb-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bb-space-7); }
  .bb-stat-strip .bb-stat:nth-child(odd) { border-left: 0; }

  .bb-blog-row { gap: var(--bb-space-6); }
  .bb-combo-card { padding: var(--bb-space-6); }
  .bb-author-box { gap: var(--bb-space-5); }
  .bb-author-box img { width: 92px; height: 92px; }
}

/* =============================================================================
   05. TABLET - up to 991px
   -----------------------------------------------------------------------------
   The desktop navigation is replaced by the off-canvas menu at this width.
   ========================================================================== */
@media (max-width: 991.98px) {
  :root {
    --bb-header-h: 72px;
    --bb-section-y: clamp(3.25rem, 2.4rem + 4vw, 4.5rem);
  }

  /* -- Header ------------------------------------------------------------ */
  .bb-nav { display: none; }
  .bb-burger { display: grid; }
  .bb-header__inner { gap: var(--bb-space-4); }
  .bb-header__actions { margin-left: auto; }
  .bb-header__actions .bb-btn { display: none; }
  .bb-topbar__inner { justify-content: center; text-align: center; }
  .bb-topbar__list--secondary { display: none; }

  /* -- Journey rail ------------------------------------------------------ */
  /* The connecting track only reads as one once all four stops share a row,
     so below that it is dropped rather than left running between two of them. */
  .bb-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-journey::before { display: none; }

  /* -- Hero: single column, media first on tall screens ------------------ */
  .bb-hero--classic .bb-hero__grid,
  .bb-hero--express .bb-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--bb-space-8);
  }
  .bb-hero--classic .bb-hero__media,
  .bb-hero--express .bb-hero__media { order: -1; max-width: 560px; margin-inline: auto; width: 100%; }
  .bb-hero__text { margin-inline: auto; }
  .bb-hero--classic .bb-hero__body,
  .bb-hero--express .bb-hero__body { text-align: center; }
  .bb-hero--classic .bb-hero__actions,
  .bb-hero--express .bb-hero__actions,
  .bb-hero__proof,
  .bb-countdown { justify-content: center; }
  .bb-hero--classic .bb-kicker,
  .bb-hero--express .bb-kicker { justify-content: center; }
  .bb-hero--classic .bb-kicker::before { display: none; }
  .bb-hero__media-sub { display: none; }
  .bb-hero__media-main { border-radius: var(--bb-radius-xl); }
  .bb-hero--cinema { min-height: auto; }
  .bb-hero--cinema .bb-hero__inner { padding-block: calc(var(--bb-header-h) + 3rem) var(--bb-space-9); }
  .bb-scroll-cue { display: none; }

  /* -- Sections ---------------------------------------------------------- */
  .bb-section-head { max-width: none; }
  .bb-section-head-row { align-items: flex-start; }
  .bb-newsletter__grid { grid-template-columns: 1fr; gap: var(--bb-space-6); text-align: center; }
  .bb-newsletter__grid .bb-kicker { justify-content: center; }
  .bb-newsletter__grid .bb-kicker::before { display: none; }

  .bb-testimonial-feature { grid-template-columns: 1fr; }
  .bb-testimonial-feature__media { max-width: 460px; margin-inline: auto; }

  .bb-combo-card { grid-template-columns: 1fr; text-align: center; }
  .bb-combo-card__media { order: -1; max-width: 340px; margin-inline: auto; }

  /* -- Timeline becomes a single left aligned rail ----------------------- */
  .bb-timeline::before { left: 38px; }
  .bb-timeline__item,
  .bb-timeline__item--flip {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--bb-space-5);
    align-items: start;
  }
  .bb-timeline__marker { justify-self: start; box-shadow: 0 0 0 6px var(--bb-cream); }
  .bb-timeline__panel,
  .bb-timeline__item--flip .bb-timeline__panel { order: 0; grid-column: 2; }
  .bb-timeline__media { grid-column: 2; margin-top: var(--bb-space-4); }

  /* -- Shop / cart ------------------------------------------------------- */
  .bb-summary { position: static; }
  .bb-shop-toolbar { justify-content: center; }

  /* -- Blog -------------------------------------------------------------- */
  .bb-blog-row { grid-template-columns: 1fr; }
  .bb-post-feature { min-height: 380px; padding: var(--bb-space-6); }
  .bb-post-nav { grid-template-columns: 1fr; }

  /* -- Gallery ----------------------------------------------------------- */
  .bb-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The feature tile stops being a feature once there are only two columns:
     spanning it would make seven cells across two columns and leave a hole in
     the last row, where six equal tiles fill three rows exactly. */
  .bb-gallery-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 26vw, 240px); }
  .bb-gallery-mosaic > :first-child { grid-column: span 1; grid-row: span 1; }

  /* -- Footer ------------------------------------------------------------ */
  .bb-footer__bottom-inner { justify-content: center; text-align: center; }
}

/* =============================================================================
   06. LARGE MOBILE - up to 767px
   ========================================================================== */
@media (max-width: 767.98px) {
  :root {
    --bb-fs-lead: 1rem;
    --bb-section-y: 3.25rem;
    --bb-section-y-sm: 2.5rem;
  }

  .bb-topbar { display: none; }

  .bb-express-media { grid-template-columns: 1fr; }
  .bb-express-media > * { height: clamp(200px, 52vw, 280px); }

  /* Type scale calms down so headlines never overflow */
  h1, .bb-h1 { letter-spacing: -0.01em; }
  .bb-display { line-height: 1.02; }

  .bb-hero--classic,
  .bb-hero--express { padding-block: var(--bb-space-8); }
  .bb-hero__proof { gap: var(--bb-space-4); }

  .bb-chip--float { position: static; margin-top: var(--bb-space-4); }

  /* Stays floated (unlike .bb-chip--float) instead of dropping to static:
     static flow would land it right where the second collage photo bleeds
     past the main photo's bottom edge, and the two would overlap. The
     max-width clamp in style.css keeps it from ever overflowing the photo. */
  .bb-ticket--about { left: var(--bb-space-4); top: var(--bb-space-4); transform: rotate(-2deg); }

  /* Cards */
  .bb-feature-card { padding: var(--bb-space-6); }
  .bb-testimonial { padding: var(--bb-space-6); }
  .bb-dish-card__foot { flex-direction: column; align-items: stretch; }
  .bb-dish-card__foot .bb-btn { width: 100%; }

  /* Menu list drops the thumbnail column */
  .bb-menu-item { grid-template-columns: 64px 1fr; grid-template-areas: "media body" "media body"; }
  .bb-menu-item__media { width: 64px; height: 64px; }
  .bb-menu-item__price { grid-column: 2; justify-self: start; margin-top: 0.35rem; }
  .bb-menu-item__leader { display: none; }

  /* Statistics stack in a 2 column card */
  .bb-stat-strip { padding: var(--bb-space-6); gap: var(--bb-space-5); }
  .bb-stat-strip .bb-stat { border-left: 0 !important; }

  /* Product detail */
  .bb-product-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .bb-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bb-tabs::-webkit-scrollbar { display: none; }
  .bb-tab { white-space: nowrap; }

  /* Cart / checkout */
  .bb-cart-actions { flex-direction: column; align-items: stretch; }
  .bb-cart-actions > * { width: 100%; }
  .bb-cart-actions .bb-inline-form .bb-btn { width: auto; }

  /* Article */
  .bb-quote { padding: var(--bb-space-6); }
  .bb-article__footer { flex-direction: column; align-items: flex-start; }
  .bb-author-box { flex-direction: column; text-align: center; }
  .bb-author-box .bb-socials { justify-content: center; }
  .bb-comment--reply { margin-left: var(--bb-space-6); }

  /* Reservation card */
  .bb-reserve-card { padding: var(--bb-space-6); }

  /* Lightbox controls move to the bottom corners for thumb reach */
  .bb-lightbox__prev { left: 1rem; top: auto; bottom: 1rem; transform: none; }
  .bb-lightbox__next { right: 1rem; top: auto; bottom: 1rem; transform: none; }
  .bb-lightbox__counter { bottom: 1.9rem; }
  .bb-lightbox__img { max-height: 60vh; }
}

/* =============================================================================
   07. MOBILE - up to 575px
   ========================================================================== */
@media (max-width: 575.98px) {
  :root {
    --bb-header-h: 66px;
    --bb-radius-lg: 20px;
    --bb-radius-xl: 24px;
  }

  .bb-logo__mark { width: 36px; height: 36px; }
  .bb-logo__text { font-size: 1.4rem; }
  .bb-header__action { width: 40px; height: 40px; font-size: 0.95rem; }
  .bb-burger { width: 42px; height: 42px; }

  /* Only the cart and burger survive in the top bar on the smallest screens */
  .bb-header__action--search { display: none; }

  .bb-btn { padding: 0.85rem 1.4rem; }
  .bb-btn--lg { padding: 1rem 1.7rem; font-size: var(--bb-fs-sm); }
  .bb-hero__actions { width: 100%; }
  .bb-hero__actions .bb-btn { flex: 1 1 100%; }

  .bb-section-head { margin-bottom: var(--bb-space-6); }
  .bb-eyebrow { font-size: 1.35rem; }

  .bb-gallery-grid { grid-template-columns: 1fr; }
  .bb-gallery-mosaic { grid-template-columns: 1fr; grid-auto-rows: clamp(200px, 55vw, 300px); }
  .bb-gallery-mosaic > :first-child { grid-column: span 1; }

  .bb-journey { grid-template-columns: 1fr; gap: var(--bb-space-5); }

  .bb-stat-strip { grid-template-columns: 1fr; }
  .bb-hero__meta { gap: var(--bb-space-5); }

  .bb-filters { gap: 0.4rem; }
  .bb-filter { padding: 0.55rem 1rem; font-size: var(--bb-fs-xs); }

  .bb-timeline::before { left: 26px; }
  .bb-timeline__item,
  .bb-timeline__item--flip { grid-template-columns: 54px minmax(0, 1fr); gap: var(--bb-space-4); }
  .bb-timeline__marker { width: 54px; height: 54px; font-size: 0.8rem; box-shadow: 0 0 0 4px var(--bb-cream); }
  .bb-timeline__panel { padding: var(--bb-space-5); }

  .bb-accordion__trigger { padding: 1rem 1.1rem; font-size: 1rem; }
  .bb-accordion__body { padding: 0 1.1rem 1.1rem; }

  .bb-table th, .bb-table td { padding: var(--bb-space-4); }
  .bb-table__product img { width: 68px; height: 68px; }

  .bb-summary { padding: var(--bb-space-6); }
  .bb-steps { gap: var(--bb-space-4); }
  .bb-steps__item { font-size: var(--bb-fs-xs); }

  .bb-post-feature { min-height: 320px; }
  .bb-blog-card__body { padding: var(--bb-space-5); }

  .bb-mobile-menu { padding: var(--bb-space-5); }
  .bb-drawer { width: 100vw; }

  .bb-404__number { flex-direction: column; gap: 0.5rem; }
  .bb-404__plate { width: 8rem; }

  .bb-inline-form { flex-direction: column; }
  .bb-inline-form .bb-btn { width: 100%; }

  .bb-footer__list li + li { margin-top: 0.5rem; }
}

/* =============================================================================
   08. SMALL MOBILE - up to 374px
   ========================================================================== */
@media (max-width: 374.98px) {
  :root { --bb-container-pad: 0.9rem; }

  .bb-logo__text { font-size: 1.25rem; }
  .bb-header__actions { gap: 0.3rem; }
  .bb-header__action--wishlist { display: none; }

  .bb-btn { font-size: 0.8125rem; padding: 0.8rem 1.15rem; }
  .bb-qty button { width: 36px; }
  .bb-qty input { width: 40px; }

  .bb-countdown__unit { min-width: 62px; }
  .bb-avatars img { width: 40px; height: 40px; }
  .bb-play { width: 62px; height: 62px; font-size: 1.15rem; }

  .bb-product-gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-review { flex-direction: column; }
  .bb-comment { flex-direction: column; }

  .bb-ticket--about { left: var(--bb-space-3); top: var(--bb-space-3); max-width: calc(100% - 1.5rem); transform: none; }
  .bb-ticket__stub { width: 44px; font-size: 1.1rem; }
  .bb-ticket__value { font-size: 1.5rem; }
  .bb-ticket__label { font-size: 0.7rem; }
}

/* =============================================================================
   09. LANDSCAPE PHONES
   -----------------------------------------------------------------------------
   Short viewports should not be forced to scroll through a full height hero.
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .bb-hero--cinema { min-height: auto; }
  .bb-404 { min-height: auto; padding-block: var(--bb-space-9); }
  .bb-mobile-menu { padding-block: var(--bb-space-4); }
}

/* =============================================================================
   10. PRINT
   ========================================================================== */
@media print {
  .bb-topbar,
  .bb-header,
  .bb-footer,
  .bb-to-top,
  .bb-preloader,
  .bb-backdrop,
  .bb-mobile-menu,
  .bb-drawer,
  .bb-search,
  .bb-lightbox,
  .bb-marquee,
  .bb-toasts { display: none !important; }

  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .bb-section { padding-block: 1.5rem; }
  [data-bb-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}