/* Price-page overrides only; reuse the shared datsumou tokens (datsumou.css :root). */
.hair-price-tables { gap: 32px; }

/* Gender colors: women = the shared rose token deepened for white text (AA); men = blue between the shared men token and navy. */
#price-tab-women, #price-panel-women { --price-code-color: #985650; }
#price-tab-men, #price-panel-men { --price-code-color: #2a6496; }

/* Tabs follow the original gender tabs of /datsumou/ (.datsumou-tablist / .datsumou-tab). */
.price-tabs {
  max-width: 640px; padding: 8px; border: 1px solid var(--datsumou-line); border-radius: 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  background: #fff;
}
.price-tabs[hidden], .price-panel[hidden] { display: none; }
/* /datsumou/ sets html.price-pending before price.js runs: reserve the tab row and show only the panel price.js will open,
   so the layout does not jump after the 料金を見る jump. Without JS the class is never set and both tables stay visible. */
html.price-pending .price-tabs[hidden] { display: grid; visibility: hidden; }
html.price-pending:not(.price-pending-men) #price-panel-men,
html.price-pending.price-pending-men #price-panel-women { display: none; }
.price-tabs button {
  min-height: 56px; padding: 10px 16px; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: transparent; color: var(--datsumou-muted); cursor: pointer;
  font: 700 20px/1.3 "Yu Mincho", "Hiragino Mincho ProN", serif;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.price-tabs button::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--price-code-color);
}
.price-tabs button:hover { background: var(--datsumou-blue-soft); color: var(--datsumou-navy); }
.price-tabs button[aria-selected="true"] {
  background: var(--datsumou-navy); color: #fff;
}
.price-tabs button[aria-selected="true"]::before { box-shadow: 0 0 0 2px #fff; }
.price-tabs button:focus-visible, .price-popular a:focus-visible,
.price-panel .datsumou-table-wrap:focus-visible {
  outline: 3px solid var(--datsumou-navy); outline-offset: 3px;
}

.price-panel .datsumou-menu-code { background: var(--price-code-color); color: #fff; font-size: 14px; }
.price-panel [id], .price-panel h3 { scroll-margin-top: 120px; }
/* Code badges sit mid-row; leave room for the fixed header above the whole row. */
.price-panel .datsumou-menu-code[id] { scroll-margin-top: 180px; }
.price-panel > p { margin-top: 20px; }
.price-nowrap { white-space: nowrap; }

/* Frequently chosen areas: one white card on the tinted section, four tiles inside. */
.price-popular {
  margin-bottom: 32px; padding: 24px;
  border: 1px solid var(--datsumou-line); border-radius: 12px;
  background: #fff;
}
.price-popular h4 { margin: 0 0 8px; color: var(--datsumou-navy-deep); font-size: 18px; }
.price-popular .price-popular-note { margin: 0 0 20px; color: #52697b; font-size: 15px; line-height: 1.8; word-break: auto-phrase; }
.price-popular ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.price-popular li { min-width: 0; margin: 0; }
.price-popular a {
  min-height: 132px; padding: 16px 16px 18px;
  border: 1px solid var(--datsumou-line); border-radius: 8px;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "code arrow" "name name" "price price";
  align-content: start; row-gap: 10px;
  background: var(--datsumou-blue-soft); color: var(--datsumou-navy-deep) !important; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.price-popular a > .datsumou-menu-code { grid-area: code; justify-self: start; }
.price-popular a > span:not(.datsumou-menu-code) { grid-area: name; font-size: 17px; font-weight: 700; line-height: 1.4; }
.price-popular a > strong {
  grid-area: price; color: var(--datsumou-navy-deep); font-size: 24px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Down arrow with a stem (not a disclosure chevron): the tile moves to the matching row of the table below. */
.price-popular a::after {
  content: ""; grid-area: arrow; justify-self: end; align-self: center;
  width: 14px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 1v15M1.5 10.5 7 16l5.5-5.5' fill='none' stroke='%23124a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.price-popular a:hover { border-color: rgba(18, 74, 120, .45); background: #fff; }
.price-popular-vio-note { display: block; margin-top: 8px; color: #52697b; font-size: 14px; line-height: 1.6; word-break: auto-phrase; }

/* Table: a white rounded card; drop the black cell borders that /css/common.css puts on every table. */
.price-panel .datsumou-table-wrap {
  margin-top: 0; border: 1px solid var(--datsumou-line); border-radius: 12px; background: #fff;
}
.price-panel .datsumou-price-table { min-width: 0; margin: 0; font-size: 16px; }
.price-panel .datsumou-price-table th, .price-panel .datsumou-price-table td { padding: 16px 12px; }
.price-panel .datsumou-price-table tr:has(:target) {
  background: var(--datsumou-gold-soft); outline: 2px solid var(--price-code-color); outline-offset: -2px;
}
.price-panel .datsumou-price-table tr:has(:target) > * { background: transparent; }
@media (min-width: 761px) {
  .price-panel .datsumou-price-table th, .price-panel .datsumou-price-table td {
    border: 0; border-bottom: 1px solid var(--datsumou-line);
  }
  .price-panel .datsumou-price-table thead th { padding-block: 14px; }
  .price-panel .datsumou-price-table th:first-child, .price-panel .datsumou-price-table td:first-child { padding-left: 24px; }
  .price-panel .datsumou-price-table th:last-child, .price-panel .datsumou-price-table td:last-child { padding-right: 24px; }
  .price-panel .datsumou-price-table tbody tr:last-child > * { border-bottom: 0; }
  .price-panel .datsumou-price-table tbody tr.datsumou-category-row th { padding: 12px 24px 10px; }
  /* The section keeps the full container width like the other sections; only the intro paragraph keeps a reading measure. */
  .hair-section[aria-labelledby="price-tables"] .datsumou-container > p { max-width: 46em; }
  .price-tabs { max-width: none; }
  .price-panel .datsumou-price-table thead th:nth-child(1) { width: 88px; }
  .price-panel .datsumou-price-table thead th:nth-child(2) { width: 96px; }
  .price-panel .datsumou-price-table thead th:nth-child(3) { width: auto; }
  .price-panel .datsumou-price-table thead th:nth-child(4) { width: 160px; }
  .price-panel .datsumou-price-table tbody tr:not(.datsumou-category-row) > * { padding-block: 9px; }
  .price-panel .datsumou-price-table tbody td:nth-child(2) .datsumou-menu-figure { width: 62px; height: 80px; }
  .price-panel .datsumou-price-table tbody td:nth-child(4) { font-size: 20px; }
}
@media (min-width: 1021px) {
  /* Wide screens: frequently chosen areas as a sticky side card, the table beside it.
     The table column (~770px) keeps prices near the area names while the section fills the container. */
  .price-panel {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 32px; align-items: start;
  }
  .price-panel > h3 { grid-column: 1 / -1; }
  .price-panel > .price-popular {
    grid-column: 1; grid-row: 2 / span 2; position: sticky; top: 104px;
    margin-bottom: 0;
  }
  .price-panel > .datsumou-table-wrap, .price-panel > p { grid-column: 2; }
  .price-popular ul { grid-template-columns: 1fr; gap: 8px; }
  .price-popular a {
    min-height: 56px; padding: 10px 12px; grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "code name price arrow"; align-items: center; column-gap: 10px; row-gap: 0;
  }
  .price-popular a > span:not(.datsumou-menu-code) { font-size: 16px; }
  .price-popular a > strong { font-size: 20px; text-align: right; }
  .price-popular a::after { width: 12px; height: 16px; }
}
@media (max-width: 1020px) {
  .price-popular ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .price-tabs button { min-height: 56px; padding: 8px 6px; font-size: 18px; }
  /* Phones: no inner frame inside the white card; tinted rows separated by space. */
  .price-popular { margin-bottom: 24px; padding: 16px; }
  /* Phones: one column, each tile a single low row (code + name | price, chevron at the end). */
  .price-popular ul { grid-template-columns: 1fr; gap: 8px; }
  .price-popular a {
    min-height: 56px; padding: 10px 14px 10px 12px; border-color: transparent;
    grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "code name price arrow";
    align-items: center; column-gap: 10px; row-gap: 0;
  }
  .price-popular a > span:not(.datsumou-menu-code) { font-size: 16px; overflow-wrap: anywhere; }
  .price-popular a > strong { font-size: 20px; text-align: right; }
  .price-popular a::after { width: 12px; height: 16px; margin: 0 2px 0 4px; }
  .price-popular-vio-note { margin-top: 6px; padding-left: 2px; }
  /* Rows are already cards here; the table itself must not paint a square white sheet. */
  .price-panel .datsumou-table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .price-panel .datsumou-price-table,
  .price-panel .datsumou-price-table tbody tr.datsumou-category-row { background: transparent; }
  .price-panel .datsumou-price-table tbody tr:not(.datsumou-category-row) {
    grid-template-columns: 44px minmax(0, 1fr) 64px;
    grid-template-areas: "code name icon" "current current icon";
    gap: 8px; padding: 16px 12px 16px 14px;
    box-shadow: 0 6px 18px rgba(22, 61, 88, .05);
  }
  .price-panel .datsumou-price-table tbody th,
  .price-panel .datsumou-price-table tbody td { padding: 0; min-width: 0; }
  .price-panel .datsumou-price-table tbody th { font-size: 16px; overflow-wrap: anywhere; }
  .price-panel .datsumou-price-table tbody td:nth-child(4) { font-size: 18px; }
  .price-panel .datsumou-price-table tbody td[data-label]::before { font-size: 12px; }
  .price-panel .datsumou-price-table tbody td:nth-child(2) .datsumou-menu-figure { width: 64px; height: 82px; }
  .price-panel .datsumou-price-table tbody tr.datsumou-category-row th { font-size: 14px; padding: 8px 2px 0; }
}
@media (max-width: 360px) {
  /* Narrowest phones: keep each area name on one line beside its price. */
  .price-popular { padding: 16px 12px; }
  .price-popular a { padding: 10px 10px 10px 10px; column-gap: 8px; }
  .price-popular a > strong { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .price-tabs button, .price-popular a { transition: none; }
}
@media print {
  .price-tabs, .price-popular { display: none !important; }
  .price-panel[hidden] { display: block !important; }
  .price-panel { display: block !important; }
  #price-panel-men { break-before: page; }
  .price-panel .datsumou-price-table tr { break-inside: avoid; }
  .price-panel .datsumou-table-wrap { overflow: visible; box-shadow: none; }
  .price-panel .datsumou-price-table tbody tr { box-shadow: none !important; }
}