/* ---------- 0. fonts ---------- */
@font-face{font-family:'DG Bebo';font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/lateef-ksa-92/lateef-assets@main/assets/dg-bebo-bold.woff2) format('woff2');}
html:root{--lz-mark:url("https://cdn.jsdelivr.net/gh/lateef-ksa-92/lateef-assets@main/assets/brand-mark-5ee23c.webp");--lz-pattern-light:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgMjIwIDIyMCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzhENzRDQyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIG9wYWNpdHk9IjAuMTIiPgogPHBhdGggZD0iTTMwIDQwIEw1MiAyMCBMNzQgNDAgWiIvPgogPHBhdGggZD0iTTE1MCAzMCBxMTAgLTEyIDIwIDAgdDIwIDAiLz4KIDxjaXJjbGUgY3g9IjExNSIgY3k9IjYwIiByPSI3Ii8+CiA8cGF0aCBkPSJNNjAgMTUwIGwwIC0xIi8+CiA8cGF0aCBkPSJNMjggMTkwIEw0OCAxNzAgTDY4IDE5MCBaIi8+CiA8cGF0aCBkPSJNMTcwIDEyMCBxMTAgLTEyIDIwIDAgdDIwIDAiLz4KIDxyZWN0IHg9IjEzMCIgeT0iMTcwIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIzIiB0cmFuc2Zvcm09InJvdGF0ZSgyMCAxMzkgMTc5KSIvPgo8L2c+CjxnIGZpbGw9IiNGMkI2Q0IiIG9wYWNpdHk9IjAuMjQiPgogPHBhdGggZD0iTTk1IDEwNSBsMTYgLTI2IGwxNiAyNiB6Ii8+CiA8Y2lyY2xlIGN4PSIxOTAiIGN5PSI3MCIgcj0iNiIvPgogPHBhdGggZD0iTTYwIDgwIGMtNiAtOCAtMTggLTIgLTE0IDggYzMgNiAxNCAxNCAxNCAxNCBzMTEgLTggMTQgLTE0IGM0IC0xMCAtOCAtMTYgLTE0IC04eiIvPgo8L2c+CjxnIGZpbGw9IiM4RDc0Q0MiIG9wYWNpdHk9IjAuMTY5OTk5OTk5OTk5OTk5OTgiPgogPGVsbGlwc2UgY3g9IjE1MCIgY3k9IjE1MCIgcng9IjciIHJ5PSI5Ii8+PGVsbGlwc2UgY3g9IjE2NCIgY3k9IjE0MCIgcng9IjUiIHJ5PSI3Ii8+PGVsbGlwc2UgY3g9IjEzNiIgY3k9IjE0MCIgcng9IjUiIHJ5PSI3Ii8+CiA8ZWxsaXBzZSBjeD0iMTc1IiBjeT0iMTUzIiByeD0iNCIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSIxMjUiIGN5PSIxNTMiIHJ4PSI0IiByeT0iNS41Ii8+CiA8ZWxsaXBzZSBjeD0iNjAiIGN5PSIxMzAiIHJ4PSI0IiByeT0iNSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjEyMiIgcng9IjMiIHJ5PSI0Ii8+PGVsbGlwc2UgY3g9IjcwIiBjeT0iMTIyIiByeD0iMyIgcnk9IjQiLz4KPC9nPjwvc3ZnPg==");--lz-pattern-purple:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgMjIwIDIyMCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIG9wYWNpdHk9IjAuMDkiPgogPHBhdGggZD0iTTMwIDQwIEw1MiAyMCBMNzQgNDAgWiIvPgogPHBhdGggZD0iTTE1MCAzMCBxMTAgLTEyIDIwIDAgdDIwIDAiLz4KIDxjaXJjbGUgY3g9IjExNSIgY3k9IjYwIiByPSI3Ii8+CiA8cGF0aCBkPSJNNjAgMTUwIGwwIC0xIi8+CiA8cGF0aCBkPSJNMjggMTkwIEw0OCAxNzAgTDY4IDE5MCBaIi8+CiA8cGF0aCBkPSJNMTcwIDEyMCBxMTAgLTEyIDIwIDAgdDIwIDAiLz4KIDxyZWN0IHg9IjEzMCIgeT0iMTcwIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIzIiB0cmFuc2Zvcm09InJvdGF0ZSgyMCAxMzkgMTc5KSIvPgo8L2c+CjxnIGZpbGw9IiNGMkI2Q0IiIG9wYWNpdHk9IjAuMjEiPgogPHBhdGggZD0iTTk1IDEwNSBsMTYgLTI2IGwxNiAyNiB6Ii8+CiA8Y2lyY2xlIGN4PSIxOTAiIGN5PSI3MCIgcj0iNiIvPgogPHBhdGggZD0iTTYwIDgwIGMtNiAtOCAtMTggLTIgLTE0IDggYzMgNiAxNCAxNCAxNCAxNCBzMTEgLTggMTQgLTE0IGM0IC0xMCAtOCAtMTYgLTE0IC04eiIvPgo8L2c+CjxnIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuMTQiPgogPGVsbGlwc2UgY3g9IjE1MCIgY3k9IjE1MCIgcng9IjciIHJ5PSI5Ii8+PGVsbGlwc2UgY3g9IjE2NCIgY3k9IjE0MCIgcng9IjUiIHJ5PSI3Ii8+PGVsbGlwc2UgY3g9IjEzNiIgY3k9IjE0MCIgcng9IjUiIHJ5PSI3Ii8+CiA8ZWxsaXBzZSBjeD0iMTc1IiBjeT0iMTUzIiByeD0iNCIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSIxMjUiIGN5PSIxNTMiIHJ4PSI0IiByeT0iNS41Ii8+CiA8ZWxsaXBzZSBjeD0iNjAiIGN5PSIxMzAiIHJ4PSI0IiByeT0iNSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjEyMiIgcng9IjMiIHJ5PSI0Ii8+PGVsbGlwc2UgY3g9IjcwIiBjeT0iMTIyIiByeD0iMyIgcnk9IjQiLz4KPC9nPjwvc3ZnPg==")}
/* =====================================================================
   Lateef Pets — identity 2026 on Zid's «نمو» (Growth) theme
   Paste the whole file into the theme's custom CSS box.
   ===================================================================== */

/* ---------- N1. brand tokens (also feeds Namu's own colour variables) ---------- */
html:root{
  --lz-purple:#6F59B8; --lz-purple-d:#5B48A8; --lz-purple-2:#8D74CC; --lz-purple-l:#EEE9F8; --lz-purple-m:#D6CCEF;
  --lz-pink:#F2B6CB; --lz-pink-l:#FBE3EA; --lz-pink-d:#D9829F; --lz-pink-text:#A8416A;
  --lz-mint:#B8DDCF; --lz-mint-l:#E2F1EA; --lz-yellow:#F7E29A; --lz-cream:#FFF8F1;
  --lz-ink:#2F2A4A; --lz-muted:#6B6585; --lz-line:#F0E9F7;
  --lz-hd:'DG Bebo','Tajawal',sans-serif;
  --lz-shadow:0 10px 30px rgba(111,89,184,.10);
  /* Namu */
  --background:#FFF8F1; --foreground:#2F2A4A; --primary:#6F59B8; --primary-foreground:#FFFFFF;
  --secondary:#F4EFFB; --muted:#6B6585; --muted-foreground:#6B6585; --accent:#F2B6CB;
  --border:#E6DFF3; --border-light:#F0E9F7; --input:#D6CCEF; --ring:#6F59B8;
  --success:#4E9C7C; --destructive:#D0506E; --warning:#F5C451;
  --radius:14px;
  --font-family:'Tajawal',sans-serif;
}

/* ---------- N2. base ---------- */
body{background:var(--lz-cream);color:var(--lz-ink);font-family:'Tajawal',sans-serif}
#main .section-products h2,#main .section-categories h2,#main .section-testimonials h2,#main .section-partners h2,
#main .theme-container>h1,#main .theme-container>.flex>h2,#main section h1.text-foreground{font-family:var(--lz-hd);color:var(--lz-purple-d)}
.section-carousel h1,.section-carousel h2,.section-hero h1,.section-call-to-action h2,.section-countdown h2{font-family:var(--lz-hd)}
a:hover{color:var(--lz-purple)}
.lz-hide{display:none!important}
/* our own sections use a centred box like the theme's */
.lz-pc-sec.container,.lz-faq-sec.container,.lz-fr-sec.container,.lz-fr-box.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:16px}
@media (min-width:768px){.lz-pc-sec.container,.lz-faq-sec.container,.lz-fr-sec.container,.lz-fr-box.container{padding-inline:32px}}

/* ---------- N3. buttons ---------- */
.btn{border-radius:999px;font-family:var(--lz-hd);font-weight:700}
.btn-filled{background:var(--lz-purple);border-color:var(--lz-purple);color:#fff}
.btn-filled:hover{background:var(--lz-purple-d);border-color:var(--lz-purple-d);opacity:1}
.btn-outlined{border-color:var(--lz-purple);color:var(--lz-purple)}
.btn-outlined:hover{background:var(--lz-purple);color:#fff;--tw-ring-color:var(--lz-purple)}
.btn-text{color:var(--lz-purple)}
.btn-icon{border-radius:50%}

/* ---------- N4. header ---------- */
header.bg-secondary{background:#fff;border-bottom:0;box-shadow:0 8px 26px -18px rgba(47,42,74,.35)}
header svg.text-foreground,header .text-foreground{color:var(--lz-purple-d)}
header nav ul[class*="lg:flex"]>li>a,header nav ul[class*="lg:flex"]>li button,header .lz-top{position:relative;font-family:var(--lz-hd);font-weight:700;font-size:15.5px;color:var(--lz-purple-d);text-decoration:none!important}
header nav ul[class*="lg:flex"]>li>a::after,header .lz-top::after{content:"";position:absolute;right:50%;left:50%;bottom:0;height:3px;border-radius:3px;background:var(--lz-pink);transition:right .25s,left .25s}
header nav ul[class*="lg:flex"]>li:hover>a::after,header nav ul[class*="lg:flex"]>li:hover .lz-top::after{right:0;left:0}
header .lz-top{display:inline-flex;align-items:center;gap:4px;padding:8px 0}
header .lz-top svg{width:16px;height:16px}
[data-cart-badge]{background:var(--lz-pink)!important;color:var(--lz-purple-d)!important;font-weight:700}
/* theme drop-downs (brands, blog...) */
header el-menu,header el-popover{border:0!important;border-radius:18px!important;box-shadow:0 18px 40px -14px rgba(47,42,74,.28)!important;padding:8px!important}
header el-menu a,header el-popover a,header el-menu button,header el-popover button{border-radius:10px!important;font-size:14px}
header el-menu a:hover,header el-popover a:hover{background:var(--lz-purple-l)!important;color:var(--lz-purple-d)!important}
/* mobile drawer */
#mobile-drawer .bg-background{background:#fff}
#mobile-drawer summary,#mobile-drawer a,#mobile-drawer button{font-size:15px}
#mobile-drawer .flex.w-full.flex-col>details>summary,#mobile-drawer .flex.w-full.flex-col>a{font-family:var(--lz-hd);font-weight:700;color:var(--lz-purple-d)}
#mobile-drawer details[open]>summary{background:var(--lz-purple-l)}
/* search */
#search-dialog el-dialog-panel{background:#fff}

/* ---------- N5. two-step menu panel under the header (built by the JS) ---------- */
header.lz-hdr{position:relative}
.lz-mm-drop{position:absolute;left:0;right:0;top:100%;z-index:60;display:none;padding:0 16px}
.lz-mm-drop.lz-open{display:block}
.lz-mm-card{max-width:1180px;margin:0 auto;background:#fff;border-top:3px solid var(--lz-pink);border-radius:0 0 22px 22px;box-shadow:0 22px 50px rgba(47,42,74,.16);padding:22px 22px 24px;animation:lzFade .18s ease}
@media (max-width:1023px){.lz-mm-drop{display:none!important}}
@media (min-width:992px){
  .lz-mega-feature{border-radius:22px;background:var(--lz-cream) var(--lz-pattern-light) center/220px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;align-self:start}
  .lz-mega-feature svg{width:110px;height:110px}
  .lz-mega-feature b{font-size:19px;font-family:var(--lz-hd);color:var(--lz-purple-d)}
  .lz-mega-feature a{background:var(--lz-purple);color:#fff!important;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:700;font-family:var(--lz-hd)}
}

/* ---------- N6. slider ---------- */
#main>section.section-carousel{width:calc(100% - 32px);max-width:1280px;margin:16px auto 0;border-radius:26px;box-shadow:0 18px 40px -26px rgba(47,42,74,.45)}
@media (max-width:767px){#main>section.section-carousel{width:calc(100% - 24px);margin-top:12px;border-radius:18px}}
/* banner: the picture sets the height (whole design visible on phone and computer, no crop);
   Namu's text/button sit over the picture. Works with CSS only. */
#main>section.section-carousel .embla__slide{min-height:0!important;height:auto!important;display:block!important}
#main>section.section-carousel .embla__slide>div.absolute:first-child{position:relative!important;inset:auto!important;z-index:0!important}
#main>section.section-carousel .embla__slide>div.absolute:first-child img{display:block;width:100%!important;height:auto!important;object-fit:fill!important}
#main>section.section-carousel .embla__slide>div:not(.absolute){position:absolute;inset:0;z-index:1;display:flex;align-items:center}
#main>section.section-carousel .embla__dots{bottom:10px}
/* a slide with a button and no heading/text over it: the button is hidden and the whole picture is the link */
#main>section.section-carousel .embla__slide:not(:has(h2,p,span)) a.btn{position:static!important;opacity:0!important}
#main>section.section-carousel .embla__slide:not(:has(h2,p,span)) a.btn::after{content:"";position:absolute;inset:0;z-index:3}

/* ---------- N7. product card ---------- */
#main>section.section-products{padding-top:28px;padding-bottom:28px}
[data-product-card]{gap:10px!important;padding:10px 10px 14px;background:#fff;border:1.5px solid #F3EEF9;border-radius:22px;box-shadow:0 10px 30px -20px rgba(111,89,184,.45);transition:transform .25s,box-shadow .25s,border-color .25s}
[data-product-card]:hover{transform:translateY(-4px);border-color:var(--lz-pink);box-shadow:0 18px 36px -20px rgba(111,89,184,.55)}
[data-product-card]>a:first-child{aspect-ratio:1/1;border-radius:16px;background:#fff}
[data-product-card]>a:first-child>img{width:100%;height:100%;object-fit:contain;transition:transform .35s}
[data-product-card]:hover>a:first-child>img{transform:scale(1.04)}
[data-product-card] h3{font-size:14px;line-height:1.6;font-weight:500;color:var(--lz-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.2em}
[data-product-card] h3 a:hover{color:var(--lz-purple)}
[data-product-card] p.text-foreground{font-family:var(--lz-hd);font-size:18px;font-weight:700;color:var(--lz-purple)}
[data-product-card] .line-through{color:#767090;font-size:13px}
[data-product-card] .text-success{background:var(--lz-pink-l)!important;color:var(--lz-pink-text)!important;border-radius:999px!important;font-weight:700}
[data-product-card] .btn{height:44px;min-height:0;padding:0 14px;background:var(--lz-purple);border-color:var(--lz-purple);color:#fff;font-size:15px}
[data-product-card] .btn:hover{background:var(--lz-purple-d);border-color:var(--lz-purple-d);color:#fff}
[data-product-card] [data-wishlist-btn]{display:grid!important;place-items:center;flex:none;width:38px!important;height:38px!important;min-width:38px;min-height:38px;padding:0!important;aspect-ratio:1/1;background:#fff!important;border:0!important;border-radius:50%!important;box-shadow:0 6px 14px -8px rgba(47,42,74,.45)}
[data-product-card] [data-wishlist-btn] svg{width:20px!important;height:20px!important;flex:none;color:var(--lz-pink-d)}
[data-product-card] [data-wishlist-btn]:hover{background:var(--lz-pink-l)!important}
@media (max-width:767px){[data-product-card] [data-wishlist-btn]{width:34px!important;height:34px!important;min-width:34px;min-height:34px;bottom:10px!important}[data-product-card] [data-wishlist-btn] svg{width:18px!important;height:18px!important}}
.qty-input{border-radius:999px;border-color:var(--lz-purple-m)}
/* tags on the photo: merchant badge (purple, shine) → bundle offer (pink) → out of stock */
[data-product-card]>a>.absolute.top-4{top:12px;gap:6px;max-width:calc(100% - 24px);align-items:flex-start}
[data-product-card]>a>.absolute.top-4>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:700;line-height:1.5;padding:3px 10px;border-radius:999px}
[data-product-card]>a>.absolute.top-4>span.rounded-full{position:relative;isolation:isolate;background:var(--lz-purple)!important;border-color:var(--lz-purple)!important;color:#fff!important;box-shadow:0 4px 10px rgba(111,89,184,.3)}
[data-product-card]>a>.absolute.top-4>span.rounded-full svg{fill:#fff}
[data-product-card]>a>.absolute.top-4>span.rounded-full::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-150%) skewX(-20deg);animation:lz-shine 3.2s ease-in-out infinite;z-index:-1}
[data-product-card] [data-bundle-offer-product-id]:not(.hidden){background:var(--lz-pink)!important;border-color:var(--lz-pink)!important;color:var(--lz-purple-d)!important;box-shadow:0 4px 10px -4px rgba(217,130,159,.6)}
[data-product-card]>a>.absolute.top-4>.badge-filled{background:var(--lz-ink)!important;color:#fff!important}
@keyframes lz-shine{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(330%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){[data-product-card]>a>.absolute.top-4>span.rounded-full::after{animation:none}}

/* ---------- N8. «صيدة اليوم» ---------- */
#main>section.section-products.lz-deal>.theme-container{position:relative;overflow:hidden;padding:26px 28px 30px;border-radius:32px;background:linear-gradient(135deg,var(--lz-purple) 0%,var(--lz-purple-2) 100%)}
#main>section.section-products.lz-deal>.theme-container::before{content:"";position:absolute;inset:0;background:var(--lz-pattern-purple) center/260px;pointer-events:none}
#main>section.section-products.lz-deal>.theme-container>*{position:relative}
.lz-deal [data-product-card]{border-color:transparent}
.lz-deal [data-product-card]:hover{border-color:var(--lz-yellow)}
/* the yellow «صيدة» tag on each card is gone on purpose: the section title already says it */
.lz-deal .products-embla__progress{background:rgba(255,255,255,.25)}
.lz-deal .products-embla__progress-bar{background:var(--lz-yellow)}
.lz-deal .products-embla__prev,.lz-deal .products-embla__next{background:#fff;color:var(--lz-purple);border-radius:50%}
@media (max-width:767px){#main>section.section-products.lz-deal>.theme-container{padding:18px 12px 22px;border-radius:24px}}

/* ---------- N9. section heads (title + line on the right, «عرض الكل» on the left) ---------- */
#main section .lz-sec-head{margin-bottom:18px}
#main section .lz-sec-head .section-title{font-family:var(--lz-hd)!important}

/* ---------- N10. category tiles → one picture of the category's products (built by the JS) ---------- */
#main .section-categories .embla{--slide-size:176px!important}
@media (min-width:1024px){#main .section-categories .embla{--slide-size:236px!important}}
#main [data-subcategories-carousel] .subcategories-embla{--slide-size:170px!important}
@media (min-width:768px){#main [data-subcategories-carousel] .subcategories-embla{--slide-size:220px!important}}
a.lz-tile{display:flex!important;flex-direction:column;align-items:center;gap:0!important;aspect-ratio:auto!important;overflow:visible!important;background:none!important;text-decoration:none!important}
a.lz-tile.lz-col-on>.lz-tile-img{display:none!important}
a.lz-tile>.lz-tile-name{position:static;backdrop-filter:none}
a.lz-tile h3,a.lz-tile h4{margin-top:12px;padding:0;font-family:var(--lz-hd);font-size:18px;color:var(--lz-purple-d);text-align:center}
a.lz-tile:hover h3,a.lz-tile:hover h4{color:var(--lz-purple)}
a.lz-tile .lz-col{margin-bottom:0}
a.lz-tile:hover .lz-col{transform:translateY(-5px);box-shadow:0 16px 30px -18px rgba(111,89,184,.55);border-color:#D9CEF2}
a.lz-tile:hover .lz-col .lz-p{transform:translateY(-3%) scale(1.03)}
@media (max-width:767px){a.lz-tile h3,a.lz-tile h4{font-size:16px}}

/* ---------- N11. other home sections ---------- */
.section-testimonials article{background:#fff!important;border:1.5px solid #F3EEF9!important;border-radius:22px!important;box-shadow:0 10px 26px -20px rgba(111,89,184,.5);position:relative}
.section-testimonials article::before{content:"\201D";position:absolute;top:6px;left:18px;font:60px/1 Georgia,serif;color:var(--lz-pink-l)}
.section-testimonials article h3{font-family:var(--lz-hd);color:var(--lz-purple-d);font-size:16px}
.text-warning{color:#F5C451}
.embla__progress,.products-embla__progress,.subcategories-embla__progress{background:var(--lz-purple-l)}
.embla__progress-bar,.products-embla__progress-bar,.subcategories-embla__progress-bar{background:var(--lz-purple)}
.section-benefits{background:#fff}
.section-benefits h3{font-family:var(--lz-hd);color:var(--lz-purple-d);font-size:17px}

/* ---------- N12. footer ---------- */
footer#footer{background:var(--lz-purple) var(--lz-pattern-purple) center/220px;color:#fff}
footer#footer .text-foreground,footer#footer a,footer#footer p,footer#footer h3,footer#footer li{color:#fff}
footer#footer h3{font-family:var(--lz-hd);font-size:19px;font-weight:700}
footer#footer a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--lz-pink)}
footer#footer .lz-foot-logo{display:block;height:64px;width:auto;max-width:200px}
footer#footer .flex.gap-3>a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--lz-purple)!important;transition:background .2s,transform .2s}
footer#footer .flex.gap-3>a:hover{background:var(--lz-pink);color:var(--lz-purple-d)!important;transform:translateY(-2px)}
footer#footer .flex.gap-3>a svg{width:20px;height:20px}
footer#footer .theme-container>.border-t{margin:28px -16px -32px;padding:14px 16px;background:#fff;border:0}
footer#footer .theme-container>.border-t,footer#footer .theme-container>.border-t *{color:var(--lz-muted)!important}
@media (min-width:768px){footer#footer .theme-container>.border-t{margin:36px -64px -64px;padding:16px 64px}}
@media (max-width:767px){
  footer#footer .grid{text-align:center}
  footer#footer .lz-foot-logo{margin:0 auto}
  footer#footer .flex.gap-3{justify-content:center}
  footer#footer ul{align-items:center}
  .lz-foot-contact{align-items:center}
}

/* ---------- N13. category page, product page, pages ---------- */
#main>section.relative.flex.items-center.overflow-hidden>.bg-secondary{background:var(--lz-purple-l) var(--lz-pattern-light) center/220px}
/* a category with a picture: the old-identity picture is not shown behind the title - same soft header as the other categories */
body[data-template=category_details] #main>section.relative.flex.items-center.overflow-hidden:has(>.absolute.inset-0>img){min-height:0;padding-top:32px;padding-bottom:32px;background:var(--lz-purple-l) var(--lz-pattern-light) center/220px}
body[data-template=category_details] #main>section.relative.flex.items-center.overflow-hidden>.absolute.inset-0:has(>img){display:none}
#main .theme-container h1.text-foreground{font-family:var(--lz-hd);color:var(--lz-purple-d)}
#products-content .items-center.gap-3>span.text-muted-foreground.text-sm.hidden{display:none!important}
.product-gallery{background:#fff;border-radius:22px}
.product-details-column h1{font-family:var(--lz-hd);font-size:26px;line-height:1.35;color:var(--lz-purple-d)}
[data-product-price]{font-family:var(--lz-hd);color:var(--lz-purple);font-size:24px}
.prose-theme h1,.prose-theme h2,.prose-theme h3{font-family:var(--lz-hd);color:var(--lz-purple-d)}
.prose-theme a{color:var(--lz-purple)}
/* drop-downs opened by hover: no focus ring around the whole list */
header nav el-menu[popover]:focus,header nav el-menu[popover]:focus-visible,header nav el-popover[popover]:focus,header nav el-popover[popover]:focus-visible{outline:0!important}

/* one look for every top menu: brands and «المزيد» use the pet panel too */
header button.lz-top{background:none;border:0;margin:0;cursor:pointer;line-height:inherit}
@media (min-width:992px){
  .lz-mm.lz-mm-flat{grid-template-columns:minmax(0,1fr) 230px}
  .lz-mm-flat .lz-mm-body{padding:4px 0;padding-inline-end:26px}
  .lz-mm-flat .lz-mm-links{max-height:min(46vh,420px);overflow:auto;padding:2px;scrollbar-width:thin}
  .lz-mega-feature img{width:104px!important;height:auto!important;max-width:none}
}

/* FAQ: the link to the store's official page at the end of an answer */
.lz-faq-a a.lz-faq-more{display:inline-block;margin-top:6px;color:var(--lz-purple)!important;font-weight:700;text-decoration:underline!important;text-underline-offset:3px}
.lz-faq-a a.lz-faq-more:hover{color:var(--lz-purple-d)!important}

/* friends banner without the line of text: room between the title and the button */
.lz-fr-banner h3+.lz-fr-cta{margin-top:18px}

/* ---------- 14. loader (every page, ~1s, pure CSS) ---------- */
html::before{content:"";position:fixed;inset:0;z-index:2147483000;background:#FFF8F1 var(--lz-pattern-light) center/220px;animation:lz-ldr-out .3s ease .5s forwards;pointer-events:none}
body::before{content:"";position:fixed;left:50%;top:46%;width:120px;height:126px;margin:-70px 0 0 -60px;background:var(--lz-mark) center/contain no-repeat;z-index:2147483002;animation:lz-ldr-pop .55s cubic-bezier(.2,.9,.3,1.35) both,lz-ldr-beat 1s ease-in-out .55s infinite,lz-ldr-out .3s ease .5s forwards;pointer-events:none;filter:drop-shadow(0 10px 20px rgba(111,89,184,.25))}
body::after{content:"";position:fixed;left:50%;top:46%;width:22px;height:22px;margin:84px 0 0 -75px;border-radius:50%;background:#F2B6CB;box-shadow:32px 0 0 #B8DDCF,64px 0 0 #F7E29A,96px 0 0 #8D74CC,128px 0 0 #F2B6CB;z-index:2147483001;animation:lz-ldr-dots 1s ease-in-out infinite,lz-ldr-out .3s ease .5s forwards;pointer-events:none;opacity:.9}
@keyframes lz-ldr-out{to{opacity:0;visibility:hidden}}
@keyframes lz-ldr-beat{50%{transform:scale(1.08)}}
@keyframes lz-ldr-pop{from{transform:scale(.6);opacity:0}}
@keyframes lz-ldr-dots{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){body::before,body::after,html::before{animation:lz-ldr-out .3s ease .6s forwards}}


/* ---------- 15. moving announcement bar (added by the JS) ---------- */
/* 03 — Moving announcement bar */
.lz-ticker{--tk-bg:#6F59B8;--tk-fg:#fff;--tk-acc:#F2B6CB;overflow:hidden;background:var(--tk-bg);color:var(--tk-fg);height:42px;display:flex;align-items:center;font-size:14.5px;font-weight:700;position:relative;font-family:var(--lz-hd)}
.lz-ticker[data-theme="pink"]{--tk-bg:#F2B6CB;--tk-fg:#5B48A8;--tk-acc:#6F59B8}
.lz-ticker[data-theme="mint"]{--tk-bg:#B8DDCF;--tk-fg:#2F2A4A;--tk-acc:#6F59B8}
.lz-ticker[data-theme="cream"]{--tk-bg:#FFF3E8;--tk-fg:#6F59B8;--tk-acc:#D9829F;border-bottom:1px solid #F3E6DA}
.lz-ticker-track{display:flex;width:max-content;animation:tk-move var(--tk-speed,36s) linear infinite;will-change:transform}
.lz-ticker:hover .lz-ticker-track{animation-play-state:paused}
.lz-ticker-group{display:flex;align-items:center;justify-content:space-around;gap:34px;min-width:100vw;padding-inline-end:34px}
.lz-tk-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.lz-tk-item svg{width:18px;height:18px;color:var(--tk-acc);flex:none}
.lz-tk-sep{width:16px;height:16px;color:var(--tk-acc);opacity:.9;flex:none}
@keyframes tk-move{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (max-width:760px){.lz-ticker{height:38px;font-size:13.5px}.lz-ticker-group{gap:24px;padding-inline-end:24px}}
@media (prefers-reduced-motion:reduce){.lz-ticker-track{animation-duration:90s}}

/* ---------- 16. FAQ section (added by the JS) ---------- */
/* 05 — FAQ accordion */
.lz-faq-wrap{display:grid;grid-template-columns:320px 1fr;gap:26px;align-items:start}
@media (max-width:860px){.lz-faq-wrap{grid-template-columns:1fr}}
.lz-faq-aside{background:#fff;border:2px solid var(--lz-purple-m);border-radius:24px;padding:22px 22px 24px;position:sticky;top:16px;text-align:center}
.lz-faq-aside .lz-fa-img{width:200px;margin:0 auto 6px}
.lz-faq-aside h3{margin:0 0 6px;font-size:22px;color:var(--lz-purple-d)}
.lz-faq-aside p{margin:0 0 16px;color:var(--lz-muted);font-size:14px}
.lz-btn-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;font-weight:700;border-radius:999px;padding:10px 18px;font-size:14px;font-family:var(--lz-hd)}
.lz-btn-wa svg{width:20px;height:20px}
.lz-faq-list{display:flex;flex-direction:column;gap:10px}
.lz-faq-item{border:1.5px solid #F0E9F7;border-radius:16px;background:#fff;transition:border-color .25s,box-shadow .25s}
.lz-faq-item.lz-open{border-color:var(--lz-purple-2);box-shadow:0 10px 26px rgba(111,89,184,.12)}
.lz-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;text-align:right;padding:15px 18px;font-size:17px;font-family:var(--lz-hd);font-weight:700;color:var(--lz-ink)}
.lz-faq-q .lz-pm{width:32px;height:32px;border-radius:50%;background:var(--lz-pink-l);color:var(--lz-pink-d);display:grid;place-items:center;flex:none;transition:transform .3s,background .3s,color .3s}
.lz-faq-q .lz-pm svg{width:14px;height:14px}
.lz-faq-item.lz-open .lz-faq-q .lz-pm{transform:rotate(45deg);background:var(--lz-purple);color:#fff}
.lz-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.lz-faq-item.lz-open .lz-faq-a{grid-template-rows:1fr}
.lz-faq-a>div{overflow:hidden}
.lz-faq-a p{margin:0;padding:0 18px 16px;color:#54506B;font-size:14.5px;line-height:1.95}
.lz-faq-a b{color:var(--lz-purple-d)}
.lz-faq-sec{padding-top:36px;padding-bottom:36px}.lz-faq-sec .lz-sec-title{font-family:var(--lz-hd);font-size:28px;color:var(--lz-purple-d);text-align:center;margin:0}.lz-faq-sec .lz-sec-sub{text-align:center;color:var(--lz-muted);margin:2px 0 22px;font-size:14px}

/* ---------- 17. pet picker popup + side tab (added by the JS) ---------- */
/* 06 — Pet picker popup (once per visitor) + side tab */
.lz-pp-overlay{position:fixed;inset:0;z-index:1000;background:rgba(47,42,74,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lz-pp-overlay.lz-show{opacity:1;visibility:visible}
.lz-pp-card{position:relative;width:min(620px,100%);background:#fff;border-radius:28px;padding:64px 26px 22px;text-align:center;box-shadow:0 30px 80px rgba(47,42,74,.3);transform:translateY(24px) scale(.97);transition:transform .45s cubic-bezier(.2,.9,.3,1.2);overflow:visible}
.lz-pp-card:focus{outline:none}
.lz-pp-overlay.lz-show .lz-pp-card{transform:none}
.lz-pp-card::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;background:var(--lz-cream) var(--lz-pattern-light) center/220px;z-index:0;border-radius:28px 28px 0 0}
.lz-pp-card>*{position:relative}
.lz-pp-peek{position:absolute!important;top:-58px;left:50%;transform:translateX(-50%);width:170px;z-index:3;filter:drop-shadow(0 6px 10px rgba(47,42,74,.15))}
.lz-pp-close{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--lz-purple);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:2}
.lz-pp-close svg{width:14px;height:14px}
.lz-pp-card h2{margin:0;font-size:30px;color:var(--lz-purple-d)}
.lz-pp-card .lz-pp-sub{margin:4px 0 20px;color:var(--lz-muted);font-size:14.5px}
.lz-pp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lz-pp-opt{border:2px solid #F0E9F7;background:#fff;border-radius:20px;padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--lz-hd);font-weight:700;font-size:17px;color:var(--lz-purple-d);transition:transform .25s,border-color .25s,box-shadow .25s}
.lz-pp-opt svg{width:86px;height:86px;transition:transform .35s cubic-bezier(.2,.8,.3,1.4)}
.lz-pp-opt:hover,.lz-pp-opt:focus-visible{border-color:var(--lz-purple-2);transform:translateY(-4px);box-shadow:0 12px 26px rgba(111,89,184,.18);outline:none}
.lz-pp-opt:hover svg{transform:scale(1.08) rotate(-4deg)}
.lz-pp-skip{margin-top:16px;background:none;border:0;color:var(--lz-muted);font-size:13.5px;text-decoration:underline;text-underline-offset:4px}
@media (max-width:560px){
  .lz-pp-overlay{place-items:end center;padding:0}
  .lz-pp-card{border-radius:28px 28px 0 0;padding:56px 16px 18px;transform:translateY(100%)}
  .lz-pp-card::before{border-radius:28px 28px 0 0}
  .lz-pp-peek{width:140px;top:-48px}
  .lz-pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lz-pp-opt svg{width:72px;height:72px}
  .lz-pp-card h2{font-size:25px}
}
/* side tab */
.lz-pp-side{position:fixed;right:0;top:42%;z-index:900;display:flex;align-items:flex-start}
.lz-pp-tab{border:0;background:var(--lz-purple);color:#fff;border-radius:16px 0 0 16px;padding:10px 7px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:-4px 6px 18px rgba(47,42,74,.18);font-family:var(--lz-hd);font-weight:700;font-size:14px}
.lz-pp-tab .lz-pp-tab-ico{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
.lz-pp-tab .lz-pp-tab-ico svg,.lz-pp-tab .lz-pp-tab-ico img{width:34px;height:34px}
.lz-pp-tab span:not(.lz-pp-tab-ico){writing-mode:vertical-rl;letter-spacing:.5px}
.lz-pp-panel{position:fixed;right:0;top:50%;transform:translate(105%,-50%);width:300px;max-height:80vh;overflow:auto;background:#fff;border-radius:22px 0 0 22px;box-shadow:-10px 10px 40px rgba(47,42,74,.2);z-index:950;padding:18px;transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.lz-pp-panel.lz-open{transform:translate(0,-50%)}
.lz-pp-panel h4{margin:0 0 2px;font-size:20px;display:flex;align-items:center;gap:8px;color:var(--lz-purple-d)}
.lz-pp-panel h4 svg{width:38px;height:38px}
.lz-pp-panel .lz-pp-p-sub{color:var(--lz-muted);font-size:12.5px;margin:0 0 12px}
.lz-pp-links{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.lz-pp-links a{display:flex;justify-content:space-between;align-items:center;background:var(--lz-cream);border-radius:12px;padding:9px 12px;font-size:14px;font-weight:700;transition:background .2s,color .2s}
.lz-pp-links a:hover{background:var(--lz-purple-l);color:var(--lz-purple)}
.lz-pp-switch-t{font-size:12.5px;color:var(--lz-muted);margin:0 0 6px}
.lz-pp-switch{display:flex;gap:8px}
.lz-pp-switch button{border:2px solid transparent;background:none;border-radius:50%;padding:0;width:46px;height:46px}
.lz-pp-switch button svg{width:100%;height:100%}
.lz-pp-switch button[aria-current="true"]{border-color:var(--lz-purple)}
.lz-pp-panel-close{position:absolute;top:10px;left:10px;border:0;background:var(--lz-cream);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--lz-purple)}
.lz-pp-panel-close svg{width:12px;height:12px}
@media (max-width:560px){.lz-pp-side{top:auto;bottom:90px}.lz-pp-tab .lz-pp-tab-ico{width:32px;height:32px}.lz-pp-tab span:not(.lz-pp-tab-ico){display:none}}

/* ---------- 18. friends-of-Lateef banner (added by the JS) ---------- */
/* 08 — "أصدقاء لطيف" banner + page */
.lz-fr-banner{position:relative;overflow:hidden;border-radius:28px;background:var(--lz-purple) var(--lz-pattern-purple) center/220px;color:#fff;display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;padding:34px 40px;min-height:260px}
.lz-fr-banner>*{position:relative}
.lz-fr-banner h3{margin:0;font-size:36px;line-height:1.25;display:flex;align-items:center;gap:10px}
.lz-fr-banner h3 img{width:40px}
.lz-fr-banner p{margin:8px 0 18px;font-size:15.5px;opacity:.95;max-width:420px}
.lz-fr-cta{display:inline-flex;align-items:center;gap:8px;background:var(--lz-pink);color:var(--lz-purple-d);font-family:var(--lz-hd);font-weight:700;border-radius:999px;padding:11px 22px;font-size:16px;transition:transform .2s,box-shadow .2s,background .2s;border:0}
.lz-fr-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18);background:#fff}
.lz-fr-cta svg{width:16px;height:16px}
.lz-fr-right{display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px}
.lz-fr-right img{width:150px;justify-self:end}
.lz-fr-quotes{position:relative;height:190px}
.lz-fr-q{position:absolute;inset:0;margin:auto;height:max-content;background:#fff;color:var(--lz-ink);border-radius:20px 20px 4px 20px;padding:16px 18px;box-shadow:0 16px 40px rgba(47,42,74,.25);font-size:15px;line-height:1.8;opacity:0;transform:translateY(14px) rotate(-1.5deg);transition:opacity .6s,transform .6s}
.lz-fr-q.lz-on{opacity:1;transform:rotate(-1.5deg)}
.lz-fr-q b{display:block;margin-top:6px;color:var(--lz-purple);font-size:13px}
@media (max-width:760px){.lz-fr-banner{grid-template-columns:1fr;padding:26px 20px;text-align:center}.lz-fr-banner h3{justify-content:center;font-size:28px}.lz-fr-banner p{margin-inline:auto}.lz-fr-faces{justify-content:center}.lz-fr-right{grid-template-columns:1fr}.lz-fr-right img{display:none}.lz-fr-quotes{height:170px}}
.lz-fr-sec{padding-top:10px;padding-bottom:30px}

/* ---------- 19. pages: Friends of Lateef + Contact (rendered by the JS) ---------- */

.lz-fr-hero{text-align:center;padding:40px 16px 26px;background:var(--lz-cream) var(--lz-pattern-light) center/220px}
.lz-fr-hero .lz-fr-heart{width:190px;margin:0 auto 4px}
.lz-fr-hero h1{margin:0;font-size:42px;color:var(--lz-purple-d)}
.lz-fr-hero p{margin:6px auto 0;max-width:560px;color:#54506B;font-size:15.5px}
.lz-fr-join{margin:10px 0 0;border-radius:24px;background:var(--lz-purple) var(--lz-pattern-purple) center/220px;color:#fff;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.lz-fr-join h3{margin:0;font-size:24px}
.lz-fr-join p{margin:4px 0 0;color:#EDE8F8;font-size:14px}
.lz-fr-join .lz-acts{display:flex;gap:10px;flex-wrap:wrap}
.lz-btn-ghost{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.6);color:#fff;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;font-family:var(--lz-hd)}
.lz-btn-ghost svg{width:18px;height:18px}
/* 13 — Contact page */
.lz-ct-hero{padding:36px 16px 24px;text-align:center;background:var(--lz-cream) var(--lz-pattern-light) center/220px}
.lz-ct-hero img{width:170px;margin:0 auto 4px}
.lz-ct-hero h1{margin:0;font-size:42px;color:var(--lz-purple-d)}
.lz-ct-hero p{margin:6px auto 0;color:#54506B;max-width:520px;font-size:15.5px}
.lz-ct-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.lz-ct-grid>.lz-ct-card{grid-column:span 2}
.lz-ct-grid>.lz-ct-card.lz-half{grid-column:span 3}
.lz-ct-grid>.lz-ct-main{grid-column:1/-1}
@media (max-width:860px){.lz-ct-grid>.lz-ct-card,.lz-ct-grid>.lz-ct-card.lz-half{grid-column:span 3}}
@media (max-width:560px){.lz-ct-grid{grid-template-columns:1fr}.lz-ct-grid>.lz-ct-card,.lz-ct-grid>.lz-ct-card.lz-half{grid-column:auto}}
.lz-ct-card{background:#fff;border:1.5px solid #F0E9F7;border-radius:20px;padding:18px;display:flex;align-items:center;gap:14px;transition:transform .25s,box-shadow .25s,border-color .25s}
.lz-ct-card:hover{transform:translateY(-3px);box-shadow:var(--lz-shadow);border-color:var(--lz-purple-m)}
.lz-ct-ico{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;flex:none}
.lz-ct-ico svg{width:26px;height:26px}
.lz-ct-card b{display:block;font-size:17px;font-family:var(--lz-hd);color:var(--lz-purple-d)}
.lz-ct-card div>span{color:var(--lz-muted);font-size:13.5px;direction:ltr;display:inline-block}
.lz-ct-card .lz-ct-go{margin-inline-start:auto;color:#CFC8E2;width:18px;height:18px;flex:none}
.lz-ct-main{background:var(--lz-purple) var(--lz-pattern-purple) center/220px;border:0;color:#fff;padding:24px}
.lz-ct-main .lz-ct-ico{background:rgba(255,255,255,.2);color:#fff;width:62px;height:62px}
.lz-ct-main b{font-size:22px;color:#fff}
.lz-ct-main div>span{color:#EDE8F8}
.lz-ct-main .lz-ct-btn{margin-inline-start:auto;background:var(--lz-pink);color:var(--lz-purple-d);font-weight:700;border-radius:999px;padding:10px 20px;font-size:15px;white-space:nowrap;font-family:var(--lz-hd)}
@media (max-width:560px){.lz-ct-main{flex-wrap:wrap}.lz-ct-main .lz-ct-btn{margin:0;width:100%;text-align:center}}
.lz-ct-help{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media (max-width:760px){.lz-ct-help{grid-template-columns:1fr}}
.lz-ct-box{border-radius:20px;padding:20px;background:#fff;border:1.5px solid #F0E9F7}
.lz-ct-box h3{margin:0 0 4px;font-size:20px;color:var(--lz-purple-d)}
.lz-ct-box p{margin:0 0 12px;color:#54506B;font-size:14px}
.lz-ct-box .lz-chips{display:flex;flex-wrap:wrap;gap:8px}
.lz-ct-box .lz-chips a{background:var(--lz-cream);border:1px solid var(--lz-line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.lz-ct-box .lz-chips a:hover{border-color:var(--lz-purple-2);color:var(--lz-purple)}
.lz-ct-box.lz-join{background:var(--lz-pink-l);border-color:var(--lz-pink)}
.lz-ct-box.lz-join a.lz-go{display:inline-block;background:var(--lz-purple);color:#fff;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;font-family:var(--lz-hd)}

/* ---------- 20. round 2: logo, pet circles, sub-category collages, deal of the day, photos, two-step menu ---------- */
/* 14 · new logo (swapped in by the JS) */
img.lz-logo{width:auto!important;height:64px!important;max-width:180px!important;object-fit:contain!important}
@media (max-width:767px){img.lz-logo{height:46px!important;max-width:120px!important}}

/* 14 · shop by pet — first design (big pastel circles, name, «تسوّق الآن» on hover) */
.lz-pc-sec{padding-top:34px;padding-bottom:14px}
.lz-center-head{text-align:center;margin-bottom:20px}
.lz-center-head .lz-sec-title{display:inline-flex;align-items:center;gap:10px;margin:0;font-family:var(--lz-hd);font-size:30px;color:var(--lz-purple-d)}
.lz-center-head .lz-sec-title img{width:34px;height:34px}
.lz-center-head .lz-sec-sub{margin:4px 0 0;color:var(--lz-muted);font-size:14px}
.lz-pet-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:980px;margin:0 auto;padding:8px 8px 0}
.lz-pet-cat{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;text-decoration:none!important}
.lz-pet-cat .lz-pc-img{position:relative;width:100%;max-width:210px;aspect-ratio:1;transition:transform .35s cubic-bezier(.2,.8,.3,1.2)}
.lz-pet-cat .lz-pc-img svg{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 14px rgba(111,89,184,.10));transition:filter .35s}
.lz-pet-cat .lz-pc-img::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px dashed var(--lz-purple-2);opacity:0;transition:opacity .35s}
.lz-pet-cat:hover .lz-pc-img{transform:translateY(-6px) scale(1.05) rotate(-3deg)}
.lz-pet-cat:hover .lz-pc-img svg{filter:drop-shadow(0 14px 22px rgba(111,89,184,.22))}
.lz-pet-cat:hover .lz-pc-img::after{opacity:.9;animation:lzSpin 8s linear infinite}
.lz-pet-cat .lz-pc-name{font-family:var(--lz-hd);font-size:24px;font-weight:700;color:var(--lz-purple-d);transition:color .25s}
.lz-pet-cat .lz-pc-go{margin-top:-8px;font-size:13px;font-weight:700;color:var(--lz-pink-text);opacity:0;transform:translateY(-4px);transition:.25s}
.lz-pet-cat:hover .lz-pc-name{color:var(--lz-purple)}
.lz-pet-cat:hover .lz-pc-go{opacity:1;transform:none}
@keyframes lzSpin{to{transform:rotate(360deg)}}
@media (max-width:620px){.lz-pet-cats{gap:10px;padding:4px 0 0}.lz-pet-cat .lz-pc-name{font-size:17px}.lz-pet-cat .lz-pc-go{display:none}.lz-center-head .lz-sec-title{font-size:24px}.lz-center-head .lz-sec-title img{width:28px;height:28px}}

/* 19 · home section heads — first design: title + short line on the right, «عرض الكل» on the left */
.lz-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.lz-sec-tx{min-width:0}
.lz-sec-head .section-title{margin:0!important;padding:0!important;text-align:start!important;font-family:var(--lz-hd)!important;font-size:28px!important;line-height:1.3;color:var(--lz-purple-d)!important}
.lz-sec-head .section-title::before,.lz-sec-head .section-title::after{display:none!important}
.lz-sec-head .lz-sec-sub{margin:2px 0 0;color:var(--lz-muted);font-size:14px}
.lz-more{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 15px;border-radius:999px;background:var(--lz-purple-l);color:var(--lz-purple)!important;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none!important;transition:background .2s,color .2s}
.lz-more svg{width:15px;height:15px}
.lz-more:hover{background:var(--lz-purple);color:#fff!important}
@media (max-width:991px){.slider-container>.lz-sec-head,.container>.lz-sec-head{padding-inline:14px}.lz-deal .container>.lz-sec-head{padding-inline:0}}
@media (max-width:767px){.lz-sec-head{align-items:center;gap:8px;margin-bottom:12px}.lz-sec-head .section-title{font-size:22px!important}.lz-sec-head .lz-sec-sub{font-size:12.5px}.lz-more{padding:6px 11px;font-size:12.5px}}

.lz-ticker a.lz-tk-item,.lz-ticker a.lz-tk-item:hover{color:inherit!important;text-decoration:none!important}
/* 19 · footer — first design: white logo + about, links, full contact info */
.lz-foot-logo{display:block;height:64px;width:auto;max-width:200px}
.lz-foot-contact{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.lz-foot-contact a{display:inline-flex;align-items:center;gap:8px;color:#fff!important;font-size:14px}
.lz-foot-contact svg{width:18px;height:18px;flex:none}
@media (max-width:991px){.lz-foot-logo{margin:0 auto}.lz-foot .footer-about-us-div p{margin-inline:auto}.lz-foot-contact{align-items:center}}

/* 15 · sub-category image = collage of its products */
.lz-col{position:relative;display:block;width:100%;max-width:230px;aspect-ratio:1/1;margin:0 auto 12px;border-radius:28px;overflow:hidden;isolation:isolate;background:#fff;border:1.5px solid #ECE6F6;box-sizing:border-box;transition:transform .25s,box-shadow .25s,border-color .25s}
.lz-col .lz-floor{position:absolute;left:6%;right:6%;top:74%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(47,42,74,.13),rgba(47,42,74,0));z-index:0}
.lz-col .lz-p{position:absolute;inset:0;display:block;z-index:1;transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.lz-col .lz-p img{position:absolute!important;display:block!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;object-fit:fill!important;background:none!important;opacity:0;transition:opacity .35s}
.lz-col .lz-p img.lz-set{opacity:1}
/* waiting tile: plain base + a light band that slides across (moved with transform, so phones do not repaint the tile every frame) */
.lz-col-wait .lz-col::after{content:"";position:absolute;inset:0;border-radius:28px;z-index:5;background:#F6F1FB}
.lz-col-wait .lz-col::before{content:"";position:absolute;inset:0;z-index:6;background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 80%);transform:translateX(-100%);animation:lzShim 1.2s linear infinite;pointer-events:none}
@keyframes lzShim{to{transform:translateX(100%)}}

/* 16 · customer photos + chat screenshots */
.lz-fr-count{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:#fff;border-radius:999px;padding:7px 15px;color:var(--lz-purple-d);font-weight:700;font-size:14px;box-shadow:var(--lz-shadow)}
.lz-fr-count svg{width:17px;height:17px}

/* 17 · deal of the day — its own look, no countdown */
.lz-deal{padding-top:24px!important;padding-bottom:24px!important}
.lz-deal .lz-sec-head{align-items:center;justify-content:flex-start}
.lz-deal .lz-sec-tx{flex:1}
.lz-deal-fire{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--lz-yellow);color:#E8663D;box-shadow:0 0 0 6px rgba(247,226,154,.25);animation:lzFlick 1.8s ease-in-out infinite}
.lz-deal-fire svg{width:30px;height:30px}
.lz-deal .lz-sec-head .section-title{color:#fff!important;font-size:32px!important}
.lz-deal .lz-sec-head .lz-sec-sub{color:#EDE8F8}
.lz-deal .lz-more{background:var(--lz-yellow);color:#3D2E00!important}
.lz-deal .lz-more:hover{background:#fff;color:var(--lz-purple-d)!important}
@keyframes lzFlick{0%,100%{transform:scale(1) rotate(-5deg)}50%{transform:scale(1.08) rotate(5deg)}}
@keyframes lzFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:767px){
  .lz-deal .lz-sec-head{gap:10px}
  .lz-deal .lz-sec-head .section-title{font-size:23px!important}
  .lz-deal-fire{width:42px;height:42px}.lz-deal-fire svg{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){.lz-deal-fire{animation:none}}

/* 18 · two-step desktop menu: main sub-categories first, their items on hover */
@media (min-width:992px){
  .lz-mm{display:grid;grid-template-columns:240px minmax(0,1fr) 230px;min-height:290px}
  .lz-mm-side{display:flex;flex-direction:column;gap:2px;margin:0;padding:0 0 0 14px;padding-inline:0 14px;list-style:none;border-inline-end:1px solid var(--lz-line)}
  .lz-mm-side li{list-style:none;margin:0}
  .lz-mm-side a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:14px;color:var(--lz-ink)!important;font-weight:700;font-size:15px;text-decoration:none!important;transition:background .15s,color .15s}
  .lz-mm-side a svg{width:16px;height:16px;opacity:.4}
  .lz-mm-side a.lz-on{background:var(--lz-purple-l);color:var(--lz-purple-d)!important}
  .lz-mm-side a.lz-on svg{opacity:1}
  .lz-mm-body{padding:4px 28px}
  .lz-mm-pane{display:none}
  .lz-mm-pane.lz-on{display:block}
  .lz-mm-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px dashed var(--lz-line)}
  .lz-mm-ph b{font-family:var(--lz-hd);font-size:25px;color:var(--lz-purple-d)}
  .lz-mm-ph a{display:inline-flex;align-items:center;gap:6px;color:var(--lz-purple)!important;font-weight:700;font-size:14px;text-decoration:none!important}
  .lz-mm-ph a svg{width:16px;height:16px}
  .lz-mm-links{display:flex;flex-wrap:wrap;gap:10px}
  .lz-mm-links a{padding:10px 17px;border:1px solid var(--lz-line);border-radius:999px;background:var(--lz-cream);color:var(--lz-ink)!important;font-size:14px;font-weight:500;text-decoration:none!important;transition:background .15s,border-color .15s,color .15s}
  .lz-mm-links a:hover{background:var(--lz-purple);border-color:var(--lz-purple);color:#fff!important}
  .lz-mm-links a.lz-mm-more{background:#fff;border-style:dashed;color:var(--lz-purple)!important}
  .lz-mm-prods{margin-top:20px}
  .lz-mm-prods>p{margin:0 0 10px;color:var(--lz-muted);font-size:13px;font-weight:700}
  .lz-mm-prods>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .lz-mm-prods a{display:flex;flex-direction:column;gap:6px;color:var(--lz-ink)!important;font-size:12px;line-height:1.4;text-decoration:none!important}
  .lz-mm-prods i{display:block;aspect-ratio:1/1;border:1px solid var(--lz-line);border-radius:16px;background:#fff;overflow:hidden;transition:border-color .2s,transform .2s}
  .lz-mm-prods img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;padding:10%!important;margin:0!important}
  .lz-mm-prods span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lz-mm-prods a:hover i{border-color:var(--lz-pink);transform:translateY(-3px)}
  .lz-mm .lz-mega-feature{grid-row:auto!important;align-self:stretch;justify-content:center}
}

/* 22 · «وش لطيفك؟» side tab a little higher on phones (away from the WhatsApp button) */
@media (max-width:560px){.lz-pp-side{bottom:190px!important;top:auto!important}}
/* 23 · FAQ «ما لقيت جوابك؟» box: stays in place on phones and comes after the questions */
@media (max-width:860px){
  .lz-faq-aside{position:static!important;order:2;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:4px 14px;text-align:start;padding:16px 18px}
  .lz-faq-list{order:1}
  .lz-faq-aside .lz-fa-img{width:96px;margin:0;grid-row:1/4}
  .lz-faq-aside h3{font-size:19px;margin:0}
  .lz-faq-aside p{font-size:13px;margin:0 0 8px}
  .lz-faq-aside .lz-btn-wa{justify-self:start;padding:8px 14px;font-size:13px}
}.lz-page{padding-bottom:30px}.lz-page h1{font-family:var(--lz-hd)}.lz-ct-card small{color:#EDE8F8}.lz-chips a{color:var(--lz-purple-d)!important}.lz-ct-card bdi{unicode-bidi:isolate}

/* ---------- 21. friends of Lateef: one card for photos, clips and words ---------- */
.lz-fx-row{display:flex;justify-content:center;gap:8px;margin:22px 0 20px;padding:2px 2px 6px;overflow-x:auto;scrollbar-width:none}
.lz-fx-row::-webkit-scrollbar{display:none}
.lz-fx{flex:none;display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 16px;border:1.5px solid var(--lz-line);border-radius:999px;background:#fff;color:var(--lz-purple-d);font-family:var(--lz-hd);font-size:15px;line-height:1.2;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.lz-fx small{min-width:22px;padding:2px 7px;border-radius:999px;background:var(--lz-purple-l);color:var(--lz-purple-d);font-family:'Tajawal',sans-serif;font-size:12px;font-weight:700;text-align:center}
.lz-fx:hover{border-color:var(--lz-purple-m)}
.lz-fx.lz-on{background:var(--lz-purple);border-color:var(--lz-purple);color:#fff}
.lz-fx.lz-on small{background:rgba(255,255,255,.22);color:#fff}
.lz-fw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.lz-fc{position:relative;margin:0;aspect-ratio:9/16;border-radius:22px;overflow:hidden;isolation:isolate;background:var(--lz-purple-l);box-shadow:0 14px 30px -20px rgba(47,42,74,.6);transition:transform .25s,box-shadow .25s}
.lz-fc-open{display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;cursor:zoom-in}
.lz-fc img,.lz-fc video{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover;background:var(--lz-purple-l)}
.lz-fc-tag{position:absolute;top:10px;inset-inline-start:10px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.93);color:var(--lz-purple);box-shadow:0 4px 12px rgba(47,42,74,.2);pointer-events:none}
.lz-fc-tag svg{width:15px;height:15px}
.lz-fc-v .lz-fc-tag{color:var(--lz-pink-d)}
.lz-fc-v .lz-fc-tag svg{width:13px;height:13px;margin-inline-start:2px}
@media (hover:hover){.lz-fc:hover{transform:translateY(-4px);box-shadow:0 22px 36px -20px rgba(47,42,74,.65)}}
/* their words: the same card, written on the brand colours */
.lz-fc-t{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 18px 18px;text-align:center;container-type:inline-size}
.lz-fc-t blockquote{margin:0;padding:0;border:0;font-family:'Tajawal',sans-serif;font-weight:700;line-height:1.75;color:inherit}
.lz-fc-t blockquote::before{content:"\201D";display:block;height:.62em;margin:0 0 .3em;font-family:Georgia,'Times New Roman',serif;font-size:3.2em;line-height:1;color:var(--lz-q,var(--lz-pink))}
.lz-fc-s{font-size:clamp(15px,10.4cqi,23px)}
.lz-fc-m{font-size:clamp(13.5px,8.6cqi,19px)}
.lz-fc-l{font-size:clamp(12.5px,7.5cqi,17px)}
.lz-fc-t figcaption{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.55);font-family:var(--lz-hd);font-size:13px;line-height:1}
.lz-fc-t figcaption img{width:16px!important;height:16px!important;object-fit:contain;background:none}
.lz-fc-c0{background:var(--lz-purple) var(--lz-pattern-purple) center/200px;color:#fff;--lz-q:var(--lz-pink)}
.lz-fc-c0 figcaption{background:rgba(255,255,255,.16)}
.lz-fc-c1{background:var(--lz-pink-l);color:var(--lz-ink);--lz-q:var(--lz-pink-d)}
.lz-fc-c2{background:var(--lz-purple-l) var(--lz-pattern-light) center/200px;color:var(--lz-purple-d);--lz-q:var(--lz-purple)}
.lz-fc-c3{background:var(--lz-mint-l);color:#1F5E47;--lz-q:#5FAE8E}
.lz-fw-more{margin:24px 0 6px;text-align:center}
.lz-fw-btn{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 26px;border:2px solid var(--lz-purple);border-radius:999px;background:#fff;color:var(--lz-purple);font-family:var(--lz-hd);font-size:16px;cursor:pointer;transition:background .2s,color .2s}
.lz-fw-btn:hover{background:var(--lz-purple);color:#fff}
.lz-fr-page .lz-fr-join{margin-top:34px}
/* full-screen view: photos and clips, arrows, swipe on phones */
.lz-fl{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:58px 84px 52px;background:rgba(30,24,54,.93);animation:lzFade .2s ease}
.lz-fl-stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.lz-fl-stage img,.lz-fl-stage video{display:block;aspect-ratio:9/16;width:min(100%,calc((100vh - 130px) * 9 / 16))!important;width:min(100%,calc((100dvh - 130px) * 9 / 16))!important;height:auto!important;max-width:100%!important;max-height:none;object-fit:cover;border-radius:18px;background:#1E1836;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.lz-fl button{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:var(--lz-purple-d);cursor:pointer}
.lz-fl button svg{width:22px;height:22px}
.lz-fl-x{top:12px;inset-inline-end:14px}
.lz-fl-p{top:50%;inset-inline-start:18px;transform:translateY(-50%)}
.lz-fl-n{top:50%;inset-inline-end:18px;transform:translateY(-50%)}
.lz-fl-c{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;direction:ltr}
.lz-fl-one .lz-fl-p,.lz-fl-one .lz-fl-n,.lz-fl-one .lz-fl-c{display:none}
@media (max-width:1199px){.lz-fw{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:991px){.lz-fw{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (max-width:767px){
  .lz-fx-row{justify-content:flex-start;margin:16px -16px 14px;padding-inline:16px}
  .lz-fx{padding:7px 13px;font-size:14px}
  .lz-fw{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lz-fc{border-radius:16px}
  .lz-fc-tag{top:8px;inset-inline-start:8px;width:26px;height:26px}
  .lz-fc-tag svg{width:13px;height:13px}
  .lz-fc-t{padding:20px 12px 14px}
  .lz-fc-t figcaption{margin-top:12px;font-size:12px;padding:4px 10px}
  .lz-fl{padding:58px 10px 70px}
  .lz-fl button{width:44px;height:44px}
  .lz-fl-p,.lz-fl-n{top:auto;bottom:12px;transform:none}
  .lz-fl-p{inset-inline-start:calc(50% - 110px)}
  .lz-fl-n{inset-inline-end:calc(50% - 110px)}
  .lz-fl-c{bottom:24px}
}
@media (prefers-reduced-motion:reduce){.lz-fc{transition:none}.lz-fl{animation:none}}
/* a clip before its first picture arrives: the brand mark on lavender */
.lz-fc-v .lz-fc-open{position:relative;background:var(--lz-purple-l)}
.lz-fc-v .lz-fc-open::before{content:"";position:absolute;inset:0;background:var(--lz-mark) center/30% no-repeat;opacity:.28;transition:opacity .3s}
.lz-fc-v.lz-fc-in .lz-fc-open::before{opacity:0}
.lz-fc-v video{position:relative;z-index:1;background:transparent}
.lz-fl-stage video{background:#000}
.lz-fl-err{margin:0;padding:18px 22px;border-radius:16px;background:rgba(255,255,255,.12);color:#fff;font-size:15px}
/* home banner: three of their photos instead of the drawing */
.lz-fr-right .lz-fr-fan{position:relative;display:block;justify-self:end;width:258px;height:236px;flex:none}
.lz-fr-right .lz-fr-fan span{position:absolute;top:8px;width:112px;aspect-ratio:9/16;padding:5px;border-radius:16px;background:#fff;box-shadow:0 18px 30px -16px rgba(20,10,50,.55);transition:transform .35s}
.lz-fr-right .lz-fr-fan span:nth-child(1){right:0;transform:rotate(9deg) translateY(10px);z-index:1}
.lz-fr-right .lz-fr-fan span:nth-child(2){right:73px;transform:rotate(-1deg);z-index:3}
.lz-fr-right .lz-fr-fan span:nth-child(3){right:146px;transform:rotate(-9deg) translateY(12px);z-index:2}
.lz-fr-right .lz-fr-fan img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;border-radius:12px;background:var(--lz-purple-l)}
@media (hover:hover){.lz-fr-right .lz-fr-fan:hover span:nth-child(1){transform:rotate(12deg) translate(8px,6px)}.lz-fr-right .lz-fr-fan:hover span:nth-child(3){transform:rotate(-12deg) translate(-8px,8px)}}
@media (max-width:760px){
  .lz-fr-has-fan .lz-fr-right{display:flex!important;flex-direction:column;align-items:center;gap:6px}
  .lz-fr-right .lz-fr-fan{order:-1;justify-self:center;width:216px;height:184px;margin-top:4px}
  .lz-fr-right .lz-fr-fan span{width:92px;padding:4px;border-radius:13px}
  .lz-fr-right .lz-fr-fan img{border-radius:10px}
  .lz-fr-right .lz-fr-fan span:nth-child(2){right:62px}
  .lz-fr-right .lz-fr-fan span:nth-child(3){right:124px}
  .lz-fr-has-fan .lz-fr-quotes{width:100%}
}

/* ---------- product options drop-down under the card (pairs with the "card options" JS block) ---------- */
.lz-opts{display:grid;gap:6px;margin:0;padding:0}
.lz-opts.lz-pending{min-height:44px}
.lz-sel{display:block;width:100%;height:44px;padding:0 14px;padding-inline-end:38px;border:1.5px solid var(--lz-purple-m);border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236F59B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--lz-ink);font:500 14px/1.4 'Tajawal',sans-serif;appearance:none;-webkit-appearance:none;cursor:pointer;text-overflow:ellipsis;transition:border-color .2s,box-shadow .2s}
html[dir=rtl] .lz-sel{background-position:left 12px center}
.lz-sel:hover{border-color:var(--lz-purple)}
.lz-sel:focus-visible{outline:none;border-color:var(--lz-purple);box-shadow:0 0 0 3px var(--lz-purple-l)}

/* «وش لطيفك؟» side tab: tucked away while scrolling down on phones (the JS adds .lz-away) */
.lz-pp-side{transition:transform .3s ease}
@media (max-width:560px){.lz-pp-side.lz-away{transform:translateX(110%)}.lz-pp-tab{padding:7px 5px 8px;opacity:.95}.lz-pp-tab .lz-pp-tab-ico{width:28px;height:28px}.lz-pp-tab .lz-pp-tab-ico svg,.lz-pp-tab .lz-pp-tab-ico img{width:26px;height:26px}}

/* loader: shown on the first page of a visit only (the JS adds .lz-seen to <html> on the next pages) */
html.lz-seen::before,html.lz-seen body::before,html.lz-seen body::after{display:none!important}

/* ---------- phone polish: product picture, touch targets, lighter home page ---------- */
@media (max-width:767px){
  /* product page: a shorter picture, so the name and price show on the first screen (the theme keeps its bottom bar with the buy button) */
  .product-gallery__slide img{height:min(92vw,380px)!important}
  /* touch targets of at least 44px (the visible size stays the same) */
  [data-product-card] [data-wishlist-btn]::after{content:"";position:absolute;inset:-6px}
  [data-product-card] h3 a{display:block}
  .lz-more{min-height:44px}
  .lz-faq-a a.lz-faq-more{display:inline-flex;align-items:center;min-height:44px;margin-top:0}
  .lz-btn-wa{min-height:44px}
  footer#footer a.text-sm,footer#footer .lz-foot-contact a{display:inline-flex;align-items:center;min-height:44px}
  .lz-tk-item{padding-block:9px}
  .lz-pp-tab{min-width:44px}
  .lz-pp-panel-close::after{content:"";position:absolute;inset:-8px}
}
/* home: the product rows below the first two are drawn only when they come near the screen (about half the layout work) */
#main>section.section-products~section.section-products~section.section-products{content-visibility:auto;contain-intrinsic-size:auto 580px}

/* ---------- smoother sliders on phones ---------- */
/* the blur behind buttons: 370+ of them on the home page (the cards' buttons are white anyway) - the most expensive thing to draw while swiping */
@media (max-width:1023px),(hover:none){
  [data-product-card] *,.embla__prev,.embla__next,.products-embla__prev,.products-embla__next,.subcategories-embla__prev,.subcategories-embla__next{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .embla__prev,.embla__next,.products-embla__prev,.products-embla__next,.subcategories-embla__prev,.subcategories-embla__next{background-color:rgba(255,255,255,.92)}
}
/* touch screens have no hover: no lift / zoom when a finger lands on a card to swipe, and no tap flash */
@media (hover:none){
  [data-product-card]{transition:none;box-shadow:0 6px 14px -10px rgba(111,89,184,.45)}
  [data-product-card]:hover{transform:none;border-color:#F3EEF9;box-shadow:0 6px 14px -10px rgba(111,89,184,.45)}
  [data-product-card]:hover>a:first-child>img{transform:none}
  [data-product-card]>a:first-child>img{transition:none}
  a.lz-tile:hover .lz-col,a.lz-tile:hover .lz-col .lz-p{transform:none}
  [data-product-card] a,[data-product-card] button,a.lz-tile{-webkit-tap-highlight-color:transparent}
}
@media (max-width:767px){
  /* lighter card shadow and no endless shine on the badges */
  [data-product-card]{box-shadow:0 6px 14px -10px rgba(111,89,184,.45)}
  [data-product-card]>a>.absolute.top-4>span.rounded-full::after{animation:none;display:none}
  .lz-deal-fire{animation-iteration-count:3}
}
/* a swipe sideways stays inside the slider (no page navigation / pull gestures from it) */
.embla__viewport,.products-embla__viewport,.subcategories-embla__viewport{overscroll-behavior-x:contain}

/* filters (phone drawer + desktop side): every section stays open with its title - nothing hidden behind an arrow */
#filters-drawer .disclosure-wrapper>input[type=checkbox]+label+div,.filters--sidebar .disclosure-wrapper>input[type=checkbox]+label+div{grid-template-rows:1fr!important}
#filters-drawer .disclosure-wrapper>input[type=checkbox]+label,.filters--sidebar .disclosure-wrapper>input[type=checkbox]+label{pointer-events:none;cursor:default}
#filters-drawer .disclosure-wrapper>input[type=checkbox]+label>svg,.filters--sidebar .disclosure-wrapper>input[type=checkbox]+label>svg{display:none}
#filters-drawer .disclosure-wrapper>input[type=checkbox]+label>span,.filters--sidebar .disclosure-wrapper>input[type=checkbox]+label>span{font-family:var(--lz-hd);font-size:16px;color:var(--lz-purple-d)}


/* ---------- "we have a new look" popup (pairs with the rebrand JS block) ---------- */
.lz-rb{position:fixed;inset:0;margin:auto;width:min(420px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;background:transparent;overflow:visible;color:var(--lz-ink)}
.lz-rb::backdrop{background:rgba(47,42,74,.55);backdrop-filter:blur(2px)}
.lz-rb-card{position:relative;margin-top:84px;padding:96px 24px 24px;border-radius:28px;background-color:#fff;background-image:var(--lz-pattern-light);background-position:center top;background-size:220px;background-repeat:no-repeat;text-align:center;box-shadow:0 30px 70px -20px rgba(47,42,74,.45);animation:lzRbIn .45s cubic-bezier(.2,.9,.3,1.15) both}
.lz-rb-card::before{content:"";position:absolute;inset:0 0 auto;height:130px;border-radius:28px 28px 0 0;background:linear-gradient(180deg,var(--lz-purple-l),rgba(238,233,248,0));z-index:0}
.lz-rb-card>*{position:relative;z-index:1}
.lz-rb-art{position:absolute!important;top:-84px;left:50%;width:168px;transform:translateX(-50%);filter:drop-shadow(0 12px 18px rgba(111,89,184,.25))}
.lz-rb-art img{display:block;width:100%;height:auto;animation:lzRbFloat 3.2s ease-in-out .5s infinite}
.lz-rb-swap{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 12px}
.lz-rb-swap figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.lz-rb-old img{display:block;width:68px;height:68px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 3px #fff,0 6px 14px -6px rgba(47,42,74,.4)}
.lz-rb-new img{display:block;width:138px;height:auto}
.lz-rb-arrow{--lz-dir:1;display:block;width:58px;flex:none;color:var(--lz-purple);animation:lzRbFlow 2.4s ease-in-out .5s infinite both}
html[dir=ltr] .lz-rb-arrow{--lz-dir:-1}
.lz-rb-arrow svg{display:block;width:100%;height:auto;overflow:visible}
html[dir=ltr] .lz-rb-arrow svg{transform:scaleX(-1)}
/* the curve draws itself once, softly, when the popup opens */
/* the whole arrow glides from the old logo to the new one (right to left; left to right on the English site) */
@keyframes lzRbFlow{0%{opacity:0;transform:translateX(calc(10px * var(--lz-dir)))}25%,70%{opacity:1}100%{opacity:0;transform:translateX(calc(-10px * var(--lz-dir)))}}
.lz-rb h2{margin:0 0 8px;font-family:var(--lz-hd);font-size:26px;line-height:1.3;color:var(--lz-purple-d)}
.lz-rb p{margin:0 auto 20px;max-width:320px;font-size:15px;line-height:1.85;color:#54506B}
.lz-rb-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:0;border-radius:999px;background:var(--lz-purple);color:#fff;font:700 17px/1 var(--lz-hd);cursor:pointer;transition:background .2s}
.lz-rb-go:hover{background:var(--lz-purple-d)}
.lz-rb-go:focus-visible,.lz-rb-x:focus-visible{outline:3px solid var(--lz-pink);outline-offset:3px}
.lz-rb-x{position:absolute!important;top:12px;inset-inline-start:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--lz-purple);box-shadow:0 4px 14px -6px rgba(47,42,74,.35);cursor:pointer;z-index:2!important}
.lz-rb-x svg{width:16px;height:16px}
.lz-rb.lz-rb-out .lz-rb-card{animation:lzRbOut .22s ease forwards}
@keyframes lzRbIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lzRbOut{to{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes lzRbFloat{50%{transform:translateY(-6px) rotate(-2deg)}}
@media (max-width:480px){.lz-rb-card{padding:88px 18px 18px;border-radius:24px}.lz-rb-art{width:150px;top:-76px}.lz-rb h2{font-size:23px}.lz-rb p{font-size:14.5px}}
@media (max-width:360px){.lz-rb-old img{width:58px;height:58px}.lz-rb-new img{width:118px}.lz-rb-arrow{width:48px}}
@media (prefers-reduced-motion:reduce){.lz-rb-card,.lz-rb-art img{animation:none}.lz-rb-arrow{animation:none;opacity:1}}


/* ---------- lucky wheel on the home page (pairs with the wheel JS block) ---------- */
html.lz-wheel-on #main>section.section-carousel{display:none!important}
.lz-wh-sec{width:calc(100% - 32px);max-width:1280px;margin:16px auto 0}
.lz-wh-box{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr minmax(0,420px);grid-template-areas:"head stage" "out stage";align-items:center;gap:8px 32px;padding:32px 40px;border-radius:26px;background:var(--lz-purple) var(--lz-pattern-purple) center/220px;color:#fff;box-shadow:0 18px 40px -26px rgba(47,42,74,.6)}
.lz-wh-head{grid-area:head;align-self:end}
.lz-wh-head h2{margin:0;font-family:var(--lz-hd);font-size:34px;line-height:1.25;color:#fff}
.lz-wh-head p{margin:6px 0 0;font-size:15.5px;color:#EDE8F8}
.lz-wh-once{display:block;width:max-content;margin:10px 0 0;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:13px;font-weight:700;color:#fff}
.lz-wh-out{grid-area:out;align-self:start;min-height:20px}
.lz-wh-stage{grid-area:stage;position:relative;width:100%;max-width:420px;aspect-ratio:1;justify-self:center}
.lz-wh-wheel{position:absolute;inset:0;border-radius:50%;background:#fff;padding:8px;box-shadow:0 0 0 6px rgba(255,255,255,.25),0 22px 40px -18px rgba(20,10,50,.65);will-change:transform}
.lz-wh-svg{display:block;width:100%;height:100%}
.lz-wh-tx{font:700 10px 'Tajawal',sans-serif}
.lz-wh-tx.lz-wh-num{font-size:14px;font-weight:800}
.lz-wh-pin{position:absolute;top:-6px;left:50%;z-index:2;width:34px;height:42px;transform:translateX(-50%);background:var(--lz-yellow);clip-path:polygon(50% 100%,0 30%,0 0,100% 0,100% 30%);filter:drop-shadow(0 4px 4px rgba(20,10,50,.35))}
.lz-wh-btn{position:absolute;top:50%;left:50%;z-index:2;display:grid;place-items:center;width:30%;aspect-ratio:1;padding:6px;transform:translate(-50%,-50%);border:5px solid #fff;border-radius:50%;background:var(--lz-purple-d);color:#fff;font:700 15px/1.25 var(--lz-hd);text-align:center;cursor:pointer;box-shadow:0 8px 20px -8px rgba(20,10,50,.6);transition:transform .2s,background .2s}
.lz-wh-btn:not(:disabled):hover{transform:translate(-50%,-50%) scale(1.05)}
/* the glow ring fades in and out on its own layer (animating the shadow itself repaints the button every frame) */
.lz-wh-btn::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 10px rgba(247,226,154,.35);opacity:0;pointer-events:none}
.lz-wh-btn:not(:disabled)::after{animation:lzWhPulse 2s ease-in-out infinite}
.lz-wh-btn:disabled{cursor:default;background:#8D74CC;font-size:12.5px}
.lz-wh-btn:focus-visible,.lz-wh-copy:focus-visible{outline:3px solid var(--lz-yellow);outline-offset:3px}
@keyframes lzWhPulse{50%{opacity:1}}
/* result */
.lz-wh-res{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:420px;padding:18px 20px;border-radius:20px;background:#fff;color:var(--lz-ink);animation:lzWhPop .45s cubic-bezier(.2,.9,.3,1.3) both}
.lz-wh-won{font-size:14px;font-weight:700;color:var(--lz-pink-text,#A8416A)}
.lz-wh-res b{font-family:var(--lz-hd);font-size:26px;line-height:1.2;color:var(--lz-purple-d)}
.lz-wh-note,.lz-wh-use{font-size:13.5px;color:var(--lz-muted)}
.lz-wh-code{display:flex;align-items:stretch;gap:8px;width:100%;margin-top:4px}
.lz-wh-code code{flex:1;display:grid;place-items:center;min-height:46px;padding:0 12px;border:2px dashed var(--lz-purple-m);border-radius:14px;background:var(--lz-purple-l);color:var(--lz-purple-d);font:700 18px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1.5px;direction:ltr}
.lz-wh-copy{flex:none;min-height:46px;padding:0 18px;border:0;border-radius:14px;background:var(--lz-purple);color:#fff;font:700 15px/1 var(--lz-hd);cursor:pointer}
.lz-wh-copy.lz-on{background:#4E9C7C}
.lz-wh-lost b{font-size:22px}
.lz-wh-again b{font-size:22px;color:var(--lz-purple)}
.lz-wh-again span{font-size:14px;color:var(--lz-muted)}
.lz-wh-lost span{font-size:14px;color:var(--lz-muted)}
/* the 50% slice (only reachable by tampering): ask for a screenshot on WhatsApp */
.lz-wh-trap b{font-size:22px;color:var(--lz-purple)}
.lz-wh-trap span{font-size:14px;line-height:1.6;color:var(--lz-muted)}
.lz-wh-wa{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;padding:0 20px;border-radius:999px;background:#25D366;color:#fff!important;font:700 15px/1 var(--lz-hd);text-decoration:none!important}
@keyframes lzWhPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .lz-wh-sec{width:calc(100% - 24px);margin-top:12px}
  .lz-wh-box{grid-template-columns:1fr;grid-template-areas:"head" "stage" "out";gap:16px;padding:22px 16px 20px;border-radius:22px;text-align:center}
  .lz-wh-head h2{font-size:26px}
  .lz-wh-head p{font-size:14px}
  .lz-wh-once{margin:10px auto 0}
  .lz-wh-stage{max-width:320px}
  .lz-wh-res{align-items:center;margin:0 auto;text-align:center}
  .lz-wh-btn{font-size:13.5px;border-width:4px}
}
@media (prefers-reduced-motion:reduce){.lz-wh-btn:not(:disabled),.lz-wh-res{animation:none}}

/* ---------- fixes after the full site check ---------- */
/* product cards: the 5 grey stars of a product nobody has rated yet are hidden (they read as «0 stars») */
[data-product-card] .flex.items-center.gap-2:has(>.flex.gap-0\.5>svg):not(:has(svg:not(.text-muted-foreground))){display:none!important}
/* the WhatsApp tab steps aside while one of our popups or the pets panel is open */
body:has(.lz-pp-overlay.lz-show) .lz-wa-side,body:has(dialog.lz-rb[open]) .lz-wa-side,body:has(.lz-pp-panel.lz-open) .lz-wa-side{opacity:0;pointer-events:none}
/* the page behind «وش لطيفك؟» does not scroll under the finger */
html:has(.lz-pp-overlay.lz-show){overflow:hidden}
.lz-pp-overlay{overscroll-behavior:contain}
@media (max-width:767px){
  /* quick search on the phone: a list of small rows (picture, name, price) instead of one huge picture per screen */
  #search-dialog .overflow-x-auto:has(>a.shrink-0){flex-direction:column;gap:8px;overflow:visible}
  #search-dialog .overflow-x-auto>a.shrink-0{display:flex;align-items:center;gap:12px;width:auto;padding:8px;border-radius:14px;background:#fff}
  #search-dialog .overflow-x-auto>a.shrink-0>.relative{flex:none;width:64px;aspect-ratio:1;border-radius:10px;background:#fff}
  #search-dialog .overflow-x-auto>a.shrink-0>.relative img{object-fit:contain}
  #search-dialog .overflow-x-auto>a.shrink-0>.relative>.absolute{display:none}
  #search-dialog .overflow-x-auto>a.shrink-0>.mt-4{margin-top:0;min-width:0;gap:4px}
  #search-dialog .overflow-x-auto>a.shrink-0 h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #search-dialog .overflow-x-auto>a.shrink-0 p{font-family:var(--lz-hd);color:var(--lz-purple)}
}
/* product page: the gift offer, moved up under «add to cart» and opened by the JS (pairs with the offer JS block) */
.lz-offer{border:2px dashed var(--lz-pink);border-radius:18px;background:var(--lz-pink-l);overflow:hidden}
.lz-offer>button{background:transparent!important;padding:14px 16px;pointer-events:none}
.lz-offer>button>span:last-child{display:none}
.lz-offer>button span.text-sm.font-medium{font-family:var(--lz-hd);font-size:17px;color:var(--lz-purple-d)}
.lz-offer>button p{color:var(--lz-ink);font-size:13.5px}
.lz-offer #bundle-offer-products>div{margin-top:0;padding:0 12px 12px}
.lz-offer [data-product-card]{background:#fff;border-radius:14px;padding:8px}
/* product page, «خيارات المنتج»: a choice with no picture of its own shows no grey placeholder box */
#product-options .size-20:has(>img[src*="placeholder-image"]){display:none}
/* «قد يعجبك أيضًا», moved up under the buy area by the JS */
.lz-related{margin-top:8px}
.lz-related h2{font-family:var(--lz-hd);color:var(--lz-purple-d);font-size:20px}

/* ---------- WhatsApp side tab + «تواصل معنا» panel (pairs with the WhatsApp JS block) ---------- */
/* the theme's round button is not shown any more: its link now lives inside the panel */
#gtm-whatsapp-btn.custom-wa-btn:not(.lz-wa-go){display:none!important}
.lz-wa-side{position:fixed;left:0;top:42%;z-index:900;transition:transform .3s ease,opacity .25s}
.lz-wa-side.lz-hide{transform:translateX(-110%)}
.lz-wa-tab{border:0;background:#25D366;color:#fff;border-radius:0 16px 16px 0;padding:10px 7px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:4px 6px 18px rgba(47,42,74,.18);font-family:var(--lz-hd);font-weight:700;font-size:14px;cursor:pointer}
.lz-wa-ico{width:38px;height:38px;display:grid;place-items:center}
.lz-wa-ico svg{width:28px;height:28px;display:block}
.lz-wa-txt{writing-mode:vertical-rl;letter-spacing:.5px}
.lz-wa-tab:focus-visible,.lz-wa-go:focus-visible,.lz-wa-close:focus-visible{outline:3px solid var(--lz-yellow);outline-offset:3px}
.lz-wa-panel{position:fixed;left:0;top:50%;transform:translate(-105%,-50%);width:290px;max-width:calc(100vw - 24px);background:#fff;border-radius:0 22px 22px 0;box-shadow:10px 10px 40px rgba(47,42,74,.2);z-index:950;padding:20px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.lz-wa-panel.lz-open{transform:translate(0,-50%)}
.lz-wa-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:var(--lz-purple-l);color:var(--lz-purple-d);display:grid;place-items:center;cursor:pointer}
.lz-wa-cat{width:84px;height:84px;object-fit:contain}
.lz-wa-title{font-family:var(--lz-hd);font-size:20px;color:var(--lz-purple-d)}
.lz-wa-sub{font-size:13.5px;line-height:1.6;color:var(--lz-muted);margin:0 0 6px}
.lz-wa-panel #gtm-whatsapp-btn.lz-wa-go{position:static!important;inset:auto!important;width:100%!important;height:auto!important;min-height:48px;padding:0 18px;border-radius:14px!important;background:#25D366!important;color:#fff!important;display:flex!important;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--lz-hd);text-decoration:none;box-shadow:none!important;animation:none!important;transform:none!important}
.lz-wa-go svg{width:22px!important;height:22px!important;margin:0!important}
@media (max-width:560px){
  /* same height as the pets tab on the other side, icon only */
  .lz-wa-side{top:auto;bottom:190px}
  .lz-wa-tab{padding:7px 5px 8px}
  .lz-wa-ico{width:28px;height:28px}
  .lz-wa-ico svg{width:24px;height:24px}
  .lz-wa-txt{display:none}
  .lz-wa-side.lz-away{transform:translateX(-110%)}
}
@media (prefers-reduced-motion:reduce){.lz-wa-side,.lz-wa-panel{transition:none}}

/* ---------- pink «free gift» tag (pairs with the tags JS block): under the picture on cards, beside the merchant tags on the product page ---------- */
[data-bundle-offer-product-id] svg{display:none!important}
.lz-tagrow{display:flex;margin-bottom:-2px}
/* cards: purple merchant tags under the picture; the pink gift tag stays on the picture, bold like the purple one */
.lz-tagrow{flex-wrap:wrap;gap:6px}
.lz-tagrow>span.rounded-full{display:inline-flex;align-items:center;width:auto;max-width:100%;padding:4px 12px;border-radius:999px;background:var(--lz-purple)!important;border-color:var(--lz-purple)!important;color:#fff!important;font:700 12px/1.4 'Tajawal',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-product-card]>a>.absolute.top-4>[data-bundle-offer-product-id]{font-weight:800}
.lz-tagrow>[data-bundle-offer-product-id].hidden,.lz-tagrow:not(:has(>:not(.hidden))){display:none!important}
.lz-tagrow>[data-bundle-offer-product-id],#product-badges>[data-bundle-offer-product-id]:not(.hidden){display:inline-flex;align-items:center;width:auto;max-width:100%;height:auto;min-height:0;padding:4px 12px;border:0!important;border-radius:999px;background:var(--lz-pink)!important;color:var(--lz-purple-d)!important;font:800 12px/1.4 'Tajawal',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none!important}
#product-badges>span.rounded-full{background:var(--lz-purple)!important;border-color:var(--lz-purple)!important;color:#fff!important;font:700 12px/1.4 'Tajawal',sans-serif;padding:4px 12px}

/* ---------- speed: lighter home page ---------- */
/* Namu sends 24 products in every home product row and has no setting for it: only the first 10 are drawn,
   the rest are skipped (their pictures never load). «عرض الكل» opens the full list. */
body[data-template=home] #main>section.section-products .products-embla__slide:nth-child(n+11){display:none}
/* the moving announcement bar (JS) replaces Namu's bar: same height from the start, so the page does not jump down */
[data-announcement-bar]{height:42px;overflow:hidden}
@media (max-width:760px){[data-announcement-bar]{height:38px}}