.feature-card { --treatment-image:url("https://www.dermalogica.co.uk/cdn/shop/files/services-clean-touch.webp?v=1660835880&width=1200"); }
.core-card:nth-of-type(2) { --treatment-image:url("https://www.dermalogica.co.uk/cdn/shop/files/treatment-23-page-Hero.jpg?v=1679399005&width=1200"); }
.core-card:nth-of-type(3) { --treatment-image:url("https://www.dermalogica.co.uk/cdn/shop/files/treatment-23-Pro-Skin-60.jpg?v=1679399025&width=1200"); }
.advanced-card:nth-child(2) { --treatment-image:url("https://www.dermalogica.co.uk/cdn/shop/files/services-clean-touch.webp?v=1660835880&width=1200"); }

.product-shot-moisturiser { --source-height:68%; --source-bottom:-2%; }

.detail-modal { width:min(620px,calc(100% - 2rem)); max-height:min(80vh,700px); }
.detail-panel { max-height:min(80vh,700px); padding:2.5rem; }
.detail-layout { display:block; min-height:0; }
.detail-copy { padding-right:0; max-width:100%; }
.detail-product-image { display:none !important; }
.detail-trigger { width:100%; }
h1, h2 { letter-spacing: -.018em; }
h1 { line-height: .88; }

@media (max-width:720px) {
  .detail-layout { display:grid; min-height:0; }
  .detail-copy { padding-right:0; }
  .detail-product-image { position:relative; inset:auto; width:100%; min-height:320px; margin-top:1.5rem; border-top:0; }
  .detail-product-image img { width:112%; max-height:380px; opacity:.62; }
}