/* HaoYang Mall storefront visual-only incremental layer. No API/payment/store logic. */
:root {
  --acid: #efcb83;
  --bg: #100d18;
  --panel: #1b1527;
  --panel-2: #241a31;
  --line: #42334d;
  --muted: #a99bad;
}
html, body { background: #100d18; }
body { background: radial-gradient(ellipse at 50% 0%, #34203f 0%, #15101e 35%, #0d0b15 75%); }
.market-shell { max-width: 560px; background: #100d18; color:#f7f2f8; box-shadow: 0 14px 55px #0007; }
.tg-mini-app .market-shell { max-width:none; }
.market-header { background:rgba(20,13,30,.96); border-bottom-color:#3b2949; }
.icon-button { color:#f2dba9; border-color:#55416b; background:#201729; }
.icon-button:hover { border-color:#9c73b3; }
.brand-block > span, .page-heading > span, .section-title > div > span, .featured-copy > span, .detail-code, .detail-label, .detail-description > span { color:#e9c479; }
.brand-block strong { color:#fff7ee; }
.brand-block small { color:#b5a9b9; }
/* Header: existing search button still opens the existing real search drawer. */
.market-shell:has(> .home-page) .market-header { flex-wrap:wrap; gap:10px; padding:calc(10px + var(--safe-top,0px)) 14px 12px; min-height:0; }
.market-shell:has(> .home-page) .market-header .brand-block { position:relative; width:100%; flex:1 1 100%; padding:8px 0 7px 53px; min-height:55px; }
.market-shell:has(> .home-page) .market-header .brand-block::before {
  content:''; position:absolute; top:4px; left:0; width:44px; height:44px;
  background:#251733 url('/assets/hm-brand-avatar.jpg') center/cover no-repeat;
  border:1px solid #88609d; border-radius:13px;
}
.market-shell:has(> .home-page) .market-header .brand-block::after {
  content:'✈ Telegram 官方店'; position:absolute; top:10px; right:0; max-width:41%;
  border:1px solid #a47b5d; border-radius:999px; padding:5px 8px;
  color:#f3cd82; font-size:10px; font-weight:750; line-height:1.2;
  white-space:nowrap; background:#251727;
}
.market-shell:has(> .home-page) .market-header .brand-block > span { display:none; }
.market-shell:has(> .home-page) .market-header .brand-block strong { font-size:17px; margin:1px 0 0; max-width:52%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.market-shell:has(> .home-page) .market-header .brand-block small { font-size:9px; margin-top:5px; }
.market-shell:has(> .home-page) .market-header .search-trigger {
  display:flex; order:2; flex:1 1 100%; width:100%; min-height:43px; height:43px;
  align-items:center; justify-content:flex-start; padding:0 14px; gap:10px;
  border:1px solid #8960a0; border-radius:28px; color:#d9c6e6;
  background:linear-gradient(100deg,#231a31,#1a1427);
}
.market-shell:has(> .home-page) .market-header .search-trigger::after { content:'搜索商品、品牌或关键词'; font-size:12px; color:#b9abbf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.market-shell:has(> .home-page) .market-header .search-trigger svg { flex:none; width:21px; height:21px; }
.search-drawer { border-color:#795887; background:#261b31ed; color:#f6edf8; }
.search-drawer > span { color:#e9bf78; }
.search-drawer button { color:#ead19c; }
/* Visual order: banner -> separate ticker -> product grid. Announcement never overlays image. */
.home-page { display:flex; flex-direction:column; gap:0; padding-top:12px; }
.home-page > .banner-carousel, .home-page > .featured-panel { order:0; }
.home-page > .marquee-announcement { order:1; margin:14px 0 4px; }
.home-page > .section-block { order:2; }
.home-page > .trust-strip { display:none; }
.banner-carousel {
  aspect-ratio: 16 / 8.2; border:1px solid #50365f; border-radius:17px;
  background-color:#24162e; background-size:cover; background-position:center; box-shadow:inset 0 -60px 55px #08040b5c;
}
.banner-carousel:after { background:linear-gradient(90deg, rgba(9,5,14,.25) 0%, transparent 66%, rgba(9,5,14,.1)),linear-gradient(0deg,#0d0712a3, transparent 45%); }
.banner-copy > span { color:#f0cf93; font-size:9px; }
.banner-copy h1 { color:#ffedd0; text-shadow:0 2px 12px #1b0d1f; font-size:clamp(18px,5.5vw,28px); }
.banner-copy p { color:#f0e6ec; font-size:10px; }
.banner-copy button { border-radius:999px; color:#22142a; background:linear-gradient(105deg,#fae3aa,#dcb375); }
.banner-dots { left:50%; right:auto; transform:translateX(-50%); bottom:8px; }
.banner-dots button.active { background:#eccb86; }
.featured-panel {
  min-height:215px; border-radius:17px; border-color:#70517e;
  background:linear-gradient(90deg,#160c23f5 0%,#160c23de 46%,#160c2368 100%),url('/assets/hm-banner-fallback.png') 75% center/cover no-repeat;
}
.featured-panel .featured-copy { position:relative; z-index:2; }
.featured-panel .featured-art { opacity:.18; pointer-events:none; }
.marquee-announcement { min-height:39px; border:1px solid #9a7e4c; border-radius:999px; background:#170e1c; color:#eee5e9; }
.marquee-announcement .announcement-label { padding:0 12px; border-right:1px solid #655064; background:#27192a; color:#ecc777; font-size:9px; }
.marquee-track { padding:9px 12px; }
.marquee-track span { font-size:10px; color:#f3eaf4; }
.marquee-announcement:hover .marquee-track { animation-play-state:paused; }
.section-block { padding-top:16px; }
.section-title { margin-bottom:12px; }
.section-title > div > span { display:none; }
.section-title h2 { font-size:19px; margin:0; color:#f7f0f9; }
.section-title > button { font-size:12px; color:#eeca86; font-weight:650; }
/* Real product image, title, price and purchase handlers remain the existing Vue bindings. */
.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
/* Home preview shows at most four cards; all products remain available in 市场. */
.home-page .product-grid > .product-card:nth-child(n+5) { display:none; }
.product-card { padding:0; border:1px solid #53405f; border-radius:16px; overflow:hidden; background:linear-gradient(160deg,#271a35,#191321); box-shadow:none; }
.product-card:hover { border-color:#9c7a9e; transform:translateY(-1px); }
.card-visual { height:auto; aspect-ratio:1.2 / 1; border-radius:0; background:radial-gradient(ellipse at 50% 70%,#513266,#24172e 65%,#1b1325); }
.card-visual.gold,.card-visual.rose,.card-visual.violet { background:radial-gradient(ellipse at 50% 70%,#513266,#24172e 65%,#1b1325); }
.card-product-image { object-fit:cover; }
.card-object { transform:none; border-radius:24px; border-color:#a27baa; background:#2d1b3a; box-shadow:0 8px 24px #0005; }
.card-object span { transform:none; color:#f0c886; }
.card-visual > .card-tag { top:9px; left:9px; border:1px solid #b88b53; border-radius:999px; color:#f9d48e; padding:4px 8px; background:#1a1026e8; font-weight:750; }
.card-visual > .card-cart-button { background:linear-gradient(140deg,#ffe6b2,#dfb56e); color:#271a20; border:1px solid #ffe1a2; box-shadow:none; }
.card-copy { padding:11px 11px 12px; }
.card-copy h3 { font-size:12px; font-weight:750; min-height:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.45; }
.card-copy .card-topline small { color:#d9b77f; }
.card-copy .card-sales { color:#928499; font-size:9px; }
.card-copy .card-purchase-row span { color:#f4cc83; font-size:16px; }
.card-buy-button { border-color:#9e794c; border-radius:999px; background:#ecc983; color:#271822; font-weight:750; }
.card-favorite-action { color:#a998b5; }
.bottom-nav { background:#17111eF2; border-top-color:#443450; }
.bottom-nav button { color:#aba0b6; }
.bottom-nav button.active { color:#efd089; }
.bottom-nav button.active svg { filter:none; }
.bottom-nav .nav-cart i { background:#e9c783; color:#251624; }
.primary-action, .featured-copy button, .empty-panel button { background:#e8c280; color:#221624; }
.primary-action:disabled { background:#51415b; color:#b2a2bd; }
.detail-price small, .detail-label { color:#e9c47d; }
.category-scroller button.active { background:#e4c17c; border-color:#e4c17c; color:#201626; }
@media(max-width:400px) {
 .market-shell:has(> .home-page) .market-header .brand-block::after {font-size:9px;padding:5px 6px;top:14px;}
 .card-copy h3{font-size:11px;}
 .card-copy .card-purchase-row span{font-size:14px;}
 .card-visual{aspect-ratio:1.08 / 1;}
}
@media(prefers-reduced-motion:reduce) { .marquee-track{animation:none;white-space:nowrap;} }

/* 20261106b layout correction. ONLY homepage presentation, not store/payment logic. */
/* The branded fallback image already contains the title and the sheep.
   Hide the obsolete Vue overlay while retaining its live navigate-to-market handler. */
.home-page > .featured-panel {
  display:block !important;
  position:relative;
  box-sizing:border-box;
  width:100%;
  min-height:0 !important;
  aspect-ratio:2.42/1;
  padding:0 !important;
  overflow:hidden;
  border-radius:18px;
  background:#170d24 url('/assets/hm-banner-fallback.png') center center / cover no-repeat !important;
  box-shadow:none;
}
.home-page > .featured-panel::after { display:none !important; }
.home-page > .featured-panel .featured-art { display:none !important; }
.home-page > .featured-panel .featured-copy {
  position:absolute; inset:0; max-width:none; width:100%; height:100%;
  z-index:2; pointer-events:none;
}
.home-page > .featured-panel .featured-copy > span,
.home-page > .featured-panel .featured-copy > h1,
.home-page > .featured-panel .featured-copy > p { display:none !important; }
.home-page > .featured-panel .featured-copy > button {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; border:0; opacity:0; border-radius:0;
  pointer-events:auto; cursor:pointer;
}
.home-page > .featured-panel .featured-copy > button:focus-visible {
  opacity:1; outline:3px solid #f2c97c; outline-offset:-5px;
  background:transparent; color:#fff; font-size:14px;
  text-shadow:0 1px 4px #000;
}
/* If a configured carousel is used, do not draw a heavy veil over its existing image.
   Preserve configured text and its real CTA: such images may not contain text. */
.home-page > .banner-carousel {
  aspect-ratio:2.42/1; min-height:0; padding:13px; background-blend-mode:screen;
  box-shadow:none;
}
.home-page > .banner-carousel::after {display:none !important;}
.home-page > .banner-carousel .banner-copy { padding:6px; border-radius:8px; background:#0d071282; }
.home-page > .banner-carousel .banner-copy h1 {font-size:clamp(17px,3vw,28px);}
/* Ticker appears AFTER either hero, and remains separate from the banner image. */
.home-page > .marquee-announcement,
.home-page > .hm-ui-notice {
  order:1; display:flex; align-items:stretch; min-height:42px;
  width:100%; margin:13px 0 3px; padding:0;
  overflow:hidden; border:1px solid #93734a; border-radius:999px;
  background:linear-gradient(100deg,#1e1425,#130f1d);
  color:#f2e8e9; font-size:11px; box-shadow:none;
}
.home-page > .hm-ui-notice .hm-ui-notice-label {
  align-self:stretch; display:flex; align-items:center; flex:none;
  padding:0 10px; border-right:1px solid #554054;
  font-weight:750; color:#efc980; background:#281928;
  white-space:nowrap;
}
.home-page > .hm-ui-notice .hm-ui-notice-window,
.home-page > .marquee-announcement .marquee-window { min-width:0; flex:1; overflow:hidden; }
.home-page > .hm-ui-notice .hm-ui-notice-track {
  display:flex; align-items:center; gap:36px; width:max-content;
  min-height:40px; padding:0 20px; white-space:nowrap;
  animation:hm-home-notice-scroll 22s linear infinite;
}
.home-page > .hm-ui-notice .hm-ui-notice-track span { color:#f3eaf1; }
@keyframes hm-home-notice-scroll {
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 18px))}
}
.home-page > .hm-ui-notice:hover .hm-ui-notice-track {animation-play-state:paused;}
/* Compact, photo-first two-column product cards on both mobile and wide TG windows. */
.home-page .section-block { order:2; padding-top:18px; }
.home-page .section-title h2 {font-size:20px;}
.home-page .section-title > button {font-size:11px;}
.home-page .product-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.home-page .product-card { position:relative; min-width:0; min-height:0; border-radius:16px; }
.home-page .card-visual {
  aspect-ratio:auto !important; height:clamp(146px,23vw,220px) !important;
  min-height:0; max-height:220px;
  border-bottom:1px solid #64436b;
  background:radial-gradient(ellipse at 50% 88%,#67406a 0%,#342343 31%,#1c1528 75%) !important;
}
.home-page .card-visual .card-product-image { object-fit:cover; width:100%; height:100%; }
.home-page .card-object {
  position:relative; z-index:1; width:86px; height:86px;
  border-radius:20px; background:linear-gradient(145deg,#46304e,#271b38);
  border:1px solid #b17ab7; box-shadow:0 15px 30px #0005,0 0 26px #b057d02e;
}
.home-page .card-object span {font-size:52px; text-shadow:0 0 18px #f8be7e66;}
.home-page .card-visual .card-tag {z-index:3;}
.home-page .card-visual .card-cart-button {z-index:3;}
.home-page .card-copy {padding:10px 12px 12px;}
.home-page .card-copy .card-topline {margin:0 0 4px;}
.home-page .card-copy .card-topline small {color:#d8bc92;font-size:9px;}
.home-page .card-copy h3 { min-height:0; margin:4px 0 8px; font-size:clamp(12px,1.9vw,15px);line-height:1.35; }
.home-page .card-copy .card-sales { font-size:9px;margin:0 0 7px; }
.home-page .card-copy .card-purchase-row { align-items:center; }
.home-page .card-copy .card-purchase-row span {font-size:clamp(15px,2.4vw,20px);}
.home-page .card-copy .card-buy-button {font-size:11px; min-width:54px; min-height:34px;}
.home-page { padding-bottom:calc(85px + var(--safe-bottom,0px)); }
@media(max-width:480px) {
 .home-page > .featured-panel, .home-page > .banner-carousel {aspect-ratio:2.16/1;}
 .home-page .product-grid {gap:9px;}
 .home-page .card-visual {height:clamp(132px,40vw,170px) !important;}
 .home-page .card-object {width:64px;height:64px;}
 .home-page .card-object span {font-size:40px;}
 .home-page .card-copy {padding:9px 8px 10px;}
 .home-page .card-copy h3 {font-size:12px;}
 .home-page .card-copy .card-buy-button {min-width:45px;font-size:10px;}
 .home-page > .hm-ui-notice .hm-ui-notice-label{padding:0 8px;font-size:10px;}
}
@media(prefers-reduced-motion:reduce) {
 .home-page > .hm-ui-notice .hm-ui-notice-track {animation:none;}
}