/* US Ophthalmic theme fixes (2026-10 migration build). Loaded after main.css. */

/* ---------- Accessibility helpers ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}
.uso-skip-link{position:absolute;left:1.6rem;top:-10rem;z-index:1000000;background:#fff;color:var(--color-primary-dark,#242757);padding:1.2rem 2rem;border-radius:.8rem;font-size:1.6rem;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.uso-skip-link:focus{top:1.6rem}
.uso-main{display:block}
.uso-main:focus{outline:none}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #41489f;outline-offset:2px}

/* ---------- Header: phone, country switcher ---------- */
header .container .cont-menu-c{max-width:none;width:auto;flex-shrink:0}
.uso-header-phone{flex-shrink:0;display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;font-size:var(--font-size-body-md,1.4rem);font-weight:600;color:var(--neutral-600,#2d3843);text-decoration:none}
.uso-header-phone:hover{color:var(--geral---primary-default,#41489f)}
.uso-header-phone svg{flex-shrink:0;color:var(--neutral-500,#4d5a6a)}
@media (max-width:1560px){.uso-header-phone span{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
  .uso-header-phone{width:4.4rem;height:4.4rem;justify-content:center;border-radius:10rem;border:.5px solid var(--neutral-200,#c6d1dd)}}
header .container .cont-menu-c .tr{flex:0 0 4.8rem;width:4.8rem}
header .container .cont-menu-c .btn-nav{white-space:nowrap}
@media (max-width:1500px){header nav ul{gap:2.4rem}header .container .cont-menu-c{gap:1.2rem}header .container .cont-menu-c .btn-nav{padding-left:2.2rem;padding-right:2.2rem}}
.mega-menu-tr .container ul li a{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--neutral-600,#2d3843);font-size:1.4rem;font-weight:500;white-space:nowrap}
.mega-menu-tr .container ul{align-items:flex-start}
.mega-menu-tr .container ul li a .icone{flex-shrink:0;width:3.8rem}
@media (max-width:1211px){.mega-menu-tr .container ul{flex-wrap:wrap;gap:1.2rem 2rem}}
.paises ul li a,.s-paises ul li a{text-decoration:none;color:inherit}
.paises .icone img,.s-paises .icone img{width:3.2rem;height:3.2rem;border-radius:10rem;object-fit:cover}

/* ---------- Breadcrumbs ---------- */
.bread,.s-bread ul{flex-wrap:wrap}
.uso-bread-sep{display:inline-flex;align-items:center}

/* ---------- Product page ---------- */
.uso-spec-table{width:100%;border-collapse:separate;border-spacing:.4rem .8rem;margin-top:2.4rem;table-layout:auto}
.uso-spec-table th,.uso-spec-table td{background:var(--neutral-100,#f5f8fa);border-radius:.8rem;padding:1.2rem 2.4rem;vertical-align:top;text-align:left;line-height:150%}
.uso-spec-table th{color:var(--neutral-600,#2d3843);font-size:var(--font-size-body-lg,1.6rem);font-weight:600;width:28%;min-width:16rem}
.uso-spec-table td{color:var(--neutral-500,#4d5a6a);font-size:var(--font-size-body-md,1.4rem);font-weight:400}
.uso-spec-table td p{margin:0}
@media (max-width:700px){
  .uso-spec-table,.uso-spec-table tbody,.uso-spec-table tr,.uso-spec-table th,.uso-spec-table td{display:block;width:100%}
  .uso-spec-table{border-spacing:0}
  .uso-spec-table tr{margin-bottom:.8rem}
  .uso-spec-table th{border-radius:.8rem .8rem 0 0;padding-bottom:.4rem}
  .uso-spec-table td{border-radius:0 0 .8rem .8rem;padding-top:.4rem}
}
.s-video-pdp .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,48rem),1fr));gap:2.4rem}
.s-video-pdp .container video{height:auto;background:#000;border-radius:1.2rem;width:100%}
.s-video-pdp h2{grid-column:1/-1;color:var(--neutral-600,#2d3843);font-size:var(--font-size-heading-lg,3.2rem);font-weight:500;line-height:150%}
.uso-yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:1.2rem;overflow:hidden;background:#000}
.uso-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.uso-yt__btn{position:absolute;inset:0;display:block}
.uso-yt__btn img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .2s}
.uso-yt__btn:hover img{opacity:1}
.uso-yt__play{position:absolute;left:50%;top:50%;width:6.8rem;height:4.8rem;margin:-2.4rem 0 0 -3.4rem;border-radius:1.2rem;background:rgba(23,23,23,.85)}
.uso-yt__play::after{content:"";position:absolute;left:50%;top:50%;margin:-1rem 0 0 -.6rem;border-style:solid;border-width:1rem 0 1rem 1.7rem;border-color:transparent transparent transparent #fff}
.uso-yt__btn:hover .uso-yt__play,.uso-yt__btn:focus-visible .uso-yt__play{background:#f00}
.uso-html-block{width:100%}

/* ---------- Category / brand / solution pages ---------- */
.s-buying-guide{margin-top:4rem;padding-bottom:4rem}
.s-banner-marcas .container .info h1{margin-bottom:1.6rem}
.card-produto2 .photo > a{display:block;width:100%;height:100%}
.card-produto2 .info h3 a{color:inherit;text-decoration:none}
.card-produto2 .info h3 a:hover{text-decoration:underline}
.s-posts .all-posts[aria-busy="true"]{opacity:.5;transition:opacity .2s}

/* ---------- Long-form content (buying guides, page copy, blog index intro) ---------- */
.uso-prose{max-width:88rem;margin:0 auto;color:var(--neutral-500,#4d5a6a);font-size:1.7rem;line-height:175%}
.uso-prose > *:first-child{margin-top:0}
.uso-prose h2{color:var(--neutral-600,#2d3843);font-size:var(--font-size-heading-md,2.4rem);font-weight:600;line-height:130%;margin:4rem 0 1.6rem}
.uso-prose h3{color:var(--neutral-600,#2d3843);font-size:var(--font-size-heading-sm,2rem);font-weight:600;line-height:135%;margin:3.2rem 0 1.2rem}
.uso-prose h4,.uso-prose h5,.uso-prose h6{color:var(--neutral-600,#2d3843);font-size:1.8rem;font-weight:600;margin:2.4rem 0 1rem}
.uso-prose p{margin:0 0 1.6rem}
.uso-prose a{color:var(--geral---primary-default,#41489f);text-decoration:underline}
.uso-prose ul,.uso-prose ol{margin:0 0 2rem;padding-left:2.4rem}
.uso-prose ul li{list-style:disc;margin-bottom:.8rem}
.uso-prose ol li{list-style:decimal;margin-bottom:.8rem}
.uso-prose strong,.uso-prose b{font-weight:700;color:var(--neutral-600,#2d3843)}
.uso-prose em,.uso-prose i{font-style:italic}
.uso-prose img{max-width:100%;height:auto;border-radius:.8rem}
.uso-prose blockquote{border-left:3px solid var(--neutral-200,#c6d1dd);padding-left:2rem;margin:0 0 2rem}
.uso-prose table{width:100%;border-collapse:collapse;margin:0 0 2.4rem;font-size:1.5rem;display:block;overflow-x:auto}
.uso-prose th,.uso-prose td{border:1px solid #e2e8f0;padding:1rem 1.2rem;text-align:left;vertical-align:top}
.uso-prose th{background:var(--neutral-100,#f5f8fa);color:var(--neutral-600,#2d3843);font-weight:600}
.uso-prose iframe{max-width:100%}
.uso-prose details{border:1px solid #e2e8f0;border-radius:.8rem;padding:1.2rem 1.6rem;margin-bottom:1.2rem}
.uso-prose summary{cursor:pointer;font-weight:600;color:var(--neutral-600,#2d3843)}
.s-page-content{margin:6rem 0}

/* ---------- Maps: no sideways scroll on phones ---------- */
.s-map .container > *{min-width:0}
.s-map .mapa iframe{display:block;width:100%;max-width:100%;min-height:32rem;border:0}

/* ---------- Home ---------- */
.uso-trust__stats.uso-trust__stats--single{grid-template-columns:minmax(0,1fr);max-width:48rem}

/* ---------- Blog index ---------- */
.s-blog-search{margin-top:4rem}
.s-blog-search form{display:flex;align-items:center;gap:1.2rem;max-width:64rem;padding:1.2rem 2.4rem;border-radius:10rem;border:.5px solid #c6d1dd}
.s-blog-search input{flex:1;border:0;background:transparent;font-size:1.6rem;color:var(--neutral-600,#2d3843);outline:none;min-width:0}
.s-blog-search button{background:none;border:0;padding:0;cursor:pointer;display:flex}
.card-blog .info h3 a,.card-blog .photo > a{display:block;width:100%;border:0;border-radius:0;padding:0;margin:0;text-align:inherit;font:inherit;line-height:inherit;color:inherit;background:none}
.card-blog .photo > a{height:100%}
.card-blog{justify-content:space-between}
.card-blog .uso-post-excerpt{color:var(--neutral-500,#4d5a6a);font-size:1.5rem;line-height:160%;margin:0;flex:1}
.card-blog .info h3 a:hover,.card-blog .photo > a:hover{background:none;color:var(--geral---primary-default,#41489f)}
.uso-blog-cats{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.uso-blog-cats a{display:inline-block;padding:.6rem 1.4rem;border-radius:10rem;border:1px solid #e2e8f0;font-size:1.4rem;color:var(--neutral-500,#4d5a6a);text-decoration:none}
.uso-blog-cats a[aria-current="page"],.uso-blog-cats a:hover{background:var(--color-primary-dark,#242757);border-color:var(--color-primary-dark,#242757);color:#fff}

/* ---------- 404 ---------- */
.s-404.uso-404{height:auto;min-height:70vh;padding:16rem 0 8rem}
.uso-404 .container p.uso-404__lead{color:var(--neutral-500,#4d5a6a);font-size:2rem;margin-top:2.4rem;text-align:center}
.uso-404__search{width:100%;max-width:56rem;margin-top:3.2rem}
.uso-404__search form{display:flex;align-items:center;gap:1.2rem;padding:1.2rem 2.4rem;border-radius:10rem;border:.5px solid #c6d1dd;background:#fff}
.uso-404__search input{flex:1;border:0;background:transparent;font-size:1.6rem;outline:none;min-width:0}
.uso-404__search button{background:none;border:0;padding:0;cursor:pointer;display:flex}
.uso-404__cats{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.2rem;margin-top:3.2rem;max-width:80rem}
.uso-404__cats a{display:inline-block;padding:.6rem 1.4rem;border-radius:10rem;border:1px solid #e2e8f0;background:#fff;font-size:1.4rem;color:var(--neutral-500,#4d5a6a);text-decoration:none}
.uso-404__cats a:hover{border-color:#41489f;color:#41489f}
.uso-404 h2.uso-404__h2{font-size:1.8rem;font-weight:600;color:var(--neutral-600,#2d3843);margin-top:4rem;text-align:center}
.uso-404__call{margin-top:2rem;font-size:1.6rem;color:var(--neutral-500,#4d5a6a);text-align:center}
.uso-404__call a{font-weight:600;color:var(--geral---primary-default,#41489f)}

/* ---------- Sitemap ---------- */
.s-sitemap .cont-menu ul li{margin-bottom:.6rem}
.s-sitemap .uso-sitemap-cols{columns:3 22rem;column-gap:3.2rem}

/* ---------- Article bylines (inc/uso-byline.php) ---------- */
.uso-byline{margin:1.2rem 0 0;font-size:1.5rem;line-height:150%;color:var(--neutral-500,#4d5a6a)}
.uso-byline__name{font-weight:600;color:var(--neutral-600,#2d3843)}
.s-banner-blog .container .info p.uso-byline{font-size:1.5rem;margin-top:1.6rem;color:var(--neutral-500,#4d5a6a)}
.card-blog .info .uso-byline{margin-top:.8rem;font-size:1.4rem}
.card-blog .info .uso-byline span.uso-byline__name,.s-banner-blog .container .info .uso-byline span.uso-byline__name{font-size:inherit;line-height:inherit;font-weight:600;color:var(--neutral-600,#2d3843);text-transform:none;letter-spacing:normal;padding:0;background:none;border:0}

/* ======================================================================
 * Wave 3 (2026-10-23): gallery, overflow, nav, related blocks, quote page
 * ==================================================================== */

/* Product photo gallery: square tiles, whole photo visible (720x720 photos were drawn 234x720, object-fit fill). */
.s-galeria-pdp .galeria-pdp .foto{aspect-ratio:1/1;width:100%;overflow:hidden;border-radius:1.2rem;background:#fff}
.s-galeria-pdp .galeria-pdp .foto img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}

/* Carousel slide widths before Swiper starts (same breakpoints and gaps as js/all.js), so nothing jumps on load
   and the unstarted carousels do not make the page wider than the screen. */
.galeria-pdp:not(.swiper-initialized) .swiper-wrapper,.benefits:not(.swiper-initialized) .swiper-wrapper,.allposts:not(.swiper-initialized) .swiper-wrapper{display:flex;overflow:hidden}
.galeria-pdp:not(.swiper-initialized) .swiper-slide{flex:0 0 auto;width:100%;margin-right:24px}
.benefits:not(.swiper-initialized) .swiper-slide{flex:0 0 auto;width:100%;margin-right:32px}
.allposts:not(.swiper-initialized) .swiper-slide{flex:0 0 auto;width:100%;margin-right:25px}
@media (min-width:560px){
  .galeria-pdp:not(.swiper-initialized) .swiper-slide{width:calc((100% - 24px) / 2)}
  .benefits:not(.swiper-initialized) .swiper-slide{width:calc((100% - 16px) / 1.5)}
}
@media (min-width:768px){
  .galeria-pdp:not(.swiper-initialized) .swiper-slide{width:calc((100% - 48px) / 3)}
  .benefits:not(.swiper-initialized) .swiper-slide{width:calc((100% - 32px) / 2)}
  .allposts:not(.swiper-initialized) .swiper-slide{width:calc((100% - 12.5px) / 1.5)}
}
@media (min-width:991px){
  .galeria-pdp:not(.swiper-initialized) .swiper-slide{width:calc((100% - 72px) / 4)}
  .benefits:not(.swiper-initialized) .swiper-slide{width:calc((100% - 64px) / 3)}
  .allposts:not(.swiper-initialized) .swiper-slide{width:calc((100% - 25px) / 2)}
}
@media (min-width:1100px){
  .galeria-pdp:not(.swiper-initialized) .swiper-slide{width:calc((100% - 96px) / 5)}
  .benefits:not(.swiper-initialized) .swiper-slide{width:calc((100% - 96px) / 4)}
  .allposts:not(.swiper-initialized) .swiper-slide{width:calc((100% - 40px) / 3);margin-right:20px}
}

/* No sideways scrolling: the article "Keep reading" carousel (2,580 px wide on a phone) and the full-bleed
   product photo rows (100vw, 3 px wider than the page next to a scrollbar). */
.s-related{overflow-x:clip}
.s-related .allposts{overflow:hidden}
.s-informacoes-tec,.s-solucoes{overflow-x:clip}

/* Mobile menu: the page links (Home, About Us, Showroom, Blog, Contact) were hidden by "nav ul{display:none}". */
.menu-mobile .cont-nav ul.menu{display:block !important;width:100%}
.menu-mobile .cont-nav ul.menu li{padding:12px 0;text-align:left}
.menu-mobile .cont-nav ul.menu li a{display:block;text-align:left;justify-content:flex-start;height:auto;min-height:0;padding:0;line-height:1.5;color:var(--neutral-500,#4d5a6a);font-size:var(--font-size-body-md,1.4rem);text-decoration:none}
.menu-mobile .cont-nav{margin-top:2.4rem}
.menu-mobile .accordion-menu button{font-family:inherit}

/* Header quote button */
header .container .cont-menu-c .uso-header-quote{font-weight:600;letter-spacing:.02em}

/* "Related equipment & resources" (products and collections) and collection buying-guide links */
.s-related-resources{margin:6rem 0 0}
.s-related-resources .uso-related{max-width:none;padding:3.2rem;border:1px solid #e2e8f0;border-radius:1.6rem;background:var(--neutral-100,#f5f8fa)}
.s-related-resources .uso-related h2{margin-top:0}
.s-related-resources .uso-related > :last-child{margin-bottom:0}
.uso-guide-links{margin-top:4.8rem}
.uso-guide-links__box{border:1px solid #e2e8f0;border-radius:1.6rem;padding:2.4rem 3.2rem;background:var(--neutral-100,#f5f8fa)}
.uso-guide-links__title{color:var(--neutral-600,#2d3843);font-size:var(--font-size-heading-sm,2rem);font-weight:600;margin:0 0 1.2rem}
.uso-guide-links ul{margin:0;padding-left:2rem}
.uso-guide-links li{list-style:disc;margin:0 0 .8rem;font-size:1.6rem;line-height:150%}
.uso-guide-links a{color:var(--geral---primary-default,#41489f);text-decoration:underline}
.uso-guide-links__more{margin:1.2rem 0 0;font-size:1.5rem}
@media (max-width:700px){.s-related-resources .uso-related,.uso-guide-links__box{padding:2rem}}

/* Product videos: three across when there are several */
.s-video-pdp.is-many .container{grid-template-columns:repeat(auto-fill,minmax(min(100%,30rem),1fr))}

/* Default page template (page.php): was an inline 140px top padding under a sticky header (an empty white band). */
.uso-page{padding:4.8rem 0 8rem}
.uso-page__container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Quote page: the first form field in the first desktop screen (old page: form top at 569 px; was 696 px). */
.uso-page--get-a-quote{padding-top:2.4rem}
@media (min-width:750px){
  .uso-page--get-a-quote .uso-quote-hero{padding:22px 32px !important;margin-bottom:14px !important}
  .uso-page--get-a-quote .uso-quote-hero .uso-quote-hero__title{font-size:32px !important;line-height:1.2 !important;margin-bottom:8px !important}
  .uso-page--get-a-quote .uso-quote-hero__eyebrow{margin-bottom:8px !important}
  .uso-page--get-a-quote .uso-quote-hero__sub{margin-bottom:12px !important}
  .uso-page--get-a-quote #uso-quote-intro{margin-bottom:12px}
}
@media (max-width:749px){
  .uso-page--get-a-quote{padding-top:1.2rem}
  .uso-page--get-a-quote .uso-page__container{padding:0 14px}
}

/* Desktop header with the Blog link: keep every item on one line down to 1212 px (below that the burger menu shows). */
header nav ul li > a{white-space:nowrap}
@media (max-width:1400px){header nav ul{gap:2rem}header .container .cont-menu-c{gap:1rem}}
@media (max-width:1300px){header nav ul{gap:1.6rem}header .container .cont-menu-c .btn-nav{padding-left:1.8rem;padding-right:1.8rem}}
header .container > nav{margin:0 2rem}
@media (max-width:1300px){header .container > nav{margin:0 1.2rem}}

/* Home / About photo strip: photos were squeezed into 364x290 (object-fit: fill stretched them 13-14%). */
.s-galeria .galeria-track .photo img{object-fit:cover}

/* Phones: product title, then REQUEST QUOTE, then the product photo, then the description, so the photo and the
   quote button are in the first screen (old site: quote button at 187 px, photo at 289 px). The photo used to sit
   below the whole description (628-792 px, behind the bottom quote bar). */
@media (max-width:749px){
  .s-banner-product{padding:2.4rem 0 3.2rem}
  .s-banner-product>.container,.s-banner-product>.container>.info{display:contents}
  .s-banner-product>.container>.info>*{order:5;margin-left:2.4rem;margin-right:2.4rem}
  .s-banner-product>.container>.info>h1{order:2;margin-top:0;font-size:2.8rem;margin-bottom:1.2rem;padding-right:4.8rem}
  .s-banner-product>.container>.info>.uso-dcta{order:3;margin-top:0}
  .s-banner-product>.photo{order:4;height:auto;aspect-ratio:4/3;margin:0 0 2.4rem}
  .s-banner-product>.container>.info>.text{order:5}
  .s-banner-product>.container>.info>.btn-primary{order:6;align-self:flex-start}
  .s-banner-product>.container>.share{top:2rem;right:1.6rem;bottom:auto}
}

/* Visionare comparison / configurator blocks (inserir_html): labels were 9-11 px; old swatch names were 14 px. */
.uso-html-block [style*="font-size:9px"],.uso-html-block [style*="font-size:10px"],.uso-html-block [style*="font-size:11px"]{font-size:12px !important}
#vsconf .vs-eyebrow,#vsconf .vs-combo-lbl,#vsconf .vs-lab{font-size:12px}
#vsconf .vs-nm{font-size:13px;max-width:84px}

/* Products rebuilt from old-store cut-out photos (body.uso-fit-contain): the whole product on white, never cropped and
   never blown up past its box (Panorama's only photo is soft; Merilas and NTZ-CGX-4 were cropped by object-fit: cover). */
.uso-fit-contain .s-banner-product .photo{background:#fff}
.uso-fit-contain .s-banner-product .photo img{object-fit:contain;padding:4.8rem;box-sizing:border-box}
.uso-fit-contain .s-informacoes-tec .container .card-tec .photo{height:auto;max-height:53.1rem;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:1.6rem;overflow:hidden}
.uso-fit-contain .s-informacoes-tec .container .card-tec .photo img{object-fit:contain;width:100%;height:auto;max-height:53.1rem}
@media (max-width:991px){.uso-fit-contain .s-banner-product .photo{height:auto;aspect-ratio:1/1;max-height:60rem}}
@media (max-width:749px){
  .uso-fit-contain .s-banner-product>.photo{aspect-ratio:1/1}
  .uso-fit-contain .s-banner-product .photo img{padding:1.6rem}
  .uso-fit-contain .s-informacoes-tec .container .card-tec .photo{height:auto}
}
/* Phones/tablets: a tall photo grew its square box (height:auto + aspect-ratio lets content stretch it); pin the image
   inside the box so the whole product fits. */
@media (max-width:991px){
  .uso-fit-contain .s-banner-product .photo{position:relative;min-height:0;overflow:hidden}
  .uso-fit-contain .s-banner-product .photo img{position:absolute;inset:0;width:100%;height:100%}
}