:root { --portrait-ink: #1d1d1f; --portrait-muted: #6e6e73; --portrait-line: #d2d2d7; --portrait-bg: #f5f5f7; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 50px; }
body { margin: 0; color: var(--portrait-ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.person-photo-page .site-header { border-bottom: 0; background: var(--portrait-bg); }
.person-photo-page .site-header.is-past-hero { border-bottom: 1px solid rgba(29,29,31,.12); background: #fff; }
.person-photo-page .primary-navigation { --header-bg: var(--portrait-bg); }

.portrait-hero { position: relative; display: grid; overflow: hidden; align-items: center; background: var(--portrait-bg); }
.portrait-hero::before { position: absolute; top: 8%; right: -8%; width: min(58vw, 830px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 34%, #fff 0 9%, #e8d9ff 34%, #d6e5ff 62%, rgba(245,245,247,0) 72%); filter: blur(2px); content: ""; }
.portrait-hero-content { position: relative; display: grid; grid-template-columns: minmax(390px,.88fr) minmax(560px,1.12fr); gap: clamp(38px,6vw,104px); align-items: center; width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 68px 0 78px; }
.portrait-hero-copy { position: relative; z-index: 2; max-width: 600px; }
.portrait-kicker { margin: 0 0 24px; color: #6e6e73; font-size: 12px; font-weight: 600; letter-spacing: .09em; }
.portrait-hero h1 { margin: 0; font-size: clamp(3.8rem,5.8vw,6.7rem); font-weight: 650; line-height: .92; letter-spacing: -.07em; text-wrap: balance; }
.portrait-hero h1 span { display: block; white-space: nowrap; }
.portrait-hero-copy > p:not(.portrait-kicker) { margin: 30px 0 0; color: #515154; font-size: 1rem; line-height: 1.65; }
.portrait-hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.portrait-hero-actions a { display: inline-flex; min-height: 48px; padding: 0 24px; align-items: center; justify-content: center; border: 1px solid #1d1d1f; border-radius: 980px; font-size: 14px; font-weight: 600; transition: color .2s, background .2s, transform .2s; }
.portrait-hero-actions a:first-child { color: #fff; background: #1d1d1f; }
.portrait-hero-actions a:hover, .portrait-hero-actions a:focus-visible { outline: none; transform: translateY(-2px); }
.portrait-hero-gallery { position: relative; height: min(68vh,690px); min-height: 540px; }
.portrait-preview { position: absolute; width: clamp(210px,18vw,286px); margin: 0; padding: 12px 12px 14px; border: 1px solid rgba(29,29,31,.08); border-radius: 30px; background: rgba(255,255,255,.92); box-shadow: 0 32px 70px rgba(38,38,55,.16); backdrop-filter: blur(18px); }
.portrait-preview span { display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 20px; background-repeat: no-repeat; background-size: 300% 200%; }
.portrait-preview figcaption { padding: 12px 4px 1px; color: #6e6e73; font-size: 12px; text-align: center; }
.portrait-preview-a { z-index: 1; top: 17%; left: 0; transform: rotate(-9deg); }
.portrait-preview-a span { background-image: url('https://static.yuxincode.com/xprodlab-com/images/custom-phone-case/style-person-01-sheet.jpg'); background-position: 50% 0; }
.portrait-preview-b { z-index: 3; top: 3%; left: 32%; transform: rotate(1.5deg); }
.portrait-preview-b span { background-image: url('https://static.yuxincode.com/xprodlab-com/images/custom-phone-case/style-person-02-sheet.jpg'); background-position: 0 0; }
.portrait-preview-c { z-index: 2; top: 20%; right: 0; transform: rotate(9deg); }
.portrait-preview-c span { background-image: url('https://static.yuxincode.com/xprodlab-com/images/custom-phone-case/style-person-03-sheet.jpg'); background-position: 50% 100%; }

.portrait-inspiration { overflow: hidden; padding: 0; background: #fff; }
.portrait-category-banner { width: min(980px, calc(100% - 48px)); margin: 0 auto; padding: 50px 0 30px 0; }
.portrait-category-kicker { margin: 0 0 2px; font-size: 14px; line-height: 20px; }
.portrait-category-banner h2 { margin: 0; font-size: 34px; font-weight: 600; line-height: 1.47; letter-spacing: -.03em; }
.portrait-category-summary { max-width: 800px; margin: 18px 0 0; color: var(--portrait-muted); font-size: 1rem; line-height: 1.75; }
.portrait-category-banner span { display: block; margin-top: 14px; color: var(--portrait-muted); font-size: 12px; line-height: 18px; }
.portrait-catalog-toolbar { position: relative; z-index: 5; display: flex; min-height: 70px; align-items: center; width: min(980px, calc(100% - 48px)); margin: 0 auto; }
.portrait-model-list { position: relative; flex: 0 0 auto; }
.portrait-model-filter-button { display: inline-flex; width: 500px; min-height: 36px; padding: 4px 20px; gap: 7px; align-items: center; justify-content: normal; border: 1px solid #86868b; border-radius: 999px; color: var(--portrait-ink); background: #fff; font: inherit; font-size: 14px; line-height: 20px; letter-spacing: inherit; white-space: nowrap; appearance: none; cursor: pointer; transition: background-color 120ms ease,border-color 120ms ease,box-shadow 120ms ease; }
.portrait-model-filter-button:hover { border-color: #1d1d1f; background: #f5f5f7; }
.portrait-model-filter-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(0,125,250,.32); }
.portrait-model-filter-button[aria-expanded="true"], .portrait-model-filter-button.has-value { border-color: #ccc; background: #f5f5f7; }
.portrait-model-filter-value { max-width: 150px; overflow: hidden; color: #515154; text-overflow: ellipsis; }
.portrait-model-filter-chevron { display: inline-block; width: 6px; height: 6px; margin-top: -3px; margin-left: 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: margin-top 120ms ease,transform 120ms ease; }
.portrait-model-filter-button[aria-expanded="true"] .portrait-model-filter-chevron { margin-top: 3px; transform: rotate(225deg); }
.portrait-model-menu { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 500px; max-height: 360px; margin-top: 8px; overflow-y: auto; padding: 8px; border: 1px solid var(--portrait-line); border-radius: 18px; background: #fff; box-shadow: 0 11px 34px rgba(0,0,0,.16); }
.portrait-model-menu[hidden] { display: none; }
.portrait-model-option { position: relative; display: block; width: 100%; padding: 9px 34px 9px 12px; border: 0; border-radius: 10px; color: var(--portrait-ink); background: transparent; font: inherit; font-size: 14px; line-height: 20px; text-align: left; appearance: none; cursor: pointer; }
.portrait-model-option:hover, .portrait-model-option:focus-visible, .portrait-model-option.is-selected { outline: 0; background: #f5f5f7; }
.portrait-model-option.is-selected::after { position: absolute; right: 12px; color: #0071e3; content: "✓"; }

.re-productgrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; margin: -1px 0 0; border-top: 1px solid var(--portrait-line); border-left: 1px solid var(--portrait-line); background: #fff; }
.re-productgrid-card { position: relative; display: grid; min-width: 0; min-height: 668px; align-content: start; justify-items: center; padding: 38px 0; border-right: 1px solid var(--portrait-line); border-bottom: 1px solid var(--portrait-line); background: #fff; text-align: center; }
.re-productgrid-card-large { grid-column: span 2; min-height: 643px; }
.re-productgrid-card:nth-child(2) { min-height: 643px; }
.re-productgrid-card-img { display: grid; width: min(75%,360px); height: 360px; place-items: center; overflow: hidden; }
.re-productgrid-card-large .re-productgrid-card-img { width: 430px; max-width: calc(100% - 52px); height: 430px; }
.re-productgrid-card-artwork { position: relative; overflow: hidden; height: 100%; transition: transform .35s ease; }
.re-productgrid-card-artwork img { position: absolute; top: 0; width: auto; max-width: none; height: 100%; }
.re-productgrid-card:hover .re-productgrid-card-artwork { transform: scale(1.018); }
.re-productgrid-card-swatches { min-height: 33px; padding: 0 26px; }
.re-productgrid-card-swatches ul { display: flex; min-height: 33px; margin: 0; padding: 14px 0 7px; align-items: center; justify-content: center; list-style: none; }
.re-productgrid-card-swatches li { width: 12px; height: 12px; margin: -1px 3px; border: 1px solid rgba(29,29,31,.16); border-radius: 50%; background: var(--swatch); }
.re-productgrid-card-badges { min-height: 31px; padding: 0 26px; }
.re-productgrid-card-badgetext { display: block; padding-top: 15px; color: #b64400; font-size: 12px; font-weight: 600; line-height: 16px; }
.re-productgrid-card-title { width: 100%; margin: 0; padding: 10px 26px 0; font-size: 1rem; font-weight: 400; line-height: 25px; }
.re-productgrid-card-title-link { display: flow-root; color: var(--portrait-ink); }
.re-productgrid-card-title-link::after { position: absolute; inset: 0; content: ""; }
.re-productgrid-card-title-link:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.re-productgrid-card-price { padding: 10px 26px 0; font-size: 1rem; line-height: 25px; }
.re-productgrid-card-model { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); white-space: nowrap; }
.portrait-inspiration noscript p { padding: 30px 24px; text-align: center; }

@media (max-width: 1080px) {
    .portrait-hero-content { grid-template-columns: minmax(330px,.85fr) minmax(480px,1.15fr); }
    .portrait-preview { width: clamp(190px,22vw,250px); }
}
@media (max-width: 760px) {
    .portrait-hero { min-height: 760px; align-items: start; }
    .portrait-hero::before { top: 35%; right: -42%; width: 150vw; }
    .portrait-hero-content { display: block; width: calc(100% - 40px); padding: 58px 0 40px; }
    .portrait-hero-copy { max-width: none; text-align: center; }
    .portrait-kicker { margin-bottom: 16px; font-size: 11px; }
    .portrait-hero h1 { font-size: clamp(3rem,14vw,4.35rem); line-height: .94; }
    .portrait-hero-copy > p:not(.portrait-kicker) { margin: 20px auto 0; }
    .portrait-hero-actions { max-width: 330px; margin: 24px auto 0; }
    .portrait-hero-actions a { min-height: 44px; flex: 1; padding: 0 14px; font-size: 13px; }
    .portrait-hero-gallery { height: 330px; min-height: 0; margin-top: 34px; }
    .portrait-preview { width: 150px; padding: 7px 7px 9px; border-radius: 20px; }
    .portrait-preview span { border-radius: 14px; }
    .portrait-preview figcaption { padding-top: 8px; font-size: 10px; }
    .portrait-preview-a { top: 30px; left: -18px; }
    .portrait-preview-b { top: 0; left: 50%; transform: translateX(-50%) rotate(1.5deg); }
    .portrait-preview-c { top: 30px; right: -18px; }
    .portrait-category-banner { width: calc(100% - 48px); padding: 50px 0 30px 0; }
    .portrait-category-banner h2 { font-size: 34px; line-height: 1.28; }
    .portrait-catalog-toolbar { width: calc(100% - 48px); min-height: 70px; justify-content: flex-start; }
    .portrait-model-list { width: 100%; }
    .portrait-model-filter-button { width: 100%; justify-content: normal; }
    .portrait-model-filter-chevron { margin-left: auto; }
    .portrait-model-menu { right: 0; min-width: 0; width: 100%; }
    .re-productgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .re-productgrid-card { min-height: 416px; padding: 38px 0; }
    .re-productgrid-card-large { min-height: 472px; }
    .re-productgrid-card:nth-child(2) { min-height: 416px; }
    .re-productgrid-card-img { width: min(100%,194px); height: 194px; }
    .re-productgrid-card-large .re-productgrid-card-img { width: 250px; max-width: calc(100% - 40px); height: 250px; }
    .re-productgrid-card-title, .re-productgrid-card-price { line-height: 20px; }
}
@media (max-width: 390px) {
    .portrait-preview { width: 142px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; } }