/* ===================================================================
   Timber Size Options — Frontend Styles
   Natural / industrial timber product page feel
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

.tso-frontend-wrap {
    --tso-green:      #1a5c2a;
    --tso-green-mid:  #2a7a40;
    --tso-green-lite: #eef6f1;
    --tso-green-glow: rgba(26, 92, 42, 0.14);
    --tso-gray-100:   #f3f4f6;
    --tso-gray-200:   #e5e7eb;
    --tso-gray-500:   #6b7280;
    --tso-gray-700:   #374151;
    --tso-gray-900:   #111827;
    --tso-radius:     10px;
    --tso-transition: 160ms cubic-bezier(.4,0,.2,1);
    --tso-font:       'DM Sans', -apple-system, sans-serif;
    --tso-mono:       'DM Mono', 'Courier New', monospace;

    font-family: var(--tso-font);
    margin: 0 0 22px;
}

/* ── Section label ────────────────────────────────────────────── */
.tso-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tso-gray-500);
    margin-bottom: 10px;
}

/* ── Options list ─────────────────────────────────────────────── */
.tso-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Option row ───────────────────────────────────────────────── */
.tso-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1.5px solid var(--tso-gray-200);
    border-radius: var(--tso-radius);
    cursor: pointer;
    background: #fff;
    transition:
        border-color var(--tso-transition),
        background var(--tso-transition),
        box-shadow var(--tso-transition);
    position: relative;
    user-select: none;
}
.tso-option:hover {
    border-color: var(--tso-green-mid);
    background: var(--tso-green-lite);
}
.tso-option--selected {
    border-color: var(--tso-green);
    background: var(--tso-green-lite);
    box-shadow: 0 0 0 3px var(--tso-green-glow);
}

/* hide native radio */
.tso-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Custom radio dot ─────────────────────────────────────────── */
.tso-radio-dot {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    border: 2px solid var(--tso-gray-200);
    border-radius: 50%;
    background: #fff;
    transition: border-color var(--tso-transition), background var(--tso-transition);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tso-radio-dot::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tso-green);
    transform: scale(0);
    transition: transform var(--tso-transition);
}
.tso-option--selected .tso-radio-dot {
    border-color: var(--tso-green);
}
.tso-option--selected .tso-radio-dot::after {
    transform: scale(1);
}

/* ── Label & price ────────────────────────────────────────────── */
.tso-option-label {
    font-family: var(--tso-mono);
    font-size: .9rem;
    font-weight: 500;
    color: var(--tso-gray-900);
    flex: 1;
}
.tso-option-at {
    font-size: .8rem;
    color: var(--tso-gray-500);
    font-weight: 400;
}
.tso-option-price {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tso-green);
    font-family: var(--tso-mono);
}

/* ── Qty control ──────────────────────────────────────────────── */
.tso-qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 8px;
    border: 1.5px solid var(--tso-green);
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
    transition: opacity var(--tso-transition);
}
.tso-qty-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    width: 0;
    overflow: hidden;
    margin: 0;
    border: none;
    padding: 0;
}
.tso-option--selected .tso-qty-control {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    width: auto;
}
.tso-qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tso-green);
    width: 30px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tso-transition);
    flex-shrink: 0;
    padding: 0;
}
.tso-qty-btn:hover { background: var(--tso-green-lite); }
.tso-qty-input {
    width: 38px !important;
    border: none !important;
    border-left: 1px solid var(--tso-gray-200) !important;
    border-right: 1px solid var(--tso-gray-200) !important;
    text-align: center !important;
    font-family: var(--tso-mono) !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    color: var(--tso-gray-900) !important;
    padding: 0 !important;
    height: 32px !important;
    line-height: 32px !important;
    outline: none !important;
    box-shadow: none !important;
    background: #fff !important;
    -moz-appearance: textfield !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.tso-qty-input::-webkit-inner-spin-button,
.tso-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }