/* Virtual.Photo mobile-first layer - v0.0143-alpha
   Shared by virtual.photo and ivan.virtual.photo. Loaded last.
   Phones and tablets (< 1024px): compact sticky header, Menu dropdown, swipeable cards, larger text and taps.
   Desktop (>= 1024px): nothing here applies; the existing desktop layout is unchanged. */

/* New elements are hidden on desktop */
.m-menu-btn, .m-menu, .m-actionbar, .m-swipe-hint { display: none; }

@media (max-width: 1023px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  :root {
    --m-night: #0C1548; --m-deep: #081137; --m-tile: #102492; --m-line: #2A3A9E;
    --m-lime: #BDFC19; --m-green: #28C100; --m-magenta: #A70082; --m-soft: #D9DEFF;
    --m-gutter: max(16px, env(safe-area-inset-left, 0px));
    --m-head: 64px;
  }
  html { scroll-padding-top: calc(var(--m-head) + 12px); }

  /* ---------- Header: one compact bar that stays at the top ---------- */
  .topline { display: none !important; }
  header.site, header.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--m-night);
    border-bottom: 1px solid var(--m-line);
    box-shadow: 0 6px 18px #0006;
  }
  header.site .site-nav, header.site-header .site-nav { display: none !important; }

  /* virtual.photo header row */
  header.site .brand-row { gap: 10px; padding-block: 8px; min-height: var(--m-head); }
  header.site .identity { gap: 10px; min-width: 0; }
  header.site .identity img { width: 44px !important; height: 44px !important; }
  header.site .identity b { font-size: 1.35rem; white-space: nowrap; }
  header.site .identity small { display: none; }
  header.site .header-actions { gap: 8px; margin-left: auto; }
  header.site .header-actions .btn { display: none; }
  header.site .help-btn img { width: 44px !important; height: 44px !important; }

  /* ivan.virtual.photo header row */
  header.site-header .brand-row {
    display: flex !important; align-items: center; gap: 10px;
    height: auto !important; min-height: var(--m-head); padding-block: 8px !important;
  }
  header.site-header .identity { gap: 10px; font-size: 1.15rem; min-width: 0; margin-right: auto; }
  header.site-header .identity img { width: 44px !important; height: 44px !important; }
  header.site-header .identity small { display: none; }
  header.site-header .website-qr { display: none !important; }
  header.site-header .header-contact { gap: 0; }
  header.site-header .header-contact img { width: 44px !important; height: 44px !important; }
  header.site-header .header-contact span { display: none; }

  /* Menu button */
  .m-menu-btn {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    min-height: 44px; padding: 8px 14px; border-radius: 10px;
    border: 1.5px solid #ffffff66; background: transparent; color: #fff;
    font: 700 16px/1 "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; cursor: pointer;
  }
  .m-menu-btn[aria-expanded="true"] { background: var(--m-lime); color: var(--m-night); border-color: var(--m-lime); }
  .m-menu-btn svg { width: 20px; height: 20px; }
  .m-menu-btn:focus-visible { outline: 3px solid var(--m-lime); outline-offset: 3px; }

  /* Dropdown menu panel */
  .m-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100dvh - var(--m-head)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--m-deep); border-bottom: 3px solid var(--m-lime);
    box-shadow: 0 24px 40px #000a;
    padding: 8px var(--m-gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .m-menu.open { display: block; }
  .m-menu a, .m-menu summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 54px; padding: 12px 6px; border-bottom: 1px solid var(--m-line);
    color: #fff; text-decoration: none; font: 700 18px/1.3 "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    cursor: pointer;
  }
  .m-menu a:hover, .m-menu summary:hover, .m-menu a[aria-current] { color: var(--m-lime); }
  .m-menu a:focus-visible, .m-menu summary:focus-visible { outline: 3px solid var(--m-lime); outline-offset: -3px; }
  .m-menu summary { list-style: none; }
  .m-menu summary::-webkit-details-marker { display: none; }
  .m-menu summary::after {
    content: ""; width: 10px; height: 10px; flex: none; margin-right: 6px;
    border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px); transition: transform .15s;
  }
  .m-menu details[open] > summary { color: var(--m-lime); }
  .m-menu details[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
  .m-menu details > div { padding: 0 0 8px 14px; border-left: 3px solid var(--m-green); margin: 6px 0 6px 4px; }
  .m-menu details > div a { font-weight: 500; font-size: 17px; min-height: 48px; border-bottom-color: #ffffff18; }
  .m-menu .m-sub { display: block; font: 500 13px/1.4 "DM Sans", system-ui, sans-serif; color: var(--m-soft); margin-top: 2px; }
  .m-menu .m-primary { margin: 16px 0 6px; justify-content: center; border: 0; border-radius: 10px; background: var(--m-lime); color: var(--m-night); }
  .m-menu .m-primary:hover { color: var(--m-night); }
  .m-menu .m-help { display: flex; align-items: center; gap: 12px; padding: 14px 6px 0; color: var(--m-soft); font-size: 15px; }
  .m-menu .m-help a { display: inline; min-height: 0; padding: 0; border: 0; color: var(--m-lime); font-size: 16px; text-decoration: underline; }
  .m-badge { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--m-lime); color: var(--m-night); font-size: 14px; font-weight: 800; }
  body.m-menu-open { overflow: hidden; }

  /* ---------- Swipeable card rows (phones and small tablets) ---------- */
  .m-swipe-hint {
    display: flex; align-items: center; gap: 8px; margin: -6px 0 12px;
    color: var(--m-soft); font: 600 14px/1.3 "DM Sans", system-ui, sans-serif;
  }
  .m-swipe-hint::after { content: "\2192"; color: var(--m-lime); font-size: 18px; }
}

@media (max-width: 767px) {
  /* ---------- Rhythm and type ---------- */
  section { padding-block: 48px; }
  .intro, .video { padding-block: 48px !important; }
  .section-head { margin-bottom: 22px !important; gap: 12px !important; }
  .section-head h2, h2 { font-size: clamp(1.9rem, 8vw, 2.4rem) !important; line-height: 1.12 !important; }
  .lead { font-size: 1.08rem; }
  .eyebrow { font-size: .8rem !important; }
  .shell { width: auto !important; padding-left: var(--m-gutter) !important; padding-right: max(16px, env(safe-area-inset-right, 0px)) !important; }

  /* Hero */
  .hero .hero-grid { padding-block: 28px 36px !important; gap: 24px !important; }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem) !important; margin: 12px 0 14px !important; }
  .hero-actions { gap: 10px !important; margin-top: 22px !important; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-foot { display: none; }

  /* 360 viewers: taller frame on phones, easier controls */
  .sphere, .hero-art.sphere { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; }
  .sphere-caption, .art-caption { font-size: 1.1rem; }
  .sphere-bottom { padding: 48px 12px 12px !important; }

  /* Swipe rows: one card at a time with the next peeking in */
  .m-swipe {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none !important;
    gap: 14px !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--m-gutter);
    margin-inline: calc(-1 * var(--m-gutter)); padding: 4px var(--m-gutter) 14px;
    scrollbar-width: none;
  }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { scroll-snap-align: start; min-width: 0; }
  .mcard-art { aspect-ratio: 1 / 1 !important; object-fit: contain !important; height: auto !important; } /* show the whole artwork: name and price are printed on it */

  /* Card text: nothing smaller than 13px */
  .mcard-meta, .mcard-price small, .package-top, .package-bottom small { font-size: 12.5px !important; }
  .mcard-price .tax, .package .tax { font-size: 13px !important; }
  .mcard .mcard-desc { font-size: 16px !important; }
  .mcard h3 { font-size: 24px !important; }
  .fine { font-size: 15px !important; }

  /* virtual.photo blocks */
  .doors { gap: 12px !important; }
  .door { padding: 20px !important; }
  .package { padding: 22px !important; }
  .count { font-size: 4rem !important; }
  .row { gap: 12px !important; padding-block: 16px !important; }
  .featured-ph { padding: 20px !important; gap: 18px !important; }
  .platform-grid, .levels-3, .kit, .compare { gap: 12px !important; }
  .contact-grid { gap: 28px !important; }
  form.vp-form { padding: 20px !important; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zooming into fields */
  footer.site { padding-block: 40px calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  .foot-grid { gap: 24px !important; }
  .legal { flex-direction: column; }

  /* ivan.virtual.photo blocks */
  .hero-copy p, .section-head p, .intro p, .contact-wrap p, .review-promo p, .contact-form p { font-size: 16px !important; line-height: 1.6 !important; }
  .hero .hero-actions a { font-size: 16px !important; }
  .intro { display: block !important; }
  .intro-brand img, .globe-mark { width: 96px !important; height: 96px !important; }
  .hero .help-link img { width: 64px !important; height: 64px !important; }
  .contact-wrap { padding-block: 48px !important; }
  .review-promo { padding-block: 40px !important; }
  .review-promo .button { display: flex; justify-content: center; min-height: 52px; }
  .site-footer { flex-direction: column; gap: 12px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ---------- Bottom action bar ---------- */
  .m-actionbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px max(12px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
    background: #081137f2; border-top: 1px solid var(--m-line);
    box-shadow: 0 -10px 24px #0007;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .m-actionbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; border-radius: 10px; text-decoration: none;
    font: 800 16px/1.2 "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    border: 2px solid #ffffffaa; color: #fff;
  }
  .m-actionbar a.m-go { background: var(--m-lime); border-color: var(--m-lime); color: var(--m-night); }
  .m-actionbar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  body.m-menu-open .m-actionbar { display: none; }
  #cart-notice { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (min-width: 768px) and (max-width: 1023px), (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1366px) {
  /* Tablets: two cards per view */
  .m-swipe {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: calc(50% - 8px); grid-template-columns: none !important;
    gap: 16px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin;
  }
  .m-swipe > * { scroll-snap-align: start; min-width: 0; }
  .m-swipe-hint { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .m-menu summary::after { transition: none; }
}

.m-menu a.m-two{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}