/* Shared kit refinements: desktop tooltips and a separate touch description panel. */
.kit-explorer > * { min-width: 0; }
.kit-mobile-detail { display: none; }
.kit-mobile-detail[hidden] { display: none !important; }
.kit-marker { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.kit-marker:focus-visible { outline: 2px solid #d2ae70; outline-offset: 4px; }
.kit-lid { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.kit-lid::before, .kit-lid::after { pointer-events: none; }

@media (max-width: 980px) {
  .kit-explorer { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kit-explorer-copy { position: static; }
  .kit-stage { width: min(100%, 640px); margin-inline: auto; }
}

@media (max-width: 600px) {
  .kit-explorer { gap: 16px; padding-block: 36px; margin-top: 36px; }
  .kit-explorer-copy h2 { font-size: 34px; margin: 8px 0 12px; }
  .kit-explorer-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.55; margin-bottom: 8px; }
  .kit-explorer-copy .kit-toggle { min-height: 48px; margin: 12px 0 8px; }
  .kit-explorer-copy > small { font-size: 12px; }
  .kit-stage { width: 100%; max-width: 420px; scroll-margin-bottom: 110px; }
  .kit-interior { filter: none !important; transform: none !important; transition: none; }
  .kit-lid { transition: transform .4s ease, opacity .25s ease .08s; }
  .kit-lid img { width: 80px; height: 80px; margin-bottom: 14px; }
  .kit-lid strong { font-size: 30px; }

  /* Keep a discreet disc inside a full 44px touch target. */
  .kit-hotspot, .kit-marker { width: 44px; height: 44px; }
  .kit-marker { position: relative; border: 0; background: transparent; box-shadow: none; font-size: 18px; }
  .kit-marker::before { content: ""; position: absolute; inset: 7px; border: 2px solid #fff4dc; border-radius: 50%; background: #79263d; box-shadow: 0 3px 10px #3c182760; }
  .kit-marker > [aria-hidden] { position: relative; z-index: 1; }
  .kit-hotspot:hover .kit-marker,
  .kit-hotspot[open] .kit-marker,
  .kit-hotspot:focus-within .kit-marker { background: transparent; transform: none; }
  .kit-hotspot[open] .kit-marker::before { background: #a07835; }
  .hotspot-vial { left: calc(10% - 7px); top: calc(21% - 7px); }
  .hotspot-case { left: calc(24% - 7px); top: calc(31% - 7px); }
  .hotspot-bac { left: calc(38% - 7px); top: calc(22% - 7px); }
  .hotspot-syringes { left: calc(68% - 7px); top: calc(31% - 7px); }
  .hotspot-pads { left: calc(20% - 7px); top: calc(56% - 7px); }
  .hotspot-dose { left: calc(53% - 7px); top: calc(57% - 7px); }
  .hotspot-journal { left: calc(84% - 7px); top: calc(56% - 7px); }
  .hotspot-special { left: calc(24% - 7px); top: calc(83% - 7px); }
  .hotspot-guide { left: calc(69% - 7px); top: calc(85% - 7px); }

  /* This panel is outside the transformed/clipped box and never covers its contents. */
  .kit-explorer.is-enhanced .kit-tooltip { display: none; }
  .kit-explorer.is-enhanced .kit-mobile-detail {
    display: block; position: relative; width: 100%; max-width: 420px;
    min-height: 116px; margin: 0 auto; padding: 18px 54px 18px 18px;
    border: 1px solid #65513b; background: #211b18; color: #f1ece3;
    box-sizing: border-box; overflow-wrap: anywhere; scroll-margin-bottom: 110px;
  }
  .kit-mobile-title { display: block; font: 600 15px/1.4 Inter, Arial, sans-serif; }
  .kit-mobile-description, .kit-mobile-hint { margin: 6px 0 0; color: #c6bdb0; font: 400 14px/1.6 Inter, Arial, sans-serif; }
  .kit-mobile-hint { margin: 0; }
  .kit-mobile-dismiss { position: absolute; top: 5px; right: 5px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #e7d8c3; font: 400 25px/1 Arial, sans-serif; cursor: pointer; }
  .kit-mobile-dismiss:focus-visible { outline: 2px solid #d2ae70; outline-offset: -4px; }
  .kit-mobile-detail:not([data-selected="true"]) .kit-mobile-dismiss { display: none; }
  body:has(#cart-reminder:not([hidden])) .product-page { padding-bottom: 125px; }
}

@media (prefers-reduced-motion: reduce) {
  .kit-interior, .kit-lid, .kit-marker, .kit-tooltip { transition: none !important; }
}