/* HAOCANG mobile layout fix — 2026-09-28
   Loaded last on every page; scoped to phones only. */
/* ---------- All widths: cart / order badges ---------- */
html body .header .controls>button[onclick*="toggleCart"]{position:relative!important;overflow:visible!important}
html body .header .controls>button[onclick*="toggleCart"] .cart-count,
html body .header .controls>button[onclick*="toggleCart"] .cartCount{position:absolute!important;top:-7px!important;right:-7px!important;left:auto!important;bottom:auto!important;margin:0!important;box-sizing:border-box!important;min-width:18px!important;height:18px!important;padding:0 4px!important;font-size:10px!important;line-height:14px!important;border:2px solid #0b2336!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;transform:none!important}
html body .header .hc-zero,
html body .header .controls>button[onclick*="toggleCart"] .hc-zero{display:none!important}

@media (max-width:760px){

  /* ---------- Header ---------- */
  html body .header{width:100%!important;max-width:100%!important;left:0!important;right:0!important;box-sizing:border-box!important}
  html body .header .wide{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0 12px!important;gap:6px!important;min-width:0!important}
  html body .header .wide>a:first-child{flex:0 1 auto!important;min-width:0!important}
  html body .header .controls{flex:0 0 auto!important;min-width:0!important}
  html body .header .controls{margin-left:auto!important;gap:6px!important}
  html body .header .wide>a:first-child{order:1!important}
  html body .hc-mobile-menu-btn{display:grid!important;order:2!important}
  html body .header .controls{order:3!important}
  html body .header .lang-current{width:auto!important;min-width:52px!important;max-width:none!important;padding:0 22px 0 10px!important;justify-content:flex-start!important}
  html body .header .lang-current img{margin:0!important}
  html body .header .lang-current::after{right:8px!important}
  html body .header #curSel{display:block!important;width:68px!important;min-width:68px!important;font-size:12px!important}
  html body .header .controls>button[onclick*="toggleCart"]{overflow:visible!important}
  html body .header .cartCount,
  html body .header .cart-count{position:absolute!important;top:-5px!important;right:-5px!important;left:auto!important;bottom:auto!important;box-sizing:border-box!important;min-width:18px!important;width:auto!important;height:18px!important;font-size:10px!important;line-height:14px!important;padding:0 4px!important;border:2px solid #0b2336!important;border-radius:999px!important}
  html body .header .cart-count.hc-zero,html body .header .cartCount.hc-zero{display:none!important}

  /* ---------- Headings: no orphan characters ---------- */
  html body h1,html body h2,html body h3{text-wrap:balance}

  /* ---------- Hot picks ---------- */
  html body .hc-hot-badge{align-self:flex-start!important;width:fit-content!important;max-width:100%!important;font-size:10.5px!important}
  html body .hc-hot-badge-protect,html body .hc-hot-chip,html body .hc-side-label{font-size:11px!important}
  html body .hc-hot-panel small,html body .hc-hot-panel em,html body .hc-hot-intro{font-size:12px!important;line-height:1.5!important}

  /* ---------- Trust strip: 2x2 grid instead of clipped scroller ---------- */
  html body .hc-trust{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;overflow:visible!important}
  html body .hc-trust-item{width:auto!important;min-width:0!important;flex:none!important;padding:10px!important;gap:8px!important}
  html body .hc-trust-item b{font-size:12.5px!important}
  html body .hc-trust-item span:not(.hc-trust-icon),html body .hc-trust-item p,html body .hc-trust-item small{font-size:11px!important;line-height:1.4!important}
  html body .hc-trust-icon{width:28px!important;height:28px!important;flex:0 0 28px!important}

  /* ---------- Intent chips: icon no longer overlaps text ---------- */
  html body .intent-chip{padding:8px 12px 8px 28px!important;font-size:12px!important;min-height:36px!important}
  html body .intent-chip:before{left:10px!important}
  html body .intent-chips{scroll-padding-left:12px}

  /* ---------- Marketplace head ---------- */
  html body #market .market-head{align-items:stretch!important}
  html body #market .market-head>div:first-child{width:auto!important;text-align:left!important}
  html body #market .market-head p{font-size:12px!important}

  /* ---------- Category sections ---------- */
  html body .product-section{padding:16px 14px!important}
  html body #market .product-section .section-title{grid-template-columns:44px minmax(0,1fr)!important;column-gap:10px!important;align-items:start!important;margin:0 0 12px!important;padding-top:0!important;min-height:0!important}
  html body #market .product-section .section-title .hc-section-platform{grid-row:1/4!important;width:44px!important;height:44px!important}
  html body #market .product-section .section-title>.eyebrow,
  html body #market .product-section .section-title>h3,
  html body #market .product-section .section-title>p{grid-column:2!important;margin-left:0!important;padding-left:0!important}
  html body #market .product-section .section-title p{font-size:12px!important;line-height:1.45!important}

  /* ---------- Product rows (list view) ---------- */
  html body #market:not(.grid-view) .product-list .product-row{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    grid-template-areas:"icon info info" "price price stock" "actions actions actions"!important;
    column-gap:10px!important;row-gap:2px!important;align-items:center!important;
    padding:12px!important;min-height:0!important}
  html body #market:not(.grid-view) .product-list .product-row .product-info{display:contents!important}
  html body #market:not(.grid-view) .product-list .product-row .picon{grid-area:icon!important;width:44px!important;height:44px!important;align-self:start!important}
  html body #market:not(.grid-view) .product-list .product-row .product-info>div:not(.picon){grid-area:info!important;min-width:0!important}
  html body #market:not(.grid-view) .product-list .product-row .pname{font-size:14.5px!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important;-webkit-line-clamp:unset!important;display:block!important}
  html body #market:not(.grid-view) .product-list .product-row .pprice{grid-area:price!important;font-size:18px!important;white-space:nowrap!important;margin:4px 0 0!important;align-self:end!important}
  html body #market:not(.grid-view) .product-list .product-row .stock{grid-area:stock!important;margin:0!important;align-self:center!important;justify-self:end!important;margin-top:4px!important}
  html body #market:not(.grid-view) .product-list .product-row .stock b{font-size:11px!important}
  html body #market:not(.grid-view) .product-list .product-row .row-actions{grid-area:actions!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:auto!important;min-width:0!important;margin-top:8px!important}
  html body #market:not(.grid-view) .product-list .product-row .row-actions .btn{width:100%!important;justify-content:center!important;min-width:0!important;height:38px!important;min-height:38px!important;padding:0 12px!important;font-size:12px!important;white-space:nowrap!important}
  html body .merch-badge{font-size:10.5px!important}
  html body .anchor-note{font-size:11px!important;white-space:normal!important}

  /* ---------- Product detail ---------- */
  html body .decision-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  html body .decision-cell{min-width:0!important}
  html body .decision-cell small{font-size:11px!important}
  html body .decision-cell b{font-size:13px!important}
  html body .breadcrumb{font-size:12px!important}
  html body .breadcrumb a{display:inline-block!important;padding:8px 0!important}
  html body .reco-grid.related .reco-card{flex:0 0 78%!important;min-width:0!important;max-width:78%!important}
  html body .reco-grid.related{scroll-snap-type:x mandatory;scroll-padding-left:0}
  html body .reco-grid.related .reco-card{scroll-snap-align:start}

  /* Sticky buy bar (injected by hc-mobile-fix.js) */
  .hc-sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);
    border-top:1px solid #dfe7f0;box-shadow:0 -6px 20px rgba(8,28,44,.08);
    transform:translateY(110%);transition:transform .2s ease}
  .hc-sticky-buy.show{transform:none}
  .hc-sticky-buy .hc-sb-meta{min-width:0;flex:1}
  .hc-sticky-buy .hc-sb-name{font-size:11.5px;color:#5b6b7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hc-sticky-buy .hc-sb-price{font-size:19px;font-weight:800;color:#1769ff;line-height:1.2;white-space:nowrap}
  .hc-sticky-buy button{flex:0 0 auto;height:44px;padding:0 20px;border:0;border-radius:12px;background:#1769ff;color:#fff;font-weight:800;font-size:14px}
  body.hc-has-sticky-buy{padding-bottom:76px!important}

  /* ---------- Package comparison table fits the screen ---------- */
  html body .hc-compare{overflow-x:visible!important}
  html body .hc-compare table{width:100%!important;min-width:0!important;table-layout:fixed!important}
  html body .hc-compare th,html body .hc-compare td{padding:10px 4px!important;font-size:12px!important;text-align:center!important;word-break:keep-all}
  html body .hc-compare th:first-child,html body .hc-compare td:first-child{width:40%!important;text-align:left!important;padding-left:12px!important;word-break:normal}

  /* ---------- Checkout ---------- */
  html body.hc-checkout-empty .checkout-panel .hc-intent,
  html body.hc-checkout-empty .checkout-panel .telegram-cta,
  html body.hc-checkout-empty .checkout-panel .copy-order,
  html body.hc-checkout-empty .checkout-panel .checkout-note{display:none!important}
  
  html body label:has(>input[type=radio]){cursor:pointer}

  /* ---------- Cart drawer ---------- */
  html body .cart-drawer{left:12px!important;right:12px!important;width:auto!important;top:76px!important;max-height:calc(100vh - 96px)!important;z-index:60!important;padding:16px!important}
  .hc-cart-backdrop{position:fixed;inset:0;z-index:55;background:rgba(6,20,33,.45);opacity:0;pointer-events:none;transition:opacity .15s}
  .hc-cart-backdrop.show{opacity:1;pointer-events:auto}
  html body .cart-drawer .cart-item{display:flex!important;align-items:center!important;gap:10px!important;padding:12px 0!important;border-bottom:1px solid #edf2f7}
  html body .cart-drawer .cart-item>div{flex:1;min-width:0}
  html body .cart-drawer .cart-item small{font-size:12.5px!important}
  html body .cart-drawer .cart-item button{width:auto!important;min-width:0!important;height:36px!important;padding:0 10px!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#8a97a8!important;font-size:0!important}
  html body .cart-drawer .cart-item button::after{content:attr(data-hc-label);font-size:12.5px;font-weight:600;text-decoration:underline}
  html body .cart-drawer .empty{padding:18px 0 6px!important;text-align:center;color:#5b6b7f}
  html body .cart-drawer.hc-empty a[href="checkout.html"]{display:none!important}
  .hc-drawer-browse{display:none}
  html body .cart-drawer.hc-empty .hc-drawer-browse{display:block;text-align:center;margin-top:14px}

  /* ---------- Checkout with items ---------- */
  html body .order-shell{padding-left:16px!important;padding-right:16px!important}
  html body .hc-qty button{width:38px!important;height:38px!important;font-size:16px!important}
  html body .hc-qty input,html body .hc-qty span{min-width:34px!important;font-size:14px!important;text-align:center}
  html body .hc-remove{font-size:13px!important;padding:10px 4px!important}
  html body .hc-select-tools{font-size:13px!important}
  html body .hc-select-tools button{font-size:13px!important;padding:8px 6px!important}
  html body .checkout-next b{font-size:12.5px!important}
  html body .checkout-next span{font-size:11.5px!important}

  /* ---------- Marketplace top: one consistent 12px rhythm ---------- */
  html body #market{gap:0!important}
  /* chips + category + search = one filter group, kept tight */
  html body #market>.catalog{margin-top:6px!important}
  html body #market>.search{margin-top:6px!important}
  html body #market>.market-head{margin-top:10px!important}
  html body #market>.intent-chips,
  html body #market>.catalog,
  html body #market>.search,
  html body #market>.market-head{margin-left:0!important;margin-right:0!important;margin-bottom:0!important}
  html body #market>.intent-chips{margin-top:0!important}
  html body #market>.intent-chips{margin:0 -12px!important;padding:0 12px!important;scroll-padding-inline:12px}
  html body #market>.intent-chips::after{content:"";flex:0 0 4px}
  html body #market>.catalog{overflow-x:auto!important;scrollbar-width:none;padding:4px!important;gap:4px!important;scroll-padding-inline:6px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  html body #market>.catalog::-webkit-scrollbar{display:none}
  html body #market>.catalog::after{content:"";flex:0 0 18px}
  html body #market>.catalog button{flex:0 0 auto!important;font-size:12px!important;padding:0 12px!important;height:36px!important}
  html body #market>.search{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:stretch!important}
  html body #market>.search input,
  html body #market>.search button{height:44px!important;min-height:44px!important;box-sizing:border-box!important;margin:0!important}
  html body #market>.search input{font-size:14px!important;padding:0 14px!important}
  html body #market>.search button{padding:0 18px!important;font-size:14px!important}
  html body #market>.market-head{padding:12px 14px!important;gap:10px!important}
  html body #market>.market-head .eyebrow{font-size:10.5px!important;margin:0 0 2px!important;line-height:1.3!important}
  html body #market>.market-head h2{margin:0!important;font-size:22px!important;line-height:1.25!important}
  html body #market>.market-head p{margin:4px 0 0!important;line-height:1.5!important}
  html body #market .market-tools{margin:0!important;align-items:center!important;gap:8px!important}
  html body #market .market-tools select{height:38px!important;font-size:12.5px!important;padding:0 30px 0 12px!important;min-width:120px!important}
  html body #market .view-btn{width:38px!important;height:38px!important}
  html body #market>.product-section{margin:12px 0 0!important}

  /* ---------- Section spacing (page was ~7.8k px tall) ---------- */
  html body .market{gap:14px!important}

  /* ---------- Footer tap targets ---------- */
  html body .footer-grid a{font-size:13px!important;padding:10px 14px 10px 0!important;display:inline-block!important}
  html body .footer-grid h4{font-size:13px!important}
}

@media (max-width:400px){
  html body .decision-grid{grid-template-columns:1fr!important}
}
@media (max-width:359px){
  html body .header #curSel{display:none!important}
  html body #market:not(.grid-view) .product-list .product-row .row-actions .btn{padding:0 9px!important;font-size:11.5px!important}
}