/* MEXO: pearl chrome, midnight ink and individual navigation keys. */
:root{--accent:#d7c8ff;--purple:#b7a2ec;--bg:#0e0e16;--panel:#171620;--panel2:#211c2c}
.topbar{height:116px;align-items:center}
.brand{position:relative;isolation:isolate;padding:7px 0}
.brand .brand-vector{width:246px;height:60px;object-fit:initial;mix-blend-mode:normal;overflow:visible;animation:brand-drift 6s ease-in-out infinite;filter:drop-shadow(0 3px 15px #b99bea1c)}
.brand .brand-sub{font-size:7px;letter-spacing:3.7px;color:#a29aaf;margin-top:8px;padding-left:3px}
.brand:after{content:'';height:1px;width:65px;position:absolute;bottom:1px;left:3px;background:linear-gradient(90deg,#bfa8ee8a,transparent);animation:brand-underline 6s ease-in-out infinite}
.online{font-size:9px;letter-spacing:1.5px;color:#a89fb6}
.online i{background:#ccbae9;box-shadow:0 0 13px #ccbae955}
.header-actions .round{background:linear-gradient(145deg,#27213066,#18151f66);border-color:#d7c8ff17;color:#c9bed8}
.primary,.chip.selected,.add-button{background:#d7c8ff;color:#292035}
.primary:hover{background:#e6dcff;box-shadow:0 5px 25px #b197e21c}
.add-button.added{background:#cdb7ff12;border-color:#cdb7ff45;color:#d7c8ff}
.product-tag.sale{background:#d7c8ff;color:#292035}
.promo{border-color:#b9a1df42;background:radial-gradient(ellipse at 87% -18%,#c4a2d75c,transparent 58%),radial-gradient(ellipse at 9% 6%,#6d83b254,transparent 55%),linear-gradient(120deg,#28334b,#463756 57%,#30243f);box-shadow:inset 0 1px #ffffff0b,0 18px 55px #0002}
.promo[data-slide="1"]{background:radial-gradient(ellipse at 87% -18%,#a7d5ce50,transparent 60%),linear-gradient(120deg,#26384b,#355460 57%,#23383e)}
.promo[data-slide="2"]{background:radial-gradient(ellipse at 87% -18%,#e0b4bd55,transparent 60%),linear-gradient(120deg,#3c304f,#654958 57%,#39283f)}
.promo:after{background:linear-gradient(0deg,#100b20bf,transparent 85%)}
.promo-symbol{background:linear-gradient(145deg,#f2dcff30,#9980be0c);border-color:#e7ceff33;box-shadow:inset 0 1px #ffffff2c,0 20px 50px #0003}
.promo-symbol>span{background:linear-gradient(145deg,#edd0bf,#d4acaa);color:#4c3345;border:1px solid #ffe5db52;box-shadow:0 8px 25px #0003}
.mexo-monogram{font-family:Georgia,'Times New Roman',serif;font-size:58px;line-height:1;font-weight:700;letter-spacing:-5px;padding-right:5px;background:linear-gradient(145deg,#fff 12%,#c4afd9 43%,#fff 66%,#b39ac9);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:0 2px 20px #f3ddff14}
.dots button.selected{background:#decaff;box-shadow:0 0 15px #decaff55}
.bottom-nav{gap:12px;padding:0;background:none;border:0;backdrop-filter:none;box-shadow:none;bottom:25px;align-items:end}
.bottom-nav button{width:76px;min-height:72px;gap:9px;padding:14px 8px 12px;border:1px solid #cbb4ec1c;border-radius:22px;background:linear-gradient(155deg,#29242fe8,#15131deb);backdrop-filter:blur(20px);box-shadow:0 10px 25px #0006,inset 0 1px #ffffff05;color:#93879f;transition:transform .25s,background .25s,box-shadow .25s,border-color .25s}
.bottom-nav button .icon{width:22px;height:22px;stroke-width:1.65}
.bottom-nav button span{font-size:8px;letter-spacing:.2px}
.bottom-nav button:hover{transform:translateY(-4px);color:#e6d8f8;border-color:#d7c8ff45}
.bottom-nav button.active{background:linear-gradient(145deg,#e8dcff,#c2a8ec);color:#342543;border-color:#eadcff9c;box-shadow:0 7px 30px #b995e42b,inset 0 1px #fff7;transform:translateY(-7px)}
.bottom-nav button.active:before{display:none}
.bottom-nav button.active .icon{filter:drop-shadow(0 2px 4px #6340861a)}
.bottom-nav button b{right:6px;top:5px;background:#edc6b4;color:#473141;border:1px solid #ffe9df50;min-width:17px;height:17px;font-size:8px}
.bottom-nav button.active b{background:#5b3f78;color:#fff;border-color:#74568c}
.bottom-nav button[data-view=cart]:not(.active){background:linear-gradient(145deg,#463849eb,#241d2be8);border-color:#dcb6d334}
.bottom-nav:after{content:'';z-index:-1;position:absolute;inset:-10px -16px -18px;background:radial-gradient(ellipse at bottom,#0e0e16a6,transparent 75%);pointer-events:none}
@keyframes brand-drift{0%,100%{transform:translateY(0);filter:drop-shadow(0 3px 15px #b99bea1c)}50%{transform:translateY(-3px);filter:drop-shadow(0 4px 18px #c9adf53d)}}
@keyframes brand-underline{0%,100%{width:65px;opacity:.45}50%{width:130px;opacity:.9}}
@media(max-width:900px){.topbar{height:110px}}
@media(max-width:620px){.topbar{height:99px}.brand .brand-vector{width:188px;height:47px}.brand .brand-sub{font-size:6px;letter-spacing:2.4px;margin-top:6px}.online{font-size:7px;letter-spacing:.8px}.header-actions{gap:7px}.mexo-monogram{font-size:43px;letter-spacing:-4px;padding-right:4px}.bottom-nav{bottom:max(15px,env(safe-area-inset-bottom));width:calc(100% - 32px);max-width:440px;gap:8px;padding:0;align-items:end}.bottom-nav button{width:calc((100% - 32px)/5);min-width:0;min-height:62px;padding:12px 2px 10px;border-radius:18px;gap:8px}.bottom-nav button .icon{width:20px;height:20px}.bottom-nav button span{font-size:7px;letter-spacing:0}.bottom-nav button.active{transform:translateY(-6px)}.bottom-nav button b{right:4px;top:3px;min-width:15px;height:15px;font-size:7px}.layout{padding-bottom:128px}#toast{bottom:112px}}
@media(max-width:350px){.brand .brand-vector{width:158px;height:40px}.online{display:none}.bottom-nav{gap:5px;width:calc(100% - 22px)}.bottom-nav button{width:calc((100% - 20px)/5)}.bottom-nav button span{font-size:6px}}
@media(prefers-reduced-motion:reduce){.brand .brand-vector,.brand:after{animation:none!important}.bottom-nav button{transition:none}.bottom-nav button:hover{transform:none}}

/* MEXOMARKET: compact shield/cart mark and a tall, condensed wordmark. */
.topbar{height:150px}
.brand .market-logo{width:285px;height:108px;filter:drop-shadow(0 2px 13px #b1d4ec20)}
.brand .brand-sub{margin-top:4px;padding-left:4px;font-size:7px;letter-spacing:3.5px;color:#a9becb}
.brand-emblem{transform-box:fill-box;transform-origin:center;animation:market-mark 5s ease-in-out infinite;filter:drop-shadow(0 0 5px #b6d8e536)}
.brand:after{background:linear-gradient(90deg,#b5d7ea80,transparent)}
.section-heading h2{font-size:30px;letter-spacing:-1.2px}
@keyframes market-mark{0%,100%{transform:translateY(0) rotate(-2deg);opacity:.88}50%{transform:translateY(-3px) rotate(2deg);opacity:1}}
@media(max-width:900px){.topbar{height:145px}.brand .market-logo{width:270px;height:103px}}
@media(max-width:620px){.topbar{height:124px}.brand .market-logo{width:206px;height:78px}.brand .brand-sub{font-size:6px;letter-spacing:2.1px;padding-left:2px;margin-top:5px}.section-heading h2{font-size:25px;letter-spacing:-1.1px}}
@media(max-width:350px){.topbar{height:111px}.brand .market-logo{width:174px;height:66px}.brand .brand-sub{font-size:5px;letter-spacing:1.8px}.section-heading h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.brand-emblem{animation:none!important}}

/* Keep lettering on a stable layer; animate only the emblem with transforms. */
.brand .market-logo{animation:none;filter:none;transform:translateZ(0);backface-visibility:hidden}
.brand-emblem{animation:market-emblem-smooth 6s cubic-bezier(.45,0,.55,1) infinite;filter:none;will-change:transform;backface-visibility:hidden}
@keyframes market-emblem-smooth{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-3px,0)}}
@media(prefers-reduced-motion:reduce){.brand-emblem{animation:none!important;will-change:auto}}