/* File: templates/blocks/product-variations/style.css */
/* v2.1 — swatch + state */

.pf-variations{display:block}
.pf-var-row{margin:10px 0 14px}
.pf-var-label{font-weight:600;margin-bottom:6px}
.pf-swatch-list{display:flex;flex-wrap:wrap;gap:8px}

.pf-swatch{
  min-width:40px;min-height:32px;padding:6px 10px;
  border:1px solid #e5e7eb;border-radius:8px;background:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  line-height:1;font-size:14px;transition:.15s;
}
.pf-swatch:focus{outline:2px solid #1d4ed8;outline-offset:1px}
.pf-swatch[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(100%)}

.pf-swatch.pf--color{padding:4px}
.pf-swatch-chip{display:block;width:20px;height:20px;border-radius:6px;border:1px solid #e5e7eb}
.pf-swatch.pf--image{padding:4px}
.pf-swatch-img{display:block;width:28px;height:28px;border-radius:6px;object-fit:cover}

.pf-swatch.is-selected{
  border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

/* Swatch Shapes */
.pf-swatch-list.shape-circle .pf-swatch { border-radius: 9999px; }
.pf-swatch-list.shape-circle .pf-swatch.pf--color,
.pf-swatch-list.shape-circle .pf-swatch.pf--image { padding: 4px; }
.pf-swatch-list.shape-circle .pf-swatch-chip,
.pf-swatch-list.shape-circle .pf-swatch-img { border-radius: 9999px; }

.pf-swatch-list.shape-square .pf-swatch { border-radius: 0; }
.pf-swatch-list.shape-square .pf-swatch-chip,
.pf-swatch-list.shape-square .pf-swatch-img { border-radius: 0; }


.pf-var-msg{margin-top:8px;font-size:13px;color:#b91c1c}

/* Select Layout */
.pf-swatch-select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}