:root { --forest:#103f38; --moss:#dfeadb; --cream:#fffaf0; --coral:#f47b5f; }
body { background: radial-gradient(circle at 90% 5%,#dcebe0 0,transparent 28%),linear-gradient(180deg,#f7f4e9,#f3f7f2); }
.no-scroll { overflow:hidden; }.shop-shell { max-width:1080px;margin:auto;padding:18px 18px 130px; }.shop-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }.brand-mark { background:linear-gradient(145deg,var(--forest),#3f786b); }.head-tools { display:flex;align-items:center;gap:8px; }.lang-btn { border:1px solid rgba(16,63,56,.15);border-radius:99px;padding:7px 10px;background:rgba(255,255,255,.72);color:var(--forest);font-size:12px;font-weight:800; }
.hero { position:relative;min-height:270px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px;overflow:hidden;border-color:rgba(16,63,56,.08);background:linear-gradient(125deg,#f0ead6 0%,#fffaf0 50%,#dcebdc 100%); }.hero::before { content:"";position:absolute;width:250px;height:250px;right:-80px;top:-80px;border:1px solid rgba(16,63,56,.13);border-radius:50%;box-shadow:0 0 0 35px rgba(16,63,56,.035),0 0 0 70px rgba(16,63,56,.025); }.hero-copy { position:relative;z-index:2;max-width:630px; }.hero h2 { margin:9px 0 12px;max-width:620px;font-family:Georgia,"Songti SC",serif;font-size:clamp(30px,5vw,52px);line-height:1.08;color:var(--forest);letter-spacing:-.03em; }.hero p { margin:0;color:#557269;font-size:14px; }.eyebrow { color:#a95d48;font-size:11px;letter-spacing:.16em;font-weight:900; }
.hero-mascot { position:relative;z-index:2;min-width:190px;display:grid;justify-items:center;align-content:center; }.hero-mascot>span { margin-top:13px;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.72);color:var(--forest);font-size:12px;font-weight:700; }.salamander,.pay-salamander { position:relative;width:142px;height:98px;border-radius:52% 52% 44% 44%;background:linear-gradient(150deg,#477e6d,#1c5147);box-shadow:inset 0 -10px 0 rgba(0,0,0,.08),0 20px 35px rgba(16,63,56,.2);animation:floaty 2.5s ease-in-out infinite; }.eye { position:absolute;top:29px;width:9px;height:11px;border-radius:50%;background:#fff;box-shadow:inset 0 -5px #172b27; }.eye.left { left:39px; }.eye.right { right:39px; }.smile { position:absolute;left:50%;top:55px;width:26px;height:12px;transform:translateX(-50%);border-bottom:3px solid #d8efe6;border-radius:0 0 50% 50%; }.gill { position:absolute;top:42px;width:22px;height:8px;border-top:3px solid #f2a188;border-bottom:3px solid #f2a188; }.gill.gl { left:-12px;transform:rotate(-12deg); }.gill.gr { right:-12px;transform:rotate(12deg); }.bubble { position:absolute;border:2px solid rgba(63,120,107,.25);border-radius:50%;animation:bubble 2.2s ease-in infinite; }.b1 { width:16px;height:16px;right:15px;top:5px; }.b2 { width:9px;height:9px;right:0;top:38px;animation-delay:.8s; }@keyframes floaty { 50% { transform:translateY(-7px) rotate(1deg); } }@keyframes bubble { 0% { opacity:0;transform:translateY(18px) scale(.6); } 45% { opacity:1; } 100% { opacity:0;transform:translateY(-25px) scale(1.1); } }
.trust-row { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:13px 0 28px; }.trust-row div { display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.68);border:1px solid rgba(16,63,56,.08);color:#4d675f;font-size:12px; }.trust-row b { color:var(--coral);font-family:Georgia,serif; }.section-heading { display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px; }.section-heading h2 { margin:5px 0 0;color:var(--forest);font-family:Georgia,"Songti SC",serif;font-size:28px; }.section-heading p { margin:0;color:var(--muted);font-size:12px; }.mode-tabs { display:flex;gap:8px;margin:15px 0;overflow:auto; }.mode-tabs button { border:1px solid rgba(16,63,56,.1);border-radius:99px;padding:9px 15px;background:rgba(255,255,255,.7);color:#60736e;white-space:nowrap; }.mode-tabs button.active { border-color:var(--forest);background:var(--forest);color:#fff; }
.product-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }.product { overflow:hidden;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease; }.product:hover { transform:translateY(-4px);box-shadow:0 18px 45px rgba(16,63,56,.14); }.product-visual { position:relative;height:190px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--product),#fff 42%),var(--product)); }.product-visual::after { content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(255,255,255,.32);border-radius:50%;box-shadow:0 0 0 24px rgba(255,255,255,.08); }.product-visual img { position:relative;z-index:2;width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(0,0,0,.18)); }.visual-letter { position:relative;z-index:1;color:rgba(255,255,255,.9);font-family:Georgia,"Songti SC",serif;font-size:62px;font-weight:900; }.product-visual img+.visual-letter { display:none; }.story-tag { position:absolute;z-index:3;left:10px;top:10px;padding:5px 9px;border-radius:99px;background:rgba(16,63,56,.72);backdrop-filter:blur(7px);color:#fff;font-size:10px; }.product-body { padding:15px; }.product-title { display:flex;align-items:start;justify-content:space-between;gap:8px; }.product-title h3 { margin:0;color:var(--forest);font-size:16px; }.product-title span { flex:none;color:#a95d48;font-size:10px;font-weight:800; }.product-body>p { min-height:34px;margin:7px 0;color:#6b7d78;font-size:12px;line-height:1.45; }.product-meta { color:#84928e;font-size:10px; }.product-foot { display:flex;align-items:center;justify-content:space-between;margin-top:13px; }.product-foot strong { color:var(--forest);font-family:Georgia,serif;font-size:21px; }.stepper { display:flex;align-items:center;gap:7px; }.stepper button { width:31px;height:31px;border:0;border-radius:50%;background:var(--forest);color:#fff;font-size:18px; }.locked { filter:saturate(.25); }
.cart-bar { position:fixed;z-index:30;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(660px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;padding:11px 12px 11px 19px;border:1px solid rgba(255,255,255,.13);border-radius:20px;color:#fff;background:rgba(16,42,38,.94);backdrop-filter:blur(14px);box-shadow:0 24px 55px rgba(0,0,0,.25); }.cart-bar div { display:flex;align-items:center;gap:13px; }.cart-bar span { color:#c3d2cd;font-size:12px; }.cart-bar strong { color:#ffd19f;font-size:19px; }
.detail-sheet { position:fixed;z-index:65;inset:0;display:grid;place-items:end center;padding-top:45px;background:rgba(8,28,25,.55);backdrop-filter:blur(6px); }.detail-sheet>#detailContent { width:min(680px,100%);max-height:94vh;overflow:auto;border-radius:28px 28px 0 0;background:var(--cream);box-shadow:0 -30px 80px rgba(0,0,0,.24); }.sheet-close { position:fixed;z-index:2;right:max(18px,calc((100vw - 650px)/2));top:58px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(16,63,56,.84);color:#fff;font-size:25px; }.product-visual.large { height:310px; }.detail-copy { padding:25px 24px calc(25px + env(safe-area-inset-bottom)); }.detail-copy h2 { margin:8px 0;color:var(--forest);font-family:Georgia,"Songti SC",serif;font-size:32px; }.detail-lead { color:#60736e;line-height:1.7; }.detail-copy ul { display:grid;gap:9px;margin:20px 0;padding:0;list-style:none; }.detail-copy li { padding:10px 12px;border-radius:12px;background:#edf3ea;color:#3e5b53;font-size:13px; }.detail-copy li::before { content:"✦";margin-right:8px;color:var(--coral); }.detail-buy { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid #e3e9df; }.detail-buy small { display:block;color:#7d8c87; }.detail-buy strong { display:block;color:var(--forest);font-family:Georgia,serif;font-size:26px; }
.checkout-modal h3 { margin:7px 0 18px;color:var(--forest);font-family:Georgia,"Songti SC",serif;font-size:25px; }.checkout-modal h4 { margin:20px 0 10px;color:var(--forest); }.checkout-line { display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px; }.pay-options { display:grid;grid-template-columns:repeat(2,1fr);gap:9px; }.pay-options label { display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--line);border-radius:14px;font-size:11px;cursor:pointer; }.pay-options label:has(input:checked) { border-color:var(--forest);background:#edf4ef;box-shadow:0 0 0 2px rgba(16,63,56,.08); }.pay-options input { position:absolute;opacity:0; }.pay-icon { width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:9px;color:#fff;font-weight:900; }.wx { background:#19b969; }.ali { background:#1677ff; }.kr { background:#f5ce2e;color:#27251c; }.cardpay { background:#172e75; }.pay-note { color:#87928f;font-size:10px;line-height:1.5; }.modal-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:18px; }
.pay-experience { position:fixed;z-index:90;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 36%,#5e9787,#103f38 60%,#082a25);color:#fff; }.pay-scene { position:relative;display:grid;justify-items:center;text-align:center; }.pay-salamander { width:170px;height:116px;background:linear-gradient(150deg,#7cc3aa,#2f7665); }.pay-experience.success .pay-salamander { animation:happy .5s ease 2; }.pay-scene>span { margin-top:32px;color:#f8cda5;font-size:10px;letter-spacing:.24em;font-weight:900; }.pay-scene h2 { max-width:420px;margin:9px 0 8px;font-family:Georgia,"Songti SC",serif;font-size:clamp(26px,7vw,38px); }.pay-scene p { margin:0;color:#cce0d9;font-size:13px; }.pay-loader { width:160px;height:3px;margin-top:26px;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.15); }.pay-loader i { display:block;width:45%;height:100%;background:#ffbf8e;animation:load 1.1s ease-in-out infinite; }.success .pay-loader { display:none; }.water-rings { position:absolute;top:47px;width:230px;height:100px;border:2px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 25px rgba(255,255,255,.04),0 0 0 50px rgba(255,255,255,.025); }.pay-salamander { z-index:2; }.pay-experience.success #paySparkles i { position:absolute;left:50%;top:55px;width:7px;height:16px;border-radius:8px;background:hsl(calc(var(--i)*24),80%,70%);transform:rotate(calc(var(--i)*20deg)) translateY(-95px);animation:spark .9s ease-out both;animation-delay:calc(var(--i)*.025s); }@keyframes load { from { transform:translateX(-110%); } to { transform:translateX(330%); } }@keyframes happy { 50% { transform:translateY(-18px) rotate(-3deg) scale(1.05); } }@keyframes spark { from { opacity:0;transform:rotate(calc(var(--i)*20deg)) translateY(-25px); } to { opacity:1;transform:rotate(calc(var(--i)*20deg)) translateY(-125px); } }
.order-overlay { position:fixed;z-index:45;inset:0;overflow:auto;background:linear-gradient(180deg,#edf4ef,#f8f5eb); }.order-panel { max-width:740px;margin:auto;padding:22px; }.order-panel header { display:flex;gap:12px;align-items:center;margin-bottom:20px; }.order-panel h3,.order-panel p { margin:0; }.order-summary { display:flex;align-items:center;gap:16px;padding:20px;margin-bottom:14px;background:linear-gradient(135deg,var(--forest),#3c7f6e);color:#fff; }.order-summary h2 { margin:0 0 5px; }.order-summary p { margin:0;opacity:.82; }.mini-salamander { width:54px;height:42px;display:grid;place-items:center;border-radius:50%;background:#75b39f;color:#153f35;font-weight:900; }.order-machine { margin-bottom:14px;padding:18px; }.order-machine h4 { margin:0 0 12px; }.order-line { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;margin-top:7px;border-radius:10px;background:#f3f6f3;font-size:12px; }
.blind-card { padding:42px;text-align:center;background:radial-gradient(circle at center,#fff5e7,#fff); }.mystery-box { width:105px;height:105px;display:grid;place-items:center;margin:0 auto 20px;border-radius:30px;color:#fff;font-size:50px;font-weight:900;background:linear-gradient(140deg,var(--coral),#b54969);box-shadow:0 18px 45px rgba(180,73,105,.25); }.blind-card strong { display:block;margin:12px;color:var(--forest);font-size:28px; }.reveal { position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;color:#fff;background:rgba(8,35,31,.96); }.reveal-box { text-align:center; }.shake { animation:shake .18s 7; }@keyframes shake { 25% { transform:rotate(-8deg) translateX(-5px); }75% { transform:rotate(8deg) translateX(5px); } }
@media (max-width:720px) { .shop-shell { padding:14px 14px 118px; }.shop-head .brand p { max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.hero { min-height:225px;padding:24px 20px; }.hero-copy { max-width:72%; }.hero h2 { font-size:30px; }.hero-mascot { min-width:105px;transform:scale(.78);transform-origin:center right; }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }.product-visual { height:138px; }.product-body { padding:12px; }.product-body>p { min-height:48px; }.trust-row div { display:grid;gap:2px;padding:10px;text-align:center; }.section-heading { align-items:start; }.section-heading p { max-width:105px;text-align:right; }.pay-options { grid-template-columns:1fr; }.product-visual.large { height:250px; }.sheet-close { right:15px;top:55px; }.order-line { align-items:flex-start; }.order-line .badge { flex:none; } }
@media (max-width:390px) { .hero-mascot { display:none; }.hero-copy { max-width:100%; }.product-title { display:block; }.product-title span { display:block;margin-top:3px; }.product-foot strong { font-size:18px; } }
#marketingTab,#blindboxView,#reveal{display:none!important}