/* v2.1.8 — mobile live/editor visual parity + lower styled arrows.
   Purpose: make the iPhone live portrait page use the same readable one-page model
   as the editor mobile preview, and move the navigation indicator below the catalog. */

/* One set of dimensions for live mobile and editor mobile preview. */
body.nc-editor-page.nc-editor-mobile-mode,
body.nc-mobile-portrait-page{
  --nc-mobile-page-w-final: min(calc(100vw - 84px), 430px);
  --nc-mobile-page-h-final: min(calc(100dvh - 286px), 660px);
  --nc-mobile-page-min-h-final: 500px;
  --nc-mobile-page-max-h-final: 690px;
}

/* Editor mobile keeps the same readable page proportions 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: var(--nc-mobile-page-min-h-final)!important;
  max-height: var(--nc-mobile-page-max-h-final)!important;
}

@media (max-width: 760px){
  body.nc-mobile-portrait-page{
    overflow-x:hidden!important;
  }

  body.nc-mobile-portrait-page .stage{
    min-height:calc(100dvh - 64px)!important;
    padding:14px 0 calc(176px + env(safe-area-inset-bottom,0px))!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }

  body.nc-mobile-portrait-page .magazine-shell{
    width:100vw!important;
    max-width:100vw!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    padding-top:8px!important;
    gap:0!important;
  }

  /* Fit the page + visible left category tabs inside the iPhone viewport. */
  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:var(--nc-mobile-page-min-h-final)!important;
    max-height:var(--nc-mobile-page-max-h-final)!important;
    margin:0 0 0 34px!important;
    aspect-ratio:auto!important;
    transform:none!important;
  }

  body.nc-mobile-portrait-page .spread .page{
    padding:18px 17px 34px!important;
    border-radius:17px!important;
  }

  body.nc-mobile-portrait-page .page:before{
    inset:16px!important;
  }

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

  body.nc-mobile-portrait-page .page-head{
    min-height:84px!important;
  }

  body.nc-mobile-portrait-page .eyebrow{
    font-size:10px!important;
    letter-spacing:3px!important;
  }

  body.nc-mobile-portrait-page .page-title{
    font-size:clamp(22px, 6.8vw, 34px)!important;
    line-height:.96!important;
    letter-spacing:.3px!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }

  body.nc-mobile-portrait-page .editorial-grid{
    height:100%!important;
    overflow:hidden!important;
  }

  /* Mobile content readability: keep the product rows closer to the editor preview. */
  body.nc-mobile-portrait-page .product-card{
    overflow:hidden!important;
    min-height:76px!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child]{
    line-height:1.05!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="image"] img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="badge"],
  body.nc-mobile-portrait-page .product-card [data-nc-child="discount"]{
    min-width:24px!important;
    min-height:16px!important;
    padding:3px 5px!important;
    font-size:clamp(8px, 2vw, 11px)!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="title"]{
    font-size:clamp(11px, 3.1vw, 15px)!important;
    line-height:1.04!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="description"]{
    font-size:clamp(9px, 2.7vw, 12px)!important;
    line-height:1.1!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="merchant"],
  body.nc-mobile-portrait-page .product-card [data-nc-child="old_price"]{
    font-size:clamp(8px, 2.2vw, 10px)!important;
  }
  body.nc-mobile-portrait-page .product-card [data-nc-child="price"]{
    font-size:clamp(13px, 4.2vw, 20px)!important;
    line-height:1!important;
  }

  /* Styled navigation arrows, placed below the catalogue, about 40px lower. */
  body.nc-mobile-portrait-page .nc-mobile-drag-hint{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:164px!important;
    height:42px!important;
    min-width:164px!important;
    max-width:164px!important;
    margin:40px auto 14px!important;
    padding:0!important;
    z-index:40!important;
    border-radius:999px!important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.62), transparent 46%),
      linear-gradient(180deg, #fff0aa 0%, #d8a635 55%, #b37a18 100%)!important;
    border:1px solid rgba(255,239,161,.72)!important;
    box-shadow:0 14px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.62), inset 0 -10px 18px rgba(84,49,5,.18)!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  body.nc-mobile-portrait-page .nc-mobile-drag-hint::before,
  body.nc-mobile-portrait-page .nc-mobile-drag-hint::after{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-54%)!important;
    color:#2f2108!important;
    font-size:34px!important;
    line-height:1!important;
    font-weight:900!important;
    text-indent:0!important;
    text-shadow:0 1px 0 rgba(255,255,255,.45)!important;
  }
  body.nc-mobile-portrait-page .nc-mobile-drag-hint::before{content:'‹'!important;left:24px!important;}
  body.nc-mobile-portrait-page .nc-mobile-drag-hint::after{content:'›'!important;right:24px!important;}
  body.nc-mobile-portrait-page .nc-mobile-drag-hint .nc-mobile-swipe-line{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:62px!important;
    height:3px!important;
    border-radius:999px!important;
    transform:translate(-50%,-50%)!important;
    background:linear-gradient(90deg, rgba(38,26,5,.06), rgba(38,26,5,.78), rgba(38,26,5,.06))!important;
    text-indent:0!important;
  }
  body.nc-mobile-portrait-page .nc-mobile-drag-hint .nc-mobile-arrow{display:none!important;}

  body.nc-mobile-portrait-page .controls{
    height:82px!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!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 - 78px), 410px);
    --nc-mobile-page-h-final: min(calc(100dvh - 294px), 640px);
    --nc-mobile-page-min-h-final: 480px;
  }
  body.nc-mobile-portrait-page .book-wrap{margin-left:32px!important;}
  body.nc-mobile-portrait-page .page-title{font-size:clamp(21px, 6.4vw, 32px)!important;}
}