/* v2.2.2 — hard mobile stacked renderer parity.
   Objective: live mobile and editor Mobile use the same product-card stack.
   Desktop stays untouched. */

/* Shared sizing tokens. Editor Mobile gets the same logical page width as iPhone live. */
body.nc-editor-page.nc-editor-mobile-mode,
body.nc-mobile-portrait-page{
  --nc-v222-page-w: min(calc(100vw - 42px), 390px);
  --nc-v222-page-h: min(calc(100dvh - 238px), 660px);
  --nc-v222-card-h: clamp(118px, 16.5dvh, 142px);
  --nc-v222-gap: 7px;
}
body.nc-editor-page.nc-editor-mobile-mode{
  --nc-v222-page-w: 390px;
  --nc-v222-page-h: 660px;
  --nc-v222-card-h: 132px;
}

/* Apply to real mobile even if JS/body class cache is stale. */
@media (max-width:760px){
  body:not(.nc-editor-page){
    --nc-v222-page-w: min(calc(100vw - 42px), 390px);
    --nc-v222-page-h: min(calc(100dvh - 238px), 660px);
    --nc-v222-card-h: clamp(118px, 16.5dvh, 142px);
    --nc-v222-gap: 7px;
  }
}

/* Same page geometry in live mobile and editor mobile. */
body.nc-editor-page.nc-editor-mobile-mode .book-wrap,
body.nc-mobile-portrait-page .book-wrap{
  width:var(--nc-v222-page-w)!important;
  min-width:var(--nc-v222-page-w)!important;
  max-width:var(--nc-v222-page-w)!important;
  height:var(--nc-v222-page-h)!important;
  min-height:var(--nc-v222-page-h)!important;
  max-height:var(--nc-v222-page-h)!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .book-wrap{
    width:var(--nc-v222-page-w)!important;
    min-width:var(--nc-v222-page-w)!important;
    max-width:var(--nc-v222-page-w)!important;
    height:var(--nc-v222-page-h)!important;
    min-height:var(--nc-v222-page-h)!important;
    max-height:var(--nc-v222-page-h)!important;
  }
}

/* Mobile page should not display desktop spread/grid behaviour. */
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;
  height:100%!important;
  overflow:hidden!important;
  padding:22px 18px 24px!important;
  box-sizing:border-box!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .page-safe-area{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    overflow:hidden!important;
    padding:22px 18px 24px!important;
    box-sizing:border-box!important;
  }
}

body.nc-editor-page.nc-editor-mobile-mode .page-head,
body.nc-mobile-portrait-page .page-head{
  flex:0 0 112px!important;
  min-height:112px!important;
  max-height:112px!important;
  overflow:hidden!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .page-head{
    flex:0 0 112px!important;
    min-height:112px!important;
    max-height:112px!important;
    overflow:hidden!important;
  }
}

/* HARD STACK: ignore desktop manual positions on mobile only. */
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-v222-gap)!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  position:relative!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .editorial-grid,
  body:not(.nc-editor-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-v222-gap)!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
    position:relative!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;
  left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; inset:auto!important;
  transform:none!important; translate:none!important;
  width:100%!important; min-width:100%!important; max-width:100%!important;
  height:var(--nc-v222-card-h)!important; min-height:var(--nc-v222-card-h)!important; max-height:var(--nc-v222-card-h)!important;
  flex:0 0 var(--nc-v222-card-h)!important;
  display:grid!important;
  grid-template-columns:39% 61%!important;
  grid-template-rows:1fr!important;
  gap:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(63,50,24,.45)!important;
  background:rgba(239,221,165,.16)!important;
  z-index:auto!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .editorial-grid > .product-card,
  body:not(.nc-editor-page) .editorial-grid > .product-card.is-free-moving,
  body:not(.nc-editor-page) .editorial-grid > .product-card.is-manual-card{
    position:relative!important;
    left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; inset:auto!important;
    transform:none!important; translate:none!important;
    width:100%!important; min-width:100%!important; max-width:100%!important;
    height:var(--nc-v222-card-h)!important; min-height:var(--nc-v222-card-h)!important; max-height:var(--nc-v222-card-h)!important;
    flex:0 0 var(--nc-v222-card-h)!important;
    display:grid!important;
    grid-template-columns:39% 61%!important;
    grid-template-rows:1fr!important;
    gap:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    border:1px solid rgba(63,50,24,.45)!important;
    background:rgba(239,221,165,.16)!important;
    z-index:auto!important;
  }
}

/* Image column. */
body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-media,
body.nc-mobile-portrait-page .product-card > .product-media{
  position:relative!important;
  grid-column:1!important; grid-row:1!important;
  width:auto!important; height:auto!important;
  margin:10px 9px!important;
  overflow:hidden!important;
  display:block!important;
  inset:auto!important; transform:none!important;
  z-index:1!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .product-card > .product-media{
    position:relative!important;
    grid-column:1!important; grid-row:1!important;
    width:auto!important; height:auto!important;
    margin:10px 9px!important;
    overflow:hidden!important;
    display:block!important;
    inset:auto!important; transform:none!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{
  width:100%!important; height:100%!important; object-fit:cover!important; display:block!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .product-card > .product-media img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
}

/* Text column. */
body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-copy,
body.nc-mobile-portrait-page .product-card > .product-copy{
  position:relative!important;
  grid-column:2!important; grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:2px!important;
  padding:10px 12px 8px 8px!important;
  width:auto!important; height:auto!important;
  overflow:hidden!important;
  inset:auto!important; transform:none!important;
  z-index:2!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .product-card > .product-copy{
    position:relative!important;
    grid-column:2!important; grid-row:1!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    gap:2px!important;
    padding:10px 12px 8px 8px!important;
    width:auto!important; height:auto!important;
    overflow:hidden!important;
    inset:auto!important; transform:none!important;
    z-index:2!important;
  }
}

/* In stacked mobile cards, every child becomes a flow item, except discount which is a corner chip. */
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;
  left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; inset:auto!important;
  transform:none!important; translate:none!important;
  width:auto!important; min-width:0!important; max-width:100%!important;
  height:auto!important; min-height:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .product-card [data-nc-child],
  body:not(.nc-editor-page) .product-card .product-title,
  body:not(.nc-editor-page) .product-card .product-description,
  body:not(.nc-editor-page) .product-card .merchant,
  body:not(.nc-editor-page) .product-card .old-price,
  body:not(.nc-editor-page) .product-card .price{
    position:relative!important;
    left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; inset:auto!important;
    transform:none!important; translate:none!important;
    width:auto!important; min-width:0!important; max-width:100%!important;
    height:auto!important; min-height:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
}

body.nc-editor-page.nc-editor-mobile-mode .product-card .badge,
body.nc-mobile-portrait-page .product-card .badge{
  order:1!important;
  align-self:flex-start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 0 2px!important;
  padding:3px 9px!important;
  min-height:18px!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
@media (max-width:760px){body:not(.nc-editor-page) .product-card .badge{order:1!important;align-self:flex-start!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0 0 2px!important;padding:3px 9px!important;min-height:18px!important;font-size:12px!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;
  top:9px!important; right:9px!important;
  left:auto!important; bottom:auto!important;
  width:auto!important; height:auto!important;
  min-width:36px!important; min-height:22px!important;
  padding:4px 8px!important;
  display:inline-flex!important;
  align-items:center!important; justify-content:center!important;
  font-size:13px!important; line-height:1!important;
  border-radius:999px!important;
  z-index:5!important;
  overflow:visible!important;
}
@media (max-width:760px){
  body:not(.nc-editor-page) .product-card .discount{
    position:absolute!important;
    top:9px!important; right:9px!important;
    left:auto!important; bottom:auto!important;
    width:auto!important; height:auto!important;
    min-width:36px!important; min-height:22px!important;
    padding:4px 8px!important;
    display:inline-flex!important;
    align-items:center!important; justify-content:center!important;
    font-size:13px!important; line-height:1!important;
    border-radius:999px!important;
    z-index:5!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;font-size:16px!important;line-height:1.04!important;font-weight:900!important;max-height:2.1em!important;margin:0!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;font-size:14px!important;line-height:1.08!important;max-height:2.25em!important;margin:1px 0 0!important;}
body.nc-editor-page.nc-editor-mobile-mode .product-card .merchant,
body.nc-mobile-portrait-page .product-card .merchant{order:4!important;font-size:11px!important;line-height:1.05!important;max-height:1.15em!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;margin-top:auto!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;position:relative!important;width:100%!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:12px!important;line-height:1!important;}
body.nc-editor-page.nc-editor-mobile-mode .product-card .price,
body.nc-mobile-portrait-page .product-card .price{font-size:18px!important;line-height:1!important;font-weight:900!important;}
@media (max-width:760px){
  body:not(.nc-editor-page) .product-card .product-title{order:2!important;font-size:16px!important;line-height:1.04!important;font-weight:900!important;max-height:2.1em!important;margin:0!important;}
  body:not(.nc-editor-page) .product-card .product-description{order:3!important;font-size:14px!important;line-height:1.08!important;max-height:2.25em!important;margin:1px 0 0!important;}
  body:not(.nc-editor-page) .product-card .merchant{order:4!important;font-size:11px!important;line-height:1.05!important;max-height:1.15em!important;}
  body:not(.nc-editor-page) .product-card .price-row{order:5!important;margin-top:auto!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;position:relative!important;width:100%!important;overflow:hidden!important;}
  body:not(.nc-editor-page) .product-card .old-price{font-size:12px!important;line-height:1!important;}
  body:not(.nc-editor-page) .product-card .price{font-size:18px!important;line-height:1!important;font-weight:900!important;}
}

/* Mobile arrows safe under catalog. */
body.nc-mobile-portrait-page .nc-mobile-drag-hint{margin-top:74px!important;}
@media (max-width:760px){body:not(.nc-editor-page) .nc-mobile-drag-hint{margin-top:74px!important;}}