/* Custom Product Options v2.1 — Frontend Styles (flat CSS, LiteSpeed-safe) */
.cpo-options-wrap { margin: 16px 0 20px; padding: 0; }
.cpo-field { margin-bottom: 18px; }
.cpo-label { display:block; font-size:14px; font-weight:600; color:#1a1a1a; margin-bottom:8px; letter-spacing:0.02em; text-transform:uppercase; }
.cpo-required { color:#e2401c; font-weight:700; }
.cpo-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.cpo-swatch { position:relative; display:inline-flex; align-items:center; justify-content:center; border:2px solid #d1d5db; background:#fff; cursor:pointer; transition:all 0.15s ease; -webkit-appearance:none; appearance:none; outline:none; font-family:inherit; }
.cpo-swatch:hover { border-color:#6b7280; }
.cpo-swatch.cpo-active { border-color:#1a1a1a; box-shadow:0 0 0 1px #1a1a1a; }
.cpo-size { min-width:44px; height:44px; padding:0 14px; border-radius:6px; font-size:13px; font-weight:600; color:#374151; letter-spacing:0.03em; }
.cpo-size:hover { background:#f3f4f6; }
.cpo-size.cpo-active { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.cpo-color { width:36px; height:36px; border-radius:50%; padding:0; border:2px solid #e5e7eb; background:transparent; position:relative; overflow:visible; }
.cpo-color-dot { display:block; width:28px; height:28px; border-radius:50%; background-color:var(--swatch-color,#000); transition:transform 0.15s ease; }
.cpo-color:hover { border-color:#9ca3af; }
.cpo-color:hover .cpo-color-dot { transform:scale(1.05); }
.cpo-color.cpo-active { border-color:#1a1a1a; box-shadow:0 0 0 2px #fff,0 0 0 4px #1a1a1a; }
.cpo-color::after { content:attr(title); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); background:#1a1a1a; color:#fff; font-size:11px; font-weight:500; padding:4px 10px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.15s ease,transform 0.15s ease; z-index:10; }
.cpo-color:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
.cpo-color-selected-label { display:block; margin-top:6px; font-size:13px; color:#4b5563; min-height:18px; font-weight:500; }
.cpo-btn { min-width:44px; height:40px; padding:0 16px; border-radius:6px; font-size:13px; font-weight:500; color:#374151; }
.cpo-btn:hover { background:#f3f4f6; }
.cpo-btn.cpo-active { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.cpo-dropdown { display:block; width:100%; max-width:320px; height:44px; padding:0 36px 0 14px; border:2px solid #d1d5db; border-radius:6px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; font-size:14px; color:#374151; cursor:pointer; -webkit-appearance:none; appearance:none; transition:border-color 0.15s ease; }
.cpo-dropdown:focus { outline:none; border-color:#1a1a1a; box-shadow:0 0 0 1px #1a1a1a; }
.cpo-text-wrap { position:relative; max-width:100%; }
.cpo-text-input { display:block; width:100%; max-width:420px; height:44px; padding:0 60px 0 14px; border:2px solid #d1d5db; border-radius:6px; font-size:14px; color:#1a1a1a; background:#fff; transition:border-color 0.15s ease; }
.cpo-text-input:focus { outline:none; border-color:#1a1a1a; box-shadow:0 0 0 1px #1a1a1a; }
.cpo-text-input::placeholder { color:#9ca3af; }
.cpo-char-count { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:11px; color:#9ca3af; pointer-events:none; font-variant-numeric:tabular-nums; }
.cpo-char-count .cpo-char-current { color:#6b7280; }
/* ── Image Swatch ── */
.cpo-image-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.cpo-image-swatch { position:relative; width:72px; border:2px solid #d1d5db; border-radius:6px; padding:0; background:#fff; cursor:pointer; -webkit-appearance:none; appearance:none; outline:none; overflow:hidden; transition:border-color 0.15s ease, box-shadow 0.15s ease; }
.cpo-image-swatch img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; pointer-events:none; }
.cpo-image-swatch .cpo-img-label { display:block; width:100%; padding:3px 4px; font-size:10px; font-weight:600; text-align:center; color:#374151; background:#f9fafb; border-top:1px solid #e5e7eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.cpo-image-swatch:hover { border-color:#6b7280; }
.cpo-image-swatch.cpo-active { border-color:#1a1a1a; box-shadow:0 0 0 2px #1a1a1a; }
.cpo-image-swatch .cpo-img-check { display:none; position:absolute; top:3px; right:3px; width:16px; height:16px; background:#1a1a1a; border-radius:50%; align-items:center; justify-content:center; }
.cpo-image-swatch.cpo-active .cpo-img-check { display:flex; }
.cpo-image-swatch .cpo-img-check::after { content:''; display:block; width:4px; height:7px; border:1.5px solid #fff; border-top:none; border-left:none; transform:rotate(45deg) translate(-1px,-1px); }
/* ── Error states ── */
.cpo-field.cpo-error .cpo-swatches .cpo-swatch,
.cpo-field.cpo-error .cpo-image-swatches .cpo-image-swatch { border-color:#fca5a5; }
.cpo-field.cpo-error .cpo-dropdown, .cpo-field.cpo-error .cpo-text-input { border-color:#ef4444; }
.cpo-field.cpo-error .cpo-label { color:#dc2626; }
.cpo-error-msg { display:block; margin-top:4px; font-size:12px; color:#dc2626; font-weight:500; }
/* ── Admin image swatch builder ── */
.cpo-img-rows { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.cpo-img-row { display:flex; flex-direction:column; align-items:center; gap:4px; background:#f9f9f9; border:1px solid #ddd; border-radius:6px; padding:8px; width:110px; position:relative; }
.cpo-img-row img.cpo-thumb { width:80px; height:80px; object-fit:cover; border-radius:4px; border:1px solid #ddd; display:block; }
.cpo-img-row img.cpo-thumb[src=""] { display:none; }
.cpo-img-row .cpo-img-placeholder { width:80px; height:80px; border-radius:4px; border:2px dashed #ccc; display:flex; align-items:center; justify-content:center; font-size:28px; color:#bbb; cursor:pointer; background:#fff; }
.cpo-img-row input[type="text"] { width:90px; font-size:11px; padding:2px 4px; border:1px solid #ccc; border-radius:3px; text-align:center; }
.cpo-remove-img-row { position:absolute; top:2px; right:4px; color:#a00; cursor:pointer; font-size:14px; font-weight:700; line-height:1; background:none; border:none; padding:0; }
@media (max-width:480px) {
  .cpo-size { min-width:40px; height:40px; padding:0 10px; font-size:12px; }
  .cpo-color { width:32px; height:32px; }
  .cpo-color-dot { width:24px; height:24px; }
  .cpo-text-input, .cpo-dropdown { max-width:100%; }
  .cpo-image-swatch { width:60px; }
}
.single-product .cpo-options-wrap { clear:both; }
.single-product .cpo-swatch:focus { outline:none; }
.single-product .cpo-swatches .cpo-swatch { line-height:1; text-decoration:none; box-sizing:border-box; }