/* v2.1.9 — mobile stacked product cards.
   Mobile must NOT reuse desktop manual arrangement. Desktop remains untouched.
   Applies only to iPhone/live portrait and to the editor when Mobile mode is active. */

@media (max-width: 760px){
  body.nc-mobile-portrait-page,
  body.nc-editor-page.nc-editor-mobile-mode{
    --nc-mobile-page-w-final: min(calc(100vw - 76px), 420px);
    --nc-mobile-page-h-final: min(calc(100dvh - 255px), 685px);
    --nc-mobile-stack-card-h: clamp(118px, 18.5dvh, 150px);
    --nc-mobile-stack-gap: 7px;
  }

  /* Live mobile: keep the page vertical and make room for category tabs. */
  body.nc-mobile-portrait-page .stage{
    padding-top:12px!important;
    padding-bottom:calc(156px + env(safe-area-inset-bottom,0px))!important;
  }
  body.nc-mobile-portrait-page .book-wrap{
    width:var(--nc-mobile-page-w-final)!important;
    height:var(--nc-mobile-page-h-final)!important;
    min-height:520px!important;
    max-height:690px!important;
    margin-left:34px!important;
  }

  /* Editor mobile preview uses the same stacked-card geometry as live. */
  body.nc-editor-page.nc-editor-mobile-mode .book-wrap{
    width:var(--nc-mobile-page-w-final)!important;
    height:var(--nc-mobile-page-h-final)!important;
    min-height:520px!important;
    max-height:690px!important;
  }

  body.nc-mobile-portrait-page .page-safe-area,
  body.nc-editor-page.nc-editor-mobile-mode .page-safe-area{
    grid-template-rows:auto 1fr!important;
    gap:8px!important;
    height:100%!important;
  }

  body.nc-mobile-portrait-page .page-head,
  body.nc-editor-page.nc-editor-mobile-mode .page-head{
    min-height:70px!important;
    max-height:92px!important;
  }

  body.nc-mobile-portrait-page .page-title,
  body.nc-editor-page.nc-editor-mobile-mode .page-title{
    font-size:clamp(19px, 5.5vw, 30px)!important;
    line-height:.96!important;
    letter-spacing:.15px!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }

  /* CRITICAL: mobile product cards are stacked vertically, independent of desktop layout. */
  body.nc-mobile-portrait-page .editorial-grid,
  body.nc-editor-page.nc-editor-mobile-mode .editorial-grid{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:var(--nc-mobile-stack-gap)!important;
    height:100%!important;
    overflow:hidden!important;
    padding:0!important;
  }

  body.nc-mobile-portrait-page .product-card,
  body.nc-editor-page.nc-editor-mobile-mode .product-card{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    height:var(--nc-mobile-stack-card-h)!important;
    min-height:var(--nc-mobile-stack-card-h)!important;
    max-height:var(--nc-mobile-stack-card-h)!important;
    flex:0 0 var(--nc-mobile-stack-card-h)!important;
    display:grid!important;
    grid-template-columns:42% 58%!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(54,42,18,.36)!important;
    background:rgba(239,218,154,.18)!important;
  }

  /* Mobile ignores free desktop x/y card positions. It only keeps content. */
  body.nc-mobile-portrait-page .product-card.is-free-moving,
  body.nc-editor-page.nc-editor-mobile-mode .product-card.is-free-moving{
    position:relative!important;
    width:100%!important;
    height:var(--nc-mobile-stack-card-h)!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;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    display:block!important;
    margin:12px 10px!important;
    overflow:hidden!important;
    z-index:1!important;
    background:rgba(255,246,205,.5)!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;
    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;
    min-width:0!important;
    padding:12px 12px 9px 8px!important;
    overflow:hidden!important;
  }

  /* In mobile stacked mode, child elements are normal flow so they cannot overlap.
     Desktop/manual geometry remains untouched because this rule is mobile-only. */
  body.nc-mobile-portrait-page .product-card [data-nc-child],
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child]{
    position:relative!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;
    box-sizing:border-box!important;
    overflow:hidden!important;
    z-index:auto!important;
  }

  body.nc-mobile-portrait-page .product-card [data-nc-child="badge"],
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child="badge"]{
    order:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:flex-start!important;
    min-width:34px!important;
    min-height:18px!important;
    padding:3px 8px!important;
    margin:0 0 1px 0!important;
    font-size:clamp(10px,2.6vw,13px)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.nc-mobile-portrait-page .product-card [data-nc-child="discount"],
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child="discount"]{
    position:absolute!important;
    right:10px!important;
    top:10px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!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;
  }

  body.nc-mobile-portrait-page .product-card [data-nc-child="title"],
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child="title"]{
    order:2!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(14px,3.8vw,19px)!important;
    line-height:1.03!important;
    font-weight:800!important;
    max-height:2.1em!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="description"],
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child="description"]{
    order:3!important;
    display:block!important;
    margin:1px 0 0!important;
    padding:0!important;
    font-size:clamp(12px,3.3vw,16px)!important;
    line-height:1.08!important;
    max-height:2.2em!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="merchant"],
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child="merchant"]{
    order:4!important;
    display:block!important;
    margin:1px 0 0!important;
    padding:0!important;
    font-size:clamp(10px,2.7vw,13px)!important;
    line-height:1.05!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;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
    margin-top:auto!important;
    width:100%!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="old_price"],
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child="old_price"]{
    display:block!important;
    font-size:clamp(10px,2.7vw,13px)!important;
    line-height:1!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="price"],
  body.nc-editor-page.nc-editor-mobile-mode .product-card [data-nc-child="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-editor-page.nc-editor-mobile-mode .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-label{
    display:none!important;
  }

  /* Mobile indicator sits under the page, not over the content. */
  body.nc-mobile-portrait-page .nc-mobile-drag-hint{
    margin-top:44px!important;
  }
}

@media (max-width:390px){
  body.nc-mobile-portrait-page,
  body.nc-editor-page.nc-editor-mobile-mode{
    --nc-mobile-page-w-final:min(calc(100vw - 76px), 392px);
    --nc-mobile-page-h-final:min(calc(100dvh - 246px), 650px);
    --nc-mobile-stack-card-h:clamp(108px, 17.2dvh, 138px);
    --nc-mobile-stack-gap:6px;
  }
  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;
  }
}