/* Sorellina Clinic — shared extras for the QUAD facial, aesthetics and
   whitening pages. Loads after css/inner.css and uses only its tokens. */

/* rating line under the hero actions */
.hero-rating { margin-top: 22px; font-size: .9rem; color: var(--on-dark-2); }
.hero-rating a { color: var(--on-dark-2); text-underline-offset: .22em; text-decoration-color: rgba(185, 178, 162, .45); transition: color 160ms ease, text-decoration-color 160ms ease; }
.js .hero-glass .hero-rating { animation: rise 700ms var(--ease-out) 620ms both; }
@media (hover: hover) and (pointer: fine) { .hero-rating a:hover { color: var(--gold-light); text-decoration-color: currentColor; } }

/* a poster photograph keeps its full frame inside the window */
.hero-photo.poster { background: #0c0c0b; }
.hero-photo.poster img { object-fit: contain; }

/* price mirror extras: a line of context above the rows, a note below */
.panel-intro { margin-top: 22px; max-width: 40rem; font-size: .98rem; color: var(--on-dark-2); }
.panel-note { margin-top: 22px; max-width: 40rem; font-size: .92rem; color: var(--on-dark-2); }
.price-panel .panel-intro + .price-rows { margin-top: 18px; }

/* copy beside a framed photograph */
.split { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.wall-inner > .split:first-child { margin-top: 0; }
.split.reverse .split-photo { order: -1; }
.split-photo { margin: 0; }
.split-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 8px solid var(--charcoal); box-shadow: 0 18px 40px rgba(27, 28, 30, .12), 0 2px 4px rgba(27, 28, 30, .1); }
.split-photo.on-black img { object-fit: contain; background: #0c0c0b; }
.split-text, .reading .split-text { margin-top: 14px; max-width: 38rem; color: var(--ink-2); }
.split-sub { margin-top: 30px; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.15; }
.split-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.split-actions .btn-ink, .split-actions .btn-gilt { text-align: left; }
.btn-ink svg, .btn-gilt svg { flex: none; }
.btn-ink:focus-visible, .btn-gilt:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-photo { order: 0; }
  .split-photo { max-width: 520px; }
}

/* a short ruled list on the wall */
.ticks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 38rem; }
.ticks li { position: relative; padding-left: 26px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 12px; height: 1.5px; background: var(--gold-shade); }
.ticks strong { color: var(--ink); font-weight: 500; }
.ticks.long { gap: 14px; }

/* numbered steps on a printed card */
.printed-card ol.steps { counter-reset: step; }
.printed-card ol.steps li { counter-increment: step; padding-left: 34px; }
.printed-card ol.steps li::before { content: counter(step); top: .05em; width: auto; height: auto; background: none; font: 400 1.1rem/1.4 var(--serif); color: var(--gold-shade); }
.printed-card li strong { color: var(--ink); font-weight: 500; }

/* aftercare card beside the questions */
.care-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.care-split .printed { grid-template-columns: 1fr; }
@media (max-width: 860px) { .care-split { grid-template-columns: 1fr; } }

/* questions and summaries: keyboard focus and pointer hover */
.faq summary { border-radius: 2px; transition: color 160ms ease; }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.faq summary:active { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--blue); } }
.faq-head { margin-top: clamp(44px, 5vw, 64px); margin-bottom: 8px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; }
.reading { max-width: 860px; margin: clamp(56px, 7vw, 96px) auto 0; }

/* six films, three to a row on wide screens */
.films-six figure { flex: 0 1 340px; }
@media (max-width: 860px) {
  .films-six { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); padding-bottom: 8px; scrollbar-color: var(--gold-shade) transparent; }
  .films-six figure { flex: 0 0 62vw; max-width: 280px; scroll-snap-align: start; }
}

/* the counter on an inner page: three quotes side by side */
.counter .quote p { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }

/* the Nima film on the aesthetics page */
.nima-film { margin-top: clamp(56px, 7vw, 96px); }
.nima-words h2 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.02; }

/* closing line at the foot of a page */
.closing { max-width: 860px; margin: clamp(56px, 7vw, 88px) auto 0; padding-top: 28px; border-top: 1px solid rgba(27, 28, 30, .14); }
.closing > p { font-size: 1.1rem; color: var(--ink-2); max-width: 38rem; }

/* the free skin scan form (js/main.js hides the form and actions on
   success and shows the thank-you note) */
.lead-form-section { scroll-margin-top: calc(var(--fascia-h) + 12px); }
#leadFormEl[hidden], .lead-form-actions[hidden], .lead-thanks-box[hidden] { display: none; }
.lead-form-actions { margin-top: 26px; display: grid; justify-items: start; gap: 4px; }
.lead-form-actions .btn-gilt:disabled { opacity: .7; cursor: progress; }
.lead-form-error:empty { display: none; }
.lead-form-note { margin-top: 14px; font-size: .92rem; color: var(--ink-2); }
.lead-form-note a, .lead-thanks-box a { color: var(--blue); font-weight: 500; text-underline-offset: .2em; }
.lead-thanks-box h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; }
.lead-thanks-box p { margin-top: 12px; color: var(--ink-2); max-width: 36rem; }
.form-field select { appearance: auto; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-glass .hero-rating { animation: none; }
}

/* ---- refinements after the first look ---- */
/* the whitening poster: frame the smile and shade guide, not the small print */
.hero-photo.smile img { object-position: 50% 78%; }

/* the device photograph: the frame sits on the figure so the image can be
   trimmed of the maker's edge lettering */
.split-photo.on-black { overflow: hidden; border: 8px solid var(--charcoal); background: #0c0c0b; box-shadow: 0 18px 40px rgba(27, 28, 30, .12), 0 2px 4px rgba(27, 28, 30, .1); }
.split-photo.on-black img { border: 0; box-shadow: none; object-fit: cover; scale: 1.14; transform-origin: 40% 50%; }
.split.reverse { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 860px) { .split.reverse { grid-template-columns: 1fr; } }

/* a single price list reads at menu width, not across the whole mirror */
.price-glass.single .price-panel { width: 100%; max-width: 860px; margin: 0 auto; }

/* questions beside a side note */
.care-split.faq-first { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.care-split.faq-first .note { margin: 8px 0 0; }
@media (max-width: 860px) { .care-split.faq-first { grid-template-columns: 1fr; } }