/* ==========================================================================
   MADBLUEZ — hybrid "app mode"
   Desktop keeps the full editorial website. On phones (≤ 768px) the store
   switches to a native-app feel: compact app bar with back button, search
   pill, category "stories", swipe gallery, bottom sheets, sticky action
   bars and a floating tab bar. Works as an installable PWA too.
   ========================================================================== */

/* Desktop / tablet: hide the phone-only pieces */
.mb-appbar, .mb-apphome, .mb-swipe, .mb-appbar-bottom, .mb-applist, .mb-install { display: none; }

@media (max-width: 768px) {
  :root { --mb-header-h: 58px; --mb-app-radius: 18px; }

  html { -webkit-tap-highlight-color: transparent; }
  body { background: var(--mb-cream); padding-bottom: calc(84px + env(safe-area-inset-bottom)); overscroll-behavior-x: none; }
  a, button, input, select, textarea, label { touch-action: manipulation; }
  main { animation: mbFadeIn .3s ease-out; }
  @keyframes mbFadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mbPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* Pressed-state feedback like a native app */
  .mb-btn:active, .mb-iconbtn:active, .mb-card:active, .mb-chip:active, .mb-story:active, .mb-order:active, .mb-accnav a:active, .mb-applist a:active { transform: scale(.97); transition: transform .08s; }

  /* ---------- App bar ---------- */
  .mb-header { background: var(--mb-cream); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--mb-line); padding-top: env(safe-area-inset-top); }
  .mb-header.is-hidden { transform: none; }            /* app bars don't hide */
  .mb-header__bar { display: none; }
  .mb-appbar { display: flex; align-items: center; gap: 4px; height: var(--mb-header-h); padding: 0 8px; }
  .mb-appbar__logo { flex: 1; font-family: var(--mb-serif); font-size: 22px; font-weight: 600; letter-spacing: .28em; color: var(--mb-night); padding-left: 4px; }
  .mb-appbar__logo img { max-height: 34px; width: auto; }
  .mb-appbar__title { flex: 1; min-width: 0; font-family: var(--mb-serif); font-size: 22px; font-weight: 500; color: var(--mb-night); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mb-appbar__actions { display: flex; gap: 2px; margin-left: auto; }
  .mb-announce { font-size: 10px; padding: 7px 12px; letter-spacing: .14em; }

  /* Search opens as a full-screen sheet */
  .mb-search { position: fixed; inset: 0; top: 0; z-index: 100; padding: calc(12px + env(safe-area-inset-top)) 0 20px; overflow-y: auto; border: 0; }
  .mb-search__form { border-bottom: 1px solid var(--mb-line); padding-bottom: 6px; }
  .mb-search__form input { font-size: 22px; }
  .mb-search__results { grid-template-columns: 1fr; }

  /* ---------- Page headings become compact ---------- */
  .mb-pagehead { padding: 18px 0 14px; background: transparent; border: 0; }
  .mb-pagehead h1 { font-size: 30px; }
  .mb-pagehead p { font-size: 13.5px; margin-top: 6px; }
  .mb-pagehead .mb-crumbs, .mb-pagehead .mb-eyebrow { display: none; }
  .mb-pagehead--night { background: var(--mb-night); margin: 0 12px; border-radius: var(--mb-app-radius); padding: 22px 18px; }
  .mb-steps { margin-bottom: 8px; font-size: 9.5px; gap: 8px; }
  .mb-steps b { width: 14px; }
  .mb-section { padding: 34px 0; }
  .mb-section--tight { padding: 24px 0; }
  .mb-head { margin-bottom: 16px; flex-direction: row; align-items: flex-end; }
  .mb-head h2 { font-size: 26px; }
  .mb-head p { display: none; }
  .mb-head .mb-eyebrow { font-size: 9.5px; margin-bottom: 6px; }
  .mb-head .mb-link { font-size: 10px; white-space: nowrap; }

  /* ---------- Home: search pill + stories + card hero ---------- */
  .mb-apphome { display: block; padding: 12px 0 4px; }
  .mb-searchpill { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 0 12px 14px; padding: 13px 16px; border: 1px solid var(--mb-line); border-radius: 30px; background: var(--mb-paper); color: var(--mb-mist); font-size: 14px; text-align: left; box-shadow: var(--mb-shadow-soft); }
  .mb-searchpill .mb-icon { width: 18px; height: 18px; color: var(--mb-brass); }
  .mb-stories { display: flex; gap: 14px; overflow-x: auto; padding: 2px 16px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .mb-stories::-webkit-scrollbar { display: none; }
  .mb-story { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; }
  .mb-story__ring { width: 68px; height: 68px; border-radius: 50%; padding: 2.5px; background: conic-gradient(from 200deg, var(--mb-brass-lite), var(--mb-brass-deep), var(--mb-night), var(--mb-brass-lite)); }
  .mb-story__img { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--mb-night); border: 2.5px solid var(--mb-cream); color: var(--mb-brass-lite); font-family: var(--mb-serif); font-size: 24px; font-style: italic; }
  .mb-story__img--new { font-size: 15px; font-family: var(--mb-sans); font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .mb-story__img img { width: 100%; height: 100%; object-fit: cover; }
  .mb-story small { font-size: 10.5px; font-weight: 600; color: var(--mb-ink); text-align: center; line-height: 1.2; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .is-home .mb-hero { min-height: 62vh; margin: 6px 12px 0; border-radius: 22px; }
  .is-home .mb-hero__content { padding-bottom: 26px; }
  .is-home .mb-hero h1, .is-home .mb-hero .mb-hero-h { font-size: 40px; margin-bottom: 12px; }
  .is-home .mb-hero__text { font-size: 13.5px; margin-bottom: 18px; }
  .is-home .mb-hero__copy .mb-eyebrow { font-size: 9px; }
  .is-home .mb-hero__ctas .mb-btn { min-height: 46px; flex: 1 1 auto; }
  .is-home .mb-hero__ctas .mb-btn--light { display: none; }
  .mb-marquee { margin-top: 14px; }
  .mb-cats { gap: 10px; }
  .mb-cat { border-radius: 16px; }
  .mb-values { border: 0; gap: 10px; grid-template-columns: 1fr 1fr; }
  .mb-value { flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--mb-line) !important; border-radius: 16px; background: var(--mb-paper); }
  .mb-value span { font-size: 12px; }
  .mb-collage { display: none; }
  .mb-stats { margin: 18px 0; padding: 16px 0; }
  .mb-testi blockquote { font-size: 22px; }
  .mb-store { border-radius: 16px; padding: 20px; }
  .mb-festival { margin: 0 12px; border-radius: 22px; }
  .mb-festival__inner { padding: 32px 0; gap: 20px; }

  /* ---------- Product cards & rails ---------- */
  .mb-grid, .mb-grid--3 { gap: 18px 10px; }
  .mb-card__media { border-radius: 14px; }
  .mb-card__info { padding: 10px 2px 0; }
  .mb-card__cat { font-size: 9px; }
  .mb-card__name { font-size: 16px; margin: 2px 0 4px; }
  .mb-price { font-size: 13.5px; gap: 6px; }
  .mb-price s { font-size: 12px; }
  .mb-card__tag { top: 8px; left: 8px; border-radius: 20px; padding: 4px 9px; font-size: 9px; }
  .mb-rail { grid-auto-columns: 46%; gap: 12px; padding: 0 var(--mb-gutter) 6px; margin: 0 calc(-1 * var(--mb-gutter)); scroll-padding: 0 var(--mb-gutter); }
  .mb-reveal { transition-duration: .5s; }

  /* ---------- Shop: sticky toolbar + filters as bottom sheet ---------- */
  .mb-catstrip { padding-top: 10px; }
  .mb-shop { padding: 0 0 30px; }
  .mb-toolbar { position: sticky; top: var(--mb-header-h); z-index: 20; margin: 0 calc(-1 * var(--mb-gutter)) 16px; padding: 10px var(--mb-gutter); background: rgba(246, 241, 232, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--mb-line); flex-wrap: nowrap; }
  .mb-toolbar__count { order: 0; width: auto; font-size: 11px; white-space: nowrap; }
  .mb-toolbar__count b { font-size: 18px; }
  .mb-toolbar .mb-filter-open { order: -1; border-radius: 30px; min-height: 38px; padding: 0 14px; }
  .mb-toolbar .mb-select { flex: 1; }
  .mb-toolbar .mb-select select { width: 100%; min-height: 38px; border-radius: 30px; font-size: 12px; }
  .mb-filters { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 86vh; border-radius: 24px 24px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(105%); box-shadow: 0 -20px 50px -20px rgba(8, 17, 29, .5); }
  .mb-filters::before { content: ''; display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 5px; background: var(--mb-line); }
  .mb-filters.is-open { transform: none; }
  .mb-filters__actions { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); margin: 16px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--mb-cream); border-top: 1px solid var(--mb-line); }
  .mb-active { margin: -4px 0 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mb-pager { margin-top: 30px; }

  /* ---------- Product page: swipe gallery + info sheet ---------- */
  .mb-page-product .mb-crumbs { display: none; }
  .mb-page-product .mb-gallery { display: none; }
  .mb-pdp { display: block; padding: 0 0 20px; }
  .mb-swipe { display: block; position: relative; margin: 0 calc(-1 * var(--mb-gutter)); }
  .mb-swipe__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mb-swipe__track::-webkit-scrollbar { display: none; }
  .mb-swipe__slide { flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: center; background: var(--mb-sand); }
  .mb-swipe__slide img { width: 100%; height: 100%; object-fit: cover; }
  .mb-swipe__dots { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; gap: 6px; }
  .mb-swipe__dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(251, 248, 242, .6); transition: width .3s, background .3s; }
  .mb-swipe__dots i.is-on { width: 18px; background: var(--mb-paper); }
  .mb-swipe .mb-card__tag { top: 14px; left: 14px; }
  .mb-swipe__wish { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(251, 248, 242, .92); display: grid; place-items: center; color: var(--mb-night); }
  .mb-swipe__wish.is-active { color: var(--mb-brass-deep); }
  .mb-swipe__wish .mb-icon { width: 20px; height: 20px; }
  .mb-pdp__info { position: relative; z-index: 2; margin: -22px calc(-1 * var(--mb-gutter)) 0; padding: 22px var(--mb-gutter) 10px; background: var(--mb-cream); border-radius: 24px 24px 0 0; }
  .mb-pdp__info::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--mb-line); }
  .mb-pdp__info h1 { font-size: 28px; margin: 2px 0 8px; }
  .mb-pdp__info .mb-eyebrow { font-size: 9.5px; margin-bottom: 4px; }
  .mb-pdp__price { padding: 12px 0; }
  .mb-pdp__price strong { font-size: 28px; }
  .mb-opt { margin-top: 18px; }
  .mb-sizes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
  .mb-size { flex: none; min-width: 54px; height: 46px; border-radius: 12px; }
  .mb-color { width: 34px; height: 34px; }
  .mb-buy { grid-template-columns: 110px 1fr 50px; }
  .mb-buy .mb-btn, .mb-qty, .mb-wishbig { border-radius: 14px; height: 50px; min-height: 50px; }
  .mb-pincode, .mb-notify, .mb-reviewbox { border-radius: 16px; }
  .mb-trust div { border-radius: 14px; }
  .mb-reviews { gap: 20px; }
  .mb-score { font-size: 60px; }
  .mb-page-product .mb-tabbar { display: none; }
  .mb-page-product .mb-sticky-buy { display: flex; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px -18px rgba(8, 17, 29, .5); }
  .mb-page-product .mb-sticky-buy .mb-btn { border-radius: 14px; }
  .mb-page-product .mb-wa { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mb-page-product .mb-toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mb-modal { align-items: end; padding: 0; }
  .mb-modal__box { width: 100%; border-radius: 24px 24px 0 0; max-height: 86vh; padding-bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateY(40px); }

  /* ---------- Bag & checkout: cards + sticky action bar ---------- */
  .mb-cartwrap { padding: 8px 0 20px; gap: 16px; }
  .mb-line { grid-template-columns: 86px 1fr; gap: 14px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--mb-line); border-radius: 18px; background: var(--mb-paper); }
  .mb-line:first-child { padding-top: 12px; }
  .mb-line__img { border-radius: 12px; }
  .mb-line__name { font-size: 18px; }
  .mb-line__row { gap: 12px; flex-wrap: wrap; }
  .mb-line__row .mb-qty { border-radius: 30px; height: 38px; width: 110px; }
  .mb-summary, .mb-panel { border-radius: 20px; padding: 20px; }
  .mb-summary h3 { font-size: 22px; margin-bottom: 12px; }
  .mb-page-cart .mb-summary > .mb-btn, .mb-page-cart .mb-summary > .mb-help, .mb-page-checkout #pay-button { display: none; }
  .mb-page-cart .mb-tabbar, .mb-page-checkout .mb-tabbar { display: none; }
  .mb-appbar-bottom { display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(251, 248, 242, .97); backdrop-filter: blur(12px); border-top: 1px solid var(--mb-line); border-radius: 22px 22px 0 0; box-shadow: 0 -14px 34px -20px rgba(8, 17, 29, .55); }
  .mb-appbar-bottom small { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-slate); }
  .mb-appbar-bottom strong { font-family: var(--mb-serif); font-size: 24px; font-weight: 500; color: var(--mb-night); line-height: 1.1; }
  .mb-appbar-bottom .mb-btn { flex: 1; border-radius: 14px; min-height: 50px; }
  .mb-page-cart .mb-wa, .mb-page-checkout .mb-wa { display: none; }
  .mb-addr, .mb-payopt { border-radius: 14px; }
  .mb-field input:not([type=checkbox]):not([type=radio]), .mb-field select, .mb-field textarea, .mb-input { border-radius: 12px; font-size: 16px; }

  /* ---------- Account = app menu ---------- */
  .mb-account { padding: 6px 0 20px; gap: 16px; }
  .mb-accnav { display: none; }
  .mb-page-account .mb-accnav, .mb-page-account .mb-applist { display: flex; flex-direction: column; background: var(--mb-paper); border: 1px solid var(--mb-line); border-radius: 20px; overflow: hidden; }
  .mb-page-account .mb-accnav a, .mb-applist a, .mb-applist button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--mb-line); background: none; font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-align: left; white-space: normal; }
  .mb-applist a:last-child, .mb-applist button:last-child, .mb-page-account .mb-accnav a:last-child { border-bottom: 0; }
  .mb-applist .mb-icon:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--mb-mist); }
  .mb-applist .mb-icon:first-child { width: 20px; height: 20px; color: var(--mb-brass); }
  .mb-applist { margin-top: 14px; }
  .mb-applist button[hidden] { display: none; }
  .mb-kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
  .mb-kpi { border-radius: 16px; padding: 14px; }
  .mb-kpi:last-child { grid-column: auto; }
  .mb-kpi b { font-size: 22px; }
  .mb-kpi span { font-size: 8.5px; }
  .mb-order { border-radius: 18px; padding: 16px; }
  .mb-page-account .mb-account { display: flex; flex-direction: column-reverse; }

  /* ---------- Forms / auth / content ---------- */
  .mb-auth { min-height: auto; }
  .mb-auth__art { min-height: 150px; padding: 26px 20px; margin: 10px 12px 0; border-radius: 22px; }
  .mb-auth__art .mb-quote { font-size: 22px; margin: 0; }
  .mb-auth__mono { font-size: 110px; top: 10px; right: 20px; }
  .mb-auth__form { padding: 24px 18px 30px; }
  .mb-contact { padding: 16px 0 30px; gap: 20px; }
  .mb-prose { padding: 16px 0 30px; font-size: 15px; }
  .mb-empty { padding: 50px 10px; }

  /* ---------- Chrome: hide the website footer, float the tab bar ---------- */
  body:not(.is-home) .mb-news, body:not(.is-home) .mb-footer { display: none; }
  .is-home .mb-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 16px; padding-top: 34px; }
  .is-home .mb-footer__grid > div:first-child { grid-column: 1 / -1; }
  .mb-news { margin: 0 12px 16px; border-radius: 22px; }
  .mb-tabbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px; border-radius: 26px;
    background: rgba(14, 26, 43, .94); backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px -14px rgba(8, 17, 29, .7);
  }
  .mb-tabbar a { border-radius: 20px; padding: 8px 0 6px; transition: background .25s, color .25s; }
  .mb-tabbar a.is-active { background: rgba(217, 194, 152, .14); }
  .mb-tabbar .mb-badge { right: calc(50% - 20px); top: 2px; }
  .mb-wa { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mb-toast { left: 12px; right: 12px; width: auto; bottom: calc(92px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .mb-drawer { border-radius: 0 24px 24px 0; }

  /* ---------- Install banner ---------- */
  .mb-install { display: flex; align-items: center; gap: 10px; position: fixed; left: 12px; right: 12px; top: calc(66px + env(safe-area-inset-top)); z-index: 70; padding: 12px; border-radius: 18px; background: var(--mb-night); color: var(--mb-sand); box-shadow: var(--mb-shadow); animation: mbPageIn .4s var(--mb-ease) both; }
  .mb-install[hidden] { display: none; }
  .mb-install__logo { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--mb-brass); color: var(--mb-night); font-family: var(--mb-serif); font-size: 24px; font-weight: 600; }
  .mb-install div { flex: 1; min-width: 0; }
  .mb-install strong { display: block; font-size: 13.5px; color: var(--mb-cream); }
  .mb-install small { font-size: 11.5px; color: var(--mb-mist); }
  .mb-install .mb-iconbtn { color: var(--mb-mist); width: 34px; height: 34px; }
  .mb-install .mb-btn { border-radius: 30px; min-height: 36px; padding: 0 14px; }
}

/* Installed as an app (home-screen icon): no browser chrome, so add status-bar space */
@media (display-mode: standalone) and (max-width: 768px) {
  .mb-announce { padding-top: calc(7px + env(safe-area-inset-top)); }
  .mb-install { display: none !important; }
}
@media (max-width: 768px) {
  .mb-page-shop .mb-pagehead h1, .mb-page-cart .mb-pagehead h1, .mb-page-checkout .mb-pagehead h1 { display: none; }
  .mb-page-shop .mb-pagehead { padding-top: 6px; }
}
@media (max-width: 768px) {
  .mb-sizegrid span, .mb-price-inputs input, .mb-coupon__row input, .mb-coupon__row .mb-btn, .mb-pincode__row input, .mb-pincode__row .mb-btn, .mb-notify__row input { border-radius: 12px; }
  .mb-steps span { white-space: nowrap; }
  .mb-steps span:not(.is-current) { font-size: 0; gap: 0; }
  .mb-steps span:not(.is-current) i { font-size: 11px; }
  .mb-steps b { flex: 1; max-width: 40px; }
}