/* v2.2.0 — HARD mobile stacked-card layout.
   Purpose: on real phones, live + editor mobile preview must show products as vertical cards.
   Desktop geometry is untouched because rules are scoped to mobile/live body class and editor mobile mode only. */

@media screen and (max-width: 900px){
  body.nc-mobile-portrait-page,
  body.nc-editor-page.nc-editor-mobile-mode{
    --nc-stack-page-width: min(calc(100vw - 70px), 430px);
    --nc-stack-page-height: min(calc(100dvh - 230px), 720px);
    --nc-stack-card-height: clamp(128px, 18dvh, 158px);
    --nc-stack-gap: 8px;
  }

  /* Keep page portrait, but give enough real estate for the stacked product list. */
  body.nc-mobile-portrait-page .stage{
    align-items:flex-start!important;
    padding-top:14px!important;
    padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))!important;
  }
  body.nc-mobile-portrait-page .book-wrap,
  body.nc-editor-page.nc-editor-mobile-mode .book-wrap{
    width:var(--nc-stack-page-width)!important;
    height:var(--nc-stack-page-height)!important;
    min-height:560px!important;
    max-height:740px!important;
    aspect-ratio:auto!important;
  }

  body.nc-mobile-portrait-page .spread .page,
  body.nc-editor-page.nc-editor-mobile-mode .spread .page{
    overflow:hidden!important;
  }

  body.nc-mobile-portrait-page .page-safe-area,
  body.nc-editor-page.nc-editor-mobile-mode .page-safe-area{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    min-height:0!important;
    gap:8px!important;
  }

  body.nc-mobile-portrait-page .page-head,
  body.nc-editor-page.nc-editor-mobile-mode .page-head{
    flex:0 0 auto!important;
    min-height:64px!important;
    max-height:96px!important;
    overflow:hidden!important;
  }

  body.nc-mobile-portrait-page .page-title,
  body.nc-editor-page.nc-editor-mobile-mode .page-title{
    font-size:clamp(20px, 6.2vw, 34px)!important;
    line-height:.94!important;
    letter-spacing:.08em!important;
    max-height:2.05em!important;
    overflow:hidden!important;
  }

  /* FORCE the product area to become a vertical list. This specifically neutralizes older
     .manual-canvas, .cards-X, absolute/free-moving and desktop grid rules. */
  body.nc-mobile-portrait-page .page .page-safe-area > .editorial-grid,
  body.nc-mobile-portrait-page .page .editorial-grid.manual-canvas,
  body.nc-mobile-portrait-page .page .editorial-grid.cards-1,
  body.nc-mobile-portrait-page .page .editorial-grid.cards-2,
  body.nc-mobile-portrait-page .page .editorial-grid.cards-3,
  body.nc-mobile-portrait-page .page .editorial-grid.cards-4,
  body.nc-mobile-portrait-page .page .editorial-grid.cards-5,
  body.nc-editor-page.nc-editor-mobile-mode .page .page-safe-area > .editorial-grid,
  body.nc-editor-page.nc-editor-mobile-mode .page .editorial-grid.manual-canvas,
  body.nc-editor-page.nc-editor-mobile-mode .page .editorial-grid.cards-1,
  body.nc-editor-page.nc-editor-mobile-mode .page .editorial-grid.cards-2,
  body.nc-editor-page.nc-editor-mobile-mode .page .editorial-grid.cards-3,
  body.nc-editor-page.nc-editor-mobile-mode .page .editorial-grid.cards-4,
  body.nc-editor-page.nc-editor-mobile-mode .page .editorial-grid.cards-5{
    flex:1 1 auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:var(--nc-stack-gap)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
  }

  body.nc-mobile-portrait-page .editorial-grid > .product-card,
  body.nc-mobile-portrait-page .editorial-grid > .product-card.is-free-moving,
  body.nc-mobile-portrait-page .editorial-grid > .product-card.is-manual-card,
  body.nc-mobile-portrait-page .editorial-grid > .product-card.is-child-layout,
  body.nc-editor-page.nc-editor-mobile-mode .editorial-grid > .product-card,
  body.nc-editor-page.nc-editor-mobile-mode .editorial-grid > .product-card.is-free-moving,
  body.nc-editor-page.nc-editor-mobile-mode .editorial-grid > .product-card.is-manual-card,
  body.nc-editor-page.nc-editor-mobile-mode .editorial-grid > .product-card.is-child-layout{
    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;
    max-width:100%!important;
    height:var(--nc-stack-card-height)!important;
    min-height:var(--nc-stack-card-height)!important;
    max-height:var(--nc-stack-card-height)!important;
    flex:0 0 var(--nc-stack-card-height)!important;
    display:grid!important;
    grid-template-columns:minmax(118px, 42%) 1fr!important;
    grid-template-rows:1fr!important;
    gap:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    border:1px solid rgba(65,47,19,.42)!important;
    background:rgba(238,218,158,.20)!important;
    z-index:auto!important;
  }

  body.nc-mobile-portrait-page .product-card > .product-media,
  body.nc-editor-page.nc-editor-mobile-mode .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;
    min-width:0!important;
    max-width:none!important;
    margin:12px 10px!important;
    display:block!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    background:rgba(255,247,210,.55)!important;
  }
  body.nc-mobile-portrait-page .product-card > .product-media img,
  body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
  }

  body.nc-mobile-portrait-page .product-card > .product-copy,
  body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-copy{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:2px!important;
    padding:12px 13px 9px 8px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  /* Children in stacked mobile are flow content, not desktop absolute/manual coordinates. */
  body.nc-mobile-portrait-page .product-card [data-nc-child],
  body.nc-mobile-portrait-page .product-card .badge,
  body.nc-mobile-portrait-page .product-card .discount,
  body.nc-mobile-portrait-page .product-card .product-title,
  body.nc-mobile-portrait-page .product-card .product-description,
  body.nc-mobile-portrait-page .product-card .merchant,
  body.nc-mobile-portrait-page .product-card .old-price,
  body.nc-mobile-portrait-page .product-card .price,
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child],
  body.nc-editor-page.nc-editor-mobile-mode .product-card .badge,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .discount,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .product-title,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .product-description,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .merchant,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .old-price,
  body.nc-editor-page.nc-editor-mobile-mode .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;
    max-width:100%!important;
    min-width:0!important;
    z-index:auto!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  body.nc-mobile-portrait-page .product-card .badge,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .badge{
    order:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:flex-start!important;
    min-height:18px!important;
    padding:3px 8px!important;
    margin:0 0 2px 0!important;
    font-size:clamp(10px,2.8vw,13px)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  body.nc-mobile-portrait-page .product-card .discount,
  body.nc-editor-page.nc-editor-mobile-mode .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:5!important;
    overflow:visible!important;
  }
  body.nc-mobile-portrait-page .product-card .product-title,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .product-title{
    order:2!important;
    display:block!important;
    font-size:clamp(14px,3.8vw,19px)!important;
    line-height:1.03!important;
    font-weight:900!important;
    margin:0!important;
    padding:0!important;
    max-height:2.1em!important;
  }
  body.nc-mobile-portrait-page .product-card .product-description,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .product-description{
    order:3!important;
    display:block!important;
    font-size:clamp(12px,3.25vw,16px)!important;
    line-height:1.08!important;
    margin:1px 0 0!important;
    padding:0!important;
    max-height:2.2em!important;
  }
  body.nc-mobile-portrait-page .product-card .merchant,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .merchant{
    order:4!important;
    display:block!important;
    font-size:clamp(10px,2.65vw,13px)!important;
    line-height:1.05!important;
    margin:1px 0 0!important;
    padding:0!important;
    max-height:1.1em!important;
  }
  body.nc-mobile-portrait-page .product-card .price-row,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .price-row{
    order:5!important;
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
    margin-top:auto!important;
    width:100%!important;
    overflow:hidden!important;
  }
  body.nc-mobile-portrait-page .product-card .old-price,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .old-price{
    display:block!important;
    font-size:clamp(10px,2.7vw,13px)!important;
    line-height:1!important;
  }
  body.nc-mobile-portrait-page .product-card .price,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .price{
    display:block!important;
    font-size:clamp(15px,4.2vw,22px)!important;
    line-height:1!important;
    font-weight:900!important;
  }
  body.nc-mobile-portrait-page .product-card .safe-zone-badge,
  body.nc-mobile-portrait-page .product-card .safe-zone-label,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .safe-zone-badge,
  body.nc-editor-page.nc-editor-mobile-mode .product-card .safe-zone-label{
    display:none!important;
  }

  body.nc-mobile-portrait-page .nc-mobile-drag-hint{
    margin-top:52px!important;
  }
}

@media screen and (max-width:390px){
  body.nc-mobile-portrait-page,
  body.nc-editor-page.nc-editor-mobile-mode{
    --nc-stack-page-width:min(calc(100vw - 64px), 390px);
    --nc-stack-page-height:min(calc(100dvh - 224px), 670px);
    --nc-stack-card-height:clamp(118px, 17dvh, 142px);
    --nc-stack-gap:7px;
  }
  body.nc-mobile-portrait-page .product-card > .product-media,
  body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-media{margin:10px 8px!important;}
  body.nc-mobile-portrait-page .product-card > .product-copy,
  body.nc-editor-page.nc-editor-mobile-mode .product-card > .product-copy{padding:10px 10px 8px 7px!important;}
}