/* Webdeks Mobile Scale Fit Patch v1
   Purpose: make the current design fit better in mobile/PWA without changing layout or features. */
:root{
  --wdk-mobile-side:14px;
  --wdk-mobile-side-sm:12px;
}

@media (max-width:860px){
  html{
    font-size:14.5px!important;
    overflow-x:hidden!important;
  }
  body{
    font-size:14px!important;
    line-height:1.45!important;
    overflow-x:hidden!important;
    background:#f5f8fc!important;
  }

  /* global page breathing room */
  .container,
  .wrap,
  .page-wrap,
  .market-wrap,
  .seller-wrap,
  .seller-page,
  .seller-dashboard,
  .dashboard-wrap,
  .content,
  .main,
  .page,
  .bi-wrap,
  .admin-main > section,
  .admin-main > .wrap,
  .admin-main > .container{
    width:calc(100% - (var(--wdk-mobile-side) * 2))!important;
    max-width:calc(100% - (var(--wdk-mobile-side) * 2))!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  /* prevent cards/sections from touching the screen edge */
  section,
  .section,
  .panel,
  .card,
  .hero,
  .hero-card,
  .seller-hero,
  .seller-plan-wrap,
  .seller-plans,
  .seller-application,
  .wd71-shelf,
  .wd71-hero,
  .wd71-panel,
  .pd80-hero,
  .pd80-body,
  .cart-page-v78,
  .cart-related-v78{
    box-sizing:border-box!important;
  }

  .card,
  .panel,
  .product-card,
  .category-card,
  .seller-plan-card,
  .seller-stat-card,
  .cart-item-v79,
  .cart-summary-v78,
  .pd80-media-card,
  .pd80-summary-card,
  .pd80-panel,
  .pd80-side-card,
  .pd80-seller-card{
    border-radius:20px!important;
  }

  /* scale down large typography only */
  h1{font-size:clamp(26px,7vw,40px)!important;line-height:1.08!important;letter-spacing:-.04em!important;}
  h2{font-size:clamp(22px,5.8vw,32px)!important;line-height:1.12!important;letter-spacing:-.035em!important;}
  h3{font-size:clamp(18px,4.8vw,24px)!important;line-height:1.18!important;}
  p,li,label,input,select,textarea,button,a{font-size:14px;}

  /* forms should feel like app controls, not oversized browser controls */
  input,select,textarea{
    min-height:42px!important;
    padding:10px 12px!important;
    border-radius:13px!important;
    font-size:14px!important;
    box-sizing:border-box!important;
  }
  textarea{min-height:92px!important;}
  .btn,button,a.btn,
  input[type="submit"]{
    min-height:42px!important;
    padding:10px 14px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }

  /* tighten giant color cards */
  .stats-card,
  .seller-stat-card,
  .dashboard-card,
  .metric-card,
  .wd-card,
  .admin-card,
  .payout-card{
    padding:18px!important;
    min-height:auto!important;
  }

  /* grids: keep one column but with spacing */
  .grid,
  .grid2,
  .grid3,
  .grid4,
  .cards,
  .product-grid,
  .category-grid,
  .seller-grid,
  .dashboard-grid,
  .bi-grid,
  .bi-cards{
    gap:14px!important;
  }

  /* public header/nav should not force horizontal overflow */
  .topbar,
  .site-header,
  header,
  .nav,
  .navbar{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* footer spacing above bottom app nav */
  footer,
  .footer{
    padding-left:var(--wdk-mobile-side)!important;
    padding-right:var(--wdk-mobile-side)!important;
    padding-bottom:110px!important;
  }

  /* PWA bottom nav slightly smaller so it does not feel too wide */
  .wdk-bottom-nav{
    left:14px!important;
    right:14px!important;
    height:62px!important;
    border-radius:22px!important;
    padding:6px!important;
  }
  .wdk-bottom-nav a{border-radius:16px!important;}
  .wdk-bottom-nav a span{font-size:16px!important;}
  .wdk-bottom-nav a b{font-size:10.5px!important;}
  .wdk-install-btn{
    right:18px!important;
    bottom:calc(84px + var(--wdk-safe-bottom,0px))!important;
    padding:11px 15px!important;
    font-size:14px!important;
  }
}

@media (max-width:520px){
  :root{--wdk-mobile-side:12px;}
  html{font-size:14px!important;}
  body{font-size:13.5px!important;}
  .container,
  .wrap,
  .page-wrap,
  .market-wrap,
  .seller-wrap,
  .seller-page,
  .seller-dashboard,
  .dashboard-wrap,
  .content,
  .main,
  .page,
  .bi-wrap,
  .admin-main > section,
  .admin-main > .wrap,
  .admin-main > .container{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
  }
  .card,
  .panel,
  .product-card,
  .category-card,
  .seller-plan-card,
  .seller-stat-card,
  .cart-item-v79,
  .cart-summary-v78,
  .pd80-media-card,
  .pd80-summary-card,
  .pd80-panel,
  .pd80-side-card,
  .pd80-seller-card{
    border-radius:18px!important;
  }
  .wdk-bottom-nav{left:12px!important;right:12px!important;}
}

/* Admin mobile correction: keep design, just make it less edge-to-edge */
@media (max-width:850px){
  .admin-layout .admin-main{
    padding:14px 0 112px!important;
  }
  .admin-main h1{font-size:28px!important;}
  .admin-main .hero,
  .admin-main .panel,
  .admin-main .card,
  .admin-main .table-wrap{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .admin-menu-btn{
    font-size:14px!important;
    padding:12px 16px!important;
  }
}