/* Sale popup. Colours and corner radius come from Admin > Sale popup (custom properties set on .salepop); the defaults below only apply if they are missing. */
.salepop { --sp-bg: #fff; --sp-text: #1f2937; --sp-accent: #0f766e; --sp-border: #e5e7eb; --sp-radius: 12px;
  position: fixed; z-index: 145; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
.salepop[hidden] { display: none; }
.salepop--bottom-left { left: calc(1rem + env(safe-area-inset-left, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.salepop--bottom-right { right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } /* clear of the back-to-top button */
.salepop--top-left { left: calc(1rem + env(safe-area-inset-left, 0px)); top: calc(1rem + env(safe-area-inset-top, 0px)); }
.salepop--top-right { right: calc(1rem + env(safe-area-inset-right, 0px)); top: calc(1rem + env(safe-area-inset-top, 0px)); }
.salepop-card { position: relative; display: flex; gap: .85rem; align-items: center; padding: .85rem 2.2rem .95rem .85rem; overflow: hidden; background: var(--sp-bg); color: var(--sp-text);
  border: 1px solid var(--sp-border); border-radius: var(--sp-radius); box-shadow: 0 10px 34px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06); pointer-events: auto;
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.salepop--top-left .salepop-card, .salepop--top-right .salepop-card { transform: translateY(-16px) scale(.97); }
.salepop.is-in .salepop-card { opacity: 1; transform: none; }
.salepop-img { flex: none; display: block; width: 64px; height: 64px; border-radius: calc(var(--sp-radius) * .75); overflow: hidden; background: rgba(127, 127, 127, .12); box-shadow: 0 0 0 1px rgba(127, 127, 127, .18); }
.salepop-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.salepop-body { min-width: 0; flex: 1; line-height: 1.35; }
.salepop-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .2rem; font-size: .78rem; font-weight: 600; letter-spacing: .01em; opacity: .8; }
.salepop-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); animation: salepop-pulse 1.8s ease-out infinite; }
.salepop-product { display: -webkit-box; margin: 0 0 .25rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--sp-accent); font-size: .92rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.salepop-product:hover, .salepop-product:focus-visible { text-decoration: underline; }
.salepop-time { margin: 0; font-size: .72rem; opacity: .62; }
.salepop-close { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(127, 127, 127, .14); color: inherit; opacity: .75; font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background .15s, opacity .15s; }
.salepop-close:hover, .salepop-close:focus-visible { opacity: 1; background: rgba(127, 127, 127, .28); }
.salepop-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sp-accent); opacity: .55; transform-origin: left; animation: salepop-bar linear forwards; }
.salepop-card:hover .salepop-bar, .salepop-card:focus-within .salepop-bar { animation-play-state: paused; }
@keyframes salepop-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes salepop-pulse { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (max-width: 767px) {
  .salepop { width: auto; left: .6rem; right: .6rem; }
  .salepop--bottom-left, .salepop--bottom-right { bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  .salepop--top-left, .salepop--top-right { top: calc(.6rem + env(safe-area-inset-top, 0px)); }
  .salepop-card { padding: .7rem 2.2rem .8rem .7rem; }
  .salepop-img { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .salepop-card { transition: none; transform: none; } .salepop-title::before { animation: none; } .salepop-bar { display: none; } }