/* COMMERCE OCCASION BANDS - the store's own seasonal hero.
   Ships as a Module UI asset, so a site with the commerce module off gets
   neither this stylesheet nor its script. Logical properties throughout so
   the same rules lay out correctly in FA/RTL. */
   properties throughout so the same rules lay out correctly in FA/RTL. */
.shop-occasions{position:relative;margin:0 0 22px}
.shop-occasion-track{position:relative;display:grid}
.shop-occasion-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease}
.shop-occasion-slide.is-active{opacity:1;visibility:visible}
.shop-occasion-link{display:block;text-decoration:none;color:inherit}
.shop-occasion-copy{position:relative;display:flex;align-items:center;gap:clamp(16px,3vw,34px);min-height:186px;padding:26px clamp(22px,4vw,44px);border:1px solid color-mix(in srgb,var(--rn-theme-accent) 16%,transparent);border-radius:22px;overflow:hidden;background:radial-gradient(circle at 82% 22%,color-mix(in srgb,var(--acid,var(--rn-theme-accent)) 14%,transparent),transparent 42%),linear-gradient(135deg,var(--rn-theme-surface),var(--rn-theme-accent-contrast) 78%)}
.shop-occasion-image{flex:0 0 auto;width:clamp(78px,11vw,128px);aspect-ratio:1;border-radius:16px;object-fit:cover}
.shop-occasion-text{min-width:0}
.shop-occasion-text b{display:block;color:var(--rn-theme-accent);font:800 clamp(22px,3.3vw,40px)/1.1 Manrope,sans-serif;letter-spacing:-.04em;overflow-wrap:anywhere}
.shop-occasion-text span{display:block;margin-top:8px;color:var(--rn-theme-muted);font:500 clamp(13px,1.4vw,17px)/1.6 Manrope,sans-serif}
.shop-occasion-countdown{display:flex;gap:8px;margin-top:16px}
.shop-occasion-countdown span{display:grid;justify-items:center;gap:3px;min-width:56px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--rn-theme-accent) 15%,transparent);border-radius:12px;background:color-mix(in srgb,var(--rn-theme-accent-contrast) 52%,transparent)}
.shop-occasion-countdown b{color:var(--acid,var(--rn-theme-accent));font:800 20px/1 Manrope,sans-serif;font-variant-numeric:tabular-nums}
.shop-occasion-countdown small{color:var(--rn-theme-muted);font:600 8px/1 DM Mono,monospace;letter-spacing:.11em;text-transform:uppercase}
.shop-occasion-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.shop-occasion-arrow{width:38px;height:38px;padding:0;border:1px solid color-mix(in srgb,var(--rn-theme-accent) 18%,transparent);border-radius:50%;background:transparent;color:var(--rn-theme-accent);font-size:20px;line-height:1}
.shop-occasion-arrow:hover{border-color:var(--acid,var(--rn-theme-accent));color:var(--acid,var(--rn-theme-accent))}
[dir=rtl] .shop-occasion-arrow{transform:scaleX(-1)}
.shop-occasion-dots{display:flex;gap:7px}
.shop-occasion-dots button{width:9px;height:9px;padding:0;border:1px solid color-mix(in srgb,var(--rn-theme-accent) 34%,transparent);border-radius:50%;background:transparent}
.shop-occasion-dots button.is-active{border-color:var(--acid,var(--rn-theme-accent));background:var(--acid,var(--rn-theme-accent))}
@media(max-width:720px){.shop-occasion-copy{gap:14px;min-height:0;padding:18px}.shop-occasion-image{width:64px}.shop-occasion-countdown span{min-width:48px;padding:6px 8px}.shop-occasion-countdown b{font-size:16px}}
@media(prefers-reduced-motion:reduce){.shop-occasion-slide{transition:none}}