/* ================================================================
   WooCommerce Pantone Swatches — swatches.css
   ================================================================ */

/* ── Hide original <select> ──────────────────────────────────── */
.variations select.ptn-hidden {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   SWATCH GRID
════════════════════════════════════════════════════════════════ */
.ptn-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════
   CARD  — Pantone swatch proportions
   72 px wide · 3:4 chip → ~96 px · 34 px label = ~132 px total
════════════════════════════════════════════════════════════════ */
.ptn-card {
  position:   relative;
  width:       72px;
  background:  #ffffff;
  border:      1.5px solid #d4cfc9;
  cursor:      pointer;
  user-select: none;
  flex-shrink: 0;
  transition:
    border-color 0.17s ease,
    box-shadow   0.17s ease,
    transform    0.14s ease;
}

/* Hover — lift */
.ptn-card:hover:not(.ptn-card--disabled):not(.ptn-card--selected) {
  border-color: #444;
  transform:    translateY(-4px);
  box-shadow:   0 8px 22px rgba(0,0,0,0.13);
  z-index:      2;
}

/* ── Selected ── */
.ptn-card--selected {
  border-color: #111 !important;
  box-shadow:   0 0 0 1.5px #111 !important;
  transform:    translateY(-2px) !important;
}

/* Selected dot — top-right corner */
.ptn-card--selected::after {
  content:       '';
  position:      absolute;
  top:           5px;
  right:         5px;
  width:         9px;
  height:        9px;
  background:    #111;
  border-radius: 50%;
  border:        1.5px solid #fff;
  z-index:       3;
}

/* ── Chip (image area · 3:4 portrait) ── */
.ptn-card__chip {
  position:     relative;
  width:        100%;
  aspect-ratio: 3 / 4;
  overflow:     hidden;
  background:   #e9e4de;   /* warm neutral placeholder */
}

.ptn-card__chip img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}

/* ── Label tab (Pantone strip) ── */
.ptn-card__label {
  padding:        5px 6px 8px;
  font-family:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          #1a1a1a;
  line-height:    1.35;
  word-break:     break-word;
  background:     #efebe6;
  border-top:     1.5px solid #d4cfc9;
  min-height:     34px;
}

/* ── Disabled / unavailable ── */
.ptn-card--disabled {
  opacity:        0.38;
  cursor:         not-allowed;
  pointer-events: none;
}

/* Diagonal crosshatch on chip */
.ptn-card--disabled .ptn-card__chip::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent         4px,
    rgba(0,0,0,0.16)    4px,
    rgba(0,0,0,0.16)    5.5px
  );
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   QUANTITY  +  /  −  BUTTONS
════════════════════════════════════════════════════════════════ */

/* Wrap the native <input.qty> with flex so buttons sit flush */
.ptn-qty-done {
  display:     flex !important;
  align-items: stretch;
  gap:         0;
  width:       fit-content !important;
  max-width:   none !important;
}

/* Style the existing WooCommerce number input */
.ptn-qty-done input.qty {
  width:        52px !important;
  height:       44px !important;
  border:       1.5px solid #111 !important;
  border-left:  none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background:   #fff !important;
  color:        #111 !important;
  font-size:    15px !important;
  font-weight:  600 !important;
  text-align:   center !important;
  padding:      0 !important;
  margin:       0 !important;
  outline:      none !important;
  box-shadow:   none !important;
  /* hide browser spinners */
  -moz-appearance: textfield !important;
  appearance:      textfield !important;
}
.ptn-qty-done input.qty::-webkit-inner-spin-button,
.ptn-qty-done input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* +  /  − buttons */
.ptn-qty-btn {
  width:         44px;
  height:        44px;
  background:    #111111;
  color:         #ffffff;
  border:        1.5px solid #111111;
  border-radius: 0;
  cursor:        pointer;
  font-size:     22px;
  font-weight:   300;
  line-height:   1;
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       0;
  margin:        0;
  flex-shrink:   0;
  transition:    background 0.15s ease;
  outline:       none;
  /* sit on top of input border */
  position:      relative;
  z-index:       1;
}

.ptn-qty-btn:hover:not(:disabled) {
  background: #333333;
  border-color: #333333;
}

.ptn-qty-btn:active:not(:disabled) {
  background: #555555;
}

.ptn-qty-btn:disabled {
  background:  #aaaaaa;
  border-color: #aaaaaa;
  cursor:      not-allowed;
}