/* v2.2.1 — TRUE mobile renderer parity.
   One mobile renderer: live mobile and editor Mobile preview use the same page/card geometry.
   Desktop layout is untouched. */

/* Shared mobile page/card rules. Editor Mobile preview must work on desktop screens too,
   therefore editor selectors are NOT wrapped in a viewport media query. */
body.nc-editor-page.nc-editor-mobile-mode,
body.nc-mobile-portrait-page{
  --nc-mobile-page-width: min(calc(100vw - 58px), 430px);
  --nc-mobile-page-height: min(calc(100dvh - 260px), 710px);
  --nc-mobile-card-height: clamp(128px, 18dvh, 156px);
  --nc-mobile-gap: 8px;
}

/* Editor preview on desktop: simulate a phone page instead of using the full desktop viewport. */
body.nc-editor-page.nc-editor-mobile-mode{
  --nc-mobile-page-width: 430px;
  --nc-mobile-page-height: 710px;
  --nc-mobile-card-height: 148px;
  --nc-mobile-gap: 8px;
}

@media (max-width: 430px){
  body.nc-mobile-portrait-page{
    --nc-mobile-page-width: min(calc(100vw - 48px), 392px);
    --nc-mobile-page-height: min(calc(100dvh - 245px), 680px);
    --nc-mobile-card-height: clamp(122px, 17.5dvh, 148px);
    --nc-mobile-gap: 7px;
  }
}

@media (max-width: 900px){
  body.nc-mobile-portrait-page .stage{
    align-items:flex-start!important;
    justify-content:flex-start!important;
    padding-top:18px!important;
    padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))!important;
    overflow:visible!important;
  }
  body.nc-mobile-portrait-page .magazine-shell{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    overflow:visible!important;
  }
}

body.nc-editor-page.nc-editor-mobile-mode .nc-canvas{
  align-items:flex-start!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}

body.nc-editor-page.nc-editor-mobile-mode .magazine-shell,
body.nc-mobile-portrait-page .magazine-shell{
  overflow:visible!important;
}

body.nc-editor-page.nc-editor-mobile-mode .book-wrap,
body.nc-mobile-portrait-page .book-wrap{
  width:var(--nc-mobile-page-width)!important;
  height:var(--nc-mobile-page-height)!important;
  min-width:var(--nc-mobile-page-width)!important;
  max-width:var(--nc-mobile-page-width)!important;
  min-height:var(--nc-mobile-page-height)!important;
  max-height:var(--nc-mobile-page-height)!important;
  aspect-ratio:auto!important;
  margin-left:34px!important;
  margin-right:0!important;
  transform:none!important;
  overflow:visible!important;
}

body.nc-editor-page.nc-editor-mobile-mode .book,
body.nc-mobile-portrait-page .book{
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:visible!important;
}

/* One visible page, not a two-page spread. */
body.nc-editor-page.nc-editor-mobile-mode .spread,
body.nc-mobile-portrait-page .spread{
  position:absolute!important;
  inset:0!important;
  display:none!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  overflow:visible!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spread.is-active,
body.nc-mobile-portrait-page .spread.is-active{
  display:block!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spread .page,
body.nc-mobile-portrait-page .spread .page{
  display:none!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  border-radius:18px!important;
  overflow:hidden!important;
  transform:none!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spread.mobile-show-left .page.left,
body.nc-editor-page.nc-editor-mobile-mode .spread.mobile-edit-left .page.left,
body.nc-mobile-portrait-page .spread.mobile-show-left .page.left{
  display:block!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spread.mobile-show-right .page.right,
body.nc-editor-page.nc-editor-mobile-mode .spread.mobile-edit-right .page.right,
body.nc-mobile-portrait-page .spread.mobile-show-right .page.right{
  display:block!important;
}
body.nc-editor-page.nc-editor-mobile-mode .spine,
body.nc-mobile-portrait-page .spine{
  display:none!important;
}

body.nc-editor-page.nc-editor-mobile-mode .page-safe-area,
body.nc-mobile-portrait-page .page-safe-area{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  height:100%!important;
  min-height:0!important;
  padding:22px 18px 22px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

body.nc-editor-page.nc-editor-mobile-mode .page-head,
body.nc-mobile-portrait-page .page-head{
  flex:0 0 96px!important;
  min-height:96px!important;
  max-height:96px!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
}
body.nc-editor-page.nc-editor-mobile-mode .eyebrow,
body.nc-mobile-portrait-page .eyebrow{
  font-size:clamp(10px,2.7vw,13px)!important;
  letter-spacing:.42em!important;
  line-height:1!important;
}
body.nc-editor-page.nc-editor-mobile-mode .page-title,
body.nc-mobile-portrait-page .page-title{
  font-size:clamp(18px,5.6vw,29px)!important;
  line-height:.98!important;
  letter-spacing:.08em!important;
  max-height:2.05em!important;
  overflow:hidden!important;
  margin:3px 0 0!important;
  padding:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Mobile product renderer: a vertical list of cards. */
body.nc-editor-page.nc-editor-mobile-mode .editorial-grid,
body.nc-mobile-portrait-page .editorial-grid,
body.nc-editor-page.nc-editor-mobile-mode .editorial-grid.manual-canvas,
body.nc-mobile-portrait-page .editorial-grid.manual-canvas{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:var(--nc-mobile-gap)!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
}

body.nc-editor-page.nc-editor-mobile-mode .editorial-grid > .product-card,
body.nc-mobile-portrait-page .editorial-grid > .product-card,
body.nc-editor-page.nc-editor-mobile-mode .editorial-grid > .product-card.is-free-moving,
body.nc-mobile-portrait-page .editorial-grid > .product-card.is-free-moving,
body.nc-editor-page.nc-editor-mobile-mode .editorial-grid > .product-card.is-manual-card,
body.nc-mobile-portrait-page .editorial-grid > .product-card.is-manual-card{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  translate:none!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:var(--nc-mobile-card-height)!important;
  min-height:var(--nc-mobile-card-height)!important;
  max-height:var(--nc-mobile-card-height)!important;
  flex:0 0 var(--nc-mobile-card-height)!important;
  display:grid!important;
  grid-template-columns:40% 60%!important;
  grid-template-rows:1fr!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:1px solid rgba(70,54,24,.42)!important;
  background:rgba(239,218,154,.18)!important;
  z-index:auto!important;
}

body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-media,
body.nc-mobile-portrait-page .product-card > .product-media{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  grid-column:1!important;
  grid-row:1!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:12px 10px!important;
  display:block!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:rgba(255,246,210,.55)!important;
  z-index:1!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-media img,
body.nc-mobile-portrait-page .product-card > .product-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-copy,
body.nc-mobile-portrait-page .product-card > .product-copy{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  grid-column:2!important;
  grid-row:1!important;
  width:auto!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:2px!important;
  padding:12px 12px 9px 8px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  z-index:2!important;
}

/* Inside mobile stacked cards, children are flow elements. Desktop manual x/y is ignored only on mobile. */
body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child],
body.nc-mobile-portrait-page .product-card [data-nc-child],
body.nc-editor-page.nc-editor-mobile-mode .product-card .product-title,
body.nc-mobile-portrait-page .product-card .product-title,
body.nc-editor-page.nc-editor-mobile-mode .product-card .product-description,
body.nc-mobile-portrait-page .product-card .product-description,
body.nc-editor-page.nc-editor-mobile-mode .product-card .merchant,
body.nc-mobile-portrait-page .product-card .merchant,
body.nc-editor-page.nc-editor-mobile-mode .product-card .old-price,
body.nc-mobile-portrait-page .product-card .old-price,
body.nc-editor-page.nc-editor-mobile-mode .product-card .price,
body.nc-mobile-portrait-page .product-card .price{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  z-index:auto!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card .badge,
body.nc-mobile-portrait-page .product-card .badge{
  order:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:flex-start!important;
  min-width:40px!important;
  min-height:18px!important;
  padding:3px 9px!important;
  margin:0 0 2px!important;
  font-size:clamp(10px,2.7vw,13px)!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card .discount,
body.nc-mobile-portrait-page .product-card .discount{
  position:absolute!important;
  right:10px!important;
  top:10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:38px!important;
  min-height:24px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  font-size:clamp(11px,3vw,15px)!important;
  line-height:1!important;
  z-index:6!important;
  overflow:visible!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card .product-title,
body.nc-mobile-portrait-page .product-card .product-title{
  order:2!important;
  display:block!important;
  font-size:clamp(14px,3.55vw,18px)!important;
  line-height:1.04!important;
  font-weight:900!important;
  margin:0!important;
  padding:0!important;
  max-height:2.15em!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card .product-description,
body.nc-mobile-portrait-page .product-card .product-description{
  order:3!important;
  display:block!important;
  font-size:clamp(12px,3.1vw,15px)!important;
  line-height:1.08!important;
  margin:1px 0 0!important;
  padding:0!important;
  max-height:2.25em!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card .merchant,
body.nc-mobile-portrait-page .product-card .merchant{
  order:4!important;
  display:block!important;
  font-size:clamp(10px,2.55vw,12px)!important;
  line-height:1.05!important;
  max-height:1.15em!important;
  margin:1px 0 0!important;
  padding:0!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card .price-row,
body.nc-mobile-portrait-page .product-card .price-row{
  order:5!important;
  position:relative!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:0!important;
  margin-top:auto!important;
  overflow:hidden!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card .old-price,
body.nc-mobile-portrait-page .product-card .old-price{
  font-size:clamp(10px,2.65vw,13px)!important;
  line-height:1!important;
}
body.nc-editor-page.nc-editor-mobile-mode .product-card .price,
body.nc-mobile-portrait-page .product-card .price{
  display:block!important;
  font-size:clamp(15px,4vw,21px)!important;
  line-height:1!important;
  font-weight:900!important;
}
body.nc-editor-page.nc-editor-mobile-mode .safe-zone-badge,
body.nc-editor-page.nc-editor-mobile-mode .safe-zone-label,
body.nc-mobile-portrait-page .safe-zone-badge,
body.nc-mobile-portrait-page .safe-zone-label{
  display:none!important;
}

/* Mobile category tabs stay visible on the left/right page edge. */
body.nc-editor-page.nc-editor-mobile-mode .tabs,
body.nc-mobile-portrait-page .tabs{
  display:block!important;
  z-index:0!important;
}
body.nc-editor-page.nc-editor-mobile-mode .tabs.left,
body.nc-mobile-portrait-page .tabs.left{
  left:-46px!important;
}
body.nc-editor-page.nc-editor-mobile-mode .tabs.right,
body.nc-mobile-portrait-page .tabs.right{
  right:-46px!important;
}

/* Navigation arrows under the catalog, never over the page content. */
body.nc-mobile-portrait-page .nc-mobile-drag-hint{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:56px auto 0!important;
  width:210px!important;
  height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fff4b8,#cf9f20)!important;
  border:1px solid rgba(255,242,170,.9)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.85)!important;
  color:#3a2a06!important;
  font-size:0!important;
  z-index:20!important;
}
body.nc-mobile-portrait-page .nc-mobile-drag-hint::before,
body.nc-mobile-portrait-page .nc-mobile-drag-hint::after{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  font-size:34px!important;
  font-weight:900!important;
  line-height:1!important;
}
body.nc-mobile-portrait-page .nc-mobile-drag-hint::before{content:'‹'!important;}
body.nc-mobile-portrait-page .nc-mobile-drag-hint::after{content:'›'!important;}
body.nc-mobile-portrait-page .nc-mobile-drag-hint .nc-mobile-swipe-line{
  display:block!important;
  width:82px!important;
  height:3px!important;
  margin:0 8px!important;
  border-radius:10px!important;
  background:linear-gradient(90deg,transparent,rgba(49,35,5,.72),transparent)!important;
}
body.nc-mobile-portrait-page .nc-mobile-drag-hint .nc-mobile-arrow{display:none!important;}

@media (max-width: 380px){
  body.nc-mobile-portrait-page{
    --nc-mobile-page-width:min(calc(100vw - 42px), 370px);
    --nc-mobile-page-height:min(calc(100dvh - 238px), 650px);
    --nc-mobile-card-height:clamp(116px,16.6dvh,138px);
    --nc-mobile-gap:6px;
  }
  body.nc-mobile-portrait-page .page-safe-area{padding:20px 16px 20px!important;}
  body.nc-mobile-portrait-page .product-card > .product-media{margin:10px 8px!important;}
  body.nc-mobile-portrait-page .product-card > .product-copy{padding:10px 10px 8px 7px!important;}
}