/* The price slots' stylesheet, outside the bundler on purpose: see src/site/price-slots/stylesheet.tsx. */
.ps-tabs { position: relative; }

.ps-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 20px;
}

.ps-label {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 500;
  text-transform: uppercase;
  color: #1a1a1a;
  border-bottom: 2px solid transparent;
}

.ps-nested .ps-label { text-transform: none; font-size: 18px; }

.ps-panel { display: none; }

.ps-radio:focus-visible ~ .ps-list { outline: 2px solid #477d80; outline-offset: 4px; }

/* one rule pair per tab position: the checked radio shows its panel and marks its label */
.ps-radio:nth-of-type(1):checked ~ .ps-panels > .ps-panel:nth-of-type(1) { display: block; }
.ps-radio:nth-of-type(1):checked ~ .ps-list > .ps-label:nth-of-type(1) { color: #477d80; border-bottom-color: #477d80; }
.ps-radio:nth-of-type(2):checked ~ .ps-panels > .ps-panel:nth-of-type(2) { display: block; }
.ps-radio:nth-of-type(2):checked ~ .ps-list > .ps-label:nth-of-type(2) { color: #477d80; border-bottom-color: #477d80; }
.ps-radio:nth-of-type(3):checked ~ .ps-panels > .ps-panel:nth-of-type(3) { display: block; }
.ps-radio:nth-of-type(3):checked ~ .ps-list > .ps-label:nth-of-type(3) { color: #477d80; border-bottom-color: #477d80; }
.ps-radio:nth-of-type(4):checked ~ .ps-panels > .ps-panel:nth-of-type(4) { display: block; }
.ps-radio:nth-of-type(4):checked ~ .ps-list > .ps-label:nth-of-type(4) { color: #477d80; border-bottom-color: #477d80; }
.ps-radio:nth-of-type(5):checked ~ .ps-panels > .ps-panel:nth-of-type(5) { display: block; }
.ps-radio:nth-of-type(5):checked ~ .ps-list > .ps-label:nth-of-type(5) { color: #477d80; border-bottom-color: #477d80; }
.ps-radio:nth-of-type(6):checked ~ .ps-panels > .ps-panel:nth-of-type(6) { display: block; }
.ps-radio:nth-of-type(6):checked ~ .ps-list > .ps-label:nth-of-type(6) { color: #477d80; border-bottom-color: #477d80; }
.ps-radio:nth-of-type(7):checked ~ .ps-panels > .ps-panel:nth-of-type(7) { display: block; }
.ps-radio:nth-of-type(7):checked ~ .ps-list > .ps-label:nth-of-type(7) { color: #477d80; border-bottom-color: #477d80; }
.ps-radio:nth-of-type(8):checked ~ .ps-panels > .ps-panel:nth-of-type(8) { display: block; }
.ps-radio:nth-of-type(8):checked ~ .ps-list > .ps-label:nth-of-type(8) { color: #477d80; border-bottom-color: #477d80; }

/* The old lists, measured on podruge.ru at 1440 (2026-11-01): plain accordion rows, the promo group a tinted box with a teal head,
   white text on teal is #477d80 (the old #7cbfc2 fails 4.5:1) */
.ps-slot .ps-group:not(.ps-promo) { background: none; border-radius: 0; width: auto; max-width: 960px; border-bottom: 1px solid #e0e0e0; margin: 0 auto; }
.ps-slot .ps-group:not(.ps-promo) > summary { background: none; color: #5b5a60; padding: 20px 70px 20px 20px; }
.ps-slot .ps-group:not(.ps-promo) > summary::after { border-color: #5b5a60; }
.ps-slot .ps-group:not(.ps-promo) .ps-row { padding-inline: 20px; }
.ps-slot .ps-title { font-size: 26px; line-height: 30px; text-transform: uppercase; color: #5b5a60; max-width: 960px; margin: 24px auto 0; padding: 0 40px; }
.ps-slot .ps-sub { font-size: 14px; text-align: right; max-width: 960px; margin: 0 auto; padding: 20px 40px 2px 0; text-transform: uppercase; color: #5b5a60; }
.ps-slot .ps-name { font-size: 20px; text-transform: uppercase; color: #5b5a60; }
.ps-slot .ps-row { max-width: 960px; margin-inline: auto; }

.ps-slot .ps-tabs:not(.ps-nested) > .ps-list { flex-wrap: nowrap; gap: 0; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; margin: 0 auto 20px; max-width: 1165px; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-list > .ps-label { flex: 1 1 0; text-align: center; padding: 15px 10px; font-size: 16px; border-bottom: 0; border-right: 1px solid #e0e0e0; background: #f7f7f7; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-list > .ps-label:last-child { border-right: 0; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:checked ~ .ps-list > .ps-label { color: #5b5a60; }
.ps-slot .ps-nested > .ps-list { flex-wrap: nowrap; gap: 0; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; margin: 0 auto 20px; max-width: 910px; }
.ps-slot .ps-nested > .ps-list > .ps-label { flex: 1 1 0; text-align: center; padding: 20px 20px 26px; font-size: 34px; line-height: 1.1; text-transform: uppercase; border-bottom: 0; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:nth-of-type(1):checked ~ .ps-list > .ps-label:nth-of-type(1) { background: #477d80; color: #fff; }
.ps-slot .ps-nested > .ps-radio:nth-of-type(1):checked ~ .ps-list > .ps-label:nth-of-type(1) { background: #477d80; color: #fff; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:nth-of-type(2):checked ~ .ps-list > .ps-label:nth-of-type(2) { background: #477d80; color: #fff; }
.ps-slot .ps-nested > .ps-radio:nth-of-type(2):checked ~ .ps-list > .ps-label:nth-of-type(2) { background: #477d80; color: #fff; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:nth-of-type(3):checked ~ .ps-list > .ps-label:nth-of-type(3) { background: #477d80; color: #fff; }
.ps-slot .ps-nested > .ps-radio:nth-of-type(3):checked ~ .ps-list > .ps-label:nth-of-type(3) { background: #477d80; color: #fff; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:nth-of-type(4):checked ~ .ps-list > .ps-label:nth-of-type(4) { background: #477d80; color: #fff; }
.ps-slot .ps-nested > .ps-radio:nth-of-type(4):checked ~ .ps-list > .ps-label:nth-of-type(4) { background: #477d80; color: #fff; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:nth-of-type(5):checked ~ .ps-list > .ps-label:nth-of-type(5) { background: #477d80; color: #fff; }
.ps-slot .ps-nested > .ps-radio:nth-of-type(5):checked ~ .ps-list > .ps-label:nth-of-type(5) { background: #477d80; color: #fff; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:nth-of-type(6):checked ~ .ps-list > .ps-label:nth-of-type(6) { background: #477d80; color: #fff; }
.ps-slot .ps-nested > .ps-radio:nth-of-type(6):checked ~ .ps-list > .ps-label:nth-of-type(6) { background: #477d80; color: #fff; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:nth-of-type(7):checked ~ .ps-list > .ps-label:nth-of-type(7) { background: #477d80; color: #fff; }
.ps-slot .ps-nested > .ps-radio:nth-of-type(7):checked ~ .ps-list > .ps-label:nth-of-type(7) { background: #477d80; color: #fff; }
.ps-slot .ps-tabs:not(.ps-nested) > .ps-radio:nth-of-type(8):checked ~ .ps-list > .ps-label:nth-of-type(8) { background: #477d80; color: #fff; }
.ps-slot .ps-nested > .ps-radio:nth-of-type(8):checked ~ .ps-list > .ps-label:nth-of-type(8) { background: #477d80; color: #fff; }

/* secondary text on the tinted rows: #6e6d73 is 4.9:1 on the row tint (the old rgba(91,90,96,.8) was 4.07:1) */
.ps-slot .ps-name > div { color: #6e6d73; }

/* round 2: the clinic list like the restored /price-list/ (values of its desktop block, measured on podruge.ru at 1440) */
.ps-slot .ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; max-width: 1165px; margin: 0 auto 20px; }
.ps-slot .ps-head h2 { margin: 0; }
.ps-slot .ps-head p { max-width: 495px; margin: 0; font: 400 16px/31px Arial, sans-serif; color: #6e6d73; }
.ps-slot .ps-note { max-width: 935px; margin: 0 auto 10px; padding: 0; text-align: left; text-transform: none; font: 400 16px/31.2px Arial, sans-serif; color: #5b5a60; }
.ps-slot .ps-title { max-width: none; margin: 0 0 0 31px; padding: 20px 0; text-align: left; border-bottom: 0.8px solid rgb(224 224 224 / 0.5); font-size: 26px; line-height: 39px; }
.ps-slot .ps-promo .ps-title { margin: 0 40px 0 39px; padding-left: 30px; }
.ps-slot .ps-row { position: relative; }
.ps-slot .ps-name > div[data-sale] { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ps-slot .ps-name > div[data-sale] > span:nth-child(2) { padding: 2px 8px; border-radius: 10px; background: #477d80; color: #fff; text-transform: uppercase; line-height: 1.5; }
@media (min-width: 1260px) and (hover: hover) and (pointer: fine) {
  .ps-slot .ps-book { position: absolute; top: 50%; left: 105%; transform: translateY(-50%); opacity: 0; transition: opacity 0.5s; }
  .ps-slot .ps-row:hover .ps-book, .ps-slot .ps-row:focus-within .ps-book { opacity: 1; }
  /* the button sits right of the group: nothing between the row and the page may clip sideways (2026-11-02, it was
     clipped by the group's overflow and invisible on every desktop). The height motion still clips vertically; a promo
     group's coloured head rounds its own corners (not `inherit`: a slotted <summary> inherits from the details' shadow
     slot, radius 0). As /price-list/ does (price-list.module.css, .group on desktop). */
  .ps-slot .ps-group { overflow: visible; }
  .ps-slot .ps-group::details-content { overflow: visible clip; }
  .ps-slot .ps-promo > summary { border-radius: 20px; }
  .ps-slot .ps-promo[open] > summary { border-radius: 20px 20px 0 0; }
}

/* base rules the slots share with the old price blocks (values of aktsii/views.module.css, copied so the two never share a chunk) */
.ps-section { margin-block: 100px 50px; }
.ps-wrap { width: 100%; max-width: 1165px; margin-inline: auto; padding-inline: 20px; }
.ps-h2 { margin: 0 0 30px; font: 400 40px/44px var(--fork-font-display); text-transform: uppercase; color: var(--fork-text); }
.ps-group { width: 960px; max-width: 100%; margin: 16px auto; overflow: hidden; border-radius: 20px; background: rgba(251, 245, 246, 0.5); }
.ps-group > summary { position: relative; list-style: none; cursor: pointer; padding: 20px 70px 20px 40px; font: 20px/30px var(--fork-font-display); text-transform: uppercase; background: #477d80; color: #fff; }
.ps-group > summary::-webkit-details-marker { display: none; }
/* offscreen open groups skip layout and paint until scrolled near (their size is remembered once seen); not where the
   booking button sits outside the group, since content-visibility's paint containment would clip it */
@media not all and (min-width: 1260px) and (hover: hover) and (pointer: fine) {
  .ps-slot .ps-group[open] { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}
.ps-group > summary::after { content: ""; position: absolute; right: 38px; top: 50%; width: 8px; height: 8px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.ps-group[open] > summary::after { rotate: -135deg; }
.ps-title, .ps-sub, .ps-note { padding: 14px 16px; font: 18px/1.3 var(--fork-font-display); }
.ps-row { display: flex; align-items: center; gap: 24px; margin-inline: 40px; padding: 20px 0; border-bottom: 1px solid #e8e4e5; font: 16px/1.4 var(--fork-font-display); }
.ps-row:last-child { border-bottom: 0; }
.ps-name { flex: 1 1 auto; font-size: 20px; line-height: 30px; text-transform: uppercase; }
.ps-descr { margin-top: 0; font: 400 14px/27.3px Arial, sans-serif; text-transform: none; }
.ps-descr span { margin-right: 4px; }
.ps-values { display: flex; flex: none; align-items: center; gap: 0; }
.ps-values s { padding: 0 15px; font-size: 16px; }
.ps-values strong { height: 32px; padding: 0 15px; border-radius: 20px; color: #fff; background: #477d80; font-size: 20px; font-weight: 400; line-height: 32px; }
.ps-row button { flex: none; min-width: 168px; min-height: 45px; border: 0; border-radius: 13px; background: #477d80; color: #fff; box-shadow: 0 4px 15px rgba(63, 61, 61, 0.15); }

/* Motion (2026-11-02): a group opens by height + opacity in 200 ms and closes in 150 ms, its chevron turns with it and the
   head's colours follow in 150 ms. Needs ::details-content and interpolate-size; where they are missing the group opens
   instantly as before. Reduced motion keeps only the colour and opacity changes. */
.ps-group { interpolate-size: allow-keywords; }
.ps-group::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 150ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), content-visibility 150ms allow-discrete; }
.ps-group[open]::details-content { block-size: auto; opacity: 1; transition-duration: 200ms; }
.ps-group > summary, .ps-group > summary::before, .ps-group > summary::after { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, rotate 200ms cubic-bezier(0.23, 1, 0.32, 1), margin-top 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) {
  .ps-group:not([open]) > summary:hover { filter: brightness(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-group::details-content { transition-property: opacity, content-visibility; }
  .ps-group > summary::before, .ps-group > summary::after { transition-property: background-color, border-color; }
}

/* Phone (<= 767 px), 2026-11-02: the slot was laid out for 1440 only; at 390 the heading squeezed its intro to ~100 px,
   the nested laser label ran 429 px wide and was clipped, and names were 20 px against the old phone list's 14 px. */
@media (max-width: 767px) {
  .ps-section { margin-block: 50px 30px; }
  .ps-wrap { padding-inline: 15px; }
  .ps-h2 { margin-bottom: 20px; font-size: 28px; line-height: 1.2; }
  .ps-slot .ps-head { flex-direction: column; gap: 12px; }
  .ps-slot .ps-head p { max-width: none; font-size: 14px; line-height: 1.7; }
  .ps-slot .ps-tabs:not(.ps-nested) > .ps-list { overflow-x: auto; }
  .ps-slot .ps-tabs:not(.ps-nested) > .ps-list > .ps-label { flex: 0 0 auto; padding: 12px 14px; font-size: 14px; }
  .ps-slot .ps-nested > .ps-list > .ps-label { min-width: 0; padding: 14px 8px; font-size: 15px; }
  .ps-slot .ps-note { font-size: 14px; line-height: 1.6; }
  .ps-slot .ps-title { margin-left: 16px; padding: 14px 0; font-size: 18px; line-height: 1.3; }
  .ps-slot .ps-sub { padding: 12px 16px 2px 0; font-size: 12px; }
  .ps-slot .ps-group:not(.ps-promo) > summary, .ps-group > summary { padding: 16px 50px 16px 16px; font-size: 16px; line-height: 1.3; }
  .ps-group > summary::after { right: 22px; }
  .ps-slot .ps-row, .ps-row { flex-wrap: wrap; gap: 10px 12px; margin-inline: 16px; padding: 14px 0; }
  .ps-slot .ps-group:not(.ps-promo) .ps-row { padding-inline: 0; }
  .ps-slot .ps-name { flex-basis: 100%; font-size: 14px; line-height: 1.4; }
  .ps-descr { font-size: 12px; line-height: 1.6; }
  .ps-values s { padding: 0 10px 0 0; font-size: 14px; }
  .ps-values strong { height: 28px; padding: 0 12px; font-size: 16px; line-height: 28px; }
  .ps-row button { min-width: 0; min-height: 40px; padding-inline: 14px; }
}

/* == home/promotions.module.css with the .pp- prefix (a doctor slot's price-v2 block); generated, tests/price-slots.test.ts compares it == */
/* Captured home price-v2 groups, with native disclosures and explicit booking controls. */
.pp-section { margin-block: 40px; color: var(--fork-text); }
.pp-decor { margin-bottom: 15px; color: #477d80; font: 400 40px/1.1 var(--fork-font-display); text-transform: uppercase; }
.pp-title { margin: 0 0 20px; font: 400 28px/1.3 var(--fork-font-display); text-transform: uppercase; }
.pp-group { margin-bottom: 10px; border: 1px solid var(--fork-line); border-radius: 13px; }
.pp-group > summary { padding: 18px 15px; cursor: pointer; font: 400 16px/1.5 var(--fork-font-display); text-transform: uppercase; }
.pp-group .pp-group { margin: 0 10px 10px; }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 15px; border-top: 1px solid var(--fork-line); }
.pp-info { min-width: 0; }
.pp-name { font: 400 14px/1.5 var(--fork-font-display); }
.pp-description { margin: 10px 0 0; font: 400 12px/1.7 var(--fork-font-body); }
.pp-price { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 75px; min-height: 44px; padding: 5px; border: 0; border-radius: 8px; background: transparent; font: 400 16px/1.5 var(--fork-font-display); font-variant-numeric: tabular-nums; color: var(--fork-text); cursor: pointer; }
.pp-price s { font-size: 12px; }
.pp-price span { color: #477d80; }
.pp-hint { display: block; }
.pp-hint summary { display: flex; align-items: center; gap: 5px; min-height: 24px; list-style: none; cursor: pointer; }
.pp-hint summary svg { flex-shrink: 0; }
.pp-hint summary::-webkit-details-marker { display: none; }
.pp-hint > span { display: block; margin-top: 8px; padding: 8px; border: 1px solid var(--fork-line); border-radius: 8px; background: #fff; font: 400 12px/1.7 var(--fork-font-body); }

/* Desktop: the old price-v2 block, values read from podruge.ru at 1440 (2026-11-01). Teal that carries text is #477d80 (4.5:1 with white); teal without text keeps the old #7cbfc2. */
.pp-desktop { position: relative; margin-block: 0; padding-top: 53px; padding-bottom: 40px; }
.pp-desktop .pp-decor { position: absolute; inset: 0 0 auto; margin: 0; text-align: center; color: transparent; -webkit-text-stroke: 1px #d9d9d9; font-size: clamp(60px, 10.5vw, 150px); line-height: 1; white-space: nowrap; overflow: hidden; pointer-events: none; }
.pp-desktop .pp-title { position: relative; box-sizing: border-box; width: 960px; max-width: 100%; margin: 0 auto; padding: 30px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 0 7px rgba(124, 191, 194, 0.25); text-align: center; font-size: 40px; line-height: 44px; }
.pp-desktop .pp-em { color: #477d80; }
.pp-desktop .pp-list { position: relative; width: 960px; max-width: 100%; margin: 0 auto; border-radius: 0 0 22px 22px; background: #fff; box-shadow: 0 0 7px rgba(124, 191, 194, 0.25); overflow: hidden; }
.pp-desktop .pp-group { margin: 0; border: 0; border-radius: 0; background: transparent; }
.pp-desktop .pp-group > summary { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 17px 40px; list-style: none; font-size: 20px; line-height: 30px; color: var(--fork-text); box-shadow: 0 4px 4px rgba(208, 208, 208, 0.25); }
.pp-desktop .pp-group > summary::-webkit-details-marker { display: none; }
.pp-desktop .pp-group > summary::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #7cbfc2; }
.pp-desktop .pp-group > summary::before { content: ""; position: absolute; z-index: 1; right: 49px; top: 50%; width: 6px; height: 6px; margin-top: -6px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.pp-desktop .pp-group[open] > summary { background: #477d80; color: #fff; box-shadow: none; }
.pp-desktop .pp-group[open] > summary::after { background: #fff; }
.pp-desktop .pp-group[open] > summary::before { border-color: #477d80; margin-top: -2px; rotate: -135deg; }
.pp-desktop .pp-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 40px; border: 0; background: rgba(205, 200, 201, 0.1); }
.pp-desktop .pp-info { flex: 1 1 auto; }
.pp-desktop .pp-name { font-size: 20px; line-height: 30px; text-transform: uppercase; color: var(--fork-text); }
.pp-desktop .pp-description { display: inline; margin: 0; font: 400 14px/27.3px Arial, sans-serif; color: #6e6d73; }
.pp-desktop .pp-timer { margin-left: 20px; }
.pp-desktop .pp-timer span:first-child { display: inline-block; margin-right: 5px; padding: 2px 8px; border-radius: 10px; background: #477d80; color: #fff; text-transform: uppercase; line-height: 1.5; }
.pp-desktop .pp-price { flex: none; flex-direction: row; align-items: center; gap: 0; min-width: 0; padding: 0; }
.pp-desktop .pp-price s { padding: 0 15px; color: var(--fork-text); font-size: 16px; }
.pp-desktop .pp-price span { height: 32px; padding: 0 15px; border-radius: 20px; background: #477d80; color: #fff; font-size: 20px; line-height: 32px; }
.pp-desktop .pp-price:focus-visible { outline: 2px solid var(--fork-text); outline-offset: 3px; }
.pp-desktop .pp-hint summary { align-items: flex-start; }
.pp-desktop .pp-hint summary svg { box-sizing: content-box; width: 6px; height: 10px; padding: 7px 9px; border-radius: 50%; background: #cdc8c9; fill: #fff; }
.pp-desktop .pp-more { display: block; width: max-content; max-width: 100%; margin: 40px auto 0; text-align: center; text-transform: uppercase; font-size: 16px; }
@media (max-width: 1023px) { .pp-desktop .pp-decor { font-size: 8vw; } .pp-desktop .pp-title { font-size: 28px; line-height: 1.2; } }

/* Motion (2026-11-02): a group opens by height + opacity in 200 ms and closes in 150 ms, its chevron turns with it and the
   head's colours follow in 150 ms. Needs ::details-content and interpolate-size; where they are missing the group opens
   instantly as before. Reduced motion keeps only the colour and opacity changes. */
.pp-group { interpolate-size: allow-keywords; }
.pp-group::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 150ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), content-visibility 150ms allow-discrete; }
.pp-group[open]::details-content { block-size: auto; opacity: 1; transition-duration: 200ms; }
.pp-group > summary, .pp-group > summary::before, .pp-group > summary::after { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, rotate 200ms cubic-bezier(0.23, 1, 0.32, 1), margin-top 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) {
  .pp-group:not([open]) > summary:hover { filter: brightness(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-group::details-content { transition-property: opacity, content-visibility; }
  .pp-group > summary::before, .pp-group > summary::after { transition-property: background-color, border-color; }
}
/* the price pill answers a press and, with a mouse, a hover */
.pp-price { transition: scale 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.pp-price span { transition: background-color 100ms ease; }
.pp-price:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { .pp-desktop .pp-price:hover span { background: #3c6b6e; } }
@media (prefers-reduced-motion: reduce) { .pp-price:active { scale: none; } }