/*
 * Shared service-module library styles (rule A1, owner 08.10): new modules and module variants of service pages,
 * inside .md-battery-service. Only design-system tokens (var(--mds-*)); the accepted iPhone 13 modules stay in
 * service-battery-iphone13.css. Sources: the accepted iPhone 11 page (one offer, 07.10), the battery rollout
 * (16e without a price, 08.10) and the hub «Замена аккумулятора iPhone» v6 (08.10).
 */

/* ---------- price, one offer: one price, booking at once (owner 07.10: «цель не выбрать, а конверсия в запись») ---------- */
#price .ob-card.ob-one{text-align:center}
#price .ob-one .ob-one__box,#price .ob-one > .ob-note--s{max-width:620px;margin-left:auto;margin-right:auto;width:100%}
.md-battery-service .ob-one__box{display:grid;gap:var(--mds-space-4);margin-top:var(--mds-space-5);padding:var(--mds-space-7) var(--mds-space-6);border-radius:var(--mds-radius-lg);background:var(--mds-color-surface-muted);text-align:left}
.md-battery-service .ob-one__price{margin:0;font-size:var(--mds-fs-title-1);font-weight:700;letter-spacing:-.01em;line-height:1}
.md-battery-service .ob-one__sub{margin:-8px 0 0;font-weight:600;color:var(--mds-color-text-secondary)}
.md-battery-service .ob-one__facts{display:grid;gap:var(--mds-space-2);margin:0;padding:0;list-style:none}
.md-battery-service .ob-one__facts li{display:flex;gap:var(--mds-space-2);align-items:flex-start;font-size:var(--mds-fs-body)}
.md-battery-service .ob-one__facts .ob-ic{flex:none;color:var(--mds-color-action-fill);margin-top:2px}
.md-battery-service .ob-one__note{margin:0;font-size:var(--mds-fs-small);color:var(--mds-color-text-secondary)}
.md-battery-service .ob-one .ob-price-act{justify-items:stretch;text-align:center}
.md-battery-service .ob-one .ob-price-act .btn{width:100%}
.md-battery-service .ob-one .ob-note--s{display:block;margin-top:var(--mds-space-3)}
/* A model without a price (owner 08.10, А1): the price line reads like the hub's «no price» tile. */
.md-battery-service .ob-one__price--na{font-size:var(--mds-fs-title-2);line-height:1.15;color:var(--mds-color-text-secondary)}

/* ---------- hub «Замена аккумулятора iPhone» v6 (owner 08.10): generation chooser, series card, model rows ----------
   Hub classes (pk-*, pk__*, ob-allm*) exist only on the hub; rules for shared modules there are scoped by body.md-battery-hub. */
/* Value before any price: the time and two accepted facts of the value module, right under the H1. */
.md-battery-service .pk-gets{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--mds-space-2) var(--mds-space-5);margin:0;padding:0;list-style:none}
.md-battery-service .pk-gets li{display:flex;align-items:flex-start;gap:var(--mds-space-2);margin:0;font-size:var(--mds-fs-body);line-height:var(--mds-lh-title);color:var(--mds-color-text-primary);text-align:left}
.pk-gets .ob-ic{margin-top:1px;color:var(--mds-color-action-fill)}

/* The question and its buttons are one group: the question sits closer to the buttons than to the H1. */
.pk{display:grid;gap:var(--mds-space-3);width:100%;max-width:1056px;margin:var(--mds-space-3) auto 0}
.pk [hidden]{display:none}
.md-battery-service .pk .pk__legend{margin:0;font-size:var(--mds-fs-lead);font-weight:var(--mds-fw-semibold);line-height:var(--mds-lh-title);color:var(--mds-color-text-primary)}

.pk__gens{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--mds-space-2);margin:0;padding:0;border:0;min-width:0}
.pk__gens label{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--mds-size-hit);margin:0;padding:var(--mds-space-1) var(--mds-space-4);border-radius:var(--mds-radius-sm);background:var(--mds-color-fill-neutral);color:var(--mds-color-text-primary);font-size:var(--mds-fs-body);font-weight:var(--mds-fw-semibold);line-height:var(--mds-lh-title);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--mds-duration-fast) var(--mds-ease-standard),color var(--mds-duration-fast) var(--mds-ease-standard)}
.pk__gens input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
/* The price «от» of the generation under its name: the first screen answers «сколько стоит» before a tap. */

.md-battery-service .pk .pk__help{margin:0;font-size:var(--mds-fs-small)}
.pk__help a{display:inline-flex;align-items:center;min-height:var(--mds-size-hit);color:var(--mds-color-text-link);text-underline-offset:.2em}

/* Card: the answer (title, price tiles, terms, booking) first; the optional model choice after it,
   in the right column from 1100. White tiles on the grey card: surfaces separated by fill. */
.pk__card{display:grid;gap:var(--mds-space-5);margin-top:var(--mds-space-2);padding:var(--mds-space-6);border-radius:var(--mds-radius-lg);background:var(--mds-color-surface-muted);text-align:left}
.pk__main{display:grid;gap:var(--mds-space-5);align-content:start;min-width:0}
.pk__ans{display:grid;gap:var(--mds-space-4);align-content:start;min-width:0}
.pk__head{display:grid;gap:var(--mds-space-1)}
.md-battery-service .pk .pk__title{margin:0;font-size:var(--mds-fs-title-2);font-weight:var(--mds-fw-bold);line-height:var(--mds-lh-title);letter-spacing:-.01em;color:var(--mds-color-text-primary)}
.md-battery-service .pk .pk__sub{margin:0;font-size:var(--mds-fs-small);line-height:var(--mds-lh-title);color:var(--mds-color-text-secondary)}
/* Phone only: from 768 the three lines under the H1 stay on screen next to the card and say the same. */
.md-battery-service .pk .pk__incl{margin:0;font-size:var(--mds-fs-small);line-height:var(--mds-lh-title);color:var(--mds-color-text-primary)}

/* Price tiles in the tile language of the accepted model page: price, variant, when it fits. */
.pk__varset{margin:0;padding:0;border:0;min-width:0}
.pk__vars{display:grid;gap:var(--mds-space-2)}
.pk__vars.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pk__var{position:relative;display:grid;gap:var(--mds-space-1);align-content:start;margin:0;padding:var(--mds-space-4);border-radius:var(--mds-radius-md);background:var(--mds-color-surface-base);text-align:left;transition:background-color var(--mds-duration-fast) var(--mds-ease-standard)}
label.pk__var{min-height:var(--mds-size-hit);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pk__var input{position:absolute;top:var(--mds-space-4);right:var(--mds-space-4);width:24px;height:24px;margin:0;appearance:none;-webkit-appearance:none;border-radius:50%;background:var(--mds-color-surface-base);box-shadow:inset 0 0 0 2px var(--mds-color-border-control);cursor:pointer;transition:box-shadow var(--mds-duration-fast) var(--mds-ease-standard)}
.pk__var input:checked{box-shadow:inset 0 0 0 7px var(--mds-color-action-fill)}
.pk__var input:focus-visible{outline:0}
.pk__p{display:block;font-size:var(--mds-fs-title-3);font-weight:var(--mds-fw-bold);line-height:var(--mds-lh-title);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mds-color-text-primary)}
label.pk__var .pk__p{padding-right:32px}
.pk__vn{display:block;font-size:var(--mds-fs-body);font-weight:var(--mds-fw-semibold);line-height:var(--mds-lh-title);color:var(--mds-color-text-primary);transition:color var(--mds-duration-fast) var(--mds-ease-standard)}
.pk__vf{display:block;font-size:var(--mds-fs-small);line-height:var(--mds-lh-title);color:var(--mds-color-text-secondary)}
.pk__var.is-na .pk__vn{color:var(--mds-color-text-secondary)}
/* Fact rows of a variant, only where confirmed for its price_id; no divider, the tile fill separates. */
.pk__rows{display:grid;gap:var(--mds-space-1);margin-top:var(--mds-space-2);font-size:var(--mds-fs-small);line-height:var(--mds-lh-title);color:var(--mds-color-text-secondary)}
.pk__rows i{display:block;font-style:normal;font-size:var(--mds-fs-caption);color:var(--mds-color-text-tertiary)}
.md-battery-service .pk .pk__both{margin:var(--mds-space-2) 0 0}

/* Terms next to the price: today, warranty, symptoms; one short line each. */
.pk__terms{display:grid;gap:var(--mds-space-3);margin:0}
.pk__terms div{display:grid;gap:2px}
.md-battery-service .pk .pk__terms ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.md-battery-service .pk .pk__terms li{margin:0;font-size:var(--mds-fs-small);line-height:var(--mds-lh-title);color:var(--mds-color-text-primary)}
.md-battery-service .pk .pk__terms dt{margin:0;font-size:var(--mds-fs-small);font-weight:var(--mds-fw-semibold);line-height:var(--mds-lh-title);color:var(--mds-color-text-primary)}
.md-battery-service .pk .pk__terms dd{margin:0;font-size:var(--mds-fs-small);line-height:var(--mds-lh-title);color:var(--mds-color-text-secondary)}

/* White text on the logo blue only at 19px bold. */
.pk__act{display:grid;justify-items:start;gap:var(--mds-space-1)}
.md-battery-service .pk .btn,.md-battery-hub .md-battery-service .ob-caprow .btn{font-size:var(--mds-fs-button);font-weight:var(--mds-fw-bold)}
.md-battery-service .pk .pk__act .btn{min-width:300px}
.md-battery-service .pk .pk__note{margin:0;font-size:var(--mds-fs-small);line-height:var(--mds-lh-body);color:var(--mds-color-text-secondary)}
/* The free check under the symptoms: the negative margin keeps it close to the list it answers. */
.md-battery-service .pk .pk__check{justify-self:start;min-height:var(--mds-size-hit);margin-top:calc(-1 * var(--mds-space-2));text-align:left}

.pk__side{display:grid;gap:var(--mds-space-2);align-content:start;min-width:0}
.pk__pick{margin:0;padding:0;border:0;min-width:0}
.pk__pick legend{float:left;width:100%;margin:0;padding:0 0 var(--mds-space-3);font-size:var(--mds-fs-body);font-weight:var(--mds-fw-semibold);line-height:var(--mds-lh-title);color:var(--mds-color-text-primary)}
/* Each model is a tile: white surface on the grey card, radio inside it, like .ob-tile-opt. */
.pk__list{clear:both;display:grid;gap:var(--mds-space-2) var(--mds-space-3)}
.pk__row{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;column-gap:var(--mds-space-3);min-height:64px;margin:0;padding:var(--mds-space-2) var(--mds-space-4) var(--mds-space-2) var(--mds-space-3);border-radius:var(--mds-radius-md);background:var(--mds-color-surface-base);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--mds-duration-fast) var(--mds-ease-standard)}
.pk__row img{display:block;width:48px;height:48px}
.pk__name{font-size:var(--mds-fs-body);font-weight:var(--mds-fw-semibold);line-height:var(--mds-lh-title);color:var(--mds-color-text-primary);transition:color var(--mds-duration-fast) var(--mds-ease-standard)}
.pk__name small{display:block;font-size:var(--mds-fs-small);font-weight:var(--mds-fw-regular);line-height:var(--mds-lh-title);color:var(--mds-color-text-secondary)}
.pk__name small.pk__rp{color:var(--mds-color-text-primary);font-variant-numeric:tabular-nums}
.pk__row input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border-radius:50%;background:var(--mds-color-surface-base);box-shadow:inset 0 0 0 2px var(--mds-color-border-control);cursor:pointer;transition:box-shadow var(--mds-duration-fast) var(--mds-ease-standard)}
.pk__row input:checked{box-shadow:inset 0 0 0 7px var(--mds-color-action-fill)}
.pk__row input:focus-visible{outline:0}
.pk__rest{margin-top:var(--mds-space-2)}
.pk__rest>.pk__list{clear:none}
.pk__rest summary{display:flex;align-items:center;gap:var(--mds-space-2);width:max-content;max-width:100%;min-height:var(--mds-size-hit);color:var(--mds-color-text-link);font-size:var(--mds-fs-body);font-weight:var(--mds-fw-semibold);line-height:var(--mds-lh-title);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pk__rest summary::-webkit-details-marker{display:none}
.pk__rest summary::after{content:"";flex:none;width:10px;height:10px;margin-top:-4px;background:currentColor;clip-path:polygon(0 30%,15% 15%,50% 50%,85% 15%,100% 30%,50% 80%)}
@media (hover:hover){.pk__rest summary:hover{text-decoration:underline;text-underline-offset:.2em}}
.pk__rest summary:focus-visible{outline:var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);outline-offset:2px;border-radius:var(--mds-radius-sm)}
.pk__rest[open]>summary{display:none}
.pk__more{display:inline-flex;align-items:center;justify-self:start;min-height:var(--mds-size-hit);color:var(--mds-color-text-link);font-size:var(--mds-fs-small);font-weight:var(--mds-fw-semibold);text-underline-offset:.2em}
.md-battery-service .pk .md-contact-panel{max-width:none;margin:0;padding:0;border-radius:0;background:none}
/* The accepted phone booking bar: its button is white on the logo blue, so 19px bold. */
.md-battery-hub .md-battery-service .btn-sticky{font-size:var(--mds-fs-button);font-weight:var(--mds-fw-bold)}

/* One selected look for generation, price tile and model row: selected fill, 2px ring, link-coloured
   label. Tiles and rows also keep the filled radio, a cue that does not rely on colour. */
.pk__gens label:has(input:checked),.pk__var:has(input:checked),.pk__row:has(input:checked){background:var(--mds-color-fill-selected);box-shadow:inset 0 0 0 2px var(--mds-color-action-fill)}
.pk__gens label:has(input:checked),.pk__var:has(input:checked) .pk__vn,.pk__row:has(input:checked) .pk__name{color:var(--mds-color-text-link)}
.pk__gens label:has(input:focus-visible),.pk__var:has(input:focus-visible),.pk__row:has(input:focus-visible){outline:var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);outline-offset:2px}
@media (hover:hover){
.pk__gens label:not(:has(input:checked)):hover{background:var(--mds-color-fill-neutral-hover)}
label.pk__var:not(:has(input:checked)):hover,.pk__row:not(:has(input:checked)):hover{background:var(--mds-color-fill-neutral)}
}

/* Value module: the founder's blog link is a 44px target. */
.md-battery-hub .md-battery-service .ob-since a{display:inline-flex;align-items:center;min-height:var(--mds-size-hit)}

@media (min-width:768px){
.pk__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.md-battery-service .pk .pk__incl{display:none}
.pk__terms{grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:var(--mds-space-6)}
.pk__terms>div{align-content:start}
.pk__terms>.pk__fix{grid-column:1/-1}
}
/* Up to 1100 the three lines under the H1 are one centred checklist, ticks in one column: in centred rows the
   third line wraps at 768 and its tick jumps to the left edge. 560px holds the first two lines on one line each. */
@media (min-width:768px) and (max-width:1099px){
.md-battery-service .pk-gets{display:flex;flex-wrap:wrap;justify-content:center}
}
@media (min-width:1100px){
.pk__card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--mds-space-6)}
.pk__side .pk__list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
.md-battery-hub .md-battery-service .ob-hero__in{gap:var(--mds-space-3)}
.md-battery-service .pk-gets{display:grid;justify-content:start;gap:var(--mds-space-1)}
.pk{margin-top:var(--mds-space-2);gap:var(--mds-space-2)}
.pk__gens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pk__gens label{padding:0 var(--mds-space-1)}
/* 17 и Air, X, XS, XR and SE, 8 и старше take two columns: 3 rows of 4, newest first, no gap. */
.pk__gens label.is-wide{grid-column:span 2}
.pk__card{padding:var(--mds-space-5) var(--mds-space-4)}
/* One tile per line: two per line squeezed the price into the radio. */
.pk__vars.is-two{grid-template-columns:minmax(0,1fr)}
.pk__act{justify-items:stretch}
.md-battery-service .pk .pk__act .btn{width:100%;min-width:0}
}

/* Hub: links to every model page with its price. */
.ob-allm{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--mds-space-5) var(--mds-space-6);margin-top:var(--mds-space-4)}
.ob-allm__g h3{margin:0 0 var(--mds-space-2);font-size:var(--mds-fs-body);font-weight:var(--mds-fw-semibold)}
.ob-allm__g ul{display:grid;gap:var(--mds-space-1);margin:0;padding:0;list-style:none}
.ob-allm__g li{display:flex;justify-content:space-between;gap:var(--mds-space-3);font-size:var(--mds-fs-small)}
.ob-allm__g a{color:var(--mds-color-text-link)}.ob-allm__g span{color:var(--mds-color-text-secondary);white-space:nowrap}
.ob-allm__more{margin:var(--mds-space-5) 0 0}.ob-allm__more a{color:var(--mds-color-text-link);font-weight:var(--mds-fw-semibold)}