/* ================================================
   Sun Stories – Variation Selector & Image
   ================================================ */

/* ── [sunstories_product_color] (single product) ── */
.ssc-product-color-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Figtree", sans-serif;
}

.ssc-product-color-wrap .ssc-product-color-label {
    font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
    font-weight: 700 !important;
    color: #2D2420 !important;
}

.ssc-product-color-wrap .ssc-product-color-value {
    font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
    font-weight: 400 !important;
    color: #2D2420 !important;
}

/* ── Variation Selector ─────────────────────── */
div.ssc-variation-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

div.ssc-variation-selector .ssc-variation-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

div.ssc-variation-selector .ssc-variation-label {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

div.ssc-variation-selector .ssc-variation-label__name {
    font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
    font-weight: 700 !important;
    color: #2D2420 !important;
}

div.ssc-variation-selector .ssc-variation-label__value {
    font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
    font-weight: 400 !important;
    color: #2D2420 !important;
}

div.ssc-variation-selector .ssc-variation-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* ── Variation Buttons ──────────────────────── */
div.ssc-variation-selector button.ssc-variation-btn {
    font-size: clamp(0.875rem, 0.875rem + 0vw, 0.875rem) !important;
    padding: 6px 10px !important;
    border: 1px solid var( --e-global-color-d4da8c9 ) !important;
    background: #FBFAF7 !important;
    color: #2D2420 !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    transition: border-color 0.2s ease !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    outline: none !important;
}

div.ssc-variation-selector button.ssc-variation-btn:hover,
div.ssc-variation-selector button.ssc-variation-btn:focus {
    background: #FBFAF7 !important;
    color: #2D2420 !important;
    border-color: #2D2420 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

div.ssc-variation-selector button.ssc-variation-btn.ssc-variation-btn--active {
    border-color: #2D2420 !important;
}

/* ── Variation Image ────────────────────────── */
/* ── Inline selection validation message ───── */
.ssc-variation-selector .selection-message {
    color: #c0392b !important;
    margin-top: -5px !important;
    font-size: clamp(0.813rem, 0.813rem + 0vw, 0.813rem) !important;
}

div.ssc-variation-image {
    width: 100% !important;
}

div.ssc-variation-image .ssc-variation-image__wrap {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 100% !important; /* 1:1 aspect ratio */
    overflow: hidden !important;
}

div.ssc-variation-image .ssc-variation-image__wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: opacity 0.3s ease !important;
}

div.ssc-variation-image .ssc-variation-image__wrap img.ssc-img-loading {
    opacity: 0.5 !important;
}

/* ── Add to Bag button ──────────────────────── */
.ssc-add-to-bag-wrap {
    width: 100% !important;
}

.ssc-add-to-bag-wrap .ssc-add-to-bag-btn {
    display: block !important;
    width: 100% !important;
    padding: 11px !important;
    background: #2D2420 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

.ssc-add-to-bag-wrap .ssc-add-to-bag-btn:hover,
.ssc-add-to-bag-wrap .ssc-add-to-bag-btn:focus {
    background: #2D2420 !important;
    color: #fff !important;
    opacity: 0.85 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.ssc-add-to-bag-wrap .ssc-add-to-bag-btn.ssc-adding {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.ssc-add-to-bag-wrap .ssc-add-to-bag-btn.ssc-out-of-stock,
.ssc-add-to-bag-wrap .ssc-add-to-bag-btn.ssc-out-of-stock:hover,
.ssc-add-to-bag-wrap .ssc-add-to-bag-btn.ssc-out-of-stock:focus {
    background: #999 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* ── Quantity Counter ───────────────────────── */
.ssc-quantity-counter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* width: 80px !important; */
    height: 30px !important;
    background-color: #FBFAF7 !important;
    border: 1px solid #F2E9DD !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    color: #2D2420 !important;
    gap: 10px;
}

.ssc-quantity-counter .ssc-qty-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2D2420 !important;
    transition: opacity 0.2s !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
}

.ssc-quantity-counter .ssc-qty-btn:hover,
.ssc-quantity-counter .ssc-qty-btn:focus,
.ssc-quantity-counter .ssc-qty-btn:active {
    background: transparent !important;
    color: #2D2420 !important;
}

.ssc-quantity-counter .ssc-qty-btn.ssc-qty-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.ssc-qty-error {
    color: #c0392b;
    font-size: 12px;
    margin: 6px 0 0;
    font-family: "Figtree", sans-serif;
}

/* ── Add-to-bag inline error ────────────────── */
.ssc-add-to-bag-error {
    background: #FFF0F0;
    border: 1px solid #FF383C;
    color: #c0392b;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    font-family: "Figtree", sans-serif;
    line-height: 1.4;
}

.ssc-quantity-counter .ssc-qty-display {
    font-size: 16px !important;
    user-select: none !important;
    color: #2D2420 !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* ── Variation-aware textarea content fields ── */
.ssc-variation-content[data-field="details"],
.ssc-variation-content[data-field="materials_and_finish"],
.ssc-variation-content[data-field="product_care"],
.ssc-variation-content[data-field="shipping_and_returns"] {
    white-space: pre-line;
    unicode-bidi: plaintext;
    display: flex;
}