/* ==== Hotspots (shoppable banner) ==== */
  .issue-hotspots .dp-bg2-cell { position: relative; }
  /* A tile with hotspots drops the image hover-scale: the dots are the interaction here, and two
     things moving at once is one too many. */
  .issue-hotspots .dp-bg2-cell .dp-bg2-col::before,
  .issue-hotspots .dp-bg2-cell .dp-bg2-col:hover::before { transform: scale(1); }
  .issue-hotspots .dp-hs-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .issue-hotspots .dp-hs { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
  /* The 12px between dot and card would drop the hover on the way across (the card fades, and with
     it the pointer target). This pad bridges the gap, and only takes the pointer while open. */
  .issue-hotspots .dp-hs::after {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: -1; /* behind the dot: on touch the pad would otherwise swallow the tap */
    pointer-events: none;
  }
  .issue-hotspots .dp-hs:hover::after,
  .issue-hotspots .dp-hs.is-open::after { pointer-events: auto; }
  /* The ring: a quiet breathing halo at rest, and on hover it swells and fades out as the dot
     itself grows — the pulse IS the "there is something here" signal, so it never needs a label. */
  .issue-hotspots .dp-hs-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: rgb(0 0 0 / 25%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1), background-color 300ms ease;
  }
  .issue-hotspots .dp-hs-dot::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    border: 2px solid rgb(255 255 255 / 60%);
    opacity: 0;
    transform: scale(1);
    animation: dp-hs-pulse 2.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
    pointer-events: none;
  }
  .issue-hotspots .dp-hs-dot::after {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #ffffff;
    transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  @keyframes dp-hs-pulse {
    0% { opacity: 0.55; transform: scale(1); }
    55% { opacity: 0; transform: scale(1.9); }
    100% { opacity: 0; transform: scale(1.9); }
  }

  /* The card is the app's own gel morph, ported to a hover transition: it opens out of the dot as a
     blurred, squashed blob (big radius, width first, height after) with the content counter-stretched
     against it, and lands crisp. Closed, it collapses straight back into the dot. */
  .issue-hotspots .dp-hs-card {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width:194px;padding:10px 15px 10px 11px;
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform-origin: left center;
    transform: translateY(-50%) scale(0.55, 0.3);
    border-radius: 40px;
    transition: opacity 180ms ease, transform 520ms cubic-bezier(0.23, 1, 0.32, 1),
      border-radius 520ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .issue-hotspots .dp-hs-card > * {
    transform: scale(1.25, 1.9);
    filter: blur(2px);
    transition: transform 520ms cubic-bezier(0.23, 1, 0.32, 1), filter 260ms ease;
  }
  /* Dots past the middle open towards the left instead, and low dots lift their card up. Each opens
     FROM the dot, so the origin and the hover bridge follow the direction. */
  .issue-hotspots .dp-hs.dp-hs-l .dp-hs-card {
    left: auto;
    right: calc(100% + 12px);
    transform-origin: right center;
  }
  .issue-hotspots .dp-hs.dp-hs-up .dp-hs-card {
    top: auto;
    bottom: calc(100% + 12px);
    transform-origin: center bottom;
    transform: translateY(0) scale(0.55, 0.3);
  }
  .issue-hotspots .dp-hs-thumb {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 61px;
    overflow: hidden;
    background: #f1f1f1;
  }
  /* Product shots almost always carry a white studio background — darken drops it into the card's
     grey plate instead of showing a white rectangle inside a white card. */
  .issue-hotspots .dp-hs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: darken;
  }
  .issue-hotspots .dp-hs-txt { min-width: 0; font-size: 14px; line-height: 132%; font-weight: 500; }
  .issue-hotspots .dp-hs-title, .issue-hotspots .dp-hs-price { display: block; }

  .issue-hotspots .dp-hs:hover .dp-hs-dot,
  .issue-hotspots .dp-hs.is-open .dp-hs-dot { transform: scale(1.12); background: rgb(0 0 0 / 40%); }
  .issue-hotspots .dp-hs:hover .dp-hs-dot::after,
  .issue-hotspots .dp-hs.is-open .dp-hs-dot::after { transform: scale(0.72); }
  .issue-hotspots .dp-hs:hover .dp-hs-dot::before,
  .issue-hotspots .dp-hs.is-open .dp-hs-dot::before { animation: none; opacity: 0; }
  .issue-hotspots .dp-hs:hover .dp-hs-card,
  .issue-hotspots .dp-hs.is-open .dp-hs-card {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1, 1);
    border-radius: 0px;
  }
  .issue-hotspots .dp-hs.dp-hs-up:hover .dp-hs-card,
  .issue-hotspots .dp-hs.dp-hs-up.is-open .dp-hs-card { transform: translateY(0) scale(1, 1); }
  .issue-hotspots .dp-hs:hover .dp-hs-card > *,
  .issue-hotspots .dp-hs.is-open .dp-hs-card > * { transform: scale(1, 1); filter: blur(0); }

  @media (max-width: 768px) {
    /* Touch has no hover, so the card only shows once the dot is tapped (the JS adds .is-open). */
    .issue-hotspots .dp-hs:hover .dp-hs-card { opacity: 0; pointer-events: none; }
    .issue-hotspots .dp-hs.is-open .dp-hs-card { opacity: 1; pointer-events: auto; }
    /* The card never gets wider than the screen allows, however narrow the phone is. */
    .issue-hotspots .dp-hs-card { max-width: calc(100vw - 48px); }
    /* Hotspots need a tile the width of the screen: two-up on mobile leaves ~170px per tile, which
       the card cannot sit inside. So the 2-up toggle simply hides them (the tiles still link). */
    .issue-hotspots .dp-bg2-mgrid .dp-hs-layer { display: none; }
  }
.issue-hotspots .dp-hs:focus-within .dp-hs-card{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1);border-radius:0}.issue-hotspots .dp-hs:focus-within .dp-hs-card>*{transform:none;filter:none}
.issue-hotspots .dp-hs-layer{height:120%;transform-origin:center;will-change:transform}.issue-hotspots .dp-hs-thumb img{transform:none!important;scale:1!important;height:100%!important}
@media(prefers-reduced-motion:reduce){.issue-hotspots .dp-hs-dot::before{animation:none}.issue-hotspots .dp-hs-card,.issue-hotspots .dp-hs-card>*{transition:none}}
.issue-hotspots .dp-hs-layer{height:100%;transform:none;will-change:auto}.issue-hotspots .hotspot-photo{pointer-events:auto}.issue-hotspots .gallery-back .dp-hs-layer{z-index:3}.issue-hotspots .dp-hs-thumb img{position:static;max-width:100%}
/* Portrait crops keep the original card width; open above the dot so it fits. */
.issue-hotspots .dp-hs.dp-hs-up .dp-hs-card{left:50%;right:auto;transform:translate(-50%,0) scale(.55,.3)}
.issue-hotspots .dp-hs.dp-hs-up:is(:hover,:focus-within,.is-open) .dp-hs-card{transform:translate(-50%,0) scale(1)}