/* =========================================================
   MANTIQTI storefront — layout glue for the Blade templates.
   mantiqti.css (from the design) holds tokens and components;
   this file joins its phone screens and desktop layout into one
   responsive page. Breakpoint: 900px.
   ========================================================= */

body.mq { min-height: 100vh; display: flex; flex-direction: column; }
.mq-main { flex: 1; width: 100%; }
.mq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mq a { -webkit-tap-highlight-color: transparent; }
.mq-img img, .mq-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-img img { position: absolute; inset: 0; }
.mq-avatar { overflow: hidden; }
.mq-avatar--img { background: var(--mq-surface); border: 1px solid var(--mq-line); }
.mq-search button[type="submit"] { display: none; }
.mq-btn .mq-price small { color: inherit; opacity: .85; }
/* Store card: shop photo on top, logo and name below. */
.mq-store-card--cover { padding: 0; gap: 0; overflow: hidden; }
.mq-store-card__cover { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.mq-store-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mq-store-card__cover .mq-ic { opacity: .75; stroke-width: 1.6; }
.mq-store-card__body { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; min-width: 0; }
.mq-store-card__body .mq-store-card__name { line-height: 1.4; }

/* Store page: the shop photo across the top. */
.mq-store-cover { position: relative; aspect-ratio: 16 / 7; background: var(--mq-surface-2); }
.mq-store-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mq-pager { display: flex; justify-content: center; gap: 8px; padding: 8px 0 16px; }

/* Bars the design draws inside a phone frame stick to the viewport here. */
.mq-header, .mq-topbar { position: sticky; top: 0; z-index: 10; }
.mq-bottomnav, .mq-bottombar, .mq-cartbar { position: fixed; bottom: 0; inset-inline: 0; margin: 0 auto; max-width: 600px; z-index: 20; }
.mq-bottomnav, .mq-bottombar { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.mq-has-bottomnav .mq-main { padding-bottom: 84px; }
.mq-has-bottombar .mq-main { padding-bottom: 96px; }
.mq-footer { padding-bottom: 28px; }

/* Phone: one centred column. */
.mq-main, .mq-header, .mq-topbar { max-width: 600px; margin-inline: auto; width: 100%; }
.mq-desktop, .mq-desktop-inline { display: none; }
.mq-region { text-decoration: none; }

/* Product gallery: swipe on phones. */
.mq-gallery-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%; width: 100%; }
.mq-gallery-strip::-webkit-scrollbar { display: none; }
.mq-gallery-strip > * { flex: 0 0 100%; scroll-snap-align: center; position: relative; }
.mq-product-hero { position: relative; height: 375px; flex: none; }
.mq-product-hero__bar { position: absolute; top: 12px; inset-inline: 12px; display: flex; justify-content: space-between; z-index: 2; }
.mq-product-hero__bar .mq-iconbtn { background: #FFFFFF; border-radius: 50%; box-shadow: var(--mq-shadow); }

@media (min-width: 900px) {
  .mq-mobile { display: none !important; }
  .mq-desktop { display: block; }
  .mq-desktop-inline { display: inline; }
  .mq-main { max-width: 1200px; padding-inline: 24px; }
  .mq-has-bottomnav .mq-main, .mq-has-bottombar .mq-main { padding-bottom: 32px; }
  .mq-section { padding-inline: 0; }
  .mq-stores { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .mq-products { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
  .mq-bottombar { position: static; box-shadow: none; border: 0; padding: 0; background: transparent; max-width: none; }
  .mq-cartbar { max-width: 560px; }

  /* Product page: picture beside the details. */
  .mq-product-layout { background: transparent !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 32px 0; align-items: start; }
  .mq-product-hero { height: auto; aspect-ratio: 1 / 1; border-radius: var(--mq-r-xl); overflow: hidden; }
  .mq-product-hero__bar { display: none; }

  /* Store header: wider, actions inline. */
  .mq-store-head { border: 1px solid var(--mq-line); border-radius: var(--mq-r-xl); margin-top: 24px; }
  .mq-store-cover { aspect-ratio: 16 / 5; border-radius: var(--mq-r-xl); overflow: hidden; margin-top: 24px; }
  .mq-store-cover + .mq-store-head { margin-top: 16px; }
  .mq-store-head__actions { max-width: 360px; }

  .mq-footer { padding: 40px max(24px, calc((100% - 1152px) / 2)); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .mq-footer__links { display: flex; gap: 24px; }
}

/* Account, sign-in and support pages: one readable column. */
.mq-auth { max-width: 480px; margin: 0 auto; padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 20px; }
select.mq-input { appearance: auto; }

/* Dialogs sit over the whole page (the design scoped this to .mq-page). */
.mq-backdrop { position: fixed; inset: 0; z-index: 50; justify-content: center; }
.mq-sheet { max-width: 600px; }
@media (min-width: 640px) {
  .mq-backdrop { align-items: center; }
  .mq-sheet { border-radius: 24px; max-width: 440px; }
  .mq-sheet__grip { display: none; }
}
.mq-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.mq-option { position: relative; }
.mq-option--on .mq-radio { border-color: var(--mq-primary); }
.mq-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mq-upload { position: relative; cursor: pointer; }
.mq-line form { margin: 0; }
.mq-col { max-width: 640px; margin: 0 auto; padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 14px; }

/* Admin-written page text. */
.mq-prose { color: var(--mq-ink-2); line-height: 1.8; }
.mq-prose h2, .mq-prose h3 { color: var(--mq-ink); font-family: var(--mq-display); margin: 18px 0 6px; }
.mq-prose p, .mq-prose ul, .mq-prose ol { margin: 0 0 10px; }
.mq-prose a { color: var(--mq-primary); }

/* Ad space: 2:1 on phones, 4:1 on desktop. */
.mq-banner-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; border-radius: var(--mq-r-lg); }
.mq-banner-strip::-webkit-scrollbar { display: none; }
.mq-banner { flex: 0 0 100%; scroll-snap-align: center; display: block; border-radius: var(--mq-r-lg); overflow: hidden; aspect-ratio: 2 / 1; background: var(--mq-surface-2); }
.mq-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-banner-dots { display: flex; justify-content: center; gap: 6px; }
.mq-banner-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--mq-line); transition: width .2s; }
.mq-banner-dots span.is-on { width: 18px; background: var(--mq-primary); }
@media (min-width: 900px) { .mq-banner { aspect-ratio: 4 / 1; } }