/*
 * The grooming price board (his "B" of 24 Oct 2026: each card shows all four sizes in a row), measured from the approved
 * drawing mockups/grooming-prices-2026-10-24/option-b.html. Phone first: one column; two from 760 px; three from 1100 px.
 * Colours are the service pages' own (css/pages.css .cp-svc: ink, muted grey, line, navy for the one action).
 * The booking form's grooming picker (includes/booking.php) is styled at the end.
 */
.cp-gb .cp-gb__animal { font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink, #16202B); margin: 28px 0 10px; letter-spacing: 0; text-transform: none; }
.cp-gb .cp-svc__head + .cp-gb__animal { margin-top: 24px; }
.cp-gb__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .cp-gb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cp-gb__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cp-gb__card { background: #fff; border: 1px solid var(--line, #E6E9EE); border-radius: 16px; padding: 18px; min-width: 0; }
.cp-gb .cp-gb__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cp-gb .cp-gb__name { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--ink, #16202B); letter-spacing: 0; text-transform: none; }
.cp-gb .cp-gb__price { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--ink, #16202B); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-gb__price small { font-size: 12px; font-weight: 500; color: var(--mut, #6B7280); margin-right: 4px; }
.cp-gb .cp-gb__sizes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; }
.cp-gb .cp-gb__cell { background: #F6F7F9; border-radius: 10px; padding: 6px 4px; text-align: center; margin: 0; }
.cp-gb__cell span { display: block; font-size: 11.5px; line-height: 1.4; color: var(--mut, #6B7280); }
.cp-gb__cell b { display: block; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink, #16202B); font-variant-numeric: tabular-nums; }
.cp-gb__cell--off b { color: #9CA3AF; font-weight: 500; }
.cp-gb .cp-gb__cell .cp-gb__sr, .cp-gb__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cp-gb .cp-gb__inc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mut, #6B7280); }
.cp-gb .cp-gb__book { margin-top: 12px; }
.cp-gb .cp-gb__adds { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.cp-gb .cp-gb__add { background: #fff; border: 1px solid var(--line, #E6E9EE); border-radius: 999px; padding: 8px 14px; font-size: 14px; line-height: 1.4; color: var(--txt, #2B333D); margin: 0; }
.cp-gb__add b { font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; }
.cp-gb .cp-gb__note { margin: 10px 0 0; font-size: 13px; color: var(--mut, #6B7280); }
@media (max-width: 380px) { .cp-gb__cell b { font-size: 14px; } .cp-gb__card { padding: 16px 14px; } }

/* The booking form's grooming picker: the form's own field look (css/pages.css .cp-field), the board's price under it */
.cp-gbk { display: grid; gap: 4px; }
.cp-gbk__price { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: #F6F7F9; font-size: 15px; line-height: 1.45; color: #16202B; }
.cp-gbk__price b { font-variant-numeric: tabular-nums; }
.cp-gbk__price[hidden], .cp-gbk [hidden] { display: none !important; }
.cp-gbk__adds { border: 0; margin: 0; padding: 0; min-width: 0; }
.cp-gbk__adds legend { padding: 0; margin: 0 0 6px; font-weight: 500; }
.cp-gbk__add { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.cp-gbk__add input { width: 20px; height: 20px; margin: 0; accent-color: #003662; flex: 0 0 auto; }
.cp-gbk__add b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-gbk__hint { font-size: 13px; color: #6B7280; margin: 2px 0 0; }
.cp-gbk { gap: 16px; }
.cp-gbk__field { position: relative; margin: 0; }
.cp-gbk select { display: block; width: 100%; min-height: 46px; padding: 12px 44px 12px 20px; border: 0; border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B333D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center / 16px; box-shadow: inset 0 0 0 1px rgba(43, 51, 61, .35); font: inherit; font-size: 16px; line-height: 1.3; letter-spacing: .02em; color: #2B333D; -webkit-appearance: none; appearance: none; cursor: pointer; scroll-margin-top: 150px; }
.cp-gbk select.is-empty { color: rgba(43, 51, 61, .75); }
.cp-gbk select option { color: #2B333D; }
.cp-gbk select:hover { box-shadow: inset 0 0 0 1px #2B333D; }
.cp-gbk select:focus-visible, .cp-gbk__add input:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #2B333D; }
.cp-gbk__add input:focus-visible { outline: 2px solid #003662; outline-offset: 2px; box-shadow: none; }
.cp-gbk select:disabled { cursor: not-allowed; opacity: .6; }