/* Total Skin: a readable directory with explicit device and care links. */
.clinic-renewal .total-skin-catalog { color: #392f22; }
.clinic-renewal .total-skin-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid #d9cdbb; margin: 10px 0 4px; }
.clinic-renewal .total-skin-tabs a { display: flex; align-items: center; justify-content: center; min-height: 62px; padding: 15px 12px; color: #57452c; font-size: 15px; font-weight: 500; text-align: center; text-decoration: none; }
.clinic-renewal .total-skin-tabs a + a { border-left: 1px solid #e4d9c8; }
.clinic-renewal .total-skin-tabs a:hover { background: #f1eadf; color: #493311; }
.clinic-renewal .total-skin-section { padding: 42px 0; border-bottom: 1px solid #ded2bf; scroll-margin-top: 106px; }
.clinic-renewal .total-skin-heading { margin-bottom: 24px; }
.clinic-renewal .total-skin-heading > small { display: block; color: #8a6936; font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: .13em; }
.clinic-renewal .total-skin-heading h2 { margin: 10px 0 10px; color: #392f22; font-size: clamp(24px,2.7vw,32px); font-weight: 500; line-height: 1.4; letter-spacing: -.035em; }
.clinic-renewal .total-skin-heading p { margin: 0; color: #74644e; font-size: 14px; line-height: 1.8; }
.clinic-renewal .total-skin-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.clinic-renewal .total-skin-item { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; column-gap: 12px; row-gap: 8px; min-height: 110px; padding: 21px 22px; border: 1px solid #dacdb8; border-radius: 3px; background: #fffdf8; color: #392f22; text-decoration: none; transition: border-color .16s,background-color .16s; }
.clinic-renewal .total-skin-item > small { color: #9a7945; font: 12px/1.5 var(--sans,sans-serif); font-variant-numeric: tabular-nums; }
.clinic-renewal .total-skin-item > strong { font-size: 18px; font-weight: 550; line-height: 1.5; letter-spacing: -.025em; overflow-wrap: anywhere; }
.clinic-renewal .total-skin-item > span { grid-column: 2; color: #7a6646; font-size: 12px; line-height: 1.5; }
.clinic-renewal .total-skin-item:hover { border-color: #a08352; background: #f3ecdf; }
.clinic-renewal .total-skin-care-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.clinic-renewal .total-skin-care-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 27px; border: 1px solid #d9cbb4; border-top: 2px solid #b28f56; border-radius: 3px; background: #fffdf8; scroll-margin-top: 110px; }
.clinic-renewal .total-skin-care-card > small { color: #8b6b3b; font-size: 10px; line-height: 1.7; letter-spacing: .08em; }
.clinic-renewal .total-skin-care-card h3 { margin: 13px 0 12px; color: #392f22; font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: -.035em; }
.clinic-renewal .total-skin-care-card p { margin: 0 0 12px; color: #74644e; font-size: 14px; line-height: 1.7; }
.clinic-renewal .total-skin-care-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding: 8px 0; color: #71552b; font-size: 13px; line-height: 1.7; text-decoration: underline; text-underline-offset: 5px; }
.clinic-renewal .total-skin-catalog a:focus-visible { outline: 2px solid #8a6a39; outline-offset: 4px; }
@media(max-width:900px) { .clinic-renewal .total-skin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) {
 .clinic-renewal .total-skin-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .clinic-renewal .total-skin-tabs a { min-height: 54px; padding: 12px 8px; font-size: 14px; }
 .clinic-renewal .total-skin-tabs a:nth-child(3) { border-left: 0; }
 .clinic-renewal .total-skin-tabs a:nth-child(n+3) { border-top: 1px solid #e4d9c8; }
 .clinic-renewal .total-skin-section { padding: 30px 0; scroll-margin-top: 90px; }
 .clinic-renewal .total-skin-heading { margin-bottom: 18px; }
 .clinic-renewal .total-skin-grid,.clinic-renewal .total-skin-care-grid { grid-template-columns: 1fr; gap: 10px; }
 .clinic-renewal .total-skin-item { min-height: 91px; padding: 17px 19px; row-gap: 4px; }
 .clinic-renewal .total-skin-item > strong { font-size: 17px; }
 .clinic-renewal .total-skin-care-card { padding: 22px; }
 .clinic-renewal .total-skin-care-card h3 { font-size: 21px; }
}
@media(prefers-reduced-motion:reduce) { .clinic-renewal .total-skin-item { transition: none; } }