/* ===================================================================== * SHAHAZ.com — Homepage "For You" section (inc/shahaz-homepage-category-shop.php) * --------------------------------------------------------------------- * Clean single source of truth, rebuilt in ZIP-147. Four parts: * 1. Section + "For You" heading * 2. Category rail (ZIP-145 design) — same on every device, only the * number of visible cards changes (6 / 8 / 12) * 3. Product grid — masonry columns (2 / 3 / 4 / 5 / 6), equal gaps; * columns are filled by assets/js/shahaz-homepage-category-shop.js * 4. Product card (owner reference design) — white card, natural-ratio * image, hot-magenta heart, title, rating | sold, price, gold * "N% OFF" tag and hot-pink add-to-cart button * ===================================================================== */ /* ---------- 1. Section + heading ---------- */ .shz-cat-shop{ --shz-fy-gap:6px; --shz-fy-cols:2; --shz-fy-pink:#EC2A6B; --shz-fy-magenta:#E1007E; box-sizing:border-box; margin:0; padding:0 4px 14px; background:#FFFFFF; color:#111; } .shz-cat-shop *, .shz-cat-shop *::before, .shz-cat-shop *::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} .shz-cat-shop button{border:0;cursor:pointer;font:inherit;} .shz-cat-shop button:focus, .shz-cat-shop button:focus-visible, .shz-cat-shop a:focus, .shz-cat-shop a:focus-visible{outline:none !important;} .shz-cat-shop a.added_to_cart, .shz-cat-shop .added_to_cart{display:none !important;} /* ZIP-524/525 (owner reference; ZIP-525 20% lower, new gift box): the For You banner — crown + serif "For You" + small line on the left, a drawn gift box * with hearts on the right, soft pink ground with a pink sweep at the bottom (inc/shahaz-home-for-you.php). */ .shz-fyb{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;display:flex;align-items:center;box-sizing:border-box;width:auto;height:max(74px,13.4cqw);margin:0 -4px;padding:0 0 0 5.5%;border:0;border-radius:0; background:radial-gradient(60% 90% at 62% 40%,rgba(255,255,255,.85),transparent 70%),linear-gradient(90deg,#fdf9f8 0%,#fcf2f3 38%,#f8dfe7 70%,#f5d3df 100%)} .shz-fyb__copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;min-width:0} .shz-fyb__crown{display:flex;align-items:center;gap:1.2cqw;margin:0 0 .1cqw} .shz-fyb__crown i{display:block;width:11cqw;height:1px;background:linear-gradient(90deg,rgba(212,162,60,.2),#d4a23c 55%,#d4a23c)} .shz-fyb__crown i:last-child{width:9.6cqw;background:linear-gradient(90deg,#d4a23c,#d4a23c 45%,rgba(212,162,60,.2))} .shz-fyb__crown svg{flex:0 0 auto;width:max(11px,2.4cqw);height:auto} .shz-fyb__title{display:block;font-family:"Bodoni Moda","Playfair Display",Didot,Georgia,serif;font-size:max(25px,6.6cqw);font-weight:700;line-height:1;letter-spacing:-.01em;color:#1a1018;white-space:nowrap} .shz-fyb__t2{color:#d4246a} .shz-fyb__sub{display:block;margin-top:.5cqw;font-family:"Inter","Segoe UI",sans-serif;font-size:max(9.5px,1.85cqw);font-weight:500;line-height:1.15;letter-spacing:.06em;color:#3d3036;white-space:nowrap} .shz-fyb__art{position:absolute;z-index:1;left:44%;bottom:0;width:32%;height:100%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none} .shz-fyb__art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom} @container (max-width:560px){.shz-fyb__art{left:auto;right:3%;width:44%}} /* ZIP-544 (owner): three For You cards of the SAME size, upright, in one line, 1px gold frame — the first three * products of the category chosen below (the real .shz-cat-shop-card markup, swapped by the category script). * Phone + tablet: picture only. Computer (≥1024px): a wide card — picture 60% left, name · heart · price · discount · * cart 40% right. */ .shz-fyb__picks{position:absolute;z-index:1;right:3%;top:6%;bottom:6%;display:flex;align-items:stretch;justify-content:flex-end;gap:max(6px,1.2cqw)} .shz-fyb__picks .shz-cat-shop-card{flex:0 0 auto;height:100%;aspect-ratio:4/5;width:auto;box-sizing:border-box;padding:max(3px,.6cqw);border:0 !important;border-radius:max(9px,1.5cqw);background:#fff;overflow:hidden;box-shadow:none !important;outline:0} /* ZIP-632 (owner): a showcase — the white card holds a soft blush layer, and the picture sits inside that layer, so it * reads as two frames without any border line */ .shz-fyb__picks .shz-cat-shop-visual{width:100%;height:100%;aspect-ratio:auto;box-sizing:border-box;padding:max(2px,.45cqw);border-radius:max(7px,1.15cqw);background:#fbe9f1;overflow:hidden} .shz-fyb__picks .shz-cat-shop-visual img{width:100%;height:100%;object-fit:cover;border-radius:max(5px,.85cqw);background:#fff} .shz-fyb__picks .shz-cat-shop-copy, .shz-fyb__picks .shz-cat-shop-buyrow, .shz-fyb__picks .shz-crb, .shz-fyb__picks .shz-cat-shop-card::after, .shz-fyb__picks .shz-cat-shop-card > button.shahaz-p-wishlist{display:none !important} @container (max-width:560px){.shz-fyb__picks{right:2.5%;top:6%;bottom:6%}} @media (min-width:1024px){ .shz-cat-shop .shz-fyb{height:min(16cqw,200px)} .shz-fyb__picks{right:2%;top:8%;bottom:8%;gap:12px} .shz-fyb__picks .shz-cat-shop-card{display:grid;grid-template-columns:60% 40%;grid-template-rows:1fr auto;aspect-ratio:auto;width:min(18cqw,250px);container-type:normal} .shz-fyb__picks .shz-cat-shop-visual{grid-column:1;grid-row:1 / span 2} .shz-fyb__picks .shz-cat-shop-copy{display:flex !important;grid-column:2;grid-row:1;justify-content:flex-start;padding:10px 26px 4px 9px} .shz-fyb__picks .shz-cat-shop-title{font-family:inherit;font-size:13px;-webkit-line-clamp:3;line-clamp:3;line-height:1.3} .shz-fyb__picks .shz-cat-shop-card > button.shahaz-p-wishlist{display:grid !important;top:6px !important;right:4px !important;width:26px !important;height:26px !important;min-width:26px !important;min-height:26px !important} .shz-fyb__picks .shz-cat-shop-card > button.shahaz-p-wishlist svg{width:20px !important;height:20px !important} .shz-fyb__picks .shz-cat-shop-buyrow{display:flex !important;grid-column:2;grid-row:2;flex-direction:column;align-items:stretch;gap:4px;min-height:0;margin:0;background:none} .shz-fyb__picks .shz-cat-shop-prices{padding:0 6px 0 9px} .shz-fyb__picks .shz-fy-facts{display:none} .shz-fyb__picks .shz-cat-shop-price{font-size:16px} .shz-fyb__picks .shz-cat-shop-old-price{font-size:11px} .shz-fyb__picks .shz-cat-shop-pricerow{flex-wrap:wrap;row-gap:2px} .shz-fyb__picks .shz-cat-shop-buyrow{--shz-cta-h:38px;padding-bottom:38px} .shz-fyb__picks .shz-cat-shop-prices{padding-right:6px} } @media (min-width:701px){.shz-fyb{height:min(13.4cqw,152px)}.shz-fyb__title{font-size:min(6.6cqw,74px)}.shz-fyb__sub{font-size:min(1.85cqw,19px)}.shz-fyb__crown svg{width:min(2.4cqw,24px)}.shz-fyb__crown i{width:min(11cqw,120px)}.shz-fyb__crown i:last-child{width:min(9.6cqw,104px)}} /* ---------- 2. Category rail ---------- */ :root{--shz-for-you-card-width:calc((100vw - 62px - 5 * 4px) / 6);} .shz-cat-shop-category-strip{ position:sticky;top:0;z-index:490; /* ZIP-310: below the bottom nav (500) and the drawers (998+) */ /* ZIP-528 (owner): full width and right under the For You banner, on the same background — one layer, no gap */ width:calc(100% + 8px);max-width:none;min-width:0; margin:0 -4px 13px; padding:4px 6px; overflow:visible; background:linear-gradient(90deg,#fdf9f8 0%,#fcf2f3 38%,#f8dfe7 70%,#f5d3df 100%); border-radius:0; backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:none; scrollbar-width:none; } .shz-cat-shop-category-strip::-webkit-scrollbar{display:none;} .shz-cat-shop-category-strip.is-second-header-fixed{position:fixed !important;top:var(--shz-cat-shop-fixed-top,0px) !important;left:var(--shz-cat-shop-fixed-left,0px) !important;width:var(--shz-cat-shop-fixed-width,100%) !important;max-width:none !important;margin:0 !important;z-index:490 !important;} .shz-cat-shop-category-placeholder{display:none;width:100%;height:0;margin:0;padding:0;border:0;pointer-events:none;} .shz-cat-shop-category-placeholder.is-active{display:block;} .shz-cat-shop-category-scroll{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:1px 1px 3px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:auto;scrollbar-width:none;} .shz-cat-shop-category-scroll::-webkit-scrollbar{display:none;} .shz-cat-shop-category-track{display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:flex-start;gap:4px;width:max-content;min-width:100%;} /* Scoped under .shz-cat-shop so it outranks the section's button reset. */ .shz-cat-shop .shz-cat-shop-category-card{ position:relative; display:flex;flex-direction:column; flex:0 0 var(--shz-for-you-card-width); width:var(--shz-for-you-card-width); min-width:0; aspect-ratio:.82 / 1; padding:0; overflow:hidden; /* ZIP-254: full 1px border, inside the rail's padding so it is never clipped */ border:1px solid var(--shz-fy-magenta); border-radius:6px; background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,248,252,.98) 100%); box-shadow:none; cursor:pointer; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; } .shz-cat-shop .shz-cat-shop-category-card:hover, .shz-cat-shop .shz-cat-shop-category-card:focus, .shz-cat-shop .shz-cat-shop-category-card:focus-visible, .shz-cat-shop .shz-cat-shop-category-card:active{ background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,248,252,.98) 100%); border-color:var(--shz-fy-magenta); color:inherit; box-shadow:none; outline:none; } .shz-cat-shop .shz-cat-shop-category-card.active, .shz-cat-shop .shz-cat-shop-category-card.active:hover, .shz-cat-shop .shz-cat-shop-category-card.active:focus, .shz-cat-shop .shz-cat-shop-category-card.active:active{ background:linear-gradient(180deg,#fff 0%,#ffe3f1 100%); box-shadow:none; } .shz-cat-shop-category-image{display:block;flex:1 1 auto;width:100%;min-height:0;overflow:hidden;background:#f8dce8;border-radius:5px 5px 0 0;} .shz-cat-shop-category-image img{display:block;width:100%;height:100%;object-fit:cover;} .shz-cat-shop-category-image-placeholder{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(145deg,#fff,#ffe3f1);color:#e60073;font-size:28px;font-weight:900;} /* Name box always has room for exactly two lines, so text never leaves the card. */ .shz-cat-shop-category-name{ flex:0 0 auto; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2; height:calc(2 * 1.12em + 4px); max-width:100%; padding:2px 3px; overflow:hidden; color:#17131a; font-size:clamp(7px,calc(var(--shz-for-you-card-width) * .13),12px); font-weight:850; line-height:1.12; letter-spacing:-.08px; text-align:center; overflow-wrap:anywhere; } .shz-cat-shop-category-card.active .shz-cat-shop-category-name{color:#fff;background:linear-gradient(180deg,#ff4fb0 0%,#E1007E 100%);box-shadow:none;} .shz-cat-shop-dots{display:flex;justify-content:center;gap:8px;margin:10px auto 0;} .shz-cat-shop-dot{width:9px;height:9px;border-radius:50%;background:#b8c0c8;} .shz-cat-shop-dot.active{width:36px;border-radius:999px;background:#e60073;} /* ---------- 3. Product grid (masonry) ---------- */ .shz-cat-shop-viewport{width:100%;margin:0;padding:3px calc(var(--shz-fy-gap) - 4px) 4px;overflow:visible;outline:none;touch-action:pan-y pinch-zoom;} /* Before JS runs: plain grid. JS adds .is-masonry and fills .shz-cat-shop-col * columns, each card going into the currently shortest column. */ .shz-cat-shop-cards{display:grid;grid-template-columns:repeat(var(--shz-fy-cols),minmax(0,1fr));gap:var(--shz-fy-gap);align-items:start;width:100%;} .shz-cat-shop-cards.is-masonry{display:flex;align-items:flex-start;gap:var(--shz-fy-gap);} .shz-cat-shop-col{display:flex;flex:1 1 0;flex-direction:column;gap:var(--shz-fy-gap);min-width:0;} .shz-cat-shop-empty{grid-column:1 / -1;padding:30px;text-align:center;color:#666;background:#fff;border:2px solid #f4bdd3;border-radius:18px;} /* ---------- 4. Product card ---------- */ .shz-cat-shop-card{ position:relative; display:flex;flex-direction:column; min-width:0; overflow:hidden; background:#FFFFFF; border:1px solid #F1E6EB; border-radius:12px; box-shadow:none; container-type:inline-size; } .shz-cat-shop-visual{position:relative;display:block;width:100%;aspect-ratio:1 / var(--shz-fy-ratio,1);overflow:hidden;background:#FFFFFF;text-decoration:none;} .shz-cat-shop-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;} .shz-cat-shop-visual.is-zoomed img{transform:scale(1.06);} /* Heart: position/size only; look + states = shared contract in shahaz-card-feedback.css (ZIP-323). */ .shz-cat-shop-card > button.shahaz-p-wishlist{ position:absolute !important;top:8px !important;right:8px !important;left:auto !important;bottom:auto !important; z-index:5 !important; display:grid !important;place-items:center !important; width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important; margin:0 !important;padding:0 !important;font-size:0 !important;line-height:1 !important; } .shz-cat-shop-card > button.shahaz-p-wishlist svg{display:block !important;width:29px !important;height:29px !important;filter:none !important;} .shz-cat-shop-copy{display:flex;flex-direction:column;padding:clamp(4px,2.4cqi,7px) clamp(6px,4cqi,11px) clamp(4px,2.4cqi,7px);} .shz-cat-shop-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;margin:0;overflow:hidden;color:#1f1f1f;font-size:12px;font-size:clamp(12px,7cqi,17px);font-weight:500;line-height:1.28;text-decoration:none;overflow-wrap:anywhere;} /* Fact line (ZIP-253): a full-width glass capsule that shows the product's * real facts (rating, sold, save, perks) one after another. Each fact holds * its slot for 3s; the keyframe set is picked by the fact count (n2–n5). * One fact = static. Reduced motion = first fact only. */ .shz-fy-facts{ --fy-step:3s; position:relative;overflow:hidden; /* ZIP-268: sits under the price in the bottom strip — a box-shaped clear green glass bar. */ width:100%;height:clamp(15px,8.4cqi,22px); border:1px solid #0b7a43;border-radius:3px; background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 45%,rgba(0,0,0,0) 50%) ,linear-gradient(180deg,#118a48 0%,#0b7139 55%,#085f30 100%); /* ZIP-570 A11Y-03: deeper green, white text ≥4.8:1 */ color:#ffffff; font-size:9px;font-size:clamp(9px,4.9cqi,12.5px);font-weight:700;line-height:1; } .shz-fy-facts::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%); transform:translateX(-100%); animation:shzFyShine calc(var(--fy-step) * 2) ease-in-out infinite; } .shz-fy-facts__track{position:absolute;inset:0;} .shz-fy-fact{ position:absolute;inset:0; display:flex;align-items:center;justify-content:flex-start;gap:.35em; padding:0 .45em;white-space:nowrap;overflow:hidden; opacity:0; } .shz-fy-fact > span{overflow:hidden;text-overflow:ellipsis;} .shz-fy-fact svg{flex:0 0 auto;width:1.15em;height:1.15em;fill:currentColor;color:#ffffff;} .shz-fy-fact svg .shz-cc__perk-tick{fill:none;stroke:#139a50;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} .shz-fy-fact--cod svg .shz-cc__perk-tick,.shz-fy-fact--save svg .shz-cc__perk-tick{fill:#139a50;stroke:none;} .shz-fy-fact--rating svg{color:#ffe066;} .shz-fy-facts--n1 .shz-fy-fact{opacity:1;} .shz-fy-facts--n2 .shz-fy-fact, .shz-fy-facts--n3 .shz-fy-fact, .shz-fy-facts--n4 .shz-fy-fact, .shz-fy-facts--n5 .shz-fy-fact{animation:shzFyFact2 calc(var(--fy-step) * 2) linear infinite both;animation-delay:calc(var(--fy-i) * var(--fy-step));} .shz-fy-facts--n3 .shz-fy-fact{animation-name:shzFyFact3;animation-duration:calc(var(--fy-step) * 3);} .shz-fy-facts--n4 .shz-fy-fact{animation-name:shzFyFact4;animation-duration:calc(var(--fy-step) * 4);} .shz-fy-facts--n5 .shz-fy-fact{animation-name:shzFyFact5;animation-duration:calc(var(--fy-step) * 5);} @keyframes shzFyFact2{0%{opacity:0;transform:translateY(70%)}4%,46%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-70%)}} @keyframes shzFyFact3{0%{opacity:0;transform:translateY(70%)}3%,30%{opacity:1;transform:none}33.4%,100%{opacity:0;transform:translateY(-70%)}} @keyframes shzFyFact4{0%{opacity:0;transform:translateY(70%)}2.5%,22.5%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-70%)}} @keyframes shzFyFact5{0%{opacity:0;transform:translateY(70%)}2%,18%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-70%)}} @keyframes shzFyShine{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}} /* Bottom strip (owner reference): light-pink, full card width and flush * with the card's left/right/bottom edges. Price on the left; on the right * the yellow "N% OFF" arrow + magenta cart arrow (.shz-cta, ZIP-550). */ .shz-cat-shop-buyrow{display:flex;align-items:stretch;justify-content:space-between;gap:4px;min-height:40px;min-height:clamp(40px,21cqi,58px);margin-top:auto;background:linear-gradient(90deg,#FDE8F3 0%,#FFEFF8 100%);} /* ZIP-268: price line on top, the green fact bar under it — same strip height as before. */ .shz-cat-shop-prices{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:clamp(1px,.8cqi,3px);align-self:stretch;min-width:0;padding:2px 0 2px clamp(6px,4cqi,11px);overflow:hidden;line-height:1;} .shz-cat-shop-pricerow{display:flex;align-items:baseline;gap:.3em;min-width:0;overflow:hidden;line-height:1;} .shz-cat-shop-price{flex:0 0 auto;color:#E8115F;font-size:16px;font-size:clamp(16px,10cqi,26px);font-weight:800;letter-spacing:-.01em;white-space:nowrap;} .shz-cat-shop-price .woocommerce-Price-currencySymbol{font-size:1em;font-weight:800;margin-right:.04em;} .shz-cat-shop-old-price{flex:0 0 auto;min-width:0;overflow:visible;letter-spacing:-.02em;color:#655f72;font-size:10px;font-size:clamp(10px,5.6cqi,14px);font-weight:500;white-space:nowrap;text-decoration:line-through;} .shz-cat-shop-price .woocommerce-Price-amount, .shz-cat-shop-old-price .woocommerce-Price-amount{color:inherit;font:inherit;} .shz-cat-shop-price bdi,.shz-cat-shop-old-price bdi{white-space:nowrap;} /* ---------- Breakpoints ---------- */ @media (min-width:701px){ :root{--shz-for-you-card-width:calc((100vw - 70px - 7 * 4px) / 8);} .shz-cat-shop{--shz-fy-gap:8px;--shz-fy-cols:3;padding-bottom:20px;} .shz-cat-shop-category-strip{margin-bottom:20px;} } @media (min-width:1101px){ :root{--shz-for-you-card-width:calc((100vw - 70px - 11 * 4px) / 12);} .shz-cat-shop{--shz-fy-gap:10px;--shz-fy-cols:4;} } @media (min-width:1501px){.shz-cat-shop{--shz-fy-cols:5;}} @media (min-width:1901px){.shz-cat-shop{--shz-fy-cols:6;}} @media (prefers-reduced-motion:reduce){ .shz-cat-shop-visual img, .shz-cat-shop-card > button.shahaz-p-wishlist{transition:none;} .shz-fy-facts::after, .shz-fy-fact{animation:none !important;} .shz-fy-fact{opacity:0;} .shz-fy-fact:first-child{opacity:1;} } /* ZIP-355: endless For You feed — three small dots while the next cards load; gone when the feed has ended. */ .shz-cat-shop-more{display:flex;justify-content:center;gap:5px;height:18px;align-items:center;margin:2px 0 0} .shz-cat-shop-more span{width:6px;height:6px;border-radius:50%;background:#e0157a;opacity:.25} .shz-cat-shop-more.is-loading span{animation:shzFyDot 1s ease-in-out infinite} .shz-cat-shop-more.is-loading span:nth-child(2){animation-delay:.15s;background:#d39a12} .shz-cat-shop-more.is-loading span:nth-child(3){animation-delay:.3s} .shz-cat-shop-more.is-done{display:none} @keyframes shzFyDot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}} @media (prefers-reduced-motion:reduce){.shz-cat-shop-more.is-loading span{animation:none;opacity:.7}} /* ZIP-400 (owner reference): the All button has no picture — a big hot-magenta heart on a soft blush ground. */ .shz-cat-shop-category-image.is-all{display:grid;place-items:center;background:linear-gradient(180deg,#fff7fb 0%,#ffe6f2 100%)} .shz-cat-shop-all-heart{display:block;width:58%;max-width:64px;height:auto!important} /* ZIP-433 (owner): swipe the For You cards left / right to change category. The swipe area is at least most of a screen tall, so a short category can still be swiped. */ .shz-cat-shop-viewport{min-height:60vh;overflow-x:clip;position:relative;} /* ZIP-465: the neighbouring category's cards, waiting beside the grid during a swipe (carousel) */ .shz-cat-shop-peek{position:absolute;pointer-events:none;will-change:transform} .shz-cat-shop-cards{will-change:auto;} /* ZIP-548 (owner): the three For You cards grow sideways to fill the empty space between "For You" and the cards — * they start right after the heading and share the rest of the line equally (phone, tablet and computer). On the * computer the wider card gives the name, price and cart room, so the name no longer breaks into many short lines. */ .shz-fyb__picks{left:33%;justify-content:stretch} @container (max-width:560px){.shz-fyb__picks{left:38%}} /* phone: the small "Handpicked…" line needs a little more room */ .shz-fyb__picks .shz-cat-shop-card{flex:1 1 0;min-width:0;width:auto;aspect-ratio:auto} @media (min-width:1024px){ .shz-fyb__picks{left:calc(5.5% + 320px)} /* right after the heading (its size stops growing at 74px) */ .shz-fyb__picks .shz-cat-shop-card{width:auto;grid-template-columns:52% 48%} .shz-fyb__picks .shz-cat-shop-title{-webkit-line-clamp:2;line-clamp:2} .shz-fyb__picks .shz-cat-shop-copy{padding-right:34px} /* the name never runs under the heart */ } /* ZIP-550 (owner's exact design): the For You card's yellow "N% OFF" down-arrow and magenta up-arrow cart, fitted into * each other — one SVG (viewBox 160 0 140 64), so the proportions never change. Inside the bottom strip, bottom-right; * the card's own radius + overflow:hidden round the corner. The cart link/button sits over the magenta arrow. */ .shz-cat-shop-buyrow{--shz-cta-h:clamp(40px,21cqi,58px);position:relative;min-height:var(--shz-cta-h)} .shz-cat-shop-prices{padding-right:calc(var(--shz-cta-h) * 140 / 64 + 4px)} /* the price never goes under the arrows */ .shz-cta{position:absolute;right:0;bottom:0;height:var(--shz-cta-h);aspect-ratio:140 / 64;pointer-events:none;z-index:2} .shz-cta__art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden} .shz-cta__off{position:absolute;left:10.7%;width:38.6%;top:0;height:59%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:calc(var(--shz-cta-h) * 0.27);line-height:1.05;text-align:center;pointer-events:none} .shz-cta__cart{position:absolute;left:55.7%;width:44.3%;top:0;bottom:0;background:transparent;border:0;padding:0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent} .shz-cta__cart:focus-visible{outline:2px solid #F0146E;outline-offset:2px;border-radius:6px} .shz-cta--no-off .shz-cta__yellow, .shz-cta--no-off .shz-cta__off{display:none} /* ZIP-554 (owner): the old (crossed-out) price is always shown in full — never "৳ 2,4…". It sits right after the big * magenta price; when the line is narrow, assets/js/shahaz-homepage-category-shop.js makes only the old price smaller * until the whole line fits (down to 7px). */ .shz-cat-shop-pricerow{gap:.22em} /* ZIP-556 (owner's video): tapping the cart of a simple product (a