/* Lil' Baby Boutique: component classes, lifted from the Boutique Design System page and bound to tokens.css. Prefix lb- (web register), lb-i- (iOS register). */ *{box-sizing:border-box} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} [dir="rtl"]{font-family:var(--font-arabic)} .lb-num{font-variant-numeric:tabular-nums} [dir="rtl"] .lb-num,[dir="rtl"] code{direction:ltr;unicode-bidi:isolate} .lb-pad{padding:var(--space-16)} .lb-row{display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:center} .lb-label{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-text)} .lb-note{font-size:.8rem;color:var(--muted-text);line-height:1.5;margin:0} /* Earnings hero: the page's one loud element */ .lb-hero-earn{background:linear-gradient(140deg,var(--brand) 0%,var(--brand-deep) 100%);border-radius:var(--r-lg);padding:var(--space-24);box-shadow:var(--shadow-lift);color:var(--on-brand)} .lb-hero-earn .lb-label{color:rgba(255,255,255,.72)} .lb-hero-earn__fig{font-size:2.75rem;font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:4px} .lb-hero-earn__fig small{font-size:1rem;font-weight:600;opacity:.8;margin-inline-start:6px} .lb-hero-earn__sub{display:flex;gap:var(--space-20);flex-wrap:wrap;margin-top:var(--space-14);padding-top:var(--space-14);border-top:1px solid rgba(255,255,255,.18)} .lb-hero-earn__sub span{display:block;color:rgba(255,255,255,.7);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700} .lb-hero-earn__sub b{display:block;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--earn);font-weight:700} /* Stat tiles */ .lb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:var(--space-10)} .lb-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px var(--space-14)} .lb-tile__v{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px} /* Buttons */ .lb-btn{font:inherit;font-weight:600;font-size:.88rem;border:0;cursor:pointer;padding:.6rem 1.1rem;border-radius:var(--r);background:var(--action);color:var(--on-action);min-height:44px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease} .lb-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(32,199,217,.32)} .lb-btn:active{transform:translateY(0)} .lb-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .lb-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .lb-btn--copied{background:var(--ok);color:#fff} .lb-btn--block{width:100%} /* Status badges: always a word, never colour alone */ .lb-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:.2rem .55rem;border-radius:var(--r-pill);white-space:nowrap} .lb-badge--paid{background:var(--ok-soft);color:var(--ok)} .lb-badge--pending{background:var(--earn-soft);color:var(--warn)} .lb-badge--out{background:var(--surface);color:var(--muted-text);border:1px solid var(--line)} /* Order row: stacked label/value, used below 768px */ .lb-srow{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)} .lb-srow__head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-10);padding:var(--space-10) var(--space-14);background:var(--surface);font-weight:700;font-size:.88rem} .lb-srow__cell{display:flex;justify-content:space-between;gap:12px;padding:.45rem var(--space-14);font-size:.87rem} .lb-srow__cell:last-child{padding-bottom:12px} .lb-srow__cell b{font-weight:600;color:var(--muted-text);font-size:.82rem} .lb-srow__cell span{text-align:end;font-variant-numeric:tabular-nums} /* Empty state: carries the next action */ .lb-empty{text-align:center;padding:var(--space-24) var(--space-16)} .lb-empty__icon{width:44px;height:44px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;margin:0 auto 10px;color:var(--brand);font-size:1.15rem} [data-theme="dark"] .lb-empty__icon{color:var(--ink)} .lb-empty h4{margin:0 0 4px;font-size:.95rem;font-weight:700} .lb-empty p{margin:0 0 12px;color:var(--muted-text);font-size:.85rem} /* Sidebar navigation on brand */ .lb-nav{background:var(--brand);border-radius:var(--r);padding:var(--space-8);display:grid;gap:2px} .lb-nav a{display:flex;gap:10px;align-items:center;padding:.55rem .75rem;border-radius:.4rem;color:rgba(255,255,255,.72);text-decoration:none;font-size:.88rem;font-weight:600;transition:background .2s ease,color .2s ease} .lb-nav a[aria-current="page"]{background:rgba(255,255,255,.12);color:var(--on-brand);box-shadow:inset 3px 0 0 var(--action)} [dir="rtl"] .lb-nav a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--action)} .lb-nav a:focus-visible{outline:2px solid var(--action);outline-offset:2px} /* Share link */ .lb-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden} .lb-card__b{padding:12px var(--space-14);display:grid;gap:var(--space-10)} .lb-linkbox{display:flex;gap:var(--space-8);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-input);padding:.35rem .4rem .35rem .6rem} .lb-linkbox code{font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;color:var(--ink)} .lb-mini{font:inherit;font-size:.72rem;font-weight:700;border:0;cursor:pointer;background:var(--action);color:var(--on-action);border-radius:.35rem;padding:.42rem .6rem} .lb-mini--copied{background:var(--ok);color:#fff} .lb-stats{display:flex;gap:var(--space-14);font-size:.77rem;color:var(--muted-text);flex-wrap:wrap} .lb-stats b{color:var(--ink);font-variant-numeric:tabular-nums} .lb-bar{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden} .lb-bar i{display:block;height:100%;background:var(--action);border-radius:var(--r-pill)} /* Fields: on a brand ground, and light */ .lb-onbrand{background:linear-gradient(160deg,var(--brand) 0%,var(--brand-deep) 100%);padding:22px;border-radius:var(--r);display:grid;gap:var(--space-14)} .lb-field{display:grid;gap:5px} .lb-field label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)} .lb-field input{font:inherit;font-size:.9rem;padding:.62rem .7rem;border-radius:var(--r-input);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;width:100%} .lb-field input::placeholder{color:rgba(255,255,255,.45)} .lb-field input:focus-visible{outline:2px solid var(--action);outline-offset:1px} .lb-field--light label{color:var(--muted-text)} .lb-field--light input{background:var(--surface);border-color:var(--line);color:var(--ink)} .lb-field--light input:focus-visible{outline-color:var(--brand)} /* Terms acceptance */ .lb-terms{font-size:.82rem;color:var(--muted-text);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px var(--space-14);max-height:186px;overflow-y:auto;line-height:1.6} .lb-terms h5{margin:0 0 4px;font-size:.84rem;color:var(--ink);font-weight:700} .lb-terms p{margin:0 0 10px} .lb-terms p:last-child{margin-bottom:0} .lb-agree{display:flex;gap:9px;align-items:center;font-size:.84rem;min-height:44px} .lb-agree input{width:18px;height:18px;accent-color:var(--action);flex:0 0 auto} /* ── iOS register: fixed light ── */ .lb-i{font-family:var(--font-ios);color:var(--ios-ink);background:var(--ios-ground);padding:var(--space-16)} .lb-i[dir="rtl"]{font-family:var(--font-arabic)} .lb-i-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:340px} .lb-i-card{background:var(--ios-card);border-radius:var(--ios-r-card);box-shadow:var(--ios-card-stroke)} .lb-i-mcard{padding:15px 10px 13px;height:178px;display:grid;justify-items:center;align-content:start;gap:7px} .lb-i-mav{width:76px;height:76px;border-radius:50%;padding:2.5px;flex:0 0 auto;display:inline-block;background:linear-gradient(140deg,var(--brand) 0%,var(--action) 100%)} .lb-i-mav > span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--ios-card)} .lb-i-mav img{width:100%;height:100%;object-fit:cover;display:block} .lb-i-ini{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-size:1.42rem;font-weight:700;background:linear-gradient(140deg,var(--brand) 0%,var(--brand-deep) 100%)} .lb-i-mav--sm{width:46px;height:46px}.lb-i-mav--sm .lb-i-ini{font-size:.86rem} .lb-i-mav--lg{width:108px;height:108px}.lb-i-mav--lg .lb-i-ini{font-size:2.1rem} .lb-i-photo{display:block;width:100%;height:100%} .lb-i-mname{font-size:.88rem;font-weight:700;text-align:center;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-i-mcount{font-size:.7rem;color:var(--ios-muted);min-height:1.05em;text-align:center} .lb-i-mcount--none{visibility:hidden} .lb-i-hero{position:relative;border-radius:var(--ios-r-hero);overflow:hidden;padding:14px;display:flex;align-items:center;gap:13px;min-height:104px;max-width:340px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 78%);box-shadow:var(--ios-hero-shadow)} .lb-i-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 92% 8%,rgba(32,199,217,.34),transparent 62%)} .lb-i-hero__av{width:64px;height:64px;border-radius:50%;flex:0 0 auto;padding:2.5px;background:rgba(255,255,255,.9);position:relative;z-index:1} .lb-i-hero__txt{position:relative;z-index:1;min-width:0;display:grid;gap:2px} .lb-i-hero__n{font-size:1.02rem;font-weight:700;color:#fff;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-i-hero__b{font-size:.72rem;color:rgba(255,255,255,.78);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lb-i-hero__c{font-size:.68rem;font-weight:700;color:var(--action);margin-top:2px} .lb-i-hero__go{position:relative;z-index:1;color:rgba(255,255,255,.8);font-size:1rem;flex:0 0 auto} .lb-i-idbar{display:flex;align-items:center;gap:10px;padding:9px 11px;max-width:340px} .lb-i-idbar__t{flex:1 1 auto;min-width:0;display:grid;gap:1px} .lb-i-idbar__t b{font-size:.85rem;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-i-idbar__t i{font-style:normal;font-size:.7rem;color:var(--ios-muted)} .lb-i-idbar__go{font-size:.72rem;font-weight:700;color:var(--action-ink);flex:0 0 auto;display:flex;align-items:center;gap:3px;white-space:nowrap} .lb-i-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:340px} .lb-i-pcard{overflow:hidden} .lb-i-pcard__i{height:84px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);font-weight:700;font-size:1.15rem} .lb-i-pcard__b{padding:8px 9px 10px;display:grid;gap:4px} .lb-i-pcard__n{font-size:.74rem;font-weight:700;line-height:1.3} .lb-i-pcard__p{font-size:.78rem;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums} .lb-i-recby{display:inline-flex;align-items:center;gap:4px;font-size:.58rem;font-weight:700;background:var(--brand-soft);color:var(--brand);padding:.16rem .42rem;border-radius:var(--r-pill);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:fit-content} .lb-i-recby u{text-decoration:none;width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:linear-gradient(140deg,var(--brand),var(--action))} .lb-i-search{display:flex;align-items:center;gap:8px;background:var(--ios-chip);border-radius:var(--r-pill);padding:0 14px;min-height:42px;box-shadow:var(--ios-search-shadow);color:var(--ios-muted);font-size:.82rem;max-width:340px} .lb-i-search b{font-weight:400;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-i-search .lb-i-typed{color:var(--ios-ink);font-weight:500} .lb-i-search u{text-decoration:none;font-size:.95rem;color:var(--brand);flex:0 0 auto} .lb-i-clear{width:17px;height:17px;border-radius:50%;background:#cfd4da;color:#fff;display:grid;place-items:center;font-size:.6rem;flex:0 0 auto} .lb-i-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:340px} .lb-i-sec h4{margin:0;font-size:.95rem;font-weight:700;color:var(--ios-ink)} .lb-i-sec span{font-size:.78rem;color:var(--action)} .lb-i-tabbar{background:var(--ios-card);border-top:1px solid var(--ios-line);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 4px 13px;max-width:360px} .lb-i-tabbar div{display:grid;gap:3px;justify-items:center;font-size:.56rem;font-weight:500;color:var(--ios-muted)} .lb-i-tabbar div b{font-size:1rem;font-weight:400;line-height:1} .lb-i-tabbar div[aria-current="page"]{color:var(--action)} .lb-i-sk{background:var(--ios-card);border-radius:var(--ios-r-card);padding:15px 10px 13px;height:178px;display:grid;justify-items:center;gap:9px;align-content:start;box-shadow:inset 0 0 0 1.5px var(--ios-line)} .lb-i-sk i{display:block;border-radius:6px;background:linear-gradient(90deg,#eceef1 25%,#f7f8fa 37%,#eceef1 63%);background-size:400% 100%} .lb-i-sk .a{width:76px;height:76px;border-radius:50%} .lb-i-sk .l{height:11px;width:72%} .lb-i-sk .s{height:9px;width:46%} @media (prefers-reduced-motion:no-preference){.lb-i-sk i{animation:lb-sheen 1.4s ease-in-out infinite}} @keyframes lb-sheen{from{background-position:100% 0}to{background-position:0 0}} .lb-i-empty{display:grid;justify-items:center;gap:7px;text-align:center;padding:40px 18px;max-width:340px} .lb-i-empty__i{font-size:2rem;color:#c2c8d0} .lb-i-empty h4{margin:0;font-size:.95rem;font-weight:700} .lb-i-empty p{margin:0;font-size:.78rem;color:var(--ios-muted);max-width:28ch;line-height:1.55} .lb-i-prof{display:grid;justify-items:center;gap:9px;text-align:center;max-width:320px} .lb-i-prof h4{margin:0;font-size:1.16rem;font-weight:700} .lb-i-prof__cnt{font-size:.72rem;font-weight:700;color:var(--action-ink)} .lb-i-prof p{margin:0;font-size:.78rem;color:var(--ios-muted);line-height:1.65} .lb-i-gal{display:flex;gap:7px;width:100%} .lb-i-gal i{flex:1 1 0;height:62px;border-radius:7px;display:block;background:linear-gradient(140deg,rgba(57,9,108,.16),rgba(32,199,217,.22))} .lb-i-soc{display:flex;gap:10px;justify-content:center} .lb-i-soc span{width:40px;height:40px;border-radius:50%;background:var(--ios-chip);color:var(--brand);display:grid;place-items:center;font-size:.9rem} .lb-i-cta{background:var(--action);color:var(--on-action);border-radius:var(--ios-r-card);min-height:44px;display:grid;place-items:center;font-size:.84rem;font-weight:700;width:100%} [dir="rtl"] .lb-flip{display:inline-block;transform:scaleX(-1)} .lb-vh,.lb-cat-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (pointer:coarse){ input,select,textarea{font-size:16px!important} } .lb-hdr-search-wrap:focus-within{outline:2px solid var(--action);outline-offset:2px} .lb-signin-phone-wrap:focus-within{outline:2px solid var(--brand);outline-offset:2px} .lb-mini:focus-visible{outline:2px solid var(--brand);outline-offset:2px} header .lb-mini:focus-visible{outline-color:var(--action)} @media (pointer:coarse){ [data-lb-ann-dismiss],[data-lb-open="deliver-to"],[data-lb-open="search-voice"],[data-lb-open="search-scan"],.lb-hdr-chip,.lb-lang-pill,.lb-mini{position:relative} [data-lb-ann-dismiss]::after,[data-lb-open="deliver-to"]::after,[data-lb-open="search-voice"]::after,[data-lb-open="search-scan"]::after,.lb-hdr-chip::after,.lb-lang-pill::after,.lb-mini::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(44px,100%);height:max(44px,100%)} } @media (hover:none){ .lb-btn:hover{transform:none;box-shadow:none} [role="group"][aria-label="Search tools"] button:hover{background:transparent!important} } [data-lb-cart-lines],[data-lb-qv-body],.lb-hdr-search-panel{overscroll-behavior:contain} @media(max-width:767px){ /* Capsule (owner, 2026-09-27: "still not a capsule"): border-radius 999px is always at least half the bar's height, so both ends are full semicircles rather than 22px corners. The horizontal padding keeps the end tabs clear of the curve. Frosted glass (owner: "should be a frosted glass background"): a mostly transparent white tint over a strong blur+saturate lets the scrolled content show through softened, which is the glass read. An inset top highlight and a hairline outer ring keep the edge crisp on light grounds. Browsers without backdrop-filter get a near-opaque fallback so labels stay legible. */ /* Distance of the floating tab bar from the screen bottom (owner 2026-09-27, iPhone: "a lot of bottom margin"). The full safe area (34pt on Face ID iPhones) plus 12px left a ~46pt band. Like iOS's own floating tab bars it now overlaps the safe area and only clears the home indicator line: inset minus 14px (20pt on iPhone), never below the old 12px, which is also the value everywhere the inset is 0 (desktop, Android, the pixel sweep). The footer space, WhatsApp button and product sticky bar are offset from the same value so they stay aligned. */ :root{--lb-tab-gap:max(12px, calc(env(safe-area-inset-bottom, 0px) - 14px))} .lb-tabbar{ left:12px !important;right:12px !important; bottom:var(--lb-tab-gap) !important; border:1px solid rgba(255,255,255,.55) !important;border-radius:999px !important; padding:6px 10px !important; background:linear-gradient(180deg,rgba(255,255,255,.68) 0%,rgba(255,255,255,.52) 100%) !important; -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 .5px rgba(23,12,40,.10),0 12px 32px rgba(23,12,40,.16),0 2px 8px rgba(23,12,40,.06) !important; } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lb-tabbar{background:rgba(255,255,255,.95) !important} } .lb-tabbar a{border-radius:999px} footer[data-section="footer"]{padding-bottom:calc(76px + var(--lb-tab-gap) + var(--lb-ftr-lift,0px)) !important} /* Every WhatsApp pill (the shared footer's .lb-ftr__wa, and the checkout/order pages' own, which only carry the shared data-screen-label and an inline bottom:24px at every width) sits above the floating bar. */ .lb-ftr__wa,[data-screen-label="A7 WhatsApp"]{bottom:calc(82px + var(--lb-tab-gap) + var(--lb-ftr-lift,0px)) !important} #lb-pd-sticky{bottom:calc(72px + var(--lb-tab-gap)) !important} /* The bars stacked above the tab bar (product "Add to cart", cart total + Checkout) float like the tab bar (owner 2026-09-27): inset 12px, fully rounded, the same frosted glass and shadow. The cart bar now shares the product bar's offset, 6px above the tab bar; it used a fixed 66px that overlapped the tab bar by 12px. */ #lb-pd-sticky,.lb-cart__mobbar{ left:12px !important;right:12px !important; border:1px solid rgba(255,255,255,.55) !important;border-radius:999px; padding:8px 8px 8px 20px !important;padding-inline:20px 8px !important; background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.64) 100%) !important; -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 .5px rgba(23,12,40,.10),0 12px 32px rgba(23,12,40,.16),0 2px 8px rgba(23,12,40,.06); } .lb-cart__mobbar{bottom:calc(72px + var(--lb-tab-gap)) !important} /* Checkout's Place order bar is a full-width docked bar (inline bottom:0), so on phones it covered the floating tab bar. It now sits on top of the tab bar, offset by the same value as the cart bar (the safe-area inset is already inside --lb-tab-gap). Page padding for it is in checkout.blade.php. */ .lb-co__mobbar{bottom:calc(72px + var(--lb-tab-gap)) !important} #lb-pd-sticky .lb-btn,.lb-cart__mobbar .lb-btn{border-radius:999px} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #lb-pd-sticky,.lb-cart__mobbar{background:rgba(255,255,255,.95) !important} } /* Lil the mascot (built by delight.js with inline styles; matched by her own image) sat at a fixed 84px: behind these bars (same height, lower layer) and, on iPhone, 2px into the tab bar. She now follows the tab bar's offset, and rises to the WhatsApp button's height while one of the bars is showing. */ body > div:has(> button > img[src*="lil-baby-mark"]){bottom:calc(72px + var(--lb-tab-gap)) !important;transition:bottom .2s ease} body:has(#lb-pd-sticky:not([hidden])) > div:has(> button > img[src*="lil-baby-mark"]), body:has(.lb-cart__mobbar:not([hidden])) > div:has(> button > img[src*="lil-baby-mark"]){bottom:calc(146px + var(--lb-tab-gap)) !important} } [data-screen-label="A7 WhatsApp"]{ width:56px !important;height:56px !important;min-height:56px !important; padding:0 !important;gap:0 !important;justify-content:center !important;align-items:center !important; border-radius:50% !important; background:#25D366 !important;color:#fff !important; box-shadow:0 6px 18px rgba(37,211,102,.38),0 2px 6px rgba(23,12,40,.12) !important; } [data-screen-label="A7 WhatsApp"]:focus-visible{outline:2px solid var(--brand);outline-offset:3px} #main{overflow-anchor:none} .lb-hdr__row{height:76px;transition:height .2s ease} .lb-hdr__logo{height:52px;transition:height .2s ease} .lb-hdr--compact .lb-hdr__row{height:60px} .lb-hdr--compact .lb-hdr__logo{height:40px} .lb-hdr--compact [data-lb-catbar]{display:none!important} [data-lb-catbar]{max-height:none!important;opacity:1!important;transition:none!important} /* overflow:visible only for the desktop category nav. The phone chip row (a div) must keep scrolling sideways inside itself: forcing it visible (2026-09-27 flicker fix) let its chips spill past the screen edge and widen the whole page on iPhone (owner report: sideways page drag, cut-off photo viewer). */ nav[data-lb-catbar]{overflow:visible!important} div[data-lb-catbar]{overflow-x:auto!important;overflow-y:hidden!important} /* Nothing may widen the page (owner: "every component should fit to the screen"). clip, unlike hidden, creates no scroll container, so the sticky header and sidebars keep working; with zoom disabled a wider page would otherwise pan sideways and size fixed overlays past the screen. */ html,body{overflow-x:clip} /* No overscroll-behavior-x on the root: browsers read it as "no sideways gestures" and it switched off swipe-to-go-back (owner 2026-09-27). overflow-x:clip alone already stops sideways page drag. */ @media (prefers-reduced-motion:reduce){ .lb-hdr__row,.lb-hdr__logo{transition:none} } .lb-hdr-menu__label{display:inline} @media (max-width:767px){ .lb-hdr-menu__label{display:none} /* Owner 2026-09-27 (iPhone): the icon still sat 2px off-centre, because the button's inline padding (12px start, 16px end, sized for the label) beat this rule. With the label hidden it is now an exact 44px circle with the icon centred, in both headers and both directions. */ [data-lb-menu-trigger]{width:44px;padding:0 !important;justify-content:center} /* The voice/barcode group sat 17px from the search pill's end but 4px from its top and bottom, so it did not read as nested. Matching end inset: 3px padding + the 1px border = 4px. */ .lb-hdr-search-wrap{padding-inline-end:3px !important} } .lb-hdr-cart-label--full{display:none} @media (min-width:768px){ .lb-hdr-cart-label--short{display:none} .lb-hdr-cart-label--full{display:inline} } /* Placeholders on light fields (owner report 2026-09-27: checkout's Email, Avenue, Floor... looked blank). The bundle's .lb-field is built for the dark on-brand panel, so its placeholder is white at 45%; .lb-field--light swaps the background and text but never the placeholder, leaving it near-invisible on --surface. The prototype has the same gap. --muted is the secondary-text grey, lighter than a typed value so a hint never reads as filled in. */ .lb-field--light input::placeholder,.lb-field--light textarea::placeholder{color:var(--muted);opacity:1} /* Bottom-edge panels on iPhone. layout.blade.php declares viewport-fit=cover (2026-09-27, the floating tab bar gap), so anything pinned to the bottom edge now reaches the home indicator. Each panel whose last control sits on that edge pads it by the safe-area inset (0 everywhere else, so nothing moves on desktop, Android or in the pixel sweep). */ [data-lb-mobbar], [data-section="C1-sheet"] > [role="dialog"], [data-section="mini-cart-dialog"] > [role="dialog"], [data-lb-close="side-menu"] + [role="dialog"], .lb-qv-frame{padding-bottom:env(safe-area-inset-bottom,0px)} /* No focus ring on buttons and links after a tap (data-lb-input, set in store/layout.blade.php). Keyboard focus, and fields being typed into, keep their rings. */ [data-lb-input="touch"] :is(button,a,[role="button"],[role="tab"],[role="switch"],[role="radio"],summary):focus-visible{outline:none!important} @media (min-width:768px) and (max-width:1359px){ .lb-hdr__row.lb-hdr__gap{row-gap:0} .lb-hdr__row{flex-wrap:wrap;height:auto} .lb-hdr--compact .lb-hdr__row{height:auto} .lb-hdr__row::before{content:'';flex:0 0 0;width:0;height:76px;margin-inline-end:calc(-1 * var(--space-12))} .lb-hdr--compact .lb-hdr__row::before{height:60px} .lb-hdr__search{order:1;flex:1 0 100% !important;padding-bottom:var(--space-12)} .lb-hdr__search > *{max-width:none !important} .lb-hdr__search + [role="group"]{margin-inline-start:auto} } /* From 1180px the row gap is 20px (.lb-hdr__gap), so the empty ::before item needs a matching offset. */ @media (min-width:1180px) and (max-width:1359px){ .lb-hdr__row::before{margin-inline-end:calc(-1 * var(--space-20))} } /* Arabic 768-788px: the top line (Menu pill, logo, Deliver-to, language, Sign in, wishlist, Cart) is 2-22px wider than the row, so the last item wrapped onto its own line (row 178px instead of 134px). English fits. Fallback from the approved plan: the Menu pill becomes icon-only (same 44px circle as the phone header; the accessible name now comes from aria-label on the button) and nothing else is hidden. Measured Arabic slack with the label: -22px at 768, -2px at 788, +2px at 792, +26px at 816, so the sub-range ends at 815px to leave a safe margin. English gets the same icon-only pill in this range for consistency. !important on padding beats the pill's inline padding, as in the phone rule above. */ @media (min-width:768px) and (max-width:815px){ .lb-hdr__row [data-lb-menu-trigger]{width:44px;padding:0 !important;justify-content:center} .lb-hdr__row [data-lb-menu-trigger] > span{display:none} } @media (min-width:768px) and (max-width:1179px){ .lb-home .lb-home__sf{grid-template-columns:1fr} .lb-home .lb-home__mom,.lb-home .lb-home__monthly{grid-template-columns:1fr} .lb-home .lb-home__mom-picks{padding:0 var(--space-24) var(--space-24)} } /* Moms' list of 6 portrait cards: once the boutique block is stacked it is the full ~730px wide, and 6 columns leave ~110px per card at 768-899px, so names like "Fatima Al-Sabah" touch the card edges (spill at 768px, found by the all-pages sweep). Two rows of 3 below 900px; nothing is hidden. */ @media (min-width:768px) and (max-width:899px){ .lb-home .lb-home__mom-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* Category/search product cards at 768-815px: the sidebar plus three columns leave each card ~125-135px, and the Arabic "+ أضيفي إلى السلة" / "نبّهيني عند توفره" buttons (141px / 129px of text, nowrap by the [dir=rtl] .lb-btn rule in layout.blade.php) ended in "..." (found by the all-pages sweep). Trimming the buttons' inline padding from 1.1rem to .55rem frees ~18px; the label stays whole and nothing is hidden. English fits as-is. Range ends at 839px: from ~816px the cards are wide enough (measured, 16px steps). */ @media (min-width:768px) and (max-width:839px){ [dir="rtl"] .lb-cat-grid .lb-btn{padding-inline:.55rem} } /* 1. Home on phones: .lb-home is a one-column grid with no explicit track, so its single implicit track is `auto` and grows to the widest child (the product-row tab strip ran ~600px in a 390px viewport, cutting off the right third). minmax(0,1fr) lets the track shrink to the container, and min-width:0 on the sections lets each overflow-x rail scroll inside itself. */ .lb-home{grid-template-columns:minmax(0,1fr)} .lb-home>*{min-width:0} /* 2. Arabic: the layout's `[dir=rtl] .lb-btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}` plus the listing's `.lb-cat-filterbtn{flex:1}` cut the Filters label to its first letters. The filter button keeps its whole label; a ghost button (which sits in grids, e.g. order "pay on delivery instead") wraps a long Arabic label onto a second line instead of ending in "...". */ [dir=rtl] .lb-btn.lb-cat-filterbtn{flex:0 0 auto;min-width:max-content;overflow:visible;text-overflow:clip} [dir=rtl] .lb-btn.lb-btn--ghost{white-space:normal;overflow:visible;text-overflow:clip} /* 3. Shared utility for long unbroken strings (order references, emails, URLs) that otherwise push out of their box. Pages add the class. */ .lb-break{overflow-wrap:anywhere;word-break:break-word} /* 4. Floating layers. They hide while the shopper scrolls down (frame.js toggles html.lb-float-away) so they never sit over titles and prices, and return on scroll up or at rest. The mascot's speech bubble is dropped on phones, where it covered product names. */ .lb-ftr__wa,[data-lb-mascot]{transition:opacity .2s ease,visibility .2s ease} @media(prefers-reduced-motion:reduce){.lb-ftr__wa,[data-lb-mascot]{transition:none}} /* Never hide a layer that holds keyboard focus (a focused control must stay visible); frame.js also stops toggling while focus is inside. */ html.lb-float-away .lb-ftr__wa:not(:focus-within),html.lb-float-away [data-lb-mascot]:not(:focus-within){opacity:0;visibility:hidden;pointer-events:none} @media(max-width:767px){ [data-lb-mascot-bubble]{display:none !important} /* The mascot's inline `bottom:84px` ignored the sticky buy/checkout bar; it now takes the same lift as the WhatsApp pill (partials/_overrides: 82px + tab gap + the page's --lb-ftr-lift). The lift is set on by the layout, because the mascot is appended to and so cannot inherit it from