.pcw-connectors {
    --pcw-ink:#15151d;
    --pcw-muted:#74747d;
    --pcw-line:#ece9e4;
    margin:28px 0 18px;
    padding:0;
    color:var(--pcw-ink);
    font-family:inherit;
}
.pcw-connectors *, .pcw-connectors *::before, .pcw-connectors *::after { box-sizing:border-box; }
.pcw-connector { margin:0 0 10px; padding:18px 20px 20px; background:#fff; border:1px solid var(--pcw-line); border-radius:12px; box-shadow:0 5px 22px rgba(28,23,18,.035); }
.pcw-connector:last-child { margin-bottom:0; }
.pcw-connector-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; }
.pcw-connector-heading h3 { margin:0; color:var(--pcw-ink); font-family:Georgia,"Times New Roman",serif; font-size:21px; font-weight:500; letter-spacing:-.015em; line-height:1.15; }
.pcw-connector-heading > span { color:var(--pcw-muted); font-size:12px; white-space:nowrap; }
.pcw-options { display:flex; flex-wrap:wrap; gap:8px; }
.pcw-option { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 14px; background:#fff; border:1px solid #dedbd6; border-radius:10px; color:var(--pcw-ink)!important; font-size:13px; font-weight:600; line-height:1; text-decoration:none!important; box-shadow:none; transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease; }
.pcw-option:hover,.pcw-option:focus-visible { border-color:#aaa59e; box-shadow:0 5px 14px rgba(28,23,18,.07); transform:none; outline:none; }
.pcw-option.is-active { border-color:var(--pcw-ink); background:var(--pcw-ink); color:#fff!important; box-shadow:0 5px 14px rgba(21,21,29,.12); pointer-events:none; }
.pcw-type-color .pcw-option { width:38px; height:38px; min-height:38px; padding:4px; border-radius:50%; background:#fff; }
.pcw-type-color .pcw-option.is-active { background:#fff; border-color:var(--pcw-ink); box-shadow:0 0 0 2px #fff,0 0 0 3px var(--pcw-ink); }
.pcw-color-dot { display:block; width:26px; height:26px; border:1px solid rgba(0,0,0,.12); border-radius:50%; background:var(--pcw-color); }
.pcw-type-image .pcw-option { width:68px; height:68px; min-height:68px; padding:5px; overflow:hidden; background:#fff; }
.pcw-type-image .pcw-option.is-active { background:#fff; border-color:var(--pcw-ink); box-shadow:0 0 0 1px var(--pcw-ink); }
.pcw-type-image .pcw-option img { display:block; width:100%; height:100%; margin:0; object-fit:contain; border-radius:6px; }
.pcw-image-fallback { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:var(--pcw-ink); font-size:9px; line-height:1.2; text-align:center; }
.pcw-device-position { width:100%; }
@media (max-width:640px) {
    .pcw-connectors { margin:22px 0 14px; }
    .pcw-connector { padding:15px 14px 16px; }
    .pcw-connector-heading { margin-bottom:12px; }
    .pcw-connector-heading h3 { font-size:19px; }
    .pcw-option { min-height:40px; padding:8px 12px; font-size:12px; }
    .pcw-type-image .pcw-option { width:60px; height:60px; min-height:60px; }
}

/* v1.1.6 - Stable connector hover states.
 * The clickable box must never change geometry while the pointer is over it.
 * Only paint properties (colour/shadow) are allowed to animate.
 */
.pcw-option,
.pcw-option:hover,
.pcw-option:focus,
.pcw-option:focus-visible,
.pcw-option:active {
    box-sizing: border-box !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    border-width: 1px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-indent: 0 !important;
}

.pcw-option:hover,
.pcw-option:focus,
.pcw-option:focus-visible {
    margin: 0 !important;
}

.pcw-option > * {
}


/* v1.1.7 - Equal-width responsive grid for text options */
.pcw-type-text .pcw-options {
    display: grid !important;
    grid-template-columns: repeat(var(--pcw-cols-desktop, 5), minmax(0, 1fr)) !important;
    gap: 8px;
    width: 100%;
}

.pcw-type-text .pcw-option {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-left: 10px;
    padding-right: 10px;
}

.pcw-type-text .pcw-option > span {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .pcw-type-text .pcw-options {
        grid-template-columns: repeat(var(--pcw-cols-tablet, 4), minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .pcw-type-text .pcw-options {
        grid-template-columns: repeat(var(--pcw-cols-mobile, 2), minmax(0, 1fr)) !important;
    }
}

/* Catalog family size/option badges */
.pcw-catalog-family{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:7px 0 4px;font-size:11px;line-height:1.2}
.pcw-catalog-family span{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 7px;border:1px solid #dedbd6;border-radius:7px;background:#fff;color:#555;white-space:nowrap}

/* =========================================================
   CATALOG FAMILY – compact size buttons on product cards
   ========================================================= */
.pcw-catalog-family {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
    position: relative;
    z-index: 2;
}

.pcw-catalog-family .pcw-catalog-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 30px;
    padding: 4px 10px;
    box-sizing: border-box;
    border: 1px solid #d9dde3;
    border-radius: 0;
    background: #fff;
    color: #20242a !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease;
}

.pcw-catalog-family .pcw-catalog-size:hover,
.pcw-catalog-family .pcw-catalog-size:focus-visible {
    border-color: #8f98a3;
    background: #fafafa;
    color: #111 !important;
}

.pcw-catalog-family .pcw-catalog-size.is-active {
    border-color: #9da5ae;
    font-weight: 500;
}

@media (max-width: 767px) {
    .pcw-catalog-family {
        gap: 6px;
        margin-top: 7px;
        margin-bottom: 10px;
    }

    .pcw-catalog-family .pcw-catalog-size {
        min-width: 44px;
        min-height: 28px;
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* =========================================================
   v1.2.2 – Catalog family from-price + selected size
   ========================================================= */
.pcw-catalog-family-price {
    margin: 8px 0 4px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: #20242a;
}

.pcw-catalog-family-price--empty .pcw-catalog-no-price-text {
    font: inherit;
    color: #747a85;
}

.pcw-catalog-family-price .pcw-catalog-from-label {
    font-weight: 400;
}

.pcw-catalog-family-price .amount {
    font: inherit;
    color: inherit;
}

.pcw-catalog-family .pcw-catalog-size.is-active {
    border-color: #20242a;
    background: #f7f7f7;
    color: #111 !important;
    font-weight: 500;
}

@media (max-width: 767px) {
    .pcw-catalog-family-price {
        margin-top: 7px;
        font-size: 14px;
    }
}

/* =========================================================
   v1.2.4 – Catalog family: max three sizes on one row
   ========================================================= */
.pcw-catalog-family {
    flex-wrap: nowrap !important;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.pcw-catalog-family .pcw-catalog-size {
    flex: 0 1 auto;
}

.pcw-catalog-family .pcw-catalog-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0 5px;
    box-sizing: border-box;
    border: 1px solid #d9dde3;
    background: #fff;
    color: #555;
    font-size: 13px;
    line-height: 1;
    cursor: default;
}

.pcw-catalog-family .pcw-catalog-more-dots {
    display: block;
    transform: translateY(-1px);
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    .pcw-catalog-family .pcw-catalog-more {
        flex-basis: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: 12px;
    }
}

/* v1.3.8: immediate touch/click feedback without blocking the link click. */
.pcw-option.is-navigating {
    opacity: .58;
    background: #f1f1f1 !important;
    border-color: #d4d4d4 !important;
    transform: scale(.985);
    transition: opacity .08s ease, background-color .08s ease, border-color .08s ease, transform .08s ease;
}
