/* Product-first clarity and the private, guided Marylebone Skin Edit. */
:root { --skin-ivory:#fbf9f4; --skin-limestone:#f1ece4; --skin-burgundy:#593b42; --skin-brass:#9c7966; }
[hidden] { display:none !important; }
.hero-skin-edit-link { display:inline-flex; align-items:center; gap:13px; margin-top:15px; border-bottom:1px solid #a47b78; padding-bottom:7px; color:#5e3d45; font:600 9px/1.6 'DM Sans',sans-serif; letter-spacing:.11em; }
.hero-skin-edit-link:hover { color:#8c5962; }
.treatment-quick-facts { list-style:none; padding:12px 0 0; margin:10px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; border-top:1px solid #c8b9a9; }
.treatment-quick-facts li { padding:0; min-width:0; }
.treatment-quick-facts strong { display:block; color:#774850; font:600 9px/1.5 'DM Sans',sans-serif; letter-spacing:.12em; margin-bottom:7px; }
.treatment-quick-facts span { display:block; color:#444942; font:12px/1.5 'DM Sans',sans-serif; }
.focus-bottle.unbranded-packshot,.renewal-image.unbranded-packshot { position:relative; }
#mineral-reset .focus-bottle.unbranded-packshot img { object-position:67% center; }
#xso-01 .renewal-image.unbranded-packshot img { object-position:69% center; }
.unbranded-packshot figcaption,#xso-01 .renewal-image.unbranded-packshot figcaption { display:block; position:absolute; left:19px; bottom:18px; margin:0; padding:8px 11px; background:rgba(252,249,242,.88); color:#785761; font:600 8px/1.5 'DM Sans',sans-serif; letter-spacing:.12em; max-width:calc(100% - 38px); }
.skin-edit-teaser { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,100px); align-items:center; padding:clamp(60px,7vw,105px) var(--pad); background:#e8dfd5; border-block:1px solid #d4c6bb; }
.skin-edit-teaser h2 { font:500 clamp(46px,5vw,78px)/1.01 var(--serif); letter-spacing:-.028em; margin:16px 0 19px; color:#30332f; }
.skin-edit-teaser h2 em { color:#784c54; }
.skin-edit-teaser>div:first-child>p:not(.eyebrow):not(.skin-edit-assurance) { font:15px/1.72 'DM Sans',sans-serif; color:#555850; max-width:580px; margin-bottom:17px; }
.skin-edit-assurance { color:#784c54; font:600 10px/1.6 'DM Sans',sans-serif; letter-spacing:.12em; margin:0 0 25px; }
.skin-edit-teaser-details { display:grid; grid-template-columns:1fr; gap:7px; padding:34px clamp(26px,4vw,55px); background:#f9f7f1; border:1px solid #d7c9bc; }
.skin-edit-teaser-details span { font:600 10px/1.6 'DM Sans',sans-serif; color:#8a5960; letter-spacing:.14em; border-top:1px solid #d7c9bc; padding-top:16px; }
.skin-edit-teaser-details span:first-child { border:0; padding-top:0; }
.skin-edit-teaser-details strong { font:500 26px/1.17 var(--serif); margin:0 0 12px; color:#373833; }
.new-detail-packshot { position:relative; background:#e9e1d6; }
.detail-hero .new-detail-packshot img { object-position:68% center; }
.new-detail-packshot figcaption { position:absolute; bottom:16px; left:16px; max-width:calc(100% - 32px); font:600 8px/1.5 'DM Sans',sans-serif; letter-spacing:.1em; color:#6c5055; background:rgba(250,247,240,.91); padding:7px 11px; }
.product-at-glance { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; border-top:1px solid #c8b9a9; border-bottom:1px solid #c8b9a9; padding:16px 0; margin-top:20px; }
.product-at-glance span { display:block; color:#865862; font:600 9px/1.4 'DM Sans',sans-serif; letter-spacing:.14em; margin-bottom:5px; }
.product-at-glance strong { display:block; font:500 13px/1.5 'DM Sans',sans-serif; color:#3f423c; }
.product-practical { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(40px,6vw,105px); padding:82px var(--pad); background:#eee6dc; }
.practical-heading h2 { font:500 clamp(46px,4.6vw,74px)/1.04 var(--serif); margin:18px 0; }
.practical-heading h2 em { color:#794a54; }
.practical-heading>p:last-child { max-width:440px; font:14px/1.75 'DM Sans',sans-serif; color:#5a5c55; }
.practical-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.practical-grid article { border-top:2px solid #77505a; background:#fdfbf7; padding:25px 25px 29px; }
.practical-grid span { font:600 9px/1.5 'DM Sans',sans-serif; color:#8c5560; letter-spacing:.16em; }
.practical-grid h3 { font:500 31px/1.07 var(--serif); margin:13px 0 14px; color:#31332e; }
.practical-grid p { font:13px/1.7 'DM Sans',sans-serif; color:#575d55; margin:0; }
.product-confidence { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#d1c5b8; border-block:1px solid #d1c5b8; }
.product-confidence>div { padding:31px 25px; background:#f6f1e9; }
.product-confidence strong { display:block; font:500 32px/1.1 var(--serif); color:#644047; margin-bottom:10px; }
.product-confidence span { color:#585e55; font:12px/1.55 'DM Sans',sans-serif; }
.xso-ingredient-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.xso-detail-page .detail-hero-copy h1 { font-size:clamp(51px,5.6vw,84px); }
.xso-detail-page .detail-hero { background:#f1e9df; }
.xso-detail-page .detail-hero .detail-hero-copy { padding-block:60px; }
.xso-detail-page .detail-formulation .detail-small { max-width:1150px; }

/* Consultation page */
.skin-edit-page { background:#fbfaf6; color:#30332f; }
.skin-edit-page .header { z-index:20; }
.consultation-intro { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); background:#f0e8dc; min-height:410px; }
.consultation-intro>div:first-child { padding:75px var(--pad) 60px; }
.consultation-intro h1 { font:500 clamp(60px,6vw,100px)/.94 var(--serif); letter-spacing:-.045em; margin:16px 0 23px; }
.consultation-intro h1 em { color:#78454e; }
.consultation-intro>div:first-child>p:not(.eyebrow) { max-width:615px; font:15px/1.76 'DM Sans',sans-serif; color:#515951; }
.consultation-trust { display:flex; flex-wrap:wrap; gap:20px; margin-top:31px; }
.consultation-trust span { font:600 9px/1.5 'DM Sans',sans-serif; letter-spacing:.14em; color:#795057; border-top:1px solid #beaea3; padding-top:11px; }
.consultation-intro-visual { position:relative; overflow:hidden; background:radial-gradient(circle at 60% 35%,#a5787a 0%,#70464e 44%,#50343a 100%); display:flex; align-items:center; justify-content:center; min-height:400px; }
.consultation-intro-visual::after { content:""; position:absolute; inset:20px; border:1px solid #ebd7c96e; }
.consultation-intro-visual>span { font:italic clamp(170px,18vw,330px)/1 var(--serif); letter-spacing:-.12em; color:#e9d7c7; }
.consultation-intro-visual p { position:absolute; bottom:49px; right:38px; color:#f4e7d7; text-align:right; font:600 10px/1.8 'DM Sans',sans-serif; letter-spacing:.18em; }
.consultation-layout { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); gap:50px; padding:72px var(--pad) 85px; }
.consultation-form { padding:0; margin:0; }
.consultation-step { border:0; border-top:1px solid #cfc2b7; padding:22px 0 30px; margin:0; min-width:0; }
.consultation-step legend { display:block; width:100%; float:left; font:500 36px/1.12 var(--serif); color:#30342e; margin:0 0 14px; }
.consultation-step legend span { display:block; color:#8a505a; font:600 10px/1.5 'DM Sans',sans-serif; letter-spacing:.15em; margin:0 0 11px; }
.consultation-step>p { clear:both; font:13px/1.6 'DM Sans',sans-serif; color:#5b625a; margin:0 0 20px; }
.skin-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.skin-choice-grid label,.skin-radio-row label { display:block; position:relative; cursor:pointer; }
.skin-choice-grid input,.skin-radio-row input { position:absolute; opacity:0; width:1px; height:1px; }
.skin-choice-grid label span,.skin-radio-row label span { display:flex; align-items:center; min-height:63px; padding:15px 18px; border:1px solid #cbbeb1; color:#3b423b; background:#fffefa; font:500 13px/1.35 'DM Sans',sans-serif; transition:border .2s ease,background .2s ease; }
.skin-choice-grid input:checked+span,.skin-radio-row input:checked+span { background:#604149; color:#fffdf9; border-color:#604149; }
.skin-choice-grid input:focus-visible+span,.skin-radio-row input:focus-visible+span { outline:3px solid #b38d79; outline-offset:2px; }
.skin-choice-grid label span:hover,.skin-radio-row label span:hover { border-color:#92646b; }
.consultation-note { color:#76515b !important; margin:13px 0 0 !important; font-size:12px !important; }
.skin-radio-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.skin-radio-row label span { justify-content:center; text-align:center; min-height:53px; }
.consultation-postcode label { display:block; font:600 10px/1.3 'DM Sans',sans-serif; color:#5b4b49; margin:0 0 8px; letter-spacing:.08em; }
.consultation-postcode>div { display:flex; max-width:600px; }
.consultation-postcode input { flex:1; min-width:0; border:1px solid #c5b5a5; min-height:54px; padding:0 15px; background:#fff; font:14px 'DM Sans',sans-serif; }
.consultation-postcode button { min-width:130px; padding:0 15px; background:#e6dbce; color:#604047; border:1px solid #b6a596; border-left:0; font:600 10px/1.4 'DM Sans',sans-serif; letter-spacing:.08em; cursor:pointer; }
.consultation-postcode button:hover { background:#d8c8b9; }
.consultation-postcode button:disabled { opacity:.55; cursor:wait; }
#skin-water-status { margin:12px 0 0; color:#5c6057; font:12px/1.6 'DM Sans',sans-serif; }
.consultation-submit { min-height:59px; padding-inline:32px; }
.consultation-disclaimer { color:#646962; font:11px/1.65 'DM Sans',sans-serif; margin-top:18px; }
.consultation-side { min-width:0; }
.photo-beta { padding:35px 35px 37px; background:#eee8df; border:1px solid #d8c9bc; }
.photo-beta-icon { height:145px; display:flex; align-items:center; justify-content:center; border:1px dashed #baa49b; background:#f6f0e8; color:#906873; margin:28px 0; }
.photo-beta-icon span { display:flex; align-items:center; justify-content:center; border-radius:50%; width:60px; height:60px; border:1px solid #bda69b; font:44px/1 var(--serif); }
.photo-beta h2 { font:500 clamp(40px,4.2vw,61px)/1.03 var(--serif); margin:0 0 22px; }
.photo-beta h2 em { color:#82505b; }
.photo-beta>p:not(.eyebrow) { color:#555b54; font:13px/1.7 'DM Sans',sans-serif; }
.consultation-side-note { padding:30px 8px 0; }
.consultation-side-note span { color:#80535c; font:600 10px 'DM Sans',sans-serif; letter-spacing:.17em; }
.consultation-side-note p { border-top:1px solid #c6b7ab; padding-top:19px; font:23px/1.24 var(--serif); color:#5a4547; }
.skin-edit-result { padding:75px var(--pad) 80px; scroll-margin-top:70px; background:#e8dfd4; }
.skin-edit-result h2 { font:500 clamp(46px,5vw,77px)/1.02 var(--serif); margin:15px 0 40px; }
.skin-edit-result h2 em { color:#7d4a53; }
.result-product-layout { display:grid; grid-template-columns:.9fr 1.1fr; background:#fdfaf5; border:1px solid #cfbeaf; min-height:430px; }
.result-product-layout.no-match-result { display:block; min-height:0; }
.result-product-layout.no-match-result>div { max-width:790px; }
.result-product-layout figure { min-width:0; margin:0; background:#eadfd2; }
.result-product-layout img { display:block; width:100%; height:100%; max-height:580px; min-height:430px; object-fit:cover; object-position:69% center; }
.result-product-layout>div { padding:45px clamp(30px,5vw,70px); }
.match-label { color:#88525d; font:600 10px/1.4 'DM Sans',sans-serif; letter-spacing:.18em; }
.result-product-layout h3 { font:500 clamp(38px,4.2vw,66px)/1.06 var(--serif); margin:18px 0 25px; }
.result-product-layout>div>p:not(.match-label) { font:14px/1.75 'DM Sans',sans-serif; color:#565b53; }
.result-product-layout ul { margin:15px 0 26px; padding-left:18px; }
.result-product-layout li { font:13px/1.85 'DM Sans',sans-serif; color:#414943; }
.consultation-restart { display:block; background:none; border:0; border-bottom:1px solid #8e6b65; margin-top:22px; padding:5px 0; color:#70464f; font:600 10px/1.4 'DM Sans',sans-serif; letter-spacing:.12em; cursor:pointer; }
.consultation-bottom { padding:80px var(--pad); background:#faf8f4; }
.consultation-bottom h2 { font:500 clamp(47px,5vw,76px)/1.02 var(--serif); margin:15px 0 34px; }
.consultation-bottom h2 em { color:#784b54; }
.consultation-two-cards { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.consultation-two-cards>a { padding:32px; background:#f0e9df; border-top:2px solid #8b5b64; color:#333932; }
.consultation-two-cards>a>span { display:block; color:#824e57; font:600 10px/1.5 'DM Sans',sans-serif; letter-spacing:.14em; }
.consultation-two-cards strong { display:block; font:500 36px/1.12 var(--serif); margin:14px 0; }
.consultation-two-cards p { color:#555b53; font:13px/1.7 'DM Sans',sans-serif; }
.consultation-two-cards>a:hover { background:#e5d9cc; }

@media(max-width:1050px) {
  .treatment-quick-facts { grid-template-columns:1fr; gap:8px; }
  .treatment-quick-facts li { display:grid; grid-template-columns:112px 1fr; gap:12px; }
  .product-practical { grid-template-columns:1fr; gap:28px; }
  .consultation-layout { grid-template-columns:1fr; }
  .consultation-side { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
}
@media(max-width:800px) {
  .skin-edit-teaser { grid-template-columns:1fr; }
  .product-confidence { grid-template-columns:1fr 1fr; }
  .xso-ingredient-grid { grid-template-columns:1fr 1fr; }
  .consultation-intro { grid-template-columns:1fr; }
  .consultation-intro-visual { min-height:230px; }
  .consultation-intro-visual>span { font-size:190px; }
}
@media(max-width:700px) {
  .detail-header { height:auto; min-height:70px; padding:12px 21px 0; display:flex; flex-direction:column; align-items:stretch; gap:8px; }
  .detail-header .wordmark { font-size:16px; line-height:1.2; }
  .detail-header nav { display:flex; align-items:center; gap:19px; overflow-x:auto; white-space:nowrap; padding:1px 0 12px; scrollbar-width:thin; }
  .detail-header nav a { flex-shrink:0; font-size:9px; padding:0; }
  .detail-header nav a:last-child { border:0; padding:0; }
  .detail-header nav a[aria-current="page"] { color:#78444d; text-decoration:underline; text-underline-offset:5px; }
  .hero-skin-edit-link { font-size:8px; line-height:1.5; }
  .treatment-quick-facts { margin-top:9px; }
  .treatment-quick-facts li { grid-template-columns:95px 1fr; }
  .treatment-quick-facts strong { font-size:8px; }
  .treatment-quick-facts span { font-size:11px; }
  .unbranded-packshot figcaption,#xso-01 .renewal-image.unbranded-packshot figcaption { bottom:10px; left:10px; font-size:7px; padding:6px 8px; }
  #mineral-reset .focus-bottle.unbranded-packshot img { object-position:67% center; }
  #xso-01 .renewal-image.unbranded-packshot img { object-position:68% center; }
  .skin-edit-teaser { padding:55px 23px; gap:27px; }
  .skin-edit-teaser h2 { font-size:48px; }
  .skin-edit-teaser-details { padding:27px 24px; }
  .skin-edit-teaser-details strong { font-size:23px; }
  .product-at-glance { gap:7px; }
  .product-at-glance span { font-size:8px; }
  .product-at-glance strong { font-size:11px; }
  .product-practical { padding:55px 23px; }
  .practical-heading h2 { font-size:47px; }
  .practical-grid { grid-template-columns:1fr; }
  .practical-grid article { padding:23px; }
  .product-confidence>div { padding:22px; }
  .product-confidence strong { font-size:25px; }
  .product-confidence span { font-size:11px; }
  .xso-ingredient-grid { grid-template-columns:1fr; }
  .new-detail-packshot figcaption { font-size:7px; bottom:8px; left:8px; }
  .xso-detail-page .detail-hero-copy h1 { font-size:clamp(47px,12vw,65px); }
  .consultation-intro>div:first-child { padding:42px 23px; }
  .consultation-intro h1 { font-size:clamp(52px,13vw,72px); }
  .consultation-intro>div:first-child>p:not(.eyebrow) { font-size:13px; }
  .consultation-trust { gap:10px 16px; }
  .consultation-trust span { font-size:8px; }
  .consultation-intro-visual { min-height:170px; }
  .consultation-intro-visual>span { font-size:145px; }
  .consultation-intro-visual p { font-size:8px; bottom:22px; right:22px; }
  .consultation-layout { padding:47px 23px; gap:22px; }
  .consultation-step legend { font-size:31px; }
  .skin-choice-grid { grid-template-columns:1fr; gap:8px; }
  .skin-choice-grid label span { min-height:51px; padding:11px 14px; }
  .skin-radio-row { gap:7px; }
  .skin-radio-row label span { min-height:49px; padding:9px; font-size:12px; }
  .consultation-postcode>div { display:grid; grid-template-columns:1fr; }
  .consultation-postcode button { min-height:49px; border:1px solid #b6a596; border-top:0; }
  .consultation-submit { width:100%; font-size:10px; }
  .consultation-side { grid-template-columns:1fr; }
  .photo-beta { padding:26px; }
  .photo-beta-icon { height:115px; margin:20px 0; }
  .photo-beta h2 { font-size:46px; }
  .skin-edit-result { padding:55px 23px; }
  .skin-edit-result h2 { font-size:47px; }
  .result-product-layout { grid-template-columns:1fr; }
  .result-product-layout img { min-height:0; height:320px; }
  .result-product-layout>div { padding:28px 24px 33px; }
  .result-product-layout h3 { font-size:42px; }
  .consultation-bottom { padding:55px 23px; }
  .consultation-bottom h2 { font-size:47px; }
  .consultation-two-cards { grid-template-columns:1fr; }
  .consultation-two-cards>a { padding:25px; }
}
@media(prefers-reduced-motion:reduce) {
  .skin-choice-grid label span,.skin-radio-row label span { transition:none; }
}
