@font-face{font-family:Cairo;src:url('../font/cairo_regular.ttf')}@font-face{font-family:Cairo;src:url('../font/cairo_bold.ttf');font-weight:700}@font-face{font-family:Cairo;src:url('../font/cairo_extrabold.ttf');font-weight:800}:root{--brown:#8b5a2b;--dark:#4a2e1c;--cream:#fbf8f3;--line:#eadfd4;--white:#fff;--shadow:0 14px 40px #5d3a2117}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:#251b15;font-family:Cairo,Arial;min-height:100vh}.hidden{opacity:0}.loader{position:fixed;inset:0;background:#fff;z-index:99;display:grid;place-content:center;text-align:center;transition:.55s}.loader.out{opacity:0;visibility:hidden;transform:scale(1.04)}.loader img{width:112px;height:112px;object-fit:contain;margin:auto}.brand{font-weight:800;letter-spacing:2px;color:var(--dark);font-size:20px}.dots{display:flex;gap:6px;justify-content:center;margin-top:18px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--brown);animation:dot 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{50%{transform:translateY(-7px);opacity:.4}}.app{transition:.5s}header{height:78px;background:#fff;position:sticky;top:0;z-index:20;display:flex;align-items:center;padding:10px max(18px,calc((100% - 1100px)/2));gap:10px;border-bottom:1px solid var(--line)}header .logo{width:52px;height:52px;object-fit:contain}header div{display:flex;flex-direction:column}header b{color:var(--dark);font-size:17px}header span{font-size:11px;color:#927e70}.cart{margin-right:auto;border:0;background:#f4ece4;width:46px;height:46px;border-radius:16px;font-size:20px;position:relative}.cart em{position:absolute;top:-5px;left:-5px;background:var(--brown);color:#fff;border-radius:20px;font:700 11px Cairo;min-width:20px;height:20px;display:grid;place-items:center}.bump{animation:bump .4s}@keyframes bump{50%{transform:scale(1.2) rotate(-8deg)}}main{max-width:1100px;margin:auto;padding:20px}.hero{background:linear-gradient(135deg,#4b2e1d,#9a6739);color:#fff;border-radius:28px;padding:30px 24px;box-shadow:var(--shadow);overflow:hidden;position:relative}.hero:after{content:'YOONYO';position:absolute;left:-15px;bottom:-35px;font-size:82px;font-weight:800;opacity:.06}.hero span{font-size:12px;opacity:.85}.hero h1{margin:4px 0;font-size:28px}.hero p{margin:0;opacity:.8;font-size:13px}h2{font-size:19px;margin:26px 0 12px}.categories{display:flex;gap:9px;overflow:auto;padding-bottom:6px;scrollbar-width:none}.chip{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:10px 17px;border-radius:999px;font:600 13px Cairo;color:#675143;transition:.25s}.chip.active{background:var(--brown);color:#fff;border-color:var(--brown);transform:translateY(-2px)}.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:17px}.product{background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:0 8px 22px #5d3a210b;position:relative;animation:rise .55s both;animation-delay:calc(var(--i)*70ms);cursor:pointer;transition:.25s}.product:hover{transform:translateY(-5px);box-shadow:var(--shadow)}@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}.pic{height:145px;border-radius:17px;background:#f4eee8;overflow:hidden;display:grid;place-items:center}.pic img{width:100%;height:100%;object-fit:cover}.pic span{font-size:48px}.product h3{font-size:14px;margin:10px 0 1px}.product b{color:var(--brown);font-size:13px}.product>button{position:absolute;bottom:10px;left:10px;width:34px;height:34px;border:0;border-radius:12px;background:var(--dark);color:#fff;font-size:21px}.modal{position:fixed;inset:0;background:#2b1c1566;backdrop-filter:blur(5px);z-index:50;display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:.3s}.modal.show{opacity:1;visibility:visible}.sheet{width:min(100%,560px);max-height:88vh;overflow:auto;background:#fff;border-radius:30px 30px 0 0;padding:22px;transform:translateY(100%);transition:.4s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 70px #0002}.show .sheet{transform:none}.close{float:left;border:0;background:#f4eee8;border-radius:50%;width:38px;height:38px;font-size:24px}.product-sheet{text-align:center}.product-sheet img{width:190px;height:190px;object-fit:contain;border-radius:26px;margin:30px auto 8px;background:#f6f1eb;display:block}.product-sheet h2{margin:5px}.product-sheet strong{display:block;color:var(--brown);font-size:20px}.primary{width:100%;border:0;border-radius:16px;background:var(--brown);color:#fff;padding:14px;font:700 14px Cairo;margin-top:18px}.cart-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}.cart-row div:first-child{display:flex;flex-direction:column}.cart-row span{font-size:11px;color:var(--brown)}.qty{display:flex;gap:12px;align-items:center}.qty button{width:30px;height:30px;border:0;border-radius:10px;background:#f4ece4;font-size:18px}.field{margin-top:13px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}.field input,.field select{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;font:13px Cairo;outline:none}.field input:focus,.field select:focus{border-color:var(--brown)}.totals{background:#fbf8f4;border-radius:18px;padding:8px 14px;margin-top:16px}.totals p{display:flex;justify-content:space-between;font-size:12px}.totals .grand{border-top:1px dashed #d6c7ba;padding-top:10px;font-size:15px}.msg{text-align:center;font-size:12px}.msg.err{color:#a33232}.msg.ok{color:#287844}.empty{text-align:center;padding:28px;color:#9b897d;font-size:13px}@media(min-width:700px){.products{grid-template-columns:repeat(4,1fr)}.modal{align-items:center}.sheet{border-radius:30px}.hero{padding:45px}.hero h1{font-size:36px}}

.store-status{margin:0 0 14px;padding:11px 14px;border-radius:14px;font-size:12px;font-weight:700;text-align:center;border:1px solid var(--line);background:#fff}.store-status.open{background:#edf8f0;color:#287844;border-color:#cdebd5}.store-status.closed{background:#fff0f0;color:#a33232;border-color:#f0cccc}.store-status.loading{color:#806e61}.primary:disabled,.product.closed{opacity:.48;cursor:not-allowed}.product.closed:hover{transform:none;box-shadow:0 8px 22px #5d3a210b}

/* v3 — 25% denser UI + full uncropped product images */
header{height:59px;padding:7.5px max(14px,calc((100% - 825px)/2));gap:8px}
header .logo{width:39px;height:39px}
header b{font-size:13px}
header span{font-size:9px}
.cart{width:35px;height:35px;border-radius:12px;font-size:15px}
.cart em{top:-4px;left:-4px;min-width:15px;height:15px;font:700 8px Cairo}
main{max-width:825px;padding:15px}
.hero{border-radius:21px;padding:23px 18px}
.hero:after{left:-11px;bottom:-26px;font-size:62px}
.hero span{font-size:9px}.hero h1{margin:3px 0;font-size:21px}.hero p{font-size:10px}
h2{font-size:14px;margin:20px 0 9px}
.categories{gap:7px;padding-bottom:5px}.chip{padding:7.5px 13px;font:600 10px Cairo}
.products{gap:10px;margin-top:13px}.product{border-radius:17px;padding:7.5px}
.pic{height:109px;border-radius:13px;background:#fff;padding:6px}
.pic img{width:100%;height:100%;object-fit:contain;object-position:center}
.pic span{font-size:36px}.product h3{font-size:10.5px;margin:7.5px 0 1px}.product b{font-size:10px}
.product>button{bottom:7.5px;left:7.5px;width:26px;height:26px;border-radius:9px;font-size:16px}
.sheet{width:min(100%,420px);max-height:88vh;border-radius:23px 23px 0 0;padding:16.5px}
.close{width:29px;height:29px;font-size:18px}
.product-sheet img{width:143px;height:143px;object-fit:contain;border-radius:20px;margin:23px auto 6px;background:#fff;padding:6px}
.product-sheet h2{margin:4px}.product-sheet strong{font-size:15px}
.primary{border-radius:12px;padding:10.5px;font:700 10.5px Cairo;margin-top:14px}
.cart-row{padding:9px 0}.cart-row span{font-size:8px}.qty{gap:9px}.qty button{width:23px;height:23px;border-radius:8px;font-size:14px}
.field{margin-top:10px}.field label{font-size:9px;margin-bottom:4px}.field input,.field select{border-radius:11px;padding:9px;font:10px Cairo}
.totals{border-radius:14px;padding:6px 10px;margin-top:12px}.totals p{font-size:9px}.totals .grand{padding-top:8px;font-size:11px}
.msg{font-size:9px}.empty{padding:21px;font-size:10px}
.store-status{margin:0 0 11px;padding:8px 11px;border-radius:11px;font-size:9px}
.loader img{width:84px;height:84px}.brand{font-size:15px}.dots{gap:5px;margin-top:14px}.dots i{width:5px;height:5px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:100;background:#2f7b4b;color:#fff;padding:10px 16px;border-radius:999px;font:700 11px Cairo;box-shadow:0 12px 35px #0002;opacity:0;visibility:hidden;transition:.25s;white-space:nowrap}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(min-width:700px){.modal{align-items:center}.sheet{border-radius:23px}.hero{padding:34px}.hero h1{font-size:27px}}

/* v4 image rendering: never crop remote product photos */
.pic{overflow:hidden;position:relative;background:#fff}
.pic img{display:block;width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center!important;margin:auto}
.product-sheet img{object-fit:contain!important;object-position:center!important}

/* v5: preserve full source aspect ratio and give product art more vertical room */
.pic{height:145px!important;padding:8px!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
.pic img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:50% 50%!important;margin:0!important}
@media(max-width:699px){.pic{height:125px!important}}