/* WooDecal Customizer — Global Attribute Swatches frontend */
.gfx-swatches-native-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.gfx-global-swatch-control {
    display: flex;
    gap: 8px;
    margin: 8px 0 4px;
    flex-wrap: wrap;
    align-items: center;
}
.gfx-global-swatch-control.gfx-swatches-style-horizontal {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.gfx-global-swatch-control.gfx-swatches-style-vertical {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.gfx-global-swatch-control.gfx-swatches-style-vertical .gfx-swatch-option,
.gfx-global-swatch-control.gfx-swatches-style-vertical .gfx-swatch-radio {
    max-width: 100%;
}

.gfx-swatch-option,
.gfx-swatch-radio {
    box-sizing: border-box;
    border: 1px solid #b7cbd8;
    background: #fff;
    color: #222;
    min-height: 38px;
    min-width: 44px;
    padding: 7px 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.gfx-swatch-option:hover,
.gfx-swatch-option:focus,
.gfx-swatch-radio:hover,
.gfx-swatch-radio:focus {
    border-color: #b7cbd8 !important;
    box-shadow: none !important;
    outline: none !important;
    background: #fff !important;
}

/* Selected state uses a neutral WooDecal border, never the orange accent. */
.gfx-swatch-option.is-selected,
.gfx-swatch-radio.is-selected {
    border-color: #748187 !important;
    box-shadow: 0 0 0 1px #748187 !important;
    outline: none !important;
}
.gfx-swatch-option.is-disabled,
.gfx-swatch-radio.is-disabled {
    opacity: .35;
    cursor: not-allowed;
}

.gfx-swatches-profile-button .gfx-swatch-option,
.gfx-swatches-profile-button .gfx-swatch-radio {
    border-radius: 2px;
}
.gfx-swatches-profile-color .gfx-swatch-option {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 3px;
    border-radius: 50%;
}
.gfx-swatches-profile-image .gfx-swatch-option {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    padding: 3px;
    border-radius: 2px;
}

.gfx-swatch-color-dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.10);
    /* The saved WooCommerce term HEX is authoritative. Protect the chip from
       theme span/button background, gradient, opacity and filter rules. */
    background-color: var(--gfx-swatch-term-color, transparent) !important;
    background-image: none !important;
    filter: none !important;
}
.gfx-swatches-profile-button .gfx-swatch-color-dot {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
.gfx-swatch-image {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
}
.gfx-swatch-radio {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}
.gfx-swatch-radio input {
    margin: 0;
}

/* Keep theme button hover/active rules from painting WooDecal swatches green. */
.gfx-global-swatch-control .gfx-swatch-option,
.gfx-global-swatch-control .gfx-swatch-radio,
.gfx-global-swatch-control .gfx-swatch-option:hover,
.gfx-global-swatch-control .gfx-swatch-option:focus,
.gfx-global-swatch-control .gfx-swatch-radio:hover,
.gfx-global-swatch-control .gfx-swatch-radio:focus {
    background-color: #fff !important;
    background-image: none !important;
}

/* Text/button swatches retain the familiar dark selected state. */
.gfx-swatches-profile-button .gfx-swatch-option.is-selected,
.gfx-swatches-profile-button .gfx-swatch-radio.is-selected {
    background: #1f2529 !important;
    border-color: #1f2529 !important;
    box-shadow: none !important;
    color: #fff !important;
}
.gfx-swatches-profile-button .gfx-swatch-option.is-selected *,
.gfx-swatches-profile-button .gfx-swatch-radio.is-selected * {
    color: #fff !important;
}

/* Color swatches must show only the configured term color. The surrounding
   button always stays white, including hover and selected states. */
.gfx-swatches-profile-color .gfx-swatch-option,
.gfx-swatches-profile-color .gfx-swatch-option:hover,
.gfx-swatches-profile-color .gfx-swatch-option:focus,
.gfx-swatches-profile-color .gfx-swatch-option.is-selected {
    background: #fff !important;
    background-color: #fff !important;
}
.gfx-swatches-profile-color .gfx-swatch-option:hover .gfx-swatch-color-dot,
.gfx-swatches-profile-color .gfx-swatch-option:focus .gfx-swatch-color-dot,
.gfx-swatches-profile-color .gfx-swatch-option.is-selected .gfx-swatch-color-dot {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

.gfx-loop-swatches {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.gfx-loop-swatches.gfx-swatches-style-vertical { flex-direction: column; align-items: flex-start; }
.gfx-loop-swatches.gfx-swatches-style-horizontal { flex-direction: row; }
.gfx-loop-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 26px;
    padding: 3px;
    border: 1px solid #b7cbd8;
    background: #fff;
    text-decoration: none !important;
}
.gfx-loop-swatch .gfx-swatch-chip { width: 20px; height: 20px; border-radius: 50%; display: block; }
.gfx-loop-swatch img { width: 34px; height: 34px; object-fit: cover; display:block; }


/* rc.50 — keep text/button swatch labels readable in every hover/focus state.
   Theme button rules must never override WooDecal selected/unselected text. */
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option:not(.is-selected),
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option:not(.is-selected):hover,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option:not(.is-selected):focus,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio:not(.is-selected),
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio:not(.is-selected):hover,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio:not(.is-selected):focus {
    background: #fff !important;
    background-color: #fff !important;
    color: #222 !important;
    border-color: #b7cbd8 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option:not(.is-selected) *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option:not(.is-selected):hover *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option:not(.is-selected):focus *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio:not(.is-selected) *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio:not(.is-selected):hover *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio:not(.is-selected):focus * {
    color: #222 !important;
    text-shadow: none !important;
}
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected:hover,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected:focus,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected:hover,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected:focus {
    background: #1f2529 !important;
    background-color: #1f2529 !important;
    color: #fff !important;
    border-color: #1f2529 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected:hover *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected:focus *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected:hover *,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected:focus * {
    color: #fff !important;
    text-shadow: none !important;
}


/* rc.17 — restore storefront display-style layout and compact button proportions. */
.gfx-global-swatch-control.gfx-swatches-profile-button {
    gap: 10px;
}
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option,
.gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio {
    min-height: 36px;
    padding: 8px 14px;
}
.gfx-woodecal-mirroring-control.gfx-swatches-style-vertical {
    align-items: flex-start;
}
.gfx-woodecal-mirroring-control.gfx-swatches-style-vertical .gfx-woodecal-mirroring-button {
    min-width: 172px;
}


/* rc.21 — storefront layout repair.
 * Display style controls the attribute section presentation, not whether the
 * individual variation values are stacked. Choices always remain in a
 * horizontal wrapping row, matching the original WooVisual/WooDecal layout. */
.gfx-global-swatch-control.gfx-swatches-style-vertical,
.gfx-global-swatch-control.gfx-swatches-style-horizontal {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.gfx-global-swatch-control.gfx-swatches-style-vertical .gfx-swatch-option,
.gfx-global-swatch-control.gfx-swatches-style-vertical .gfx-swatch-radio {
    max-width: none;
}
.gfx-woodecal-mirroring-control.gfx-swatches-style-vertical,
.gfx-woodecal-mirroring-control.gfx-swatches-style-horizontal {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.gfx-woodecal-mirroring-control.gfx-swatches-style-vertical .gfx-woodecal-mirroring-button,
.gfx-woodecal-mirroring-control.gfx-swatches-style-horizontal .gfx-woodecal-mirroring-button {
    min-width: 132px;
    width: auto;
}


/* rc.33 — keep variation choices compact on every theme. */
form.variations_form .gfx-global-swatch-control,
form.variations_form .gfx-woodecal-mirroring-control {
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
}

/* rc.43 — customer Custom Size control for Decal. */
.gfx-custom-size-button {
    min-width: 150px;
}
.gfx-global-swatch-control .gfx-custom-size-button.is-selected,
.gfx-global-swatch-control .gfx-custom-size-button.is-selected:hover,
.gfx-global-swatch-control .gfx-custom-size-button.is-selected:focus {
    background:#1f2529 !important;
    border-color:#1f2529 !important;
    color:#fff !important;
}
.gfx-custom-size-panel {
    width:100%;
    margin:10px 0 12px;
    padding:12px 14px 14px;
    border:1px solid #d8dde1;
    background:#fafafa;
    box-sizing:border-box;
}
.gfx-custom-size-panel[hidden]{display:none!important}
.gfx-custom-size-fields {
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
}
.gfx-custom-size-field {
    display:grid;
    gap:5px;
}
.gfx-custom-size-field__label {
    font-size:12px;
    font-weight:600;
}
.gfx-custom-size-number {
    display:flex;
    align-items:stretch;
}
.gfx-custom-size-number .gfx-custom-size-step,
.gfx-custom-size-number .gfx-custom-size-input {
    height:38px;
    box-sizing:border-box;
    border:1px solid #c7c9cc;
    background:#fff;
    color:#1d2327;
}
.gfx-custom-size-number .gfx-custom-size-step {
    width:36px;
    min-width:36px;
    padding:0;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}
.gfx-custom-size-number .gfx-custom-size-input {
    width:78px;
    padding:6px 8px;
    border-left:0;
    border-right:0;
    text-align:center;
}
.gfx-custom-size-lock {
    width:42px;
    min-width:42px;
    height:38px;
    padding:0;
    border:1px solid #c7c9cc;
    background:#fff;
    cursor:pointer;
    font-size:18px;
    line-height:1;
}
.gfx-custom-size-lock:disabled { opacity:.7; cursor:default; }
.gfx-custom-size-slider {
    width:100%;
    margin:14px 0 0;
    /* Inherit the storefront's WooCommerce button accent instead of using
       the browser's default blue range color. JS sets this variable from the
       current theme's Add to basket button. */
    accent-color:var(--gfx-woovisual-accent,var(--gfx-custom-size-accent,#3b990c));
}
.gfx-custom-size-slider::-webkit-slider-thumb {
    background:var(--gfx-woovisual-accent,var(--gfx-custom-size-accent,#3b990c));
}
.gfx-custom-size-slider::-moz-range-thumb {
    background:var(--gfx-woovisual-accent,var(--gfx-custom-size-accent,#3b990c));
    border-color:var(--gfx-woovisual-accent,var(--gfx-custom-size-accent,#3b990c));
}
.gfx-custom-size-slider::-moz-range-progress {
    background:var(--gfx-woovisual-accent,var(--gfx-custom-size-accent,#3b990c));
}
.gfx-custom-size-panel.is-unlocked .gfx-custom-size-slider { display:none; }
@media(max-width:600px){
    .gfx-custom-size-fields { align-items:stretch; }
    .gfx-custom-size-field { flex:1 1 140px; }
    .gfx-custom-size-number .gfx-custom-size-input { width:100%; min-width:70px; }
}
.gfx-global-swatch-control .gfx-custom-size-button {
    width:auto !important;
    height:auto !important;
    min-width:150px !important;
    min-height:36px !important;
    padding:8px 14px !important;
    border-radius:2px !important;
}

/* rc.47 — Custom Size confirmation dialogs. */
.gfx-custom-size-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.52);
    box-sizing: border-box;
}
.gfx-custom-size-modal__dialog {
    width: min(520px, 100%);
    max-height: min(80vh, 620px);
    overflow: auto;
    padding: 24px;
    border-radius: 6px;
    background: #fff;
    color: #1d2327;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    box-sizing: border-box;
}
.gfx-custom-size-modal__title {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.3;
}
.gfx-custom-size-modal__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}
.gfx-custom-size-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.gfx-custom-size-modal__actions button {
    min-height: 40px;
    padding: 8px 16px;
    cursor: pointer;
}
.gfx-custom-size-modal__cancel {
    border: 1px solid #c7c9cc;
    background: #fff;
    color: #1d2327;
}
.gfx-custom-size-modal__accept {
    border: 1px solid var(--gfx-custom-size-accent, #1f2529);
    background: var(--gfx-custom-size-accent, #1f2529);
    color: #fff;
}

/* rc.54 — optional Modern storefront layout for selected colour attributes only. */
tr.gfx-modern-color-source-row {
    display: none !important;
}
tr.gfx-modern-colors-row > td {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.gfx-modern-colors-host {
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
    box-sizing: border-box;
}
.gfx-modern-colors-grid {
    display: grid;
    grid-template-columns: repeat(var(--gfx-modern-color-columns, 3), minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
.gfx-modern-color-card {
    min-width: 0;
}
.gfx-modern-color-label {
    margin: 0 0 7px;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
}
.gfx-modern-color-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 4px !important;
    border: 1px solid #8b9296 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    box-sizing: border-box;
}
.gfx-modern-color-trigger:hover,
.gfx-modern-color-trigger:focus,
.gfx-modern-color-trigger.is-open {
    border-color: #525b60 !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px #525b60 !important;
    outline: none !important;
}
.gfx-modern-color-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    overflow: hidden;
    background: #fff;
    color: #555;
    line-height: 30px;
    box-sizing: border-box;
}
.gfx-modern-color-preview.has-color {
    border: 1px solid rgba(0,0,0,.08);
}
.gfx-modern-color-preview .gfx-swatch-color-dot {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
}
.gfx-modern-color-preview .gfx-swatch-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gfx-modern-color-name {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}
.gfx-modern-colors-palette {
    position: relative;
    width: 100%;
    margin-top: 8px;
    padding: 6px 30px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    z-index: 4;
}
.gfx-modern-colors-palette[hidden],
.gfx-modern-palette-control[hidden] {
    display: none !important;
}
.gfx-modern-colors-palette__close {
    position: absolute !important;
    top: 4px;
    right: 7px;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #333 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.gfx-modern-colors-palette .gfx-global-swatch-control {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
@media (max-width: 640px) {
    .gfx-modern-colors-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
}


/* rc.55 — keep Modern colour UI in the Add Attributes position and improve affordance. */
tr.gfx-modern-color-anchor-row {
    display: block !important;
    width: 100% !important;
}
tr.gfx-modern-color-anchor-row > .gfx-modern-color-anchor-label {
    display: none !important;
}
tr.gfx-modern-color-anchor-row > td.value,
tr.gfx-modern-color-anchor-row > th.value,
tr.gfx-modern-color-anchor-row > .value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}
.gfx-modern-color-anchor-row .gfx-modern-colors-host {
    margin-top: 0;
}
.gfx-modern-colors-grid {
    justify-items: start;
}
.gfx-modern-color-card {
    width: 100%;
    min-width: 0;
}
.gfx-modern-color-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 7px;
}
.gfx-modern-color-label__name {
    font-weight: 600;
}
.gfx-modern-color-label__value,
.gfx-selected-variation-name {
    font-weight: 600;
    color: inherit;
}
.gfx-selected-variation-name {
    display: inline-block;
    margin-left: 8px;
}
.gfx-modern-color-trigger {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 5px 8px 5px 6px !important;
    justify-content: space-between !important;
    gap: 6px;
}
.gfx-modern-color-preview {
    flex: 0 0 74px;
    width: 74px !important;
    height: 30px !important;
    line-height: 30px !important;
    border: 1px solid rgba(0,0,0,.16);
}
.gfx-modern-color-chevron {
    flex: 0 0 auto;
    display: inline-block;
    margin-right: 1px;
    font-size: 9px;
    line-height: 1;
    color: #555;
    transform-origin: center;
    transition: transform .15s ease;
}
.gfx-modern-color-trigger.is-open .gfx-modern-color-chevron {
    transform: rotate(180deg);
}
.gfx-modern-color-trigger:hover .gfx-modern-color-chevron,
.gfx-modern-color-trigger:focus .gfx-modern-color-chevron {
    color: #111;
}
@media (max-width: 640px) {
    .gfx-modern-color-card {
        width: auto;
    }
}


/* rc.56 — Modern colour cards own their label/value line; suppress legacy duplicates. */
tr.gfx-modern-color-anchor-row .gfx-selected-variation-name,
tr.gfx-modern-color-anchor-row > .gfx-modern-color-anchor-label,
tr.gfx-modern-color-anchor-row > .gfx-modern-color-anchor-label label {
    display: none !important;
}


/* rc.57 — selected storefront controls inherit the current theme's WooCommerce button palette.
   Fallbacks preserve the previous dark appearance if a theme exposes no usable button colour. */
form.variations_form {
    --gfx-theme-button-bg: #1f2529;
    --gfx-theme-button-color: #fff;
    --gfx-theme-button-border: #1f2529;
    --gfx-theme-button-radius: 2px;
    --gfx-theme-button-border-width: 1px;
    --gfx-theme-button-border-style: solid;
    --gfx-theme-button-font-family: inherit;
    --gfx-theme-button-font-size: inherit;
    --gfx-theme-button-font-weight: inherit;
    --gfx-theme-button-line-height: normal;
    --gfx-theme-button-letter-spacing: normal;
    --gfx-theme-button-text-transform: none;
    --gfx-theme-button-padding-top: 8px;
    --gfx-theme-button-padding-right: 14px;
    --gfx-theme-button-padding-bottom: 8px;
    --gfx-theme-button-padding-left: 14px;
    --gfx-theme-button-height: 36px;
    --gfx-theme-button-min-height: 36px;
    --gfx-theme-button-shadow: none;
}
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected,
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected:hover,
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected:focus,
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected,
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected:hover,
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected:focus,
form.variations_form .gfx-global-swatch-control .gfx-custom-size-button.is-selected,
form.variations_form .gfx-global-swatch-control .gfx-custom-size-button.is-selected:hover,
form.variations_form .gfx-global-swatch-control .gfx-custom-size-button.is-selected:focus,
form.variations_form .gfx-woodecal-mirroring-control .gfx-woodecal-mirroring-button.is-active,
form.variations_form .gfx-woodecal-mirroring-control .gfx-woodecal-mirroring-button.is-active:hover,
form.variations_form .gfx-woodecal-mirroring-control .gfx-woodecal-mirroring-button.is-active:focus {
    background: var(--gfx-theme-button-bg) !important;
    background-color: var(--gfx-theme-button-bg) !important;
    border-color: var(--gfx-theme-button-border) !important;
    color: var(--gfx-theme-button-color) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected *,
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected *,
form.variations_form .gfx-global-swatch-control .gfx-custom-size-button.is-selected *,
form.variations_form .gfx-woodecal-mirroring-control .gfx-woodecal-mirroring-button.is-active * {
    color: var(--gfx-theme-button-color) !important;
}

/* rc.67 — Color swatch shape is controlled directly by Display type = Color.
   The old independent Swatches profile setting is no longer used. */
.gfx-global-swatch-control.gfx-swatches-profile-color .gfx-swatch-option {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gfx-global-swatch-control.gfx-swatches-profile-color .gfx-swatch-color-dot {
    margin: 0 !important;
    box-sizing: border-box;
}

/* 1. Circle Outline */
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-circle_outline .gfx-swatch-option {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 5px;
    border: 2px solid #b7cbd8;
    border-radius: 50%;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-circle_outline .gfx-swatch-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* 2. Circle Solid */
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-circle_solid .gfx-swatch-option {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-circle_solid .gfx-swatch-color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* 3. Square Solid */
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-square_solid .gfx-swatch-option {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-square_solid .gfx-swatch-color-dot {
    width: 32px;
    height: 32px;
    border-radius: 0;
}

/* 4. Square Outline */
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-square_outline .gfx-swatch-option {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 5px;
    border: 2px solid #b7cbd8;
    border-radius: 0;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-square_outline .gfx-swatch-color-dot {
    width: 26px;
    height: 26px;
    border-radius: 0;
}

/* 5. Rounded Solid */
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-rounded_solid .gfx-swatch-option {
    width: 54px;
    height: 36px;
    min-width: 54px;
    min-height: 36px;
    padding: 0;
    border: 0 !important;
    border-radius: 15px;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-rounded_solid .gfx-swatch-color-dot {
    width: 52px;
    height: 34px;
    border-radius: 14px;
}

/* 6. Rounded Outline */
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-rounded_outline .gfx-swatch-option {
    width: 60px;
    height: 40px;
    min-width: 60px;
    min-height: 40px;
    padding: 5px;
    border: 2px solid #b7cbd8;
    border-radius: 18px;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-rounded_outline .gfx-swatch-color-dot {
    width: 46px;
    height: 26px;
    border-radius: 11px;
}

/* Selection is independent from the chosen base shape. */
.gfx-global-swatch-control.gfx-swatches-profile-color .gfx-swatch-option.is-selected,
.gfx-global-swatch-control.gfx-swatches-profile-color .gfx-swatch-option.is-selected:hover,
.gfx-global-swatch-control.gfx-swatches-profile-color .gfx-swatch-option.is-selected:focus {
    border-color: #1f2529 !important;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1f2529 !important;
}

/* Product-loop color previews use the same six shape families. */
.gfx-loop-swatch--color.gfx-color-style-circle_outline,
.gfx-loop-swatch--color.gfx-color-style-square_outline,
.gfx-loop-swatch--color.gfx-color-style-rounded_outline {
    background: #fff;
    border: 1px solid #b7cbd8;
}
.gfx-loop-swatch--color.gfx-color-style-circle_outline,
.gfx-loop-swatch--color.gfx-color-style-circle_solid { border-radius: 50%; }
.gfx-loop-swatch--color.gfx-color-style-square_outline,
.gfx-loop-swatch--color.gfx-color-style-square_solid { border-radius: 0; }
.gfx-loop-swatch--color.gfx-color-style-rounded_outline,
.gfx-loop-swatch--color.gfx-color-style-rounded_solid { border-radius: 12px; min-width: 38px; }
.gfx-loop-swatch--color.gfx-color-style-circle_solid,
.gfx-loop-swatch--color.gfx-color-style-square_solid,
.gfx-loop-swatch--color.gfx-color-style-rounded_solid { border-color: transparent; padding: 1px; }
.gfx-loop-swatch--color.gfx-color-style-square_outline .gfx-swatch-chip,
.gfx-loop-swatch--color.gfx-color-style-square_solid .gfx-swatch-chip { border-radius: 0; }
.gfx-loop-swatch--color.gfx-color-style-rounded_outline .gfx-swatch-chip,
.gfx-loop-swatch--color.gfx-color-style-rounded_solid .gfx-swatch-chip { border-radius: 9px; width: 32px; }

/* rc.68 — third storefront mode: Popup. The colour controls are the exact
   same Global Attribute Swatches controls used by Classic and Modern; only
   their presentation container changes. The overlay is created lazily on the
   first click, so it adds no meaningful work to initial product rendering. */
.gfx-popup-colors-stash[hidden],
.gfx-popup-colors-overlay[hidden] {
    display: none !important;
}
body.gfx-popup-colors-open {
    overflow: hidden;
}
.gfx-popup-colors-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .34);
    box-sizing: border-box;
}
.gfx-popup-colors-dialog {
    width: min(520px, calc(100vw - 40px));
    max-height: min(72vh, 620px);
    overflow: auto;
    background: #fff;
    color: #1d2327;
    border: 1px solid rgba(0,0,0,.14);
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
    box-sizing: border-box;
    outline: none;
}
.gfx-popup-colors-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 10px 12px 10px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.10);
    box-sizing: border-box;
}
.gfx-popup-colors-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.gfx-popup-colors-close {
    flex: 0 0 auto;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #333 !important;
    box-shadow: none !important;
    font-size: 22px !important;
    line-height: 32px !important;
    cursor: pointer;
}
.gfx-popup-colors-content {
    padding: 16px;
}
.gfx-popup-colors-content .gfx-modern-palette-control[hidden] {
    display: none !important;
}
.gfx-popup-colors-content .gfx-global-swatch-control {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
@media (max-width: 640px) {
    .gfx-popup-colors-overlay {
        align-items: flex-end;
        padding: 12px;
    }
    .gfx-popup-colors-dialog {
        width: 100%;
        max-height: 70vh;
    }
    .gfx-popup-colors-content {
        padding: 14px;
    }
}



/* rc.72 — theme-native storefront controls.
 * WooVisual samples the active WooCommerce add-to-cart button at runtime and
 * reuses its shape/typography/spacing DNA for button-like variation controls.
 * Colour swatches keep their explicit six Color swatch style shapes. */
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option,
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio,
form.variations_form .gfx-global-swatch-control .gfx-custom-size-button {
    border-radius: var(--gfx-theme-button-radius) !important;
    border-width: var(--gfx-theme-button-border-width) !important;
    border-style: var(--gfx-theme-button-border-style) !important;
    font-family: var(--gfx-theme-button-font-family) !important;
    font-size: var(--gfx-theme-button-font-size) !important;
    font-weight: var(--gfx-theme-button-font-weight) !important;
    line-height: var(--gfx-theme-button-line-height) !important;
    letter-spacing: var(--gfx-theme-button-letter-spacing) !important;
    text-transform: var(--gfx-theme-button-text-transform) !important;
    height: var(--gfx-theme-button-height) !important;
    min-height: var(--gfx-theme-button-height) !important;
    padding: 0 var(--gfx-theme-button-padding-right) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option:not(.is-selected),
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio:not(.is-selected),
form.variations_form .gfx-global-swatch-control .gfx-custom-size-button:not(.is-selected) {
    border-color: var(--gfx-theme-button-border) !important;
}
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-option.is-selected,
form.variations_form .gfx-global-swatch-control.gfx-swatches-profile-button .gfx-swatch-radio.is-selected,
form.variations_form .gfx-global-swatch-control .gfx-custom-size-button.is-selected {
    box-shadow: var(--gfx-theme-button-shadow) !important;
}
/* The Modern/Popup selected-colour trigger may inherit the theme corner shape
   and typography, but its colour preview keeps WooVisual's compact geometry. */
form.variations_form .gfx-modern-color-trigger {
    border-radius: var(--gfx-theme-button-radius) !important;
    font-family: var(--gfx-theme-button-font-family) !important;
    font-size: var(--gfx-theme-button-font-size) !important;
    font-weight: var(--gfx-theme-button-font-weight) !important;
    letter-spacing: var(--gfx-theme-button-letter-spacing) !important;
    text-transform: var(--gfx-theme-button-text-transform) !important;
}

/* rc.75 — theme-native button geometry without oversized variation controls.
 * The active WooCommerce button supplies the visual DNA and exact height.
 * WooVisual keeps widths content-driven, so long Application labels grow
 * horizontally instead of creating taller 50/50 buttons. */
@media (min-width: 641px) {
    form.variations_form .gfx-global-swatch-control.gfx-application-swatch-control {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    form.variations_form .gfx-global-swatch-control.gfx-application-swatch-control > .gfx-swatch-option,
    form.variations_form .gfx-global-swatch-control.gfx-application-swatch-control > .gfx-swatch-radio {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        padding-left: min(var(--gfx-theme-button-padding-left), 12px) !important;
        padding-right: min(var(--gfx-theme-button-padding-right), 12px) !important;
    }
    form.variations_form .gfx-global-swatch-control.gfx-application-swatch-control > .gfx-swatch-radio > span {
        min-width: 0;
        white-space: nowrap !important;
    }
}


/* WooVisual 5.0.1-rc.13 — no native WooCommerce control flash.
 * Visibility (rather than display:none) lets the browser calculate the final
 * swatch layout while it is hidden, so revealing it does not create a second
 * large layout jump. */
html.gfx-woovisual-hydrating form.variations_form {
    visibility: hidden !important;
}


/* WooVisual 5.0.1-rc.14 — Custom Size proportions / normalized preview */
.gfx-custom-size-preview-note{
    display:none;
    margin:10px 0 0;
    font-size:12px;
    line-height:1.35;
    opacity:.78;
}
.gfx-custom-size-panel:not([hidden]) .gfx-custom-size-preview-note{display:block}
.gfx-custom-size-original-outline{
    display:none;
    position:absolute;
    z-index:4;
    box-sizing:border-box;
    border:1px dashed rgba(116,129,135,.85);
    background:transparent;
    pointer-events:none;
}
.gfx-custom-size-measure-overlay.is-active.is-unlocked .gfx-custom-size-original-outline{display:block}
.gfx-custom-size-original-outline>span{
    position:absolute;
    right:4px;
    bottom:4px;
    padding:2px 5px;
    background:rgba(255,255,255,.82);
    color:#748187;
    font-size:10px;
    line-height:1.2;
}


/* WooVisual 5.0.1-rc.15 — one storefront accent source.
 * The value is resolved from the same active WooCommerce/WooVisual button
 * palette and written by swatches.js to --gfx-woovisual-accent. */
form.variations_form{
    --gfx-woovisual-accent:var(--gfx-theme-button-bg,#3b990c);
}

/* Native controls that otherwise fall back to browser/system blue. */
form.variations_form .gfx-custom-size-panel input[type="range"],
form.variations_form .gfx-live-text input[type="range"],
form.variations_form .gfx-live-text input[type="radio"],
form.variations_form .gfx-live-text input[type="checkbox"],
form.variations_form .gfx-global-swatch-control input[type="radio"],
form.variations_form .gfx-global-swatch-control input[type="checkbox"]{
    accent-color:var(--gfx-woovisual-accent,#3b990c)!important;
}

/* Explicit range styling for Chromium/WebKit/Firefox so accent-color cannot
 * silently fall back to the OS blue implementation. */
form.variations_form .gfx-live-text input[type="range"]::-webkit-slider-thumb,
form.variations_form .gfx-custom-size-slider::-webkit-slider-thumb{
    background:var(--gfx-woovisual-accent,#3b990c)!important;
}
form.variations_form .gfx-live-text input[type="range"]::-moz-range-thumb,
form.variations_form .gfx-custom-size-slider::-moz-range-thumb{
    background:var(--gfx-woovisual-accent,#3b990c)!important;
    border-color:var(--gfx-woovisual-accent,#3b990c)!important;
}
form.variations_form .gfx-live-text input[type="range"]::-moz-range-progress,
form.variations_form .gfx-custom-size-slider::-moz-range-progress{
    background:var(--gfx-woovisual-accent,#3b990c)!important;
}

/* Active custom WooVisual controls use the same accent too. */
form.variations_form .gfx-live-text__alignment-buttons input:checked + span,
form.variations_form .gfx-live-text__color-option.is-selected{
    border-color:var(--gfx-woovisual-accent,#3b990c)!important;
    box-shadow:0 0 0 1px var(--gfx-woovisual-accent,#3b990c)!important;
}
form.variations_form .gfx-live-text__color-trigger:focus,
form.variations_form .gfx-live-text__color-option:focus{
    outline:2px solid var(--gfx-woovisual-accent,#3b990c)!important;
    outline-offset:1px;
}

/* rc.2.4 — Finish/Material availability is authoritative. Unavailable colours
   are removed from the palette rather than shown faded/disabled. */
.gfx-swatch-option[hidden],
.gfx-swatch-radio[hidden],
.gfx-swatch-option.is-gfx-finish-unavailable,
.gfx-swatch-radio.is-gfx-finish-unavailable{display:none!important}


/* WooVisual 5.0.2-rc.2.9 — compact visible popup close control. */
.gfx-popup-colors-close{
    appearance:none!important;-webkit-appearance:none!important;display:inline-flex!important;
    align-items:center!important;justify-content:center!important;flex:0 0 26px!important;
    width:26px!important;min-width:26px!important;max-width:26px!important;
    height:26px!important;min-height:26px!important;max-height:26px!important;
    margin:0!important;padding:0!important;border:1px solid #b7cbd8!important;border-radius:2px!important;
    background:#fff!important;background-image:none!important;color:#333!important;box-shadow:none!important;
    font-family:Arial,sans-serif!important;font-size:18px!important;font-weight:400!important;line-height:1!important;
    text-align:center!important;text-shadow:none!important;cursor:pointer!important;box-sizing:border-box!important;
    transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;
}
.gfx-popup-colors-close:hover,.gfx-popup-colors-close:focus{
    background:#1f2529!important;border-color:#1f2529!important;color:#fff!important;outline:none!important;
}


/* WooVisual 5.0.2-rc.2.11 — Color terms may use an admin-saved image as
   their swatch artwork while retaining the HEX as the actual colour value. */
.gfx-global-swatch-control.gfx-swatches-profile-color .gfx-swatch-image--colour{
    display:block!important;
    margin:0!important;
    object-fit:cover!important;
    box-sizing:border-box!important;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-circle_outline .gfx-swatch-image--colour{
    width:24px!important;height:24px!important;border-radius:50%!important;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-circle_solid .gfx-swatch-image--colour{
    width:32px!important;height:32px!important;border-radius:50%!important;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-square_solid .gfx-swatch-image--colour{
    width:32px!important;height:32px!important;border-radius:0!important;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-square_outline .gfx-swatch-image--colour{
    width:26px!important;height:26px!important;border-radius:0!important;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-rounded_solid .gfx-swatch-image--colour{
    width:52px!important;height:34px!important;border-radius:14px!important;
}
.gfx-global-swatch-control.gfx-swatches-profile-color.gfx-color-style-rounded_outline .gfx-swatch-image--colour{
    width:46px!important;height:26px!important;border-radius:11px!important;
}

.gfx-loop-swatch--color .gfx-swatch-chip-image{display:block!important;width:20px!important;height:20px!important;object-fit:cover!important;margin:0!important}
.gfx-loop-swatch--color.gfx-color-style-circle_outline .gfx-swatch-chip-image,
.gfx-loop-swatch--color.gfx-color-style-circle_solid .gfx-swatch-chip-image{border-radius:50%!important}
.gfx-loop-swatch--color.gfx-color-style-square_outline .gfx-swatch-chip-image,
.gfx-loop-swatch--color.gfx-color-style-square_solid .gfx-swatch-chip-image{border-radius:0!important}
.gfx-loop-swatch--color.gfx-color-style-rounded_outline .gfx-swatch-chip-image,
.gfx-loop-swatch--color.gfx-color-style-rounded_solid .gfx-swatch-chip-image{border-radius:9px!important;width:32px!important}