/* V1 foundation, copied unchanged to preserve all image geometry. */
html,body{background:#0A1018}

#main figure{position:relative;}
.gal-num{position:absolute;top:0;left:0;z-index:3;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.05em;color:#0B1119;background:var(--gold,#C09A63);padding:5px 9px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.35);}
.gal-num-cap{font-family:var(--font-mono);font-weight:600;color:var(--gold-deep,#9C7F55);}
@media(max-width:430px){.gal-num{font-size:12px;padding:4px 7px;}}
.acc-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:4px 0;color:inherit;font:inherit;}
.acc-trigger h2{margin:0;}
.acc-trigger .acc-ico{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:24px;font-weight:300;line-height:1;color:var(--gold-deep,#9C7F55);border:1px solid currentColor;border-radius:50%;transition:background .18s;}
.acc-trigger:hover .acc-ico{background:rgba(192,154,99,.14);}
.od-sec[style*="navy"] .acc-trigger .acc-ico,#review-queue .acc-trigger .acc-ico{color:var(--gold-soft,#C9B79A);}
.acc-trigger:focus-visible{outline:2px solid var(--gold,#C09A63);outline-offset:4px;}
.acc-panel{margin-top:18px;}
.acc-panel[hidden]{display:none;}
/* 2026-07-30 (Piotr): closed-state affordance on the circular + — restrained pulse, layout-neutral (transform + shadow only). Runs continuously from load while the category is closed (no hover or any interaction required); stops ONLY while open; resumes on close; honours prefers-reduced-motion. */
@keyframes accPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(192,154,99,.30);}50%{transform:scale(1.06);box-shadow:0 0 0 7px rgba(192,154,99,0);}}
.acc-trigger[aria-expanded="false"] .acc-ico{animation:accPulse 3.4s ease-in-out infinite;}
.acc-trigger[aria-expanded="true"] .acc-ico{animation:none;}
@media(prefers-reduced-motion:reduce){.acc-trigger .acc-ico{animation:none!important;}}
.acc-panel > div[style*="grid"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-width:1684px;margin-left:auto;margin-right:auto;gap:24px !important;}
#acc-review-queue > div[style*="grid"],#acc-recovered > div[style*="grid"]{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;max-width:none;gap:14px !important;}
@media(max-width:640px){.acc-panel > div[style*="grid"]{grid-template-columns:1fr !important;max-width:600px;}#acc-review-queue > div[style*="grid"],#acc-recovered > div[style*="grid"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-width:none;}}

.gal-pair{grid-column:1/-1;border:1px solid rgba(20,22,30,.22);background:rgba(20,22,30,.03);padding:12px 12px 6px;max-width:830px;margin-left:auto;margin-right:auto;}
.gal-pair-lab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 8px;}
.gal-pair-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#acc-review-queue .gal-pair,#acc-recovered .gal-pair{border-color:rgba(237,232,223,.2);max-width:none;margin-left:0;margin-right:0;}

#cat-texture>.od-wrap,#cat-resurfacing>.od-wrap,#cat-pigment>.od-wrap,#cat-filler>.od-wrap,#cat-filler-lips>.od-wrap,#cat-undereye>.od-wrap,#cat-lesion>.od-wrap,#cat-skinquality>.od-wrap{max-width:1720px;}figure img[src*="resv-03-top"],figure img[src*="resv-03-bot"]{object-fit:contain !important;background:#e7e1d0;}figure img[src*="pigmentation-ba-web3"]{object-fit:contain !important;}figure img[src*="skin-quality-before-web"],figure img[src*="skin-quality-after-web"]{object-fit:contain !important;}figure img[src*="res-12.jpg"]{object-position:center center !important;}figure img[src*="result-before-web"],figure img[src*="result-after-web"]{transform:scale(1.1);}figure img[src*="fb-before-web"],figure img[src*="fb-after-web"]{object-fit:contain !important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"]{grid-template-columns:1fr !important;max-width:1000px !important;margin-left:auto !important;margin-right:auto !important;gap:30px !important;}#cat-texture figure,#cat-resurfacing figure,#cat-filler figure,#cat-filler-lips figure,#cat-undereye figure,#cat-lesion figure,#cat-skinquality figure{width:100% !important;max-width:960px !important;margin-left:auto !important;margin-right:auto !important;grid-column:auto !important;box-sizing:border-box !important;}#cat-texture figure>img,#cat-resurfacing figure>img,#cat-filler figure>img,#cat-filler-lips figure>img,#cat-undereye figure>img,#cat-lesion figure>img,#cat-skinquality figure>img{width:100% !important;aspect-ratio:2/1 !important;object-fit:cover !important;height:auto !important;display:block !important;background:#e7e1d0;}.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-pair{max-width:960px !important;width:100% !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box !important;padding:0 !important;border:0 !important;background:none !important;}.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-pair-imgs{grid-template-columns:1fr !important;gap:0 !important;}.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged{width:100% !important;max-width:960px !important;margin-left:auto !important;margin-right:auto !important;}.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged>div{aspect-ratio:2/1 !important;width:100% !important;}.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged img{aspect-ratio:auto !important;width:100% !important;height:100% !important;object-fit:cover !important;}figure[data-galnum="54"]>img{clip-path:none !important;object-position:center center !important;}#cat-texture figure[data-galnum="1"]>img{object-fit:cover !important;object-position:center center !important;transform:none !important;clip-path:none !important;}

#top #announce #annL,#top #announce #annR{display:none;}
@media(max-width:600px){
  #top #announce{display:grid!important;grid-template-columns:1fr var(--cam-gap,134px) 1fr;align-items:center;column-gap:6px;padding:max(env(safe-area-inset-top,0px),9px) 14px 14px!important;margin:0;min-height:max(env(safe-area-inset-top,0px),46px);background:linear-gradient(180deg,#05080D 0%,#06090E 55%,rgba(6,9,14,0) 100%)!important;}
  #top #announce #annFull,#top #announce #annShort{display:none!important;}
  #top #announce #annL{grid-column:1;justify-self:start;}
  #top #announce #annR{grid-column:3;justify-self:end;}
  #top #announce #annL,#top #announce #annR{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft,#C9B79A);opacity:.55;white-space:nowrap;line-height:1;}
}


#top.pf-hero{position:relative;overflow:hidden;}
#top .gm-mark{position:absolute;right:-2%;bottom:-6%;z-index:0;pointer-events:none;--odn-h:clamp(140px,22vw,244px);opacity:.11;}
#top>#announce,#top>#heroNav,#top>div,#top>a,#top>.od-cue{position:relative;z-index:2;}
@media(max-width:600px){#top .gm-mark{opacity:.085;bottom:calc(-6% + 0.5cm);right:calc(-2% - 0.3cm);}}


/* First gallery tile runs full-bleed across the viewport; every other tile keeps the card. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed,#cat-texture figure.gal-bleed{grid-column:1/-1!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important;max-width:100vw!important;border-left:0!important;border-right:0!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed figcaption,#cat-texture figure.gal-bleed figcaption{padding-left:clamp(20px,5vw,60px)!important;padding-right:clamp(20px,5vw,60px)!important;}
/* Reproducible per-side framing: scale + X/Y, uniform only (no non-uniform stretch). */
[data-pos][data-side]{--s:1;--x:0px;--y:0px;}
[data-pos][data-side] img{transform:translate(var(--x),var(--y)) scale(var(--s))!important;}
[data-pos="10"][data-side="L"]{--s:1;}[data-pos="10"][data-side="R"]{--s:1;}/* 2026-07-28: 1.1 crop retired — result-before/after-c-web are 540x720 and the box is 0.75, so s:1 shows the whole clinical frame */
/* pos 18 L: 1.05 nudge retired 2026-07-28 - rev-10-c-web.jpg is cropped to rev-11-c-web.jpg scale and excludes the play bar. */
[data-pos="19"][data-side="L"]{--x:-8px;}[data-pos="19"][data-side="R"]{--x:8px;}
[data-pos="20"][data-side="R"]{--s:1.15;--x:-18px;--y:10px;}/* y is bounded by the vertical slack the 1.15 zoom creates; 18px would expose background */
/* pos 21 L: zoom hack retired 2026-07-28 — lips-before-web.png natively matches the after (both 1754x1290), so no scaling is required. */
[data-pos="22"][data-side="L"]{--s:1;}[data-pos="22"][data-side="R"]{--s:1;}/* 2026-07-28: lip-band crops fill their boxes exactly */
[data-pos="24"][data-side="L"]{--x:10px;}[data-pos="24"][data-side="R"]{--x:-10px;}

/* First tile = a full-viewport opening frame: exact viewport width AND at least the
   usable viewport height. The pair inside is letterboxed (object-fit:contain) on the
   ivory ground so the full before/after stays visible at native aspect; a cover crop at
   360x844 would slice a 1.07-ratio half into a 0.23 sliver and hide the anatomy. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed,#cat-texture figure.gal-bleed{min-height:100svh!important;display:flex!important;flex-direction:column!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed > div,#cat-texture figure.gal-bleed > div{aspect-ratio:2.16/1!important;flex:0 0 auto!important;margin-block:auto!important;min-height:0!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed > div > div,#cat-texture figure.gal-bleed > div > div{min-height:0!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed img,#cat-texture figure.gal-bleed img{object-fit:cover!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed figcaption,#cat-texture figure.gal-bleed figcaption{flex:0 0 auto!important;}

/* OPENING PLATE (tile 1). Full-viewport frame whose spare height is composition, not
   void: eyebrow + case title above, the pair at its truthful 2.16/1 native ratio edge to
   edge, BEFORE / AFTER markers under the halves, the standing limitation line and a
   scroll cue at the foot. No crop, no distortion, complete before/after. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed,#cat-texture figure.gal-bleed{justify-content:space-between!important;padding:clamp(26px,5vh,54px) 0 clamp(20px,3.5vh,40px)!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-head{padding:0 clamp(20px,5vw,60px);},#cat-texture figure.gal-bleed .galo-head{padding:0 clamp(20px,5vw,60px);}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-eyebrow{margin-bottom:14px;},#cat-texture figure.gal-bleed .galo-eyebrow{margin-bottom:14px;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-title{font-family:var(--font-serif);font-weight:300;font-size:clamp(27px,7.4vw,44px);line-height:1.12;letter-spacing:-0.01em;color:var(--ink);margin:0;max-width:22ch;text-wrap:pretty;},#cat-texture figure.gal-bleed .galo-title{font-family:var(--font-serif);font-weight:300;font-size:clamp(27px,7.4vw,44px);line-height:1.12;letter-spacing:-0.01em;color:var(--ink);margin:0;max-width:22ch;text-wrap:pretty;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-labels{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;padding:0 clamp(20px,5vw,60px);},#cat-texture figure.gal-bleed .galo-labels{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;padding:0 clamp(20px,5vw,60px);}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-labels span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);},#cat-texture figure.gal-bleed .galo-labels span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-foot{padding:0 clamp(20px,5vw,60px);display:grid;gap:14px;},#cat-texture figure.gal-bleed .galo-foot{padding:0 clamp(20px,5vw,60px);display:grid;gap:14px;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-note{font-weight:300;font-size:14.5px;line-height:1.6;color:var(--ink-body);margin:0;max-width:52ch;text-wrap:pretty;},#cat-texture figure.gal-bleed .galo-note{font-weight:300;font-size:14.5px;line-height:1.6;color:var(--ink-body);margin:0;max-width:52ch;text-wrap:pretty;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-cue{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin:0;},#cat-texture figure.gal-bleed .galo-cue{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin:0;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) > div[style*="grid"] > figure.gal-bleed .galo-cap{padding:0 clamp(20px,5vw,60px)!important;font-family:var(--font-mono)!important;font-size:10px!important;letter-spacing:.1em!important;color:var(--ink-soft)!important;},#cat-texture figure.gal-bleed .galo-cap{padding:0 clamp(20px,5vw,60px)!important;font-family:var(--font-mono)!important;font-size:10px!important;letter-spacing:.1em!important;color:var(--ink-soft)!important;}

/* Per-pair aspect ratios. The legacy gal-consolidated rule pins .gal-merged>div to
   2/1 with !important and :not(#id) specificity, which even beats an inline value, so
   each intended ratio is restated here at matching specificity. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged > div[data-ar="1.12"]{aspect-ratio:1.12/1!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged > div[data-ar="1.5"]{aspect-ratio:1.5/1!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged > div[data-ar="2.16"]{aspect-ratio:2.16/1!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged > div[data-ar="2.17"]{aspect-ratio:2.17/1!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged > div[data-ar="2.66"]{aspect-ratio:2.66/1!important;}
/* Explicit fit for the two full-portrait pairs: the box now equals the source ratio, so
   cover crops nothing and the full forehead and chin are visible. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged > div[data-ar="1.12"] img{object-fit:cover!important;}


/* Piotr 2026-07-28 — the opening result must NOT fill the page or the viewport. It returns to
   the standard result-pair scale (TCA pair reference: 960px cap), centred in the content column
   with the cream margins intact. No 100svh floor and no 100vw bleed, so mobile keeps the normal
   page gutters. The merged source stays at its native 2.16:1, so neither half is cropped or
   stretched. */
#cat-texture figure[data-galnum="1"]{width:100%!important;max-width:960px!important;margin-left:auto!important;margin-right:auto!important;min-height:0!important;display:block!important;border:1px solid rgba(20,22,30,.16)!important;}
#cat-texture figure[data-galnum="1"]>div{aspect-ratio:auto!important;margin-block:0!important;}
#cat-texture figure[data-galnum="1"]>div[data-pos-tile="1"]{aspect-ratio:2.16/1!important;flex:0 0 auto!important;}
#cat-texture figure[data-galnum="1"] figcaption{padding-left:12px!important;padding-right:12px!important;}


/* --gold-ink is NOT in tokens.css (it lives in the treatment pages' a11y block), so it is
   defined locally here, exactly as the legal pages do. --gold-deep #8C7150 on the cream
   figure ground #E7E1D0 measures 3.50:1 and fails AA for 10px text; #755C40 gives 4.78:1.
   Scope: ONLY the six lesion-case labels added 2026-07-28. The 6 pre-existing gold labels
   and 45 .gal-num-cap badges share the same 3.50:1 but are a site-wide pre-existing
   condition awaiting Piotr's ruling - deliberately NOT swept here. */
:root{--gold-ink:#755C40;}


/* gal-consolidated declares
     .acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged>div{aspect-ratio:2/1!important}
   which hits EVERY direct child div of the opening figure - so .galo-head, .galo-labels and
   .galo-foot were each forced to width/2 (479px at 960 wide), adding ~1437px of empty beige
   and recreating the full-screen composition Piotr rejected. Those two :not(#id) selectors
   outrank a plain #cat-texture figure[...] override, so the prefix is restated here to win,
   scoped to the opening figure ONLY (data-galnum="1") so no other merged pair is affected.
   The image row keeps its native 2.16:1; every text block returns to natural height. */
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"]>div:not([data-pos-tile]){aspect-ratio:auto!important;height:auto!important;min-height:0!important;margin-block:0!important;}
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"]>div[data-pos-tile]{aspect-ratio:2.16/1!important;height:auto!important;min-height:0!important;flex:0 0 auto!important;}
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"]{min-height:0!important;height:auto!important;display:block!important;}


/* The .galo-* block was authored for the full-bleed DARK scene, so its colour is the light
   cream #EDE8DF. With the full-screen composition removed it now sits on the figure's cream
   #E7E1D0 ground, measuring 1.07:1 - title, Before/After labels, the variability disclaimer
   and the scroll cue were all rendered but invisible. Rebased onto var(--ink-body), the same
   token .galo-cap already uses inside this very figure (6.5:1 on this ground). Colour only -
   no size, weight, spacing, wording or layout change, and scoped to the opening figure so
   nothing else is touched. This is NOT the deferred site-wide gold-label item. */
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"] .galo-title,
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"] .galo-note,
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"] .galo-cue,
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"] .galo-labels,
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"] .galo-labels span,
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"] .galo-cue span{color:var(--ink-body)!important;}
/* The two orientation labels had no layout rule of their own, so they rendered inline as
   "BeforeAfter" - invisible until the colour was rebased, hence never caught. Laid out as two
   equal columns so each label sits under its own image. The opening pair's halves are equal
   width (one merged source, both 1.08), so 1fr/1fr aligns exactly. Layout only - no wording
   or colour change, scoped to the opening figure. */
#cat-texture .acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-galnum="1"] .galo-labels{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;}


/* style#gal-consolidated forces `.gal-merged > div{aspect-ratio:2/1!important}`, which silently
   squeezed every portrait before/after pair into 1:1 halves and centre-cropped 13-44% off the top
   and bottom (forehead/crown and lower neck). Each pair row now carries its own true ratio in
   --par (the sum of the two halves' native ratios); this selector re-states gal-consolidated's
   prefix plus [data-par] so it outranks it. Rows without data-par are untouched, so the
   pre-existing merged-source tiles (pos 19/20, width:200% + object-position) keep their behaviour. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged>div[data-par]{aspect-ratio:var(--par)!important;}


/* Gallery correction pass 2026-07-28. Framing only — uniform scale + translate through the
   existing [data-pos][data-side] variables; no non-uniform stretch, no retouching. */
/* 11 — left (rev-26) raised so the mouth line approaches rev-27’s. Translate is bounded by
   the slack the 1.25 zoom creates (12.5% each side), so no ground is exposed. */
[data-pos="95"][data-side="L"]{--s:1;--y:0px;}/* 2026-07-29: 1.25 zoom retired - it cropped 12.5% off every edge of rev-26. */
/* 12 — same correction, smaller offset: rev-28 sits only 7.5% lower than rev-29. */
[data-pos="96"][data-side="L"]{--s:1;--y:0px;}/* 2026-07-29: 1.16 zoom retired - rev-28 is now shown whole. */
/* 21 — right (ga2-web) moved up; 8% of the box height, inside the 1.16 zoom’s 8% slack. */
[data-pos="14"][data-side="R"]{--s:1.16;--y:-8%;}
/* 25 + 26 — right image reduced by exactly 5%, centred (transform-origin 50% 50%). */
[data-pos="20"][data-side="R"]{--s:1;--x:0px;--y:0px;}/* 2026-07-29: the 5% reduction made the right-hand patient read smaller than the left; both halves are now at one scale. */
[data-pos="21"][data-side="R"]{--s:1;--x:0px;--y:0px;}/* 2026-07-29: same reduction retired on the lips pair. */


/* SETTLED GALLERY GEOMETRY 2026-07-28 (Piotr).
   1. Ordinary comparison cards share one restrained outer size — item 15’s 1.5/1.
   2. Left and right cells are EQUAL width (flex:1 1 0).
   3. Photographs are fitted with object-fit:contain, never cover-cropped to fill.
      Neutral #e7e1d0 margins inside a cell are intended, not a defect.
   data-std="1" = adopt the standard outer size + equal cells + contain.
   data-eq="1"  = equal cells + contain only (outer ratio kept: portrait pairs). */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-std="1"]>div[data-par]{aspect-ratio:1.5/1!important;}
/* data-std2="1" = the wide clinical-crop standard (lips, neck strips): 2/1 outer frame,
   same equal cells + contain. Used where a 1.5/1 frame would letterbox a wide field. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-std2="1"]>div[data-par]{aspect-ratio:2/1!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-std="1"]>div>div,
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-std2="1"]>div>div,
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-eq="1"]>div>div{flex:1 1 0!important;}
/* Deeper element path: gal-fix-2026-07-27 has .gal-merged>div[data-ar="1.12"] img at
   equal class weight, so the contain rule needs the extra element steps to win. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-std="1"]>div>div>img,
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-std2="1"]>div>div>img,
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-eq="1"]>div>div>img{object-fit:contain!important;object-position:50% 50%!important;transform:none!important;background:#e7e1d0;}


/* ONE gallery geometry, 2026-07-29. Four classes carried on a single data-gsize attribute
   instead of per-tile exceptions. Every cell in a comparison is equal and every photograph
   fills its cell, so there is no inner strip, no letterbox and no stretch.
     p = default pair   1.5/1 outer, two equal 0.75 cells, cover   (card 243-273 at 360)
     t = tall pair      1.12/1 outer, two equal 0.56 cells, cover  (card ~313) - used ONLY
         where a 0.75 cell would cut forehead, chin or the treatment field
     l = landscape pair the pair's own ratio, equal cells, cover
     i = single frame   the photograph's own ratio (style#gal-consolidated forces 2/1 +
         cover on every public figure>img, which cropped these composites)
   data-anchor="top" puts the cover crop on the neck, shoulders or background - never the
   forehead - wherever a cell is wider than its source. */
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-gsize="p"]>div{aspect-ratio:1.5/1!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-gsize="t"]>div{aspect-ratio:1.12/1!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-gsize="p"]>div>div,
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-gsize="t"]>div>div,
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-gsize="l"]>div>div{flex:1 1 0!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-gsize="p"]>div>div>img,
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-gsize="t"]>div>div>img,
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged[data-gsize="l"]>div>div>img{object-fit:cover!important;object-position:50% 50%!important;transform:none!important;width:100%!important;height:100%!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) .gal-merged>div>div[data-anchor="top"]>img{object-position:50% 0%!important;}
.acc-panel:not(#acc-review-queue):not(#acc-recovered) figure[data-gsize="i"]>img{aspect-ratio:auto!important;height:auto!important;}


/* TEST AREA ONLY (#galtest). Nothing here touches the published gallery markup or CSS.
   Every photograph is object-fit:contain on the neutral #e7e1d0 ground, so no image is
   cropped, stretched or squashed in any of the five models; the two cases always sit in
   two equal columns, and each model gives its two case tiles one shared size. */
#galtest .gt-lede{font-weight:300;font-size:15px;line-height:1.6;color:var(--ink-body);margin:0 0 6px;max-width:66ch;}
#galtest .gt-lede b{font-weight:400;color:var(--gold-ink,#755C40);}
#galtest :focus-visible{outline:2px solid var(--gold,#C09A63);outline-offset:3px;}
#galtest .gt-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px;padding:0;}
#galtest .gt-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-body);background:transparent;border:1px solid rgba(20,22,30,.22);border-radius:2px;cursor:pointer;}
#galtest .gt-tabs button .gt-tab-n{font-size:12px;color:var(--gold-ink,#755C40);}
#galtest .gt-tabs button[aria-selected="true"]{background:#12151D;border-color:#12151D;color:#FBF9F4;}
#galtest .gt-tabs button[aria-selected="true"] .gt-tab-n{color:var(--gold-soft,#C9B79A);}
#galtest .gt-panel{padding-top:14px;}
#galtest .gt-panel[hidden]{display:none;}
#galtest .gt-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;line-height:1.65;
  color:var(--ink-soft);margin:0 0 14px;max-width:72ch;}
#galtest .gt-cases,#galtest .gt-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch;}
#galtest .gt-case,#galtest .gt-card{display:flex;flex-direction:column;}
#galtest .gt-cap{margin-top:auto;}
@media(min-width:601px){#galtest .gt-cases,#galtest .gt-index{gap:16px;}}
#galtest .gt-case{margin:0;border:1px solid rgba(20,22,30,.16);background:#e7e1d0;}
#galtest .gt-media{display:flex;gap:0;background:#e7e1d0;}
#galtest .gt-cell{--r:0.75;position:relative;flex:1 1 0;min-width:0;aspect-ratio:var(--r);overflow:hidden;background:#e7e1d0;}
#galtest .gt-cell>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;}
/* rotation-aware box: the cell's transposed size, rotated back into the cell, so a photograph
   published rotated is shown WHOLE instead of clipped. Uniform transform only. */
#galtest .gt-cell>img.gt-rot{inset:auto;left:50%;top:50%;width:calc(100% / var(--r));height:calc(100% * var(--r));
  transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
#galtest .gt-lab{position:absolute;z-index:2;top:5px;left:5px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#FBF9F4;background:rgba(12,16,22,.78);padding:3px 6px;}
#galtest .gt-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.5;
  color:var(--ink-body);margin:0;padding:9px 10px;}
#galtest .gt-cap b{font-weight:400;color:var(--gold-ink,#755C40);}
/* 2 — responsive pairing: stacked full width on mobile, side by side from 601px */
#galtest .gt-m2 .gt-media{flex-direction:column;}
#galtest .gt-m2 .gt-cell{flex:0 0 auto;width:100%;}
@media(min-width:601px){#galtest .gt-m2 .gt-media{flex-direction:row;}#galtest .gt-m2 .gt-cell{flex:1 1 0;width:auto;}}
/* 3 — hard-cut toggle */
#galtest .gt-switch{display:flex;gap:6px;padding:8px 8px 10px;}
#galtest .gt-switch button{flex:1 1 0;min-height:44px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-body);background:transparent;
  border:1px solid rgba(20,22,30,.22);border-radius:2px;cursor:pointer;}
#galtest .gt-switch button[aria-pressed="true"]{background:#12151D;border-color:#12151D;color:#FBF9F4;}
#galtest .gt-stack>img[hidden]{display:none;}
/* 4 — wipe */
#galtest .gt-wipe{--w:50%;touch-action:pan-y;cursor:ew-resize;}
#galtest .gt-wipe>img.gt-after{clip-path:inset(0 0 0 var(--w));}
#galtest .gt-divide{position:absolute;z-index:3;top:0;bottom:0;left:var(--w);width:2px;background:var(--gold,#C09A63);pointer-events:none;}
#galtest .gt-divide::after{content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:2px solid var(--gold,#C09A63);border-radius:50%;background:rgba(251,249,244,.86);}
#galtest .gt-range{display:block;width:calc(100% - 16px);height:44px;margin:2px 8px 6px;accent-color:var(--gold,#C09A63);}
#galtest .gt-wipelabs{display:flex;justify-content:space-between;padding:0 10px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
/* 5 — index + sheet */
#galtest .gt-card{display:block;width:100%;text-align:left;padding:0;cursor:pointer;
  border:1px solid rgba(20,22,30,.16);background:#e7e1d0;font:inherit;color:inherit;}
#galtest .gt-card .gt-cell{--r:1;flex:none;width:100%;}
#galtest .gt-card .gt-more{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink,#755C40);padding:0 10px 10px;}
.gt-sheet[hidden]{display:none;}
.gt-sheet{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;}
.gt-sheet-shade{position:absolute;inset:0;background:rgba(8,11,16,.62);}
.gt-sheet-frame{position:relative;width:100%;max-height:88vh;overflow:auto;background:var(--cream-approach,#E3DAC8);
  border-top:1px solid rgba(20,22,30,.2);padding:14px 14px 20px;}
@media(min-width:601px){.gt-sheet{align-items:center;}
  .gt-sheet-frame{max-width:760px;max-height:86vh;border:1px solid rgba(20,22,30,.2);}}
.gt-sheet-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.gt-sheet-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink,#755C40);}
.gt-sheet h3{font-family:var(--font-serif);font-weight:300;font-size:22px;line-height:1.2;margin:4px 0 0;color:var(--ink,#12151D);}
.gt-sheet-close{flex:0 0 auto;min-width:44px;min-height:44px;font-family:var(--font-mono);font-size:16px;
  color:var(--ink-body);background:transparent;border:1px solid rgba(20,22,30,.22);border-radius:2px;cursor:pointer;}
.gt-sheet .gt-media{display:flex;gap:0;background:#e7e1d0;border:1px solid rgba(20,22,30,.16);}
.gt-sheet .gt-cell{--r:0.75;position:relative;flex:1 1 0;min-width:0;aspect-ratio:var(--r);overflow:hidden;background:#e7e1d0;}
.gt-sheet .gt-cell>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;}
.gt-sheet .gt-cell>img.gt-rot{inset:auto;left:50%;top:50%;width:calc(100% / var(--r));height:calc(100% * var(--r));transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
.gt-sheet .gt-lab{position:absolute;z-index:2;top:5px;left:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#FBF9F4;background:rgba(12,16,22,.78);padding:3px 6px;}
.gt-sheet :focus-visible{outline:2px solid var(--gold,#C09A63);outline-offset:3px;}
.gt-sheet .gt-sheet-cap{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;line-height:1.6;
  color:var(--ink-body);margin:10px 0 0;}
/* 6 — hybrid: model 5's index, model 4's wipe inside the sheet.
   Index stacks full width on phones (Piotr's condition) and goes two-up from 601px.
   Uniform tile size is enforced by grid stretch, not by cropping any photograph. */
#galtest .gt-index6{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch;}
@media(min-width:601px){#galtest .gt-index6{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}}
#galtest .gt-index6{grid-auto-rows:1fr;}
#galtest .gt-case6{display:flex;flex-direction:column;margin:0;
  border:1px solid rgba(20,22,30,.16);background:#e7e1d0;}
/* shared wipe frame — used on the card and, larger, inside the sheet */
.gt-wipe{--w:50%;--r:0.9;position:relative;width:100%;aspect-ratio:var(--r);
  overflow:hidden;background:#e7e1d0;touch-action:pan-y;cursor:ew-resize;}
.gt-wipe>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:50% 50%;display:block;}
.gt-wipe>img.gt-rot{inset:auto;left:50%;top:50%;
  width:calc(100% / var(--r));height:calc(100% * var(--r));
  transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
.gt-wipe>img.gt-after{clip-path:inset(0 0 0 var(--w));}
.gt-wipe .gt-divide{position:absolute;z-index:3;top:0;bottom:0;left:var(--w);width:1px;
  background:rgba(192,154,99,.9);pointer-events:none;}
.gt-wipe .gt-divide::after{content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;
  margin:-13px 0 0 -13px;border:1px solid rgba(192,154,99,.9);border-radius:50%;
  background:rgba(251,249,244,.72);}
.gt-wipe .gt-lab{position:absolute;z-index:2;top:6px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#FBF9F4;background:rgba(12,16,22,.7);padding:3px 6px;}
.gt-wipe .gt-lab--b{left:6px;} .gt-wipe .gt-lab--a{left:auto;right:6px;}
#galtest .gt-case6 .gt-lab--b{left:6px;right:auto;}
#galtest .gt-case6 .gt-lab--a{left:auto;right:6px;}
#galtest .gt-case6 .gt-divide,.gt-sheet .gt-wipe .gt-divide{width:1px;background:rgba(192,154,99,.9);}
#galtest .gt-case6 .gt-divide::after,.gt-sheet .gt-wipe .gt-divide::after{width:26px;height:26px;
  margin:-13px 0 0 -13px;border:1px solid rgba(192,154,99,.9);background:rgba(251,249,244,.72);}
/* motion only while playing; a paused or reduced-motion slider is instant */
.gt-wipe.gt-play .gt-divide{transition:left 2.9s cubic-bezier(.37,0,.63,1);}
.gt-wipe.gt-play>img.gt-after{transition:clip-path 2.9s cubic-bezier(.37,0,.63,1);}
@media(prefers-reduced-motion:reduce){.gt-wipe.gt-play .gt-divide,
  .gt-wipe.gt-play>img.gt-after{transition:none;}}
/* control row: thin quiet track, 44px hit area, compact pause/play */
.gt-ctl{display:flex;align-items:center;gap:10px;padding:8px 10px 2px;}
.gt-pp{flex:0 0 auto;width:30px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
.gt-pp svg{width:11px;height:12px;display:block;fill:currentColor;}
.gt-track{position:relative;flex:1 1 auto;min-width:0;height:44px;display:flex;align-items:center;}
.gt-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
  background:rgba(20,22,30,.22);pointer-events:none;}
.gt-range{position:relative;z-index:1;width:100%;height:44px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:ew-resize;}
.gt-range::-webkit-slider-runnable-track{height:44px;background:transparent;border:0;}
.gt-range::-moz-range-track{height:44px;background:transparent;border:0;}
.gt-range::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(192,154,99,.95);background:#FBF9F4;margin-top:16.5px;}
.gt-range::-moz-range-thumb{width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(192,154,99,.95);background:#FBF9F4;}
.gt-drag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-body);margin:0;padding:0 10px 8px;}
#galtest .gt-case6 .gt-cap{margin-top:auto;padding-top:2px;}
#galtest .gt-case6 .gt-more{display:inline-flex;align-items:center;min-height:44px;margin:0 10px 4px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink,#755C40);background:transparent;border:0;padding:0;cursor:pointer;align-self:flex-start;}
#galtest .gt-case6 .gt-more span{border-bottom:1px solid rgba(156,127,85,.45);}
/* sheet: the same comparison, much larger */
.gt-sheet .gt-media--wipe{display:block;border:1px solid rgba(20,22,30,.16);}
.gt-sheet .gt-wipe{--r:0.82;}
@media(max-width:600px){
  .gt-sheet-frame{padding:12px 8px 16px;max-height:94vh;}
  .gt-sheet .gt-wipe{--r:0.74;}
  .gt-sheet h3{font-size:19px;}
}


/* MODEL 7 - "Plate and ledger". Everything is namespaced .gt7-* / #galtest .gt-case7 so no
   Model 1-6 rule is touched. The photograph sits on a near-black clinical plate: contain-fit
   matting becomes intentional framing instead of dead cream, and skin is the brightest thing
   in the card. No text sits on the image; BEFORE / AFTER label the ends of the control. */
#galtest .gt-index7{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch;grid-auto-rows:1fr;}
@media(min-width:601px){#galtest .gt-index7{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}}
#galtest .gt-case7{display:flex;flex-direction:column;margin:0;padding:14px;background:#e7e1d0;border:0;}
/* plate */
#galtest .gt7-plate{--w:50%;--r:0.78;position:relative;width:100%;aspect-ratio:var(--r);overflow:hidden;
  background:#0E1319;touch-action:pan-y;cursor:ew-resize;}
@media(min-width:601px){#galtest .gt7-plate{--r:0.8;}}
#galtest .gt7-plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:50% 50%;display:block;}
#galtest .gt7-plate>img.gt7-rot{inset:auto;left:50%;top:50%;width:calc(100% / var(--r));
  height:calc(100% * var(--r));transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
#galtest .gt7-clip{position:absolute;inset:0;clip-path:inset(0 0 0 var(--w));}
#galtest .gt7-clip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;}
#galtest .gt7-clip>img.gt7-rot{inset:auto;left:50%;top:50%;width:calc(100% / var(--r));height:calc(100% * var(--r));transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
/* the divider IS the affordance: 1px gold hairline + 32px handle at optical centre */
#galtest .gt7-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w);width:1px;
  background:rgba(192,154,99,.92);pointer-events:none;}
#galtest .gt7-grip{position:absolute;z-index:4;left:var(--w);top:55%;width:32px;height:32px;margin:-16px 0 0 -16px;
  border:1px solid rgba(192,154,99,.95);border-radius:50%;background:rgba(14,19,25,.42);
  backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
  padding:0;cursor:ew-resize;-webkit-tap-highlight-color:transparent;}
#galtest .gt7-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  margin:-22px 0 0 -22px;}                                   /* 44px hit area, 32px visual */
#galtest .gt7-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
#galtest .gt7-plate.gt7-play .gt7-edge,#galtest .gt7-plate.gt7-play .gt7-grip{transition:left 5.5s cubic-bezier(.4,0,.25,1);}
#galtest .gt7-plate.gt7-play .gt7-clip{transition:clip-path 5.5s cubic-bezier(.4,0,.25,1);}
@media(prefers-reduced-motion:reduce){#galtest .gt7-plate.gt7-play .gt7-edge,
  #galtest .gt7-plate.gt7-play .gt7-grip,#galtest .gt7-plate.gt7-play .gt7-clip{transition:none;}}
/* ends: BEFORE ---- AFTER, off the image */
#galtest .gt7-ends{display:flex;align-items:center;gap:8px;margin:14px 0 0;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-body);}
#galtest .gt7-ends i{flex:1 1 auto;height:1px;background:rgba(20,22,30,.16);}
/* one 44px control row */
#galtest .gt7-ctl{display:flex;align-items:center;gap:10px;height:44px;margin:2px 0 0;}
#galtest .gt7-pp{flex:0 0 auto;width:32px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
#galtest .gt7-pp svg{width:11px;height:12px;fill:currentColor;}
#galtest .gt7-track{position:relative;flex:1 1 auto;min-width:0;height:44px;display:flex;align-items:center;}
#galtest .gt7-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
  background:rgba(20,22,30,.18);pointer-events:none;}
#galtest .gt7-range{position:relative;z-index:1;width:100%;height:44px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:ew-resize;}
#galtest .gt7-range::-webkit-slider-runnable-track{height:44px;background:transparent;border:0;}
#galtest .gt7-range::-moz-range-track{height:44px;background:transparent;border:0;}
#galtest .gt7-range::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(117,92,64,.9);background:#FBF9F4;margin-top:17.5px;}
#galtest .gt7-range::-moz-range-thumb{width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(117,92,64,.9);background:#FBF9F4;}
#galtest .gt7-state{flex:0 0 auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-body);min-width:62px;text-align:right;}
/* ledger */
#galtest .gt7-ledger{margin-top:auto;padding-top:12px;border-top:1px solid rgba(20,22,30,.10);}
#galtest .gt7-n{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;
  color:var(--gold-ink,#755C40);margin:0 0 6px;}
#galtest .gt7-id{font-family:var(--font-serif);font-weight:300;font-size:17px;line-height:1.22;
  color:var(--ink,#12151D);margin:0;text-wrap:pretty;}
#galtest .gt7-ctx{font-family:var(--font-sans);font-weight:300;font-size:12.5px;line-height:1.55;
  color:var(--ink-body);margin:8px 0 0;text-wrap:pretty;}
#galtest .gt7-more{display:inline-flex;align-items:center;min-height:44px;margin:2px 0 0;padding:0;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink,#755C40);background:transparent;border:0;cursor:pointer;align-self:flex-start;}
#galtest .gt7-more span{border-bottom:1px solid rgba(117,92,64,.5);padding-bottom:2px;}
/* ---- CASE 1: two Piotr-selectable variants (test-only selector on the card) ----
   OPTION 1 - set BY PIOTR in qa/Case 1 - edytor.html (screenshots 17.35, 2026-07-29):
     B07 + A04 · PRZED +84deg / 95% / -4,0 · PO 0deg / 105% / -6,4 · kolor bez zmian
   OPTION 2 - reconstructed COMPUTATIONALLY from Piotr's reference screenshots (17.34):
     pair identified by rendering every B01-B08 (both 90deg signs) and A03-A06 over a
     scale/offset grid and scoring mean abs grey diff against the reference plate;
     BEFORE best B05 +90deg / 95% / 0,0 (err 2.11, next candidate 31.0 - unambiguous),
     AFTER best A05 0deg / 105% / -6,+6 (err 3.62, all A04/A03/A06 fits far worse).
     Colour: Piotr asked to unify the two frames' tone; the BEFORE is drawn toward the
     AFTER's global tone by one reversible whole-image per-channel linear gain
     (feComponentTransfer slopes R .7152 G .8223 B .9319 = mean skin tone A05/B05,
     computed excluding near-black and blown pixels). No local edit of any kind.
   Both options: 3:4 plate, object-fit:cover layers, translate->rotate->scale about the
   centre - the editor's exact semantics. Web copies are uniform 3024x4032 -> 900x1200
   downscales (0.75 aspect kept, JPEG q0.9); no crop, no retouch; originals in uploads/.
   The clip stays on the un-rotated .gt7-clip wrapper: divider vertical, wipe horizontal. */
#galtest .gt7-plate[data-case="1"]{--r:0.75;}
@media(min-width:601px){#galtest .gt7-plate[data-case="1"]{--r:0.75;}}
.gt7-sheet-plate[data-case="1"]{--r:0.75;}
@media(min-width:601px){.gt7-sheet-plate[data-case="1"]{--r:0.75;}}
#galtest .gt7-plate[data-case="1"]>img,.gt7-sheet-plate[data-case="1"]>img,
#galtest .gt7-plate[data-case="1"] .gt7-clip>img,.gt7-sheet-plate[data-case="1"] .gt7-clip>img{
  object-fit:cover;transform-origin:50% 50%;}
#galtest .gt7-plate[data-case="1"][data-opt="1"]>img,.gt7-sheet-plate[data-case="1"][data-opt="1"]>img{
  transform:translate(-4%,0%) rotate(84deg) scale(.95);}
#galtest .gt7-plate[data-case="1"][data-opt="1"] .gt7-clip>img,.gt7-sheet-plate[data-case="1"][data-opt="1"] .gt7-clip>img{
  transform:translate(-6%,4%) scale(1.12);}
#galtest .gt7-plate[data-case="1"][data-opt="2"]>img,.gt7-sheet-plate[data-case="1"][data-opt="2"]>img{
  transform:rotate(90deg) scale(.95);filter:url(#c1cm);}
#galtest .gt7-plate[data-case="1"][data-opt="2"] .gt7-clip>img,.gt7-sheet-plate[data-case="1"][data-opt="2"] .gt7-clip>img{
  transform:translate(-6%,6%) scale(1.05);}
/* stage wrapper: no box at all on mobile (display:contents), so the phone layout is untouched */
#galtest .gt7-stage{display:contents;}
#galtest .gt7-cl{display:none;}
/* ---- DESKTOP ONLY (2026-07-29): compact landscape card shells, Piotr's brief ----
   The 3:4 comparison plates themselves are NOT re-composed: each keeps its own aspect and
   every %-based transform, so Case 1 Option 1 renders geometry-for-geometry identical -
   the plate is simply centred, full height, on a 16:10 near-black stage inside a warm-white
   rounded card. BEFORE/AFTER move to the stage's upper corners; the range input becomes the
   thin progress line along the card's lower edge (drag preserved); the state word is hidden. */
@media(min-width:601px){
  #galtest .gt-case7{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;
    align-items:center;column-gap:8px;position:relative;padding:12px 14px 20px;
    background:#F7F3EA;border:1px solid rgba(20,22,30,.10);border-radius:10px;
    box-shadow:0 1px 2px rgba(12,16,22,.05),0 10px 24px rgba(12,16,22,.05);}
  /* DESKTOP 2026-07-30 (Piotr): card height 595 -> 695 - another +100px of stage depth,
     aspect 0.92 -> 0.761. Plates keep their own aspect and every approved transform. */
  #galtest .gt7-stage{display:flex;grid-column:1/-1;position:relative;justify-content:center;
    aspect-ratio:0.761;background:#0E1319;border-radius:6px;overflow:hidden;}
  #galtest .gt7-stage .gt7-plate{width:auto;height:100%;max-width:100%;flex:0 0 auto;}
  #galtest .gt7-cl{display:block;position:absolute;z-index:5;top:8px;font-family:var(--font-mono);
    font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,222,203,.85);
    background:rgba(12,16,22,.55);padding:3px 7px;border-radius:2px;pointer-events:none;}
  #galtest .gt7-cl--b{left:8px;}
  #galtest .gt7-cl--a{right:8px;}
  #galtest .gt7-ends{display:none;}
  #galtest .gt7-state{display:none;}
  #galtest .gt7-ctl{grid-row:2;grid-column:1;height:auto;margin:8px 0 0;}
  #galtest .gt7-pp{width:28px;height:28px;}
  #galtest .gt7-ledger{grid-row:2;grid-column:2;margin:8px 0 0;padding:0;border-top:0;display:flex;flex-wrap:wrap;
    align-items:center;column-gap:10px;}
  /* 2026-07-30 Piotr: the thin line + dot under VIEW CASE removed on desktop cards - the
     patient drags the divider on the photograph itself (grip + plate drag stay). */
  #galtest .gt7-track{display:none;}
  #galtest .gt7-id{font-size:14.5px;}
  #galtest .gt7-ctx{flex:1 1 100%;font-size:10.5px;line-height:1.45;margin:3px 0 0;}
  #galtest .gt7-more{margin:0 0 0 auto;min-height:24px;}
}
/* ---- VIEW CASE: examination, not a bigger card ---- */
.gt-sheet--m7 .gt-sheet-shade{background:rgba(8,11,16,.78);}
.gt-sheet--m7 .gt-sheet-frame{background:#DED4C0;padding:12px 0 20px;max-height:95vh;}
.gt-sheet--m7 .gt-sheet-top{padding:0 14px;align-items:flex-start;}
.gt-sheet--m7 .gt-sheet-close{border:0;font-size:19px;min-width:44px;min-height:44px;border-radius:0;}
.gt-sheet--m7 .gt-sheet-eyebrow{font-size:9px;letter-spacing:.2em;}
.gt-sheet--m7 h3{font-family:var(--font-serif);font-weight:300;font-size:24px;line-height:1.18;margin:5px 0 0;}
.gt7-sheet-plate{--w:50%;--r:0.72;position:relative;width:100%;aspect-ratio:var(--r);overflow:hidden;
  background:#0E1319;touch-action:pan-y;cursor:ew-resize;}
@media(min-width:601px){.gt7-sheet-plate{--r:0.86;}}
.gt7-sheet-plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:50% 50%;display:block;}
.gt7-sheet-plate>img.gt7-rot{inset:auto;left:50%;top:50%;width:calc(100% / var(--r));
  height:calc(100% * var(--r));transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
.gt7-sheet-plate .gt7-clip{position:absolute;inset:0;clip-path:inset(0 0 0 var(--w));}
.gt7-sheet-plate .gt7-clip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;}
.gt7-sheet-plate .gt7-clip>img.gt7-rot{inset:auto;left:50%;top:50%;width:calc(100% / var(--r));height:calc(100% * var(--r));transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
.gt7-sheet-plate .gt7-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w);width:1px;
  background:rgba(192,154,99,.92);pointer-events:none;}
.gt7-sheet-plate .gt7-grip{position:absolute;z-index:4;left:var(--w);top:55%;width:32px;height:32px;
  margin:-16px 0 0 -16px;border:1px solid rgba(192,154,99,.95);border-radius:50%;
  background:rgba(14,19,25,.42);display:flex;align-items:center;justify-content:center;padding:0;cursor:ew-resize;}
.gt7-sheet-plate .gt7-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;}
.gt7-sheet-plate .gt7-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
.gt7-sheet-plate.gt7-play .gt7-edge,.gt7-sheet-plate.gt7-play .gt7-grip{transition:left 5.5s cubic-bezier(.4,0,.25,1);}
.gt7-sheet-plate.gt7-play .gt7-clip{transition:clip-path 5.5s cubic-bezier(.4,0,.25,1);}
.gt7-sheet-plate.gt7-nudge .gt7-edge,.gt7-sheet-plate.gt7-nudge .gt7-grip{transition:left .75s cubic-bezier(.4,0,.25,1);}
.gt7-sheet-plate.gt7-nudge .gt7-clip{transition:clip-path .75s cubic-bezier(.4,0,.25,1);}
@media(prefers-reduced-motion:reduce){.gt7-sheet-plate.gt7-play .gt7-edge,.gt7-sheet-plate.gt7-play .gt7-grip,
  .gt7-sheet-plate.gt7-play .gt7-clip,.gt7-sheet-plate.gt7-nudge .gt7-edge,
  .gt7-sheet-plate.gt7-nudge .gt7-grip,.gt7-sheet-plate.gt7-nudge .gt7-clip{transition:none;}}
.gt-sheet--m7 .gt7-ends,.gt-sheet--m7 .gt7-ctl{margin-left:14px;margin-right:14px;}
.gt-sheet--m7 .gt7-state{flex:0 0 auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-body);min-width:62px;text-align:right;}
.gt-sheet--m7 .gt7-pp{flex:0 0 auto;width:32px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:#6B5439;}
.gt-sheet--m7 .gt7-pp svg{width:11px;height:12px;fill:currentColor;}
.gt-sheet--m7 .gt7-track{position:relative;flex:1 1 auto;min-width:0;height:44px;display:flex;align-items:center;}
.gt-sheet--m7 .gt7-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  margin-top:-.5px;background:rgba(20,22,30,.2);pointer-events:none;}
.gt-sheet--m7 .gt7-range{position:relative;z-index:1;width:100%;height:44px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:ew-resize;}
.gt-sheet--m7 .gt7-range::-webkit-slider-runnable-track{height:44px;background:transparent;border:0;}
.gt-sheet--m7 .gt7-range::-moz-range-track{height:44px;background:transparent;border:0;}
.gt-sheet--m7 .gt7-range::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(107,84,57,.9);background:#FBF9F4;margin-top:17.5px;}
.gt-sheet--m7 .gt7-range::-moz-range-thumb{width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(107,84,57,.9);background:#FBF9F4;}
.gt-sheet--m7 .gt-sheet-eyebrow{color:#6B5439;}
.gt-sheet--m7 .gt7-ends{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-body);}
.gt-sheet--m7 .gt7-ends i{flex:1 1 auto;height:1px;background:rgba(20,22,30,.18);}
.gt-sheet--m7 .gt7-body{font-family:var(--font-sans);font-weight:300;font-size:14px;line-height:1.6;
  color:var(--ink-body);margin:14px 14px 0;max-width:62ch;text-wrap:pretty;}
/* DESKTOP 2026-07-30: the whole examination sheet must fit one viewport with safe margins.
   The frame is capped at 100vw/100vh minus 48px; the plate keeps its exact aspect ratio and
   every approved transform and is scaled uniformly by height, so header, comparison,
   controls, description and close share one screen. Mobile (<=600px) is untouched. */
@media(min-width:601px){
  .gt-sheet--m7 .gt-sheet-frame{max-width:min(760px,100vw - 48px);max-height:calc(100vh - 48px);}
  .gt-sheet--m7 .gt7-ctl{display:flex;align-items:center;gap:10px;}
  .gt-sheet--m7 .gt-media--wipe{display:flex;justify-content:center;background:#0E1319;}
  .gt-sheet--m7 .gt7-sheet-plate{width:auto;height:clamp(220px,100vh - 340px,62vh);max-width:100%;}
}


/* 2026-07-30 (Piotr): the LOCKED Model 7 Case 01 + Case 02 cards were moved out of the test
   area into the public "Skin texture and scarring" category. The cards' own rules are
   id-scoped to #galtest, so they are re-hosted verbatim under #cat-texture - same values,
   same specificity, same mobile behaviour. Nothing here touches any other card or category. */
#cat-texture .gt-index7{margin:0 0 24px;}

#cat-texture .gt-index7{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch;grid-auto-rows:1fr;}
@media(min-width:601px){
#cat-texture .gt-index7{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
}
#cat-texture .gt-case7{display:flex;flex-direction:column;margin:0;padding:14px;background:#e7e1d0;border:0;}
#cat-texture .gt7-plate{--w:50%;--r:0.78;position:relative;width:100%;aspect-ratio:var(--r);overflow:hidden;
  background:#0E1319;touch-action:pan-y;cursor:ew-resize;}
@media(min-width:601px){
#cat-texture .gt7-plate{--r:0.8;}
}
#cat-texture .gt7-plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:50% 50%;display:block;}
#cat-texture .gt7-plate>img.gt7-rot{inset:auto;left:50%;top:50%;width:calc(100% / var(--r));
  height:calc(100% * var(--r));transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
#cat-texture .gt7-clip{position:absolute;inset:0;clip-path:inset(0 0 0 var(--w));}
#cat-texture .gt7-clip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;}
#cat-texture .gt7-clip>img.gt7-rot{inset:auto;left:50%;top:50%;width:calc(100% / var(--r));height:calc(100% * var(--r));transform:translate(-50%,-50%) rotate(270deg);transform-origin:50% 50%;}
#cat-texture .gt7-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w);width:1px;
  background:rgba(192,154,99,.92);pointer-events:none;}
#cat-texture .gt7-grip{position:absolute;z-index:4;left:var(--w);top:55%;width:32px;height:32px;margin:-16px 0 0 -16px;
  border:1px solid rgba(192,154,99,.95);border-radius:50%;background:rgba(14,19,25,.42);
  backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
  padding:0;cursor:ew-resize;-webkit-tap-highlight-color:transparent;}
#cat-texture .gt7-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  margin:-22px 0 0 -22px;}
#cat-texture .gt7-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
#cat-texture .gt7-plate.gt7-play .gt7-edge,#cat-texture .gt7-plate.gt7-play .gt7-grip{transition:left 5.5s cubic-bezier(.4,0,.25,1);}
#cat-texture .gt7-plate.gt7-play .gt7-clip{transition:clip-path 5.5s cubic-bezier(.4,0,.25,1);}
@media(prefers-reduced-motion:reduce){
#cat-texture .gt7-plate.gt7-play .gt7-edge,#cat-texture .gt7-plate.gt7-play .gt7-grip,#cat-texture .gt7-plate.gt7-play .gt7-clip{transition:none;}
}
#cat-texture .gt7-ends{display:flex;align-items:center;gap:8px;margin:14px 0 0;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-body);}
#cat-texture .gt7-ends i{flex:1 1 auto;height:1px;background:rgba(20,22,30,.16);}
#cat-texture .gt7-ctl{display:flex;align-items:center;gap:10px;height:44px;margin:2px 0 0;}
#cat-texture .gt7-pp{flex:0 0 auto;width:32px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
#cat-texture .gt7-pp svg{width:11px;height:12px;fill:currentColor;}
#cat-texture .gt7-track{position:relative;flex:1 1 auto;min-width:0;height:44px;display:flex;align-items:center;}
#cat-texture .gt7-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
  background:rgba(20,22,30,.18);pointer-events:none;}
#cat-texture .gt7-range{position:relative;z-index:1;width:100%;height:44px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:ew-resize;}
#cat-texture .gt7-range::-webkit-slider-runnable-track{height:44px;background:transparent;border:0;}
#cat-texture .gt7-range::-moz-range-track{height:44px;background:transparent;border:0;}
#cat-texture .gt7-range::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(117,92,64,.9);background:#FBF9F4;margin-top:17.5px;}
#cat-texture .gt7-range::-moz-range-thumb{width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(117,92,64,.9);background:#FBF9F4;}
#cat-texture .gt7-state{flex:0 0 auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-body);min-width:62px;text-align:right;}
#cat-texture .gt7-ledger{margin-top:auto;padding-top:12px;border-top:1px solid rgba(20,22,30,.10);}
#cat-texture .gt7-n{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;
  color:var(--gold-ink,#755C40);margin:0 0 6px;}
#cat-texture .gt7-id{font-family:var(--font-serif);font-weight:300;font-size:17px;line-height:1.22;
  color:var(--ink,#12151D);margin:0;text-wrap:pretty;}
#cat-texture .gt7-ctx{font-family:var(--font-sans);font-weight:300;font-size:12.5px;line-height:1.55;
  color:var(--ink-body);margin:8px 0 0;text-wrap:pretty;}
#cat-texture .gt7-more{display:inline-flex;align-items:center;min-height:44px;margin:2px 0 0;padding:0;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink,#755C40);background:transparent;border:0;cursor:pointer;align-self:flex-start;}
#cat-texture .gt7-more span{border-bottom:1px solid rgba(117,92,64,.5);padding-bottom:2px;}
#cat-texture .gt7-plate[data-case="1"]{--r:0.75;}
@media(min-width:601px){
#cat-texture .gt7-plate[data-case="1"]{--r:0.75;}
}
#cat-texture .gt7-plate[data-case="1"]>img,#cat-texture .gt7-plate[data-case="1"] .gt7-clip>img{object-fit:cover;transform-origin:50% 50%;}
#cat-texture .gt7-plate[data-case="1"][data-opt="1"]>img{transform:translate(-4%,0%) rotate(84deg) scale(.95);}
#cat-texture .gt7-plate[data-case="1"][data-opt="1"] .gt7-clip>img{transform:translate(-6%,4%) scale(1.12);}
#cat-texture .gt7-plate[data-case="1"][data-opt="2"]>img{transform:rotate(90deg) scale(.95);filter:url(#c1cm);}
#cat-texture .gt7-plate[data-case="1"][data-opt="2"] .gt7-clip>img{transform:translate(-6%,6%) scale(1.05);}
#cat-texture .gt7-stage{display:contents;}
#cat-texture .gt7-cl{display:none;}
@media(min-width:601px){
#cat-texture .gt-case7{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;
    align-items:center;column-gap:8px;position:relative;padding:12px 14px 20px;
    background:#F7F3EA;border:1px solid rgba(20,22,30,.10);border-radius:10px;
    box-shadow:0 1px 2px rgba(12,16,22,.05),0 10px 24px rgba(12,16,22,.05);}
#cat-texture .gt7-stage{display:flex;grid-column:1/-1;position:relative;justify-content:center;
    aspect-ratio:0.761;background:#0E1319;border-radius:6px;overflow:hidden;}
#cat-texture .gt7-stage .gt7-plate{width:auto;height:100%;max-width:100%;flex:0 0 auto;}
#cat-texture .gt7-cl{display:block;position:absolute;z-index:5;top:8px;font-family:var(--font-mono);
    font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,222,203,.85);
    background:rgba(12,16,22,.55);padding:3px 7px;border-radius:2px;pointer-events:none;}
#cat-texture .gt7-cl--b{left:8px;}
#cat-texture .gt7-cl--a{right:8px;}
#cat-texture .gt7-ends{display:none;}
#cat-texture .gt7-state{display:none;}
#cat-texture .gt7-ctl{grid-row:2;grid-column:1;height:auto;margin:8px 0 0;}
#cat-texture .gt7-pp{width:28px;height:28px;}
#cat-texture .gt7-ledger{grid-row:2;grid-column:2;margin:8px 0 0;padding:0;border-top:0;display:flex;flex-wrap:wrap;
    align-items:center;column-gap:10px;}
#cat-texture .gt7-track{display:none;}
#cat-texture .gt7-id{font-size:14.5px;}
#cat-texture .gt7-ctx{flex:1 1 100%;font-size:10.5px;line-height:1.45;margin:3px 0 0;}
#cat-texture .gt7-more{margin:0 0 0 auto;min-height:24px;}
}


/* 2026-07-30 (Piotr: "wyrzucic Test area / six presentation models i tamtejszy case 1 and 2"):
   the whole test area is taken off the page - its eyebrow "Test area · not for publication",
   the heading "Skin texture and scarring — six presentation models", the lede, the model tabs
   and Models 1-6 with their own Case 1 / Case 2 copies. It is HIDDEN, not deleted: the section
   still holds the player/sheet machinery the two locked cards need after they are moved into
   the public "Skin texture and scarring" category, and nothing is destroyed. A full copy of the
   page with the test area visible is kept at
   handoff/odnova-site/_backup-galeria-test-with-test-area-2026-07-30.html */
#galtest{display:none!important;}


/* 2026-07-30 (Piotr, binding): item 1 of "Chemical resurfacing, pigmentation and photodamage"
   becomes the approved Case 01 comparison, on a SQUARE 1:1 stage (not Case 01's ratio). The
   card's own margin/border/background, the caption wording, the source file res-07.jpg, the
   before/after order and the surrounding spacing are unchanged. The legacy class gal-merged was
   dropped from THIS figure only, because its inherited "\.gal-merged > div{aspect-ratio:2/1!important}"
   rule would otherwise force the stage back to a 2:1 strip; gal-slide and every inline style stay.
   No lower slider line or dot (the range is visually hidden and kept for keyboard access only). */
#cat-resurfacing .r1-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w,100%);width:1px;background:rgba(192,154,99,.92);pointer-events:none;}
#cat-resurfacing .r1-grip{position:absolute;z-index:4;left:var(--w,100%);top:55%;width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid rgba(192,154,99,.95);border-radius:50%;background:rgba(14,19,25,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:0;cursor:ew-resize;-webkit-tap-highlight-color:transparent;}
#cat-resurfacing .r1-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;}
#cat-resurfacing .r1-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
#cat-resurfacing .r1-plate.r1-anim .r1-clip{transition:clip-path 5.5s cubic-bezier(.4,0,.25,1);}
#cat-resurfacing .r1-plate.r1-anim .r1-edge,#cat-resurfacing .r1-plate.r1-anim .r1-grip{transition:left 5.5s cubic-bezier(.4,0,.25,1);}
@media(prefers-reduced-motion:reduce){#cat-resurfacing .r1-plate.r1-anim .r1-clip,#cat-resurfacing .r1-plate.r1-anim .r1-edge,#cat-resurfacing .r1-plate.r1-anim .r1-grip{transition:none;}}
#cat-resurfacing .r1-cl{position:absolute;z-index:5;top:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,222,203,.85);background:rgba(12,16,22,.55);padding:3px 7px;border-radius:2px;pointer-events:none;}
#cat-resurfacing .r1-cl--b{left:8px;}#cat-resurfacing .r1-cl--a{right:8px;}
/* 2026-07-30 (Piotr: "ta kafelka ma wygladac jak Case 01 - ten sam styl i rozmiar, tylko nie
   prostokatny a kwadratowy"): the item wears the approved Case 01 card shell at the same size -
   warm-white card, 1px hairline, 10px radius, the same two-layer shadow, 12/14/20 padding, the
   dark stage with 6px radius and the Before/After chips - with a SQUARE 1:1 stage instead of
   Case 01's 0.761. Caption wording, source file, before/after order and numbering are unchanged;
   the runtime "1 ·" number becomes the gold mono eyebrow, exactly like Case 01's "Case 01". */
#cat-resurfacing .r1-fig{width:min(480px,100%)!important;max-width:480px!important;margin:0 auto;padding:12px 14px 20px;background:#F7F3EA;
  border:1px solid rgba(20,22,30,.10);border-radius:10px;
  box-shadow:0 1px 2px rgba(12,16,22,.05),0 10px 24px rgba(12,16,22,.05);}
#cat-resurfacing .r1-plate{width:100%;border-radius:6px;--r1bx:1.1%;--r1by:1.4%;}
/* 2026-07-30 (Piotr): the BEFORE frame sat slightly left and high of the AFTER, so nose and lips
   did not line up across the divider. It is nudged the opposite way - to the right and down -
   by TRANSLATION ONLY: no scale, no rotation, no stretch, no crop, no colour change, and the
   AFTER frame is not touched at all. The two values below are the whole adjustment, in percent
   of the image box (the box is 200% of the plate, so 1.1% reads as ~2.2% of the square):
   --r1bx moves it right, --r1by moves it down. Both are easy to re-tune on Piotr's eye. */
#cat-resurfacing [data-r1]:not(.r1-pair)>img:first-of-type,
.r1-sheet [data-r1]:not(.r1-pair)>img:first-of-type{transform:translate(var(--r1bx,1.1%),calc(-50% + var(--r1by,1.4%)))!important;}
.r1-sheet .r1-plate{--r1bx:1.1%;--r1by:1.4%;}
/* item 2 (res-03): its before/after frames are already the same size and alignment, so the
   registration offset is explicitly zeroed - the photographs are used exactly as shot. */
#cat-resurfacing .r2-plate{--r1bx:0%;--r1by:0%;}
/* item 3 (resv-02 pair): two separate portrait files, already matched - the plate keeps their
   proportion (0.5:1) instead of the square, both layers are contain-fitted and the registration
   offset is switched off entirely, so the frames are shown exactly as shot. */
#cat-resurfacing .r3-plate{--r1bx:0%;--r1by:0%;}
#cat-resurfacing .r3-plate>img:first-of-type,.r1-sheet .r3-plate>img:first-of-type{transform:none!important;}
/* 2026-07-30 (Piotr: "zdjecie PO moze isc troszke nizej - jesli mamy zapas zdjecia nad i nie
   powstanie czarny klin"). The AFTER frame (778x1600) was contain-fitted, which left NO vertical
   spare - a downward shift would have opened a black wedge at the top. It now fills the plate
   (cover: 437 -> 450 wide, so 926 tall against a 900 plate = 26px of real spare) and the visible
   window is moved UP the source with object-position, which slides the FACE DOWN by ~9px with no
   wedge at either end. Cost, stated plainly: ~26px (2.8%) of the after frame's height is outside
   the plate - hair at the very top and jumper at the very bottom, no facial anatomy. Uniform
   scale only: no stretch, no rotation, no retouch, no colour change; the BEFORE frame is untouched.
   --r3ay is the whole adjustment: 50% is centred, lower values move the face down. */
#cat-resurfacing .r3-plate .r1-clip>img,.r1-sheet .r3-plate .r1-clip>img{
  object-fit:cover!important;object-position:50% var(--r3ay,15%)!important;}
/* items 4, 5, 6 - each keeps its own PROPORTION, no registration offset, nothing retouched.
   4  one composite file result-pigmentation-ba-web3.jpg (1148x780): each half is 574x780 =
      0.736:1, and the composite laid at 200% of a 0.736 plate fits exactly - zero matting,
      zero crop, the same technique as items 1 and 2.
   5  two files 669x1200 (0.5575) and 675x1200 (0.5625) - all but identical, so the plate takes
      the mean 0.56:1 and both frames fill it; the 0.9% difference is inside the plate edge.
   6  two files 675x1000 (0.675) and 561x1000 (0.561) - 20% apart, so no single plate can show
      both whole. The plate takes the mean 0.618:1 and both frames FILL it (cover), which keeps
      the card free of black bands at the cost of ~8% off the outer edges of each frame
      (background and clothing at the sides, no facial anatomy). Say the word and I switch it to
      contain instead, which shows every pixel but puts bands on both halves. */
#cat-resurfacing .r4-plate,#cat-resurfacing .r5-plate,#cat-resurfacing .r6-plate{--r1bx:0%;--r1by:0%;}
/* 2026-07-30 (Piotr): the three "Same patient · view N of 3" items (rev-24/25, rev-26/27,
   rev-28/29) are absorbed INTO card 1 as views 2, 3 and 4. One card, four comparisons, switched
   by small numbered buttons. Each view keeps its own files, its own proportion and its own
   caption verbatim - no photograph, wording or before/after order was changed, and nothing was
   merged into a single "averaged" frame. */
#cat-resurfacing .r1-views{grid-row:4;grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:10px 0 0;}
/* card 1 keeps one height across all four views: the caption box is reserved at its tallest
   (the views that carry the "Same patient · view N of 3" line). Copy is untouched. */
#cat-resurfacing .r1-fixedcap figcaption{min-height:62px;}
#cat-resurfacing .r1-views button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;color:var(--gold-ink,#755C40);
  background:transparent;border:1px solid rgba(117,92,64,.35);border-radius:50%;cursor:pointer;padding:0;}
#cat-resurfacing .r1-views button::after{content:"";position:absolute;width:44px;height:44px;}
#cat-resurfacing .r1-views button{position:relative;}
#cat-resurfacing .r1-views button[aria-pressed="true"]{background:#0E1319;border-color:#0E1319;color:#E9DECB;}
#cat-resurfacing .r1-views button:focus-visible{outline:2px solid var(--gold-ink,#755C40);outline-offset:2px;}
#cat-resurfacing .r5-plate>img:first-of-type,.r1-sheet .r5-plate>img:first-of-type,
#cat-resurfacing .r6-plate>img:first-of-type,.r1-sheet .r6-plate>img:first-of-type{transform:none!important;}
#cat-resurfacing .r1-fig figcaption{font-family:var(--font-serif);font-weight:300;font-size:14.5px;
  line-height:1.22;color:var(--ink,#12151D);padding:0;margin:0;text-wrap:pretty;}
#cat-resurfacing .r1-fig figcaption .gal-num-cap{display:block;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink,#755C40);margin:0 0 6px;}
#cat-resurfacing .r1-ctl{display:flex;align-items:center;padding:8px 0 0;float:left;}
#cat-resurfacing .r1-fig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;}
#cat-resurfacing .r1-plate{grid-column:1/-1;}
#cat-resurfacing .r1-ctl{grid-row:2;grid-column:1;float:none;margin:8px 0 0;padding:0;}
#cat-resurfacing .r1-fig figcaption{grid-row:2;grid-column:2;margin:8px 0 0;}
#cat-resurfacing .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;
  min-height:24px;margin:6px 0 0;padding:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink,#755C40);background:transparent;border:0;cursor:pointer;}
#cat-resurfacing .r1-more span{border-bottom:1px solid rgba(117,92,64,.5);padding-bottom:2px;}
/* VIEW CASE sheet - the approved viewport caps: the whole sheet fits one screen with 24px margins */
.r1-sheet{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;}
.r1-sheet[hidden]{display:none;}
.r1-sheet .r1-shade{position:absolute;inset:0;background:rgba(8,11,16,.78);}
.r1-sheet .r1-frame{position:relative;display:flex;flex-direction:column;background:#DED4C0;
  width:min(760px,100vw - 48px);max-height:calc(100vh - 48px);padding:12px 0 18px;}
.r1-sheet .r1-top{display:flex;align-items:flex-start;justify-content:space-between;padding:0 14px;}
.r1-sheet .r1-eyebrow{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink,#755C40);padding-top:14px;}
.r1-sheet .r1-close{border:0;background:transparent;font-size:19px;min-width:44px;min-height:44px;cursor:pointer;color:var(--ink,#12151D);}
.r1-sheet .r1-scroll{overflow:auto;min-height:0;padding:0 14px;display:flex;flex-direction:column;align-items:center;}
.r1-sheet .r1-holder{width:100%;display:flex;justify-content:center;}
.r1-sheet .r1-plate{width:min(100%,calc(100vh - 300px));max-width:100%;flex:0 0 auto;border-radius:6px;}
.r1-sheet .r1-body{font-family:var(--font-serif);font-weight:300;font-size:14.5px;line-height:1.5;
  color:var(--ink,#12151D);margin:12px 0 0;max-width:62ch;align-self:flex-start;text-wrap:pretty;}
/* item 3's sheet plate is sized by HEIGHT (it is a tall 0.5:1 frame, not a square), so the whole
   examination sheet still fits one viewport. Declared after the generic rule so it wins on order. */
.r1-sheet .r3-plate{width:auto!important;height:min(calc(100vh - 240px),900px);max-width:none!important;aspect-ratio:0.56/1;}
.r1-sheet .r4-plate{width:auto!important;height:min(calc(100vh - 240px),820px);max-width:none!important;aspect-ratio:0.736/1;}
.r1-sheet .r5-plate{width:auto!important;height:min(calc(100vh - 240px),880px);max-width:none!important;aspect-ratio:0.56/1;}
.r1-sheet .r6-plate{width:auto!important;height:min(calc(100vh - 240px),880px);max-width:none!important;aspect-ratio:0.618/1;}
#cat-resurfacing .r1-pp{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
#cat-resurfacing .r1-pp svg{width:11px;height:12px;fill:currentColor;}
#cat-resurfacing .r1-range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}


/* 2026-07-30 (Piotr: "usun tez napisy Before i After"): the corner chips are taken off every
   comparison plate - the divider itself and the caption carry the meaning. Hidden rather than
   deleted so a single line brings them back if Piotr changes his mind. */
#cat-texture .gt7-cl,#cat-resurfacing .r1-cl,.r1-sheet .r1-cl{display:none!important;}
/* the running case label - one continuous sequence over the whole page */
#cat-resurfacing .r1-fig figcaption .gal-num-cap{display:block;}


/* 2026-07-30 (Piotr): Cases 09, 10 and 11 are the same patient, so they become ONE card - Case 09
   with three views on the 1-2-3 buttons. The card rules are id-scoped to #cat-resurfacing, so the
   ones this card needs are re-hosted verbatim under #cat-filler. The plate is a CONSTANT 0.9:1 in
   all three views (Piotr: "rozmiar kafelka ma byc niezmienny") and both frames of every view are
   cover-fitted with the window pushed to the BOTTOM of the source, so the chin stays in frame -
   what is dropped is the top of the hair, not the jawline. */
#cat-filler .r1-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w,100%);width:1px;background:rgba(192,154,99,.92);pointer-events:none;}
#cat-filler .r1-grip{position:absolute;z-index:4;left:var(--w,100%);top:55%;width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid rgba(192,154,99,.95);border-radius:50%;background:rgba(14,19,25,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:0;cursor:ew-resize;-webkit-tap-highlight-color:transparent;}
#cat-filler .r1-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;}
#cat-filler .r1-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
#cat-filler .r1-plate.r1-anim .r1-clip{transition:clip-path 5.5s cubic-bezier(.4,0,.25,1);}
#cat-filler .r1-plate.r1-anim .r1-edge,#cat-filler .r1-plate.r1-anim .r1-grip{transition:left 5.5s cubic-bezier(.4,0,.25,1);}
@media(prefers-reduced-motion:reduce){
#cat-filler .r1-plate.r1-anim .r1-clip,#cat-filler .r1-plate.r1-anim .r1-edge,#cat-filler .r1-plate.r1-anim .r1-grip{transition:none;}
}
#cat-filler .r1-cl{position:absolute;z-index:5;top:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,222,203,.85);background:rgba(12,16,22,.55);padding:3px 7px;border-radius:2px;pointer-events:none;}
#cat-filler .r1-cl--b{left:8px;}
#cat-filler .r1-cl--a{right:8px;}
#cat-filler .r1-fig{width:min(480px,100%)!important;max-width:480px!important;margin:0 auto;padding:12px 14px 20px;background:#F7F3EA;
  border:1px solid rgba(20,22,30,.10);border-radius:10px;
  box-shadow:0 1px 2px rgba(12,16,22,.05),0 10px 24px rgba(12,16,22,.05);}
#cat-filler .r1-plate{width:100%;border-radius:6px;--r1bx:1.1%;--r1by:1.4%;}
#cat-filler .r1-views{grid-row:4;grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:10px 0 0;}
#cat-filler .r1-fixedcap figcaption{min-height:52px;}
#cat-filler .r1-views button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;color:var(--gold-ink,#755C40);
  background:transparent;border:1px solid rgba(117,92,64,.35);border-radius:50%;cursor:pointer;padding:0;}
#cat-filler .r1-views button::after{content:"";position:absolute;width:44px;height:44px;}
#cat-filler .r1-views button{position:relative;}
#cat-filler .r1-views button[aria-pressed="true"]{background:#0E1319;border-color:#0E1319;color:#E9DECB;}
#cat-filler .r1-views button:focus-visible{outline:2px solid var(--gold-ink,#755C40);outline-offset:2px;}
#cat-filler .r1-fig figcaption{font-family:var(--font-serif);font-weight:300;font-size:14.5px;
  line-height:1.22;color:var(--ink,#12151D);padding:0;margin:0;text-wrap:pretty;}
#cat-filler .r1-fig figcaption .gal-num-cap{display:block;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink,#755C40);margin:0 0 6px;}
#cat-filler .r1-ctl{display:flex;align-items:center;padding:8px 0 0;float:left;}
#cat-filler .r1-fig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;}
#cat-filler .r1-plate{grid-column:1/-1;}
#cat-filler .r1-ctl{grid-row:2;grid-column:1;float:none;margin:8px 0 0;padding:0;}
#cat-filler .r1-fig figcaption{grid-row:2;grid-column:2;margin:8px 0 0;}
#cat-filler .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;
  min-height:24px;margin:6px 0 0;padding:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink,#755C40);background:transparent;border:0;cursor:pointer;}
#cat-filler .r1-more span{border-bottom:1px solid rgba(117,92,64,.5);padding-bottom:2px;}
#cat-filler .r1-pp{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
#cat-filler .r1-pp svg{width:11px;height:12px;fill:currentColor;}
#cat-filler .r1-range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
#cat-filler .r7-plate{--r1bx:0%;--r1by:0%;}
#cat-filler .r7-plate>img:first-of-type,.r1-sheet .r7-plate>img:first-of-type{transform:none!important;}
#cat-filler .r1-fixedcap figcaption{min-height:52px;}
.r1-sheet .r7-plate{width:auto!important;height:min(calc(100vh - 240px),820px);max-width:none!important;aspect-ratio:0.9/1;}
/* 2026-07-30 (Piotr: "przeksztalc Case 10-16 tak jak Case 09"). Seven single-comparison cards,
   each on its own proportion so nothing is re-composed: the plate ratio is the pair's own ratio
   (or the mean where the two frames differ), both frames cover-fit and are anchored to the BOTTOM
   of the source so the jawline stays in frame. No registration nudge on any of them. */
#cat-filler .r8-plate{--r1bx:0%;--r1by:0%;}
#cat-filler .r8-plate>img:first-of-type,.r1-sheet .r8-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r8-plate{width:auto!important;height:min(calc(100vh - 240px),860px);max-width:none!important;aspect-ratio:0.75/1;}
#cat-filler .r9-plate{--r1bx:0%;--r1by:0%;}
#cat-filler .r9-plate>img:first-of-type,.r1-sheet .r9-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r9-plate{width:auto!important;height:min(calc(100vh - 240px),820px);max-width:none!important;aspect-ratio:0.62/1;}
#cat-filler .r10-plate{--r1bx:0%;--r1by:0%;}
#cat-filler .r10-plate>img:first-of-type,.r1-sheet .r10-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r10-plate{width:auto!important;height:min(calc(100vh - 240px),860px);max-width:none!important;aspect-ratio:0.748/1;}
#cat-filler .r11-plate{--r1bx:0%;--r1by:0%;}
#cat-filler .r11-plate>img:first-of-type,.r1-sheet .r11-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r11-plate{width:auto!important;height:min(calc(100vh - 240px),860px);max-width:none!important;aspect-ratio:0.965/1;}
#cat-filler .r12-plate{--r1bx:0%;--r1by:0%;}
/* 2026-07-30 (Piotr: "case 10 moze nie byc taki wysoki - szerokosc niech pozostanie taka jaka jest
   - ale mozna zdjecia przyciac u gory okolo 1 cm i na dole tez okolo 1 cm"). The plate keeps its
   450px width and loses 76px of height (~1cm top + ~1cm bottom): 0.562 -> 0.62. The frames are
   centred cover instead of contain, so the trim is symmetric and lives only in CSS - the files are
   untouched and one line puts the full frame back. */
#cat-filler .r9-plate>img,#cat-filler .r9-plate .r1-clip>img,
.r1-sheet .r9-plate>img,.r1-sheet .r9-plate .r1-clip>img{
  object-fit:cover!important;object-position:50% 50%!important;}
/* 2026-07-30 (Piotr: "113 jest przed a 114 jest po - dermal fillers"). Promoted from the internal
   recovered list. BEFORE (17.16.54) carried the video player bar across the sweater, so its window
   stops above it; it was also shot further away, so its window is tightened ~1.3x on the same
   centre to bring the two faces to one apparent size - uniform scale only, no stretch, no retouch.
   Plate 0.8:1 is the mean of the two crops (0.808 / 0.792), so the cover crop is under 1%. */
#cat-filler .r37-plate{--r1bx:0%;--r1by:0%;}
#cat-filler .r37-plate>img:first-of-type,.r1-sheet .r37-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r37-plate{width:auto!important;height:min(calc(100vh - 240px),860px);max-width:none!important;aspect-ratio:0.8/1;}
#cat-filler .r12-plate>img:first-of-type,.r1-sheet .r12-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r12-plate{width:auto!important;height:min(calc(100vh - 240px),860px);max-width:none!important;aspect-ratio:0.7375/1;}
#cat-filler .r14-plate{--r1bx:0%;--r1by:0%;}
#cat-filler .r14-plate>img:first-of-type,.r1-sheet .r14-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r14-plate{width:auto!important;height:min(calc(100vh - 240px),860px);max-width:none!important;aspect-ratio:0.507/1;}



#cat-undereye .r1-plate,#cat-lesion .r1-plate{width:100%;border-radius:6px;grid-column:1/-1;}
#cat-undereye .r1-ctl,#cat-lesion .r1-ctl{grid-row:2;grid-column:1;}
#cat-undereye .r1-fig figcaption,#cat-lesion .r1-fig figcaption{grid-row:2;grid-column:2;}
#cat-undereye .r1-more,#cat-lesion .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;}
#cat-undereye .r1-fig figcaption .gal-num-cap,#cat-lesion .r1-fig figcaption .gal-num-cap{display:block;}
/* 2026-07-30 (Piotr: "przeksztalc case 22 i 23 ... i kontynuuj z case 24-35"). Fourteen more
   comparisons in the same card language. The card rules are id-scoped, so they are re-hosted
   verbatim under #cat-undereye and #cat-lesion. Each plate keeps its own proportion: the
   single-file composites (res-01, res-10, res-06, res-08, res-05) sit at exactly half the
   composite ratio, so both halves show whole with zero crop; the two-file pairs take the pair
   ratio and cover-fit, anchored to the bottom where the frame is a face (Cases 34, 35) and
   centred on the square lesion close-ups, where the crop is under 1%. */
#cat-undereye .r1-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w,100%);width:1px;background:rgba(192,154,99,.92);pointer-events:none;}
#cat-undereye .r1-grip{position:absolute;z-index:4;left:var(--w,100%);top:55%;width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid rgba(192,154,99,.95);border-radius:50%;background:rgba(14,19,25,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:0;cursor:ew-resize;-webkit-tap-highlight-color:transparent;}
#cat-undereye .r1-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;}
#cat-undereye .r1-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
#cat-undereye .r1-cl{position:absolute;z-index:5;top:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,222,203,.85);background:rgba(12,16,22,.55);padding:3px 7px;border-radius:2px;pointer-events:none;}
#cat-undereye .r1-cl--b{left:8px;}
#cat-undereye .r1-cl--a{right:8px;}
#cat-undereye .r1-fig{width:min(480px,100%)!important;max-width:480px!important;margin:0 auto;padding:12px 14px 20px;background:#F7F3EA;
  border:1px solid rgba(20,22,30,.10);border-radius:10px;
  box-shadow:0 1px 2px rgba(12,16,22,.05),0 10px 24px rgba(12,16,22,.05);}
#cat-undereye .r1-fig figcaption{font-family:var(--font-serif);font-weight:300;font-size:14.5px;
  line-height:1.22;color:var(--ink,#12151D);padding:0;margin:0;text-wrap:pretty;}
#cat-undereye .r1-fig figcaption .gal-num-cap{display:block;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink,#755C40);margin:0 0 6px;}
#cat-undereye .r1-ctl{display:flex;align-items:center;padding:8px 0 0;float:left;}
#cat-undereye .r1-fig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;}
#cat-undereye .r1-ctl{grid-row:2;grid-column:1;float:none;margin:8px 0 0;padding:0;}
#cat-undereye .r1-fig figcaption{grid-row:2;grid-column:2;margin:8px 0 0;}
#cat-undereye .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;
  min-height:24px;margin:6px 0 0;padding:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink,#755C40);background:transparent;border:0;cursor:pointer;}
#cat-undereye .r1-more span{border-bottom:1px solid rgba(117,92,64,.5);padding-bottom:2px;}
#cat-undereye .r1-pp{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
#cat-undereye .r1-pp svg{width:11px;height:12px;fill:currentColor;}
#cat-undereye .r1-range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
#cat-lesion .r1-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w,100%);width:1px;background:rgba(192,154,99,.92);pointer-events:none;}
#cat-lesion .r1-grip{position:absolute;z-index:4;left:var(--w,100%);top:55%;width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid rgba(192,154,99,.95);border-radius:50%;background:rgba(14,19,25,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:0;cursor:ew-resize;-webkit-tap-highlight-color:transparent;}
#cat-lesion .r1-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;}
#cat-lesion .r1-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
#cat-lesion .r1-cl{position:absolute;z-index:5;top:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,222,203,.85);background:rgba(12,16,22,.55);padding:3px 7px;border-radius:2px;pointer-events:none;}
#cat-lesion .r1-cl--b{left:8px;}
#cat-lesion .r1-cl--a{right:8px;}
#cat-lesion .r1-fig{width:min(480px,100%)!important;max-width:480px!important;margin:0 auto;padding:12px 14px 20px;background:#F7F3EA;
  border:1px solid rgba(20,22,30,.10);border-radius:10px;
  box-shadow:0 1px 2px rgba(12,16,22,.05),0 10px 24px rgba(12,16,22,.05);}
#cat-lesion .r1-fig figcaption{font-family:var(--font-serif);font-weight:300;font-size:14.5px;
  line-height:1.22;color:var(--ink,#12151D);padding:0;margin:0;text-wrap:pretty;}
#cat-lesion .r1-fig figcaption .gal-num-cap{display:block;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink,#755C40);margin:0 0 6px;}
#cat-lesion .r1-ctl{display:flex;align-items:center;padding:8px 0 0;float:left;}
#cat-lesion .r1-fig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;}
#cat-lesion .r1-ctl{grid-row:2;grid-column:1;float:none;margin:8px 0 0;padding:0;}
#cat-lesion .r1-fig figcaption{grid-row:2;grid-column:2;margin:8px 0 0;}
#cat-lesion .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;
  min-height:24px;margin:6px 0 0;padding:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink,#755C40);background:transparent;border:0;cursor:pointer;}
#cat-lesion .r1-more span{border-bottom:1px solid rgba(117,92,64,.5);padding-bottom:2px;}
#cat-lesion .r1-pp{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
#cat-lesion .r1-pp svg{width:11px;height:12px;fill:currentColor;}
#cat-lesion .r1-range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
#cat-undereye .r15-plate{--r1bx:0%;--r1by:0%;}
#cat-undereye .r16-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r17-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r20-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r21-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r22-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r23-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r24-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r25-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r26-plate{--r1bx:0%;--r1by:0%;}
#cat-lesion .r27-plate{--r1bx:0%;--r1by:0%;}
.r1-sheet .r27-plate{width:auto!important;height:min(calc(100vh - 240px),860px);max-width:none!important;aspect-ratio:0.785/1;}
#cat-lesion .r28-plate{--r1bx:0%;--r1by:0%;}
.r1-sheet .r28-plate{width:auto!important;height:min(calc(100vh - 240px),860px);max-width:none!important;aspect-ratio:0.563/1;}


/* 2026-07-30 (Piotr: "przeksztalc prosze all lip cases"). All five lip comparisons in the same
   card language, each on its own proportion: res-04 and res-02 are single-file composites shown
   at exactly half their ratio (zero crop); lips-before/after-web-s keep their 1.359 pair ratio
   and the after frame keeps its authored object-position 42% (it was set that way before, and
   changing it would move the anatomy); the rev-17/rev-16 pair differs by 9% so it takes the mean
   1.22 and, being the smallest pair here (617x484 / 666x572), its card is narrowed to 400px so
   the frames are not upscaled as far; lips-before/after-c are square 1:1, exact fit. */
#cat-filler-lips .r1-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w,100%);width:1px;background:rgba(192,154,99,.92);pointer-events:none;}
#cat-filler-lips .r1-grip{position:absolute;z-index:4;left:var(--w,100%);top:55%;width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid rgba(192,154,99,.95);border-radius:50%;background:rgba(14,19,25,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:0;cursor:ew-resize;-webkit-tap-highlight-color:transparent;}
#cat-filler-lips .r1-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;}
#cat-filler-lips .r1-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
#cat-filler-lips .r1-plate.r1-anim .r1-clip{transition:clip-path 5.5s cubic-bezier(.4,0,.25,1);}
#cat-filler-lips .r1-plate.r1-anim .r1-edge,#cat-filler-lips .r1-plate.r1-anim .r1-grip{transition:left 5.5s cubic-bezier(.4,0,.25,1);}
@media(prefers-reduced-motion:reduce){
#cat-filler-lips .r1-plate.r1-anim .r1-clip,#cat-filler-lips .r1-plate.r1-anim .r1-edge,#cat-filler-lips .r1-plate.r1-anim .r1-grip{transition:none;}
}
#cat-filler-lips .r1-cl{position:absolute;z-index:5;top:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,222,203,.85);background:rgba(12,16,22,.55);padding:3px 7px;border-radius:2px;pointer-events:none;}
#cat-filler-lips .r1-cl--b{left:8px;}
#cat-filler-lips .r1-cl--a{right:8px;}
#cat-filler-lips .r1-fig{width:min(480px,100%)!important;max-width:480px!important;margin:0 auto;padding:12px 14px 20px;background:#F7F3EA;
  border:1px solid rgba(20,22,30,.10);border-radius:10px;
  box-shadow:0 1px 2px rgba(12,16,22,.05),0 10px 24px rgba(12,16,22,.05);}
#cat-filler-lips .r1-plate{width:100%;border-radius:6px;--r1bx:1.1%;--r1by:1.4%;}
#cat-filler-lips .r1-views{grid-row:4;grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:10px 0 0;}
#cat-filler-lips .r1-views button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;color:var(--gold-ink,#755C40);
  background:transparent;border:1px solid rgba(117,92,64,.35);border-radius:50%;cursor:pointer;padding:0;}
#cat-filler-lips .r1-views button::after{content:"";position:absolute;width:44px;height:44px;}
#cat-filler-lips .r1-views button{position:relative;}
#cat-filler-lips .r1-views button[aria-pressed="true"]{background:#0E1319;border-color:#0E1319;color:#E9DECB;}
#cat-filler-lips .r1-views button:focus-visible{outline:2px solid var(--gold-ink,#755C40);outline-offset:2px;}
#cat-filler-lips .r1-fig figcaption{font-family:var(--font-serif);font-weight:300;font-size:14.5px;
  line-height:1.22;color:var(--ink,#12151D);padding:0;margin:0;text-wrap:pretty;}
#cat-filler-lips .r1-fig figcaption .gal-num-cap{display:block;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink,#755C40);margin:0 0 6px;}
#cat-filler-lips .r1-ctl{display:flex;align-items:center;padding:8px 0 0;float:left;}
#cat-filler-lips .r1-fig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;}
#cat-filler-lips .r1-plate{grid-column:1/-1;}
#cat-filler-lips .r1-ctl{grid-row:2;grid-column:1;float:none;margin:8px 0 0;padding:0;}
#cat-filler-lips .r1-fig figcaption{grid-row:2;grid-column:2;margin:8px 0 0;}
#cat-filler-lips .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;
  min-height:24px;margin:6px 0 0;padding:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink,#755C40);background:transparent;border:0;cursor:pointer;}
#cat-filler-lips .r1-more span{border-bottom:1px solid rgba(117,92,64,.5);padding-bottom:2px;}
#cat-filler-lips .r1-pp{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
#cat-filler-lips .r1-pp svg{width:11px;height:12px;fill:currentColor;}
#cat-filler-lips .r1-range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
#cat-filler-lips .r1-plate{width:100%;border-radius:6px;grid-column:1/-1;}
#cat-filler-lips .r1-ctl{grid-row:2;grid-column:1;}
#cat-filler-lips .r1-fig figcaption{grid-row:2;grid-column:2;}
#cat-filler-lips .r1-fig figcaption .gal-num-cap{display:block;}
#cat-filler-lips .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;}
/* 2026-07-30 (Piotr): two comparisons promoted out of the internal review list.
   Lips (former review items 45 + 46, safe-2021-10-12-10.26.21 / 11.25.42 - one session, 10:26
   before and 11:25 after): the AFTER frame was shot in landscape, so its web copy is ROTATED -90
   degrees to match the portrait BEFORE - rotation and uniform downscale only, no crop, no retouch,
   no colour change. Both are 1000x1333 (0.75), so the 0.75 plate fits them with zero crop.
   TCA (former review items 57 + 66, IMG_2700 / IMG_3562): both 3024x4032 downscaled to 1000x1333,
   same 0.75 plate, zero crop. */
#cat-filler-lips .r35-plate{--r1bx:0%;--r1by:0%;}
/* 2026-07-30 (Piotr: "z case 55 zrob porownanie przed i po ust ktore dodasz do sekcji ust").
   The lip region is cut from each half of the same composite (x22-80%, y42-60% of the half), so
   both frames share one window and the eyes are outside it. Plate 1.61 = the crops' own ratio. */
#cat-filler-lips .r38-plate{--r1bx:0%;--r1by:0%;}
#cat-filler-lips .r38-plate>img:first-of-type,.r1-sheet .r38-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r38-plate{width:auto!important;height:min(calc(100vh - 300px),520px);max-width:none!important;aspect-ratio:1.61/1;}
#cat-filler .r1-fixedcap figcaption{min-height:52px;}
#cat-resurfacing .r36-plate{--r1bx:0%;--r1by:0%;}
/* 2026-07-30 (Piotr: "case 03 zrob w wielkosci case 04 - nie bedzie czarnego klina"). The plate
   takes Case 04's proportion (0.56, so 450x804 instead of 450x900) and the frames switch from
   contain to a centred cover, which removes the dark strip entirely. The trim is symmetric
   (~36px top and bottom on the before frame) and lives only in CSS - the files are untouched. */
#cat-resurfacing .r3-plate>img,#cat-resurfacing .r3-plate .r1-clip>img,
.r1-sheet .r3-plate>img,.r1-sheet .r3-plate .r1-clip>img{
  object-fit:cover!important;object-position:50% 50%!important;}
/* 2026-07-30 (Piotr): "Chemical resurfacing..." and "Benign skin lesion removal" lay their cards
   in TWO columns, the same rhythm as "Skin texture and scarring" - the legacy auto-fit grid tried
   to make four 220px columns, which the 480px cards overflowed. The cards keep their own width and
   are centred in the column. */
#cat-undereye .acc-panel>div[style*="grid"],#cat-resurfacing .acc-panel>div[style*="grid"],#cat-lesion .acc-panel>div[style*="grid"]{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;max-width:1100px!important;
  margin-left:auto!important;margin-right:auto!important;}
#cat-resurfacing .r1-fig,#cat-lesion .r1-fig,#cat-undereye .r1-fig{justify-self:center;}
/* 2026-07-30 (Piotr: "zmien rozmiar case 32 - niech to bedzie podobne do kafelka 31" and
   "kafelki 34 i 35 - zmniejsz do rozmiaru jak 31"). Both are size-only changes made the
   NON-DESTRUCTIVE way - the cards are narrowed, so every clinical pixel stays visible:
   Case 32's frames are 0.563 portraits, so at a 360px card its plate is 330x586 instead of
   450x799, which lands within ~10px of Case 31's own 573px plate; the two locked Model 7 cards
   are capped at the gallery's standard 480px instead of 581px. No crop, no re-composition. */
#cat-lesion .r28-fig{width:min(360px,100%)!important;max-width:360px!important;}
#cat-texture .gt-case7{width:min(480px,100%)!important;max-width:480px!important;justify-self:center;}
/* 2026-07-30 (Piotr: cases 6, 7, 8 were not in the two-column rhythm). They sit inside legacy
   ".gal-pair > .gal-pair-imgs" wrappers, each its own single-column grid, so they never became
   items of the section grid. At >=781px both wrappers are made display:contents, which hands their
   figures straight to the section's two columns; the group label, where one exists, spans the row.
   Mobile is untouched - the wrappers keep their old behaviour below 781px. */
@media(min-width:781px){
  #cat-resurfacing .gal-pair,#cat-filler .gal-pair,#cat-filler-lips .gal-pair,#cat-undereye .gal-pair,
  #cat-lesion .gal-pair,#cat-skinquality .gal-pair,
  #cat-resurfacing .gal-pair-imgs,#cat-filler .gal-pair-imgs,#cat-filler-lips .gal-pair-imgs,
  #cat-undereye .gal-pair-imgs,#cat-lesion .gal-pair-imgs,#cat-skinquality .gal-pair-imgs{
    display:contents!important;}
  #cat-resurfacing .gal-pair-lab,#cat-filler .gal-pair-lab,#cat-filler-lips .gal-pair-lab,
  #cat-undereye .gal-pair-lab,#cat-lesion .gal-pair-lab,#cat-skinquality .gal-pair-lab{
    grid-column:1/-1;}
}
#cat-lesion .gal-pair,#cat-resurfacing .gal-pair{grid-column:1/-1;}
#cat-resurfacing .r36-plate>img:first-of-type,.r1-sheet .r36-plate>img:first-of-type{transform:none!important;}
.r1-sheet .r35-plate{width:auto!important;height:min(calc(100vh - 260px),700px);max-width:none!important;aspect-ratio:1/1;}
/* 2026-07-30 (Piotr: "na case 7 przybliz policzek - pacjent ma nie byc rozpoznawalny"). Both
   frames are replaced by cheek crops cut from the ORIGINALS (before x30-85% y50-80%, after
   x28-83% y48-78%, downscaled to 1000px wide): the treated cheek fills the frame and the eyes
   are outside it, so the patient is not identifiable. Uniform scale only, no retouch, no colour
   change; the full-face web copies stay in assets in case Piotr wants a different window. */
.r1-sheet .r36-plate{width:auto!important;height:min(calc(100vh - 260px),620px);max-width:none!important;aspect-ratio:1.376/1;}
#cat-filler-lips .r33-plate{--r1bx:0%;--r1by:0%;}
#cat-filler-lips .r32-plate{--r1bx:0%;--r1by:0%;}
#cat-filler-lips .r32-fig{width:min(400px,100%)!important;max-width:400px!important;}
#cat-filler-lips .r31-plate{--r1bx:0%;--r1by:0%;}
#cat-filler-lips .r30-plate{--r1bx:0%;--r1by:0%;}
#cat-filler-lips .r29-plate{--r1bx:0%;--r1by:0%;}


/* 2026-07-30 (Piotr: "tak samo case 35 i 36 - ale to bedzie trzymane jako jeden case z dwoma
   porownaniami - to ten sam pacjent"). One card, two comparisons on the 1-2 buttons, both on a
   CONSTANT 0.75:1 plate. Comparison 1 is the single-file composite ga1-web (1200x790, halves
   0.759) shown at exactly half its ratio; comparison 2 is the gd2/gd1 pair (0.739/0.735),
   cover-fitted and bottom-anchored. Captions verbatim from the two items. */
#cat-skinquality .r1-edge{position:absolute;z-index:3;top:0;bottom:0;left:var(--w,100%);width:1px;background:rgba(192,154,99,.92);pointer-events:none;}
#cat-skinquality .r1-grip{position:absolute;z-index:4;left:var(--w,100%);top:55%;width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid rgba(192,154,99,.95);border-radius:50%;background:rgba(14,19,25,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:0;cursor:ew-resize;-webkit-tap-highlight-color:transparent;}
#cat-skinquality .r1-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;}
#cat-skinquality .r1-grip svg{width:15px;height:9px;fill:none;stroke:rgba(233,222,203,.95);stroke-width:1.4;}
#cat-skinquality .r1-plate.r1-anim .r1-clip{transition:clip-path 5.5s cubic-bezier(.4,0,.25,1);}
#cat-skinquality .r1-plate.r1-anim .r1-edge,#cat-skinquality .r1-plate.r1-anim .r1-grip{transition:left 5.5s cubic-bezier(.4,0,.25,1);}
@media(prefers-reduced-motion:reduce){
#cat-skinquality .r1-plate.r1-anim .r1-clip,#cat-skinquality .r1-plate.r1-anim .r1-edge,#cat-skinquality .r1-plate.r1-anim .r1-grip{transition:none;}
}
#cat-skinquality .r1-cl{position:absolute;z-index:5;top:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,222,203,.85);background:rgba(12,16,22,.55);padding:3px 7px;border-radius:2px;pointer-events:none;}
#cat-skinquality .r1-cl--b{left:8px;}
#cat-skinquality .r1-cl--a{right:8px;}
#cat-skinquality .r1-fig{width:min(480px,100%)!important;max-width:480px!important;margin:0 auto;padding:12px 14px 20px;background:#F7F3EA;
  border:1px solid rgba(20,22,30,.10);border-radius:10px;
  box-shadow:0 1px 2px rgba(12,16,22,.05),0 10px 24px rgba(12,16,22,.05);}
#cat-skinquality .r1-plate{width:100%;border-radius:6px;--r1bx:1.1%;--r1by:1.4%;}
#cat-skinquality .r1-views{grid-row:4;grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:10px 0 0;}
#cat-skinquality .r1-fixedcap figcaption{min-height:52px;}
#cat-skinquality .r1-views button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;color:var(--gold-ink,#755C40);
  background:transparent;border:1px solid rgba(117,92,64,.35);border-radius:50%;cursor:pointer;padding:0;}
#cat-skinquality .r1-views button::after{content:"";position:absolute;width:44px;height:44px;}
#cat-skinquality .r1-views button{position:relative;}
#cat-skinquality .r1-views button[aria-pressed="true"]{background:#0E1319;border-color:#0E1319;color:#E9DECB;}
#cat-skinquality .r1-views button:focus-visible{outline:2px solid var(--gold-ink,#755C40);outline-offset:2px;}
#cat-skinquality .r1-fig figcaption{font-family:var(--font-serif);font-weight:300;font-size:14.5px;
  line-height:1.22;color:var(--ink,#12151D);padding:0;margin:0;text-wrap:pretty;}
#cat-skinquality .r1-fig figcaption .gal-num-cap{display:block;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink,#755C40);margin:0 0 6px;}
#cat-skinquality .r1-ctl{display:flex;align-items:center;padding:8px 0 0;float:left;}
#cat-skinquality .r1-fig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;}
#cat-skinquality .r1-plate{grid-column:1/-1;}
#cat-skinquality .r1-ctl{grid-row:2;grid-column:1;float:none;margin:8px 0 0;padding:0;}
#cat-skinquality .r1-fig figcaption{grid-row:2;grid-column:2;margin:8px 0 0;}
#cat-skinquality .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;
  min-height:24px;margin:6px 0 0;padding:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink,#755C40);background:transparent;border:0;cursor:pointer;}
#cat-skinquality .r1-more span{border-bottom:1px solid rgba(117,92,64,.5);padding-bottom:2px;}
#cat-skinquality .r1-pp{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:var(--gold-ink,#755C40);}
#cat-skinquality .r1-pp svg{width:11px;height:12px;fill:currentColor;}
#cat-skinquality .r1-range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
#cat-skinquality .r1-plate{width:100%;border-radius:6px;grid-column:1/-1;}
#cat-skinquality .r1-ctl{grid-row:2;grid-column:1;}
#cat-skinquality .r1-fig figcaption{grid-row:2;grid-column:2;}
#cat-skinquality .r1-fig figcaption .gal-num-cap{display:block;}
#cat-skinquality .r1-more{grid-row:3;grid-column:1/-1;justify-self:end;}
#cat-skinquality .r34-plate{--r1bx:0%;--r1by:0%;}
#cat-skinquality .r1-views{grid-row:4;grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:10px 0 0;}
#cat-skinquality .r1-views button{position:relative;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;color:var(--gold-ink,#755C40);background:transparent;border:1px solid rgba(117,92,64,.35);border-radius:50%;cursor:pointer;padding:0;}
#cat-skinquality .r1-views button[aria-pressed="true"]{background:#0E1319;border-color:#0E1319;color:#E9DECB;}
#cat-skinquality .r1-fixedcap figcaption{min-height:62px;}


/* 2026-07-30 (Piotr): TREATMENTS is the single primary route entry - modestly stronger than ordinary nav links, never a CTA. */
#navLinks a.nav-treatments{font-weight:inherit;color:#C4CEDA;padding:5px 0;border-bottom:0;text-decoration:none;}
#navLinks a.nav-treatments:hover,#navLinks a.nav-treatments:focus-visible{color:#FBF9F4;}


/* ===== Primary-nav hover + focus (2026-07-31, Piotr): ONE shared language for
   every item, derived from the visible TREATMENTS hover (colour lift to #FBF9F4)
   and made unmistakable with a gold hairline that wipes in beneath the label.
   The underline is an absolutely-positioned ::after, so nothing shifts. Rest
   state stays neutral for all text items — no sticky gold, no underline at rest.
   APPOINTMENTS keeps its bordered form and gets an equivalent lift. Desktop
   only; reduced-motion drops the transitions. No looping motion. ===== */
@media (min-width:861px){
  #navLinks a{position:relative;transition:color .18s ease;}
  #navLinks a:not(.nav-book)::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold,#C09A63);opacity:0;transform:scaleX(.55);transform-origin:left center;transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1);pointer-events:none;}
  #navLinks a:not(.nav-book):hover,#navLinks a:not(.nav-book):focus-visible{color:#FBF9F4;}
  #navLinks a:not(.nav-book):hover::after,#navLinks a:not(.nav-book):focus-visible::after{opacity:.9;transform:scaleX(1);}
  #navLinks a:focus-visible{outline:2px solid var(--gold-soft,#C9B79A);outline-offset:4px;}
  #navLinks a.nav-book{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;}
  #navLinks a.nav-book:hover,#navLinks a.nav-book:focus-visible{background:rgba(201,183,154,.14);border-color:var(--gold-soft,#C9B79A);color:#FBF9F4;transform:translateY(-1px);}
  #navLinks a.nav-book:active{transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){
    #navLinks a,#navLinks a::after,#navLinks a.nav-book{transition:none!important;}
    #navLinks a.nav-book:hover,#navLinks a.nav-book:focus-visible{transform:none!important;}
  }
}