/* Look pages, collection hubs and the all-looks index. Reuses the site.css tokens. Hairlines, no glows, no gradients, lime only for actions. */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  background: var(--lime); color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.2;
  border-radius: var(--r-control); padding: 14px 24px; min-height: 52px; border: 0; transition: background-color .15s ease;
}
.btn-primary:hover { background: var(--lime-hover); text-decoration: none; }
.btn-primary:focus-within { outline: 3px solid var(--paper); outline-offset: 3px; }
.btn-primary.small { min-height: 44px; padding: 8px 16px; border-radius: 10px; font-size: 0.95rem; }
.site-footer .btn-primary, .site-footer .btn-primary:hover { color: var(--ink); text-decoration: none; }

/* Footer: two extra link columns for the collections */
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.3fr repeat(5, 1fr); } }

/* Breadcrumbs */
.crumbs { padding-block: 20px 4px; font-size: 0.9rem; color: var(--mist); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; }
.crumbs li { display: flex; align-items: baseline; min-width: 0; padding-block: 6px; line-height: 1.4; }
.crumbs li + li::before { content: "/"; flex: none; margin-inline: 10px; color: var(--mist); }
.crumbs a { color: var(--mist); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; }
.crumbs [aria-current] { overflow-wrap: anywhere; }
.crumbs a:hover { color: var(--paper); text-decoration: underline; }
.crumbs [aria-current] { color: var(--paper); }

/* First fold */
.look-hero, .hub-hero { display: grid; gap: clamp(24px, 4vw, 56px); padding-block: 20px clamp(36px, 6vw, 72px); }
@media (min-width: 900px) {
  .look-hero { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); align-items: center; }
  .look-hero.no-media { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .hub-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
.look-media { margin: 0; }
.media-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.media-cell { position: relative; min-width: 0; }
.media-cell img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-photo); background: var(--graphite); }
.look-media:not(.is-pair) .media-row { grid-auto-columns: minmax(0, 420px); }
.media-cell .tag {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; background: var(--ink); color: var(--paper);
  font-size: 0.8125rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; letter-spacing: 0.01em;
}
.look-media figcaption { margin-top: 10px; color: var(--mist); font-size: 0.85rem; }
.eyebrow { margin: 0 0 14px; color: var(--mist); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }
.eyebrow a { color: var(--mist); text-decoration: none; border-bottom: 1px solid var(--border); }
.eyebrow a:hover { color: var(--paper); border-color: var(--mist); }
.pg-title {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; text-wrap: balance;
  font-size: clamp(2.4rem, 6.4vw, 4.4rem); line-height: 1;
}
:lang(ar) .pg-title { font-weight: 700; line-height: 1.25; letter-spacing: 0; font-size: clamp(2rem, 5.2vw, 3.4rem); }
.look-intro .lede { margin: 20px 0 28px; }

/* Photo hand-off: the start of the tool */
.handoff { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.handoff .btn-primary { min-height: 56px; }
.handoff-link { color: var(--paper); font-weight: 600; text-underline-offset: 4px; }
.handoff-link.keep, .handoff-link.is-quiet { color: var(--mist); font-weight: 500; }
.handoff-link.keep:hover, .handoff-link.is-quiet:hover { color: var(--paper); }
/* One obvious action: with JS on, the photo button is the way in, so the studio link steps back (it shows as the button without JS, below). */
.js .handoff[data-handoff] .handoff-link:not(.keep) { display: none; }
.handoff-link:hover { color: var(--lime); }
.handoff label.btn-primary { display: none; }
.js .handoff label.btn-primary { display: inline-flex; }
html:not(.js) .handoff .handoff-link { background: var(--lime); color: var(--ink); text-decoration: none; padding: 14px 24px; border-radius: var(--r-control); font-weight: 700; }
.cost-note { margin: 12px 0 0; color: var(--mist); font-size: 0.95rem; max-width: 34em; }
.how-line { margin: 12px 0 0; color: var(--mist); font-size: 0.95rem; max-width: 34em; }
.how-line strong { color: var(--paper); }
.media-cell .tag.tag-ai { top: auto; bottom: 8px; inset-inline-start: 8px; border: 1px solid var(--border-strong); }
.look-media figcaption { font-size: 0.9rem; }

/* Mosaic on hubs */
.mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mosaic li:nth-child(2) { margin-top: 24px; }
.mosaic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-photo); background: var(--graphite); }

/* Content sections: label column + body, divided by hairlines */
.pg, .pg-wide { padding-block: clamp(40px, 6vw, 72px); }
.pg { display: grid; gap: 18px; }
@media (min-width: 900px) { .pg { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }
.pg-h { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; margin-bottom: 4px; }
:lang(ar) .pg-h { font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.pg-h a { color: inherit; text-decoration: none; }
.pg-h a:hover { text-decoration: underline; text-decoration-color: var(--mist); }
.pg-h .count { font-family: var(--sans); font-size: 0.9rem; color: var(--mist); margin-inline-start: 8px; }
.pg-wide .pg-h { margin-bottom: 28px; }
.pg-body { min-width: 0; max-width: 46em; }
.pg-body > p { margin: 0 0 14px; color: var(--paper); text-wrap: pretty; }
.pg-body > p:last-child { margin-bottom: 0; }
.pg-body .fine, .pg-wide .fine, .pg-foot { color: var(--mist); font-size: 0.9rem; margin-top: 16px; }
.pg-foot { padding-block: 0 24px; }
.fields { margin: 18px 0 0; border-top: 1px solid var(--border); }
.fields > div { display: grid; gap: 4px 24px; padding-block: 14px; border-bottom: 1px solid var(--border); }
@media (min-width: 640px) { .fields > div { grid-template-columns: 9em 1fr; } }
.fields dt { font-weight: 700; }
.fields dd { margin: 0; color: var(--mist); }
.tips { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 10px; }
.tips li::marker { color: var(--mist); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.steps li { display: grid; grid-template-columns: 2.2em 1fr; gap: 12px; align-items: start; }
.step-n { font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--mist); }
.steps h3 { font-size: 1.05rem; font-weight: 700; font-family: var(--sans); }
.steps p { margin: 4px 0 0; color: var(--mist); }
.table-wrap { overflow-x: auto; margin: 16px 0 0; }
.table-wrap .data-table { min-width: 460px; }
.data-table.packs { margin-top: 28px; max-width: 420px; }
.data-table.packs caption { font-size: 0.95rem; }
@media (max-width: 639px) { .hide-sm { display: none; } .table-wrap .data-table { min-width: 0; } }
.pg-body .faq { margin-top: 0; }

/* Cards */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) and (max-width: 899px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; } }
.hub-hero + .pg-wide .grid, .pg-wide .grid { }
.card a { display: block; color: var(--paper); text-decoration: none; }
.card img, .card-ph { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-photo); background: var(--graphite); display: block; }
.card-ph { display: grid; place-items: center; padding: 12px; text-align: center; color: var(--mist); font-size: 0.875rem; border: 1px solid var(--border); background: transparent; }
.card-name { display: block; margin-top: 12px; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.card-meta { display: block; margin-top: 4px; color: var(--mist); font-size: 0.875rem; }
.card a:hover .card-name { text-decoration: underline; text-underline-offset: 3px; }
.more { margin: 24px 0 0; color: var(--mist); }
.more a { color: var(--paper); }

/* Chips (internal links) */
.chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--paper); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.chips a:hover { border-color: var(--paper); }
.index-hero { padding-block: 20px 40px; }
.index-hero .lede { margin-bottom: 0; }
.pg-wide[id] { scroll-margin-top: 84px; }

.data-table .hint.px { font-size: 0.875rem; margin-top: 2px; }
.table-wrap .data-table th[scope="row"] { min-width: 8em; }
.index-hero .trust-line { margin-top: 18px; }

/* 44 px minimum targets (final pass) */
.site-header .brand { min-width: 44px; justify-content: center; }
.pair-thumb { min-width: 44px; }
/* Phones: one line, "‹ Painted portraits" as a back link. The first and last crumbs stay in the page for screen readers. */
@media (max-width: 599px) {
  .crumbs li:first-child, .crumbs li:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .crumbs li:nth-child(2)::before { content: "\2039"; margin-inline: 0 8px; color: var(--paper); font-size: 1.3em; line-height: 1; }
  [dir="rtl"] .crumbs li:nth-child(2)::before { content: "\203A"; }
  .crumbs li:last-child::before { content: none; }
  .crumbs { padding-block: 4px 0; }
}
.eyebrow a, .more a { display: inline-flex; align-items: center; min-height: 44px; }
.eyebrow a { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }

/* Technical details (pixel sizes, print dpi, the model names): closed by default, small, never in a sentence. */
.tech { margin-top: 14px; color: var(--mist); }
.tech > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 0.9375rem; font-weight: 600; }
.tech ul { margin: 4px 0 0; padding-inline-start: 1.1em; display: grid; gap: 6px; font-size: 0.875rem; }
.tech .fine { font-size: 0.875rem; margin-top: 8px; }
:lang(ar) .tag, :lang(ar) .card-meta { font-size: 0.875rem; }

/* Phones: the crumb already says which collection this is, so the same words are not repeated above the title. */
@media (max-width: 599px) { .look-intro .eyebrow { display: none; } }
/* Short phones (320x640 and similar): title, photo button, price and privacy line first, then the example, so "Add your photo" is never under the cookie notice. */
@media (max-width: 899px) and (max-height: 720px) {
  .look-hero { gap: 16px; }
  .look-intro { display: contents; }
  .look-intro .pg-title { order: 1; }
  .look-intro .handoff { order: 2; }
  .look-intro .cost-note { order: 3; margin-top: 0; }
  .look-intro .trust-line { order: 4; margin-top: 0; }
  .look-media { order: 5; }
  .look-intro .lede { order: 6; margin: 0; }
  .look-intro .how-line { order: 7; margin: 0; }
}
/* Collection titles on /looks/ are links: give them a 44 px touch area without changing the layout. */
.pg-h a { display: inline-block; padding-block: 11px; margin-block: -11px; min-width: 44px; }

/* Hub steps: three short titles, no paragraphs. Stack on phones, one row from 640 px. */
.steps-compact { gap: 0; }
.steps-compact li { grid-template-columns: 2.2em minmax(0, 1fr); align-items: baseline; padding: 14px 0; }
.steps-compact .step-n { grid-row: auto; font-size: 1.6rem; }
.steps-compact h3 { margin: 0; font-size: 1.05rem; }
@media (min-width: 640px) {
  .steps-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}
.pg-body .tech { margin-top: 8px; }

/* Design pass 2026-11-02: homepage tips block sits flush with the grid and keeps the section rhythm. */
.feature .tips { margin-top: clamp(56px, 7vw, 88px); padding-inline-start: 0; display: grid; }
.feature .tips ul { padding-inline-start: 1.1em; margin: 0; }
.rail-wrap + .tips { margin-top: clamp(40px, 5vw, 64px); }