.apf-pf-family{
  display:flex;
  flex-wrap:wrap;
  gap: var(--apf-pf-gap, 10px);
  margin:12px 0;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.apf-pf-title{
  flex: 0 0 100%;
  width:100%;
  font-size: var(--apf-pf-title-size, 16px);
  font-weight: var(--apf-pf-title-weight, 700);
  margin: 0 0 6px;
}

.apf-pf-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width: var(--apf-pf-thumb-size, 70px);
}

.apf-pf-item .thumb img{
  display:block;
  box-sizing:border-box;
  border-radius: var(--apf-pf-thumb-radius, 8px);
  border: var(--apf-pf-thumb-border-width, 0px) solid var(--apf-pf-thumb-border-color, rgba(0,0,0,0.15));
  max-width: var(--apf-pf-thumb-size, 70px);
  height:auto;
}

.apf-pf-item .thumb{
  position:relative;
  display:inline-block;
}

.apf-pf-item.apf-out-of-stock .thumb:before{
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background: var(--apf-pf-oos-overlay-bg, rgba(0,0,0,0));
  opacity: var(--apf-pf-oos-overlay, 1);
  border-radius: var(--apf-pf-thumb-radius, 8px);
  pointer-events:none;
}

.apf-pf-item.apf-out-of-stock .thumb img{
  filter: grayscale(100%);
  opacity: .65;
}

.apf-pf-item .thumb.no-link{
  pointer-events:none;
}

/* ─── OOS overlay marker (shared) ─── */
.apf-pf-item .apf-oos-marker{
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  pointer-events:none;
  opacity:0;
  border-radius: var(--apf-pf-thumb-radius, 8px);
  overflow:hidden;
}

.apf-pf-item.apf-out-of-stock .apf-oos-marker{
  opacity:1;
}

/* Type: x (two crossing lines – corner to corner) */
.apf-oos-marker.apf-oos-x:before,
.apf-oos-marker.apf-oos-x:after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:141.42%;
  height:2px;
  transform-origin:center;
  background: var(--apf-pf-oos-marker-color, rgba(0,0,0,.45));
}
.apf-oos-marker.apf-oos-x:before{ transform: translate(-50%,-50%) rotate(45deg); }
.apf-oos-marker.apf-oos-x:after{ transform: translate(-50%,-50%) rotate(-45deg); }

/* Type: diagonal (single line corner to corner) */
.apf-oos-marker.apf-oos-diagonal:before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:141.42%;
  height:2px;
  transform-origin:center;
  transform: translate(-50%,-50%) rotate(-45deg);
  background: var(--apf-pf-oos-marker-color, rgba(0,0,0,.45));
}

/* Type: diagonal-double (two thin parallel diagonal lines, corner to corner) */
.apf-oos-marker.apf-oos-diagonal-double:before,
.apf-oos-marker.apf-oos-diagonal-double:after{
  content:"";
  position:absolute;
  width:141.42%;
  height:2px;
  transform-origin:center;
  background: var(--apf-pf-oos-marker-color, rgba(0,0,0,.45));
}
.apf-oos-marker.apf-oos-diagonal-double:before{
  left:47%; top:47%;
  transform: translate(-50%,-50%) rotate(-45deg);
}
.apf-oos-marker.apf-oos-diagonal-double:after{
  left:53%; top:53%;
  transform: translate(-50%,-50%) rotate(-45deg);
}

/* Type: none — only grayscale, no line/x */
.apf-oos-marker.apf-oos-none{
  display:none;
}

/* Legacy fallback: old .x element still works */
.apf-pf-item .x{
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  pointer-events:none;
}

.apf-pf-item.apf-out-of-stock .x{
  opacity: var(--apf-pf-oos-show-x, 1);
}

.apf-pf-item .x:before,
.apf-pf-item .x:after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:141.42%;
  height:2px;
  transform-origin:center;
  background: rgba(0,0,0,.45);
}

.apf-pf-item .x:before{ transform: translate(-50%,-50%) rotate(45deg); }
.apf-pf-item .x:after{ transform: translate(-50%,-50%) rotate(-45deg); }

.apf-pf-item.current .thumb img{
  border-width: calc(var(--apf-pf-thumb-border-width, 0px) + var(--apf-pf-thumb-selected-border-extra, 2px));
}

.apf-pf-item .price,
.apf-pf-item .stock{
  font-size:12px;
  line-height:1.2;
  text-align:center;
}

.apf-pf-tooltip{
  font-size: var(--apf-pf-tt-font-size, 12px);
  font-weight: var(--apf-pf-tt-font-weight, 700);
  color: var(--apf-pf-tt-color, rgba(255,255,255,1));
  background: var(--apf-pf-tt-bg, rgba(0,0,0,0.75));
  border-radius: var(--apf-pf-tt-radius, 6px);
  padding: var(--apf-pf-tt-pad-y, 4px) var(--apf-pf-tt-pad-x, 8px);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

/* Tooltip: above thumbnail (always visible) */
.apf-pf-tt-above .apf-pf-tooltip--above{
  display:block;
  margin-bottom:6px;
}

/* Tooltip: hover/focus (custom tooltip bubble) */
.apf-pf-tt-hover .thumb .apf-pf-tooltip{
  position:absolute;
  left:50%;
  top:100%;
  transform: translate(-50%, 6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition: opacity .15s ease, visibility .15s ease;
}

.apf-pf-tt-hover .apf-pf-item:hover .thumb .apf-pf-tooltip,
.apf-pf-tt-hover .apf-pf-item:focus-within .thumb .apf-pf-tooltip{
  opacity:1;
  visibility:visible;
}

/* Tooltip: over thumbnail (always visible overlay) */
.apf-pf-tt-over .thumb .apf-pf-tooltip{
  position:absolute;
  left:50%;
  bottom:6px;
  transform: translateX(-50%);
  pointer-events:none;
  z-index:5;
}