/* ==========================================================================
   THE LENS BUILDER

   The panel that opens from "With Lenses". Frame on the left with the running
   total, steps on the right.

   EVERY VALUE HERE COMES FROM THE VIBE VISION DESIGN, not from the reference
   screens. The reference was only ever used for the order of the steps. So:
   the purple gradient for anything that moves the customer forward, the same
   3px corner as every other button and field on the shop, the same greys, and
   the same Poppins the page is already using.

   The var() fallbacks are there so the builder still looks right if it is ever
   loaded somewhere the theme's tokens are not, which is the whole reason this
   feature lives in a plugin rather than the theme.
   ========================================================================== */

.vv-lb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    /* minmax(0, …) rather than 1fr, so a wide table inside cannot push the
       panel off the side of a phone. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* The steps sit on the shop's page grey and the frame gets the white half,
       because nearly every product photograph is cut out on white. */
    background: var(--base-2, #f7f7f7);
    overflow: hidden;
}

.vv-lb[hidden] {
    display: none;
}

/* The panel takes focus when it opens so a screen reader announces it. That is
   not something to draw a ring around: the ring belongs on whatever the
   customer tabs to next. */
.vv-lb:focus {
    outline: 0;
}


/* ---- Left: the frame ---- */

.vv-lb__frame {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 4vw, 72px);
    background: var(--base-3, #fff);
    overflow: hidden;
}

.vv-lb__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

.vv-lb__photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.vv-lb__frame-name {
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
}

.vv-lb__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--base, #e4e4e8);
    font-size: 1.125rem;
}

/* LIGHTER THAN THE NAME BESIDE IT, Chad's rule 20 August, and it holds
   everywhere on this site that a name and a price sit together. This figure and
   the frame's name were the same size, the same weight and the same colour, one
   under the other on a computer and side by side on a phone, so nothing told
   the eye which was the thing and which was the money. The size is untouched;
   only the weight goes.

   The final total on the review screen keeps its weight, further down this
   file: there is no name beside it to compete with, only the word Total. */
.vv-lb__total-value {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
    font-weight: 400;
    color: var(--contrast, #353535);
}


/* ---- Right: the steps ---- */

.vv-lb__panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.vv-lb__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Top spacing matches the frame side's, so the step markers and the
       photograph start at the same height. The gap underneath is smaller
       because the heading follows straight after it. */
    padding: clamp(24px, 4vw, 72px) clamp(24px, 4vw, 72px) clamp(16px, 2vw, 30px);
}

.vv-lb__icon {
    width: 22px;
    height: 22px;
    flex: none;
}

.vv-lb .vv-lb__back,
.vv-lb .vv-lb__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--vv-radius, 3px);
    background: none;
    color: var(--contrast, #353535);
    cursor: pointer;
    transition: color var(--vv-transition, 0.2s ease), background-color var(--vv-transition, 0.2s ease);
}

.vv-lb .vv-lb__back:hover,
.vv-lb .vv-lb__close:hover {
    background: var(--base-3, #fff);
    color: var(--accent, #6a35d9);
}

.vv-lb .vv-lb__back[hidden] {
    /* Kept in the layout so the step markers do not jump sideways between
       step 1, where there is nowhere to go back to, and the rest. */
    display: inline-flex;
    visibility: hidden;
}

/* The four step markers. Purple, not the reference's navy. */

.vv-lb__steps {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Hidden on a screen that is not one of the four steps, but still holding its
   space, so the close button does not slide across to the middle of the bar. */
.vv-lb__steps[hidden] {
    display: flex;
    visibility: hidden;
}

.vv-lb__step {
    display: flex;
    align-items: center;
}

.vv-lb__step + .vv-lb__step::before {
    content: "";
    width: clamp(24px, 5vw, 78px);
    height: 2px;
    background: var(--base, #e4e4e8);
}

.vv-lb__step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--vv-radius-pill, 999px);
    background: var(--base, #e4e4e8);
    color: var(--contrast-3, #a2a2a2);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: background var(--vv-transition, 0.2s ease), color var(--vv-transition, 0.2s ease);
}

.vv-lb__step.is-done .vv-lb__step-number,
.vv-lb__step.is-current .vv-lb__step-number {
    background: var(--vv-gradient-purple, linear-gradient(107deg, #874acd 0%, #4e42c1 100%));
    color: var(--base-3, #fff);
}

.vv-lb__step.is-done + .vv-lb__step::before,
.vv-lb__step.is-current + .vv-lb__step::before {
    background: var(--accent, #6a35d9);
}

.vv-lb__body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0 clamp(24px, 4vw, 72px) clamp(28px, 4vw, 72px);
    overflow-y: auto;
}

.vv-lb__screen[hidden] {
    display: none;
}

.vv-lb__heading {
    margin: 0 0 clamp(16px, 2vw, 28px);
    font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
}

.vv-lb__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(16px, 2vw, 28px);
}

.vv-lb__heading-row .vv-lb__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}


/* ---- Help ---- */

.vv-lb .vv-lb__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--vv-radius-pill, 999px);
    background: none;
    color: var(--contrast-3, #a2a2a2);
    cursor: pointer;
    transition: color var(--vv-transition, 0.2s ease);
}

.vv-lb .vv-lb__help:hover,
.vv-lb .vv-lb__help[aria-expanded="true"] {
    background: none;
    color: var(--accent, #6a35d9);
}

.vv-lb__help .vv-lb__icon {
    width: 18px;
    height: 18px;
}

.vv-lb__note {
    margin: 12px 0;
    padding: 16px 18px;
    border-left: 3px solid var(--accent, #6a35d9);
    background: var(--base-3, #fff);
    border-radius: var(--vv-radius, 3px);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__note[hidden] {
    display: none;
}

.vv-lb__note p {
    margin: 0 0 10px;
}

.vv-lb__note p:last-child {
    margin-bottom: 0;
}

.vv-lb__glossary {
    margin: 0;
}

.vv-lb__glossary dt {
    margin-top: 10px;
    font-weight: 700;
    color: var(--contrast, #353535);
}

.vv-lb__glossary dt:first-child {
    margin-top: 0;
}

.vv-lb__glossary dd {
    margin: 2px 0 0;
}


/* ---- Step 1 cards ---- */

.vv-lb__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vv-lb__card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid var(--base, #e4e4e8);
    border-radius: var(--vv-radius, 3px);
    background: var(--base-3, #fff);
    transition: border-color var(--vv-transition, 0.2s ease), box-shadow var(--vv-transition, 0.2s ease);
}

.vv-lb__card:hover,
.vv-lb__card:focus-within {
    border-color: var(--accent, #6a35d9);
    box-shadow: var(--vv-shadow-card, 0 2px 12px rgba(53, 53, 53, 0.08));
}

/* Wording on the left, price on the right, both lines of wording beside it.
   Laid out from the stylesheet rather than by wrapping the wording in another
   element, so the same markup serves a card with a price and a card without
   one. */
.vv-lb .vv-lb__card-choose {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 18px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--vv-radius, 3px);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.vv-lb .vv-lb__card-choose:hover {
    background: none;
    color: inherit;
}

.vv-lb__card-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--contrast, #353535);
}

.vv-lb__card-line {
    grid-column: 1;
    grid-row: 2;
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__card .vv-lb__help {
    margin-right: 12px;
}

/* The card the customer has settled on. Only used where a choice stays on
   screen after it is made, which is the lenses that need no prescription. */
.vv-lb__card.is-chosen {
    border-color: var(--accent, #6a35d9);
    box-shadow: inset 0 0 0 1px var(--accent, #6a35d9);
}

/* What the lens adds. Off to the right, level with the wording, because five
   cards each spending a third line on a price turns a screen you can take in at
   a glance into one you have to scroll.

   Deliberately one figure. The reference strikes a higher price through every
   single option, which is a permanent sale rather than a feature, and is a
   pricing decision for Vibe Vision to take on purpose if they want it. */
.vv-lb__card-price {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 1rem;
    /* Lighter than the option it prices. Same rule as the frame bar above. */
    font-weight: 400;
    white-space: nowrap;
    color: var(--contrast, #353535);
}

.vv-lb__card-help {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 20px 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__card-help[hidden] {
    display: none;
}

/* No phone exception. Dropping the price back under the wording was tried and
   it is exactly the tall card this layout exists to get rid of, and vertical
   space is scarcer on a phone than anywhere else. The description wraps instead,
   which costs one line on the longest two options rather than a line on all
   five. */

.vv-lb__card[hidden] {
    display: none;
}

/* The price before a sale. Only ever drawn when the lens really is on sale in
   the shop, so this is not the reference's permanent strike-through. */
.vv-lb__was {
    margin-right: 8px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__was[hidden] {
    display: none;
}


/* ---- Step 4: the lens levels ----

   The one screen that has to sell something. Every other card is a choice
   between things that cost roughly the same; this one asks somebody to spend
   twelve times as much on a lens, so it is the one card that earns its height
   by listing what the money buys. */

.vv-lb__card--level .vv-lb__card-choose {
    align-items: start;
    padding: 16px 20px;
}

.vv-lb__card--level .vv-lb__card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Level with the name rather than spanning the card, because the benefits
   below it start at the left and a price hanging beside them looks attached to
   whichever line it happens to land on. */
.vv-lb__card--level .vv-lb__card-price {
    grid-row: 1;
}

.vv-lb__badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--vv-radius, 3px);
    background: var(--vv-gradient-purple, linear-gradient(107deg, #874acd 0%, #4e42c1 100%));
    color: var(--base-3, #fff);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vv-lb__badge[hidden] {
    display: none;
}

/* The badge on a level withheld for a strong prescription. Grey rather than
   purple: the purple one is an invitation and this one is the opposite of
   that, and the two sit in the same place on the card. */
.vv-lb__badge--off {
    background: var(--base, #e4e4e8);
    color: var(--contrast-2, #6d6d6d);
}

/* ---- A level that is not for this prescription ----

   Greyed out and left where it is, rather than taken off the screen. Four
   levels that quietly become three leave somebody wondering what they missed.
   The reason sits above the cards, in .vv-lb__note. */
.vv-lb__card.is-unavailable {
    opacity: 0.55;
}

.vv-lb__card.is-unavailable .vv-lb__card-choose {
    cursor: not-allowed;
}

/* The hover and focus states have to go with it, or a card nobody can choose
   still lights up under the pointer and reads as available. */
.vv-lb__card.is-unavailable:hover,
.vv-lb__card.is-unavailable:focus-within {
    border-color: var(--base, #e4e4e8);
    box-shadow: none;
}

.vv-lb__benefits {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    /* Two columns where there is room. Seven benefits down one column makes a
       card taller than the panel; two columns fits the tallest level on screen
       whole, which is the only way they can be compared. */
    columns: 2;
    column-gap: 24px;
}

.vv-lb__benefits li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 5px;
    /* Keeps a benefit and its tick from being split across the two columns. */
    break-inside: avoid;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__benefits .vv-lb__icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--accent, #6a35d9);
}


/* ---- A prescription they saved before ----
   Small cards, so choosing one is a glance and a click rather than a menu. */

.vv-lb__saved {
    margin-bottom: 16px;
}

/* Set when the last saved one is thrown away, so the heading does not sit
   above an empty space. */
.vv-lb__saved[hidden] {
    display: none;
}

.vv-lb__saved-label {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__saved-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The card holds two things to press, so it is the box and the buttons inside
   it are flat. Without that the remove cross would be a button drawn on top of
   a button, and the browser would give it its own border and background. */
.vv-lb__saved-card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--base, #e4e4e8);
    border-radius: var(--vv-radius, 3px);
    background: var(--base-3, #fff);
    transition: border-color var(--vv-transition, 0.2s ease);
}

.vv-lb__saved-card:hover {
    border-color: var(--accent, #6a35d9);
}

.vv-lb__saved-card.is-chosen {
    border-color: var(--accent, #6a35d9);
    box-shadow: inset 0 0 0 1px var(--accent, #6a35d9);
}

.vv-lb .vv-lb__saved-choose {
    flex: 1 1 auto;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--contrast, #353535);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.vv-lb .vv-lb__saved-choose:hover {
    background: transparent;
}

.vv-lb .vv-lb__saved-remove {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--base, #e4e4e8);
    background: transparent;
    color: var(--contrast-2, #6d6d6d);
    cursor: pointer;
    transition: color var(--vv-transition, 0.2s ease), background var(--vv-transition, 0.2s ease);
}

.vv-lb .vv-lb__saved-remove:hover {
    background: var(--base-2, #f3f3f5);
    color: var(--sale, #fc2623);
}

.vv-lb .vv-lb__saved-remove svg {
    width: 15px;
    height: 15px;
}

.vv-lb__saved-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
}

.vv-lb__saved-date {
    display: block;
    font-size: 0.8125rem;
    color: var(--contrast-2, #6d6d6d);
}


/* ---- The upload ----
   One control across the panel, which halves and makes room for the attached
   file beside it, exactly as the reference lays it out. */

.vv-lb__upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.vv-lb__upload.has-file {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* A dashed edge, which is what an attach-a-file area looks like everywhere, and
   the wording centred behind the camera rather than pushed to one side. Solid
   and left-aligned it read as a menu, which is exactly what it is not. */
.vv-lb__upload-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border: 1px dashed var(--contrast-3, #a2a2a2);
    border-radius: var(--vv-radius, 3px);
    background: var(--base-3, #fff);
    color: var(--contrast-2, #6d6d6d);
    font-size: 0.9375rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--vv-transition, 0.2s ease), color var(--vv-transition, 0.2s ease);
}

.vv-lb__upload-control:hover,
.vv-lb__upload-control:focus-within {
    border-color: var(--accent, #6a35d9);
    color: var(--accent, #6a35d9);
}

.vv-lb__upload-text {
    min-width: 0;
}

/* The attached file. Pale rather than loud: it is a confirmation, not an
   invitation to do something. */
.vv-lb__uploaded {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    border: 1px solid rgba(232, 163, 12, 0.35);
    border-radius: var(--vv-radius, 3px);
    background: rgba(232, 163, 12, 0.09);
}

.vv-lb__uploaded[hidden] {
    display: none;
}

.vv-lb .vv-lb__uploaded-view {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--contrast, #353535);
    font-size: 0.9375rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.vv-lb .vv-lb__uploaded-view:hover {
    background: none;
    color: var(--accent, #6a35d9);
}

.vv-lb .vv-lb__uploaded-view span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vv-lb .vv-lb__uploaded-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--vv-radius, 3px);
    background: none;
    color: var(--contrast-2, #6d6d6d);
    cursor: pointer;
    transition: color var(--vv-transition, 0.2s ease);
}

.vv-lb .vv-lb__uploaded-remove:hover {
    background: none;
    color: var(--sale, #fc2623);
}

.vv-lb__note--small {
    margin-top: 0;
    padding: 0;
    border-left: 0;
    background: none;
    font-size: 0.8125rem;
}


/* ---- Looking at the uploaded prescription ---- */

.vv-lb__lightbox {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 60px);
    background: rgba(53, 53, 53, 0.85);
}

.vv-lb__lightbox[hidden] {
    display: none;
}

.vv-lb__lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.vv-lb__lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: var(--base-3, #fff);
}

.vv-lb__lightbox-stage iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--base-3, #fff);
}

.vv-lb .vv-lb__lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--vv-radius, 3px);
    background: var(--base-3, #fff);
    color: var(--contrast, #353535);
    cursor: pointer;
}

.vv-lb .vv-lb__lightbox-close:hover {
    background: var(--base-3, #fff);
    color: var(--accent, #6a35d9);
}


/* ---- The card the numbers sit on ----
   Everything above it on this screen is a way of avoiding typing: one saved
   before, or a photograph of one. This is the typing. On the panel's own grey
   it ran into the rest of the screen; on white it is plainly the part to fill
   in, and it is the same card the contact lens form on a product page uses for
   the same job. */

.vv-lb__rxcard {
    margin: 0 0 20px;
    padding: 20px 22px 6px;
    border: 1px solid var(--base, #e4e4e8);
    border-radius: var(--vv-radius, 3px);
    background: var(--base-3, #fff);
}

/* The table already carries the gap under it, so the card does not need its
   own as well. */
.vv-lb__rxcard .vv-lb__rx {
    margin-bottom: 14px;
}


/* ---- The prescription table ----
   The reference draws a heavy boxed grid. This uses the shop's own field
   styling instead: a light rule between rows, and the fields themselves
   carrying the border, exactly like the checkout.

   THE TABLE'S SHAPE IS NOT IN THIS FILE, and neither is how one box looks.
   Both are in prescription-fields.css, because the same table is drawn in three
   places: here, My Prescriptions in the account, and the contact lens form on a
   product page. It was written out twice until 18 August and the two copies had
   already drifted. Only what is genuinely particular to the panel stays below.

/* The Add column only exists on a lens that has a reading portion. */
.vv-lb__rx-add {
    display: none;
}

.vv-lb__rx.has-add .vv-lb__rx-add {
    display: table-cell;
}


/* ---- Errors ---- */

.vv-lb__error {
    display: block;
    margin-top: 5px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--sale, #fc2623);
    text-align: left;
}

.vv-lb__error[hidden] {
    display: none;
}

.vv-lb__error--form {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--vv-radius, 3px);
    background: rgba(252, 38, 35, 0.07);
    font-size: 0.9375rem;
}

/* There is no amber warning style any more. The site does not comment on
   anybody's prescription. See the note at the top of inc/prescription.php. */


/* ---- Pupillary distance ---- */

.vv-lb__pd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.vv-lb__pd-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__pd-single {
    width: 140px;
}

.vv-lb__pd-single[hidden],
.vv-lb__pd-pair[hidden] {
    display: none;
}

.vv-lb__pd-pair {
    display: flex;
    gap: 12px;
}

.vv-lb__pd-eye {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vv-lb__pd-eye-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--contrast-2, #6d6d6d);
    white-space: nowrap;
}

/* Wide enough for "22.00" with the chevron beside it rather than on top of it.
   92px was not, and clipped the last character of every per-eye PD. */
.vv-lb__pd-eye .vv-lb__cell {
    width: 112px;
}

.vv-lb__pd .vv-lb__note {
    flex-basis: 100%;
}


/* ---- Tick boxes ---- */

.vv-lb__tick {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9375rem;
    cursor: pointer;
}

.vv-lb__tick input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent, #6a35d9);
    cursor: pointer;
}


/* ---- Prism ---- */

.vv-lb__prism {
    margin-bottom: 20px;
}

.vv-lb__rx--prism[hidden] {
    display: none;
}

.vv-lb__bases {
    display: flex;
    gap: 6px;
}

.vv-lb .vv-lb__base {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid var(--base, #e4e4e8);
    border-radius: var(--vv-radius, 3px);
    background: var(--base-3, #fff);
    color: var(--contrast-2, #6d6d6d);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--vv-transition, 0.2s ease), color var(--vv-transition, 0.2s ease);
}

.vv-lb .vv-lb__base:hover {
    background: var(--base-3, #fff);
    border-color: var(--accent, #6a35d9);
    color: var(--accent, #6a35d9);
}

.vv-lb .vv-lb__base[aria-checked="true"] {
    border-color: var(--accent, #6a35d9);
    background: var(--accent, #6a35d9);
    color: var(--base-3, #fff);
}


/* ---- Saving it ---- */

.vv-lb__save {
    margin-bottom: 20px;
}

.vv-lb__save-name {
    position: relative;
    margin-top: 10px;
}

.vv-lb__save-name[hidden] {
    display: none;
}

.vv-lb .vv-lb__save-name input {
    width: 100%;
    padding: 13px 62px 13px 14px;
    border: 1px solid var(--base, #e4e4e8);
    border-radius: var(--vv-radius, 3px);
    background: var(--base-3, #fff);
}

.vv-lb .vv-lb__save-name input:focus {
    border-color: var(--accent, #6a35d9);
    outline: 0;
}

.vv-lb__counter {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    color: var(--contrast-3, #a2a2a2);
}


/* ---- Forward ---- */

/* ---- The review ----

   The last thing anybody reads before they spend money, so it is laid out to
   be checked rather than admired: a label, what it costs, and what it is, in
   that order down the page with nothing else competing. */

.vv-lb__reassure {
    margin: -6px 0 20px;
    font-size: 0.875rem;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__review-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--base, #e4e4e8);
}

.vv-lb__review-label {
    grid-column: 1;
    margin: 0;
    font-weight: 700;
    color: var(--contrast, #353535);
}

.vv-lb__review-price {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    /* Lighter than the line it prices. Same rule as the frame bar above. */
    font-weight: 400;
    white-space: nowrap;
    color: var(--contrast, #353535);
}

/* The three lines describing a lens, one under the other. They read as a list
   rather than a sentence, because that is how they were chosen. */
.vv-lb__review-lines {
    grid-column: 1;
    margin: 4px 0 0;
    font-size: 0.9375rem;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__review-lines span {
    display: block;
}

.vv-lb__review-rx {
    padding: 18px 0 4px;
}

/* Full width of the panel, which is Chad's call and the right one. It was held
   to 620 on the reasoning that three columns stretched across 700 put too much
   air between a heading and its figure. A prescription is up to six columns,
   though, not three, and the review is the last look somebody gets at their own
   numbers before paying. Room to read them beats a tidier looking box. */

.vv-lb .vv-lb__rx-toggle {
    padding: 0 0 12px;
    border: 0;
    background: none;
    color: var(--accent, #6a35d9);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.vv-lb .vv-lb__rx-toggle:hover {
    background: none;
    color: var(--accent, #6a35d9);
    text-decoration: underline;
}

.vv-lb__review-rx [data-vv-rx-panel][hidden] {
    display: none;
}

.vv-lb .vv-lb__review-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--accent, #6a35d9);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.vv-lb .vv-lb__review-file:hover {
    background: none;
    color: var(--accent, #6a35d9);
    text-decoration: underline;
}

.vv-lb__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* The total again, beside the button. It is already on the left, but on a
   narrow screen that panel has become a thin strip along the top and is out of
   sight by the time anybody has scrolled to the bottom of the review. The last
   figure somebody reads before pressing a button should be the one they are
   about to be charged. */
.vv-lb__actions--review {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 20px;
}

.vv-lb__actions-total {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* The word, not the figure. Written as a direct child on purpose: a price
   arrives wrapped in three nested spans of WooCommerce's own, the innermost of
   which is also the first child of its parent, so a plain descendant selector
   here quietly made the total itself small and grey. */
.vv-lb__actions-total > span:first-child {
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--contrast-2, #6d6d6d);
}

.vv-lb__actions-total [data-vv-review-total] {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--contrast, #353535);
}

.vv-lb .vv-lb__submit {
    min-width: 190px;
    padding: 16px 34px;
    border: 0;
    border-radius: var(--vv-radius, 3px);
    background: var(--vv-gradient-purple, linear-gradient(107deg, #874acd 0%, #4e42c1 100%));
    color: var(--base-3, #fff);
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--vv-transition, 0.2s ease);
}

.vv-lb .vv-lb__submit:hover {
    opacity: 0.9;
    color: var(--base-3, #fff);
}

.vv-lb .vv-lb__submit[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.vv-lb .vv-lb__reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border: 0;
    border-radius: var(--vv-radius, 3px);
    background: none;
    color: var(--contrast-2, #6d6d6d);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--vv-transition, 0.2s ease);
}

.vv-lb .vv-lb__reset:hover {
    background: none;
    color: var(--accent, #6a35d9);
}

.vv-lb__reset .vv-lb__icon {
    width: 18px;
    height: 18px;
}


/* ---- Narrow screens ----
   The frame photograph gives up its half and sits above the panel, small
   enough that the first field is still visible without scrolling. */

@media (max-width: 900px) {

    .vv-lb {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .vv-lb__frame {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 12px 20px;
    }

    .vv-lb__photo {
        width: 88px;
        height: 66px;
        flex: none;
    }

    .vv-lb__frame-foot {
        flex: 1;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .vv-lb__frame-name {
        margin: 0;
        font-size: 1rem;
    }

    .vv-lb__total {
        padding-top: 0;
        border-top: 0;
        font-size: 0.875rem;
    }

    /* The word "Total" comes off, the figure stays. A direct child on purpose:
       a price arrives wrapped in three nested spans of WooCommerce's own, and
       the innermost is also the first child of its parent, so this rule
       without the > was hiding the running total itself on every screen
       narrower than 900. */
    .vv-lb__total > span:first-child {
        display: none;
    }

    .vv-lb__total-value {
        font-size: 1.125rem;
    }

    .vv-lb .vv-lb__submit {
        width: 100%;
    }

    /* A full width button and a total beside it will not share a line, so the
       total goes above it where it is still the last thing read. */
    .vv-lb__actions--review {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    /* Two columns of benefits in a panel this narrow gives four words a
       column. One column, and the card is taller but readable. */
    .vv-lb__benefits {
        columns: 1;
    }
}


/* ---- Phones ----
   Five columns will not fit across a phone, and a table that scrolls sideways
   is a poor way to type a prescription. So each eye becomes its own block with
   the boxes stacked down it. The placeholder in every box already says which
   value it wants, so nothing is lost by dropping the column headings. */

@media (max-width: 620px) {

    /* THE FRAME'S NAME DROPS TO ITS OWN LINE, Chad's call 19 August. The bar
       across the top was photograph, name and price on one line, and the name
       is the only one of the three whose length nobody controls: "2507, Black
       Red" fitted and "2507, Translucent Yellow" did not, so it wrapped to two
       lines and squeezed R1 000.00 into "R1" above "000.00". A price broken in
       half at the top of the buying flow is the worst thing on the bar to lose.

       So the photograph and the price share the first line, where both are
       short and neither can grow, and the name sits under them across the full
       width with as much room as it needs. The three are still the same three
       elements in the same order in the markup: the wrapper holding the name
       and the price stands aside here, so its two children sit in this grid
       directly and can be placed independently. Same trick as the header's
       panel on a phone. */
    .vv-lb__frame {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
        row-gap: 8px;
    }

    .vv-lb__frame-foot {
        display: contents;
    }

    .vv-lb__photo {
        grid-column: 1;
        grid-row: 1;
    }

    .vv-lb__total {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }

    /* Nothing else on this line, so it can have the width. */
    .vv-lb__frame-name {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Stacking each eye into its own block is in prescription-fields.css, with
       the rest of the table's shape. What stays here is only the Add column,
       which belongs to this panel alone.

       Matched on the cell rather than the class alone, otherwise the rule that
       stacks every cell outranks it and Add shows on a distance lens. */
    .vv-lb__rx td.vv-lb__rx-add {
        display: none;
    }

    .vv-lb__rx.has-add td.vv-lb__rx-add {
        display: block;
    }

    .vv-lb__pd-single,
    .vv-lb__pd-pair {
        flex: 1;
        width: auto;
    }

    .vv-lb__pd-eye .vv-lb__cell {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   The review, while it is still being fetched

   The review screen asks the server what to put on it, and until that comes
   back there is nothing to put. It used to show the heading and then empty
   space, with the word TOTAL sitting above no figure at all, which reads as a
   price that has failed rather than a price that is a moment away. These are
   the grey bars that stand in the meantime, in the shape of the rows they are
   about to be replaced by, so the panel keeps its height and nothing jumps
   when the real thing lands. The price itself no longer waits: see the note in
   assets/js/lens-builder.js.
   ========================================================================== */

/* Called a ghost rather than a bar. .vv-lb__bar is already taken, by the strip
   at the top of the panel holding the back button and the step markers, and a
   second thing by that name quietly restyled it into a shimmering grey slab. */
.vv-lb__ghost {
    display: block;
    height: 0.9em;
    border-radius: var(--vv-radius, 3px);
    /* The pale band travelling across a grey bar is what says "coming" rather
       than "empty". The colours are stated outright rather than taken from the
       palette because this is a shade of grey standing in for text, not a
       surface, and it has to read as absence on both the white panel and the
       grey one. */
    background: #e0e0e7;
    background-image: linear-gradient( 90deg, #e0e0e7 0%, #eeeef3 50%, #e0e0e7 100% );
    background-size: 200% 100%;
    animation: vv-lb-ghost-sweep 1.2s ease-in-out infinite;
}

.vv-lb__ghost--label {
    width: 5.5em;
    height: 1em;
}

.vv-lb__ghost--price {
    width: 6em;
    height: 1em;
}

.vv-lb__ghost--line {
    width: 62%;
    max-width: 22em;
    height: 0.85em;
    margin-top: 8px;
}

.vv-lb__ghost--short {
    width: 38%;
}

@keyframes vv-lb-ghost-sweep {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Somebody who has asked their computer to stop things moving still gets the
   bars, because the bars are the message. Only the travelling band stops. */
@media (prefers-reduced-motion: reduce) {
    .vv-lb__ghost {
        animation: none;
    }
}