.wash-cost-badge {display:block;margin:.75rem 0 0;padding:.4rem .6rem;border-radius:6px;background:#e3f4ec;color:#15553b;font-weight:800;font-size:1rem;white-space:nowrap}
.cost-basis strong {font-size:1.3rem;color:#15553b;white-space:nowrap}
.researched-price>small,.researched-price>a {display:block;margin-top:.5rem}
.researched-price>b {font-size:1.15rem;white-space:nowrap}
.survey-shop-link {font-size:.875rem;text-underline-offset:3px}
.price-survey-note {font-size:.875rem;line-height:1.8;color:#455d70}
.cost-summary {width:100%;border-collapse:collapse;margin:1rem 0;background:white;table-layout:fixed}
.cost-summary th,.cost-summary td {padding:.8rem;border:1px solid #cce3d9;text-align:left;vertical-align:middle;overflow-wrap:anywhere}
.cost-summary th:first-child {width:58%}
.cost-summary thead {background:#e3f4ec}
.cost-summary strong {font-size:1.2rem;color:#15553b;white-space:nowrap}
.cost-summary small {display:block;margin-top:.3rem;font-size:.8rem;font-weight:400;color:#455d70}
@media(max-width:480px){.cost-summary th,.cost-summary td{padding:.6rem .45rem}.cost-summary th:first-child{width:55%}.cost-summary strong{font-size:1.05rem}}

.survey-buy-button {display:block;box-sizing:border-box;width:100%;margin-top:.75rem;padding:.7rem .6rem;border-radius:8px;background:#245e82;color:#fff!important;text-align:center;text-decoration:none;font-size:.875rem;font-weight:700;line-height:1.5;min-height:44px;overflow-wrap:anywhere}
.survey-buy-button:hover {background:#194862}
.survey-buy-button:focus-visible {outline:3px solid #de9c26;outline-offset:3px}

.cost-other-shops {display:grid;gap:.4rem;margin-top:.8rem}
.cost-other-shops>span {font-size:.75rem;font-weight:400;color:#455d70}
.cost-shop-button {display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:.5rem .3rem;border:1px solid #245e82;border-radius:7px;background:#fff;color:#245e82!important;text-decoration:none;font-size:.875rem;font-weight:700;text-align:center;line-height:1.4}
.cost-shop-button:hover {background:#edf5fa}
.cost-shop-button:focus-visible {outline:3px solid #de9c26;outline-offset:3px}

.table-wrap table.cost-summary {min-width:0;font-size:.875rem}
.table-wrap .cost-summary th {white-space:normal}
.cost-shop-links {display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.cost-shop-links .cost-shop-button {flex:1 1 4rem;font-size:.8125rem;padding:.4rem .3rem;min-height:44px}
.cost-price-sources {margin-top:.75rem;font-size:.875rem}
.cost-price-sources summary {cursor:pointer;color:#245e82}

/* Keep the cost overview readable without horizontal scrolling on phones. */
@media(max-width:600px){
  #cost .cost-summary {display:block;width:100%;min-width:0!important;border:0;background:transparent}
  #cost .cost-summary thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #cost .cost-summary tbody {display:grid;gap:1rem;width:100%;min-width:0}
  #cost .cost-summary tbody tr {display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;width:auto;min-width:0;padding:1rem;border:1px solid #cce3d9;border-radius:10px;background:#fff}
  #cost .cost-summary tbody th {display:contents;white-space:normal}
  #cost .cost-summary tbody th>a {grid-row:1;font-size:1rem}
  #cost .cost-summary tbody th>small {grid-row:2;margin:0}
  #cost .cost-summary tbody td {grid-row:3;display:block;width:auto;min-width:0;padding:.6rem 0;border:0;background:transparent}
  #cost .cost-summary tbody td::before {content:'1回の洗剤代';display:block;margin-bottom:.25rem;font-size:.8rem;color:#455d70}
  #cost .cost-summary tbody td strong {font-size:1.4rem}
  #cost .cost-shop-links {grid-row:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:.25rem}
  #cost .cost-shop-button {min-width:0}
}