/* ==========================================================
   MiniLoom Premium Product Swatches v2.0
   ========================================================== */

:root{
    --ml-gold:#C8A977;
    --ml-gold-light:rgba(200,169,119,.18);
    --ml-border:#E7DDD1;
    --ml-text:#2B2B2B;
    --ml-bg:#FAF7F2;
    --ml-radius:14px;
}

/* Hide native WooCommerce select */

.miniloom-hidden-dropdown{
    position:absolute!important;
    left:-9999px!important;
    opacity:0;
    pointer-events:none;
}

/* Wrapper */

.miniloom-swatches{
    margin-top:18px;
}

.woocommerce form.variations_form.cart{
    display:block;
}

.woocommerce table.variations,
.woocommerce table.variations tbody,
.woocommerce table.variations tr,
.woocommerce table.variations th,
.woocommerce table.variations td{
    display:block;
    width:100%;
}

.woocommerce table.variations{
    margin-bottom:28px;
}

.woocommerce table.variations tr{
    margin-bottom:28px;
}

.woocommerce table.variations th.label,
.woocommerce table.variations td.value{
    padding:0;
    text-align:left;
}

.woocommerce table.variations th.label label{
    display:block;
    margin-bottom: 8px;
    font-size: 13px;   /* reduced from 18px */
    font-weight: 700;
    color: var(--ml-text);
}

.miniloom-variations{
    display:block;
    width:100%;
    margin-bottom:28px;
}

.miniloom-variation-row{
    display:block;
    width:100%;
    margin-bottom:28px;
}

.miniloom-variation-row .label{
    display:block;
    margin-bottom:12px;
}

.miniloom-variation-row .label label{
    font-size: 13px;   /* reduced from 18px */
    font-weight: 700;
    color: var(--ml-text);
}

.miniloom-variation-row .value{
    display:block;
    width:100%;
}

/* Swatch row */

.miniloom-swatch-buttons{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap: 8px;   /* reduced from 14px */
}

.miniloom-swatch-buttons[data-attribute*="color"],
.miniloom-swatch-buttons[data-attribute*="colour"]{
    gap: 12px;  /* reduced from 22px */
}

/* ==========================================================
   SIZE SWATCH
   ========================================================== */

.miniloom-swatch{

    appearance:none;
    border:none;
    outline:none;

    min-width: 44px;   /* reduced from 58px */
    height: 36px;      /* reduced from 54px */

    padding: 0 12px;   /* reduced from 0 20px */

    border:1px solid var(--ml-border);
    border-radius: 10px; /* slightly tighter */

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    font-size: 12px;   /* reduced from 15px */
    font-weight:600;

    color:var(--ml-text);

    transition:
        background .25s,
        border-color .25s,
        transform .25s,
        box-shadow .25s;
}

.miniloom-swatch:hover{

    border-color:#B9823F;

    color:#B9823F;

    transform:translateY(-1px);

    box-shadow:
        0 6px 14px rgba(31,31,31,.05);
}

.miniloom-swatch.active{

    border:1px solid #B9823F;

    background:#fff;

    color:#B9823F;

    box-shadow:
        0 6px 14px rgba(31,31,31,.05);

    transform:none;
}

/* ==========================================================
   COLOR SWATCH — same pill shape as size swatch
   ========================================================== */

.miniloom-color-swatch{

    appearance:none;

    position:relative;

    min-width: 44px;   /* same as size swatch */
    height: 36px;      /* same as size swatch */

    padding: 0 12px;

    border: 2px solid var(--ml-border);
    border-radius: 10px; /* same as size swatch */

    background: var(--swatch-color, #ccc);  /* color fills the whole pill */

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    box-shadow: 0 1px 4px rgba(31,31,31,.1);

    transition:
        border-color .25s,
        transform .25s,
        box-shadow .25s;
}

/* Hide the inner circle — not needed with pill shape */
.miniloom-color-circle{
    display: none;
}

.miniloom-color-swatch:hover{
    border-color: #B9823F;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(31,31,31,.12);
}

.miniloom-color-swatch.active{
    border: 2px solid #B9823F;
    box-shadow: 0 0 0 3px rgba(185,130,63,.25),
                0 6px 14px rgba(31,31,31,.08);
    transform: none;
}

/* Disabled */

.miniloom-color-swatch:disabled{

    opacity:.35;

    cursor:not-allowed;

    filter:grayscale(100%);

    transform:none;

    box-shadow:none;
}

/* Keyboard Accessibility */
.miniloom-swatch:focus-visible,
.miniloom-color-swatch:focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px rgba(200,169,119,.28);
}

/* Smooth animation */

.miniloom-swatch,
.miniloom-color-swatch,
.miniloom-color-circle{

    transition:
/* Smooth animation */
.miniloom-swatch,
.miniloom-color-swatch {
    transition: all .28s cubic-bezier(.4,0,.2,1);
}

/* Tablet */
@media (max-width: 768px) {
    .miniloom-swatch {
        min-width: 40px;
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }
    .miniloom-color-swatch {
        min-width: 36px;
        height: 30px;
        padding: 0 8px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .miniloom-swatch-buttons { gap: 8px; }
    .miniloom-swatch {
        min-width: 36px;
        height: 30px;
        font-size: 11px;
    }
    .miniloom-color-swatch {
        min-width: 32px;
        height: 28px;
        padding: 0 6px;
    }
}