/**
 * Maker's Nook — site-wide responsive layer.
 * Shared breakpoints + cross-page fixes. Does not replace page CSS;
 * supplements it for overflow, reflow gaps, and mobile Safari quirks.
 *
 * Breakpoints (align with audit viewports):
 *   sm  ≤430px   phone
 *   md  ≤767px   large phone / small tablet
 *   tb  ≤1023px  tablet
 *   lg  ≤1279px  small desktop
 *
 * @package WoodmartChild
 */

:root {
  --mn-bp-sm: 430px;
  --mn-bp-md: 767px;
  --mn-bp-tb: 1023px;
  --mn-bp-lg: 1279px;
  --mn-page-pad: clamp(16px, 4vw, 40px);
  --mn-section-pad: clamp(40px, 8vw, 96px);
  --mn-tap-min: 44px;
}

/* -------------------------------------------------------------------------
   Global — prevent horizontal scroll & respect safe areas
   ------------------------------------------------------------------------- */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

.mn-home img,
.mn-sa img,
.mn-pdp-page img,
.mn-sl img,
.mn-ft img,
.mn-vd-shell img,
.mn-admin img,
.mn-qr-view img,
.woocommerce img {
  max-width: 100%;
  height: auto;
}

/* WoodMart / Elementor containers */
.wd-page-wrapper,
.website-wrapper,
.site-content,
.entry-content,
.elementor-section,
.e-con {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   Header / navigation (full shopping shell)
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .whb-header .whb-row,
  .whb-main-header .whb-row {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }

  .whb-header .wd-header-nav,
  .whb-header .wd-header-secondary-nav {
    max-width: 100%;
  }
}

@media (max-width: 430px) {
  .whb-header .site-logo img,
  .whb-header .wd-logo img {
    max-height: 36px;
    width: auto;
  }

  .sticky-toolbar-on .wd-toolbar,
  .sticky-toolbar-on .sticky-toolbar {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* -------------------------------------------------------------------------
   Auth / My Account — ROOT FIX: collapse Elementor hero chrome
   Live My Account pages often retain Elementor sections (image/hero/spacer)
   with min-height while individual widgets are hidden → blank gap on mobile.
   ------------------------------------------------------------------------- */

body.mn-shell-auth.mn-login-screen .elementor-section:not(:has(.woocommerce)):not(:has(.mn-auth-centre)),
body.mn-shell-auth.mn-login-screen .e-con:not(:has(.woocommerce)):not(:has(.mn-auth-centre)),
body.mn-shell-auth.mn-register-screen .elementor-section:not(:has(.woocommerce)):not(:has(.mn-auth-centre)):not(:has(.mn-auth-register)),
body.mn-shell-auth.mn-register-screen .e-con:not(:has(.woocommerce)):not(:has(.mn-auth-centre)):not(:has(.mn-auth-register)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  border: 0 !important;
}

body.mn-login-screen .elementor-widget-image,
body.mn-login-screen .elementor-widget-video,
body.mn-login-screen .elementor-widget-slides,
body.mn-login-screen .elementor-widget-media-carousel,
body.mn-login-screen .elementor-widget-theme-post-featured-image,
body.mn-login-screen .elementor-widget-spacer,
body.mn-login-screen .elementor-widget-divider,
body.mn-register-screen .elementor-widget-image,
body.mn-register-screen .elementor-widget-spacer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.mn-shell-auth .wd-page-title,
body.mn-shell-auth .page-title,
body.mn-shell-auth .title-wrapper,
body.mn-shell-auth .title-container,
body.mn-shell-auth .wd-page-title-header,
body.mn-shell-auth .entry-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

body.mn-shell-auth .wd-content-area,
body.mn-shell-auth .site-content,
body.mn-shell-auth .entry-content,
body.mn-shell-auth .woocommerce {
  min-height: 0 !important;
}

body.mn-shell-auth .main-page-wrapper,
body.mn-shell-auth .wd-page-content,
body.mn-shell-auth .wd-content-layout {
  min-height: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 767px) {
  .mn-auth-centre {
    padding: 20px var(--mn-page-pad) 40px;
  }

  .mn-auth-centre__card {
    padding: 32px 22px;
    border-radius: 22px;
  }

  body.mn-auth-screen .mn-auth-formhead h1,
  body.mn-login-screen .mn-auth-formhead h1,
  body.mn-register-screen .mn-auth-formhead h1,
  .mn-auth-formhead h1 {
    font-size: 29px !important;
  }

  .mn-auth-register-page {
    padding: 32px var(--mn-page-pad) 48px;
  }
}

/* Safari dynamic viewport — avoid phantom full-screen gaps on auth doors */
@supports (min-height: 100dvh) {
  body.mn-become-maker-screen .website-wrapper {
    min-height: 100dvh;
  }

  .mn-doors {
    min-height: 100dvh;
  }
}

/* -------------------------------------------------------------------------
   Homepage (below-hero body)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.mn-homepage-screen .mn-home__wrap {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }

  body.mn-homepage-screen .mn-home__crafts,
  body.mn-homepage-screen .mn-home__pieces {
    grid-template-columns: 1fr;
  }

  body.mn-homepage-screen .mn-home__final h2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  body.mn-homepage-screen .mn-home__sec {
    padding: var(--mn-section-pad) 0;
  }
}

@media (max-width: 430px) {
  body.mn-homepage-screen .mn-home__mk-big {
    min-height: 280px;
  }
}

/* -------------------------------------------------------------------------
   Shop archive + product grids
   ------------------------------------------------------------------------- */

@media (max-width: 430px) {
  body.mn-sa-screen .mn-sa__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.mn-sa-screen .mn-sa__wrap {
    padding: 0 var(--mn-page-pad) !important;
  }

  body.mn-sa-screen .mn-sa__head h1 {
    font-size: clamp(26px, 7vw, 32px) !important;
  }
}

/* -------------------------------------------------------------------------
   Product page
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.mn-pdp-page .mn-pdp-page {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }
}

/* -------------------------------------------------------------------------
   Store directory + maker storefront (Dokan)
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body.mn-store-listing-screen .mn-sl__wrap {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }

  body.mn-store-listing-screen .mn-sl__grid {
    grid-template-columns: 1fr;
  }

  body.dokan-store .dokan-store-wrap,
  body.dokan-store .dokan-single-store {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }
}

/* -------------------------------------------------------------------------
   Cart + checkout
   ------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  body.mn-checkout-page .mn-co__g,
  body.mn-cart-page .mn-cart__g {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  body.mn-checkout-page .mn-co__wrap,
  body.mn-cart-page .mn-cart__wrap {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }

  body.mn-checkout-page .mn-co .field,
  body.mn-checkout-page .mn-co .input-text,
  body.mn-checkout-page .mn-co select {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
}

/* -------------------------------------------------------------------------
   Content pages (Nook Notes, Become a Maker, etc.)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .mn-nn__wrap,
  .mn-bam__wrap,
  .mn-dl__wrap,
  .mn-rr__wrap,
  .mn-fp__wrap,
  .mn-mg__wrap,
  .mn-ct__wrap {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }

  .mn-bam__hero-g,
  .mn-dl__hero-g {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body.mn-nook-note-upload-page .mn-nnu {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }

  body.mn-nook-note-upload-page .mn-nnu .card {
    padding: 24px 20px;
  }
}

/* -------------------------------------------------------------------------
   QR viewer
   ------------------------------------------------------------------------- */

@media (max-width: 430px) {
  .mn-qr-view {
    padding: 24px var(--mn-page-pad) 32px;
    border-radius: 12px;
  }

  .mn-qr-view__media--pdf {
    height: min(70dvh, 70vh);
    min-height: 240px;
  }
}

/* -------------------------------------------------------------------------
   Vendor + admin dashboards
   ------------------------------------------------------------------------- */

.mn-vd-shell {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 1023px) {
  .mn-vd-table-scroll,
  .mn-vd-orders-table,
  .woocommerce-orders-table,
  .shop_table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Sidebar off when bottom nav is on — avoids dual-nav + shell overflow */
  .mn-vd-sidebar {
    display: none !important;
  }

  .mn-vd-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mn-vd-wrap {
    padding-left: var(--mn-page-pad);
    padding-right: var(--mn-page-pad);
  }

  .mn-vd-orders-toolbar {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .mn-vd-order-search,
  .mn-vd-product-search__field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* NVA maker/product approval tables — horizontal scroll inside panel */
  .mn-admin-tools,
  .mn-admin-tools .nva-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .mn-admin-tools .nva-table {
    display: table !important;
    width: max-content;
    min-width: 680px;
  }

  .mn-admin-tools .nva-table th,
  .mn-admin-tools .nva-table td {
    white-space: nowrap;
  }
}

/* 8-item vendor bottom nav: icon-only on phones to prevent label wrap + overflow */
@media (max-width: 430px) {
  .mn-vd-mobile-nav__item {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 2px;
  }

  .mn-vd-mobile-nav__item > span:not(.mn-vd-mobile-nav__icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mn-vd-mobile-nav__icon {
    font-size: 20px;
  }
}

@media (max-width: 430px) {
  .mn-vd-form .mn-vd-form__row,
  .mn-vd-settings-grid,
  .mn-vd-product-form__row {
    grid-template-columns: 1fr !important;
  }

  .mn-vd-page-head h1,
  .mn-admin .mn-vd-page-head h1 {
    font-size: clamp(22px, 6vw, 28px);
  }
}

/* -------------------------------------------------------------------------
   Forms — minimum tap targets
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .mn-btn,
  .mn-auth-btn,
  button.button,
  a.button,
  input[type="submit"],
  input[type="button"],
  .woocommerce-button {
    min-height: var(--mn-tap-min);
  }
}