/* Scoped styles: no global element selectors; does not modify the shop theme. */
.pip-root[hidden], .pip-root [hidden] { display: none !important; }
.pip-root { position: fixed; inset: 0; z-index: 2147482000; font-family: Arial, Helvetica, sans-serif; }
.pip-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .56); }
.pip-dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 470px); max-height: 94vh; overflow: visible;
  background: transparent; border: 0; margin: 0; box-sizing: border-box;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
}
.pip-image-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.pip-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.pip-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  background: #fff; color: #1d1d1d; border: 0; border-radius: 50%;
  font: 30px/1 Arial, sans-serif; width: 38px; height: 38px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pip-close:hover, .pip-close:focus-visible { background: #ececec; }
.pip-close:focus-visible, .pip-cta:focus-visible { outline: 3px solid #ffbf00; outline-offset: 3px; }
.pip-cta {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 15px 12px; font: bold 17px/1.3 Arial, sans-serif;
  text-decoration: none !important; border-radius: 0 0 7px 7px;
  transition: filter .2s ease;
}
.pip-cta:hover { filter: brightness(.93); }
/* Countdown deliberately has no panel/bar/background: it floats above the image. */
.pip-timer {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: max-content; max-width: 98%; display: flex; align-items: flex-start;
  justify-content: center; gap: clamp(2px, 1.1vw, 7px);
  background: transparent !important; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.75); pointer-events: none;
}
.pip-unit { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pip-digits { display: flex; gap: clamp(2px, .7vw, 5px); }
.pip-digits span {
  display: flex; justify-content: center; align-items: center;
  width: clamp(22px, 6.6vw, 38px); height: clamp(31px, 8vw, 49px);
  border-radius: 5px; background: #050505; color: #fff;
  font: 800 clamp(23px, 6.4vw, 43px)/1 Arial, sans-serif;
  box-shadow: 0 2px 5px rgba(0,0,0,.45); text-shadow: none;
}
.pip-unit small { color: #fff; font: 700 clamp(10px, 2.6vw, 14px)/1 Arial, sans-serif; }
.pip-separator {
  color: white; font: 800 clamp(23px, 6vw, 42px)/1 Arial, sans-serif;
  padding-top: clamp(0px, 1vw, 2px);
}
@media (max-width: 480px) {
  .pip-dialog { width: min(88vw, 430px); }
  .pip-close { width: 34px; height: 34px; font-size: 26px; top: -12px; right: -12px; }
  .pip-timer { bottom: 8px; gap: 2px; }
  .pip-unit { gap: 3px; }
  .pip-digits { gap: 2px; }
  .pip-digits span { width: clamp(20px, 5.6vw, 30px); height: clamp(29px, 7.6vw, 40px); font-size: clamp(20px, 5.5vw, 32px); }
  .pip-separator { font-size: clamp(21px, 5.5vw, 30px); }
  .pip-cta { font-size: 15px; padding: 12px 10px; }
}
@media (max-height: 620px) and (min-width: 481px) {
  .pip-dialog { width: min(76vh, 430px); }
}