/* ── Eyewear Product Options – epo-style.css ── */
/* Targets WoodMart theme overrides specifically */

/* ── WOODMART RESET: Kill all theme-injected margins ── */
.epo-wrap p,
.epo-wrap h4,
.epo-wrap h3,
.epo-wrap h2,
.epo-wrap h1,
.epo-wrap label,
.epo-wrap table,
.epo-wrap tr,
.epo-wrap td,
.epo-wrap th,
.epo-wrap ul,
.epo-wrap li,
.epo-wrap div,
.epo-wrap input,
.epo-wrap select {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* WoodMart sets table { margin-bottom: 35px } — kill it */
.epo-wrap table {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* WoodMart sets p { margin-bottom: var(--wd-tags-mb, 20px) } — kill it */
.epo-wrap p {
    margin-bottom: 0 !important;
}

/* WoodMart sets h4/h5/h6 { margin-bottom: var(--wd-tags-mb,20px) } — kill it */
.epo-wrap h4 {
    margin-bottom: 0 !important;
}

/* WoodMart sets label { margin-bottom: 5px } — we handle our own */
.epo-wrap label {
    margin-bottom: 0 !important;
}

/* ── Wrap ── */
.epo-wrap {
    font-family: inherit;
    max-width: 520px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4;
}

/* ── Each field block — only spacing we want ── */
.epo-field {
    margin-bottom: 12px !important;
    padding: 0 !important;
}

.epo-hidden {
    display: none !important;
}

/* ── Labels ── */
.epo-label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    color: #111 !important;
    line-height: 1.3 !important;
}

.epo-selected-val {
    font-weight: 400 !important;
    color: #555 !important;
    margin-left: 3px !important;
}

/* ── Selects ── */
.epo-select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 32px 0 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    height: 38px !important;
    line-height: 38px !important;
    display: block !important;
    margin: 0 !important;
    /* WoodMart overrides height via --wd-form-height: 42px — reset it */
    --wd-form-height: 38px !important;
}

.epo-select:focus {
    outline: none !important;
    border-color: #555 !important;
}

/* ── Lens comparison cards ── */
.epo-lens-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

@media (max-width: 480px) {
    .epo-lens-cards { grid-template-columns: 1fr !important; }
}

.epo-lens-card {
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    padding: 10px 12px !important;
    background: #fafafa !important;
    transition: border-color .15s, box-shadow .15s !important;
    margin: 0 !important;
}

.epo-lens-card.epo-card-active {
    border-color: #222 !important;
    box-shadow: 0 0 0 1px #222 !important;
    background: #f5f5f5 !important;
}

/* WoodMart: h4 gets margin-bottom: 20px — override */
.epo-lens-card h4 {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.3 !important;
}

/* WoodMart: p gets margin-bottom: 20px — override */
.epo-lens-card p {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #444 !important;
    line-height: 1.45 !important;
}

.epo-lens-card p:last-child {
    margin-bottom: 0 !important;
}

/* ── Lens card images ── */
.epo-lens-img-wrap {
    margin: 6px 0 8px 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.epo-lens-img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Prescription table ── */
/* WoodMart: table { margin-bottom: 35px } */
.epo-rx-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* WoodMart: th { padding: 15px 10px }, td { padding: 15px 12px } — override */
.epo-rx-table th,
.epo-rx-table td {
    border: 1px solid #ccc !important;
    padding: 5px 4px !important;
    text-align: center !important;
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
}

.epo-rx-table thead tr th {
    background: #555 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.epo-eye-label {
    font-weight: 600 !important;
    font-size: 12px !important;
    background: #f0f0f0 !important;
    white-space: nowrap !important;
    width: 40px !important;
}

.epo-rx-select {
    width: 100% !important;
    min-width: 65px !important;
    padding: 3px !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    background: #fff !important;
    cursor: pointer !important;
    height: 26px !important;
    margin: 0 !important;
    display: block !important;
    /* Reset WoodMart --wd-form-height */
    --wd-form-height: 26px !important;
}

/* ── PD + Upload fields ── */
.epo-pd-field {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.epo-upload-field {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.epo-text-input {
    width: 100% !important;
    max-width: 260px !important;
    padding: 0 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    height: 34px !important;
    line-height: 34px !important;
    display: block !important;
    margin: 0 !important;
    --wd-form-height: 34px !important;
}

.epo-file-input {
    font-size: 12px !important;
    color: #444 !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ── Radio group (Lens Cleaner) ── */
.epo-radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* WoodMart list styles */
    list-style: none !important;
}

/* WoodMart: label { margin-bottom: 5px } */
.epo-radio-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    padding: 9px 14px !important;
    border: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    transition: background .15s !important;
    user-select: none !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    width: 100% !important;
}

.epo-radio-label:last-child {
    border-bottom: none !important;
}

.epo-radio-label:hover {
    background: #f7f7f7 !important;
}

/* WoodMart: input[type="radio"] { margin-top:0; margin-inline-end:5px } */
.epo-radio-label input[type="radio"] {
    accent-color: #222 !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.epo-radio-label.epo-radio-checked {
    background: #f0f0f0 !important;
    font-weight: 600 !important;
}

.epo-radio-text {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.epo-addon-price {
    font-size: 12px !important;
    color: #666 !important;
    font-weight: 400 !important;
    margin-left: auto !important;
    padding: 0 !important;
}

/* ── Price add-on notice ── */
.epo-addon-notice {
    margin: 8px 0 0 0 !important;
    padding: 7px 12px !important;
    background: #fffbf0 !important;
    border: 1px solid #e8d88a !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    color: #5a4500 !important;
    max-width: 320px !important;
    line-height: 1.4 !important;
}