/* v5 mascot + dynamic event imagery. Component selectors scoped to the intended areas. */
.site-header .brand{display:flex;flex-direction:row;align-items:center;gap:9px;min-width:0}
.site-header .brand-wordmark{display:flex;flex-direction:column;justify-content:center;min-width:0}
.site-header .brand-mascot{width:46px;height:46px;flex:none;object-fit:contain;background:#eaf4ff;border:1px solid #cbe0ff;border-radius:14px;padding:2px}
.site-header .brand-en{margin-left:1px;letter-spacing:3px}
/* The FIRST content block shows real device images with their current minimum registered prices. */
.shop-home .hp-top-titlebar{display:flex;justify-content:space-between;gap:9px;align-items:center;min-width:0}
.shop-home .hp-top-titlebar>div{min-width:0;flex:1}
.shop-home .hp-intro-mascot{width:80px;height:82px;object-fit:contain;flex:none;align-self:center;filter:drop-shadow(0 7px 9px rgba(29,77,143,.11))}
.shop-home .hp-quick-view{height:219px}
.shop-home .hp-quick-item{height:73px;min-height:73px;max-height:73px;grid-template-columns:18px 55px minmax(0,1fr) minmax(102px,auto) 11px;gap:9px;padding:5px 1px}
.shop-home .hp-quick-thumb{width:53px;height:59px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:linear-gradient(145deg,#f6faff,#ecf3ff);border:1px solid #e4edfb}
.shop-home .hp-quick-thumb img{width:100%;height:100%;max-height:54px;object-fit:contain;padding:3px}
.shop-home .hp-quick-device strong{font-size:12px}
.shop-home .hp-quick-price{font-size:18px}
.shop-home .hp-top-price-foot{padding-top:9px}
.shop-home .hp-top-price{background:linear-gradient(180deg,#fff 63%,#fcfdff 100%)}
.shop-home .hp-top-events{background:#f9fbff}
/* User's supplied event message/astronaut, with REAL editable MySQL count instead of image-embedded 0/100. */
.shop-home .hp-event-campaign{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(190px,.62fr) minmax(190px,.67fr);align-items:center;gap:9px 16px;margin-top:20px;margin-bottom:8px;padding:12px 22px;min-height:198px;overflow:hidden;border:1px solid #c8ddfb;background:linear-gradient(104deg,#edf6ff 0%,#f5faff 58%,#e8f3ff 100%);border-radius:20px}
.shop-home .hp-event-campaign:before{content:'';position:absolute;right:15%;top:-130px;width:300px;height:300px;border-radius:100%;border:50px solid rgba(255,255,255,.28);z-index:-1}
.shop-home .hp-event-artwork{min-width:0;align-self:center}
.shop-home .hp-event-artwork img{width:100%;height:auto;max-height:205px;object-fit:contain;object-position:left center}
.shop-home .hp-event-campaign .hp-event-status{min-width:0;display:flex;flex-direction:column;gap:9px;flex:none;width:100%;padding:7px 2px}
.shop-home .hp-event-status-tag{font-size:11px;font-weight:850;color:#406aa9}
.shop-home .hp-event-campaign .hp-event-ratio{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.shop-home .hp-event-campaign .hp-event-ratio strong{color:#0049d9;font-size:40px;letter-spacing:-2px;line-height:1}
.shop-home .hp-event-campaign .hp-event-ratio span{color:#315082;font-size:18px;font-weight:900;letter-spacing:-.6px}
.shop-home .hp-event-campaign .hp-event-bar{height:11px;background:#d0e2fd;border:1px solid #b4d4fd;margin:2px 0 0}
.shop-home .hp-event-campaign .hp-event-bar>span{background:linear-gradient(90deg,#167fff,#0750df);height:100%;min-width:0}
.shop-home .hp-event-campaign .hp-event-status small{color:#6c83a6;font-size:10px;line-height:1.45}
.shop-home .hp-event-cta{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;align-self:stretch;min-width:0}
.shop-home .hp-event-cta>img{width:165px;max-height:160px;height:auto;object-fit:contain;object-position:center bottom;margin-top:-11px;position:relative;z-index:1;pointer-events:none}
.shop-home .hp-event-campaign .hp-event-more{font-size:12px;gap:8px;padding:11px 16px;border-radius:10px;position:relative;z-index:2;min-height:42px}
.shop-home .hp-event-campaign .hp-event-more:hover{background:#003eb8}
@media(max-width:1160px){
 .site-header .brand-mascot{height:41px;width:41px}
 .shop-home .hp-event-campaign{grid-template-columns:minmax(0,1.4fr) minmax(140px,.55fr) minmax(130px,.55fr);gap:10px;padding:16px 14px}
 .shop-home .hp-event-campaign .hp-event-ratio strong{font-size:32px}
 .shop-home .hp-event-cta>img{width:120px;max-height:130px}
 .shop-home .hp-event-campaign .hp-event-more{font-size:11px;padding:10px}
 .shop-home .hp-quick-item{grid-template-columns:16px 46px minmax(0,1fr) minmax(89px,auto) 8px;gap:6px}
 .shop-home .hp-quick-thumb{width:44px;height:53px}
 .shop-home .hp-quick-price{font-size:16px}
}
@media(max-width:800px){
 .shop-home .hp-event-campaign{grid-template-columns:minmax(0,1fr) 180px;gap:6px 12px;padding:12px 14px}
 .shop-home .hp-event-artwork{grid-column:1/-1;max-width:610px;margin:0 auto}
 .shop-home .hp-event-artwork img{max-height:250px}
 .shop-home .hp-event-campaign .hp-event-status{padding:0 14px}
 .shop-home .hp-event-cta>img{width:145px;max-height:136px}
 .shop-home .hp-quick-item{grid-template-columns:19px 53px minmax(0,1fr) minmax(95px,auto) 9px;gap:8px}
 .shop-home .hp-quick-thumb{width:52px;height:58px}
}
@media(max-width:600px){
 .site-header .brand-mascot{width:38px;height:38px;border-radius:11px}
 .site-header .brand{gap:6px}
 .site-header .brand-logo{font-size:21px}
 .site-header .brand-en{font-size:8px;letter-spacing:2.1px}
 .shop-home .hp-intro-mascot{width:66px;height:67px}
 .shop-home .hp-top-titlebar h1{font-size:clamp(20px,5.8vw,25px)}
 .shop-home .hp-top-titlebar p{font-size:10px}
 .shop-home .hp-quick-view{height:192px}
 .shop-home .hp-quick-item{height:64px;min-height:64px;max-height:64px;grid-template-columns:14px 41px minmax(0,1fr) minmax(85px,auto) 8px;gap:5px;padding:3px 0}
 .shop-home .hp-quick-thumb{width:40px;height:49px;border-radius:8px}
 .shop-home .hp-quick-thumb img{max-height:47px}
 .shop-home .hp-quick-device strong{font-size:11px}
 .shop-home .hp-quick-price{font-size:15px}
 .shop-home .hp-event-campaign{grid-template-columns:minmax(0,1fr) 95px;gap:5px;margin-top:8px;padding:8px 12px 14px;border-radius:13px}
 .shop-home .hp-event-artwork{max-width:380px;width:100%}
 .shop-home .hp-event-artwork img{max-height:none}
 .shop-home .hp-event-campaign .hp-event-status{padding:5px 0 8px;gap:6px}
 .shop-home .hp-event-campaign .hp-event-ratio strong{font-size:30px}
 .shop-home .hp-event-campaign .hp-event-ratio span{font-size:13px}
 .shop-home .hp-event-campaign .hp-event-status small{font-size:9px}
 .shop-home .hp-event-status-tag{font-size:10px}
 .shop-home .hp-event-cta>img{width:95px;max-height:105px}
 .shop-home .hp-event-cta{justify-content:center;align-self:stretch}
 .shop-home .hp-event-campaign .hp-event-more{font-size:10px;padding:8px 4px;min-height:36px;text-align:center;white-space:normal;max-width:105px}
}
@media(max-width:350px){
 .shop-home .hp-intro-mascot{width:50px;height:53px}
 .shop-home .hp-quick-item{grid-template-columns:12px 37px minmax(0,1fr) minmax(80px,auto) 7px;gap:4px}
 .shop-home .hp-quick-thumb{width:36px;height:46px}
 .shop-home .hp-quick-price{font-size:14px}
 .shop-home .hp-quick-price small{font-size:9px}
 .shop-home .hp-event-campaign{grid-template-columns:minmax(0,1fr) 85px;padding:7px}
 .shop-home .hp-event-cta>img{width:84px}
}
@media(prefers-reduced-motion:reduce){.shop-home .hp-intro-mascot,.shop-home .hp-quick-item{transition:none!important}}