/* Home page: modern hero slider + «تسوّق حسب القسم» rail. Loaded on the theme-built home page only (Sz_Home::assets).
   Everything is driven by data-attributes the template prints from the dashboard options, so a new choice never needs new CSS. */

/* ======================================================================================================== hero */
.hero-carousel[data-sz-hero]{--hero-ease:cubic-bezier(.22,.8,.3,1);--bar:17,17,17;--sc-dir:90deg;--sa:0%;position:relative;margin-bottom:0}
html[dir=rtl] .hero-carousel[data-sz-hero]{--sc-dir:270deg}
.hero-carousel[data-tone=dark]{--bar:255,255,255}
.hero-carousel[data-scrim=soft]{--sa:80%}
.hero-carousel[data-scrim=strong]{--sa:95%}

/* the track holds every slide: stacked for the cross-fade, a snapping row for the slide effect (no layout shift either way) */
.hero-track{position:relative;display:grid;min-width:0;touch-action:pan-y}
.hero-track>.hero-slide{grid-area:1/1;min-width:0}
.hero-carousel[data-effect=fade] .hero-slide{opacity:0;pointer-events:none;z-index:0;transition:opacity .9s ease}
.hero-carousel[data-effect=fade] .hero-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hero-carousel[data-effect=slide] .hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:auto}
.hero-carousel[data-effect=slide] .hero-track::-webkit-scrollbar{display:none}
.hero-carousel[data-effect=slide] .hero-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
.hero-carousel[data-sz-hero] .campaign-slide::before{display:none}

/* the whole banner is one big tap target, the button and the arrows stay above it */
.hero-hit{position:absolute;inset:0;z-index:1}
.hero-carousel[data-sz-hero] .hero-copy{z-index:2}

/* a wash of the banner's own colour behind the words (white-on-dark banners get a dark wash) */
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
	background:linear-gradient(var(--sc-dir),var(--slide-bg) 0%,var(--slide-bg) 0%,transparent 72%);
	background:linear-gradient(var(--sc-dir),color-mix(in srgb,var(--slide-bg) var(--sa),transparent) 0%,color-mix(in srgb,var(--slide-bg) calc(var(--sa) * .72),transparent) 36%,transparent 74%)}
.hero-carousel[data-scrim=off] .hero-scrim{display:none}
.hero-slide[data-tone=dark] .hero-scrim{background:linear-gradient(var(--sc-dir),rgba(10,10,12,.62),rgba(10,10,12,.34) 42%,transparent 78%)}
.hero-carousel[data-scrim=strong] .hero-slide[data-tone=dark] .hero-scrim{background:linear-gradient(var(--sc-dir),rgba(10,10,12,.82),rgba(10,10,12,.5) 44%,transparent 80%)}
.hero-slide[data-tone=dark] .hero-copy,.hero-slide[data-tone=dark] .hero-copy h2{color:#fff}
.hero-slide[data-tone=dark] .hero-copy p{color:#ffffffe6}
.hero-slide[data-tone=dark] .hero-copy .eyebrow{color:#fff}
.hero-slide[data-tone=dark] .hero-copy .eyebrow>span{background:#fff}
.hero-slide[data-tone=dark] .hero-copy .button{background:#fff;border-color:#fff;color:#111}

/* words */
.hero-carousel[data-sz-hero] .hero-copy h2{letter-spacing:0;text-wrap:balance}
.hero-carousel[data-sz-hero] .hero-copy .button{border-radius:999px;min-height:44px;padding-inline:20px;gap:9px;box-shadow:0 8px 20px #0000001f;transition:transform .2s var(--hero-ease),box-shadow .2s}
.hero-carousel[data-sz-hero] .hero-copy .button .icon{transition:transform .25s var(--hero-ease)}
@media(hover:hover){.hero-carousel[data-sz-hero] .hero-copy .button:hover .icon{transform:translateX(-4px)}html:not([dir=rtl]) .hero-carousel[data-sz-hero] .hero-copy .button:hover .icon{transform:translateX(4px)}}
.hero-carousel[data-sz-hero] .hero-copy .button:active{transform:scale(.96)}

/* motion: a slow settle on the visible photo and a staggered rise of the words */
@keyframes sz-hero-zoom{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes sz-hero-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-carousel[data-zoom="1"] .hero-slide.is-active .campaign-photo img{transform-origin:60% 50%;animation:sz-hero-zoom calc(var(--hero-t) + 4s) cubic-bezier(.2,.6,.3,1) both}
.hero-slide.is-active .hero-copy>*{animation:sz-hero-rise .75s var(--hero-ease) both}
.hero-slide.is-active .hero-copy>:nth-child(2){animation-delay:.08s}
.hero-slide.is-active .hero-copy>:nth-child(3){animation-delay:.16s}
.hero-slide.is-active .hero-copy>:nth-child(4){animation-delay:.24s}

/* progress bars (or dots) */
.hero-carousel .carousel-footer{position:absolute;inset:auto 0 14px 0;z-index:4;display:flex;justify-content:center;align-items:center;gap:12px;margin:0;padding:0;background:none;pointer-events:none}
.hero-carousel .carousel-dots{display:flex;gap:6px;pointer-events:auto}
.hero-carousel[data-sz-hero] .carousel-dots button{position:relative;width:24px;height:4px;padding:0;border:0;border-radius:4px;background:rgba(var(--bar),.28);transition:background-color .3s}
.hero-carousel[data-sz-hero] .carousel-dots button i{position:absolute;inset:0;border-radius:inherit;background:rgb(var(--bar));transform:scaleX(var(--p,0));transform-origin:100% 50%;transition:transform .08s linear}
html:not([dir=rtl]) .hero-carousel .carousel-dots button i{transform-origin:0 50%}
.hero-carousel[data-sz-hero] .carousel-dots button.active{width:24px;height:4px;background:rgba(var(--bar),.28)}
.hero-carousel[data-progress=dots] .carousel-dots button{width:8px;height:8px;border-radius:50%}
.hero-carousel[data-progress=dots] .carousel-dots button.active{width:24px;height:8px;border-radius:8px}
.hero-carousel .carousel-control{pointer-events:auto;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;color:rgb(var(--bar));
	background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-carousel[data-tone=dark] .carousel-control{background:rgba(0,0,0,.3)}

/* ---- phone / tablet square banner: its shape is a dashboard option ---- */
@media(max-width:999px){
	.home-visual{aspect-ratio:var(--hero-ratio,1)}
	.home-visual #hero-slot,.home-visual .hero-carousel,.home-visual .hero-track,.home-visual .campaign-slide{aspect-ratio:auto;height:100%}
	/* the words sit on a baseline above the progress bars, so a long title grows upward and never meets them */
	.home-visual .hero-copy{top:auto;bottom:54px;transform:none;max-width:66%}
}
.home-visual .hero-track{height:100%}
.home-visual .hero-copy{z-index:2}

/* ---- logo + menu + cart over the banner: stay transparent, stay readable on bright and on dark banners ---- */
/* 0.9.6: no gradient scrim behind the logo, the banner is shown as it is */
.visual-overlay::before{content:none!important}
.visual-overlay>.icon-btn{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);box-shadow:0 4px 14px rgba(0,0,0,.12);transition:background-color .4s,color .4s,transform .15s}
.home-visual[data-tone=dark] .visual-overlay>.icon-btn{background:rgba(0,0,0,.32);color:#fff}
.visual-logo .brand img{filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
.home-visual[data-tone=dark] .visual-logo .brand img{filter:none!important;mix-blend-mode:normal!important}

/* ---- arrows: tablets and desktops only (phones swipe) ---- */
.visual-arrows{display:none}
@media(min-width:700px){
	.visual-arrows{display:flex;left:16px;right:16px}
	.visual-arrows button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.6);color:#111;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
		box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:0;transition:opacity .25s,transform .15s var(--hero-ease)}
	.home-visual:hover .visual-arrows button,.visual-arrows button:focus-visible{opacity:1}
	.home-visual[data-tone=dark] .visual-arrows button{background:rgba(0,0,0,.4);color:#fff}
	.hero-carousel .carousel-dots button{width:34px}
	.hero-carousel[data-progress=dots] .carousel-dots button{width:8px}
	.hero-carousel .carousel-footer{bottom:18px}
}
@media(hover:none){.visual-arrows button{opacity:1}}

/* desktop banner: the photo fades into the banner colour instead of ending on a hard edge */
@media(min-width:1000px){
	.home-visual .campaign-photo{-webkit-mask-image:linear-gradient(var(--sc-dir),transparent 0,#000 26%);mask-image:linear-gradient(var(--sc-dir),transparent 0,#000 26%)}
	.hero-carousel[data-sz-hero] .hero-copy h2{font-size:clamp(30px,3.1vw,44px)}
}

/* ======================================================================================================== categories */
:is(#section-categories,.sz-el-cats){--cat-art:76px;--cat-gap:14px;--cat-w:calc(var(--cat-art) + 10px)}
:is(#section-categories,.sz-el-cats)[data-size=sm]{--cat-art:64px}
:is(#section-categories,.sz-el-cats)[data-size=lg]{--cat-art:92px}
:is(#section-categories,.sz-el-cats) .category-carousel{position:relative;padding:0}
:is(#section-categories,.sz-el-cats) .category-strip{display:flex;gap:var(--cat-gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:12px 0 10px;-webkit-overflow-scrolling:touch}
:is(#section-categories,.sz-el-cats) .category-strip::-webkit-scrollbar{display:none}
:is(#section-categories,.sz-el-cats)[data-motion=drift] .category-strip,:is(#section-categories,.sz-el-cats) .category-carousel.is-fit .category-strip{scroll-snap-type:none}
:is(#section-categories,.sz-el-cats) .category-carousel.is-fit .category-strip{justify-content:center}
:is(#section-categories,.sz-el-cats) .category-carousel.is-loop .category-strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
:is(#section-categories,.sz-el-cats) .category-card{position:relative;display:flex!important;flex:0 0 var(--cat-w);flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:none;padding-top:6px;scroll-snap-align:center;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:is(#section-categories,.sz-el-cats) .category-art{position:relative;overflow:hidden;display:grid;place-items:center;width:var(--cat-art);height:auto;max-width:100%;aspect-ratio:1;border-radius:50%;background:var(--bg);border:1px solid #efe9e2;
	transition:transform .3s cubic-bezier(.22,.8,.3,1),box-shadow .3s,background-color .25s}
:is(#section-categories,.sz-el-cats) .category-art>.icon{width:44%;height:44%;transition:transform .3s cubic-bezier(.22,.8,.3,1)}
:is(#section-categories,.sz-el-cats) .category-art img,:is(#section-categories,.sz-el-cats) .category-custom-image{width:100%;height:100%;object-fit:contain;transition:transform .35s cubic-bezier(.22,.8,.3,1);pointer-events:none}
:is(#section-categories,.sz-el-cats) .category-card>span{max-width:100%;font-size:12.5px;font-weight:600;line-height:1.6;text-align:center;transition:color .2s;text-wrap:balance}
:is(#section-categories,.sz-el-cats) .category-count{font-size:11px;font-weight:500;color:var(--muted);line-height:1.5;margin-top:-6px}

/* highlight: phones centre-mark the middle tile, pointers hover; the ring is a box-shadow so it follows every shape */
:is(#section-categories,.sz-el-cats) .category-card:focus-visible .category-art,
:is(#section-categories,.sz-el-cats) .category-card.is-active .category-art{background:var(--pal-soft,var(--accent))!important;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--pal-accent,var(--primary));transform:scale(1.07)}
:is(#section-categories,.sz-el-cats) .category-card:focus-visible{outline:0}
:is(#section-categories,.sz-el-cats) .category-card:focus-visible>span,:is(#section-categories,.sz-el-cats) .category-card.is-active>span{color:#b45309;color:color-mix(in srgb,var(--pal-accent,var(--primary)) 66%,#000)}
@media(hover:hover){
	:is(#section-categories,.sz-el-cats) .category-card:hover .category-art{background:var(--pal-soft,var(--accent))!important;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--pal-accent,var(--primary));transform:translateY(-4px) scale(1.04)}
	:is(#section-categories,.sz-el-cats) .category-card:hover .category-art>.icon,:is(#section-categories,.sz-el-cats) .category-card:hover .category-custom-image{transform:scale(1.1)}
	:is(#section-categories,.sz-el-cats) .category-card:hover>span{color:#b45309;color:color-mix(in srgb,var(--pal-accent,var(--primary)) 66%,#000)}
}
:is(#section-categories,.sz-el-cats) .category-card:active .category-art{transform:scale(.95)}

/* shape: rounded squares */
:is(#section-categories,.sz-el-cats)[data-style=squircle] .category-art{border-radius:30%!important;border-color:color-mix(in srgb,var(--pal-accent,var(--primary)) 14%,#fff);background:linear-gradient(150deg,var(--pal-soft,var(--accent)),var(--surface))!important;box-shadow:0 8px 20px rgba(17,17,17,.07)}
:is(#section-categories,.sz-el-cats)[data-style=squircle] .category-art img,:is(#section-categories,.sz-el-cats)[data-style=squircle] .category-custom-image{width:72%;height:72%}

/* shape: cards (image + name + product count) */
:is(#section-categories,.sz-el-cats)[data-style=card]{--cat-w:132px}
:is(#section-categories,.sz-el-cats)[data-style=card][data-size=sm]{--cat-w:112px}
:is(#section-categories,.sz-el-cats)[data-style=card][data-size=lg]{--cat-w:156px}
:is(#section-categories,.sz-el-cats)[data-style=card] .category-card{padding:10px 10px 14px;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 22px rgba(17,17,17,.05);
	transition:transform .3s cubic-bezier(.22,.8,.3,1),box-shadow .3s,border-color .2s}
:is(#section-categories,.sz-el-cats)[data-style=card] .category-art{width:100%;border-radius:16px!important;border:0;background:linear-gradient(150deg,var(--pal-soft,var(--accent)),var(--bg))!important}
:is(#section-categories,.sz-el-cats)[data-style=card] .category-art img,:is(#section-categories,.sz-el-cats)[data-style=card] .category-custom-image{width:66%;height:66%}
:is(#section-categories,.sz-el-cats)[data-style=card] .category-card.is-active,:is(#section-categories,.sz-el-cats)[data-style=card] .category-card:focus-visible{border-color:var(--pal-accent,var(--primary));box-shadow:0 12px 28px rgba(17,17,17,.1)}
:is(#section-categories,.sz-el-cats)[data-style=card] .category-card.is-active .category-art,:is(#section-categories,.sz-el-cats)[data-style=card] .category-card:focus-visible .category-art{box-shadow:none;transform:none}
:is(#section-categories,.sz-el-cats)[data-style=card] .category-card.is-active .category-custom-image{transform:scale(1.08)}
@media(hover:hover){
	:is(#section-categories,.sz-el-cats)[data-style=card] .category-card:hover{transform:translateY(-5px);border-color:var(--pal-accent,var(--primary));box-shadow:0 14px 30px rgba(17,17,17,.12)}
	:is(#section-categories,.sz-el-cats)[data-style=card] .category-card:hover .category-art{transform:none;box-shadow:none}
}

/* arrows (tablet/desktop) and the pause control */
:is(#section-categories,.sz-el-cats) .category-arrow{display:none;position:absolute;top:calc(50% - 30px);z-index:3;width:44px;height:44px;padding:0;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 8px 22px #0000001a}
:is(#section-categories,.sz-el-cats)[data-style=card] .category-arrow{top:calc(50% - 22px)}
:is(#section-categories,.sz-el-cats) .category-arrow .icon{width:20px;height:20px}
:is(#section-categories,.sz-el-cats) .category-arrow-prev{inset-inline-start:-14px;inset-inline-end:auto}
:is(#section-categories,.sz-el-cats) .category-arrow-next{inset-inline-end:-14px;inset-inline-start:auto}
html:not([dir=rtl]) :is(#section-categories,.sz-el-cats) .category-arrow .icon{transform:scaleX(-1)}
:is(#section-categories,.sz-el-cats) .category-arrow:hover{background:var(--pal-accent,var(--primary));border-color:var(--pal-accent,var(--primary));color:var(--on-primary,#181818)}
:is(#section-categories,.sz-el-cats) .category-arrow:focus-visible,:is(#section-categories,.sz-el-cats) .category-pause:focus-visible{outline:2px solid var(--pal-accent,var(--primary));outline-offset:3px}
:is(#section-categories,.sz-el-cats) .category-pause{position:relative;display:grid;place-items:center;width:34px;height:34px;margin-inline-start:8px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
:is(#section-categories,.sz-el-cats) .category-pause::before{content:"";position:absolute;inset:50% auto auto 50%;width:44px;height:44px;transform:translate(-50%,-50%)}
:is(#section-categories,.sz-el-cats) .category-pause .icon{width:14px;height:14px}

/* tablets: 5 across; desktops: 7 across (fewer for large, more for small) */
@media(min-width:700px){
	:is(#section-categories,.sz-el-cats){--cat-gap:18px;--cat-n:5;--cat-art:min(100%,104px)}
	:is(#section-categories,.sz-el-cats)[data-size=sm]{--cat-n:7;--cat-art:min(100%,84px)}
	:is(#section-categories,.sz-el-cats)[data-size=lg]{--cat-n:4;--cat-art:min(100%,124px)}
	:is(#section-categories,.sz-el-cats):not([data-style=card]){--cat-w:calc((100% - (var(--cat-n) - 1) * var(--cat-gap)) / var(--cat-n))}
	:is(#section-categories,.sz-el-cats)[data-style=card]{--cat-w:calc((100% - (var(--cat-n) - 2) * var(--cat-gap)) / (var(--cat-n) - 1))}
	:is(#section-categories,.sz-el-cats)[data-arrows="1"] .category-carousel.is-loop .category-arrow{display:grid}
	:is(#section-categories,.sz-el-cats) .category-card>span{font-size:13.5px}
	:is(#section-categories,.sz-el-cats) .category-carousel.is-loop .category-strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
}
@media(min-width:1000px){
	:is(#section-categories,.sz-el-cats){--cat-gap:22px;--cat-n:7;--cat-art:min(100%,128px)}
	:is(#section-categories,.sz-el-cats)[data-size=sm]{--cat-n:9;--cat-art:min(100%,104px)}
	:is(#section-categories,.sz-el-cats)[data-size=lg]{--cat-n:5;--cat-art:min(100%,150px)}
	:is(#section-categories,.sz-el-cats) .category-card{scroll-snap-align:start;gap:14px}
	:is(#section-categories,.sz-el-cats) .category-card>span{font-size:14.5px}
}
@media(max-width:699px){:is(#section-categories,.sz-el-cats) .category-carousel{margin-inline:-20px}:is(#section-categories,.sz-el-cats) .category-strip{padding-inline:20px}}

/* ======================================================================================================== custom blocks (written in the dashboard) */
.home-block{--bn-bg:#f4ede5}
.home-block--spacer{display:block;width:100%}
.home-block.is-center{text-align:center}
.home-block-title{margin:0 0 8px;font-size:clamp(20px,5vw,28px);line-height:1.5;font-weight:700;text-wrap:balance}
.home-block-text{margin:0;font-size:14.5px;line-height:2;color:var(--muted)}
.home-block-heading{padding:22px 20px;border-radius:var(--radius,24px);background:var(--bn-bg)}
.home-block.is-center .home-block-heading{display:grid;justify-items:center}
.home-block.is-dark .home-block-heading{color:#fff}
.home-block.is-dark .home-block-text{color:#ffffffe0}
.home-block-heading .home-block-btn,.home-block-actions .home-block-btn{margin-top:16px;border-radius:999px;min-height:44px;padding-inline:22px}
.home-block-actions{display:flex;justify-content:flex-start}
.home-block.is-center .home-block-actions{justify-content:center}
.home-block-actions .home-block-btn{margin-top:0}
.home-block-figure{margin:0}
.home-block-figure img{display:block;width:100%;height:auto;border-radius:var(--radius,24px)}
.home-block-figure figcaption{margin-top:8px;font-size:13px;color:var(--muted);text-align:center}
.home-block-rich{font-size:15px;line-height:2}
.home-block-rich img{max-width:100%;height:auto;border-radius:16px}
.home-block-rich h2,.home-block-rich h3{margin:18px 0 8px}
.home-block-video{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius,24px);background:#000}
.home-block-video iframe,.home-block-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.home-block-video.is-v{aspect-ratio:9/16;width:min(100%,calc(85vh * 9 / 16));max-height:85vh;margin-inline:auto}
.home-block-video+.home-block-text{margin-top:10px}
.home-banner{position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--bn-h,220px);padding:24px 20px;overflow:hidden;border-radius:var(--radius,24px);background:var(--bn-bg);color:var(--ink);transition:transform .3s cubic-bezier(.22,.8,.3,1),box-shadow .3s}
.home-banner-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.home-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--bn-bg) 86%,transparent),transparent 72%)}
html[dir=rtl] .home-banner::before{background:linear-gradient(270deg,color-mix(in srgb,var(--bn-bg) 86%,transparent),transparent 72%)}
.home-block.is-dark .home-banner{color:#fff}
.home-block.is-dark .home-banner::before{background:linear-gradient(90deg,rgba(8,8,10,.6),transparent 74%)}
html[dir=rtl] .home-block.is-dark .home-banner::before{background:linear-gradient(270deg,rgba(8,8,10,.6),transparent 74%)}
.home-block.is-center .home-banner{justify-content:center;text-align:center}
.home-banner-copy{display:grid;gap:6px;max-width:min(520px,70%)}
.home-banner-copy b{font-size:clamp(20px,4.6vw,30px);line-height:1.5;font-weight:700}
.home-banner-copy>span{font-size:14px;line-height:1.9;opacity:.9}
.home-banner-copy em{justify-self:start;margin-top:10px;border-radius:999px;min-height:42px;padding-inline:20px;font-style:normal}
.home-block.is-center .home-banner-copy em{justify-self:center}
.home-block.is-dark .home-banner-copy em{background:#fff;color:#111;border-color:#fff}
a.home-banner:active{transform:scale(.99)}
@media(hover:hover){a.home-banner:hover{box-shadow:0 14px 34px rgba(17,17,17,.14)}a.home-banner:hover .home-banner-img{transform:scale(1.04)}}
@media(min-width:1000px){.home-banner{min-height:var(--bn-h,260px);padding:32px 48px}.home-block-heading{padding:34px 48px}}
.home-block.home-section{margin-top:26px}
.home-block+:is(#section-categories,.sz-el-cats){margin-top:26px}


/* ======================================================================================================== section heading styles (home_head_style / per-section head_style) */
.section-head.sh{--sh-ac:var(--pal-accent,var(--primary));--sh-ink:var(--pal-ink,var(--ink));--sh-soft:var(--pal-soft,var(--accent));--sh-line:var(--pal-line,var(--line));--sh-night:var(--pal-night,#111);
	--sh-gold:var(--pal-gold,var(--pal-accent-hi,#ffb761));--sh-lo:var(--pal-accent-lo,color-mix(in srgb,var(--sh-ac) 62%,#000));--sh-on:var(--pal-on,#111);--sh-grad:linear-gradient(135deg,var(--pal-accent-hi,color-mix(in srgb,var(--sh-ac) 60%,#fff)),var(--sh-ac))}
.sh .sh-main.has-ico{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
.sh .sh-main.has-ico>.sh-ico{grid-row:1/span 3}
.sh .sh-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--sh-soft);color:var(--sh-lo)}
.sh .sh-ico .icon{width:22px;height:22px}
.sh .sh-sub{margin:2px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.sh .sh-num{display:block;font-size:44px;font-weight:800;line-height:1}

/* underline */
.sh-underline h2::after{content:"";display:block;width:44px;height:4px;margin-top:8px;border-radius:4px;background:var(--sh-grad)}
/* split: centred title between two hairlines, the link below */
.sh-split{flex-direction:column;align-items:center!important;gap:6px}
.sh-split .sh-main{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:16px;text-align:center}
.sh-split .sh-main::before,.sh-split .sh-main::after{content:"";flex:1 1 40px;min-width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--sh-line),var(--sh-ac));opacity:.9}
.sh-split .sh-main::after{transform:scaleX(-1);order:3}
.sh-split .overline,.sh-split .sh-sub{flex:0 0 100%;order:5;display:block}
.sh-split .sh-ico{order:1}.sh-split h2{order:2}
/* badge: the overline becomes a pill above the title */
.sh-badge .overline{display:inline-block;margin-bottom:8px;padding:3px 12px;border-radius:99px;background:var(--sh-soft);color:var(--sh-lo);font-size:12px;font-weight:700}
.sh-badge h2{font-weight:800}
/* boxed card header */
.sh-boxed{align-items:center!important;padding:12px 14px;border:1px solid var(--sh-line);border-radius:20px;background:var(--pal-surface,var(--surface,#fff));box-shadow:0 10px 26px rgba(17,17,17,.06)}
.sh-boxed .sh-main:not(.has-ico)::before{content:"";display:inline-block;width:10px;height:10px;margin-inline-end:10px;border-radius:3px;background:var(--sh-grad);vertical-align:middle}
.sh-boxed .sh-main:not(.has-ico){display:flex;flex-wrap:wrap;align-items:center}
.sh-boxed .sh-main:not(.has-ico)>.overline,.sh-boxed .sh-main:not(.has-ico)>.sh-sub{flex:0 0 100%}
.sh-boxed .overline{display:block;order:0}
/* gradient bar + pill link */
.sh-gradient .sh-main{position:relative;padding-inline-start:16px}
.sh-gradient .sh-main::before{content:"";position:absolute;inset-block:2px;inset-inline-start:0;width:6px;border-radius:6px;background:linear-gradient(180deg,var(--pal-accent-hi,var(--sh-ac)),var(--sh-lo))}
.sh-gradient .text-link{padding:8px 14px;border-radius:99px;background:var(--sh-grad);color:var(--sh-on);font-weight:800;box-shadow:0 6px 16px color-mix(in srgb,var(--sh-ac) 35%,transparent)}
/* editorial: big outlined number */
.sh-editorial .sh-main{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:end}
.sh-editorial .sh-num{grid-row:1/span 3;font-size:clamp(44px,12vw,64px);color:transparent;-webkit-text-stroke:1.5px var(--sh-ac);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sh-editorial h2{font-size:clamp(24px,6.4vw,34px);font-weight:800}
.sh-editorial .overline{color:var(--sh-lo);font-weight:700}
.sh-editorial{padding-bottom:10px;border-bottom:1px solid var(--sh-line)}
/* ribbon */
.sh-ribbon .overline{display:none}
.sh-ribbon h2{display:inline-block;padding:7px 22px 7px 30px;background:var(--sh-night);color:var(--sh-gold);font-size:19px;font-weight:800;
	clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%)}
html[dir=rtl] .sh-ribbon h2{padding:7px 30px 7px 22px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%)}
.sh-ribbon .sh-sub{margin-top:6px}
/* minimal: dot + small title + hairline */
.sh-caps .sh-main{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;flex:1}
.sh-caps .sh-main::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sh-ac);box-shadow:0 0 0 4px var(--sh-soft)}
.sh-caps h2{font-size:16px;font-weight:800;letter-spacing:.02em}
.sh-caps .sh-main::after{content:"";flex:1 1 30px;height:1px;background:var(--sh-line);order:3}
.sh-caps .overline,.sh-caps .sh-sub{flex:0 0 100%;order:9}
.sh-caps{align-items:center!important}
/* glass pill */
.sh-glass h2{display:inline-flex;align-items:center;padding:8px 22px;border-radius:99px;border:1px solid color-mix(in srgb,var(--sh-ac) 22%,var(--sh-line));font-size:18px;font-weight:800;
	background:color-mix(in srgb,var(--sh-soft) 70%,#fff);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(17,17,17,.07),inset 0 1px 0 rgba(255,255,255,.8)}
.sh-glass .overline{display:block;margin-bottom:6px}
@media(min-width:700px){.sh-boxed{padding:14px 20px}.sh-glass h2{font-size:20px}}

/* ===== 0.9.4 · «بنر جاهز» slides (row switch «full»): the picture fills the whole rounded slider, edge to edge, no copy, no fade mask, no zoom ===== */
.hero-slide.is-full{background:transparent!important}
.hero-slide.is-full::before,.hero-slide.is-full .hero-scrim{display:none!important}
.home-visual .hero-slide.is-full .campaign-photo,.hero-slide.is-full .campaign-photo{position:absolute;inset:0;width:100%;height:100%;left:0;right:0;border-radius:inherit;-webkit-mask-image:none;mask-image:none}
.home-visual .hero-slide.is-full .campaign-photo img,.hero-slide.is-full .campaign-photo img{width:100%;height:100%;object-fit:cover;object-position:center;background:none;-webkit-mask-image:none;mask-image:none;animation:none!important;transform:none!important}
.hero-slide.is-full .campaign-photo picture{display:block;width:100%;height:100%}
.hero-slide.is-full .hero-copy{position:absolute;pointer-events:none}
/* the slider clips its slides with its own radius: no white wedge in the corners */
.home-visual,.home-visual .hero-carousel,.home-visual .hero-track{border-radius:inherit}
.home-visual .hero-track,.home-visual .hero-carousel{overflow:hidden}
/* logo floating over the slider (home only): optional custom (white) image, size / offsets / scale from the dashboard */
.visual-logo{translate:var(--ovl-x,0px) var(--ovl-y,0px);scale:var(--ovl-s,1)}
.visual-logo.is-custom .brand img{mix-blend-mode:normal;filter:none;width:var(--ovl-w,var(--studio-logo-width,140px));max-width:none;max-height:none;height:auto}
.visual-overlay.has-shade::before{content:none}

/* Optional slider frame settings. Existing styles remain when no radius is selected. */
.home-visual[style*="--hero-radius:"]{border-radius:var(--hero-radius)}
.sz-hero-frame{padding-inline:var(--hero-inset,0px);border-radius:var(--hero-radius,inherit)}
.sz-hero-frame .hero-carousel[data-sz-hero],.sz-hero-frame .hero-track,.sz-hero-frame .hero-slide{border-radius:var(--hero-radius,inherit)}
.sz-hero-frame .hero-carousel[data-sz-hero]{overflow:hidden}
.sz-hero-frame[data-shadow=none] .hero-carousel{box-shadow:none}
.sz-hero-frame[data-shadow=soft] .hero-carousel{box-shadow:0 6px 18px #00000014}
.sz-hero-frame[data-shadow=strong] .hero-carousel{box-shadow:0 10px 28px #00000029}
.sz-hero-frame[data-fit=cover] .hero-slide .campaign-photo img{object-fit:cover}
.sz-hero-frame[data-fit=contain] .hero-slide .campaign-photo img{object-fit:contain;animation:none!important;transform:none!important}
.sz-hero-frame[data-position=center] .hero-slide .campaign-photo img{object-position:center}
.sz-hero-frame[data-position=top] .hero-slide .campaign-photo img{object-position:top}
.sz-hero-frame[data-position=bottom] .hero-slide .campaign-photo img{object-position:bottom}
.sz-hero-frame[data-position=left] .hero-slide .campaign-photo img{object-position:left}
.sz-hero-frame[data-position=right] .hero-slide .campaign-photo img{object-position:right}
@media(max-width:760px){.home-visual[style*="--hero-radius-mobile:"]{border-radius:var(--hero-radius-mobile)}.sz-hero-frame,.sz-hero-frame .hero-carousel[data-sz-hero],.sz-hero-frame .hero-track,.sz-hero-frame .hero-slide{border-radius:var(--hero-radius-mobile,var(--hero-radius,inherit))}}