/* Pro V1 vs Pro V1x comparison: page-only styles (prefix pv-). The sections, choose cards, tiles, tip / source
   lines and article foot are article.css's TIDY KIT; this file holds only what is particular to this page. */

.pv-hero .gg-arthero__photo img{object-position:50% 60%}
/* below the desktop split the photo goes wide instead of tall, so the choose cards come sooner */
@media (max-width:639px){.pv-hero .gg-arthero__photo{aspect-ratio:16/10}}
@media (min-width:640px) and (max-width:1023px){.pv-hero .gg-arthero__photo{aspect-ratio:16/9}}

/* the choose cards open the body (the mobile TOC sits above them, hidden on desktop) */
.gg-tsec.pv-first{margin-top:0}

/* choose cards: a round ball photo, one line, four ticks, the store button at the foot */
.pv-first .gg-choose__card{grid-template-rows:auto auto 1fr auto}
.pv-first .gg-choose__art{border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gg-brass-200)}
.pv-first .gg-choose__card>p{color:var(--gg-ink)}
.pv-checks{display:grid;gap:.35rem}
.pv-checks li{display:flex;gap:.5rem;align-items:flex-start;font-size:.95rem;line-height:1.45;color:var(--gg-ink-2)}
.pv-checks .gg-ic{flex:none;margin-top:.17rem;color:var(--gg-ok)}
.pv-cta{justify-self:start;margin-top:.2rem}

/* spec table: a row both balls share spans the two columns, in a quieter tint */
.pv-specs .pv-same td{color:var(--gg-ink-2)}
.pv-specs .pv-same td,.pv-specs .pv-same th{background:var(--gg-row)}

/* round by round: icon rows, values side by side, the label at the end */
.pv-diff{display:grid;border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line);overflow:hidden}
.pv-diff>li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.8rem;row-gap:.35rem;align-items:start;padding:.8rem 1rem}
.pv-diff>li+li{border-top:1px solid var(--gg-line)}
.pv-diff__ico{grid-row:span 3;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--gg-green-100);color:var(--gg-green-800)}
.pv-diff h3{font:650 1rem/1.3 var(--gg-display);color:var(--gg-ink)}
.pv-diff__vals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem;font-size:.93rem;line-height:1.45;color:var(--gg-ink)}
.pv-diff__vals b{display:block;font:700 .78rem/1.4 var(--gg-display);color:var(--gg-muted)}
.pv-diff__edge{justify-self:start}
@media (min-width:768px){
  .pv-diff>li{grid-template-columns:auto 9rem minmax(0,1fr) 10rem;column-gap:1rem;align-items:center}
  .pv-diff__ico{grid-row:auto}
  .pv-diff__edge{justify-self:end;text-align:right}
}

/* personalize: text and tiles beside the drawing from 900 px */
.pv-pers{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:center}
@media (min-width:900px){.pv-pers{grid-template-columns:minmax(0,1fr) minmax(0,16rem);gap:1.5rem}}
.pv-pers__text>*+*{margin-top:1rem}
.pv-pers .gg-sechead :is(h2,h3){font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem)}
.pv-pers__media{display:none;margin:0}
@media (min-width:900px){.pv-pers__media{display:block}}
.pv-pers__media img{width:100%;height:auto;border-radius:var(--gg-r-xl);background:var(--gg-brass-100)}
.pv-pers__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.pv-pers__cta .gg-more{min-height:44px}
/* phones: each tile is a row (icon left), so the four options stay short */
@media (max-width:639px){
  .pv-tiles{grid-template-columns:minmax(0,1fr)}
  .pv-tiles>.gg-ktile{grid-template-columns:auto minmax(0,1fr);column-gap:.8rem;row-gap:.15rem}
  .pv-tiles>.gg-ktile>.gg-ktile__ico{grid-row:span 2}
}

/* FAQ */
.pv-faq .gg-faq{max-width:46rem}

/* article foot: the method in one line between the byline and the links */
.pv-artfoot__line{flex:1 1 16rem;font-size:.9rem;line-height:1.45}

/* desktop aside: store buttons under the table of contents */
.pv-buy{display:grid;gap:.55rem;padding:1rem;border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line)}
.pv-buy p{font-size:.9rem;line-height:1.45;color:var(--gg-ink-2)}
.pv-buy p b{display:block;font:650 1rem/1.3 var(--gg-display);color:var(--gg-ink)}