/* SHAHAZ.com — homepage Vendor Spotlight (ZIP-523, owner reference "Brand Spotlight", measured from the picture).
 * Markup: template-parts/home/11-vendor-spotlight.php + shahaz_vendor_spotlight_card() (inc/shahaz-vendor-spotlight-rail.php)
 * Script: assets/js/shahaz-vendor-spotlight.js. Sizes follow the reference in container units: the panel (cqw of the
 * section) and each card (cqw of the card), so the same proportions hold on every screen. No shadows. */
.shahaz-homepage > .shz-hs.shz-vs{width:min(calc(100% - 8px),var(--hl-max,100%))}
.shz-vs{
	--vs-ink:#1d1015;--vs-pink:#e0127a;--vs-pink2:#c40d62;--vs-gold:#d4a23c;--vs-grey:#6f6064;
	--vs-pad:6cqw;--vs-gap:2cqw;--vs-n:2;
	position:relative;container-type:inline-size;isolation:isolate;overflow:hidden;box-sizing:border-box;
	padding:0 0 1.6cqw;border:1px solid #f0e3dc;border-radius:18px;
	background:radial-gradient(42% 60% at 92% 4%,rgba(255,206,226,.55),transparent 70%),linear-gradient(180deg,#fdf8f3 0%,#fcf3ef 60%,#fdf6f2 100%);
	color:var(--vs-ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
.shz-vs *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.shz-vs a{text-decoration:none!important}
.shz-vs a:focus:not(:focus-visible),.shz-vs button:focus:not(:focus-visible){outline:none;box-shadow:none}
.shz-vs a:focus-visible,.shz-vs button:focus-visible{outline:2px solid var(--vs-pink);outline-offset:2px}

/* gold-and-pink leaves behind the View All button */
.shz-vs__leaves{position:absolute;z-index:0;top:-.6cqw;right:-1.5cqw;width:50cqw;height:auto;pointer-events:none}

/* ---------- head: crown + lines, two-colour serif title, spaced small line, View All */
.shz-vs__head{position:relative;z-index:1;display:flex;align-items:center;gap:2cqw;padding:3.2cqw 3cqw 0 5cqw}
.shz-vs__titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.shz-vs__crown{display:flex;align-items:center;gap:1.2cqw;width:max-content;max-width:100%;margin:0 0 .4cqw 4cqw}
.shz-vs__crown i{display:block;width:16cqw;height:1px;background:linear-gradient(90deg,rgba(212,162,60,.15),#d4a23c 60%,#d4a23c)}
.shz-vs__crown i:last-child{width:14cqw;background:linear-gradient(90deg,#d4a23c,#d4a23c 40%,rgba(212,162,60,.15))}
.shz-vs__crown svg{flex:0 0 auto;width:max(14px,3.4cqw);height:auto}
.shz-vs .shz-vs__title{margin:0!important;padding:0!important;font-family:"Bodoni Moda","Playfair Display",Didot,Georgia,serif;font-size:max(20px,5.4cqw);font-weight:700;line-height:1.02!important;letter-spacing:-.01em;white-space:nowrap;color:var(--vs-ink)}
.shz-vs__t2{color:var(--vs-pink)}
.shz-vs .shz-vs__sub{margin:.9cqw 0 0!important;padding:0;font-family:"Inter","Segoe UI",sans-serif;font-size:max(7.5px,1.75cqw);font-weight:500;line-height:1.1;letter-spacing:.32em;text-transform:uppercase;color:#3d2a30;white-space:nowrap}
.shz-vs__all{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:.8cqw;height:max(24px,6.1cqw);padding:0 max(9px,2.1cqw) 0 max(11px,2.8cqw);border:max(1.5px,.25cqw) solid #ecc76c;border-radius:999px;background:linear-gradient(180deg,#ee2a86 0%,#d60f6a 55%,#c00c5d 100%);color:#fff!important;font-family:"Bodoni Moda","Playfair Display",Georgia,serif;font-size:max(10px,2.15cqw);font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.shz-vs__all svg{width:max(11px,2.3cqw);height:max(11px,2.3cqw)}

/* ---------- row: one line of cards that slides sideways, the next card peeking */
.shz-vs__rail{position:relative;z-index:1;margin-top:3.4cqw}
.shz-vs__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--vs-n) - 1) * var(--vs-gap)) / var(--vs-n));gap:var(--vs-gap);padding:0 var(--vs-pad) .4cqw;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--vs-pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shz-vs__track::-webkit-scrollbar{display:none}

/* ---------- card: tall picture, white panel with its own rounded top over the picture */
/* the card's own corner: its width × 0.054 (cqw on the card itself would measure the panel, not the card) */
.shz-vs-card{--vs-w:calc((100cqw - 2 * var(--vs-pad) - (var(--vs-n) - 1) * var(--vs-gap)) / var(--vs-n));position:relative;display:flex;flex-direction:column;min-width:0;container-type:inline-size;scroll-snap-align:start;border:1px solid #f1e5e8;border-radius:calc(var(--vs-w) * .054);background:#fff;overflow:hidden;color:var(--vs-ink)!important}
.shz-vs-card__pic{position:relative;display:block;width:100%;aspect-ratio:560/635;overflow:hidden;background:linear-gradient(160deg,#fbe3ec,#f6eadf)}
.shz-vs-card__pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.shz-vs-card__pic.is-banner img{object-position:left center}
.shz-vs-card__body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto;margin-top:-8cqw;padding:4.6cqw 6.2cqw 6.6cqw;border-radius:8cqw 8cqw 0 0;background:#fff}
.shz-vs-card__name{display:block;max-width:100%;font-family:"Bodoni Moda","Playfair Display",Didot,Georgia,serif;font-size:max(11px,6.8cqw);font-weight:700;line-height:1.15;letter-spacing:.005em;text-transform:uppercase;color:var(--vs-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shz-vs-card__cat{display:block;max-width:100%;margin-top:1.6cqw;font-family:"Bodoni Moda","Playfair Display",Georgia,serif;font-size:max(9.5px,4.8cqw);font-weight:500;line-height:1.2;color:var(--vs-grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shz-vs-card__badge{display:flex;align-items:center;gap:3cqw;max-width:100%;margin-top:2.6cqw;font-family:"Inter","Segoe UI",sans-serif;font-size:max(9px,3.8cqw);font-weight:500;line-height:1.2;color:#3d3236;white-space:nowrap;overflow:hidden}
.shz-vs-card__badge i{flex:0 0 auto;display:grid;place-items:center;width:max(18px,8.2cqw);height:max(18px,8.2cqw);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6dd,#f6e1b0);color:#c38d24}
.shz-vs-card__badge i svg{width:60%;height:60%}
.shz-vs-card__cta{display:flex;align-items:center;gap:5cqw;margin-top:auto;padding-top:5.4cqw;font-family:"Inter","Segoe UI",sans-serif;font-size:max(10px,5cqw);font-weight:700;line-height:1;color:var(--vs-pink)}
.shz-vs-card__cta i{display:grid;place-items:center;width:max(20px,10cqw);height:max(20px,10cqw);border-radius:50%;background:#fde3ee;color:var(--vs-pink)}
.shz-vs-card__cta i svg{width:56%;height:56%}

/* ---------- ‹ › round buttons over the row's edges */
.shz-vs__arrow{position:absolute;z-index:3;top:calc((100cqw - 2 * var(--vs-pad) - (var(--vs-n) - 1) * var(--vs-gap)) / var(--vs-n) * .5669);display:grid;place-items:center;width:max(28px,5.2cqw);height:max(28px,5.2cqw);margin:0;padding:0;border:1px solid #efe3e6;border-radius:50%;background:#fff;color:#2a1c21;box-shadow:none;cursor:pointer;transform:translateY(-50%)}
.shz-vs__arrow svg{width:52%;height:52%}
.shz-vs__arrow--prev{left:1.4cqw}
.shz-vs__arrow--next{right:1.4cqw}
.shz-vs__arrow[hidden]{display:none}
.shz-vs__arrow:disabled{opacity:0;pointer-events:none}
.shz-vs__arrow:hover,.shz-vs__arrow:focus{background:#fff;color:var(--vs-pink)}

/* ---------- dots + "Swipe to explore more" right under the cards */
.shz-vs__foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:max(14px,3cqw);margin-top:2.6cqw;padding:0 3cqw}
.shz-vs__foot[hidden]{display:none}
.shz-vs__dots{display:flex;align-items:center;gap:max(4px,.9cqw)}
.shz-vs__dots i{display:block;width:max(9px,2.3cqw);height:max(5px,1.07cqw);border-radius:999px;background:#dcd5d8;cursor:pointer;transition:width .2s ease,background .2s ease}
.shz-vs__dots i.is-on{width:max(20px,4.7cqw);background:var(--vs-pink)}
.shz-vs__swipe{position:absolute;right:3cqw;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.8cqw;font-family:"Inter","Segoe UI",sans-serif;font-size:max(8px,1.55cqw);font-weight:500;color:#4a3c40;white-space:nowrap}
.shz-vs__swipe svg{width:max(11px,2.4cqw);height:max(11px,2.4cqw)}
.shz-vs__swipe svg:last-child{width:max(10px,1.8cqw);height:max(10px,1.8cqw)}

/* phone: the swipe line goes under the dots when there is no room beside them */
@container (max-width:520px){
	.shz-vs__foot{flex-direction:column;gap:5px}
	.shz-vs__swipe{position:static;transform:none}
}
/* ZIP-543 (owner): on phones the cards sit 4px from the screen's left and right edges, 4px apart — the panel keeps
 * its background but has no side border, and the row has no side padding. */
@media (max-width:639px){
	.shz-vs{--vs-pad:0px;--vs-gap:4px;border-left:0;border-right:0;border-radius:0}
	.shz-vs__arrow--prev{left:6px}
	.shz-vs__arrow--next{right:6px}
}
/* tablet 4 cards, computer 6 — the panel's own sizes stop growing */
@media (min-width:640px){
	.shz-vs{--vs-n:4;--vs-pad:4cqw;--vs-gap:1.4cqw;padding-bottom:16px}
	.shz-vs__head{padding:22px 20px 0 32px}
	.shz-vs .shz-vs__title{font-size:min(5.4cqw,46px)}
	.shz-vs .shz-vs__sub{font-size:min(1.75cqw,13px);margin-top:6px!important}
	.shz-vs__crown svg{width:min(3.4cqw,26px)}
	.shz-vs__crown i{width:min(16cqw,120px)}
	.shz-vs__crown i:last-child{width:min(14cqw,104px)}
	.shz-vs__all{height:min(6.1cqw,44px);font-size:min(2.15cqw,16px);padding:0 min(2.1cqw,16px) 0 min(2.8cqw,22px)}
	.shz-vs__leaves{width:min(50cqw,440px)}
	.shz-vs__rail{margin-top:min(3.4cqw,22px)}
	.shz-vs__foot{margin-top:min(2.6cqw,16px)}
	.shz-vs__dots i{width:min(2.3cqw,22px);height:min(1.07cqw,8px)}
	.shz-vs__dots i.is-on{width:min(4.7cqw,44px)}
	.shz-vs__swipe{font-size:min(1.55cqw,13px)}
	.shz-vs__arrow{width:min(5.2cqw,44px);height:min(5.2cqw,44px)}
}
@media (min-width:1024px){
	.shz-vs{--vs-n:6;--vs-pad:3cqw;--vs-gap:1.2cqw}
}
@media (prefers-reduced-motion:reduce){.shz-vs__dots i{transition:none}}

/* ---------- ZIP-542 (owner): only a few stores — the cards share the whole row, never an empty half.
 * 1 store: one wide card everywhere · 2 stores: two wide cards from tablet · 3 stores: three wide cards on computer
 * (picture left, store right). Otherwise the normal tall cards just get wider (no gap left on the right). */
.shz-vs--c1{--vs-n:1}
@media (min-width:640px){.shz-vs--c2{--vs-n:2}.shz-vs--c3{--vs-n:3}}
@media (min-width:1024px){.shz-vs--c4{--vs-n:4}.shz-vs--c5{--vs-n:5}}
.shz-vs--c1 .shz-vs__track,.shz-vs--c2 .shz-vs__track,.shz-vs--c3 .shz-vs__track,.shz-vs--c4 .shz-vs__track,.shz-vs--c5 .shz-vs__track{scroll-snap-type:none}
@media all{
	.shz-vs--c1 .shz-vs-card{flex-direction:row;border-radius:18px}
	.shz-vs--c1 .shz-vs-card__pic{flex:0 0 clamp(128px,44%,330px);width:auto}
	.shz-vs--c1 .shz-vs-card__body{justify-content:center;margin-top:0;padding:clamp(12px,4.6cqw,30px) clamp(12px,5cqw,34px);border-radius:0;background:radial-gradient(70% 90% at 100% 0%,rgba(255,214,231,.45),transparent 70%),#fff}
	.shz-vs--c1 .shz-vs-card__name{font-size:clamp(15px,5.4cqw,28px);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.12}
	.shz-vs--c1 .shz-vs-card__cat{margin-top:clamp(3px,1.2cqw,8px);font-size:clamp(11px,3.7cqw,17px)}
	.shz-vs--c1 .shz-vs-card__badge{gap:clamp(6px,2cqw,10px);margin-top:clamp(6px,2.2cqw,12px);font-size:clamp(10px,3.3cqw,14px)}
	.shz-vs--c1 .shz-vs-card__badge i{width:clamp(18px,6.2cqw,28px);height:clamp(18px,6.2cqw,28px)}
	.shz-vs--c1 .shz-vs-card__cta{margin-top:clamp(10px,4cqw,22px);padding-top:0;gap:clamp(8px,2.6cqw,14px);font-size:clamp(12px,4cqw,17px)}
	.shz-vs--c1 .shz-vs-card__cta i{width:clamp(22px,7cqw,32px);height:clamp(22px,7cqw,32px)}
}
@media (min-width:640px){
	.shz-vs--c2 .shz-vs-card{flex-direction:row;border-radius:18px}
	.shz-vs--c2 .shz-vs-card__pic{flex:0 0 clamp(128px,44%,330px);width:auto}
	.shz-vs--c2 .shz-vs-card__body{justify-content:center;margin-top:0;padding:clamp(12px,4.6cqw,30px) clamp(12px,5cqw,34px);border-radius:0;background:radial-gradient(70% 90% at 100% 0%,rgba(255,214,231,.45),transparent 70%),#fff}
	.shz-vs--c2 .shz-vs-card__name{font-size:clamp(15px,5.4cqw,28px);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.12}
	.shz-vs--c2 .shz-vs-card__cat{margin-top:clamp(3px,1.2cqw,8px);font-size:clamp(11px,3.7cqw,17px)}
	.shz-vs--c2 .shz-vs-card__badge{gap:clamp(6px,2cqw,10px);margin-top:clamp(6px,2.2cqw,12px);font-size:clamp(10px,3.3cqw,14px)}
	.shz-vs--c2 .shz-vs-card__badge i{width:clamp(18px,6.2cqw,28px);height:clamp(18px,6.2cqw,28px)}
	.shz-vs--c2 .shz-vs-card__cta{margin-top:clamp(10px,4cqw,22px);padding-top:0;gap:clamp(8px,2.6cqw,14px);font-size:clamp(12px,4cqw,17px)}
	.shz-vs--c2 .shz-vs-card__cta i{width:clamp(22px,7cqw,32px);height:clamp(22px,7cqw,32px)}
}
@media (min-width:1024px){
	.shz-vs--c3 .shz-vs-card{flex-direction:row;border-radius:18px}
	.shz-vs--c3 .shz-vs-card__pic{flex:0 0 clamp(128px,44%,330px);width:auto}
	.shz-vs--c3 .shz-vs-card__body{justify-content:center;margin-top:0;padding:clamp(12px,4.6cqw,30px) clamp(12px,5cqw,34px);border-radius:0;background:radial-gradient(70% 90% at 100% 0%,rgba(255,214,231,.45),transparent 70%),#fff}
	.shz-vs--c3 .shz-vs-card__name{font-size:clamp(15px,5.4cqw,28px);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.12}
	.shz-vs--c3 .shz-vs-card__cat{margin-top:clamp(3px,1.2cqw,8px);font-size:clamp(11px,3.7cqw,17px)}
	.shz-vs--c3 .shz-vs-card__badge{gap:clamp(6px,2cqw,10px);margin-top:clamp(6px,2.2cqw,12px);font-size:clamp(10px,3.3cqw,14px)}
	.shz-vs--c3 .shz-vs-card__badge i{width:clamp(18px,6.2cqw,28px);height:clamp(18px,6.2cqw,28px)}
	.shz-vs--c3 .shz-vs-card__cta{margin-top:clamp(10px,4cqw,22px);padding-top:0;gap:clamp(8px,2.6cqw,14px);font-size:clamp(12px,4cqw,17px)}
	.shz-vs--c3 .shz-vs-card__cta i{width:clamp(22px,7cqw,32px);height:clamp(22px,7cqw,32px)}
}
/* wide single card on tablet/computer: a lower, landscape picture so the card is not taller than the screen needs */
@media (min-width:640px){.shz-vs--c1 .shz-vs-card__pic{flex-basis:clamp(200px,34%,360px);aspect-ratio:4/3}}