/* Lanhu: desktop c3e05ccd (1920), mobile f638ed0c (430).
 * Only the editorial content is styled here; collection and FAQ keep their shared CSS.
 */
.photochromic-page .faq-answer-content a { text-decoration: underline; }

.photochromic-content,
.photochromic-content * { box-sizing: border-box; }
.photochromic-content { color: #2c252b; font-size: 18px; line-height: normal; }
.photochromic-content h1,
.photochromic-content h2,
.photochromic-content h3,
.photochromic-content p,
.photochromic-content ul,
.photochromic-content figure { margin: 0; line-height: normal; }
.photochromic-content h2 { color: #000; font-size: 48px; font-weight: 500; }
.photochromic-content picture,
.photochromic-content img { display: block; }
.photochromic-content img { height: auto; max-width: 100%; }
.photochromic-content button { font: inherit; }
.photochromic-content [hidden] { display: none !important; }
.pc-container { width: calc(100% - 40px); max-width: 1368px; margin-inline: auto; }
.photochromic-content .pc-mobile-only { display: none; }

.pc-hero { position: relative; height: min(36.458333vw, 700px); min-height: 440px; color: #fff; background: #151515; }
.pc-video { position: relative; min-width: 0; }
.pc-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
.pc-hero > .pc-video { height: 100%; }
.pc-hero video { object-fit: cover; }
.pc-hero__copy { position: absolute; inset: auto 0 44px; text-align: center; pointer-events: none; }
.pc-hero__copy h1 { font-size: 72px; font-weight: 500;line-height: 1; }
.pc-hero__copy p { max-width: 940px; margin: 8px auto 0; font-size: 24px; font-weight: 500; }
.pc-video__toggle { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #fff; border-radius: 50%; color: #fff; background: rgb(44 37 43 / 65%); cursor: pointer; }
.pc-video__toggle:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.pc-intro { display: grid; grid-template-columns: 470fr 708fr; grid-template-rows: 270px 210px; column-gap: 13.89%; margin-top: 89px; }
.pc-intro__image { grid-column: 1; grid-row: 1 / 3; }
.pc-intro__copy { grid-column: 2; grid-row: 1; align-self: end; }
.pc-intro__copy p { margin-top: 10px; }
.pc-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 24px; grid-column: 2; grid-row: 2; align-content: start; list-style: none; padding: 20px 0 0; font-weight: 500; }
.pc-benefits li { display: flex; align-items: center; gap: 13px; min-width: 0; font-family:'Inter'; }
.pc-benefits picture { flex: 0 0 36px; }
.pc-benefits img { width: 36px; height: 36px; }

.pc-adaptive { display: grid; grid-template-columns: 541fr 754fr; align-items: center; gap: 73px; margin-top: 146px; color: #000; }
.pc-adaptive__copy > h2 { margin-bottom: 10px; }
.pc-adaptive > .pc-video { aspect-ratio: 754 / 303; }
.pc-expandable > button { display: none; }

.pc-types { margin-top: 140px; text-align: center; color: #000; }
.pc-types__intro { margin-top: 8px !important; font-size: 24px; }
.pc-types__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 610px)); justify-content: space-between; gap: 40px; margin-top: 39px; text-align: left; }
.pc-types__grid img { width: 100%; }
.pc-types__description { margin-top: 10px !important; font-size: 16px; }
.pc-types__description h3,
.pc-types__description em { font-size: 18px; font-weight: 500; font-style: italic; }

.pc-colors { margin-top: 103px; text-align: center; }
.pc-colors__intro { margin-top: 10px !important; }
.pc-colors__grid { display: grid; grid-template-columns: repeat(4, 240px); justify-content: space-between; row-gap: 46px; margin-top: 42px; }
.pc-color img { width: 240px; }
.pc-color figcaption { margin-top: 18px; font-size: 24px; font-weight: 500; }
.pc-note { margin-top: 86px; margin-bottom: 94px; padding: 27px 26px; background: #f6f6f6; text-align: center; font-size: 16px; }
.pc-note p { max-width: 910px; margin-inline: auto; }

@media (min-width: 768px) and (max-width: 1399px) {
  .photochromic-content h2 { font-size: clamp(30px, 3.4286vw, 48px); }
  .pc-hero__copy h1 { font-size: clamp(48px, 5.1429vw, 72px); }
  .pc-intro { grid-template-rows: auto auto; column-gap: 7%; align-items: center; }
  .pc-intro__copy { align-self: end; }
  .pc-intro__image { align-self: center; }
  .pc-benefits { font-size: 16px; padding-top: 18px; padding-bottom: 20px; gap: 10px; }
  .pc-benefits li { gap: 8px; }
  .pc-adaptive { gap: 40px; }
  .pc-colors__grid { grid-template-columns: repeat(4, minmax(0, 240px)); gap: 40px 24px; }
}

@media (max-width: 767px) {
  .photochromic-content { font-size: 16px; }
  .photochromic-content h2 { font-size: 34px; }
  .photochromic-content .pc-mobile-only { display: block; }
  .photochromic-content .pc-desktop-only { display: none; }
  .pc-hero { height: auto; min-height: 0; aspect-ratio: 430 / 796; }
  .pc-hero > .pc-video { position: absolute; inset: 0; }
  .pc-hero__copy { bottom: 26px; }
  .pc-hero__copy h1 { max-width: 390px; margin-inline: auto; font-size: 56px; }
  .pc-hero__copy p { max-width: 360px; margin-top: 12px; font-size: 18px; font-weight: 400; }
  .pc-video__toggle { width: 32px; height: 32px; right: 8px; bottom: 8px; }
  .pc-intro { display: flex; flex-direction: column; margin-top: 50px; }
  .pc-intro__copy { align-self: stretch; }
  .pc-intro__copy p { margin-top: 10px; }
  .pc-intro__image { width: 280px; max-width: 100%; margin: 17px auto 0; }
  .pc-benefits { grid-template-columns: minmax(0, 1fr) max-content; gap: 12px 20px; width: 100%; padding: 24px 0 0; font-size: 16px; }
  .pc-benefits li { gap: 12px; font-size: 15px; }
  .pc-benefits picture { flex-basis: 24px; }
  .pc-benefits img { width: 24px; height: 24px; }
  .pc-benefits__even { grid-column: 1; grid-row: 1; }
  .pc-benefits__dark { grid-column: 2; grid-row: 1; }
  .pc-benefits__fade { grid-column: 1; grid-row: 2; }
  .pc-benefits__stable { grid-column: 2; grid-row: 2; }
  .pc-adaptive { display: block; margin-top: 49px; }
  .pc-adaptive > .pc-video { width: calc(100% + 10px); margin: 21px -5px 0; }
  .pc-expandable.is-enhanced { position: relative; }
  .pc-expandable.is-enhanced:not(.is-expanded) > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .pc-expandable.is-enhanced > button { display: block; margin: 4px 0 0 auto; padding: 0; border: 0; background: transparent; color: #989898; font-size: 12px; cursor: pointer; }
  .pc-expandable.is-enhanced:not(.is-expanded) > button { position: absolute; right: 0; bottom: 0; margin: 0; padding-left: 8px; background: #fff; }
  .pc-expandable.is-enhanced:not(.is-expanded) > button::before { content: '… '; }
  .pc-expandable > button:focus-visible { outline: 2px solid #2c252b; outline-offset: 3px; }
  .pc-types { margin-top: 40px; text-align: left; }
  .pc-types__intro { margin-top: 8px !important; font-size: 18px; }
  .pc-types__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 14px; }
  .pc-types__description { margin-top: 10px !important; }
  .pc-colors { margin-top: 28px; text-align: left; }
  .pc-colors h2 { font-size: 40px; }
  .pc-colors__intro { font-size: 18px; }
  .pc-colors__grid { grid-template-columns: repeat(2, minmax(0, 165px)); gap: 12px 20px; margin-top: 30px; text-align: center; }
  .pc-color img { width: 165px; }
  .pc-color figcaption { margin-top: 6px; font-size: 18px; font-weight: 600; }
  .pc-color--red { grid-column: 1; grid-row: 3; }
  .pc-color--amber { grid-column: 2; grid-row: 3; }
  .pc-note { width: 100%; max-width: none; margin-top: 33px; margin-bottom: 60px; padding: 15px 20px; text-align: left; }
  .pc-note .pc-expandable.is-enhanced:not(.is-expanded) > p { -webkit-line-clamp: 2; }
  .pc-note .pc-expandable.is-enhanced:not(.is-expanded) > button { background: #f6f6f6; }
}

@media (max-width: 389px) {
  .pc-hero__copy h1 { font-size: 48px; }
  .pc-benefits { column-gap: 10px; }
  .pc-benefits li { gap: 6px;font-size: 14px; }
}