/* ==========================================================================
   GK Swatches – Full Styles
   Refactored to Canonical Tokens
   ========================================================================== */

/* Vars */
:root{
    --gk-swatch-size: 28px;
    --gk-swatch-gap: 8px;
    --gk-swatch-label-h: 32px;
    --gk-swatch-label-pad-x: 10px;

    --gk-swatch-bg: var(--gk-surface);
    --gk-swatch-border: var(--gk-border-color);
    --gk-swatch-border-hover: var(--gk-neutral-400);
    --gk-swatch-active: var(--gk-text);
    --gk-swatch-active-bg: var(--gk-neutral-50);
    --gk-swatch-ring: var(--gk-neutral-200);
}

/* --- Skeleton Loader --- */
@keyframes gk-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.shimmer-bg {
    background-color: var(--gk-neutral-100);
    position: relative;
    overflow: hidden;
}
.shimmer-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: gk-shimmer 1.5s infinite;
}

.gk-swatch-skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gk-swatch-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.skeleton-title {
    height: 1.2em;
    width: 60px;
    border-radius: var(--gk-radius-sm);
}
.skeleton-items {
    display: flex;
    gap: var(--gk-swatch-gap, 8px);
}
.skeleton-swatch {
    height: var(--gk-swatch-size, 28px);
    border-radius: var(--gk-radius-round);
}
.skeleton-items .skeleton-swatch:nth-child(1) { width: var(--gk-swatch-size, 28px); }
.skeleton-items .skeleton-swatch:nth-child(2) { width: var(--gk-swatch-size, 28px); }
.skeleton-items .skeleton-swatch:nth-child(3) { width: var(--gk-swatch-size, 28px); }

/* Hide native selects safely */
.variations_form.gk-hide-native table.variations{
    position:absolute !important;
    width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important;
    overflow:hidden !important; clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important;
    border:0 !important; white-space:nowrap !important;
}

/* Containers */
.gk-swatch-mount {
    min-height: 80px;
}
.gk-swatch-group{
    margin:8px 0 0;
    max-width:100%; min-width:0;
    display:flex; align-items:center; flex-wrap:wrap; gap:12px;
}
.gk-swatch-title{
    font-weight:600; line-height:1.4; color:inherit; user-select:none;
}
.gk-swatch-items{
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--gk-swatch-gap);
    max-width:100%; min-width:0;
}

/* Base swatch reset */
.gk-swatch-mount .gk-swatch,
.variations_form .gk-swatch{
    all:unset;
    box-sizing:border-box !important;
    display:inline-flex !important; align-items:center; justify-content:center;
    cursor:pointer !important;

    width:auto !important; min-width:0 !important; max-width:100%;
    flex:0 0 auto !important;

    height:var(--gk-swatch-label-h) !important;
    padding:0 var(--gk-swatch-label-pad-x) !important;
    border-radius:var(--gk-radius-round) !important;

    border:var(--gk-border-width) solid var(--gk-swatch-border) !important;
    background:var(--gk-swatch-bg) !important;
    color:inherit !important;

    font:inherit !important; line-height:1 !important; vertical-align:middle !important;
    transition:box-shadow .12s, border-color .12s, background-color .12s;
    -webkit-tap-highlight-color:transparent;
}
.gk-swatch-mount .gk-swatch:hover,
.variations_form .gk-swatch:hover{
    border-color:var(--gk-swatch-border-hover) !important;
    box-shadow:var(--gk-shadow-sm);
}
.gk-swatch-mount .gk-swatch[aria-checked="true"],
.variations_form .gk-swatch[aria-checked="true"]{
    border-color:var(--gk-swatch-active) !important;
    background:var(--gk-swatch-active-bg) !important;
    box-shadow:0 0 0 2px var(--gk-swatch-ring);
}
.gk-swatch-mount .gk-swatch.is-disabled,
.variations_form .gk-swatch.is-disabled{
    opacity:.45 !important; cursor:not-allowed !important;
}
.gk-swatch-mount .gk-swatch:focus-visible,
.variations_form .gk-swatch:focus-visible{
    outline:none !important;
    box-shadow:0 0 0 3px var(--gk-swatch-ring), inset 0 0 0 1px var(--gk-swatch-active);
}

/* Color circles */
.gk-swatch-mount .gk-swatch.is-color,
.variations_form .gk-swatch.is-color{
    padding:0 !important; border-radius:var(--gk-radius-round) !important;
    border:var(--gk-border-width) solid var(--gk-border-color) !important;

    width:var(--gk-swatch-size) !important;
    height:var(--gk-swatch-size) !important;
    min-width:var(--gk-swatch-size) !important;
    max-width:var(--gk-swatch-size) !important;
    flex:0 0 var(--gk-swatch-size) !important;

    background:var(--gk-swatch-color, #f4f4f4) !important;
    color:transparent !important;
}
.gk-swatch-mount .gk-swatch.is-color[aria-checked="true"],
.variations_form .gk-swatch.is-color[aria-checked="true"]{
    box-shadow: 0px 0 5px 3px rgba(17, 17, 17, 0.31);
    border: 2px solid var(--gk-surface) !important;
}

/* Image swatches */
.gk-swatch-mount .gk-swatch.is-image,
.variations_form .gk-swatch.is-image{
    padding:0 !important; border-radius:var(--gk-radius-sm) !important; overflow:hidden !important;
    width:calc(var(--gk-swatch-size) + 4px) !important;
    height:calc(var(--gk-swatch-size) + 4px) !important;
    min-width:calc(var(--gk-swatch-size) + 4px) !important;
    max-width:calc(var(--gk-swatch-size) + 4px) !important;
    flex:0 0 calc(var(--gk-swatch-size) + 4px) !important;
}
.gk-swatch-mount .gk-swatch.is-image img,
.variations_form .gk-swatch.is-image img{
    display:block; width:100%; height:100%; object-fit:cover;
}

/* Wrapping & text */
.gk-swatch-mount .gk-swatch,
.variations_form .gk-swatch{
    word-break:break-word;
}

/* Responsive */
@media (max-width:420px){
    :root{
        --gk-swatch-size:26px; --gk-swatch-gap:6px;
        --gk-swatch-label-h:30px; --gk-swatch-label-pad-x:8px;
    }
}