/* LensDelivery_ContactLenses */

.ld-rx {
    margin: 1em 0; padding: 1em;
    border: 1px solid var(--c-line, #E6E3DB); border-radius: .5em;
    /* Match the page bg so the form blends in (per design). */
    background: var(--c-bg, #FAFAF7);
    box-sizing: border-box; max-width: 100%;
}

/* Mode radios */
.ld-rx__mode { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: .5em; margin-bottom: 1em; width: 100%; }
.ld-rx__radio {
    flex: 1; display: flex; align-items: center; gap: .5em;
    padding: .55em .75em; cursor: pointer;
    border: 1px solid var(--c-line, #E6E3DB); border-radius: .35em;
    /* Match the form / page bg so the inactive tile blends in. The active
       tile uses surface-2 + dark border to stand out. */
    background: var(--c-bg, #FAFAF7);
    font-size: .9em; color: var(--c-ink-2, #4A5159); user-select: none;
    transition: all .15s ease;
}
.ld-rx__radio:hover           { border-color: var(--c-ink-2, #4A5159); }
.ld-rx__radio.is-active       { border-color: var(--c-ink, #14181C); background: var(--c-surface-2, #F4F2EC); color: var(--c-ink, #14181C); font-weight: 600; }
.ld-rx__radio input[type=radio] { accent-color: var(--c-ink, #14181C); flex-shrink: 0; }

/* Field row — label sits to the LEFT of the dropdown/input, not above it.
   Fixed-width label keeps the inputs vertically aligned across all rows. */
.ld-field {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: .65em;
}
.ld-field__label {
    flex: 0 0 84px;
    margin: 0;
    font-size: .85em;
    font-weight: 500;
    color: var(--c-ink-2, #4A5159);
}
.ld-field > .ld-dd,
.ld-field > .ld-fixed,
.ld-field > .ld-qty,
.ld-field > select,
.ld-field > input { flex: 1 1 auto; min-width: 0; }

/* Qty input */
.ld-qty {
    padding: .4em .55em; border: 1px solid var(--c-line, #E6E3DB); border-radius: .3em;
    background: var(--c-surface, #fff);
    font-size: .9em; color: var(--c-ink, #14181C); line-height: 1.3; width: 4.5em;
}
.ld-qty:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }

/* Two-eye grid - ALWAYS 2 columns, even on mobile */
.ld-rx__eyes { display: grid; grid-template-columns: 1fr 1fr; gap: .75em; }
.ld-eye      {
    padding: .75em; border: 1px solid var(--c-line, #E6E3DB); border-radius: .35em;
    /* Match the page bg so the eye boxes don't visually pop out as white
       cards inside an already cream-coloured form. The border keeps them
       distinguishable. */
    background: var(--c-bg, #FAFAF7);
    transition: opacity .2s ease, filter .2s ease;
}
.ld-eye__title { margin: 0 0 .5em; font-size: .9em; font-weight: 600; color: #1f2937; }
/* Right eye disabled state when "Same" is selected */
.ld-eye.is-disabled {
    opacity: .5; filter: grayscale(50%); pointer-events: none;
    background: #f3f4f6;
}

/* Fixed single-value attribute */
.ld-field--fixed .ld-field__label { color: #4b5563; }
.ld-fixed {
    padding: .4em .55em; border: 1px solid #e5e7eb; border-radius: .3em;
    background: #f9fafb; color: #1f2937; font-size: .9em; line-height: 1.3;
    display: inline-block; min-width: 3em;
}
.ld-fixed__value { font-weight: 500; }

/* ===== Custom dropdown ===== */
.ld-dd { position: relative; }
.ld-dd__btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: .4em .55em; border: 1px solid #d1d5db; border-radius: .3em;
    background: #fff; cursor: pointer;
    /* Inherit typography from the document so the button uses the same
       font stack as the panel options (Luma's `<button>` defaults to a
       different family). */
    font-family: inherit;
    font-size: .85em; font-weight: 400; line-height: 1.3; color: #1f2937;
    text-align: left; box-sizing: border-box;
}
.ld-dd__label {
    /* <button> in Luma theme often uses a different font stack than body —
       force inheritance from the surrounding text so the trigger label and
       the panel options render in the same typeface. */
    font: inherit;
    color: inherit;
}
.ld-dd__btn:hover:not(:disabled) { border-color: #9ca3af; }
.ld-dd__btn:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.ld-dd.is-open .ld-dd__btn { border-color: #2563eb; }
.ld-dd__label.is-placeholder { color: #9ca3af; }
.ld-dd__arrow {
    margin-left: .35em; font-size: .85em; transition: transform .2s ease;
    color: #6b7280; line-height: 1; flex-shrink: 0;
}
.ld-dd.is-open .ld-dd__arrow { transform: rotate(180deg); }

.ld-dd__panel {
    display: none;
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 50;
    /* Compact panel — half the previous width. With small option cells the
       2-col polarity panel fits comfortably without taking up the full
       trigger width. */
    min-width: 240px;
    width: max-content;
    max-width: min(280px, 92vw);
    background: #fff; border: 1px solid #d1d5db; border-radius: .35em;
    box-shadow: 0 6px 16px rgba(0,0,0,.08); max-height: 24em; overflow: hidden;
}
.ld-dd.is-open > .ld-dd__panel { display: block; }
/* For the right-eye column on "Різні" mode, anchor the panel to the right
   so it doesn't overflow the page edge. */
.ld-eye--right .ld-dd__panel { left: auto; right: 0; }
/* On mobile the eye columns get narrow (~150-180px), so the two-column
 * diopter panel (neg + pos values) gets cropped. Override: allow the
 * panel to grow beyond the trigger's width so both columns are visible.
 * For the right eye (OD), anchor to the right edge instead of left, so
 * the wider panel doesn't push off-screen. */
@media (max-width: 768px) {
    .ld-dd__panel {
        left: 0;
        right: auto;
        min-width: 220px;
        width: max-content;
        max-width: min(86vw, 320px);
    }
    .ld-eye:last-child .ld-dd__panel {
        left: auto;
        right: 0;
    }
    .ld-dd__cols { gap: .5em; padding: .5em; }
    .ld-dd__opt { font-size: .9em; padding: .45em .5em; }
}
.ld-dd__cols { display: grid; max-height: 22em; overflow-y: auto; padding: .4em; gap: .3em; }
.ld-dd__cols--1 { grid-template-columns: 1fr; }
.ld-dd__cols--2 { grid-template-columns: 1fr 1fr; }
.ld-dd__col     { display: flex; flex-direction: column; gap: .2em; }
.ld-dd__col-head {
    position: sticky; top: -.4em; z-index: 1;
    text-align: center; font-weight: 700; font-size: 1em; padding: .3em 0;
    background: #fff; margin: -.4em -.4em .2em -.4em;
}
.ld-dd__col--neg .ld-dd__col-head { color: #dc2626; background: #fef2f2; border-bottom: 1px solid #fee2e2; }
.ld-dd__col--pos .ld-dd__col-head { color: #047857; background: #ecfdf5; border-bottom: 1px solid #d1fae5; }
.ld-dd__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25em; }
.ld-dd__opt {
    padding: .35em .5em; cursor: pointer; font-size: .85em; color: #1f2937;
    border: 1px solid #e5e7eb; border-radius: .3em; background: #fff;
    text-align: center; user-select: none; transition: all .15s ease; line-height: 1.3;
}
.ld-dd__opt:hover                       { border-color: #9ca3af; background: #f9fafb; }
.ld-dd__col--neg .ld-dd__opt:hover      { border-color: #dc2626; color: #dc2626; }
.ld-dd__col--pos .ld-dd__opt:hover      { border-color: #047857; color: #047857; }
.ld-dd__opt.is-selected                 { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 600; }

[x-cloak] { display: none !important; }


/* ============ Shipping info card (PDP) ============
   Visual style mirrors the design's `.delivery-row` (no background, top + bottom
   borders, gray rounded-square icons, bold title + muted subtitle). Used inside
   .pdp-info, sits directly under the price block. */
.ld-ship{
    margin: 16px 0 24px;
    padding: 16px 0;
    border-top: 1px solid var(--c-line, #e5e7eb);
    border-bottom: 1px solid var(--c-line, #e5e7eb);
    background: transparent;
    box-shadow: none;
    width: 100%; box-sizing: border-box;
}
.ld-ship__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.ld-ship__item{
    display: flex; align-items: center; gap: 10px;
    min-width: 0; padding: 0;
}
.ld-ship__icon{
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface-2, #F4F2EC);
    color: var(--c-ink, #14181C);
}
.ld-ship__icon svg{ width: 14px; height: 14px; display: block; }
.ld-ship__text{
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-width: 0;
    line-height: 1.2;
}
.ld-ship__ttl{
    font-size: 13px; font-weight: 600;
    color: var(--c-ink, #14181C);
    display: inline-flex; align-items: center; gap: 4px;
}
.ld-ship__sub{
    font-size: 11px;
    color: var(--c-muted, #8A8F96);
    margin-top: 2px;
}

.ld-ship__carriers{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-line-2, #ECEAE2);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ld-ship__carriers-title{
    font-size: 12px;
    color: var(--c-muted, #8A8F96);
}
.ld-ship-carrier{
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-line, #e5e7eb);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ld-ship-carrier:hover{ border-color: var(--c-ink, #14181C); }
.ld-ship-carrier__logo{
    height: 18px; width: auto; max-width: 90px;
    display: block; object-fit: contain;
}

/* ============ Package size picker ============ */
.ld-pkg{
    margin: 1em 0; padding: .85em 1em;
    border: 1px solid var(--c-line, #E6E3DB); border-radius: .5em;
    background: var(--c-bg, #FAFAF7);
}
.ld-pkg__header{
    display: flex; align-items: baseline; gap: .5em; margin-bottom: .65em;
}
.ld-pkg__title{ font-size: .95em; font-weight: 600; color: #111827; }
.ld-pkg__code{ font-size: .75em; color: #9ca3af; font-family: monospace; }
.ld-pkg__options{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
    gap: .5em;
}
.ld-pkg__opt{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15em; padding: .55em .5em;
    border: 1.5px solid #e5e7eb; border-radius: .4em;
    background: var(--c-bg, #fff); cursor: pointer; text-align: center;
    transition: all .15s ease; user-select: none;
}
.ld-pkg__opt:hover{ border-color: #9ca3af; }
.ld-pkg__opt.is-selected{
    border-color: #2563eb; background: #eff6ff;
}
.ld-pkg__radio{ position: absolute; opacity: 0; pointer-events: none; }
.ld-pkg__opt-title{ font-size: .9em; font-weight: 600; color: #1f2937; }
.ld-pkg__opt.is-selected .ld-pkg__opt-title{ color: #1d4ed8; }
.ld-pkg__opt-price{
    font-size: .85em; color: #4b5563; font-weight: 500;
    display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    justify-content: center;
}
.ld-pkg__opt.is-selected .ld-pkg__opt-price{ color: #1d4ed8; }
/* was/now pattern when a pack has a discount (regular > final). The
 * struck regular sits before the bold final — same visual logic the
 * main price block uses. */
.ld-pkg__opt-price-was{
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 400;
    font-size: .85em;
}
.ld-pkg__opt-price-now{
    color: inherit;
    font-weight: 600;
}
.ld-pkg__opt.is-selected .ld-pkg__opt-price-was{ color: #93c5fd; }
.ld-pkg__opt.is-selected .ld-pkg__opt-price-now{ color: #1d4ed8; }

/* Validation error highlight */
.ld-error.ld-dd .ld-dd__btn,
.ld-prescription .ld-field.ld-error .ld-dd__btn,
.ld-prescription .ld-field.ld-error select,
.ld-prescription .ld-field.ld-error .ld-qty-stepper {
    border: 1px solid #dc2626 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
    border-radius: 6px;
}
.ld-error.ld-pkg{
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}
.ld-error{ animation: ld-shake 0.35s ease-in-out; }
@keyframes ld-shake{
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
/* Inline "required" message that appears under a field on validation. */
.ld-prescription .ld-field .ld-error-msg {
    grid-column: 2 / -1;
    margin-top: 6px;
    font-size: .8em;
    color: #dc2626;
    font-weight: 500;
    line-height: 1.2;
}

/* Quantity label injected via JS */
.ld-qty-label{
    display: inline-flex; align-items: center;
    height: 2.5rem;
    margin-right: .5rem;
    font-weight: 500; color: #374151;
    font-size: 1rem !important;     /* same as the cart button label */
    line-height: 1;
}

/* Ensure qty input vertical centering with label */
.product-actions input[name="qty"]{
    height: 2.5rem;
    align-self: center;
}

/* Custom wishlist button rendered in shipping-info card. */
.ld-ship__icon--actions{
    padding: 0;
    background: transparent;
}
.ld-wishlist-btn{
    width: 100%; height: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; padding: 0;
    border-radius: 9999px;
    background: #fff1f2;
    color: #e11d48;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.ld-wishlist-btn:hover:not(:disabled){
    background: #fecdd3; transform: scale(1.05);
}
.ld-wishlist-btn:disabled{ opacity: .55; cursor: progress; }
.ld-wishlist-btn.is-saved{ background: #e11d48; color: #fff; }
.ld-wishlist-btn svg{
    width: 1.1em; height: 1.1em; display: block;
}

/* Returns row tooltip — shown on hover/click of the "Повернення" cell.
   Anchored above the .ld-ship__item--returns row (position:relative on parent). */
.ld-ship__tip-icon{
    width: 12px; height: 12px;
    display: inline-block; vertical-align: -2px;
    margin-left: 4px;
    color: #94a3b8;
    cursor: help;
}
.ld-ship__tooltip{
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: max-content;
    max-width: 320px;
    padding: 10px 12px;
    background: #14181C;
    color: #FAFAF7;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 24, 28, 0.18);
    pointer-events: none;
}
.ld-ship__tooltip::after{
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #14181C;
}

/* ==========================================================================
   Luma prescription form — `.ld-prescription` template
   Visually mirrors the legacy SvitLinz/Theme AltairSolutions design on
   dev2.svitlinz.ua: pill-radio tabs with double-circle "eye" icons +
   field card with label-left / value-right grid + quantity stepper.
   ========================================================================== */
.ld-prescription {
    margin: 1em 0;
    box-sizing: border-box;
    /* Compact dev2-style form — narrower in "same" mode, expanded for two-eye
       cards in "Різні". */
    max-width: 370px;
    color: var(--c-ink, #14181C);
}
/* "Різні" needs more horizontal room for 2 eye cards. */
.ld-prescription:has(.ld-prescription__section[data-mode="different"].is-active) {
    max-width: 610px;
}

/* LPB ("lenses per box") radio block — sits above "Оберіть тип лінз:" and
   shows package size + price per option. Stacked rows, native radio, label
   on the left, price on the right. Mirrors dev2 SvitLinz design. */
.ld-prescription .ld-package {
    margin: 0 0 1.25em;
    padding: 0 0 1em;
    border-bottom: 1px solid var(--c-line-2, #ECEAE2);
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.ld-prescription .ld-package__option {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    margin: 0;
    cursor: pointer;
    color: var(--c-ink, #14181C);
    font-size: 15px;
}
.ld-prescription .ld-package__radio {
    /* Force native radio rendering — theme CSS often sets appearance:none on
       all inputs which strips the radio circle. */
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--c-accent, #1A73E8);
    cursor: pointer;
    opacity: 1;
    position: static;
    flex: none;
}
.ld-prescription .ld-package__title { font-weight: 400; }
.ld-prescription .ld-package__option.is-active .ld-package__title { font-weight: 500; }

/* OOS variants — struck through in the .ld-dd dropdown panel and on
   single-value static-text fields. Greyed out and non-interactive so users
   can see at a glance which Power / volume / count combinations the
   backend cannot resolve. */
.ld-dd__opt.is-oos,
.ld-field--oos .ld-field__static.is-oos {
    color: var(--c-muted, #9CA3AF);
    text-decoration: line-through;
    cursor: not-allowed;
}
.ld-dd__opt.is-oos:hover {
    background: transparent !important;
}
/* Cross-attribute incompatible option: this option_id IS valid for THIS
   attribute, but no child SKU exists that combines it with the other
   currently-selected attribute values. Distinct from is-oos (which is a
   variant-level stock state) — incompatible just means the combination
   would be unbuildable. JS adds .is-incompat from the compatibility
   matrix sourced via ld_lens_index. */
.ld-dd__opt.is-incompat {
    color: var(--c-muted-2, #B5BAC1);
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
.ld-dd__opt.is-incompat:hover {
    background: transparent !important;
}
.ld-dd__opt.is-oos .ld-dd__oos-tag {
    margin-left: 6px;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--c-muted-2, #B5BAC1);
    font-weight: 500;
}

/* PLP tile swatches — Magento's swatch widget adds `.disabled` to options
   that aren't in `config.salable[attr]`. We populate that map via the
   InjectSalableFlags plugin, then apply the same struck-through styling
   the PDP form uses so the OOS state is consistent across surfaces. */
.swatch-wrapper .swatch-option.text.disabled,
.swatch-opt .swatch-option.text.disabled {
    color: var(--c-muted, #9CA3AF) !important;
    text-decoration: line-through !important;
    cursor: not-allowed !important;
    opacity: .7;
    pointer-events: none;
}
.swatch-wrapper .swatch-option.text.disabled .swatch_item_price,
.swatch-wrapper .swatch-option.text.disabled .swatch-old-price,
.swatch-wrapper .swatch-option.text.disabled .swatch-special-price,
.swatch-opt .swatch-option.text.disabled .swatch_item_price,
.swatch-opt .swatch-option.text.disabled .swatch-old-price,
.swatch-opt .swatch-option.text.disabled .swatch-special-price {
    color: var(--c-muted, #9CA3AF) !important;
    text-decoration: line-through !important;
}
/* Suppress the theme's generic "custom radio" decoration that targets every
   `label > input[type=radio] + span:first-of-type::before/after`. Our LPB
   rows already render the native radio (`appearance: radio`), so the extra
   pseudo-circle on `.ld-package__title` is a duplicate. */
.ld-prescription .ld-package__option > .ld-package__title::before,
.ld-prescription .ld-package__option > .ld-package__title::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.ld-prescription .ld-package__price {
    font-weight: 700;
    font-size: 15px;
    color: var(--c-ink, #14181C);
    white-space: nowrap;
}

/* Diopter optgroup labels (− / +) — Chrome/FF render them bold and gray
   by default; restyle to match the form aesthetic. */
.ld-prescription .ld-field--diopter .ld-select optgroup {
    font-weight: 700;
    color: var(--c-ink-2, #4A5159);
    font-style: normal;
}
.ld-prescription .ld-field--diopter .ld-select option {
    font-weight: 400;
    color: var(--c-ink, #14181C);
    padding-left: 12px;
}

/* Eyebrow heading — "Оберіть тип лінз:" sits above the tabs. */
.ld-prescription__intro {
    margin: 0 0 .5em;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-ink-2, #4A5159);
}

/* Radio-style mode tabs: row of two cards, each with a double-circle
   eye icon on the left and a label on the right. Native <li>s with
   custom dot via ::before — no extra DOM. */
.ld-prescription__tabs { margin: 0 0 .75em; }
.ld-prescription__tab-list {
    display: flex;
    flex-direction: row;
    /* Spread the two tabs across the full form width so the second tab
       ("Різні Потужності") aligns with the right edge of the field card. */
    justify-content: space-between;
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
.ld-prescription__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: 0 0 .15em 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    color: var(--c-ink-2, #4A5159);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    user-select: none;
    transition: color .15s;
    position: relative;
}
/* Native radio circle — drawn via ::before. */
.ld-prescription__tab::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #BFC4CC;
    background: var(--c-surface, #FFFFFF);
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
}
.ld-prescription__tab:hover::before { border-color: var(--c-ink-2, #4A5159); }
.ld-prescription__tab.is-active {
    color: var(--c-ink, #14181C);
    font-weight: 600;
}
.ld-prescription__tab.is-active::before {
    border-color: #2563EB;
    background:
        radial-gradient(circle at center, #2563EB 0 5px, transparent 6px);
}
/* Double-circle "eye-pair" icon next to the radio. The two filled discs
   represent the prescription's left/right eyes. For "Однакові" they sit
   close + same colour (same Rx for both). For "Різні" they're offset +
   muted (different Rx per eye). */
.ld-prescription__tab[data-mode="same"]::after,
.ld-prescription__tab[data-mode="different"]::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: 0 50%, 100% 50%;
    background-size: 16px 16px, 16px 16px;
    flex-shrink: 0;
}
.ld-prescription__tab[data-mode="same"]::after {
    background-image:
        radial-gradient(circle, #CCDDF4 65%, transparent 66%),
        radial-gradient(circle, #CCDDF4 65%, transparent 66%);
}
.ld-prescription__tab[data-mode="same"].is-active::after {
    background-image:
        radial-gradient(circle, #5B9CE6 65%, transparent 66%),
        radial-gradient(circle, #5B9CE6 65%, transparent 66%);
}
.ld-prescription__tab[data-mode="different"]::after {
    /* offset second disc up a touch to suggest "different powers" */
    background-position: 0 65%, 100% 35%;
    background-image:
        radial-gradient(circle, #D6D9DE 65%, transparent 66%),
        radial-gradient(circle, #D6D9DE 65%, transparent 66%);
}
.ld-prescription__tab[data-mode="different"].is-active::after {
    background-image:
        radial-gradient(circle, #4A5159 65%, transparent 66%),
        radial-gradient(circle, #4A5159 65%, transparent 66%);
}

/* Sections — only the active mode visible. */
.ld-prescription__section { display: none; }
.ld-prescription__section.is-active { display: block; }

/* "Same Power" section: single column of field rows in a card. */
.ld-prescription__section[data-mode="same"] {
    background: var(--c-surface, #FFFFFF);
    border: 1px solid var(--c-line-2, #ECEAE2);
    border-radius: 8px;
    padding: 0;
    /* No overflow:hidden — the .ld-dd__panel needs to escape the card on open. */
}

/* "Different Power" section: two eye-column cards side-by-side. */
.ld-prescription__eyes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}
@media (max-width: 640px) {
    .ld-prescription__eyes { grid-template-columns: 1fr; }
}
.ld-prescription__eyes .ld-eye {
    margin: 0;
    background: var(--c-surface, #FFFFFF);
    border: 1px solid var(--c-line-2, #ECEAE2);
    border-radius: 8px;
    padding: 0;
}
.ld-prescription__eyes .ld-eye__title {
    margin: 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink, #14181C);
    background: var(--c-surface, #FFFFFF);
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--c-line-2, #ECEAE2);
}

/* Field row — label sits in fixed-width left column, value on right.
   Each row is a separate "card" line within the section card. */
.ld-prescription .ld-field {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    margin: 0;
    border-radius: 0;
    border-top: 1px solid var(--c-line-2, #ECEAE2);
}
.ld-prescription__eyes .ld-eye .ld-field { grid-template-columns: 130px 1fr; gap: 8px; padding: 10px 12px; }
.ld-prescription__section[data-mode="same"] .ld-field:first-child,
.ld-prescription__eyes .ld-eye .ld-field:first-of-type { border-top: 0; }

.ld-prescription .ld-field__label {
    font-size: 16px;
    color: var(--c-ink-2, #4A5159);
    font-weight: 400;
    margin: 0;
}

/* Scoped <select> dressing — clean dropdown matching the card aesthetic. */
.ld-prescription .ld-select {
    width: 100%;
    padding: 10px 32px 10px 14px;
    border: 1px solid var(--c-line, #E6E3DB);
    border-radius: 6px;
    background: var(--c-surface, #FFFFFF);
    font-size: 15px;
    color: var(--c-ink, #14181C);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5159' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
}
.ld-prescription .ld-select:disabled,
.ld-prescription .ld-prescription__section:not(.is-active) .ld-select {
    background-color: #F3F4F6;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* Diopter — single linear dropdown (matches dev2 SvitLinz UX). No more
   +/− split-grid; .ld-field--diopter behaves like a regular .ld-field but
   gives us a hook for future tweaks (column width, font-feature for sign). */
.ld-prescription .ld-field--diopter .ld-select { font-variant-numeric: tabular-nums; }

/* Quantity stepper — flat buttons, no borders. Number sits between two
   icon-only buttons; only a subtle hover-bg distinguishes them. */
.ld-prescription .ld-qty-stepper {
    display: inline-grid;
    grid-template-columns: 36px 56px 36px;
    align-items: center;
    background: transparent;
    gap: 4px;
}
.ld-prescription .ld-qty-stepper__btn {
    background: #F4F2EC;
    border: 0;
    height: 36px;
    width: 36px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--c-ink-2, #4A5159);
    padding: 0;
    user-select: none;
    border-radius: 8px;
    transition: background .12s;
}
.ld-prescription .ld-qty-stepper__btn:hover { background: #E8E5DA; }
.ld-prescription .ld-qty-stepper__btn:disabled { color: #C9CCD1; cursor: not-allowed; background: #F8F7F2; }
.ld-prescription .ld-qty-stepper input[type="number"] {
    width: 100%;
    height: 36px;
    border: 0;
    text-align: center;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: var(--c-ink, #14181C);
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
}
.ld-prescription .ld-qty-stepper input[type="number"]::-webkit-inner-spin-button,
.ld-prescription .ld-qty-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Static-value field (Diameter when only 1 option, shows as plain text
   instead of a single-option dropdown). Sized/styled to match the dropdown
   trigger label so all field values read the same across the form. */
.ld-prescription .ld-field__static {
    font-size: .85em;
    color: #1f2937;
    font-weight: 400;
    font-family: inherit;
}

/* Hide the standard <input name=qty> stepper that the theme renders below
   the form (Amasty JetTheme's `.amtheme-add-form-bottom .field.qty`, plus
   Magento's `#product_addtocart_form .field.qty .control.qty-control`).
   Our prescription form has its own qty stepper inside each eye section,
   so showing both produces a duplicate "Кількість" / "К-ть" row below ATC.
   Scoped to bodies that actually render the prescription form so non-lens
   products still see their normal qty input. */
body:has(.ld-prescription) #product_addtocart_form .field.qty,
body:has(.ld-prescription) #product_addtocart_form .amtheme-add-form-bottom .field.qty,
body:has(.ld-prescription) #product_addtocart_form .qty-control,
body:has(.ld-prescription) .amtheme-add-form-bottom .field.qty,
#confirmBox .ld-prescription ~ .field.qty,
#confirmBox .ld-prescription ~ * .field.qty {
    display: none !important;
}

/* Amasty Cart confirm popup close button (<span class="cross">×</span>) —
   default rendering inherits page font-size which on JetTheme makes the ×
   a 2em+ block. Normalize to a small icon-button in the top-right corner. */
#confirmBox .cross {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    color: #6b7280;
    background: transparent !important;
    border-radius: 50%;
    z-index: 2;
    user-select: none;
    transition: color .15s, background .15s;
}
#confirmBox .cross:hover {
    color: #1f2937;
    background: #f3f4f6 !important;
}

/* Widen Amasty Cart "Set options" popup when the prescription form is in
   "Різні Потужності" mode — the two eye cards need horizontal room or they
   wrap into a scrollable strip. CSS `:has()` checks the active section.
   Note: this targets the "Set options" popup (no `.added_to_cart` class).
   The "added to cart" success popup keeps its narrower preset. */
#confirmBox:not(.added_to_cart):has(.ld-prescription__section[data-mode="different"].is-active) {
    width: 900px !important;
    max-width: 95vw !important;
}
#confirmBox:not(.added_to_cart) .ld-prescription {
    /* Inside the popup let the form fill its container — the popup itself
       handles the width constraint via the :has() rule above. */
    max-width: 100% !important;
}