.official-mall-page { min-height: 100vh; padding-bottom: 90px; background: radial-gradient(ellipse at 80% 0,#ffe3ee 0,transparent 38%),#fff7fa; color:#533745; }
.official-mall-shell { width:min(1160px,calc(100% - 36px)); margin:0 auto; padding:26px 0 50px; }
.official-mall-back { color:#a34b70; font-size:14px; font-weight:800; text-decoration:none; }
.official-mall-hero { position:relative; overflow:hidden; margin:25px 0 24px; padding:34px clamp(22px,5vw,58px); border:1px solid #f2cbd9; border-radius:26px; background:linear-gradient(112deg,#fffafd 0%,#ffe4ed 57%,#f8bfd1 100%); box-shadow:0 14px 36px #a24a6d12; }
.official-mall-hero::after { position:absolute; right:5%; bottom:-120px; width:300px; height:300px; border:1px solid #ffffffa6; border-radius:50%; content:""; box-shadow:0 0 0 24px #ffffff35,0 0 0 48px #ffffff20; }
.official-mall-hero-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:50%; background:#fff9; color:#e85d8a; font-size:25px; }
.official-mall-hero p { margin:14px 0 5px; color:#c96a8c; font-size:11px; font-weight:800; letter-spacing:.16em; }
.official-mall-hero h1 { margin:0 0 8px; color:#75445a; font-size:clamp(28px,4.5vw,44px); }
.official-mall-hero > span:last-child { color:#8f6b7a; font-size:14px; }
.official-mall-categories { display:flex; gap:9px; overflow-x:auto; margin:0 0 15px; padding:3px 0 8px; }
.official-mall-categories button { min-height:40px; padding:0 17px; border:1px solid #eed5df; border-radius:99px; background:#fff; color:#8d6577; font:inherit; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; }
.official-mall-categories button.active { border-color:#ed6a99; background:#ef6c98; color:#fff; }
.official-mall-status { min-height:22px; margin:0 0 12px; color:#957986; font-size:13px; }
.official-mall-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.official-mall-card { display:flex; min-height:230px; flex-direction:column; padding:19px; border:1px solid #f0dce5; border-radius:20px; background:#fff; box-shadow:0 9px 23px #a24a6d0a; }
.official-mall-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.official-mall-card-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:15px; background:#fff0f5; color:#db5c89; font-size:24px; }
.official-mall-type { padding:5px 9px; border-radius:99px; background:#fff1f6; color:#bd5b7d; font-size:11px; font-weight:800; }
.official-mall-card h2 { margin:17px 0 8px; color:#60394b; font-size:18px; }
.official-mall-card p { margin:0; color:#917989; font-size:13px; line-height:1.6; }
.official-mall-rating { display:flex; align-items:center; gap:7px; width:fit-content; margin:8px 0 0!important; padding:5px 9px; border:1px solid #f4e2b0; border-radius:99px; background:#fffaf0; color:#78552c!important; font-size:12px!important; }
.official-mall-rating span { color:#efa52b; letter-spacing:1px; }
.official-mall-rating strong { color:#65452a; }
.official-mall-rating small { color:#8e7357; font-size:11px; }
.official-mall-rating-empty { border-color:#efdee5; background:#fff8fa; color:#9a7d8a!important; }
.official-mall-card footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:18px; }
.official-mall-price { color:#e75583; font-size:19px; font-weight:800; }
.official-mall-card footer a { padding:9px 13px; border-radius:99px; background:#ef6c98; color:white; font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; }
.official-mall-empty { grid-column:1/-1; padding:38px 18px; border:1px dashed #e8bfd0; border-radius:20px; background:#fff; color:#927283; text-align:center; }
@media(max-width:900px) { .official-mall-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .official-mall-shell { width:calc(100% - 28px); padding-top:18px; } .official-mall-hero { margin-top:21px; padding:25px 22px; border-radius:21px; } .official-mall-grid { grid-template-columns:1fr; gap:11px; } .official-mall-card { min-height:190px; padding:17px; } }

.official-mall-points-balance { width:fit-content; margin:0 0 12px auto; padding:9px 15px; border:1px solid #f1d7a8; border-radius:99px; background:#fffaf0; color:#8a6336; font-size:13px; font-weight:800; }
.official-mall-card-image { display:block; color:inherit; text-decoration:none; }
.official-mall-card-image:focus-visible,.official-mall-card footer a:focus-visible { outline:3px solid #f3a2bd; outline-offset:3px; }
.official-mall-card-content > p { margin:0 0 6px; }
.official-mall-card-content .official-mall-points-cost { color:#b04f74; font-weight:850; }
.official-mall-card-content .official-mall-cash { margin-top:2px; color:#987785; font-size:12px; }
.official-mall-card-content .official-mall-points-price { font-size:17px; }
.official-mall-card footer a { display:inline-flex; align-items:center; justify-content:center; }
@media(max-width:700px) { .official-mall-points-balance { margin-bottom:10px; font-size:12px; }.official-mall-card-content { padding:13px 14px 15px; }.official-mall-card footer { align-items:center; }.official-mall-card footer a { padding:8px 10px; font-size:11px; } }

/* Photo-led official voucher cards */
.official-mall-grid { align-items:stretch; }
.official-mall-card { min-height:0; padding:0; overflow:hidden; }
.official-mall-card-image { position:relative; overflow:hidden; aspect-ratio:1.62; background:#f8e9ef; }
.official-mall-card-image img { display:block; width:100%; height:100%; object-fit:cover; }
.official-mall-type { position:absolute; top:12px; left:12px; padding:7px 11px; background:#fffdf2; box-shadow:0 3px 12px #5933421c; }
.official-mall-image-note { position:absolute; right:10px; bottom:10px; padding:5px 8px; border-radius:99px; background:#4e343bb8; color:#fff; font-size:10px; font-weight:700; }
.official-mall-card-content { display:flex; min-height:150px; flex:1; flex-direction:column; padding:16px 18px 18px; }
.official-mall-card-content h2 { margin:0 0 8px; }
.official-mall-card-content footer { padding-top:16px; }
.official-mall-card footer { align-items:flex-end; }
.official-mall-pricing { display:grid; justify-items:start; gap:3px; }
.official-mall-pricing del { color:#aa969f; font-size:12px; }
.official-mall-price { color:#e75583; font-size:21px; font-weight:900; }
.official-mall-saving { padding:3px 8px; border-radius:99px; background:#fff0f5; color:#d94c7c; font-size:11px; font-weight:800; }
.official-mall-page .consumer-bottom-nav { position:fixed; z-index:60; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:9px 10px calc(9px + env(safe-area-inset-bottom)); border-top:1px solid #f3dce6; background:#fffdfef5; backdrop-filter:blur(16px); }
.official-mall-page .consumer-bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:3px; color:#a77b8c; font-size:18px; text-decoration:none; }
.official-mall-page .consumer-bottom-nav a.active { color:#ea578e; }
.official-mall-page .consumer-bottom-nav a span:last-child { font-size:10px; }
.official-mall-page .consumer-bottom-nav .consumer-nav-icon { display:grid; width:24px; height:24px; place-items:center; line-height:1; }
.official-mall-page .consumer-bottom-nav .consumer-nav-icon svg { display:block; width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
@media(max-width:700px) { .official-mall-card-content { min-height:0; padding:14px; } .official-mall-page .consumer-bottom-nav { padding-right:10px; padding-left:10px; } }