[data-pps] {
  font-family: 'Montserrat', sans-serif;
  margin-top:  10px;
  line-height: normal;
  box-sizing:  border-box;
}

[data-pps] *,
[data-pps] *::before,
[data-pps] *::after {
  box-sizing: inherit;
}

[data-pps-wrap] {
  max-width:  100%;
  overflow:   hidden;
}

[data-pps-track] {
  display:                    flex;
  flex-wrap:                  nowrap;
  gap:                        12px;
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:            none;
  user-select:                none;
  cursor:                     grab;
  padding:                    6px 2px;
}

[data-pps-track]:active              { cursor: grabbing; }
[data-pps-track]::-webkit-scrollbar  { display: none; }

[data-pps-card] {
  appearance:         none;
  -webkit-appearance: none;
  border:             1px solid #ddd;
  background:         #fff;
  text-align:         left;
  font-family:        inherit;
  font-size:          inherit;
  color:              inherit;
  flex:               0 0 auto;
  display:            inline-flex;
  align-items:        center;
  gap:                10px;
  padding:            10px 14px;
  min-width:          170px;
  border-radius:      8px;
  cursor:             pointer;
  transition:         box-shadow .2s, transform .2s;
  outline:            none;
}

[data-pps-card]:hover {
  transform:        translateY(-2px);
  box-shadow:       0 6px 14px rgba(0, 0, 0, .09);
  color:            inherit !important;
  background-color: #fff !important;
  border-color:     #ddd !important;
}

[data-pps-card]:focus-visible {
  outline:        2px solid #0073aa;
  outline-offset: 2px;
}

[data-pps-icon] {
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

[data-pps-card-img] {
  display:    block;
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
}

[data-pps-info] {
  display:        flex;
  flex-direction: column;
  line-height:    1.3;
  gap:            2px;
}

[data-pps-label] {
  font-size:   15px;
  font-weight: 600;
  color:       #222;
}

[data-pps-sub] {
  font-size:   13px;
  font-weight: 500;
  color:       #666;
}

[data-pps-popup] {
  position:        fixed;
  z-index:         999999;
  inset:           0;
  background:      rgba(0, 0, 0, .6);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

[data-pps-popup][hidden] {
  display: none;
}

[data-pps-popup-box] {
  position:      relative;
  background:    #fff;
  border-radius: 12px;
  padding:       32px 24px 24px;
  max-width:     400px;
  width:         90%;
  text-align:    center;
  animation:     pps-in .2s ease;
}

@keyframes pps-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-pps-popup-close] {
  appearance:         none;
  -webkit-appearance: none;
  background:  transparent;
  border:      none;
  padding:     4px;
  line-height: 1;

  position:   absolute;
  top:        10px;
  right:      12px;
  font-size:  20px;
  color:      #555;
  cursor:     pointer;
  transition: color .15s;
}

[data-pps-popup-close]:hover { color: #000; }

[data-pps-popup-img] {
  display:       block;
  max-width:     64px;
  max-height:    64px;
  object-fit:    contain;
  margin:        0 auto 14px;
}

[data-pps-popup-title] {
  margin:      0 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-size:   20px;
  font-weight: 600;
  color:       #222;
  line-height: 1.3;
}

[data-pps-popup-text] {
  margin:      0;
  font-family: 'Montserrat', sans-serif;
  font-size:   15px;
  font-weight: 500;
  color:       #666;
  line-height: 1.4;
}