/* ==========================================================================
   Flooring - colour swatches + area calculator
   Figma: Product page > Pattern 5 and "Product Page / JORDAN Activ Square -
   Gym Flooring - Black with Red Fleck" (2455:31631).
   ========================================================================== */

/* ---------- Colour swatches (links to sibling products) ---------- */

.osiris-colour-family {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    font-family: var(--theme-font-family-body, "Inter"), sans-serif;
}

/* Sits in the selector's 16px rhythm when it follows the pills */
.osiris-variant-selector + .osiris-colour-family {
    margin-top: -8px;
}

/* .product-details is a flex column with a 20px gap: 24 + 20 - 28 = 16 */
.product-details > .osiris-variant-selector + .osiris-colour-family {
    margin-top: -28px;
}

.osiris-colour-family .ovs-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.14px;
    color: #000;
}

.osiris-colour-family .ovs-label__attr {
    font-weight: 700;
    text-transform: uppercase;
}

.osiris-colour-family .ovs-label__value {
    font-weight: 500;
}

.ocf-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocf-swatches li {
    margin: 0;
    padding: 0;
}

.ocf-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    border-radius: 999px;
    transition: border-color 140ms ease;
}

.ocf-swatch.is-current {
    border: 2px solid #000;
}

.ocf-swatch__fill {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

@media (hover: hover) {
    .ocf-swatch:not(.is-current):hover {
        border-color: #949494;
    }
}

.ocf-swatch:focus-visible {
    outline: 2px solid #DC0039;
    outline-offset: 2px;
}

.osiris-colour-family .screen-reader-text,
.osiris-area-calc .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Area calculator ---------- */

.osiris-area-calc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 12px;
    background: #F6F6F6;
    font-family: var(--theme-font-family-body, "Inter"), sans-serif;
    line-height: 1.4;
}

.osiris-area-calc[hidden] {
    display: none;
}

.ofc-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.15px;
    color: #000;
}

.ofc-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ofc-input {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #949494;
    border-radius: 10px;
    background: #fff;
    cursor: text;
}

.ofc-input:focus-within {
    border-color: #000;
    outline: 2px solid #DC0039;
    outline-offset: 2px;
}

.ofc-input__label {
    font-size: 13px;
    letter-spacing: -0.13px;
    color: #737373;
    white-space: nowrap;
}

.ofc-input__value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.osiris-area-calc input.ofc-input__field {
    height: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.osiris-area-calc input.ofc-input__field {
    width: 5ch;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.16px;
    color: #000;
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ofc-input__field:focus {
    outline: none;
}

.ofc-input__field::-webkit-outer-spin-button,
.ofc-input__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ofc-input__field::placeholder {
    color: #C7C7C7;
}

.ofc-input__unit {
    font-size: 14px;
    letter-spacing: -0.14px;
    color: #737373;
}

.ofc-result {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ofc-result__main {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.16px;
    color: #000;
}

.ofc-result__sub {
    margin: 0;
    font-size: 13px;
    letter-spacing: -0.13px;
    color: #737373;
}

.ofc-result__sub:empty {
    display: none;
}

/* Mobile: result under the input (Figma mobile frame 2455:32269) */
@media (max-width: 767px) {
    .ofc-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ocf-swatch {
        transition: none;
    }
}