/* PhotoX — customer web surface. Marketing register on index; product register elsewhere. */

/* ---- Find-Me ---- */
.find-hero { padding: var(--s-7) 0 var(--s-5); }
.find-hero h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); max-width: 16ch; }
.find-hero h1 em { font-style: normal; color: var(--primary); }
.find-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; margin-top: var(--s-5); }
.find-panel .seg { margin-bottom: var(--s-4); }
.selfie { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: center; }
.selfie .pv { width: 96px; height: 96px; border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; display: grid; place-items: center; color: var(--muted-2); }
.selfie .pv img { width: 100%; height: 100%; object-fit: cover; }
.samples { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.samples button { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 10px 4px 4px; border: var(--rule-strong); border-radius: var(--r-full); background: var(--bg); font-size: var(--t-13); cursor: pointer; }
.samples button img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.samples button:hover { border-color: var(--ink); }
.find-aside { background: var(--surface); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--elev-card); }
.scan { position: relative; overflow: hidden; }
.scan::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); top: 0; animation: scan 1.4s linear infinite; }
@keyframes scan { to { top: 100%; } }
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-5) 0 var(--s-3); margin-top: var(--s-4); }
.results-head h2 { font-size: var(--t-22); }
.why { font-size: var(--t-13); color: var(--muted); }

/* ---- Events & gallery ---- */
.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; padding: var(--s-3) var(--s-4); position: sticky; top: 72px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev-card); z-index: 5; }
.filters .select, .filters .input { width: auto; min-width: 150px; }
.filters .n { font-size: var(--t-13); color: var(--muted); margin-left: auto; }
.gallery-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end; padding: var(--s-5) 0 var(--s-4); }
.gallery-head h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.ph-credit { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-13); color: var(--ink-2); }
.ph-credit img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.event-cover { position: relative; aspect-ratio: 21 / 7; border-radius: var(--r-lg); overflow: hidden; background: var(--drench); margin-top: var(--s-4); }
.event-cover img { width: 100%; height: 100%; object-fit: cover; }
.event-cover .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-6) var(--s-5) var(--s-4); background: linear-gradient(to top, oklch(0.15 0.02 210 / 0.85), transparent); color: var(--on-drench); }
.event-cover .cap h1 { font-size: var(--fs-h2); color: inherit; max-width: 24ch; }
.event-cover .cap .mono { color: var(--on-drench-muted); }

@media (max-width: 640px) { .event-cover { aspect-ratio: 4/3; } }

/* ---- Photo preview ---- */
.preview { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; padding-top: var(--s-4); }
.preview .stage { min-height: 420px; }
.preview .stage img { max-height: 70vh; }
.buy { background: var(--surface); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--elev-card); position: sticky; top: 80px; }
.buy h1 { font-size: 2rem; }
.opt { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-bottom: var(--row-rule); align-items: center; }
.opt .n { font-weight: 500; }
.opt .d { font-size: var(--t-12); color: var(--muted); grid-column: 1; }
.opt .money { grid-row: 1 / span 2; align-self: center; }
.opt .btn { grid-column: 2; grid-row: 1 / span 2; }
.opt.free { background: var(--accent-soft); margin: 0 calc(-1 * var(--s-3)); padding-inline: var(--s-3); border-radius: var(--r-ctl); border-bottom: 0; }
.strip { display: flex; gap: var(--s-2); overflow-x: auto; padding: var(--s-3) 0; scrollbar-width: none; }
.strip .tile { flex: 0 0 120px; }
.meta-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
@media (max-width: 960px) { .preview { grid-template-columns: 1fr; } .buy { position: static; } }

/* ---- Cart & checkout ---- */
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7); align-items: start; }
.cart-line { display: grid; grid-template-columns: 96px 1fr auto auto; gap: var(--s-4); align-items: center; padding: var(--s-3); margin-bottom: var(--s-3); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev-card); }
.cart-line .th { aspect-ratio: 3/2; border-radius: var(--r-card); overflow: hidden; position: relative; }
.cart-line .th img { width: 100%; height: 100%; object-fit: cover; }
.summary { background: var(--surface); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--elev-card); position: sticky; top: 80px; }
.gw { display: grid; gap: var(--s-2); }
.gw label { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--bw-strong) solid transparent; border-radius: var(--r-card); cursor: pointer; box-shadow: var(--elev-card); }
.gw label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.gw .gwname { font-weight: 800; font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; }
.gw .gwd { font-size: var(--t-12); color: var(--muted); }
@media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } .summary { position: static; } .cart-line { grid-template-columns: 72px 1fr auto; } .cart-line .rm { grid-column: 3; } }
.done { max-width: 760px; margin: var(--s-7) auto var(--s-8); display: grid; gap: var(--gap-grid); }
.done h1 { font-size: var(--fs-h3); }
.done .panel .dl { background: var(--surface-2); border-radius: var(--r-ctl); padding: var(--s-3); border-bottom: 0; margin-bottom: var(--s-2); }
.done .panel.tone { box-shadow: none; }
.done .big { width: 56px; height: 56px; border-radius: 50%; background: var(--success-soft); color: var(--success-ink); display: grid; place-items: center; flex: none; }
.dl { display: grid; grid-template-columns: 80px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: var(--row-rule); }

.dl .th { aspect-ratio: 3/2; border-radius: var(--r-card); overflow: hidden; }
.dl .th img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Account ---- */
.acct { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-7); align-items: start; }
.acct-nav { background: var(--surface); border-radius: var(--r-card); padding: var(--s-2); box-shadow: var(--elev-card); }
.acct-nav a { display: block; padding: var(--s-3) var(--s-4); color: var(--ink-2); font-weight: 600; border-radius: var(--r-ctl); }
.acct-nav a[aria-current="page"] { color: var(--on-primary); background: var(--primary); }
@media (max-width: 800px) { .acct { grid-template-columns: 1fr; } .acct-nav { display: flex; gap: var(--s-4); overflow-x: auto; } .acct-nav a { border: 0; white-space: nowrap; } }
.follow { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4); margin-bottom: var(--s-3); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev-card); }
.follow .fv { width: 64px; height: 64px; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-3); }
.follow .fv img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Photographer public profile ---- */
.profile-facts { background: var(--surface); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--elev-card); }
.profile-head { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-5); align-items: center; padding: var(--pad-card); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev-card); }
.profile-head .avatar { width: 96px; height: 96px; }
@media (max-width: 640px) { .profile-head { grid-template-columns: 64px 1fr; } .profile-head .avatar { width: 64px; height: 64px; } .profile-head > .row { grid-column: 1 / -1; } }


/* ---- Landing (index): Matchday split fold + "By role" bands ---- */
.index { padding-bottom: 0; }
.index .topbar { position: absolute; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; z-index: 6; color: var(--on-drench); }
.index .topbar .brand, .index .topnav a, .index .topbar .who { color: var(--on-drench); }
.index .topnav a:hover { background: oklch(1 0 0 / 0.12); color: var(--on-drench); }
.index .topnav a[aria-current="page"] { background: oklch(1 0 0 / 0.14); color: var(--on-drench); }
.index .topbar .actions .btn-ghost { color: var(--on-drench); }
.index .topbar .actions .btn-secondary { background: oklch(1 0 0 / 0.14); color: var(--on-drench); }
.index .topbar .actions .btn-secondary:hover { background: oklch(1 0 0 / 0.24); }
.index .topbar .in { height: 76px; }
.fold { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--drench); color: var(--on-drench); overflow: hidden; }
.fold > .pic { position: relative; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); min-height: 100vh; }
.fold > .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.fold .in { position: relative; padding: 96px var(--s-6) calc(var(--pocbar-h) + var(--s-5)) var(--gutter); display: flex; flex-direction: column; justify-content: center; max-width: 720px; margin-left: auto; width: 100%; }
.fold h1 { font-size: clamp(3.5rem, 1.5rem + 5.2vw, 6rem); color: inherit; line-height: 0.92; max-width: 14ch; }
.fold h1 em { font-style: normal; color: var(--accent); }
.fold .lead { color: var(--on-drench-muted); max-width: 44ch; margin-top: var(--s-4); font-size: var(--t-16); }
.fold .bibsearch { display: flex; gap: var(--s-2); margin-top: var(--s-5); max-width: 520px; }
.fold .bibsearch .input { min-height: 52px; font-size: var(--t-15); font-family: var(--font-body); background: var(--surface); color: var(--ink); border-color: transparent; border-radius: var(--r-ctl); }
.fold .bibsearch .btn { min-height: 52px; font-weight: 800; }
.fold .alt { margin-top: var(--s-2); font-size: var(--t-13); color: var(--on-drench-muted); }
.fold .alt a { color: var(--on-drench); text-decoration: underline; text-underline-offset: 3px; }
.roleband { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid oklch(1 0 0 / 0.18); }
.roleband .lbl { width: 100%; font-size: var(--t-12); color: var(--on-drench-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.roleband a { display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; border-radius: var(--r-full); background: oklch(1 0 0 / 0.10); border: 2px solid oklch(1 0 0 / 0.25); color: var(--on-drench); font-weight: 700; font-size: var(--t-14); transition: background var(--dur-1), border-color var(--dur-1); }
.roleband a:hover { background: oklch(1 0 0 / 0.2); border-color: oklch(1 0 0 / 0.6); }
.roleband a:first-child { background: var(--surface); color: var(--primary-strong); border-color: var(--surface); }
.roleband a .ico { width: 18px; height: 18px; }
.roleband a span { display: none; }
.fold .demo-cta { margin-top: var(--s-4); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.fold .demo-cta .btn { min-height: 44px; }
.numstrip { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.numstrip .in { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); padding: var(--s-5) 0; }
.numstrip .n { font-family: var(--font-display); font-size: 2.75rem; font-weight: 800; line-height: 1; color: var(--primary-strong); text-transform: uppercase; }
.numstrip .k { font-size: var(--t-13); color: var(--muted); font-weight: 600; margin-top: var(--s-1); }
.band { padding-block: var(--section); }
.band .kick { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); font-weight: 700; margin-bottom: var(--s-3); }
.band h2 { font-size: var(--fs-h1); max-width: 14ch; }
.band .lead { margin-top: var(--s-3); }
.band-parents .in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.band-parents .pic { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--elev-pop); }
.band-parents .pic img { width: 100%; height: 100%; object-fit: cover; }
.steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); padding: var(--s-4); margin-bottom: var(--s-3); counter-increment: s; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev-card); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; color: var(--accent-strong); font-size: 1.75rem; line-height: 1; padding-top: 2px; }
.steps li > p, .steps li > span:nth-child(2) { grid-column: 2; } .steps li > strong { grid-column: 2; }
.steps strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; line-height: 1; }
.steps p { margin: 0; color: var(--ink-2); font-size: var(--t-14); }
.band-photographers { background: var(--primary-soft); }
.band-photographers .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
.statement { background: var(--surface); border-radius: var(--r-lg); padding: var(--pad-card); font-size: var(--t-14); box-shadow: var(--elev-pop); }
.statement .h { display: flex; justify-content: space-between; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-12); color: var(--muted); padding-bottom: var(--s-3); border-bottom: var(--rule-strong); flex-wrap: wrap; }
.statement .r { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: var(--rule); }
.statement .r.total { border-bottom: 0; font-weight: 700; font-size: var(--t-16); padding-top: var(--s-3); color: var(--primary-strong); }
.statement .pic { margin: calc(-1 * var(--pad-card)) calc(-1 * var(--pad-card)) var(--s-4); aspect-ratio: 21/9; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.statement .pic img { width: 100%; height: 100%; object-fit: cover; }
.band-schools .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-8); align-items: center; }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; gap: var(--s-3); }
.mosaic div { border-radius: var(--r-ctl); overflow: hidden; box-shadow: var(--elev-card); }
.mosaic div:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.band-sponsors { background: var(--surface); }
.band-sponsors .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.placelist { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.placelist li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--surface-2); margin-bottom: var(--s-2); font-size: var(--t-15); font-weight: 600; }
.placelist li span { font-family: var(--font-mono); font-size: var(--t-12); color: var(--muted); font-weight: 500; }
.band-trust .in { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.band-trust .in > div { background: var(--surface); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--elev-card); }
.band-trust h3 { font-size: 1.6rem; margin-bottom: var(--s-2); }
.band-trust p { color: var(--ink-2); font-size: var(--t-14); }
.band-trust a { color: var(--primary); font-weight: 700; }
.band-close { background: var(--drench); color: var(--on-drench); }
.band-close .in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.band-close h2 { color: inherit; }
.band-close h2 em { font-style: normal; color: var(--accent); }
.band-close p { color: var(--on-drench-muted); }
.band-close .pic { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--elev-pop); }
.band-close .pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .find-panel { grid-template-columns: 1fr; }
  .fold { grid-template-columns: 1fr; min-height: 0; }
  .fold > .pic { min-height: 38vh; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); order: 2; }
  .fold .in { padding: 96px var(--gutter) var(--s-6); max-width: none; }
  .fold h1 { font-size: 3.6rem; }
  .fold .lead { font-size: var(--t-15); margin-top: var(--s-3); }
  .fold .bibsearch { margin-top: var(--s-4); flex-direction: column; }
  .fold .demo-cta { margin-top: var(--s-3); }
  .fold .demo-cta > span { display: none; }
  .fold .alt { display: none; }
  .roleband { margin-top: var(--s-4); }
  .roleband a { padding: 8px 12px; font-size: var(--t-13); }
  .numstrip .in { grid-template-columns: repeat(2, 1fr); }
  .band-parents .in, .band-photographers .in, .band-schools .in, .band-sponsors .in, .band-close .in { grid-template-columns: 1fr; }
  .band-trust .in { grid-template-columns: 1fr; }
  .band-parents .pic { aspect-ratio: 3/2; }
  .index .topnav { display: none; }
}
.architecture .steps li::before { content: none; } .architecture .steps li > span:first-child { color: var(--primary); padding-top: 2px; }

/* checkout / cart alignment */
.cart-grid { align-items: start; }
.checkout .page-head, .cart .page-head { align-items: center; }
.checkout #co > .panel + .panel { margin-top: var(--gap-grid); }
.checkout #co { gap: var(--gap-grid); }
.checkout .gw + .form-grid { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--rule); }
.oline { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: var(--rule); font-size: var(--t-14); }
.oline img { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; }
.oline .money { white-space: nowrap; }
.summary h2 { margin-bottom: var(--s-2); }
.cart-line .money { font-weight: 600; }

/* my orders */
.order .ohead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-3); margin-bottom: var(--s-2); border-bottom: var(--rule); }
.order .ohead h2 { font-size: var(--t-22); }
.order .oright { display: flex; align-items: center; gap: var(--s-3); }
.order .oright .money.lg { font-size: 1.75rem; }
.order .dl { padding: var(--s-3) 0; }
.order .dl:last-of-type { border-bottom: 0; }

.event .panel.stack-lg > div > h3 { margin-bottom: var(--s-2); }
.evrow .row .pill, .evrow .row .tagchip { height: 26px; }
.pager { align-items: center; }