/*
 * Price Vision Group inner page design layer for Kadence blocks.
 * Classes are set on blocks through "Additional CSS class(es)".
 */

:root {
    --pvg-navy: #0e3a5c;
    --pvg-midnight: #071b2e;
    --pvg-sky: #6fa8dc;
    --pvg-ice: #c9dceb;
    --pvg-cream: #fbfaf8;
    --pvg-magenta: #c00078;
    --pvg-gradient: linear-gradient(274deg, #132d52, #1479d1);
    --pvg-band-pad: clamp(3.5rem, 7vw, 7rem);
}

html,
body {
    overflow-x: clip;
}

.standard-inner-wrapper > .pvg-band:first-child,
.standard-inner-wrapper > .related-pages-bottom:first-child + .pvg-band {
    margin-top: calc(var(--gl-inner-pad-top) * -1);
}

.standard-inner-wrapper > .pvg-band:last-child {
    margin-bottom: calc(var(--gl-inner-pad-bottom) * -1);
}

/* Bands */
.pvg-band {
    position: relative;
}

.pvg-band > .kt-row-column-wrap {
    width: 90%;
    max-width: var(--gl-max-width, 1350px);
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--pvg-band-pad);
    padding-bottom: var(--pvg-band-pad);
    padding-left: 0;
    padding-right: 0;
    /* Kadence prints a default top/bottom padding for every row after this file, read from these variables.
       Padding set on the block itself still wins. */
    --global-kb-row-default-top: var(--pvg-band-pad);
    --global-kb-row-default-bottom: var(--pvg-band-pad);
}

.pvg-band--tight > .kt-row-column-wrap {
    padding-top: calc(var(--pvg-band-pad) * .55);
    padding-bottom: calc(var(--pvg-band-pad) * .55);
    --global-kb-row-default-top: calc(var(--pvg-band-pad) * .55);
    --global-kb-row-default-bottom: calc(var(--pvg-band-pad) * .55);
}

/* Rows nested inside a band keep Kadence's own default instead of inheriting the band's. */
.pvg-band > .kt-row-column-wrap > * {
    --global-kb-row-default-top: initial;
    --global-kb-row-default-bottom: initial;
}

/* Two classes on purpose: since Kadence Blocks 3.8 every row gets a transparent background from a one-class
   rule (.wp-block-kadence-rowlayout) that loads after this file. */
.pvg-band.pvg-band--light {
    background-color: var(--pvg-cream);
}

.pvg-band.pvg-band--ice {
    background-color: var(--pvg-ice);
}

.pvg-band--dark,
.pvg-band--photo,
.pvg-band--sunset {
    color: #fff;
}

.pvg-band.pvg-band--dark,
.pvg-band.pvg-band--photo,
.pvg-band.pvg-band--sunset {
    background-color: var(--pvg-midnight);
}

.pvg-band--photo {
    background-image: linear-gradient(#00000080, #00000080), url('../images/bg-full.jpg');
    background-size: auto, cover;
    background-position: 0 0, 50% 50%;
}

.pvg-band--sunset {
    background-image: linear-gradient(#00000080, #00000080), url('../images/indiana-sunset.jpg');
    background-size: auto, cover;
    background-position: 0 0, 50% 0;
    background-attachment: scroll, fixed;
}

/* .pvg-band twice so these outrank the navy "body:not(...) .entry h2" type rules further down. */
.entry .pvg-band.pvg-band--dark h2,
.entry .pvg-band.pvg-band--dark h3,
.entry .pvg-band.pvg-band--dark h4,
.entry .pvg-band.pvg-band--photo h2,
.entry .pvg-band.pvg-band--photo h3,
.entry .pvg-band.pvg-band--sunset h2,
.entry .pvg-band.pvg-band--sunset h3 {
    color: #fff;
}

.pvg-band--dark a:not(.wp-block-button__link),
.pvg-band--photo a:not(.wp-block-button__link),
.pvg-band--sunset a:not(.wp-block-button__link) {
    color: var(--pvg-ice);
}

.pvg-center {
    text-align: center;
}

.pvg-center .pvg-eyebrow,
.pvg-center .pvg-tag,
.pvg-center .wp-block-buttons {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.pvg-narrow > .kt-row-column-wrap {
    max-width: 900px;
}

/* Type (not on Full-Width Canvas pages, where the Kadence block settings own the type). :where() keeps these
   as weak as a plain ".entry h2" so the component rules (cards, dark bands, doctor badge) still override them. */
:where(body:not(.page-template-template-canvas)) .entry h2 {
    color: var(--pvg-navy);
}

:where(body:not(.page-template-template-canvas)) .entry h2 em,
:where(body:not(.page-template-template-canvas)) .entry h3 em {
    -webkit-text-fill-color: transparent;
    background-image: url('../images/sq-bg.jpg');
    background-position: 50%;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: .15em;
    /* When the phrase wraps, give every line its own padding so the italic overhang isn't clipped. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* The gradient's purple end sinks into dark bands and photos; lift it there. */
.pvg-band--dark :is(h2, h3) em,
.pvg-band--photo :is(h2, h3) em,
.pvg-band--sunset :is(h2, h3) em {
    filter: brightness(1.6);
}

:where(body:not(.page-template-template-canvas)) .entry h3 {
    font-family: ivypresto-headline, sans-serif;
    font-weight: 300;
    font-size: 1.9em;
    line-height: 1.15em;
    color: var(--pvg-navy);
}

:where(body:not(.page-template-template-canvas)) .entry h4 {
    color: var(--pvg-navy);
}

.pvg-lead {
    font-size: 1.2em;
    line-height: 1.65em;
}

.pvg-eyebrow {
    display: table;
    width: fit-content;
    align-self: flex-start;
    border: 1px solid var(--pvg-magenta);
    border-radius: 50px;
    padding: 12px 30px;
    margin-bottom: 18px;
    font-size: .8em;
    line-height: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pvg-band--dark .pvg-eyebrow,
.pvg-band--photo .pvg-eyebrow,
.pvg-band--sunset .pvg-eyebrow {
    color: #fff;
}

.entry ul:not(.kt-svg-icon-list):not(.kt-tabs-title-list) li::marker {
    color: var(--pvg-magenta);
}

/* Split rows */
.pvg-split > .kt-row-column-wrap {
    align-items: center;
}

.pvg-photo img,
.pvg-photo .kb-img {
    width: 100%;
    height: auto;
    border: 1px solid #ffffff40;
    border-radius: 15px;
}

.pvg-photo:not(.pvg-photo--natural) img {
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.pvg-photo.pvg-photo--tall img {
    aspect-ratio: 4 / 5;
}

.pvg-photo {
    position: relative;
    margin: 0;
}

.pvg-split .pvg-photo::after {
    content: "";
    position: absolute;
    inset: auto -14px -14px auto;
    width: 45%;
    height: 45%;
    border-right: 1px solid var(--pvg-magenta);
    border-bottom: 1px solid var(--pvg-magenta);
    border-radius: 0 0 22px 0;
    pointer-events: none;
}

/* Cards */
.pvg-cards > .kt-row-column-wrap {
    row-gap: 1.75rem;
    column-gap: 1.75rem;
}

.pvg-card {
    background: #fff;
    border: 1px solid #c9dceb;
    padding: 2rem;
    transition: transform .3s ease, box-shadow .3s ease;
}

.pvg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -24px rgba(7, 27, 46, .45);
}

.pvg-card h3,
.pvg-card h4 {
    font-size: 1.5em;
}

.pvg-band--dark .pvg-card,
.pvg-band--photo .pvg-card,
.pvg-band--sunset .pvg-card {
    color: #fff;
    background: linear-gradient(#ffffff12, #ffffff12);
    border-color: #c9dceb52;
}

.entry .pvg-band--dark .pvg-card h3,
.entry .pvg-band--dark .pvg-card h4,
.entry .pvg-band--photo .pvg-card h3,
.entry .pvg-band--photo .pvg-card h4 {
    color: var(--pvg-sky);
}

.pvg-band--light .pvg-card {
    background: #fff;
}

.pvg-tag {
    display: table;
    width: fit-content;
    align-self: flex-start;
    border: 1px solid var(--pvg-magenta);
    border-radius: 50px;
    padding: 8px 18px;
    margin-bottom: 14px;
    font-size: .75em;
    line-height: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pvg-card .pvg-photo:not(.pvg-photo--natural) img {
    border-radius: 10px;
    aspect-ratio: 16 / 10;
}

.pvg-card .pvg-photo::after {
    display: none;
}

/* Stat tiles */
.pvg-stat {
    background-color: var(--pvg-midnight);
    background-image: radial-gradient(circle farthest-corner at 50% 50%, var(--pvg-navy), var(--pvg-midnight));
    color: #fff;
    padding: 2rem 1.5rem;
    text-align: center;
}

.pvg-stat p:first-child {
    font-family: ivypresto-headline, sans-serif;
    font-size: 3em;
    line-height: 1em;
    margin-bottom: .35em;
}

/* Quote */
.pvg-quote {
    background: #fff;
    border-left: 3px solid var(--pvg-magenta);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    font-family: ivypresto-headline, sans-serif;
    font-size: 1.35em;
    font-weight: 300;
    line-height: 1.4em;
    color: var(--pvg-navy);
}

.pvg-quote a {
    overflow-wrap: anywhere;
}

.pvg-band--dark .pvg-quote,
.pvg-band--photo .pvg-quote,
.pvg-band--sunset .pvg-quote {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: #071b2e33;
    border: 1px solid #ffffff40;
    border-left: 1px solid #ffffff40;
    padding: clamp(2rem, 5vw, 3.5rem);
    font-size: 1.6em;
    line-height: 1.35em;
    color: #fff;
    text-align: center;
}

.pvg-quote p:last-child {
    margin-bottom: 0;
}

/* Buttons */
.entry .wp-block-button.pvg-btn .wp-block-button__link {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 50rem;
    background: var(--pvg-navy);
    color: #fff;
    margin: 0;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    transition: background .35s ease, border-color .35s ease;
}

/* If a label has to wrap, split it into even lines instead of leaving one word on its own. */
.entry .wp-block-button.pvg-btn .wp-block-button__link {
    text-wrap: balance;
}

@media screen and (max-width: 479px) {
    .entry .wp-block-button.pvg-btn .wp-block-button__link {
        font-size: .9em;
    }
}

.entry .wp-block-buttons:has(.pvg-btn) {
    gap: 12px;
    margin-top: 1.5rem;
}

.entry .wp-block-button.pvg-btn .wp-block-button__link::after {
    content: "\2192";
    transition: transform .3s ease;
}

.entry .wp-block-button.pvg-btn .wp-block-button__link:hover {
    background: var(--pvg-gradient);
}

.entry .wp-block-button.pvg-btn .wp-block-button__link:hover::after {
    transform: translateX(4px);
}

.entry .wp-block-button.pvg-btn--outline .wp-block-button__link {
    background: transparent;
    border-color: currentColor;
    color: var(--pvg-navy);
}

.pvg-band--dark .wp-block-button.pvg-btn--outline .wp-block-button__link,
.pvg-band--photo .wp-block-button.pvg-btn--outline .wp-block-button__link,
.pvg-band--sunset .wp-block-button.pvg-btn--outline .wp-block-button__link {
    color: #fff;
}

.entry .wp-block-button.pvg-btn--outline .wp-block-button__link:hover {
    background: var(--pvg-gradient);
    border-color: transparent;
    color: #fff;
}

/* Accordion (FAQ) */
.pvg-faq .kt-accordion-pane {
    margin-bottom: 10px;
}

.entry .pvg-faq .kt-blocks-accordion-header {
    background: var(--pvg-navy);
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 18px 24px;
    font-family: Space Grotesk, sans-serif;
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.35em;
    transition: background .3s ease;
}

.entry .pvg-faq .kt-blocks-accordion-header:hover,
.entry .pvg-faq .kt-blocks-accordion-header.kt-accordion-panel-active {
    background: var(--pvg-gradient);
    color: #fff;
}

.pvg-faq .kt-blocks-accordion-icon-trigger:before,
.pvg-faq .kt-blocks-accordion-icon-trigger:after {
    background: #fff;
}

.entry .pvg-faq .kt-accordion-panel-inner {
    background: #fff;
    border: 1px solid var(--pvg-ice);
    border-top: 0;
    padding: 1.5rem 1.75rem .5rem;
    color: #333;
}

.pvg-band--dark .pvg-faq .kt-accordion-panel-inner a {
    color: var(--pvg-navy);
}

.entry .pvg-faq .kt-blocks-accordion-title {
    margin: 0;
    color: inherit;
    font-family: Space Grotesk, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35em;
    letter-spacing: 0;
}

/* Icon list */
.pvg-checks .kt-svg-icon-list-item-wrap {
    margin-bottom: .8em;
}

.pvg-checks .kt-svg-icon-list-single {
    color: var(--pvg-magenta);
}

/* .pvg-band twice to outrank the magenta Kadence prints for each icon list block. */
.pvg-band.pvg-band--dark .pvg-checks .kt-svg-icon-list-single,
.pvg-band.pvg-band--photo .pvg-checks .kt-svg-icon-list-single {
    color: var(--pvg-sky);
}

/* Tabs */
.entry .pvg-tabs .kt-tabs-title-list {
    gap: 10px;
    flex-wrap: wrap;
    border: 0;
    margin-bottom: 1.5rem;
}

.entry .pvg-tabs .kt-tabs-title-list li .kt-tab-title {
    border: 1px solid var(--pvg-navy);
    border-radius: 50rem;
    background: transparent;
    color: var(--pvg-navy);
    padding: .7rem 1.4rem;
    margin: 0;
    font-size: .95em;
    font-weight: 500;
}

/* .wp-block-kadence-tabs added so this outranks Kadence's per-block "background: #ffffff" on the active tab. */
.entry .wp-block-kadence-tabs.pvg-tabs .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title {
    background: var(--pvg-gradient);
    border-color: transparent;
    color: #fff;
}

.entry .pvg-tabs .kt-tabs-content-wrap > .wp-block-kadence-tab {
    border: 1px solid var(--pvg-ice);
    background: #fff;
    padding: clamp(1.5rem, 4vw, 2.75rem);
}

.pvg-band--dark .pvg-tabs .kt-tabs-content-wrap > .wp-block-kadence-tab {
    color: #333;
}

.pvg-band--dark .pvg-tabs .kt-tabs-title-list li:not(.kt-tab-title-active) .kt-tab-title {
    color: #fff;
    border-color: #fff;
}

/* Tables preserved from the old site */
.entry table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.entry th,
.entry td {
    border: 1px solid var(--pvg-ice);
    padding: .75rem 1rem;
    text-align: left;
    vertical-align: top;
}

.entry th {
    background: var(--pvg-navy);
    color: #fff;
}

.pvg-video iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 15px;
}

@media screen and (max-width: 767px) {
    .pvg-split .pvg-photo::after {
        display: none;
    }

    .pvg-band--sunset {
        background-attachment: scroll, scroll;
    }

    .pvg-band--dark .pvg-quote,
    .pvg-band--photo .pvg-quote,
    .pvg-band--sunset .pvg-quote {
        padding: 1.75rem 1.5rem;
        font-size: 1.25em;
    }
}

.entry .pvg-card h3 a,
.entry .pvg-card h4 a {
    color: inherit;
    text-decoration: none;
}

.entry .pvg-card h3 a::after,
.entry .pvg-card h4 a::after {
    content: " \2192";
    color: var(--pvg-magenta);
}

.pvg-center .pvg-card {
    text-align: center;
}

.pvg-center .pvg-photo--natural img {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Contained bands: section panels that stay inside their column (doctor bios) */
.pvg-band--contained {
    margin-bottom: 1.5rem;
}

.pvg-band--contained > .kt-row-column-wrap {
    width: 100%;
    max-width: none;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    --global-kb-row-default-top: clamp(1.5rem, 3vw, 2.5rem);
    --global-kb-row-default-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.pvg-band--contained:not(.pvg-band--dark):not(.pvg-band--light):not(.pvg-band--ice):not(.pvg-band--photo):not(.pvg-band--sunset) > .kt-row-column-wrap {
    padding: 1rem 0;
}

/* Single doctor template */
.single-cpt-wrapper {
    gap: 0;
    align-items: flex-start;
}

.single-cpt-wrapper > .single-doctor-img-info {
    width: 30%;
    position: sticky;
    top: 110px;
    border-right: 0;
    padding-right: clamp(1.5rem, 3vw, 3rem);
}

.single-cpt-wrapper > .single-doctor-bio {
    padding-left: 0;
    min-width: 0;
}

.single-doctor-img-info .doctor-featured-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 15%;
    border: 1px solid #ffffff40;
    border-radius: 15px;
    box-shadow: 14px 14px 0 -1px #fff, 15px 15px 0 0 var(--pvg-magenta);
    margin-bottom: 1.75rem;
}

.single-doctor-img-info h3.doctor-additional-specialties {
    display: table;
    border: 1px solid var(--pvg-magenta);
    border-radius: 50px;
    padding: 10px 22px;
    color: var(--pvg-navy);
    font-family: Space Grotesk, sans-serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1em;
}

.single-doctor-bio .alignfull {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.single-doctor-bio .pvg-band:not(.pvg-band--contained) > .kt-row-column-wrap {
    width: 100%;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

/* "Our Doctors" grid under each doctor bio */
.doctors-section {
    background: var(--pvg-cream);
    margin-top: 3rem;
    padding: var(--pvg-band-pad) 0;
}

.doctors-section .doctors-container {
    width: 90%;
    max-width: var(--gl-max-width, 1350px);
    margin: 0 auto;
}

.doctors-section h2 {
    color: var(--pvg-navy);
    margin-bottom: 2rem;
}

.doctors-section .cpt-grid {
    gap: 1.25rem;
}

.cpt-doctor-image-link > a.doctor-headshot-link {
    background: #fff;
    border: 1px solid var(--pvg-ice);
    color: var(--pvg-navy);
    padding: 1rem 1rem 1.25rem;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cpt-doctor-image-link > a.doctor-headshot-link:hover {
    background: #fff;
    color: var(--pvg-magenta);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -24px rgba(7, 27, 46, .45);
}

.cpt-doctor-image-link .doctor-headshot-link img {
    aspect-ratio: 4 / 5;
    object-position: 50% 15%;
    border-radius: 10px;
    border: 0;
}

.cpt-doctor-image-link .doctor-name {
    font-family: ivypresto-headline, sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    margin-bottom: 0;
}

/* Portrait cards (doctor grids on pages) */
.pvg-card .pvg-photo.pvg-photo--tall img {
    aspect-ratio: 4 / 5;
    object-position: 50% 15%;
}

@media screen and (max-width: 767px) {
    .single-cpt-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .single-cpt-wrapper > .single-doctor-img-info {
        position: static;
        width: 100%;
        max-width: 340px;
        padding-right: 0;
    }

    .single-cpt-wrapper > .single-doctor-bio {
        width: 100%;
    }
}

.pvg-split .pvg-photo--natural::after {
    display: none;
}

/* Full-Width Canvas template: rows run edge to edge under the fixed navbar. */
.page-template-template-canvas .standard-inner-wrapper {
    width: 100%;
    max-width: none;
    padding: 80px 0 0;
}

.page-template-template-canvas .standard-inner-wrapper > .alignfull {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
}

/* Kadence Blocks 3.8 sizes single icons with no size of their own at 50px; they used to follow the text size
   (the chevrons on the self-test result pages). A size set on the block still wins. */
.wp-block-kadence-single-icon.kt-svg-icon-wrap {
    --kb-icon-size: 1em;
}

/* Blog and archive "Read More" links: the site's navy pill instead of the theme's default black square. */
.entry a.moretag {
    padding: .8rem 1.6rem;
    border-radius: 50rem;
    background: var(--pvg-navy);
    color: #fff;
    font-weight: 500;
    line-height: 1.2em;
    text-transform: none;
}

.entry a.moretag:hover {
    background: var(--pvg-gradient);
    color: #fff;
    box-shadow: none;
}

/* Review badge cards (a linked badge image and nothing else): less padding so the badge fills the card. */
.pvg-card:has(> .kt-inside-inner-col > .pvg-photo:only-child .kb-advanced-image-link) {
    padding: 1rem 1.25rem;
}

/* Doctors archive filter reset: the site's navy pill instead of the plugin's black square. */
.dr-clear-btn {
    padding: .7rem 1.6rem;
    border: 0;
    border-radius: 50rem;
    background: var(--pvg-navy);
    color: #fff;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
    transition: background .35s ease;
}

.dr-clear-btn:hover {
    background: var(--pvg-gradient);
}

/* A button group with more content after it (a heading, a form) gets room below it, not just above. */
.entry .wp-block-buttons:has(.pvg-btn):not(:last-child) {
    margin-bottom: 3rem;
}

/* Jotform "Webpage Contact Us Form" (Contact, Request an Appointment): Jotform's embed handler sizes the iframe
   to the form card and leaves off the bottom of the form's gray frame, so the form looks cut off. Continue the
   frame below it in the same gray. */
.entry iframe#JotFormIFrame-203454848956065 {
    box-sizing: content-box;
    padding-bottom: 2rem;
    background: #ecedf3;
}

/* Review grids: masonry columns so a one-line review isn't stretched to the height of a long one beside it. */
.pvg-cards--reviews > .kt-row-column-wrap {
    display: block;
    column-count: 2;
    column-gap: 1.75rem;
}

.pvg-cards--reviews > .kt-row-column-wrap > .pvg-card {
    break-inside: avoid;
    margin-bottom: 1.75rem;
}

@media screen and (max-width: 767px) {
    .pvg-cards--reviews > .kt-row-column-wrap {
        column-count: 1;
    }
}

/* Rendia video dialog (js/pvg-video-popup.js) */
.pvg-video-dialog {
    width: min(960px, 92vw);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: #000;
    overflow: visible;
}

.pvg-video-dialog::backdrop {
    background: rgba(7, 27, 46, .85);
}

.pvg-video-dialog__frame iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 85vh;
    border: 0;
    border-radius: 15px;
}

.pvg-video-dialog__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.pvg-video-dialog__close:hover,
.pvg-video-dialog__close:focus-visible {
    background: rgba(255, 255, 255, .15);
}

/* The IOL "distances seen clearly" grids are white line art on a transparent background; give them a navy panel. */
.pvg-photo img[src*="IOL-distances"] {
    box-sizing: border-box;
    padding: 1.5rem;
    background: var(--pvg-navy);
    object-fit: contain;
    aspect-ratio: 473 / 312; /* both grid images are 473x312 */
}