/* SHAHAZ Mobile Marketplace — isolated page styles. */ .shz-mobile-market{--mm-magenta:#f0067e;--mm-magenta-dark:#b90062;--mm-green:#11b96d;--mm-green-dark:#087c4a;--mm-orange:#ff6a00;--mm-red:#e61b45;--mm-ink:#272438;--mm-muted:#74717d;--mm-cream:#fff8f5;--mm-soft:#fff0f7;background:#f6f7fb;color:var(--mm-ink);min-height:100vh;overflow:hidden;font-family:inherit} .shz-mobile-market *{box-sizing:border-box}.shz-mobile-market a{text-decoration:none;color:inherit} .shz-mm-back,.shz-mm-cart{display:grid;place-items:center;flex:0 0 38px;height:38px;font-size:31px;color:#34313c}.shz-mm-cart{font-size:22px}.shz-mm-search{display:flex;align-items:center;gap:0;flex:1;min-width:0;height:42px;border:2px solid var(--mm-magenta);border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(240,6,126,.10)} .shz-mm-search-icon{width:34px;text-align:center;color:var(--mm-magenta);font-size:18px}.shz-mm-search input[type=search]{min-width:0;flex:1;border:0!important;outline:0!important;background:transparent!important;padding:0 6px!important;height:100%!important;color:var(--mm-ink)!important;font-size:14px!important}.shz-mm-search button{height:36px;margin-right:3px;padding:0 16px;border:0;border-radius:9px;background:linear-gradient(135deg,var(--mm-magenta),#ff3da6);color:#fff;font-weight:800;font-size:13px;white-space:nowrap} .shz-mm-welcome{display:flex;justify-content:space-between;gap:10px;padding:18px 18px 15px;background:linear-gradient(135deg,#fff0f6,#fffaf1 62%,#ffe7f1);border-bottom:1px solid #f5d9e7}.shz-mm-welcome-copy{min-width:0}.shz-mm-welcome-copy>span{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--mm-magenta)}.shz-mm-welcome h1{margin:4px 0 5px;font-size:24px;line-height:1.12}.shz-mm-welcome h1 strong{display:block;color:var(--mm-magenta)}.shz-mm-welcome p{margin:0;color:#5e5968;font-size:12px;line-height:1.45}.shz-mm-benefits{display:flex;gap:13px;flex-wrap:wrap;margin-top:10px}.shz-mm-benefits b{font-size:11px;color:#805d18}.shz-mm-gift{position:relative;flex:0 0 82px;height:88px;margin-top:4px;align-self:center}.shz-mm-gift:before,.shz-mm-gift:after{content:"";position:absolute;bottom:8px;width:38px;height:43px;border-radius:8px 8px 3px 3px;background:linear-gradient(135deg,#ffb6dc,#f0067e);box-shadow:0 6px 14px rgba(240,6,126,.18)}.shz-mm-gift:before{left:2px}.shz-mm-gift:after{right:2px}.shz-mm-gift span{position:absolute;z-index:2;left:19px;top:10px;display:grid;place-items:center;width:44px;height:44px;border-radius:8px 8px 12px 12px;background:linear-gradient(135deg,#ffd9ee,#ff74bc);color:#fff;font-size:25px;font-weight:900;transform:rotate(-5deg);box-shadow:0 8px 18px rgba(240,6,126,.22)}.shz-mm-gift i{position:absolute;z-index:3;left:40px;top:0;width:4px;height:67px;border-radius:4px;background:#fff6a8;transform:rotate(10deg);box-shadow:0 0 8px rgba(255,205,42,.45)} .shz-mm-vouchers{padding:10px 12px 12px;background:#fff}.shz-mm-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.shz-mm-section-head strong{font-size:18px}.shz-mm-section-head a{font-size:12px;font-weight:800;color:var(--mm-magenta)}.shz-mm-voucher-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-radius:13px;background:linear-gradient(135deg,#ff91c7,#ff63b4)}.shz-mm-voucher{display:flex;align-items:center;gap:8px;min-width:0;padding:10px;border-radius:9px;background:#fff;box-shadow:0 2px 5px rgba(74,0,45,.08);position:relative;overflow:hidden}.shz-mm-voucher strong{font-size:20px;line-height:1}.shz-mm-voucher span{font-size:11px;font-weight:800;line-height:1.25}.shz-mm-voucher small{display:block;font-size:9px;font-weight:600;color:#8b8790;margin-top:3px}.shz-mm-voucher.is-magenta strong{color:var(--mm-magenta)}.shz-mm-voucher.is-green strong{color:#079d66}.shz-mm-voucher:after{content:"";position:absolute;right:-12px;top:-18px;width:38px;height:38px;border-radius:50%;border:8px solid rgba(240,6,126,.08)} .shz-mm-limited{padding:11px 12px 14px;background:linear-gradient(180deg,#fff0f8,#fff7fb)}.shz-mm-limited-head{margin-bottom:10px}.shz-mm-limited-head strong{font-size:18px}.shz-mm-limited-head em{font-style:normal;color:#fff;background:var(--mm-magenta);padding:3px 6px;border-radius:5px;font-size:10px;vertical-align:2px}.shz-mm-limited-head small{display:block;color:var(--mm-muted);font-size:10px;margin-top:3px}.shz-mm-mini-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);gap:8px;overflow-x:auto;padding-bottom:2px;scroll-snap-type:x proximity}.shz-mm-mini-product{scroll-snap-align:start;background:#fff;border-radius:10px;overflow:hidden;padding-bottom:7px;box-shadow:0 2px 8px rgba(80,20,70,.08)}.shz-mm-mini-product img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.shz-mm-mini-product strong,.shz-mm-mini-product del{display:block;padding:5px 7px 0;font-size:14px}.shz-mm-mini-product strong{color:var(--mm-magenta)}.shz-mm-mini-product del{padding-top:1px;color:#9b9aa2;font-size:10px} .shz-mm-cats{position:sticky;top:59px;z-index:30;display:flex;gap:22px;overflow-x:auto;padding:11px 15px 9px;background:#fff;border-top:1px solid #f1eef2;border-bottom:1px solid #e9e6eb;white-space:nowrap;scrollbar-width:none}.shz-mm-cats::-webkit-scrollbar{display:none}.shz-mm-cats a{font-size:13px;font-weight:800;color:#5c5a64}.shz-mm-cats a.is-active{color:var(--mm-magenta)}.shz-mm-cats a.is-active span{margin-right:4px} .shz-mm-feed{padding:13px 12px 24px;background:#f2f4f8}.shz-mm-feed-head{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-bottom:10px}.shz-mm-feed-head span{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--mm-magenta)}.shz-mm-feed-head h2{margin:2px 0 0;font-size:20px}.shz-mm-feed-head>a{font-size:12px;font-weight:900;color:var(--mm-magenta)}.shz-mm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.shz-mm-product-card{min-width:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 9px rgba(35,32,52,.08);position:relative}.shz-mm-product-media{display:block;position:relative;background:#fff}.shz-mm-product-media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.shz-mm-ship{position:absolute;left:5px;bottom:5px;padding:3px 6px;border-radius:4px;background:linear-gradient(90deg,#00c992,#09a970);color:#fff;font-size:9px;font-weight:900}.shz-mm-product-body{padding:8px 8px 0}.shz-mm-proof{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}.shz-mm-proof b{background:#ff20a0;color:#fff;padding:3px 5px;font-size:9px}.shz-mm-proof span{font-size:10px;color:#88838f;overflow:hidden;text-overflow:ellipsis}.shz-mm-product-title{display:block;margin-top:6px;font-size:13px;line-height:1.3;min-height:34px;color:#3e3b46}.shz-mm-price-line{display:flex;align-items:end;justify-content:space-between;gap:4px;margin-top:7px;background:#fff2fa;padding:7px 6px 0}.shz-mm-price-line>div{min-width:0}.shz-mm-price-line strong{display:block;color:var(--mm-magenta);font-size:15px;line-height:1.1}.shz-mm-price-line del{display:block;color:#96939d;font-size:10px;margin-top:2px}.shz-mm-price-line>span{align-self:stretch;display:grid;place-items:center;min-width:45px;padding:2px 5px;background:linear-gradient(135deg,#ffb70a,#ff7b00);color:#fff;font-size:9px;font-weight:900;text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}.shz-mm-buy{display:block;text-align:center;padding:8px 6px;background:linear-gradient(135deg,var(--mm-magenta),#ff0075);color:#fff!important;font-size:15px;font-weight:900}.shz-mm-buy:active{transform:translateY(1px)} .shz-mm-trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:10px 8px;background:#fff;border-top:1px solid #ece8ee}.shz-mm-trust-strip div{text-align:center}.shz-mm-trust-strip b{display:block;color:var(--mm-green);font-size:15px}.shz-mm-trust-strip span{display:block;font-size:8px;color:#6f6c75;font-weight:700} @media (min-width:768px){.shz-mobile-market{max-width:760px;margin:0 auto;box-shadow:0 0 35px rgba(0,0,0,.08)}.shz-mm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shz-mm-cats{top:0}.shz-mm-product-title{font-size:14px}.shz-mm-welcome h1{font-size:30px}} @media (prefers-reduced-motion:no-preference){.shz-mm-mini-product{animation:mmCardIn .55s both}.shz-mm-product-card{animation:mmCardLift .6s both}.shz-mm-voucher:nth-child(2){animation-delay:.08s}.shz-mm-product-card:nth-child(2n){animation-delay:.05s}@keyframes mmCardIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes mmCardLift{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}} /* ------------------------------------------------------------------------- * LIVE MARKETPLACE MOTION LAYER * The reference experience feels alive: small independent motions, not one * giant page animation. This layer keeps the motion local to this template. * ------------------------------------------------------------------------- */ .shz-mobile-market{isolation:isolate} .shz-mobile-market.mm-scrolled .shz-mm-search:focus-within{box-shadow:0 0 0 3px rgba(240,6,126,.10),0 4px 12px rgba(240,6,126,.12);transform:translateY(-1px)} .shz-mm-search button{position:relative;overflow:hidden;transition:transform .18s ease,filter .18s ease} .shz-mm-search button:before{content:"";position:absolute;inset:-40% auto -40% -55%;width:35%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:mmSweep 3.8s ease-in-out infinite} .shz-mm-search button:active{transform:translateY(2px) scale(.98)} .shz-mm-welcome{position:relative;overflow:hidden} .shz-mm-welcome:after{content:"";position:absolute;inset:auto -20% -45% auto;width:55%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.72),transparent 62%);pointer-events:none;animation:mmGlowFloat 5s ease-in-out infinite} .shz-mm-welcome-copy,.shz-mm-gift{position:relative;z-index:1} .shz-mm-benefits b{position:relative;animation:mmBenefitPulse 3.2s ease-in-out infinite} .shz-mm-benefits b:nth-child(2){animation-delay:1.1s} .shz-mm-gift{animation:mmGiftFloat 3.4s ease-in-out infinite} .shz-mm-gift span{animation:mmGiftTilt 2.8s ease-in-out infinite} .shz-mm-gift i{animation:mmGiftRibbon 2.2s ease-in-out infinite} .shz-mm-vouchers{position:relative} .shz-mm-voucher-row{position:relative;overflow:hidden} .shz-mm-voucher-row:before{content:"";position:absolute;top:-35%;bottom:-35%;left:-22%;width:18%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);animation:mmVoucherSweep 4.6s ease-in-out infinite} .shz-mm-voucher{transition:transform .22s ease,box-shadow .22s ease} .shz-mm-voucher:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 8px 18px rgba(74,0,45,.13)} .shz-mm-voucher:active{transform:translateY(2px) scale(.985)} .shz-mm-limited-head em{position:relative;box-shadow:0 3px 9px rgba(240,6,126,.22);animation:mmLiveBadge 1.8s ease-in-out infinite} .shz-mm-live-dot{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#fff;vertical-align:1px;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:mmLiveDot 1.4s infinite} .shz-mm-countdown{margin-left:5px;color:var(--mm-red);font-weight:900;white-space:nowrap} .shz-mm-mini-rail{scroll-behavior:smooth} .shz-mm-mini-product{position:relative;transition:transform .24s ease,box-shadow .24s ease} .shz-mm-mini-product:after{content:"";position:absolute;top:0;left:-45%;width:24%;height:100%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);pointer-events:none;animation:mmCardShine 4.5s ease-in-out infinite} .shz-mm-mini-product:nth-child(2):after{animation-delay:1.2s}.shz-mm-mini-product:nth-child(3):after{animation-delay:2.4s} .shz-mm-mini-product:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 10px 20px rgba(80,20,70,.13)} .shz-mm-mini-product img{transition:transform .55s ease;animation:mmImageBreath 5.5s ease-in-out infinite} .shz-mm-mini-product:nth-child(2) img{animation-delay:.8s}.shz-mm-mini-product:nth-child(3) img{animation-delay:1.6s} .shz-mm-cats{scroll-behavior:smooth} .shz-mm-cats a{position:relative;transition:transform .2s ease,color .2s ease} .shz-mm-cats a:after{content:"";position:absolute;left:50%;right:50%;bottom:-6px;height:3px;border-radius:3px;background:currentColor;transition:left .2s ease,right .2s ease} .shz-mm-cats a:hover{transform:translateY(-2px)}.shz-mm-cats a.is-active:after{left:0;right:0} .shz-mm-feed{position:relative} .shz-mm-feed-head span{display:inline-flex;align-items:center;gap:5px} .shz-mm-feed-head span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mm-green);box-shadow:0 0 0 0 rgba(17,185,109,.45);animation:mmLiveDotGreen 1.5s infinite} .shz-mm-product-card{transition:transform .22s ease,box-shadow .22s ease} .shz-mm-product-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(35,32,52,.13)} .shz-mm-product-card:active{transform:translateY(1px) scale(.995)} .shz-mm-product-media{overflow:hidden} .shz-mm-product-media img{transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .35s ease;animation:mmImageBreath 6.2s ease-in-out infinite} .shz-mm-product-card:nth-child(3n) .shz-mm-product-media img{animation-delay:1.1s}.shz-mm-product-card:nth-child(4n) .shz-mm-product-media img{animation-delay:2s} .shz-mm-product-card:hover .shz-mm-product-media img{transform:scale(1.045)} .shz-mm-ship{animation:mmShipFloat 2.8s ease-in-out infinite} .shz-mm-proof b{position:relative;overflow:hidden} .shz-mm-proof b:after{content:"";position:absolute;top:-20%;bottom:-20%;left:-80%;width:45%;transform:skewX(-20deg);background:rgba(255,255,255,.55);animation:mmBadgeSweep 3.7s ease-in-out infinite} .shz-mm-price-line>span{animation:mmDiscountBounce 2.4s ease-in-out infinite} .shz-mm-buy{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;overflow:hidden;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease} .shz-mm-buy i{font-style:normal;font-size:18px;line-height:1;transform:translateX(0);transition:transform .2s ease} .shz-mm-buy:before{content:"";position:absolute;inset:-40% auto -40% -55%;width:28%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);animation:mmBuySweep 3.2s ease-in-out infinite} .shz-mm-buy:hover{transform:translateY(-2px);filter:saturate(1.12);box-shadow:0 7px 15px rgba(240,6,126,.22)} .shz-mm-buy:hover i{transform:translateX(3px)}.shz-mm-buy:active{transform:translateY(3px) scale(.97);box-shadow:inset 0 3px 7px rgba(90,0,50,.22)} .shz-mm-trust-strip div{transition:transform .2s ease}.shz-mm-trust-strip div:nth-child(1){animation:mmTrustFloat 3.6s ease-in-out infinite}.shz-mm-trust-strip div:nth-child(2){animation:mmTrustFloat 3.6s ease-in-out infinite .7s}.shz-mm-trust-strip div:nth-child(3){animation:mmTrustFloat 3.6s ease-in-out infinite 1.4s}.shz-mm-trust-strip div:nth-child(4){animation:mmTrustFloat 3.6s ease-in-out infinite 2.1s} @keyframes mmSweep{0%,58%,100%{transform:translateX(0) skewX(-20deg);opacity:0}64%{opacity:1}82%{transform:translateX(430%) skewX(-20deg);opacity:0}} @keyframes mmGlowFloat{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.55}50%{transform:translate3d(-8px,-5px,0) scale(1.05);opacity:.85}} @keyframes mmBenefitPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}} @keyframes mmGiftFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1.5deg)}} @keyframes mmGiftTilt{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(3deg) scale(1.04)}} @keyframes mmGiftRibbon{0%,100%{transform:rotate(10deg) scaleY(1)}50%{transform:rotate(2deg) scaleY(1.08)}} @keyframes mmVoucherSweep{0%,60%,100%{transform:translateX(0) skewX(-20deg);opacity:0}67%{opacity:1}86%{transform:translateX(720%) skewX(-20deg);opacity:0}} @keyframes mmLiveBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}} @keyframes mmLiveDot{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}50%{box-shadow:0 0 0 5px rgba(255,255,255,0)}} @keyframes mmCardShine{0%,62%,100%{transform:translateX(0) skewX(-18deg);opacity:0}68%{opacity:1}86%{transform:translateX(650%) skewX(-18deg);opacity:0}} @keyframes mmImageBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}} @keyframes mmLiveDotGreen{0%,100%{box-shadow:0 0 0 0 rgba(17,185,109,.45)}50%{box-shadow:0 0 0 5px rgba(17,185,109,0)}} @keyframes mmShipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}} @keyframes mmBadgeSweep{0%,58%,100%{transform:translateX(0) skewX(-20deg);opacity:0}65%{opacity:1}83%{transform:translateX(330%) skewX(-20deg);opacity:0}} @keyframes mmDiscountBounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-1deg)}} @keyframes mmBuySweep{0%,58%,100%{transform:translateX(0) skewX(-20deg);opacity:0}65%{opacity:1}82%{transform:translateX(520%) skewX(-20deg);opacity:0}} @keyframes mmTrustFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}} @media (max-width:480px){.shz-mm-back,.shz-mm-cart{flex-basis:34px;width:34px;height:36px}.shz-mm-back{font-size:29px}.shz-mm-cart{font-size:20px}.shz-mm-search{height:40px}.shz-mm-search button{height:34px;padding-inline:13px}.shz-mm-welcome{padding:16px 14px 14px}.shz-mm-welcome h1{font-size:22px}.shz-mm-gift{flex-basis:70px;height:78px;transform:scale(.9)}.shz-mm-voucher-row{padding:8px;gap:6px}.shz-mm-voucher{padding:8px;gap:6px}.shz-mm-voucher strong{font-size:18px}.shz-mm-voucher span{font-size:10px}.shz-mm-limited{padding-inline:9px}.shz-mm-mini-rail{grid-auto-columns:calc((100vw - 36px)/3)}.shz-mm-cats{gap:18px;padding-inline:12px}.shz-mm-feed{padding-inline:8px}.shz-mm-grid{gap:7px}.shz-mm-product-body{padding-inline:7px}.shz-mm-product-title{font-size:12px}.shz-mm-buy{padding-block:7px;font-size:14px}.shz-mm-trust-strip{gap:2px;padding-inline:5px}} @media (prefers-reduced-motion:reduce){.shz-mobile-market *,.shz-mobile-market *:before,.shz-mobile-market *:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}} /* ------------------------------------------------------------------------- * PHASE 58 — MARKETPLACE PAGE CHROME + COMPACT PRODUCT CARDS * Scope: this page template only. The page's own marketplace header remains. * The reusable global Home/Chat/Search chrome and full footer are hidden here; * the existing mobile bottom navigation remains untouched. * ------------------------------------------------------------------------- */ body.page-template-page-templates-shahaz-mobile-marketplace-php #shahaz-header, body.page-template-page-templates-shahaz-mobile-marketplace-php .shahaz-header, body.page-template-page-templates-shahaz-mobile-marketplace-php #shahaz-footer, body.page-template-page-templates-shahaz-mobile-marketplace-php .shahaz-footer, body.page-template-page-templates-shahaz-mobile-marketplace-php footer.shahaz-footer{ display:none!important; visibility:hidden!important; height:0!important; min-height:0!important; max-height:0!important; overflow:hidden!important; margin:0!important; padding:0!important; } @media (max-width:767px){ /* Keep the existing card design, but make the image area the clear majority * of the card. Text/actions occupy the compact lower quarter. */ .shz-mm-grid .shz-mm-product-card{ display:flex; flex-direction:column; aspect-ratio:3/4; min-height:0; } .shz-mm-grid .shz-mm-product-media{ flex:0 0 75%; min-height:0; height:auto; } .shz-mm-grid .shz-mm-product-media img{ width:100%; height:100%; aspect-ratio:auto; object-fit:cover; } .shz-mm-grid .shz-mm-product-body{ flex:0 0 25%; min-height:0; height:25%; padding:4px 6px 0; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:2px; overflow:hidden; } .shz-mm-grid .shz-mm-proof{min-height:13px;gap:4px;line-height:1} .shz-mm-grid .shz-mm-proof b{padding:2px 4px;font-size:7px;line-height:1.1} .shz-mm-grid .shz-mm-proof span{font-size:7px;line-height:1.1} .shz-mm-grid .shz-mm-product-title{ margin-top:0; min-height:0; font-size:10px; line-height:1.15; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .shz-mm-grid .shz-mm-price-line{ margin-top:0; padding:2px 3px 0; min-height:22px; align-items:center; } .shz-mm-grid .shz-mm-price-line strong{font-size:11px;line-height:1} .shz-mm-grid .shz-mm-price-line del{font-size:7px;line-height:1;margin-top:1px} .shz-mm-grid .shz-mm-price-line>span{min-width:30px;padding:1px 3px;font-size:6px;line-height:1} .shz-mm-grid .shz-mm-buy{ min-height:22px; height:22px; padding:3px 4px; font-size:11px; line-height:16px; border-radius:0 0 9px 9px; } .shz-mm-grid .shz-mm-buy i{font-size:13px} } /* ------------------------------------------------------------------------- * PHASE 59 — TOPBAR 3D CONTROL PAIR * Keeps the search field on one visual center line while upgrading only the * Back and Cart controls. No other marketplace sections are changed here. * ------------------------------------------------------------------------- */ .shz-mm-back, .shz-mm-cart{ position:relative; align-self:center; flex:0 0 42px; width:42px; height:42px; border:1.5px solid #f0c75e; border-radius:14px; text-decoration:none!important; line-height:1; isolation:isolate; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .shz-mm-back{ font-size:0; color:#fff; background:linear-gradient(145deg,#ff3da6 0%,#f0067e 48%,#b90062 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(104,0,61,.25), 0 4px 0 #9e155f, 0 7px 14px rgba(240,6,126,.25); } .shz-mm-back::before{ content:'‹'; position:absolute; inset:0; display:grid; place-items:center; padding-bottom:2px; font-family:Arial,sans-serif; font-size:34px; font-weight:300; line-height:1; color:#fff; text-shadow:0 2px 0 rgba(116,0,65,.35),0 0 7px rgba(255,255,255,.22); } .shz-mm-back::after, .shz-mm-cart::after{ content:''; position:absolute; left:8px; right:8px; top:5px; height:7px; border-radius:999px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); pointer-events:none; opacity:.85; } .shz-mm-cart{ font-size:0; color:#fff; background:linear-gradient(145deg,#ff7b00 0%,#ff4b00 45%,#e61b45 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.58), inset 0 -4px 0 rgba(137,18,0,.28), 0 4px 0 #c63a1d, 0 7px 15px rgba(230,27,69,.24); } .shz-mm-cart::before{ content:'🛒'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px; line-height:1; filter:drop-shadow(0 2px 0 rgba(117,28,0,.38)); transform:translateY(-1px); } .shz-mm-back:hover, .shz-mm-cart:hover{ transform:translateY(-2px) scale(1.03); filter:saturate(1.08); } .shz-mm-back:active, .shz-mm-cart:active{ transform:translateY(2px) scale(.96); box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(80,0,40,.22), 0 2px 0 rgba(120,20,70,.35), 0 4px 8px rgba(240,6,126,.18); } @media (max-width:480px){ .shz-mm-back, .shz-mm-cart{ flex-basis:40px; width:40px; height:40px; align-self:center; } .shz-mm-back::before{font-size:32px;} .shz-mm-cart::before{font-size:21px;} .shz-mm-search{height:40px;align-self:center;} } /* ------------------------------------------------------------------------- * PHASE 60 — SHOP PRODUCT CARD / FULL-WIDTH PRODUCT RIBBON * Mobile marketplace page only. Desktop layout remains untouched. * Inspired by the supplied compact marketplace reference: a slim full-width * product heading, hot pink/red commerce actions, and a thin orange discount * pennant without increasing the product-card footprint. * ------------------------------------------------------------------------- */ @media (max-width:767px){ .shz-mm-feed{ padding-top:8px; } .shz-mm-feed-head{ position:relative; isolation:isolate; min-height:48px; width:100%; margin:0 0 9px; padding:7px 9px 6px 12px; align-items:center; border:1px solid rgba(255,255,255,.92); border-radius:13px; background: linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,244,250,.96) 48%,rgba(255,231,240,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 0 rgba(205,34,103,.10), 0 7px 14px rgba(112,20,72,.08); overflow:hidden; } .shz-mm-feed-head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,#ff007f 0%,#ff315f 46%,#ff7a00 100%); opacity:.9; z-index:-1; } .shz-mm-feed-copy{ position:relative; z-index:4; min-width:0; padding-left:27px; } .shz-mm-feed-head span{ font-size:7px; letter-spacing:.12em; line-height:1; } .shz-mm-feed-head span::before{ width:5px; height:5px; } .shz-mm-feed-head h2{ margin:2px 0 0; font-size:17px; line-height:1.05; font-weight:950; background:linear-gradient(90deg,#bd0068,#f0067e 58%,#e82a45); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 0 rgba(255,255,255,.8); } .shz-mm-feed-head>a{ position:relative; z-index:5; flex:0 0 auto; padding:5px 8px; border-radius:999px; color:#fff; font-size:9px; line-height:1; background:linear-gradient(135deg,#bd0068,#f0067e 55%,#ff3b5d); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 #a3135e,0 5px 9px rgba(240,6,126,.16); transition:transform .18s ease,box-shadow .18s ease; } .shz-mm-feed-head>a:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 #a3135e,0 3px 6px rgba(240,6,126,.12)} /* Small ribbon/bow art: decorative, not a real image, so it stays sharp * on every device and does not change the card/grid dimensions. */ .shz-mm-feed-title-art{ position:absolute; left:7px; top:4px; width:34px; height:39px; z-index:3; pointer-events:none; transform:rotate(-2deg); animation:mmRibbonFloat 3.8s ease-in-out infinite; } .shz-mm-ribbon-bow{ position:absolute; left:12px; top:9px; width:12px; height:12px; border-radius:50%; background:linear-gradient(145deg,#ff8fc8,#f0067e 60%,#b60061); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(150,0,82,.2); } .shz-mm-ribbon-bow i, .shz-mm-ribbon-bow b{ position:absolute; top:0; width:17px; height:12px; border:2px solid #ff4b73; background:linear-gradient(145deg,#ff4c9f,#d90068); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 3px rgba(139,0,70,.14); } .shz-mm-ribbon-bow i{left:-12px;border-radius:9px 4px 9px 7px;transform:rotate(17deg);} .shz-mm-ribbon-bow b{right:-12px;border-radius:4px 9px 7px 9px;transform:rotate(-17deg);} .shz-mm-ribbon-bow em{ position:absolute; left:2px; top:9px; width:8px; height:21px; background:linear-gradient(90deg,#ff4b72,#e9006d); clip-path:polygon(0 0,100% 0,82% 100%,50% 77%,18% 100%); transform:rotate(6deg); box-shadow:0 2px 3px rgba(140,0,70,.15); } .shz-mm-ribbon-tail{ position:absolute; top:14px; width:16px; height:6px; border-radius:999px; background:linear-gradient(90deg,#ff7b00,#ff315f,#e90076); box-shadow:0 1px 0 rgba(255,255,255,.65); } .shz-mm-ribbon-tail-left{left:-3px;transform:rotate(-20deg)} .shz-mm-ribbon-tail-right{right:-3px;transform:rotate(20deg)} /* Keep the two-column card footprint exactly where it is. The design changes * happen inside the existing footprint only. */ .shz-mm-grid .shz-mm-product-card{ aspect-ratio:3/4; border:1px solid rgba(255,255,255,.9); box-shadow:0 3px 10px rgba(35,32,52,.09),inset 0 0 0 1px rgba(255,0,128,.035); } .shz-mm-grid .shz-mm-product-card:nth-child(3n+1){border-radius:13px 9px 13px 9px} .shz-mm-grid .shz-mm-product-card:nth-child(3n+2){border-radius:9px 13px 9px 13px} .shz-mm-grid .shz-mm-product-card:nth-child(3n){border-radius:12px} .shz-mm-grid .shz-mm-product-media{ position:relative; isolation:isolate; } .shz-mm-grid .shz-mm-product-media::after{ content:""; position:absolute; inset:6px; border:1px solid rgba(255,255,255,.46); border-radius:8px 5px 10px 6px; box-shadow:inset 0 0 0 1px rgba(255,0,128,.08); pointer-events:none; z-index:2; } .shz-mm-grid .shz-mm-product-card:nth-child(3n+2) .shz-mm-product-media::after{transform:rotate(.7deg);border-radius:5px 10px 6px 9px} .shz-mm-grid .shz-mm-product-card:nth-child(3n) .shz-mm-product-media::after{transform:rotate(-.7deg);border-radius:10px 6px 8px 5px} /* Lazada-like compact action row: price left, thin orange discount * pennant in the middle, hot-pink Buy button at the right. */ .shz-mm-grid .shz-mm-product-body{ position:relative; grid-template-rows:auto minmax(0,1fr) auto; padding:3px 0 0; gap:0; } .shz-mm-grid .shz-mm-proof{padding:0 6px;min-height:12px} .shz-mm-grid .shz-mm-proof b{ padding:2px 4px; font-size:6.5px; background:linear-gradient(135deg,#f0067e,#ff3b63); box-shadow:0 1px 0 rgba(140,0,70,.18); } .shz-mm-grid .shz-mm-proof span{font-size:6.5px} .shz-mm-grid .shz-mm-product-title{ padding:0 6px; margin-top:1px; font-size:10px; line-height:1.12; min-height:0; -webkit-line-clamp:1; } .shz-mm-grid .shz-mm-price-line{ position:relative; margin-top:1px; min-height:24px; height:24px; padding:0 47px 0 6px; align-items:stretch; background:linear-gradient(90deg,#fff0fa,#ffe8f5); gap:0; } .shz-mm-grid .shz-mm-price-line>div{ display:flex; flex-direction:column; justify-content:center; min-width:0; padding-bottom:1px; } .shz-mm-grid .shz-mm-price-line strong{font-size:11px;line-height:1;color:#ee006f} .shz-mm-grid .shz-mm-price-line del{font-size:6.5px;line-height:1;margin-top:2px;color:#8f8b94} .shz-mm-grid .shz-mm-price-line>span{ position:relative; align-self:stretch; min-width:34px; width:34px; margin-left:auto; padding:1px 2px 5px; font-size:7px; line-height:1; font-weight:950; background:linear-gradient(145deg,#ffc126 0%,#ff9d00 55%,#ff7615 100%); color:#fff; clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%); filter:drop-shadow(0 1px 1px rgba(205,104,0,.25)); animation:mmDiscountBounce 2.8s ease-in-out infinite; } .shz-mm-grid .shz-mm-price-line>span::before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:rgba(255,255,255,.75); } .shz-mm-grid .shz-mm-buy{ position:absolute; right:0; bottom:0; z-index:6; min-width:47px; width:47px; height:24px; min-height:24px; padding:0 4px; border-radius:0 0 8px 0; background:linear-gradient(135deg,#f80079 0%,#ff0070 52%,#e61b45 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(190,0,85,.08); font-size:11px; line-height:24px; font-weight:950; letter-spacing:.01em; } .shz-mm-grid .shz-mm-buy span{position:relative;z-index:2} .shz-mm-grid .shz-mm-buy i{display:none} .shz-mm-grid .shz-mm-buy::before{width:24%;animation:mmBuySweep 2.8s ease-in-out infinite} .shz-mm-grid .shz-mm-buy:hover{transform:none} .shz-mm-grid .shz-mm-buy:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 5px rgba(100,0,50,.2)} } @keyframes mmRibbonFloat{ 0%,100%{transform:rotate(-2deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-2px)} }