/* ==========================================================================
   Store highlights: rotating hero at the top of the New Store landing (docs/NEW-STORE.md).
   Markup: Views/customer/store/new/partials/highlights.php. Behaviour: js/store-highlights.js.
   Scoped under .ns .shl. Loaded only when there are live slides.
   All slides share one grid cell, so the hero is as tall as its tallest slide and never jumps while
   rotating. No hover lift or movement (only colours change on hover).
   ========================================================================== */
.ns .shl{max-width:1180px;margin:0 auto 1.75rem}
.ns .shl-vp{display:grid;touch-action:pan-y}
.ns .shl-s{grid-area:1/1;position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:236px;max-height:300px;border-radius:20px;overflow:hidden;
  border:1.5px solid rgba(var(--fc),.38);
  background:linear-gradient(105deg,rgba(var(--fc),.20),rgba(var(--fc),.06) 55%,rgba(var(--fc),.02)),rgba(var(--sheen),.02);
  visibility:hidden;opacity:0;transition:opacity .45s ease,visibility 0s linear .45s}
.ns .shl-s.on{visibility:visible;opacity:1;transition:opacity .45s ease}
.ns .shl-s.has-art{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
body.theme-light .ns .shl-s{border-color:rgba(var(--fc),.45);background:linear-gradient(105deg,rgba(var(--fc),.16),rgba(var(--fc),.05) 55%,rgba(var(--fc),.01)),#fff}

.ns .shl-tx{grid-column:1;grid-row:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:.45rem;padding:1.5rem 1.75rem;min-width:0}
.ns .shl-eb{align-self:flex-start;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary);background:rgba(var(--fc),.22);border:1px solid rgba(var(--fc),.45)}
.ns .shl-t{margin:0;font-size:1.85rem;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);overflow-wrap:anywhere}
.ns .shl-d{margin:0;max-width:44rem;font-size:.98rem;line-height:1.45;color:var(--text-secondary)}
.ns .shl-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;margin-top:.35rem}
.ns .shl-p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;font-size:.92rem;color:var(--text-secondary)}
.ns .shl-p b{font-size:1.35rem;font-weight:800;color:var(--text-primary)}
.ns .shl-was{flex-basis:100%;font-size:.82rem;color:var(--ns-strike)}
.ns .shl-o{font-size:.84rem;color:var(--text-muted)}
.ns .shl-o::before{content:"· ";color:var(--text-muted)}
.ns .shl-o s{color:var(--ns-strike)}
.ns .shl-save{flex-basis:100%;font-size:.82rem;font-weight:700;color:var(--ns-save)}
.ns .shl-cta{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem 1rem .6rem 1.15rem;border-radius:12px;font-weight:700;font-size:.92rem;text-decoration:none;
  color:#fff;background:var(--accent,#6366f1);border:1px solid transparent;transition:background-color .15s}
.ns .shl-cta svg{width:1.05rem;height:1.05rem}
.ns .shl-cta:hover{background:#4f46e5}
.ns .shl-cta:focus-visible{outline:2px solid var(--ns-focus);outline-offset:3px}

.ns .shl-art{grid-column:2;grid-row:1;position:relative;display:grid;place-items:center;min-width:0;overflow:hidden}
.ns .art-cover .shl-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%)}
.ns .art-object .shl-art{background:radial-gradient(closest-side at 50% 55%,rgba(var(--fc),.38),rgba(var(--fc),.08) 70%,transparent)}
.ns .art-object .shl-art img{display:block;max-width:78%;max-height:200px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
body.theme-light .ns .art-object .shl-art img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
/* Background art (store_highlights.backdrop): a full-bleed scene filling the art area exactly like cover art
   (same left fade into the slide colour), with the service art standing in front of it, low and left of centre. */
.ns .shl-s.has-bd .shl-art{background:none}
.ns .shl-s .shl-art img.shl-bd{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;filter:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%)}
body.theme-oled .ns .shl-s .shl-art img.shl-bd,body.theme-dark .ns .shl-s .shl-art img.shl-bd{filter:brightness(.86) saturate(.95)}
.ns .shl-s.has-bd .shl-art img:not(.shl-bd){position:relative;z-index:1;place-self:end start;margin:0 0 5% 20%;max-width:40%;max-height:150px}
.ns .shl-s.bd-ns-flag .shl-art img:not(.shl-bd){margin-left:9%}

/* controls under the hero: previous, dots, next, pause */
.ns .shl-ctl{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:.55rem}
.ns .shl-btn{display:grid;place-items:center;width:2rem;height:2rem;padding:0;border-radius:9px;cursor:pointer;color:var(--text-secondary);background:rgba(var(--sheen),.05);border:1px solid rgba(var(--sheen),.14);transition:background-color .15s,color .15s}
.ns .shl-btn svg{width:1rem;height:1rem}
.ns .shl-btn:hover{color:var(--text-primary);background:rgba(var(--sheen),.1)}
.ns .shl-btn:focus-visible,.ns .shl-dot:focus-visible{outline:2px solid var(--ns-focus);outline-offset:2px}
.ns .shl-pause{margin-left:.35rem}
.ns .shl-pause .i-play,.ns .shl.paused .shl-pause .i-pause{display:none}
.ns .shl.paused .shl-pause .i-play{display:block}
.ns .shl-dots{display:flex;align-items:center;gap:.1rem}
.ns .shl-dot{display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.ns .shl-dot::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:rgba(var(--sheen),.28);transition:background-color .2s}
.ns .shl-dot:hover::before{background:rgba(var(--sheen),.5)}
.ns .shl-dot[aria-current="true"]::before{background:var(--accent,#6366f1)}

@media (max-width:768px){
  .ns .shl{margin-bottom:1.25rem}
  .ns .shl-s{min-height:0;max-height:none;border-radius:16px}
  .ns .shl-s.has-art{grid-template-columns:minmax(0,1fr) 30%}
  .ns .shl-tx{padding:1rem 1rem 1.05rem;gap:.35rem}
  .ns .shl-t{font-size:1.3rem}
  .ns .shl-d{font-size:.86rem}
  .ns .shl-p b{font-size:1.15rem}
  .ns .shl-row{gap:.5rem .9rem;margin-top:.2rem}
  .ns .shl-cta{padding:.5rem .8rem .5rem .95rem;font-size:.88rem}
  .ns .art-cover .shl-art img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
  .ns .art-object .shl-art img{max-width:90%;max-height:110px}
  .ns .shl-s .shl-art img.shl-bd{object-position:85% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
  .ns .shl-s.has-bd .shl-art img:not(.shl-bd){margin:0 0 6% 6%;max-width:46%;max-height:80px}
}
/* phones: the art becomes a strip across the top so the copy gets the full width */
@media (max-width:560px){
  .ns .shl-s.has-art{grid-template-columns:minmax(0,1fr);grid-template-rows:96px auto}
  .ns .shl-art{grid-column:1;grid-row:1}
  .ns .shl-tx{grid-row:2;padding-top:.8rem}
  .ns .art-cover .shl-art img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .ns .art-object .shl-art img{max-height:84px}
  .ns .shl-s .shl-art img.shl-bd{object-position:50% 22%;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}
  .ns .shl-s.has-bd .shl-art img:not(.shl-bd){margin:0 0 1% 16%;max-width:40%;max-height:80px}
  .ns .shl-p .nw{white-space:normal}
}
@media (max-width:380px){.ns .shl-t{font-size:1.18rem}}
@media (prefers-reduced-motion: reduce){.ns .shl-s,.ns .shl-s.on{transition:none}}