/* Super Market iOS Telegram Mini App v1.0 incremental layer.
   Keeps the official blue brand and existing business flows. */
:root{
  --brand:#1688f5;
  --brand-strong:#0872d6;
  --brand-soft:#eaf5ff;
  --ios-canvas:#f5f6f8;
  --ios-surface:#fff;
  --ios-text:#111318;
  --ios-muted:#68707d;
  --ios-quiet:#9299a5;
  --ios-line:#e6e8ec;
  --keyboard-offset:0px;
}

html{background:var(--ios-canvas);-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{background:var(--ios-canvas);color:var(--ios-text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","SF Pro Text","Segoe UI",sans-serif}
button,input,select,textarea{font-family:inherit}
button{touch-action:manipulation}
.primary-button,.buy-product,.publish-submit,.pay-confirm-button,.canvas-primary,.canvas-merchant-head>button{
  background:var(--brand);box-shadow:none
}
.primary-button:hover,.buy-product:hover,.pay-confirm-button:hover{background:var(--brand-strong);box-shadow:none}
.primary-button:active,.buy-product:active,.secondary-button:active,button:active{transform:scale(.98)}

/* Remove duplicate English eyebrow copy while retaining semantic Chinese labels. */
.page-header-block>span,
.market-page-head>span,
.market-page-head>div>span,
.ux-category-head>div>span,
.search-suggestion-panel>div>span,
.modal-heading>div>span,
.merchant-center-hero>span,
.chat-product-card>span{display:none!important}

.bottom-nav button.is-active,
.ux-primary-tabs button.is-active,
.ux-result-type-tabs button.is-active,
.ux-after-sale-tabs button.is-active,
.canvas-search-tabs button.is-active{
  background:var(--brand-soft)!important;color:var(--brand)!important;box-shadow:none!important
}
.bottom-nav button.is-active small{color:var(--brand)!important}
.bottom-nav button.is-active:before{background:transparent!important;box-shadow:none!important}
.bottom-nav .nav-badge{background:var(--brand)!important}

@media(max-width:780px){
  .app-header{
    height:calc(52px + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) 16px 0;
    grid-template-columns:1fr auto;
    background:rgba(245,246,248,.94);
    border-bottom:1px solid rgba(230,232,236,.88);
    backdrop-filter:blur(16px) saturate(1.15);
    -webkit-backdrop-filter:blur(16px) saturate(1.15)
  }
  .brand-button{width:40px;height:40px;border-radius:12px}.header-actions{grid-column:2}.header-actions .icon-button{display:none}.user-avatar{width:40px;height:40px;border-radius:12px}
  .app-main{padding:12px 16px calc(84px + env(safe-area-inset-bottom,0px))}
  .app-shell.hide-nav .app-header{display:none}
  .app-shell.hide-nav .app-main{padding-top:12px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .page{min-height:calc(100dvh - 64px)}

  .bottom-nav{
    bottom:6px;width:calc(100% - 24px);height:calc(60px + env(safe-area-inset-bottom,0px));
    padding:4px 7px calc(4px + env(safe-area-inset-bottom,0px));
    border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(17,19,24,.12)
  }
  .bottom-nav>button{min-height:52px;border-radius:15px;gap:2px}.bottom-nav .nav-icon{width:21px;height:21px}.bottom-nav small{font-size:11px;line-height:14px}.bottom-nav .nav-badge{top:1px;right:7px}

  /* Home: 52 header + compact brand/search + 4x2 categories. */
  .home-brand{min-height:100px;margin:0;padding:14px 16px;border-radius:16px;grid-template-columns:1fr;background:#fff;border-color:var(--ios-line)}
  .home-brand>div:first-child{max-width:none}.home-brand>div:first-child>span{font-size:12px}.home-brand h1{margin:3px 0 4px;font-size:25px;line-height:1.08;letter-spacing:-.035em}.home-brand p{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.home-brand-status{display:none}
  .global-search-card{min-height:52px;height:52px;margin:12px 0 16px;padding:0 14px;border-radius:14px;box-shadow:none}.global-search-card b{font-size:15px}.global-search-card small{font-size:11px}.global-search-card kbd{display:none}
  #page-home>.section-heading{margin:14px 0 10px;min-height:36px}.section-heading h2{font-size:20px;line-height:28px}.section-heading span{font-size:12px}.section-heading button{min-height:44px;font-size:13px}
  .category-grid{gap:8px}.category-card.ux-home-category{min-height:80px;height:80px;padding:8px 5px;border-radius:14px}.ux-home-category .category-icon{width:34px;height:34px;border-radius:10px}.ux-home-category b{font-size:11px;line-height:15px}.ux-home-category small{display:none}
  .trust-strip{min-height:68px;margin:12px 0 0;padding:10px 12px;grid-template-columns:36px 1fr auto;gap:10px;border-radius:14px}.trust-strip .trust-icon{width:36px;height:36px;border-radius:11px}.trust-strip h3{font-size:14px}.trust-strip p{display:none}.trust-strip button{grid-column:auto;width:auto;min-height:44px;padding:0 11px;font-size:12px}
  #page-home .trust-strip + .section-heading{margin-top:14px}

  /* Categories: first result starts near 340px on target iPhones. */
  .ux-category-head{height:44px;min-height:44px;padding:0;display:grid;grid-template-columns:1fr 44px;align-items:center;gap:8px}
  .ux-category-head>div{min-width:0}.ux-category-head h1{margin:0;font-size:26px;line-height:34px}.ux-category-head p{display:none}.ux-category-head .ux-search-entry{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:#fff;box-shadow:none}.ux-category-head .ux-search-entry b{display:none}.ux-category-head .ux-search-entry .search-icon{margin:0}
  .ux-primary-tabs{position:sticky;top:calc(52px + env(safe-area-inset-top,0px));height:36px;margin:0 -16px;padding:0 16px;border:0;border-radius:0;gap:6px;background:rgba(245,246,248,.95)}
  .ux-primary-tabs button{height:36px;min-height:36px;padding:0 12px;border-radius:999px;font-size:12px}
  .ux-category-path{height:16px;margin:3px 0;font-size:11px;line-height:16px}
  .ux-subcategory-panel{min-height:48px;height:48px;padding:6px;border-radius:14px;display:flex;align-items:center;gap:6px;overflow:hidden}.ux-subcategory-panel>.ux-section-title{display:none}.ux-subcategory-chips{flex:1;flex-wrap:nowrap;gap:6px;margin:0;overflow-x:auto;scrollbar-width:none}.ux-subcategory-chips::-webkit-scrollbar{display:none}.ux-subcategory-chips button{height:36px;min-height:36px;padding:0 12px;font-size:12px}.ux-expand-button{flex:0 0 auto;width:40px;height:36px;min-height:36px;padding:0;font-size:0}.ux-expand-button span{font-size:14px}
  .ux-result-type-tabs{height:36px;margin:6px 0;padding:2px;border-radius:11px}.ux-result-type-tabs button{min-height:32px;height:32px;font-size:13px}
  .ux-category-results,.ux-category-merchants{margin:0 -16px;padding:4px 16px 16px;border-radius:0;border-left:0;border-right:0}.ux-result-toolbar{height:48px;margin:0 0 6px;align-items:center}.ux-result-toolbar>div>span{display:none}.ux-result-toolbar h2{margin:0;font-size:18px;line-height:24px}.ux-result-toolbar small{font-size:11px}.ux-result-toolbar label{font-size:11px}.ux-result-toolbar select{min-height:40px;height:40px;font-size:13px}
  .ux-subcategory-panel.is-expanded{left:8px;right:8px;bottom:8px;height:auto;max-height:82dvh;padding:14px;border-radius:24px;display:block;overflow:auto;background:#fff;box-shadow:0 0 0 100vmax rgba(17,19,24,.34),0 20px 70px rgba(17,19,24,.25)}.ux-subcategory-panel.is-expanded:before{display:none}.ux-subcategory-panel.is-expanded>.ux-section-title{position:sticky;top:-14px;z-index:2;display:flex;padding:6px 0 12px;background:#fff}.ux-subcategory-panel.is-expanded .ux-subcategory-chips{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.ux-subcategory-panel.is-expanded .ux-expand-button{position:sticky;bottom:0;width:100%;height:48px;margin-top:12px;background:var(--brand);color:#fff;border-radius:12px;font-size:14px}.ux-subcategory-panel.is-expanded .ux-expand-button span{display:none}
  .ux-result-type-tabs button.is-active,.ux-primary-tabs button.is-active{background:var(--brand-soft)!important;color:var(--brand)!important}

  /* Cards and detail actions. */
  .product-grid{gap:8px}.product-card.ux-product-card{border-radius:14px}.product-cover{aspect-ratio:1.15/1}.product-content{padding:10px}.product-content h3{min-height:42px;margin:5px 0 4px;font-size:14px;line-height:21px}.product-content>p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ux-card-path{font-size:11px}.ux-decision-facts{margin:6px 0}.ux-decision-facts span{padding:4px 6px;font-size:10px}.product-proof{font-size:10px}.product-price{margin-top:7px;padding-top:7px}.product-price b{font-size:16px}.favorite-button{width:36px;height:36px;min-height:36px}
  .canvas-product-detail .product-visual{height:212px;min-height:0;max-height:224px;aspect-ratio:auto;border-radius:14px}.digital-media-preview{height:212px;min-height:0;max-height:224px}.product-copy h1,.digital-title h1{font-size:26px;line-height:34px}.price-block strong{font-size:28px}.product-actions.market-actions{bottom:6px;width:calc(100% - 24px);min-height:calc(64px + env(safe-area-inset-bottom,0px));padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));border-radius:18px}.product-actions.market-actions button{min-height:48px;font-size:14px}.product-page{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  /* Trade center: status, service, list and first recent order share the first screen. */
  #page-tradeOverview .market-page-head{min-height:64px;padding:2px 0 8px}.market-page-head h1,.page-header-block h1{margin:0 0 3px;font-size:26px;line-height:34px}.market-page-head p,.page-header-block p{font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ux-status-row{height:64px;margin:8px 0;gap:6px}.ux-status-row button{min-height:64px;padding:7px 3px;border-radius:13px}.ux-status-row b{font-size:19px}.ux-status-row span{font-size:11px}
  .ux-after-sale-entry{min-height:64px;height:64px;padding:8px 12px;border-radius:14px}.ux-after-sale-entry>div:first-child>span{display:none}.ux-after-sale-entry h2{margin:0 0 2px;font-size:16px}.ux-after-sale-entry p{font-size:11px;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ux-after-sale-entry>div:last-child>b{font-size:19px}.ux-after-sale-entry button{min-height:30px;padding:5px 9px;font-size:11px}
  .ux-trade-center-list{margin-top:8px;padding:11px 12px;border-radius:14px}.ux-trade-center-list .ux-section-title h2{font-size:16px}.ux-trade-center-list .ux-section-title strong{font-size:15px}.ux-trade-peek{margin:7px 0}.ux-trade-peek span{padding:4px 7px}.ux-trade-peek span:nth-child(n+3){display:none}.ux-trade-peek b,.ux-trade-peek small{font-size:10px}.ux-trade-center-list .ux-inline-actions{gap:7px}.ux-trade-center-list .ux-inline-actions button{min-height:42px}.ux-recent-orders{margin-top:10px}.ux-recent-orders>.ux-section-title{min-height:42px}.ux-recent-orders>.ux-section-title h2{font-size:18px}.ux-recent-orders>.ux-section-title>button{min-height:40px}.ux-payment-summary{min-height:64px;padding:10px 12px;border-radius:14px}

  /* Orders, after-sales and forms. */
  .ux-order-search input,.market-form input,.market-form select,.market-form textarea,.publish-form input,.publish-form select,.publish-form textarea,.chat-composer input{font-size:16px}
  .ux-order-tabs button,.ux-after-sale-tabs button{min-height:40px;font-size:12px}.ux-order-after-sale{min-height:64px}.ux-order-body{grid-template-columns:48px 1fr}.ux-order-card{border-radius:14px}.ux-order-detail-hero,.ux-after-sale-hero{padding:16px;border-radius:16px}.ux-order-detail-hero h1,.ux-after-sale-hero h1{font-size:26px}.ux-after-sale-list{grid-template-columns:1fr}.ux-after-sale-card{border-radius:14px}.ux-after-sale-card>button{padding:14px}.market-form textarea,.publish-form textarea{min-height:112px}

  /* Profile and merchant mode. */
  .market-profile-hero{min-height:140px;height:140px;padding:14px 16px;border-radius:16px!important;display:grid;grid-template-columns:58px 1fr;grid-template-rows:1fr 44px;gap:8px 12px}.market-profile-hero .profile-avatar{width:58px;height:58px;border-radius:16px}.market-profile-hero>div:nth-child(2) h1{font-size:22px}.market-profile-hero>div:nth-child(2) p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.market-profile-hero>button{grid-column:1/-1;min-height:44px}.profile-stats{height:64px;margin:10px 0}.profile-menu button{min-height:62px}.profile-menu b{font-size:14px}.profile-menu small{font-size:11px}
  .canvas-merchant-head{min-height:86px;padding:4px 0 10px}.canvas-merchant-head h1{font-size:28px}.canvas-merchant-head p{font-size:12px}.canvas-merchant-head>button{min-height:44px;padding:0 14px}.canvas-credit{padding:15px;border-radius:16px;gap:10px}.canvas-credit strong{font-size:28px}.canvas-credit button{min-height:44px}.ux-merchant-task-grid button{min-height:76px;padding:12px}.canvas-quick{margin-top:14px}.canvas-quick>div:last-child button{min-height:44px}

  .modal-backdrop{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}.modal-sheet{max-height:82dvh;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:24px;overflow:auto}.modal-heading{position:sticky;top:-10px;z-index:2;padding-top:10px;background:#fff}.modal-heading button{min-width:44px;min-height:44px}
}

html.keyboard-open .bottom-nav{display:none!important}
html.sheet-open .bottom-nav{display:none!important}
html.keyboard-open .product-actions,
html.keyboard-open .chat-composer{bottom:calc(var(--keyboard-offset) + 8px)!important}
html.keyboard-open .modal-backdrop{align-items:flex-end;padding-bottom:calc(var(--keyboard-offset) + 8px)}

@media(min-width:421px) and (max-width:780px){
  .app-main{padding-left:18px;padding-right:18px}.ux-primary-tabs{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}.ux-category-results,.ux-category-merchants{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
}

@media(prefers-reduced-motion:reduce){.page.is-active,.splash-mark{animation:none!important}}