.pf-colorswatch__image img{max-width:100%;height:auto;display:block}
.pf-colorswatch__swatches{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pf-colorswatch__swatch{width:18px;height:18px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.pf-colorswatch.size-sm .pf-colorswatch__swatch{width:14px;height:14px}
.pf-colorswatch.size-lg .pf-colorswatch__swatch{width:24px;height:24px}
.pf-colorswatch.is-rounded .pf-colorswatch__swatch{border-radius:999px}

.pf-colorswatch__image img{border-radius:0}
.pf-colorswatch.img-corners-all .pf-colorswatch__image img{border-radius:16px}
.pf-colorswatch.img-corners-top .pf-colorswatch__image img{border-top-left-radius:16px;border-top-right-radius:16px}
.pf-colorswatch.img-corners-bottom .pf-colorswatch__image img{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
.pf-colorswatch.img-corners-tl .pf-colorswatch__image img{border-top-left-radius:16px}
.pf-colorswatch.img-corners-tr .pf-colorswatch__image img{border-top-right-radius:16px}
.pf-colorswatch.img-corners-bl .pf-colorswatch__image img{border-bottom-left-radius:16px}
.pf-colorswatch.img-corners-br .pf-colorswatch__image img{border-bottom-right-radius:16px}
.pf-colorswatch.img-corners-diag-l .pf-colorswatch__image img{border-top-left-radius:16px;border-bottom-right-radius:16px}
.pf-colorswatch.img-corners-diag-r .pf-colorswatch__image img{border-top-right-radius:16px;border-bottom-left-radius:16px}


.pf-colorswatch.swatches-pos-top{display:flex;flex-direction:column}
.pf-colorswatch.swatches-pos-top .pf-colorswatch__swatches{order:-1;margin-top:0;margin-bottom:10px}
.pf-colorswatch.swatches-pos-left{display:flex;align-items:flex-start;gap:14px}
.pf-colorswatch.swatches-pos-left .pf-colorswatch__swatches{margin-top:0;flex-direction:column}
.pf-colorswatch.swatches-pos-right{display:flex;align-items:flex-start;gap:14px}
.pf-colorswatch.swatches-pos-right .pf-colorswatch__swatches{margin-top:0;flex-direction:column;order:2}
.pf-colorswatch-admin .pf-cs-builder{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;max-width:1300px}
.pf-colorswatch-admin .pf-cs-card{background:#fff;border:1px solid #dcdcde;padding:18px;border-radius:10px;margin-bottom:20px}
.pf-colorswatch-admin .pf-cs-repeater__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pf-colorswatch-admin .pf-cs-row{border:1px solid #dcdcde;border-radius:10px;padding:12px;margin-bottom:12px;background:#fdfdfd}
.pf-colorswatch-admin .pf-cs-row__grid{display:grid;grid-template-columns:160px 160px 1fr 220px;gap:12px;align-items:end}
.pf-colorswatch-admin .pf-cs-row label{display:block;font-weight:600;margin-bottom:6px}
.pf-colorswatch-admin .pfcs-input{width:100%}
.pf-colorswatch-admin .pf-cs-row__actions .button-link-delete{margin-left:10px}
@media (max-width: 1100px){
  .pf-colorswatch-admin .pf-cs-builder{grid-template-columns:1fr}
  .pf-colorswatch-admin .pf-cs-row__grid{grid-template-columns:1fr}
}


.pf-colorswatch{position:relative}
.pf-colorswatch__image{position:relative}
.pf-colorswatch[class*="swatches-pos-overlay-"] .pf-colorswatch__swatches{
  position:absolute;
  z-index:3;
  margin:0;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(4px);
  padding:8px;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.12);
}
.pf-colorswatch.swatches-pos-overlay-tl .pf-colorswatch__swatches{top:12px;left:12px}
.pf-colorswatch.swatches-pos-overlay-tc .pf-colorswatch__swatches{top:12px;left:50%;transform:translateX(-50%)}
.pf-colorswatch.swatches-pos-overlay-tr .pf-colorswatch__swatches{top:12px;right:12px}
.pf-colorswatch.swatches-pos-overlay-center .pf-colorswatch__swatches{top:50%;left:50%;transform:translate(-50%,-50%)}
.pf-colorswatch.swatches-pos-overlay-bl .pf-colorswatch__swatches{bottom:12px;left:12px}
.pf-colorswatch.swatches-pos-overlay-bc .pf-colorswatch__swatches{bottom:12px;left:50%;transform:translateX(-50%)}
.pf-colorswatch.swatches-pos-overlay-br .pf-colorswatch__swatches{bottom:12px;right:12px}


.pf-colorswatch-admin{max-width:1400px}
.pf-cs-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;background:linear-gradient(135deg,#fff,#f7f7fb);border:1px solid #dcdcde;border-radius:16px;padding:20px 22px;margin:18px 0 20px;box-shadow:0 6px 20px rgba(16,24,40,.04)}
.pf-cs-hero h1{margin:0 0 6px;font-size:28px}
.pf-cs-hero p{margin:0;color:#50575e}
.pf-cs-hero__actions{display:flex;gap:10px}
.pf-colorswatch-admin .pf-cs-builder{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;max-width:1400px}
.pf-colorswatch-admin .pf-cs-card{background:#fff;border:1px solid #dcdcde;padding:18px;border-radius:16px;margin-bottom:20px;box-shadow:0 8px 24px rgba(16,24,40,.04)}
.pf-colorswatch-admin .pf-cs-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.pf-colorswatch-admin .pf-cs-card__head h2{margin:0;font-size:18px}
.pf-cs-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:600}
.pf-cs-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.pf-cs-label{display:block;font-weight:600;margin-bottom:6px}
.pf-cs-check{display:inline-flex;align-items:center;gap:8px;height:38px}
.pf-cs-list{margin:0;padding-left:18px}
.pf-cs-list li{margin:0 0 10px}
.pf-cs-shortcode{width:100%;min-height:64px;max-height:84px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;line-height:1.35}
.pf-cs-preview-wrap{padding:18px;border:1px dashed #dcdcde;border-radius:14px;background:#fafafa;min-height:260px;display:flex;align-items:center;justify-content:center}
#pfcs_preview_mount{width:min(100%,680px)}
.pf-cs-row{border:1px solid #e5e7eb;border-radius:14px;padding:14px;margin-bottom:12px;background:linear-gradient(180deg,#fff,#fcfcfd)}
.pf-cs-row__grid{display:grid;grid-template-columns:160px 160px 1fr 220px;gap:12px;align-items:end}
.pf-cs-row label{display:block;font-weight:600;margin-bottom:6px}
.pfcs-input{width:100%}
.pf-cs-row__actions .button-link-delete{margin-left:10px;color:#b42318}
.pf-colorswatch-admin select,.pf-colorswatch-admin input[type="text"]{min-width:0}
@media (max-width: 1100px){
  .pf-colorswatch-admin .pf-cs-builder{grid-template-columns:1fr}
  .pf-cs-grid-3{grid-template-columns:1fr}
  .pf-cs-row__grid{grid-template-columns:1fr}
  .pf-cs-hero{flex-direction:column}
}


.pf-colorswatch__swatch{background:transparent;transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
.pf-colorswatch__swatch:hover,.pf-colorswatch__swatch:focus{border-color:#111827;box-shadow:0 0 0 2px rgba(17,24,39,.12);outline:0;transform:translateY(-1px)}
.pf-cs-savebox{margin-bottom:14px}
.pf-cs-tablewrap{overflow:auto}
.pf-cs-table td,.pf-cs-table th{vertical-align:middle}
.pf-cs-mini-actions{display:flex;gap:6px;flex-wrap:wrap}


.pf-colorswatch.swatches-pos-top-center{display:flex;flex-direction:column}
.pf-colorswatch.swatches-pos-top-center .pf-colorswatch__swatches{order:-1;margin-top:0;margin-bottom:10px;justify-content:center}
.pf-colorswatch.swatches-pos-bottom-center .pf-colorswatch__swatches{justify-content:center}