/* Noor Naksha v1.11.16 — mobile completion layer.
 * All visual changes are mobile-only. Desktop v1.11.10+ baseline is untouched.
 */
@media (max-width:720px){
  /* ------------------------------------------------------------
   * Menu direction: LEFT drawer. Cart remains the existing RIGHT drawer.
   * ------------------------------------------------------------ */
  body > .nn-mobile-drawer{
    left:0!important;
    right:auto!important;
    transform:translateX(-104%)!important;
    box-shadow:16px 0 42px rgba(0,0,0,.16)!important;
  }
  body > .nn-mobile-drawer.is-open{transform:translateX(0)!important}

  /* ------------------------------------------------------------
   * Product-card purchase CTAs — mobile equivalent of approved desktop UI.
   * Applies to Homepage, Shop/Category/Search/Related and Empty Cart cards.
   * ------------------------------------------------------------ */
  .nn-product-card .nn-purchase-buttons-v1117,
  .nn-shop-product-action-v18 .nn-purchase-buttons-v1117,
  .nn-empty-product-info-v1112 .nn-purchase-buttons-v1117{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    margin:10px 0 0!important;
    padding:0!important;
    align-items:stretch!important;
  }
  .nn-product-card .nn-purchase-buttons-v1117.nn-purchase-count-1,
  .nn-shop-product-action-v18 .nn-purchase-buttons-v1117.nn-purchase-count-1,
  .nn-empty-product-info-v1112 .nn-purchase-buttons-v1117.nn-purchase-count-1{
    grid-template-columns:1fr!important;
  }
  .nn-product-card .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117,
  .nn-shop-product-action-v18 .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117,
  .nn-empty-product-info-v1112 .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    height:40px!important;
    margin:0!important;
    padding:0 6px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:7px!important;
    font-size:11px!important;
    font-weight:800!important;
    line-height:1!important;
    text-align:center!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    box-shadow:none!important;
  }
  .nn-product-card .nn-purchase-buttons-v1117>.nn-add-cart-v1117,
  .nn-shop-product-action-v18 .nn-purchase-buttons-v1117>.nn-add-cart-v1117,
  .nn-empty-product-info-v1112 .nn-purchase-buttons-v1117>.nn-add-cart-v1117{
    background:#fffdf8!important;
    color:var(--nn-green,#12372c)!important;
    border:1px solid var(--nn-green,#12372c)!important;
  }
  .nn-product-card .nn-purchase-buttons-v1117>.nn-buy-now-v1117,
  .nn-shop-product-action-v18 .nn-purchase-buttons-v1117>.nn-buy-now-v1117,
  .nn-empty-product-info-v1112 .nn-purchase-buttons-v1117>.nn-buy-now-v1117{
    background:var(--nn-green,#12372c)!important;
    color:#fff!important;
    border:1px solid var(--nn-green,#12372c)!important;
  }
  .nn-product-card .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117:hover,
  .nn-product-card .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117:focus,
  .nn-shop-product-action-v18 .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117:hover,
  .nn-shop-product-action-v18 .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117:focus{
    text-decoration:none!important;
  }

  /* Stable card geometry so short and long product names align their CTAs. */
  .nn-product-card{display:flex!important;flex-direction:column!important;height:100%!important}
  .nn-product-card .nn-product-info{display:flex!important;flex-direction:column!important;flex:1!important;min-width:0!important}
  .nn-product-card .nn-product-info h3{
    min-height:5.05em!important;
    margin-bottom:6px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .nn-product-card .nn-purchase-buttons-v1117{margin-top:auto!important}

  .nn-shop-product-info-v18{display:flex!important;flex-direction:column!important;height:100%!important;min-width:0!important}
  .nn-shop-product-info-v18 h2{
    min-height:5.05em!important;
    display:-webkit-box!important;
    -webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .nn-shop-product-action-v18{margin-top:auto!important;overflow:visible!important}

  /* ------------------------------------------------------------
   * Category image fallback — intentional medallion, not a raw stray letter.
   * ------------------------------------------------------------ */
  .nn-category-no-image{
    background:
      radial-gradient(circle at 25% 22%,rgba(197,146,50,.14),transparent 36%),
      linear-gradient(145deg,#f7efe2,#e8d8bf)!important;
  }
  .nn-category-no-image>.nn-category-fallback-initial{
    width:58px!important;
    height:58px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:#fffaf1!important;
    border:1px solid rgba(183,125,31,.38)!important;
    box-shadow:0 8px 22px rgba(55,39,16,.08)!important;
    color:#b77d1f!important;
    font-family:var(--nn-serif)!important;
    font-size:30px!important;
    font-weight:700!important;
    line-height:1!important;
    opacity:1!important;
  }

  /* ------------------------------------------------------------
   * Mobile My Account / Registration.
   * The theme-owned Woo-native form now renders on mobile as well; simplify
   * the desktop preset into a clean single-column account card.
   * ------------------------------------------------------------ */
  body.woocommerce-account .nn-account-auth-v1111{
    max-width:100%!important;
    padding:14px 14px calc(86px + env(safe-area-inset-bottom))!important;
  }
  body.woocommerce-account .nn-account-intro-v1111{
    padding:20px 18px!important;
    border-radius:12px 12px 0 0!important;
  }
  body.woocommerce-account .nn-account-intro-v1111 h1{font-size:34px!important;line-height:1.05!important}
  body.woocommerce-account .nn-account-intro-v1111>p:last-child{font-size:13px!important;line-height:1.55!important}
  body.woocommerce-account .nn-account-layout-v1111{
    display:block!important;
    min-height:0!important;
    padding:12px!important;
    border-radius:0 0 12px 12px!important;
  }
  body.woocommerce-account .nn-account-visual-v1111{display:none!important}
  body.woocommerce-account .nn-account-panels-v1111{width:100%!important;min-width:0!important}
  body.woocommerce-account .nn-account-panel-v1111{
    min-height:0!important;
    height:auto!important;
    padding:18px 16px!important;
    border-radius:10px!important;
  }
  body.woocommerce-account .nn-account-card-heading-v1111{gap:10px!important;margin-bottom:16px!important}
  body.woocommerce-account .nn-account-icon-v1111{width:44px!important;height:44px!important;flex-basis:44px!important}
  body.woocommerce-account .nn-account-card-heading-v1111 h2{font-size:26px!important}
  body.woocommerce-account .nn-account-card-heading-v1111 p{font-size:11.5px!important}
  body.woocommerce-account .nn-register-name-row-v1112{display:block!important;width:100%!important}
  body.woocommerce-account .nn-register-name-row-v1112 .form-row-first,
  body.woocommerce-account .nn-register-name-row-v1112 .form-row-last{
    float:none!important;
    width:100%!important;
    max-width:none!important;
    clear:both!important;
  }
  body.woocommerce-account .nn-account-panel-v1111 .form-row{margin:0 0 13px!important}
  body.woocommerce-account .nn-account-panel-v1111 input.input-text{min-height:48px!important;font-size:16px!important}
  body.woocommerce-account .nn-login-meta-v1111{gap:10px!important;flex-wrap:wrap!important}
  body.woocommerce-account .nn-account-tabs-v1111{margin:14px 14px 0!important;max-width:none!important}
  body.woocommerce-account .nn-account-tabs-v1111 button{min-height:48px!important}

  /* ------------------------------------------------------------
   * Mobile Lost Password — same approved visual family as desktop/success.
   * ------------------------------------------------------------ */
  body.woocommerce-lost-password .nn-lost-password-v1112{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
  body.woocommerce-lost-password .nn-lost-hero-v1112{min-height:150px!important;padding:22px 16px!important;background-position:center!important}
  body.woocommerce-lost-password .nn-lost-hero-inner-v1112{max-width:100%!important}
  body.woocommerce-lost-password .nn-lost-breadcrumb-v1112{font-size:11px!important;gap:6px!important;flex-wrap:wrap!important}
  body.woocommerce-lost-password .nn-lost-hero-v1112 h1{font-size:34px!important;line-height:1.05!important;margin:8px 0 8px!important}
  body.woocommerce-lost-password .nn-lost-hero-v1112 p{font-size:13px!important;line-height:1.5!important;max-width:100%!important}
  body.woocommerce-lost-password .nn-lost-body-v1112{padding:20px 14px!important}
  body.woocommerce-lost-password .nn-lost-card-v1112{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:24px 18px!important;
    border-radius:12px!important;
    box-sizing:border-box!important;
  }
  body.woocommerce-lost-password .nn-lost-icon-v1112{width:58px!important;height:58px!important;margin-bottom:14px!important}
  body.woocommerce-lost-password .nn-lost-card-v1112 h2{font-size:28px!important;line-height:1.1!important}
  body.woocommerce-lost-password .nn-lost-card-v1112>p{font-size:14px!important;line-height:1.55!important}
  body.woocommerce-lost-password .nn-lost-card-v1112 input.input-text,
  body.woocommerce-lost-password .nn-lost-card-v1112 button.button{min-height:48px!important;font-size:16px!important}
  body.woocommerce-lost-password .nn-lost-card-v1112 .nn-lost-or-v1112{margin:22px 0 16px!important}

  /* ------------------------------------------------------------
   * Mobile Empty Cart — compact approved hero + 2-column recommendations.
   * ------------------------------------------------------------ */
  body.nn-cart-empty-v111 .nn-entry-content{padding-bottom:calc(90px + env(safe-area-inset-bottom))!important}
  body.nn-cart-empty-v111 .nn-empty-cart-v1112{width:100%!important;max-width:100%!important;padding:0 14px!important;box-sizing:border-box!important}
  body.nn-cart-empty-v111 .nn-empty-cart-hero-v1112{
    min-height:220px!important;
    padding:24px 18px!important;
    border-radius:12px!important;
  }
  body.nn-cart-empty-v111 .nn-empty-cart-icon-v1112{width:56px!important;height:56px!important;margin-bottom:10px!important}
  body.nn-cart-empty-v111 .nn-empty-cart-icon-v1112 .nn-icon{width:27px!important;height:27px!important}
  body.nn-cart-empty-v111 .nn-empty-cart-hero-v1112 h2{font-size:26px!important;line-height:1.08!important;max-width:270px!important}
  body.nn-cart-empty-v111 .nn-empty-cart-hero-v1112 p{font-size:12.5px!important;line-height:1.5!important;margin-bottom:16px!important}
  body.nn-cart-empty-v111 .nn-empty-cart-shop-v1112{min-width:160px!important;min-height:44px!important}
  body.nn-cart-empty-v111 .nn-empty-cart-products-v1112{padding-top:30px!important}
  body.nn-cart-empty-v111 .nn-empty-cart-heading-v1112{grid-template-columns:38px auto 38px!important;gap:10px!important;margin-bottom:18px!important}
  body.nn-cart-empty-v111 .nn-empty-cart-heading-v1112 h2{font-size:26px!important}
  body.nn-cart-empty-v111 .nn-empty-product-grid-v1112{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  body.nn-cart-empty-v111 .nn-empty-product-card-v1112{border-radius:10px!important}
  body.nn-cart-empty-v111 .nn-empty-product-info-v1112{padding:10px!important}
  body.nn-cart-empty-v111 .nn-empty-product-info-v1112 h3{
    min-height:4.8em!important;
    font-size:14px!important;
    line-height:1.2!important;
    display:-webkit-box!important;
    -webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  body.nn-cart-empty-v111 .nn-empty-product-price-v1112{font-size:13px!important}
  body.nn-cart-empty-v111 .nn-empty-sale-badge-v1112{width:40px!important;height:40px!important;top:8px!important;right:8px!important;font-size:9px!important}
}

@media (max-width:360px){
  .nn-product-card .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117,
  .nn-shop-product-action-v18 .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117,
  .nn-empty-product-info-v1112 .nn-purchase-buttons-v1117>.nn-purchase-btn-v1117{
    font-size:10.5px!important;
    padding-inline:4px!important;
  }
}
