/* SHAHAZ.com — Homepage header, drawer and announcement chrome */ :root{--shz-gold:#d9a928;--shz-gold-soft:#f5df8a;--shz-magenta:#e60078;--shz-cream:#fff6df} html,body{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip} /* ========================================================================== HOMEPAGE MAIN HEADER (header-custom.php, #shahaz-header) — ZIP 648 Reference images (mobile + tablet/desktop): · Mobile: centred bag + SHAHAZ.com on top; below, a hot-magenta search capsule holding a white field (mic left, camera right) with the search icon on the magenta, then a bold magenta heart and a bold magenta menu. · Tablet / desktop: logo · capsule · heart · menu on ONE row; "Become a Seller" (icon + text) at the top-right. · All devices: ZIP-303 background — soft pink / gold washes, pink→gold ribbons, pink halftone dots. ========================================================================== */ .shahaz-home-header{ --hh-magenta:#e0317a; --hh-magenta-deep:#c81d66; --hh-pad:10px; --hh-logo-h:52px; --hh-bar-h:48px; --hh-field-inset:5px; --hh-tool:24px; --hh-submit-w:58px; --hh-submit-icon:26px; --hh-icon:34px; --hh-gap:10px; --hh-input-font:14px; position:relative; z-index:997; width:100%; box-sizing:border-box; background:#fff; font-family:"Hind Siliguri","Segoe UI",Roboto,Arial,sans-serif; } .shahaz-home-header *,.shahaz-home-header *::before,.shahaz-home-header *::after{box-sizing:border-box} /* No browser/Astra blue anywhere; a brand ring only for keyboard focus. */ .shahaz-home-header a,.shahaz-home-header button,.shahaz-home-header input{-webkit-tap-highlight-color:transparent!important;outline:none!important} .shahaz-home-header a:focus,.shahaz-home-header button:focus,.shahaz-home-header input:focus, .shahaz-home-header a:active,.shahaz-home-header button:active{outline:none!important;box-shadow:none} .shahaz-home-header a:focus-visible,.shahaz-home-header button:focus-visible{outline:2px solid rgba(224,49,122,.55)!important;outline-offset:3px} /* Stage: reference background (ZIP-303) — pink/gold washes, ribbons, halftone dots; content aligned to 1180px. */ .shahaz-home-header__stage{ --hh-inline:max(var(--hh-pad),calc((100% - 1180px) / 2 + var(--hh-pad))); display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"brand" "bar"; justify-items:center; row-gap:10px; width:100%; margin:0; padding:10px var(--hh-inline) 12px; position:relative; isolation:isolate; /* ZIP-303 (owner reference): soft pink wash top-left, warm gold wash right, pink→gold ribbons; dots in ::before */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ff4fa3' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23ff5aa8'/%3E%3Cstop offset='.6' stop-color='%23f6b94a'/%3E%3Cstop offset='1' stop-color='%23f3c04f' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f0c455' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23f6cf6a'/%3E%3Cstop offset='.65' stop-color='%23d49a2a'/%3E%3Cstop offset='1' stop-color='%23f0c455' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 74C110 24 250 2 430-10' stroke='url(%23p)' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-20 92C120 40 260 16 450-4' stroke='url(%23g)' stroke-width='1.4' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-20 188C60 168 150 176 290 212' stroke='url(%23g)' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M680-8C800 30 920 58 1020 44' stroke='url(%23g)' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M740 212C850 160 940 146 1020 152' stroke='url(%23p)' stroke-width='4.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M780 212C880 176 950 166 1020 170' stroke='url(%23g)' stroke-width='1.2' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat, radial-gradient(55% 95% at 0% 0%,rgba(255,92,170,.30) 0%,rgba(255,92,170,0) 70%), radial-gradient(42% 90% at 100% 18%,rgba(255,205,90,.30) 0%,rgba(255,205,90,0) 70%), radial-gradient(40% 70% at 66% 0%,rgba(255,150,200,.16) 0%,rgba(255,150,200,0) 70%), linear-gradient(180deg,#fff7fb 0%,#fff 100%); } /* Pink halftone dots, dense in the top-left and right areas (reference), fading out towards the centre. */ .shahaz-home-header__stage::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(circle,rgba(236,40,130,.42) 0 1.3px,transparent 1.8px) 0 0/9px 9px; -webkit-mask-image:radial-gradient(48% 75% at 6% 18%,#000 0%,transparent 72%),radial-gradient(34% 70% at 92% 58%,#000 0%,transparent 72%); mask-image:radial-gradient(48% 75% at 6% 18%,#000 0%,transparent 72%),radial-gradient(34% 70% at 92% 58%,#000 0%,transparent 72%); } /* Become a Seller — tablet / desktop only (top-right). */ .shahaz-home-header__seller{grid-area:seller;display:none;align-items:center;gap:8px;color:var(--hh-magenta)!important;font-size:16px;font-weight:700;line-height:1;text-decoration:none!important;white-space:nowrap;background:none!important} .shahaz-home-header__seller svg{width:26px;height:26px;flex:0 0 auto} /* Logo (bag + SHAHAZ.com), centred on mobile. */ .shahaz-home-header__brand{grid-area:brand;display:block;line-height:0;text-decoration:none;max-width:100%} .shahaz-home-header__logo{display:block;width:auto;height:var(--hh-logo-h);max-width:100%; filter:saturate(1.08)} /* Search row: capsule + heart + menu. */ .shahaz-home-header__bar{grid-area:bar;display:flex;align-items:center;gap:var(--hh-gap);width:100%;min-width:0} .shahaz-home-header__search{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;height:var(--hh-bar-h);margin:0;padding:var(--hh-field-inset); border-radius:999px;background:linear-gradient(180deg,#ea3d86 0%,var(--hh-magenta) 55%,var(--hh-magenta-deep) 100%); box-shadow:none} .shahaz-home-header__field{position:relative;flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;gap:8px;padding:0 12px 0 14px;border-radius:999px;background:#fff; box-shadow:none} .shahaz-home-header .shahaz-home-header__tool{flex:0 0 auto;display:grid;place-items:center;width:calc(var(--hh-tool) + 8px);height:calc(var(--hh-tool) + 8px);margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:none!important;box-shadow:none!important;color:var(--hh-magenta)!important;cursor:pointer} .shahaz-home-header__tool svg{width:var(--hh-tool);height:var(--hh-tool);display:block} .shahaz-home-header .shahaz-home-header__input{flex:1 1 auto;min-width:0;height:100%!important;margin:0!important;padding:0 2px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#1f1a22!important;font-family:inherit!important;font-size:var(--hh-input-font)!important;font-weight:500;caret-color:var(--hh-magenta);-webkit-appearance:none;appearance:none} .shahaz-home-header .shahaz-home-header__input::placeholder{color:#9a9098;opacity:1} .shahaz-home-header .shahaz-home-header__input::-webkit-search-cancel-button{-webkit-appearance:none} .shahaz-home-header .shahaz-home-header__submit{flex:0 0 var(--hh-submit-w);width:var(--hh-submit-w);height:100%;display:grid;place-items:center;margin:0!important;padding:0!important;border:0!important;border-radius:0 999px 999px 0!important;background:none!important;box-shadow:none!important;color:#fff!important;cursor:pointer} .shahaz-home-header__submit svg{width:var(--hh-submit-icon);height:var(--hh-submit-icon);display:block;filter:none} .shahaz-home-header .shahaz-home-header__submit:disabled{opacity:1!important;cursor:default} .shahaz-home-header .shahaz-home-header__submit:active,.shahaz-home-header .shahaz-home-header__tool:active{transform:scale(.92)} /* Heart + menu: bold magenta icons, no tiles. */ .shahaz-home-header .shahaz-home-header__icon-btn{position:relative;flex:0 0 auto;display:grid;place-items:center;width:var(--hh-icon);height:var(--hh-icon);margin:0!important;padding:0!important;border:0!important;border-radius:8px!important;background:none!important;box-shadow:none!important;color:var(--hh-magenta)!important;text-decoration:none!important;cursor:pointer} .shahaz-home-header__icon-btn .shahaz-icon-bubble{position:relative;display:grid;place-items:center;width:100%;height:100%;background:none!important;box-shadow:none!important;border:0!important} .shahaz-home-header__icon-btn svg{width:100%;height:100%;display:block} /* ZIP 649: the heart is the For You card heart — same icon, same #f00083, same 2px line, * same size relation (29px icon in a 40px target). */ .shahaz-home-header .shahaz-home-header__icon-btn--wishlist{width:40px;height:40px;color:#f00083!important} .shahaz-home-header__icon-btn--wishlist .shahaz-icon-bubble{width:29px;height:29px} .shahaz-home-header__icon-btn--wishlist:hover{transform:translateY(-1px) scale(1.07)} .shahaz-home-header__icon-btn:active{transform:scale(.9)} .shahaz-home-header .shahaz-wishlist-count{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:var(--hh-magenta);color:#fff;font-size:10.5px;font-weight:800;line-height:1;box-shadow:0 0 0 2px #fff} .shahaz-home-header__suggestions{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1600;max-height:60vh;overflow:auto;background:#fff;border:1px solid #e7c95c;border-radius:12px;box-shadow:none;color:#24242a;text-align:left} .shahaz-home-header__suggestions[hidden]{display:none!important} /* ZIP-27 — Mobile only (≤767px): SHAHAZ.com centred on the SEARCH BAR's own horizontal centre (not the full row), plus the AI Engine (robot inside a clear glass globe) in the upper-right; tapping it opens the SHAHAZ AI assistant (inc/shahaz-ai-engine.php). The Search → Heart → Menu row keeps its size, order and position. Brand offset = the heart (40px) + menu (--hh-icon) + both row gaps; a centred grid item with this right margin sits exactly over the search capsule. */ .shahaz-home-header__ai-engine{display:none} /* ZIP-414/415 (owner): on EVERY screen (phone, tablet, desktop) the bag sits in a round white badge with a hot-magenta ring, like a profile picture; the wordmark follows it at the same height as before. The combined logo image is shown from the wordmark on (its bag part, the first 18.4%, is hidden). ZIP-415: the bag is pinned by its measured box inside shahaz-logo-bag.svg (content x 17.6–82.1%, y 17.9–92.2%, i.e. it sits 5% low in its canvas) — absolutely placed, so every browser (incl. in-app WebViews that align an oversized grid item to the start) shows it centred, whole, and filling the ring (bag height = 80% of the ring). */ .shahaz-home-header .shahaz-home-header__brand{--hh-badge:calc(var(--hh-logo-h) * 1.15);display:flex;align-items:center;gap:calc(var(--hh-logo-h) * .115)} .shahaz-home-header__badge{position:relative;flex:0 0 auto;display:block;width:var(--hh-badge);height:var(--hh-badge);margin:calc((var(--hh-logo-h) - var(--hh-badge)) / 2) 0; box-sizing:border-box;border:2.5px solid #ec0f80;border-radius:50%;background:#fff;overflow:hidden} .shahaz-home-header__badge img{position:absolute;left:-3.85%;top:-12.3%;width:107.7%;height:107.7%;max-width:none;object-fit:contain;display:block} .shahaz-home-header__wm{display:block;line-height:0;flex:0 1 auto;min-width:0;overflow:hidden;width:calc(var(--hh-logo-h) * 4.4917 * .816)} .shahaz-home-header__wm .shahaz-home-header__logo{max-width:none;margin-left:calc(var(--hh-logo-h) * 4.4917 * -.184)} @media (max-width:767px){ .shahaz-home-header__brand{margin-right:calc(40px + var(--hh-icon) + var(--hh-gap) * 2)} .shahaz-home-header .shahaz-home-header__brand{justify-self:start;margin-left:calc(10px - var(--hh-pad))} .shahaz-home-header__ai-engine{ display:block;position:absolute;top:0;right:0;z-index:1; /* stage top padding + logo + (row gap − 2px): never reaches the search row */ height:calc(10px + var(--hh-logo-h) + 8px);width:calc((10px + var(--hh-logo-h) + 8px) * 1.5); margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-height:0!important; cursor:pointer;line-height:0; filter:none; animation:shz-ai-engine-glow 3.2s ease-in-out infinite; } /* ZIP-448/449: the owner's robot (WebP, preloaded) inside one crisp SVG: a glowing ring it rises out of, light running round the ring, an orbiting ball, twinkling stars, the face drawn in code; "Ask AI" bubble beside it */ .shahaz-home-header__ai-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none} .shzH-eyes,.shzH-star{transform-box:fill-box;transform-origin:center} /* only these: the others use SVG transforms */ .shzH-comet{stroke-dasharray:22 300;animation:shzH-run 2.6s linear infinite} .shzH-comet--b{stroke-dasharray:12 310;animation-duration:3.4s;animation-direction:reverse} .shzH-orun{stroke-dasharray:18 340;animation:shzH-orun 4.8s linear infinite} .shzH-portal{animation:shzH-glow 2.4s ease-in-out infinite} .shzH-eyes{animation:shz-ai-bot-blink 4.6s infinite} .shzH-star{animation:shzH-star 2.2s ease-in-out infinite} .shzH-star--b{animation-delay:1.1s} @keyframes shzH-run{to{stroke-dashoffset:-322}} @keyframes shzH-orun{to{stroke-dashoffset:-358}} @keyframes shzH-glow{0%,100%{opacity:.85}50%{opacity:1}} @keyframes shzH-star{0%,100%{opacity:.35;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}} .shahaz-home-header__ai-ask{position:absolute;right:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center; min-width:30px;padding:3px 6px;border:1px solid #ff8fcb;border-radius:10px 10px 10px 3px;background:#fff;color:#e0157a; font:900 9px/1.05 "Arial Black","Segoe UI",Arial,sans-serif;letter-spacing:0;transform-origin:0 100%;animation:shz-ai-ask 3.4s ease-in-out .4s infinite} .shahaz-home-header__ai-ask b{font-size:10.5px;font-weight:900} @keyframes shz-ai-bot-blink{0%,44%,50%,100%{transform:scaleY(1)}47%{transform:scaleY(.1)}} @keyframes shz-ai-ask{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @media (prefers-reduced-motion:reduce){.shahaz-home-header__ai-svg *,.shahaz-home-header__ai-ask{animation:none}} .shahaz-home-header .shahaz-home-header__ai-engine:active{transform:scale(.96)} @keyframes shz-ai-engine-glow{ 0%,100%{filter:none} 50%{filter:none} } } @media (max-width:374px){ .shahaz-home-header{--hh-pad:8px;--hh-logo-h:46px;--hh-bar-h:44px;--hh-tool:22px;--hh-submit-w:50px;--hh-submit-icon:23px;--hh-icon:30px;--hh-gap:8px;--hh-input-font:13px} } /* Tablet + desktop: ONE row — logo · capsule · heart · menu; Become a Seller top-right. */ @media (min-width:768px){ .shahaz-home-header{--hh-pad:20px;--hh-logo-h:60px;--hh-bar-h:54px;--hh-tool:26px;--hh-submit-w:66px;--hh-submit-icon:28px;--hh-icon:38px;--hh-gap:16px;--hh-input-font:15px} .shahaz-home-header__stage{grid-template-columns:auto minmax(0,1fr);grid-template-areas:". seller" "brand bar";justify-items:stretch;align-items:center;column-gap:22px;row-gap:4px;padding-top:8px;padding-bottom:14px} .shahaz-home-header__seller{display:inline-flex;justify-self:end} .shahaz-home-header__brand{justify-self:start} } @media (min-width:1100px){ .shahaz-home-header{--hh-logo-h:68px;--hh-bar-h:58px;--hh-icon:42px;--hh-gap:20px} .shahaz-home-header .shahaz-home-header__icon-btn--wishlist{width:44px;height:44px} .shahaz-home-header__icon-btn--wishlist .shahaz-icon-bubble{width:32px;height:32px} .shahaz-home-header__seller{font-size:17px} } @media (prefers-reduced-motion:reduce){ .shahaz-home-header,.shahaz-home-header *{animation:none!important;transition:none!important} } /* ========================================================================== HOMEPAGE DRAWER (header-custom.php #shahaz-drawer-panel) — ZIP 636 Opens from the RIGHT over everything, from the very top of the screen to the very bottom (ZIP-458, owner) — header, banner and the mobile navigation bar stay underneath, the same in every header state. Only the menu list scrolls; the drawer header stays fixed. ZIP 639: every drawer rule is ID-scoped and !important so no leftover drawer CSS from outside this theme (Customizer Additional CSS, WPCode snippets, cached optimised CSS) can pull the old left drawer back. ========================================================================== */ /* While the drawer is open the announcement ticker is hidden, so the drawer * starts immediately below the header's main rows. */ /* ZIP-419: owner rule — popups and drawers dim the page black 48 %, never blur */ html body #shahaz-drawer-overlay.shahaz-drawer-overlay{position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:0!important;z-index:2147483600!important;background:rgba(0,0,0,.48)!important;opacity:0!important;visibility:hidden!important;transition:opacity .28s ease,visibility .28s!important} html body #shahaz-drawer-overlay.shahaz-drawer-overlay.shahaz-drawer-open{opacity:1!important;visibility:visible!important} html body #shahaz-drawer-panel.shahaz-drawer-panel{font-family:"Hind Siliguri","Segoe UI",Roboto,Arial,sans-serif!important;position:fixed!important;left:auto!important;right:0!important;top:0!important;bottom:0!important;z-index:2147483601!important;width:clamp(214px,52vw,380px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;box-sizing:border-box!important;border:1.5px solid #f36aa8!important;border-radius:30px 0 0 30px!important;background:#fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.6) inset!important;visibility:hidden!important;pointer-events:none!important;transform:translateX(106%)!important;transition:transform .34s cubic-bezier(.2,.8,.2,1),visibility .34s!important} html body #shahaz-drawer-panel.shahaz-drawer-panel.shahaz-drawer-open{visibility:visible!important;pointer-events:auto!important;transform:translateX(0)!important} html body #shahaz-drawer-panel.shahaz-drawer-panel *, html body #shahaz-drawer-panel.shahaz-drawer-panel *::before, html body #shahaz-drawer-panel.shahaz-drawer-panel *::after{box-sizing:border-box!important} /* No blue anywhere inside the drawer. */ html body #shahaz-drawer-panel.shahaz-drawer-panel a, html body #shahaz-drawer-panel.shahaz-drawer-panel button{-webkit-tap-highlight-color:transparent!important;outline:none!important} html body #shahaz-drawer-panel.shahaz-drawer-panel a:focus, html body #shahaz-drawer-panel.shahaz-drawer-panel button:focus, html body #shahaz-drawer-panel.shahaz-drawer-panel a:active, html body #shahaz-drawer-panel.shahaz-drawer-panel button:active{outline:none!important} html body #shahaz-drawer-panel.shahaz-drawer-panel a:focus-visible, html body #shahaz-drawer-panel.shahaz-drawer-panel button:focus-visible{outline:2px solid rgba(240,6,126,.55)!important;outline-offset:-2px!important} /* ---------- Drawer header: glossy magenta with gold light ---------- */ /* ZIP-311/312 (owner): ~30% slimmer head — one row: profile picture (same size) left · account pill centre (wraps to two short lines when narrow) · Back right; nothing overlaps. The gold light runs higher, and the global header's gold/black/cream dots are added. */ html body #shahaz-drawer-panel .shahaz-drawer-welcome{position:relative!important;z-index:1!important;flex:0 0 auto!important;margin:0!important;padding:6px 8px 28px 10px!important;color:#fff!important;isolation:isolate!important;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ffe7a3' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23fff3c8'/%3E%3Cstop offset='.6' stop-color='%23f2b94a'/%3E%3Cstop offset='1' stop-color='%23ffe7a3' stop-opacity='.2'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-10 62C90 50 190 60 300 38S390 18 410 14' stroke='url(%23g)' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-10 72C100 61 200 70 310 49S395 30 410 27' stroke='url(%23w)' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M180 -5C230 14 300 22 410 14' stroke='url(%23w)' stroke-width='1.2' opacity='.5' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat, radial-gradient(60% 70% at 85% 10%,rgba(255,160,210,.55) 0%,rgba(255,160,210,0) 70%), radial-gradient(50% 60% at 10% 100%,rgba(110,0,70,.45) 0%,rgba(110,0,70,0) 70%), linear-gradient(165deg,#ff4a9f 0%,#ea1276 32%,#c6005f 62%,#9a0a58 100%)!important;box-shadow:none!important} html body #shahaz-drawer-panel .shahaz-drawer-welcome::before,html body #shahaz-drawer-panel .shahaz-drawer-welcome::after{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important} html body #shahaz-drawer-panel .shahaz-drawer-welcome::before{background:radial-gradient(circle,rgba(255,214,120,.55) 0 1.2px,transparent 1.7px) 0 0/9px 9px,radial-gradient(circle,rgba(20,8,14,.22) 0 1px,transparent 1.5px) 4.5px 4.5px/9px 9px!important;-webkit-mask-image:radial-gradient(55% 80% at 6% 12%,#000 0%,transparent 72%)!important;mask-image:radial-gradient(55% 80% at 6% 12%,#000 0%,transparent 72%)!important} html body #shahaz-drawer-panel .shahaz-drawer-welcome::after{background:radial-gradient(circle,rgba(255,246,223,.55) 0 1.2px,transparent 1.7px) 0 0/9px 9px,radial-gradient(circle,rgba(255,214,120,.45) 0 1px,transparent 1.5px) 4.5px 4.5px/9px 9px!important;-webkit-mask-image:radial-gradient(50% 80% at 96% 70%,#000 0%,transparent 72%)!important;mask-image:radial-gradient(50% 80% at 96% 70%,#000 0%,transparent 72%)!important} html body #shahaz-drawer-panel .shahaz-drawer-profile-area{position:relative!important;z-index:2!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important;padding:0!important;text-align:center!important} html body #shahaz-drawer-panel .shahaz-drawer-avatar{flex:0 0 auto!important;width:64px!important;height:64px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border:3px solid transparent!important;border-radius:50%!important;background:radial-gradient(circle at 50% 38%,#fff 0%,#ffeaf4 62%,#ffd3e7 100%) padding-box,linear-gradient(135deg,#fff3c4,#e3b453 35%,#a8762a 60%,#f6d98b) border-box!important;box-shadow:0 0 0 2px rgba(255,255,255,.25)!important} html body #shahaz-drawer-panel .shahaz-drawer-avatar img, html body #shahaz-drawer-panel .shahaz-drawer-avatar .shahaz-global-profile-avatar{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;margin:0!important} /* No photo yet: the whole SHAHAZ bag, large, never cut at the top or bottom. */ html body #shahaz-drawer-panel .shahaz-drawer-avatar.is-logo img{object-fit:contain!important;padding:6px 6px 7px!important;border-radius:0!important;box-sizing:border-box!important;filter:none!important} html body #shahaz-drawer-panel .shahaz-drawer-welcome-title, html body #shahaz-drawer-panel .shahaz-drawer-welcome-white, html body #shahaz-drawer-panel .shahaz-drawer-brand-logo{display:none!important} html body #shahaz-drawer-panel .shahaz-drawer-profile-area, html body #shahaz-drawer-panel .shahaz-drawer-item-label, html body #shahaz-drawer-panel .shahaz-drawer-login-btn, html body #shahaz-drawer-panel .shahaz-drawer-logout{font-family:inherit!important} html body #shahaz-drawer-panel .shahaz-drawer-login-btn{flex:1 1 auto!important;min-width:0!important;max-width:100%!important;white-space:normal!important;text-align:center!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:30px!important;margin:0!important;padding:4px 7px!important;border:1px solid #f3cf7a!important;border-radius:999px!important;background:rgba(255,255,255,.14)!important;color:#fff!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.1!important;text-decoration:none!important;text-shadow:none!important} html body #shahaz-drawer-panel .shahaz-drawer-back{flex:0 0 32px!important;position:relative!important;width:32px!important;height:32px!important;display:grid!important;place-items:center!important;padding:0!important;margin:0!important;border:1.5px solid #ffd978!important;border-radius:12px!important;background:linear-gradient(160deg,#ff5db2 0%,#f0067e 50%,#b80058 100%)!important;color:#fff!important;cursor:pointer!important;box-shadow:none!important;transition:transform .15s ease!important} html body #shahaz-drawer-panel .shahaz-drawer-back span, html body #shahaz-drawer-panel .shahaz-drawer-back svg{display:grid!important;place-items:center!important;width:19px!important;height:19px!important} html body #shahaz-drawer-panel .shahaz-drawer-back:active{transform:scale(.94)!important} /* ---------- Menu area: the only scrolling part ---------- */ html body #shahaz-drawer-panel .shahaz-drawer-menu-list-wrap{position:relative!important;z-index:3!important;flex:1 1 auto!important;min-height:0!important;margin-top:-22px!important;padding:12px 9px 6px!important;border-radius:26px 26px 0 0!important;background:linear-gradient(180deg,#fff 0%,#fffafc 100%)!important;box-shadow:none!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;scroll-behavior:smooth!important;scrollbar-width:thin!important;scrollbar-color:#f3b2cf transparent!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list-wrap::-webkit-scrollbar{width:4px!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list-wrap::-webkit-scrollbar-thumb{background:#f3b2cf!important;border-radius:99px!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list{list-style:none!important;margin:0!important;padding:0 0 4px!important;display:grid!important;gap:6px!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list li{position:relative!important;margin:0!important;padding:0 0 5px!important} /* Thin light-glass green bar under each menu item. */ html body #shahaz-drawer-panel .shahaz-drawer-menu-list li::after{content:""!important;position:absolute!important;left:44px!important;right:6px!important;bottom:0!important;height:2px!important;border-radius:2px!important;background:linear-gradient(90deg,rgba(134,224,150,0) 0%,rgba(134,224,150,.55) 18%,rgba(196,248,204,.9) 50%,rgba(134,224,150,.55) 82%,rgba(134,224,150,0) 100%)!important;box-shadow:none!important;pointer-events:none!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list li a{width:100%!important;display:flex!important;align-items:center!important;gap:9px!important;min-height:40px!important;margin:0!important;padding:3px 8px 3px 3px!important;border:0!important;border-radius:24px!important;background:linear-gradient(180deg,#fff 0%,#faf6f8 100%)!important;box-shadow:none!important;color:#1a0a12!important;font:inherit!important;text-align:left!important;text-decoration:none!important;cursor:pointer!important;-webkit-appearance:none!important;appearance:none!important;transition:background .2s ease!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list li a:hover, html body #shahaz-drawer-panel .shahaz-drawer-menu-list li a:active{background:#fff4f9!important} /* Menu icons — unchanged small magenta/gold buttons. */ html body #shahaz-drawer-panel .shahaz-drawer-menu-list .shahaz-drawer-item-icon{flex:0 0 34px!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;padding:0!important;border:1.5px solid #d9ad3b!important;border-radius:50%!important;background:linear-gradient(145deg,#ff36a5 0%,#e1007e 58%,#bc0068 100%)!important;color:#fff!important;box-shadow:none!important;transition:transform .12s ease,box-shadow .12s ease,filter .16s ease!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list .shahaz-drawer-item-icon svg{width:17px!important;height:17px!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list li a:hover .shahaz-drawer-item-icon{filter:brightness(1.08)!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list li a:active .shahaz-drawer-item-icon{transform:translateY(3px) scale(.94)!important;box-shadow:none!important} html body #shahaz-drawer-panel .shahaz-drawer-item-label{flex:1 1 auto!important;min-width:0!important;font-size:12.5px!important;font-weight:600!important;line-height:1.2!important;color:#1a0a12!important} html body #shahaz-drawer-panel .shahaz-drawer-item-arrow{flex:0 0 auto!important;color:#8b7f86!important;font-size:18px!important;line-height:1!important} html body #shahaz-drawer-panel .shahaz-drawer-wishlist-count{flex:0 0 auto!important;min-width:18px!important;height:18px!important;padding:0 5px!important;display:grid!important;place-items:center!important;border-radius:999px!important;background:#e8144f!important;color:#fff!important;font-size:10px!important;font-weight:800!important;box-shadow:none!important} html body #shahaz-drawer-panel .shahaz-drawer-logout{display:flex!important;align-items:center!important;gap:9px!important;min-height:40px!important;margin:6px 0 0!important;padding:3px 8px 3px 3px!important;border-radius:24px!important;color:#d90429!important;font-size:13px!important;font-weight:700!important;text-decoration:none!important} html body #shahaz-drawer-panel .shahaz-drawer-logout .shahaz-drawer-item-icon{flex:0 0 34px!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:rgba(217,4,41,.1)!important;color:#d90429!important} html body #shahaz-drawer-panel .shahaz-drawer-credit{margin:8px 0 4px!important;text-align:center!important;font-size:8.5px!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#8a7078!important} html body #shahaz-drawer-panel .shahaz-drawer-heart{color:#d90429!important} @media (max-width:374px){ html body #shahaz-drawer-panel .shahaz-drawer-avatar{width:58px!important;height:58px!important} html body #shahaz-drawer-panel .shahaz-drawer-item-label{font-size:12px!important} } @media (min-width:768px){ html body #shahaz-drawer-panel .shahaz-drawer-welcome{padding:10px 14px 30px 16px!important} html body #shahaz-drawer-panel .shahaz-drawer-avatar{width:76px!important;height:76px!important} html body #shahaz-drawer-panel .shahaz-drawer-item-label{font-size:14px!important} html body #shahaz-drawer-panel .shahaz-drawer-menu-list li a{min-height:48px!important} } @media (prefers-reduced-motion:reduce){ html body #shahaz-drawer-panel.shahaz-drawer-panel, html body #shahaz-drawer-overlay.shahaz-drawer-overlay, html body #shahaz-drawer-panel .shahaz-drawer-menu-list-wrap{transition:none!important;scroll-behavior:auto!important} } /* ========================================================================== COMPONENT 7: Responsive Fine-tuning (খুব ছোট স্ক্রিন) ========================================================================== */ @media (max-width: 340px) { .shahaz-icon-btn { width: 30px; height: 36px; border-radius: 8px; } .shahaz-icon-label { font-size: 6px; } } /* ========================================================================== SHAHAZ.com — PHASE 151 MOBILE HEADER + ANNOUNCEMENT FINAL FIX Purpose: 1) Keep the complete SHAHAZ.com wordmark visible on phones. 2) Prevent the final "m" of .com from being clipped. 3) Preserve the desktop header exactly as-is. 4) Keep the homepage announcement bar in normal document flow so it cannot sit on top of the hero/banner/ad content. ========================================================================== */ @media (max-width: 767px){ /* The visible ticker must remain part of the header's document flow. */ #shahaz-header{ position:relative!important; overflow:visible!important; z-index:1200!important; } /* Mobile ticker: ONLY the viewport clips the moving content. * The track and every item must remain full-width so Bengali/English * announcement text is never squeezed or cut mid-word. */ /* Keep the live bar compact on narrow phones. */ } /* Desktop is intentionally untouched by the mobile fix. */ @media (min-width:768px){ #shahaz-header{ overflow:visible!important; } } /* ========================================================================== SHAHAZ.com — MOBILE ANNOUNCEMENT BAR POSITION / FLOW FINAL PATCH The announcement must be physically BELOW the homepage header row and ABOVE the first homepage banner/hero. It must never be pulled into the banner by sticky/fixed/transform positioning. ========================================================================== */ @media (max-width:767px){ /* The homepage header owns both rows: brand/search row + announcement row. */ body.home #shahaz-header, body.front-page #shahaz-header, #shahaz-header{ display:block!important; position:relative!important; top:auto!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; transform:none!important; float:none!important; clear:both!important; overflow:visible!important; } /* Force the first homepage content to start AFTER the ticker. */ #shahaz-header + *, #shahaz-header ~ main:first-of-type{ position:relative; } /* Do not let the fixed scroll-header reserve or visually steal space while it is hidden. */ .shahaz-global-market-header--home-scroll{ z-index:1200!important; } } /* On desktop keep existing geometry untouched. */ /* Wishlist count: small badge with a hairline white border */ .shahaz-home-header .shahaz-wishlist-count{top:-3px !important;right:-4px !important;min-width:15px !important;height:15px !important;padding:0 3px !important;font-size:9px !important;box-shadow:0 0 0 .8px #fff !important;} /* Search hints (assets/js/shahaz-header.js): clear black text, one word at * a time with a soft fade every 2 seconds. */ .shahaz-home-header__ph3d{ position:absolute;top:0;bottom:0;z-index:2; left:calc(14px + var(--hh-tool,24px) + 8px); right:calc(12px + var(--hh-tool,24px) + 8px); display:flex;align-items:center; overflow:hidden;pointer-events:none; opacity:0;visibility:hidden; color:#111111;font-size:var(--hh-input-font,14px);font-weight:600;letter-spacing:.2px;white-space:nowrap; } .shahaz-home-header__field.has-ph3d .shahaz-home-header__ph3d{opacity:1;visibility:visible;} .shahaz-home-header__ph3d.is-pop{animation:shzPhFade 2s ease both;} @keyframes shzPhFade{0%{opacity:0;}18%{opacity:1;}82%{opacity:1;}100%{opacity:0;}} /* ZIP-324: desktop cart + live count beside the heart (template-parts/site/shahaz-header-cart.php). Only ≥1024px, * where the capsule bottom nav is hidden; same size and #f00083 2px line as the heart; hot-magenta pill, white number. * No fill, ring, outline or tap flash in any state. */ .shahaz-home-header__cart{display:none} @media (min-width:1024px){ .shahaz-home-header .shahaz-home-header__cart{ position:relative;flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:0; color:#f00083!important;text-decoration:none!important;cursor:pointer;transition:transform .12s ease; } .shahaz-home-header .shahaz-home-header__cart, .shahaz-home-header .shahaz-home-header__cart:hover, .shahaz-home-header .shahaz-home-header__cart:focus, .shahaz-home-header .shahaz-home-header__cart:focus-visible, .shahaz-home-header .shahaz-home-header__cart:active{ background:none!important;box-shadow:none!important;outline:none!important;-webkit-tap-highlight-color:transparent!important; } .shahaz-home-header__cart svg{width:29px;height:29px;display:block;stroke-width:2} .shahaz-home-header .shahaz-home-header__cart:hover{transform:translateY(-1px) scale(1.07)} .shahaz-home-header .shahaz-home-header__cart:active{transform:scale(.9)} .shahaz-home-header__cart-badge{ position:absolute;top:1px;right:-3px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center; border-radius:999px;background:#e0157a;color:#fff;font-size:9.5px;font-weight:800;line-height:1; font-variant-numeric:tabular-nums;box-shadow:0 0 0 1.5px #fff;pointer-events:none; } .shahaz-home-header__cart-badge[hidden]{display:none} } @media (min-width:1100px){ .shahaz-home-header .shahaz-home-header__cart{width:44px;height:44px} .shahaz-home-header__cart svg{width:32px;height:32px} } @media (prefers-reduced-motion:reduce){ .shahaz-home-header .shahaz-home-header__cart{transition:none} } /* ZIP-389/390 (owner): when the owner picks MAROON (Admin → Homepage → Header colour; body.shz-hh-maroon), on the phone the unscrolled home header sits on the Live Chat header's maroon → hot-magenta * gradient (same layers as .shz-lc-hero) instead of white; every ribbon, wash and dot of the design stays on top. */ @media (max-width:767px){ body.shz-hh-maroon .shahaz-header.shahaz-home-header{background:#24121f!important} body.shz-hh-maroon .shahaz-home-header__stage{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ff4fa3' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23ff5aa8'/%3E%3Cstop offset='.6' stop-color='%23f6b94a'/%3E%3Cstop offset='1' stop-color='%23f3c04f' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f0c455' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23f6cf6a'/%3E%3Cstop offset='.65' stop-color='%23d49a2a'/%3E%3Cstop offset='1' stop-color='%23f0c455' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 74C110 24 250 2 430-10' stroke='url(%23p)' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-20 92C120 40 260 16 450-4' stroke='url(%23g)' stroke-width='1.4' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-20 188C60 168 150 176 290 212' stroke='url(%23g)' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M680-8C800 30 920 58 1020 44' stroke='url(%23g)' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M740 212C850 160 940 146 1020 152' stroke='url(%23p)' stroke-width='4.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M780 212C880 176 950 166 1020 170' stroke='url(%23g)' stroke-width='1.2' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat, radial-gradient(55% 95% at 0% 0%,rgba(255,92,170,.30) 0%,rgba(255,92,170,0) 70%), radial-gradient(42% 90% at 100% 18%,rgba(255,205,90,.30) 0%,rgba(255,205,90,0) 70%), radial-gradient(40% 70% at 66% 0%,rgba(255,150,200,.16) 0%,rgba(255,150,200,0) 70%), radial-gradient(circle at 94% -12%,rgba(255,49,158,.34),transparent 37%),radial-gradient(circle at 72% 115%,rgba(198,163,106,.1),transparent 28%),linear-gradient(145deg,#24121f,#160d14 78%)} } /* ZIP-452 (owner): GLOSSY PINK (Admin / Staff Studio → Header colour = pink; body.shz-hh-pink) — the AI popup's own glossy * pink, colour only: no ribbons, washes, dots or gold lines. White and maroon are unchanged. Wordmark, heart and menu * turn white so they read on the pink; ".com" stays gold; the search bar stays white. Phone only, like maroon. */ @media (max-width:767px){ body.shz-hh-pink .shahaz-header.shahaz-home-header{background:#ff3fc4!important} body.shz-hh-pink .shahaz-home-header__stage{background: linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 46%), linear-gradient(180deg,#ff3fc4 0%,#ff6fd6 40%,#ff9fe3 100%)} body.shz-hh-pink .shahaz-home-header__stage::before,body.shz-hh-pink .shahaz-home-header__stage::after{display:none!important} body.shz-hh-pink .shahaz-home-header .shahaz-home-header__icon-btn, body.shz-hh-pink .shahaz-home-header .shahaz-home-header__icon-btn--wishlist{color:#fff!important} } /* ZIP-454 (owner) — BANNER HEADER on the phone (body.shz-hh-banner, Admin / Staff Studio): * only the search bar and the menu on top; pictures / videos fill the header behind them (1080×600). The search form, * voice, camera and suggestions are the very same elements as always — only restyled here. Logo, wordmark, robot and * heart are not shown in this mode. Tablet / desktop: unchanged. */ .shahaz-home-header__submit-text{display:none} .shahaz-home-header__media{display:none} @media (max-width:767px){ body.shz-hh-banner .shahaz-header.shahaz-home-header{background:#7a0b48!important} body.shz-hh-banner .shahaz-home-header__stage{display:block;aspect-ratio:1080/600;padding:10px 10px 0;background:#7a0b48!important} body.shz-hh-banner .shahaz-home-header__stage::before,body.shz-hh-banner .shahaz-home-header__stage::after{display:none!important} body.shz-hh-banner .shahaz-home-header__brand,body.shz-hh-banner .shahaz-home-header__ai-engine, body.shz-hh-banner .shahaz-home-header__icon-btn--wishlist,body.shz-hh-banner .shahaz-home-header__cart,body.shz-hh-banner .shahaz-home-header__seller{display:none!important} /* the slides */ body.shz-hh-banner .shahaz-home-header__media{display:block;position:absolute;inset:0;z-index:0;overflow:hidden} .shz-hhb-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;-webkit-tap-highlight-color:transparent} .shz-hhb-slide.is-on{opacity:1;z-index:1} .shz-hhb-slide img,.shz-hhb-slide video{display:block;width:100%;height:100%;max-width:none;object-fit:cover;background:#7a0b48} /* a soft dark band at the very top keeps the white menu icon readable on bright banners */ body.shz-hh-banner .shahaz-home-header__media::after{content:"";position:absolute;left:0;right:0;top:0;height:42%;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(40,0,22,.38) 0%,rgba(40,0,22,0) 100%)} .shz-hhb-dots{position:absolute;left:0;right:0;bottom:8px;z-index:3;display:flex;justify-content:center;gap:5px;pointer-events:none} .shz-hhb-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55);transition:width .3s ease,background .3s ease} .shz-hhb-dots i.is-on{width:16px;background:#fff} /* the search bar — reference: white bar, hot-pink border, gently rounded (not a pill) */ body.shz-hh-banner .shahaz-home-header__bar{position:relative;z-index:4;gap:12px} body.shz-hh-banner .shahaz-home-header__search{height:38px;padding:0;background:#fff;border:2px solid #ef1a7d;border-radius:6px} /* ZIP-607 (owner): the slim box search bar of the top gate on every banner design */ body.shz-hh-banner .shahaz-home-header__field{padding:0 4px 0 6px;border-radius:4px;background:transparent;gap:6px} body.shz-hh-banner .shahaz-home-header__tool--voice{position:relative;margin-right:6px!important} body.shz-hh-banner .shahaz-home-header__tool--voice::after{content:"";position:absolute;right:-6px;top:50%;width:1.5px;height:22px;margin-top:-11px;background:#ef1a7d;border-radius:2px} body.shz-hh-banner .shahaz-home-header .shahaz-home-header__tool--voice{color:#ef1a7d!important} body.shz-hh-banner .shahaz-home-header .shahaz-home-header__tool--camera{color:#8b9099!important} body.shz-hh-banner .shahaz-home-header .shahaz-home-header__submit{flex:0 0 auto;width:auto;height:calc(100% - 6px);margin:0 3px 0 2px!important;padding:0 12px!important; border-radius:4px!important;background:#ef1a7d!important;outline:1.5px solid rgba(255,255,255,.9);outline-offset:-3.5px} body.shz-hh-banner .shahaz-home-header__submit svg{display:none} body.shz-hh-banner .shahaz-home-header__submit-text{display:block;font-size:14px;font-weight:600;line-height:1;color:#fff;letter-spacing:.01em} body.shz-hh-banner .shahaz-home-header .shahaz-home-header__icon-btn--menu{color:#fff!important;width:34px;height:34px} } /* ZIP-456 (owner) — slim ribbon under the banner header; hideable (Admin / Staff Studio). ZIP-470 (owner): straight * full-width luxury-black band, light 3D top edge + gold line, and the white page below opens with rounded top * corners (gold rim) so the band shows in both screen corners. ZIP-472: deeper rounded corners, page top gently * arched so the band is slim at both sides and deeper in the middle; band pure glossy black (no whitish light). * ZIP-476: the band and the banner behind it are cut to the bow curve (mask) instead of a white sheet laid over the * page, so the zoomed entry card can rise into the white space under the curve without being cut. No shadow, no blur. */ .shz-hhr{display:none} @media (max-width:767px){ body.shz-hh-ribbon #shahaz-header.shahaz-home-header{margin-bottom:24px!important} /* ZIP-476: the entry row starts under the bow; its zoom room sits in the white space under the curve */ body.shz-hh-ribbon .shz-hhb-dots{bottom:calc(16.26vw + 12px);bottom:calc(min(16.26vw, 67px) + 12px)} /* ZIP-473: the banner runs 30px under the ribbon; ZIP-563: the raised middle tab (ZIP-560) covered the slide dots — they now sit 5px above the tab */ body.shz-hh-ribbon .shahaz-home-header__media{bottom:-30px; /* ZIP-473: the banner runs on under the ribbon, so its top corners show the banner, never the white page */ /* ZIP-476: its bottom 42px (= the ribbon's top 42px) end on the ribbon's bow curve, so under the curve the page is plain white */ -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 41px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H390V40Q390 16 366 16Q195 50 24 16Q0 16 0 40Z'/%3E%3C/svg%3E") bottom/100% 42px no-repeat; mask:linear-gradient(#000,#000) top/100% calc(100% - 41px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H390V40Q390 16 366 16Q195 50 24 16Q0 16 0 40Z'/%3E%3C/svg%3E") bottom/100% 42px no-repeat} body.shz-hh-ribbon .shz-hhr{display:block;position:absolute;left:0;right:0;bottom:-38px;height:50px;z-index:3;pointer-events:none;overflow-x:clip} /* ZIP-570 UI-02: the band's 1.5px side bleed never reaches past the screen. ZIP-459: under the search bar (z 4) and its suggestions */ /* ZIP-560 (owner): ribbon colour themes (rgba via --rb-deep-rgb, no color-mix, so older phone browsers get the colours too) — chosen in admin + Staff Studio (Homepage banners). Only the colours and the * middle tab change; the curved ends (bow mask) stay exactly as before. */ .shz-hhr{--rb-c1:#1c1c20;--rb-c2:#000;--rb-deep:#000;--rb-text:#fff;--rb-rim:#f3c14d;--rb-rim2:#f3c14d;--rb-tab-rim:#f3c14d} .shz-hhr[data-theme="neon"] {--rb-c1:#F72585;--rb-c2:#7209B7;--rb-deep:#3D0466;--rb-text:#FFFFFF;--rb-deep-rgb:61,4,102} .shz-hhr[data-theme="fire"] {--rb-c1:#F12711;--rb-c2:#F5AF19;--rb-deep:#8A1A05;--rb-text:#FFFFFF;--rb-deep-rgb:138,26,5} .shz-hhr[data-theme="lemon"] {--rb-c1:#F9F047;--rb-c2:#0FD850;--rb-deep:#06703A;--rb-text:#0B4D2A;--rb-deep-rgb:6,112,58} .shz-hhr[data-theme="royal"] {--rb-c1:#7F00FF;--rb-c2:#E100FF;--rb-deep:#3F0080;--rb-text:#FFFFFF;--rb-deep-rgb:63,0,128} .shz-hhr[data-theme="aurora"]{--rb-c1:#00DBDE;--rb-c2:#FC00FF;--rb-deep:#5A0070;--rb-text:#FFFFFF;--rb-deep-rgb:90,0,112} .shz-hhr[data-theme="lime"] {--rb-c1:#A8FF78;--rb-c2:#78FFD6;--rb-deep:#1E8F5A;--rb-text:#0B4D2A;--rb-deep-rgb:30,143,90} .shz-hhr:not([data-theme="black"]){--rb-rim:rgba(255,255,255,.9);--rb-rim2:rgba(var(--rb-deep-rgb),.5);--rb-tab-rim:rgba(255,255,255,.9)} .shz-hhr:not([data-theme="black"]) .shz-hhr__band{background:linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 7px),linear-gradient(180deg,transparent 45%,rgba(var(--rb-deep-rgb),.45) 100%),linear-gradient(90deg,var(--rb-c1),var(--rb-c2))} .shz-hhr__band{position:absolute;top:0;bottom:0;left:-1.5px;right:-1.5px;display:block;border:1.2px solid var(--rb-rim);border-bottom:0;border-radius:26px 26px 0 0; background:linear-gradient(180deg,#1c1c20 0,#0c0c0e 18%,#000 42%,#000 100%); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0H390V40Q390 16 366 16Q195 50 24 16Q0 16 0 40Z'/%3E%3C/svg%3E") 1.5px 0/calc(100% - 3px) 100% no-repeat,linear-gradient(#000,#000) 0 0/1.5px 40px no-repeat,linear-gradient(#000,#000) 100% 0/1.5px 40px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0H390V40Q390 16 366 16Q195 50 24 16Q0 16 0 40Z'/%3E%3C/svg%3E") 1.5px 0/calc(100% - 3px) 100% no-repeat,linear-gradient(#000,#000) 0 0/1.5px 40px no-repeat,linear-gradient(#000,#000) 100% 0/1.5px 40px no-repeat} /* ZIP-476: the band itself ends on the bow curve — no white sheet over the page any more. ZIP-580 (owner): the curve is laid on the page's 390 box (not the band's 393 with its 1.5px side bleed), so it meets the banner's cut exactly — no banner strip shows at the corners; the bleed strips stay. */ .shz-hhr__sheet{position:absolute;left:0;top:0;width:100%;height:100%;display:block;max-width:none;overflow:visible} /* ZIP-562 (owner): side ornaments on the ribbon's middle line (design changes with the colour) + small curved text * under the tab. Colours that always stand out: gold on black, white with a deep outline on the bright themes, * dark green with a white outline on lemon / lime. No shadow. */ .shz-hhr{--rb-orn:url(#shzRbGold) #f3c14d;--rb-orn-st:none;--rb-orn-f:#7a5410} .shz-hhr:not([data-theme="black"]){--rb-orn:#fff;--rb-orn-st:var(--rb-deep);--rb-orn-f:var(--rb-deep)} .shz-hhr[data-theme="lemon"],.shz-hhr[data-theme="lime"]{--rb-orn:#0B4D2A;--rb-orn-st:#fff;--rb-orn-f:#fff} .shz-hhr__orn{position:absolute;left:0;top:0;width:100%;height:100%;display:block;max-width:none;overflow:visible} /* ZIP-563 (owner): the real logo under the tab (bag left, 3D hot-magenta SHAHAZ, small gold .com) in the strip between * the tab and the ribbon's lower edge; no plate — on neon/fire/royal/aurora the letters are white (shahaz-logo-white.svg). * ZIP-565 (owner): centred in the real gap between the tab's lower rim (87.5% of the tab box) and the ribbon's lower edge, * as tall as the gap allows (max 19px) */ .shz-hhr__logo{--rb-gap:calc(32px - var(--rb-tab-top) - var(--rb-tab-h) * .875);--rb-logo-h:min(19px, calc(var(--rb-gap) - 2.5px));position:absolute;left:50%;top:calc(var(--rb-tab-top) + var(--rb-tab-h) * .875 + (var(--rb-gap) - var(--rb-logo-h)) / 2);height:var(--rb-logo-h);transform:translateX(-50%);display:flex;align-items:center;line-height:0} .shz-hhr__logo img{display:block;height:100%;width:auto;max-width:none} /* ZIP-579 (owner): flower branches beside the logo — sized and placed from the logo (390px phone: logo 81.6 × 15.67px, * its top 15px into the 50px ribbon; the branch box is 88 × 50 of the same scale, 2px clear of the logo). */ .shz-hhr__logo{--fl-stem:#0a4f27;--fl-l1:#1fa556;--fl-l2:#0c7a3a;--fl-l3:#065328;--fl-le:#05401e;--fl-vn:#b8f5c8;--fl-se:#0b6a33;--fl-p0:#ffd0e6;--fl-p1:#ff5aaa;--fl-p2:#e0157a;--fl-p3:#b0005a;--fl-pe:#9c0050} .shz-hhr[data-theme="black"] .shz-hhr__logo{--fl-stem:#e3b54e;--fl-l1:#5fe896;--fl-l2:#23b864;--fl-l3:#11843f;--fl-le:#0a5a2c;--fl-vn:#e4ffec;--fl-se:#23b864} .shz-hhr[data-theme="neon"] .shz-hhr__logo,.shz-hhr[data-theme="royal"] .shz-hhr__logo,.shz-hhr[data-theme="aurora"] .shz-hhr__logo{--fl-stem:#ffe08a;--fl-l1:#6ff0a2;--fl-l2:#2cc46f;--fl-l3:#138a47;--fl-le:#0a5a2c;--fl-vn:#eafff1;--fl-se:#2cc46f;--fl-p0:#ffffff;--fl-p1:#fff0f7;--fl-p2:#ffc2de;--fl-p3:#ff8cc4;--fl-pe:#c2185b} .shz-fl{position:absolute;top:-96.1%;width:107.8%;height:319.1%;display:block;max-width:none;overflow:visible;pointer-events:none} .shz-fl--l{right:102.7%} .shz-fl--r{left:102.7%;transform:scaleX(-1)} .shz-fl__st{stroke:var(--fl-stem)} .shz-fl__le{stroke:var(--fl-le)} .shz-fl__vn{stroke:var(--fl-vn)} .shz-fl__se{fill:var(--fl-se)} .shz-fl__pe{stroke:var(--fl-pe)} .shz-hhr__o{fill:var(--rb-orn);stroke:var(--rb-orn-st);stroke-width:1.2px;paint-order:stroke;stroke-linejoin:round} .shz-hhr__ol{fill:none;stroke:var(--rb-orn)} .shz-hhr__of{stroke:var(--rb-orn-f)} /* ZIP-582 (owner): two ribbon shapes, switched in Admin / Staff Studio ("ফিতার আকার"): classic (the rules above — * rounded top corners, ZIP-476 – 580) and bow (ZIP-581: top and bottom edges both bend down to the screen edges, * 11px slim there, the middle high over the zoomed entry card). Bow overrides only. */ body.shz-hh-ribbon .shz-hhr[data-shape="bow"]{bottom:-44px;height:56px} .shz-hhr[data-shape="bow"] .shz-hhr__band{border:0;border-radius:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 56' preserveAspectRatio='none'%3E%3Cpath d='M0 39.0 L3 37.5 L6 36.0 L9 34.5 L12 33.1 L15 31.7 L18 30.3 L21 29.0 L24 27.7 L27 26.5 L30 25.3 L33 24.1 L36 22.9 L39 21.8 L42 20.8 L45 19.7 L48 18.7 L51 17.7 L54 16.8 L57 15.9 L60 15.0 L63 14.1 L66 13.3 L69 12.5 L72 11.8 L75 11.0 L78 10.3 L81 9.7 L84 9.0 L87 8.4 L90 7.8 L93 7.2 L96 6.7 L99 6.2 L102 5.7 L105 5.2 L108 4.8 L111 4.4 L114 4.0 L117 3.6 L120 3.3 L123 2.9 L126 2.6 L129 2.3 L132 2.1 L135 1.8 L138 1.6 L141 1.4 L144 1.2 L147 1.0 L150 0.9 L153 0.7 L156 0.6 L159 0.5 L162 0.4 L165 0.3 L168 0.2 L171 0.2 L174 0.1 L177 0.1 L180 0.0 L183 0.0 L186 0.0 L189 0.0 L192 0.0 L195 0.0 L198 0.0 L201 0.0 L204 0.0 L207 0.0 L210 0.0 L213 0.1 L216 0.1 L219 0.2 L222 0.2 L225 0.3 L228 0.4 L231 0.5 L234 0.6 L237 0.7 L240 0.9 L243 1.0 L246 1.2 L249 1.4 L252 1.6 L255 1.8 L258 2.1 L261 2.3 L264 2.6 L267 2.9 L270 3.3 L273 3.6 L276 4.0 L279 4.4 L282 4.8 L285 5.2 L288 5.7 L291 6.2 L294 6.7 L297 7.2 L300 7.8 L303 8.4 L306 9.0 L309 9.7 L312 10.3 L315 11.0 L318 11.8 L321 12.5 L324 13.3 L327 14.1 L330 15.0 L333 15.9 L336 16.8 L339 17.7 L342 18.7 L345 19.7 L348 20.8 L351 21.8 L354 22.9 L357 24.1 L360 25.3 L363 26.5 L366 27.7 L369 29.0 L372 30.3 L375 31.7 L378 33.1 L381 34.5 L384 36.0 L387 37.5 L390 39.0 L390 50.0 L387 49.4 L384 48.8 L381 48.2 L378 47.6 L375 47.0 L372 46.5 L369 45.9 L366 45.4 L363 44.9 L360 44.4 L357 43.9 L354 43.4 L351 43.0 L348 42.5 L345 42.1 L342 41.6 L339 41.2 L336 40.8 L333 40.4 L330 40.0 L327 39.7 L324 39.3 L321 39.0 L318 38.6 L315 38.3 L312 38.0 L309 37.7 L306 37.4 L303 37.1 L300 36.8 L297 36.6 L294 36.3 L291 36.1 L288 35.9 L285 35.7 L282 35.5 L279 35.3 L276 35.1 L273 34.9 L270 34.7 L267 34.6 L264 34.4 L261 34.3 L258 34.1 L255 34.0 L252 33.9 L249 33.8 L246 33.7 L243 33.6 L240 33.5 L237 33.4 L234 33.4 L231 33.3 L228 33.2 L225 33.2 L222 33.1 L219 33.1 L216 33.1 L213 33.1 L210 33.0 L207 33.0 L204 33.0 L201 33.0 L198 33.0 L195 33.0 L192 33.0 L189 33.0 L186 33.0 L183 33.0 L180 33.0 L177 33.1 L174 33.1 L171 33.1 L168 33.1 L165 33.2 L162 33.2 L159 33.3 L156 33.4 L153 33.4 L150 33.5 L147 33.6 L144 33.7 L141 33.8 L138 33.9 L135 34.0 L132 34.1 L129 34.3 L126 34.4 L123 34.6 L120 34.7 L117 34.9 L114 35.1 L111 35.3 L108 35.5 L105 35.7 L102 35.9 L99 36.1 L96 36.3 L93 36.6 L90 36.8 L87 37.1 L84 37.4 L81 37.7 L78 38.0 L75 38.3 L72 38.6 L69 39.0 L66 39.3 L63 39.7 L60 40.0 L57 40.4 L54 40.8 L51 41.2 L48 41.6 L45 42.1 L42 42.5 L39 43.0 L36 43.4 L33 43.9 L30 44.4 L27 44.9 L24 45.4 L21 45.9 L18 46.5 L15 47.0 L12 47.6 L9 48.2 L6 48.8 L3 49.4 L0 50.0Z'/%3E%3C/svg%3E") 1.5px 0/calc(100% - 3px) 100% no-repeat,linear-gradient(#000,#000) 0 39px/1.5px 11px no-repeat,linear-gradient(#000,#000) 100% 39px/1.5px 11px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 56' preserveAspectRatio='none'%3E%3Cpath d='M0 39.0 L3 37.5 L6 36.0 L9 34.5 L12 33.1 L15 31.7 L18 30.3 L21 29.0 L24 27.7 L27 26.5 L30 25.3 L33 24.1 L36 22.9 L39 21.8 L42 20.8 L45 19.7 L48 18.7 L51 17.7 L54 16.8 L57 15.9 L60 15.0 L63 14.1 L66 13.3 L69 12.5 L72 11.8 L75 11.0 L78 10.3 L81 9.7 L84 9.0 L87 8.4 L90 7.8 L93 7.2 L96 6.7 L99 6.2 L102 5.7 L105 5.2 L108 4.8 L111 4.4 L114 4.0 L117 3.6 L120 3.3 L123 2.9 L126 2.6 L129 2.3 L132 2.1 L135 1.8 L138 1.6 L141 1.4 L144 1.2 L147 1.0 L150 0.9 L153 0.7 L156 0.6 L159 0.5 L162 0.4 L165 0.3 L168 0.2 L171 0.2 L174 0.1 L177 0.1 L180 0.0 L183 0.0 L186 0.0 L189 0.0 L192 0.0 L195 0.0 L198 0.0 L201 0.0 L204 0.0 L207 0.0 L210 0.0 L213 0.1 L216 0.1 L219 0.2 L222 0.2 L225 0.3 L228 0.4 L231 0.5 L234 0.6 L237 0.7 L240 0.9 L243 1.0 L246 1.2 L249 1.4 L252 1.6 L255 1.8 L258 2.1 L261 2.3 L264 2.6 L267 2.9 L270 3.3 L273 3.6 L276 4.0 L279 4.4 L282 4.8 L285 5.2 L288 5.7 L291 6.2 L294 6.7 L297 7.2 L300 7.8 L303 8.4 L306 9.0 L309 9.7 L312 10.3 L315 11.0 L318 11.8 L321 12.5 L324 13.3 L327 14.1 L330 15.0 L333 15.9 L336 16.8 L339 17.7 L342 18.7 L345 19.7 L348 20.8 L351 21.8 L354 22.9 L357 24.1 L360 25.3 L363 26.5 L366 27.7 L369 29.0 L372 30.3 L375 31.7 L378 33.1 L381 34.5 L384 36.0 L387 37.5 L390 39.0 L390 50.0 L387 49.4 L384 48.8 L381 48.2 L378 47.6 L375 47.0 L372 46.5 L369 45.9 L366 45.4 L363 44.9 L360 44.4 L357 43.9 L354 43.4 L351 43.0 L348 42.5 L345 42.1 L342 41.6 L339 41.2 L336 40.8 L333 40.4 L330 40.0 L327 39.7 L324 39.3 L321 39.0 L318 38.6 L315 38.3 L312 38.0 L309 37.7 L306 37.4 L303 37.1 L300 36.8 L297 36.6 L294 36.3 L291 36.1 L288 35.9 L285 35.7 L282 35.5 L279 35.3 L276 35.1 L273 34.9 L270 34.7 L267 34.6 L264 34.4 L261 34.3 L258 34.1 L255 34.0 L252 33.9 L249 33.8 L246 33.7 L243 33.6 L240 33.5 L237 33.4 L234 33.4 L231 33.3 L228 33.2 L225 33.2 L222 33.1 L219 33.1 L216 33.1 L213 33.1 L210 33.0 L207 33.0 L204 33.0 L201 33.0 L198 33.0 L195 33.0 L192 33.0 L189 33.0 L186 33.0 L183 33.0 L180 33.0 L177 33.1 L174 33.1 L171 33.1 L168 33.1 L165 33.2 L162 33.2 L159 33.3 L156 33.4 L153 33.4 L150 33.5 L147 33.6 L144 33.7 L141 33.8 L138 33.9 L135 34.0 L132 34.1 L129 34.3 L126 34.4 L123 34.6 L120 34.7 L117 34.9 L114 35.1 L111 35.3 L108 35.5 L105 35.7 L102 35.9 L99 36.1 L96 36.3 L93 36.6 L90 36.8 L87 37.1 L84 37.4 L81 37.7 L78 38.0 L75 38.3 L72 38.6 L69 39.0 L66 39.3 L63 39.7 L60 40.0 L57 40.4 L54 40.8 L51 41.2 L48 41.6 L45 42.1 L42 42.5 L39 43.0 L36 43.4 L33 43.9 L30 44.4 L27 44.9 L24 45.4 L21 45.9 L18 46.5 L15 47.0 L12 47.6 L9 48.2 L6 48.8 L3 49.4 L0 50.0Z'/%3E%3C/svg%3E") 1.5px 0/calc(100% - 3px) 100% no-repeat,linear-gradient(#000,#000) 0 39px/1.5px 11px no-repeat,linear-gradient(#000,#000) 100% 39px/1.5px 11px no-repeat} body.shz-hh-ribbon.shz-hh-bow .shahaz-home-header__media{-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 41px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H390V50.0L390 50.0 L387 49.4 L384 48.8 L381 48.2 L378 47.6 L375 47.0 L372 46.5 L369 45.9 L366 45.4 L363 44.9 L360 44.4 L357 43.9 L354 43.4 L351 43.0 L348 42.5 L345 42.1 L342 41.6 L339 41.2 L336 40.8 L333 40.4 L330 40.0 L327 39.7 L324 39.3 L321 39.0 L318 38.6 L315 38.3 L312 38.0 L309 37.7 L306 37.4 L303 37.1 L300 36.8 L297 36.6 L294 36.3 L291 36.1 L288 35.9 L285 35.7 L282 35.5 L279 35.3 L276 35.1 L273 34.9 L270 34.7 L267 34.6 L264 34.4 L261 34.3 L258 34.1 L255 34.0 L252 33.9 L249 33.8 L246 33.7 L243 33.6 L240 33.5 L237 33.4 L234 33.4 L231 33.3 L228 33.2 L225 33.2 L222 33.1 L219 33.1 L216 33.1 L213 33.1 L210 33.0 L207 33.0 L204 33.0 L201 33.0 L198 33.0 L195 33.0 L192 33.0 L189 33.0 L186 33.0 L183 33.0 L180 33.0 L177 33.1 L174 33.1 L171 33.1 L168 33.1 L165 33.2 L162 33.2 L159 33.3 L156 33.4 L153 33.4 L150 33.5 L147 33.6 L144 33.7 L141 33.8 L138 33.9 L135 34.0 L132 34.1 L129 34.3 L126 34.4 L123 34.6 L120 34.7 L117 34.9 L114 35.1 L111 35.3 L108 35.5 L105 35.7 L102 35.9 L99 36.1 L96 36.3 L93 36.6 L90 36.8 L87 37.1 L84 37.4 L81 37.7 L78 38.0 L75 38.3 L72 38.6 L69 39.0 L66 39.3 L63 39.7 L60 40.0 L57 40.4 L54 40.8 L51 41.2 L48 41.6 L45 42.1 L42 42.5 L39 43.0 L36 43.4 L33 43.9 L30 44.4 L27 44.9 L24 45.4 L21 45.9 L18 46.5 L15 47.0 L12 47.6 L9 48.2 L6 48.8 L3 49.4 L0 50.0Z'/%3E%3C/svg%3E") bottom/100% 42px no-repeat;mask:linear-gradient(#000,#000) top/100% calc(100% - 41px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H390V50.0L390 50.0 L387 49.4 L384 48.8 L381 48.2 L378 47.6 L375 47.0 L372 46.5 L369 45.9 L366 45.4 L363 44.9 L360 44.4 L357 43.9 L354 43.4 L351 43.0 L348 42.5 L345 42.1 L342 41.6 L339 41.2 L336 40.8 L333 40.4 L330 40.0 L327 39.7 L324 39.3 L321 39.0 L318 38.6 L315 38.3 L312 38.0 L309 37.7 L306 37.4 L303 37.1 L300 36.8 L297 36.6 L294 36.3 L291 36.1 L288 35.9 L285 35.7 L282 35.5 L279 35.3 L276 35.1 L273 34.9 L270 34.7 L267 34.6 L264 34.4 L261 34.3 L258 34.1 L255 34.0 L252 33.9 L249 33.8 L246 33.7 L243 33.6 L240 33.5 L237 33.4 L234 33.4 L231 33.3 L228 33.2 L225 33.2 L222 33.1 L219 33.1 L216 33.1 L213 33.1 L210 33.0 L207 33.0 L204 33.0 L201 33.0 L198 33.0 L195 33.0 L192 33.0 L189 33.0 L186 33.0 L183 33.0 L180 33.0 L177 33.1 L174 33.1 L171 33.1 L168 33.1 L165 33.2 L162 33.2 L159 33.3 L156 33.4 L153 33.4 L150 33.5 L147 33.6 L144 33.7 L141 33.8 L138 33.9 L135 34.0 L132 34.1 L129 34.3 L126 34.4 L123 34.6 L120 34.7 L117 34.9 L114 35.1 L111 35.3 L108 35.5 L105 35.7 L102 35.9 L99 36.1 L96 36.3 L93 36.6 L90 36.8 L87 37.1 L84 37.4 L81 37.7 L78 38.0 L75 38.3 L72 38.6 L69 39.0 L66 39.3 L63 39.7 L60 40.0 L57 40.4 L54 40.8 L51 41.2 L48 41.6 L45 42.1 L42 42.5 L39 43.0 L36 43.4 L33 43.9 L30 44.4 L27 44.9 L24 45.4 L21 45.9 L18 46.5 L15 47.0 L12 47.6 L9 48.2 L6 48.8 L3 49.4 L0 50.0Z'/%3E%3C/svg%3E") bottom/100% 42px no-repeat} .shz-hhr__top-rim{fill:none;stroke:var(--rb-rim);stroke-width:1.2;vector-effect:non-scaling-stroke} .shz-hhr__sheet-rim{fill:none;stroke:var(--rb-rim2);stroke-width:1.2;vector-effect:non-scaling-stroke} .shz-hhr__mark{position:absolute;left:50%;top:calc(var(--rb-tab-top) + var(--rb-tab-h) * .5 - 14px);height:28px;z-index:1;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap} .shz-hhr__mark img{width:26px;height:26px;display:block;max-width:none} .shz-hhr__wm{display:block;line-height:0;overflow:hidden;width:calc(31px * 4.4917 * .816);height:31px} .shz-hhr__wm img{display:block;height:31px;width:auto;max-width:none;margin-left:calc(31px * 4.4917 * -.184)} } /* ZIP-466 (owner) — after 3 s the logo + wordmark fade out and a glassy black display inside the ribbon scrolls the * LED announcements: from 14 % to 86 % of the width, slim at the ends and deeper in the middle like the ribbon, * slanted ends, gold rim (shahaz-home-header-banner.js switches .is-ticker). */ .shz-hhr__screen{display:none} @media (max-width:767px){ .shz-hhr__mark{transition:opacity .45s ease,transform .45s ease} .shz-hhr.is-ticker .shz-hhr__mark{opacity:0;transform:translateX(-50%) translateY(-5px)} /* ZIP-560: the middle is the raised tab (fixed 224:62 shape, never stretched); wider than the reference so the text * area is bigger; its bottom stays above the category row */ .shz-hhr{--rb-tab-w:min(66vw,272px);--rb-tab-h:calc(var(--rb-tab-w) * 42 / 224);--rb-tab-top:calc(35px - var(--rb-tab-w) * 62 / 224 * .89)} /* ZIP-561 (owner): slimmer tab — top edge where it was, bottom shorter (224:46; ZIP-564: 224:42 so the logo under it can be bigger) */ @supports not (width:min(1px,2px)){.shz-hhr{--rb-tab-w:66vw}} /* ZIP-563: old phone browsers without min() */ .shz-hhr__screen{display:block;position:absolute;left:50%;top:var(--rb-tab-top);width:var(--rb-tab-w);height:var(--rb-tab-h);transform:translateX(-50%);pointer-events:none} .shz-hhr__glass{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;overflow:visible} .shz-hhr__glass-rim{fill:none;stroke:var(--rb-tab-rim);stroke-width:1.5} /* ZIP-569 (audit RIB-01): on the bright tabs a thin layer of the theme's own deep colour lies under the moving text, * so white text reaches WCAG AA 4.5:1 everywhere on the tab (no shadow, the colours stay saturated) */ .shz-hhr__veil{opacity:0} .shz-hhr[data-theme="neon"] .shz-hhr__veil,.shz-hhr[data-theme="royal"] .shz-hhr__veil{opacity:.35} .shz-hhr[data-theme="aurora"] .shz-hhr__veil{opacity:.55} .shz-hhr[data-theme="fire"] .shz-hhr__veil{opacity:.6} .shz-hhr__vp{position:absolute;left:10%;right:10%;top:23%;height:60%;overflow:hidden;opacity:0;transition:opacity .5s ease .2s; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .shz-hhr__track{position:absolute;left:0;top:0;display:flex;height:100%;width:max-content;will-change:transform;animation:shzHhrMarquee 40s linear infinite paused} .shz-hhr.is-ticker .shz-hhr__vp{opacity:1} .shz-hhr.is-ticker .shz-hhr__track{animation-play-state:running} .shz-hhr.is-ticker .shz-hhr__screen{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent} /* ZIP-569 (A11Y-01): tap = pause / play */ .shz-hhr.is-paused .shz-hhr__track{animation-play-state:paused} .shz-hhr:focus-within .shz-hhr__track{animation-play-state:paused} /* a11y ZIP-533 (WCAG 2.2.2) */ @media (hover:hover){.shz-hhr:hover .shz-hhr__track{animation-play-state:paused}} @media (prefers-reduced-motion:reduce){.shz-hhr__track{animation:none}} .shz-hhr__group{display:flex;align-items:center;flex:0 0 auto;height:100%} .shz-hhr .shz-led__ann{display:inline-flex;align-items:center;gap:4px;padding:0 3px;white-space:nowrap} .shz-hhr .shz-led__ann-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:13px!important;height:13px!important;filter:none} .shz-hhr .shz-led__ann-icon svg{display:block;width:13px!important;height:13px!important;max-width:13px!important;max-height:13px!important} .shz-hhr .shz-led__ann-text{font-family:"Hind Siliguri","Segoe UI",Roboto,Arial,sans-serif;font-size:12.5px!important;font-weight:700;line-height:1;text-shadow:none} .shz-hhr:not([data-theme="black"]) .shz-led__ann-text,.shz-hhr:not([data-theme="black"]) .shz-led__ann-icon{color:var(--rb-text)!important;-webkit-text-fill-color:var(--rb-text)!important;background:none!important} .shz-hhr:not([data-theme="black"]) .shz-led__ann-sep{background:var(--rb-text)!important;opacity:.7} .shz-hhr .shz-led__ann-sep{display:inline-block;width:1.5px;height:9px;margin:0 9px!important;border-radius:2px;background:#ff3fae;box-shadow:none} } @keyframes shzHhrMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media (max-width:767px) and (prefers-reduced-motion:reduce){.shz-hhr__track{animation:none}} @media (max-width:767px) and (prefers-reduced-motion:reduce){.shz-hhb-slide{transition:none}} /* ZIP-460 (owner) — the search suggestion list floats above the page in every header (home, banner, second header, * page headers): a gap under the bar, rounded on all sides, the AI popup's pink-gold frame with a white halo, a soft * float, and the page behind dimmed 48 % black (shahaz-header.js adds .shz-search-dim). No shadow, no blur. */ .shz-search-dim{position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.48);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;-webkit-tap-highlight-color:transparent} html.shz-search-open .shz-search-dim{opacity:1;visibility:visible} html.shz-search-open .shahaz-home-header{z-index:1200} /* ZIP-504: on wide screens the home header sat at 997, under the dim (1150) — the search button and box could not be clicked */ html.shz-search-open #shahaz-enterprise-popup-root{visibility:hidden!important} /* offer bubbles wait while searching */ html body .shahaz-home-header__suggestions,html body .shahaz-global-market-header__suggestions{top:calc(100% + 10px);border:1.5px solid transparent!important;border-radius:18px!important; /* ZIP-468 (owner): light-pink glass — soft rose sheen at the top, light pink below; never white (contents: shahaz-smart-search.css) */ background:linear-gradient(180deg,rgba(255,170,215,.55) 0,rgba(255,170,215,0) 56px) padding-box, linear-gradient(165deg,#ffe0f0 0%,#ffd2ea 55%,#ffc4e3 100%) padding-box, linear-gradient(135deg,#ff4fae,#e0157a 30%,#e8c46a 55%,#e0157a 80%,#ff4fae) border-box!important; max-height:min(62vh,520px)!important;outline:3px solid rgba(255,120,190,.28);outline-offset:0;animation:shz-sugg-in .22s ease-out both,shz-sugg-float 4.5s ease-in-out .3s infinite} @keyframes shz-sugg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes shz-sugg-float{0%,100%{transform:none}50%{transform:translateY(-3px)}} @media (prefers-reduced-motion:reduce){html body .shahaz-home-header__suggestions,html body .shahaz-global-market-header__suggestions{animation:none}.shz-search-dim{transition:none}} /* ZIP-467 (owner): while any popup is open the page behind never scrolls — camera / picture search, the floating * search list, the AI popup, the side drawer. A swipe inside the popup scrolls only the popup (it never hands the * scroll on to the page at its top or bottom). */ html.shz-vs-open,html.shz-vs-open body,html.shz-search-open,html.shz-search-open body,html.shz-ai-open,html.shz-ai-open body,html.shz-ep-open,html.shz-ep-open body{overflow:hidden!important;overscroll-behavior:none} .shahaz-global-market-header__visual-search-modal,.shz-search-dim,#shahaz-drawer-overlay{overscroll-behavior:none;touch-action:none} .shahaz-global-market-header__visual-search-dialog,.shahaz-home-header__suggestions,.shahaz-global-market-header__suggestions, #shahaz-drawer-panel,#shahaz-drawer-panel .shahaz-drawer-menu-list-wrap,.shz-ai__body,[role="dialog"],[aria-modal="true"]{overscroll-behavior:contain} .shahaz-global-market-header__visual-search-dialog{touch-action:pan-y} /* ZIP-547 (owner: the AI robot must always be reachable): the robot button also shows * · phone with the banner header — a smaller robot under the menu button, over the right edge of the picture; * · tablet / desktop — a compact robot in the top strip, just left of "Become a Seller" (its own grid cell). * Same button, same panel (data-shahaz-ai-open). Animations are the phone ones (no blur, no shadow). */ @media (max-width:767px){ body.shz-hh-banner .shahaz-home-header__ai-engine{display:block!important;top:calc(var(--hh-bar-h,48px) + 22px);right:6px;left:auto;height:58px;width:87px;z-index:3} /* ZIP-564 (owner): in the banner header the robot sits inside a water-clear glass ball (football panels drawn faintly in * white) so it reads on any banner picture. No blur, no shadow; the classic header's robot is unchanged. */ body.shz-hh-banner .shahaz-home-header__ai-engine::before{content:"";position:absolute;left:4px;top:-4px;width:63px;height:63px;border-radius:50%;z-index:-1;pointer-events:none; border:1.5px solid rgba(255,255,255,.95); /* ZIP-610 (owner): a clean round glass ball — no football panels */ background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0,rgba(255,255,255,.07) 56%,rgba(255,255,255,.26) 82%,rgba(255,255,255,.58) 96%,rgba(255,255,255,.75) 100%)} body.shz-hh-banner .shahaz-home-header__ai-engine::after{content:"";position:absolute;left:4px;top:-4px;width:63px;height:63px;border-radius:50%;z-index:1;pointer-events:none; background:radial-gradient(ellipse 17px 9px at 33% 16%,rgba(255,255,255,.95),rgba(255,255,255,0) 100%), radial-gradient(ellipse 5px 3px at 70% 22%,rgba(255,255,255,.8),rgba(255,255,255,0) 100%), radial-gradient(ellipse 24px 6px at 50% 91%,rgba(255,255,255,.55),rgba(255,255,255,0) 100%)} body.shz-hh-banner .shahaz-home-header__ai-engine .shahaz-home-header__ai-ask{z-index:2} /* ZIP-609/610 (owner): "Ask AI" on the banner header — one slim line, the crystal glass of the product page's * "Tap image to zoom" pill (clear frosted body, bright rim, light streak across the top half) */ body.shz-hh-banner .shahaz-home-header .shahaz-home-header__ai-engine .shahaz-home-header__ai-ask{flex-direction:row;gap:3px;min-width:0;height:19px;padding:0 8px;top:2px;right:-4px; border:1px solid rgba(255,255,255,.95);border-radius:6px;color:#d4006e;font:800 9.5px/1 Poppins,"Segoe UI",Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 46%,rgba(255,255,255,.74) 100%)} body.shz-hh-banner .shahaz-home-header .shahaz-home-header__ai-engine .shahaz-home-header__ai-ask::after{content:"";position:absolute;left:3px;right:3px;top:1px;height:45%;border-radius:5px 5px 10px 10px; background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none} body.shz-hh-banner .shahaz-home-header .shahaz-home-header__ai-engine .shahaz-home-header__ai-ask b{position:relative;z-index:1;font-size:9.5px;font-weight:900} } @media (min-width:768px){ .shahaz-home-header__stage{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:". ai seller" "brand bar bar"} .shahaz-home-header .shahaz-home-header__ai-engine{grid-area:ai;justify-self:end;display:block;position:relative;z-index:3;height:40px;width:60px; margin:-6px 4px -8px 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;min-height:0;cursor:pointer;line-height:0} .shahaz-home-header .shahaz-home-header__ai-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none} .shahaz-home-header .shzH-eyes,.shahaz-home-header .shzH-star{transform-box:fill-box;transform-origin:center} .shahaz-home-header .shahaz-home-header__ai-ask{position:absolute;right:-6px;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center; min-width:30px;padding:3px 6px;border:1px solid #ff8fcb;border-radius:10px 10px 10px 3px;background:#fff;color:#e0157a;font:900 9px/1.05 "Arial Black","Segoe UI",Arial,sans-serif} .shahaz-home-header .shahaz-home-header__ai-ask b{font-size:10.5px;font-weight:900} .shahaz-home-header .shahaz-home-header__ai-engine:focus-visible{outline:2px solid #d4116a;outline-offset:2px} } /* ZIP-612 (owner): the header WITHOUT banner (logo + search + heart + menu) gets the same robot as the banner header — * the clean round crystal ball and the "Ask AI" crystal-glass pill (ZIP-610), sized for its smaller robot. Phones only. */ @media (max-width:767px){ body:not(.shz-hh-banner) .shahaz-home-header__ai-engine::before{content:"";position:absolute;left:8%;top:-2%;width:66%;aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none; border:1.5px solid rgba(255,255,255,.95); background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0,rgba(255,255,255,.07) 56%,rgba(255,255,255,.26) 82%,rgba(255,255,255,.58) 96%,rgba(255,255,255,.75) 100%)} body:not(.shz-hh-banner) .shahaz-home-header__ai-engine::after{content:"";position:absolute;left:8%;top:-2%;width:66%;aspect-ratio:1;border-radius:50%;z-index:1;pointer-events:none; background:radial-gradient(ellipse 27% 14% at 33% 16%,rgba(255,255,255,.95),rgba(255,255,255,0) 100%), radial-gradient(ellipse 8% 5% at 70% 22%,rgba(255,255,255,.8),rgba(255,255,255,0) 100%), radial-gradient(ellipse 38% 10% at 50% 91%,rgba(255,255,255,.55),rgba(255,255,255,0) 100%)} body:not(.shz-hh-banner) .shahaz-home-header .shahaz-home-header__ai-engine .shahaz-home-header__ai-ask{z-index:2;flex-direction:row;gap:3px;min-width:0;height:19px;padding:0 8px;top:4px;right:4px; border:1px solid rgba(255,255,255,.95);border-radius:6px;color:#d4006e;font:800 9.5px/1 Poppins,"Segoe UI",Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 46%,rgba(255,255,255,.74) 100%)} body:not(.shz-hh-banner) .shahaz-home-header .shahaz-home-header__ai-engine .shahaz-home-header__ai-ask::after{content:"";position:absolute;left:3px;right:3px;top:1px;height:45%;border-radius:5px 5px 10px 10px; background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none} body:not(.shz-hh-banner) .shahaz-home-header .shahaz-home-header__ai-engine .shahaz-home-header__ai-ask b{position:relative;z-index:1;font-size:9.5px;font-weight:900} }