/* gift-guide.html: the kit strip, recipient tiles, gift pick cards, stocking stuffers, the before-you-buy checks
   (page-only). Tiers are words ("Small gift" / "Bigger gift"), never prices. Tidy pass 2026-10-18: the answer box,
   the two-tier block, the at-a-glance table and the team box are gone; pick cards sit beside their picture on phones. */

/* tiers in words */
.gg-tier{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:999px;font:700 .8125rem/1.3 var(--body);white-space:nowrap}
.gg-tier--small{background:var(--aqua-tint);color:var(--aqua-900)}
.gg-tier--big{background:var(--lav-tint);color:var(--lav)}

/* the kit, piece by piece: five icon tiles */
.gg-kit__list{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.gg-kit__list{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gg-kit__item{display:grid;justify-items:center;align-content:start;gap:.3rem;padding:.9rem .6rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);text-align:center}
.gg-kit__item--big{background:linear-gradient(160deg,#fff,var(--lav-tint));border-color:var(--lav-line)}
.gg-kit__item:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:768px){.gg-kit__item:last-child:nth-child(odd){grid-column:auto}}
.gg-kit__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:15px;background:var(--aqua-tint);color:var(--aqua-800);margin-bottom:.2rem}
.gg-kit__item--big .gg-kit__ico{background:#fff;color:var(--lav)}
.gg-kit__item b{font:600 .98rem/1.25 var(--display)}
.gg-kit__item small{font-size:.8125rem;color:var(--muted)}
.gg-kit__item--big .gg-tier{background:#fff}
@media (max-width:767.98px){
  .gg-kit__item{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;column-gap:.7rem;row-gap:.1rem;padding:.7rem .75rem;text-align:left}
  .gg-kit__ico{grid-row:1/3;width:2.6rem;height:2.6rem;border-radius:13px;margin:0}
  .gg-kit__item:last-child:nth-child(odd){justify-content:center}
}

/* who is it for: one row of five from 768 (review r2 P3-12) */
.gg-recips{display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.gg-recips{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gg-recip{display:grid;gap:.25rem;align-content:start;padding:.6rem .6rem .9rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);text-decoration:none;color:var(--ink);transition:border-color .18s,transform .18s}
.gg-recip:hover{border-color:var(--aqua);transform:translateY(-2px);color:var(--ink)}
.gg-recip__art{display:grid;place-items:center;aspect-ratio:5/3;border-radius:var(--r-m);background:linear-gradient(150deg,var(--aqua-tint),#fff);margin-bottom:.4rem}
.gg-recip--lav .gg-recip__art{background:linear-gradient(150deg,var(--lav-tint),#fff)}
.gg-recip__art svg{width:58%;height:auto}
.gg-recip b{font:600 .98rem/1.3 var(--display);padding-inline:.25rem}
.gg-recip small{font-size:.8125rem;color:var(--muted);line-height:1.4;padding-inline:.25rem}
@media (min-width:768px) and (max-width:1023.98px){.gg-recip b{font-size:.9rem}.gg-recip small{font-size:.78rem}}
@media (max-width:767.98px){
  .gg-recip__art{aspect-ratio:2/1;overflow:hidden}
  .gg-recip__art svg{width:auto;height:3.6rem}
  .gg-recip:last-child:nth-child(odd){grid-column:1/-1}
  .gg-recip:last-child:nth-child(odd) .gg-recip__art{aspect-ratio:auto;height:4.75rem}
}

/* picks grouped by recipient */
.gg-groups{display:grid;gap:clamp(2.25rem,1.6rem + 2.2vw,3.5rem);padding-top:var(--sec)}
.gg-group{scroll-margin-top:6rem}
.gg-group__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:center;margin-bottom:1rem}
.gg-group__art{display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:20px;background:var(--aqua-tint)}
.gg-group__art--lav{background:var(--lav-tint)}
.gg-group__art svg{width:78%;height:auto}
.gg-group__head h2{font-size:clamp(1.3rem,1.15rem + .9vw,1.85rem)}
.gg-group__head p{color:var(--muted);margin-top:.15rem}
.gg-picks{display:grid;gap:1rem}
@media (min-width:900px){.gg-picks{grid-template-columns:1fr 1fr}}
.gg-pick{display:grid;overflow:hidden;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);scroll-margin-top:6rem}
@media (min-width:560px){.gg-pick{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.gg-pick__media{position:relative;min-height:11rem;background:var(--mist)}
.gg-pick__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gg-pick__media.rc-art>svg{width:min(70%,12rem);max-height:70%}
.gg-caseart>svg{width:min(62%,12rem)!important;height:auto}
.gg-pick__body{display:grid;gap:.55rem;align-content:start;padding:1rem 1.1rem 1.15rem}
.gg-pick__tags{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.gg-pick h3{font-size:1.12rem}
.gg-pick__why{font-size:.95rem;line-height:1.5;color:var(--text)}
.gg-pick__note{display:flex;gap:.45rem;align-items:flex-start;font-size:.875rem;line-height:1.45;color:var(--muted)}
.gg-pick__note .ic{flex:none;color:var(--lav);margin-top:.1rem}
.gg-pick__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.1rem}
/* phones: the picture sits beside the text as a square thumbnail */
@media (max-width:559.98px){
  .gg-pick{grid-template-columns:6rem minmax(0,1fr);align-items:start}
  .gg-pick__media{min-height:0;aspect-ratio:1;margin:.8rem 0 0 .8rem;border-radius:var(--r-m);overflow:hidden}
  .gg-pick__media.rc-art>svg{width:84%;max-height:80%}
  .gg-caseart>svg{width:86%!important}
  .gg-pick__body{gap:.4rem;padding:.8rem .9rem .9rem .8rem}
  .gg-pick h3{font-size:1.02rem;line-height:1.3}
  .gg-pick__why{font-size:.9rem}
  .gg-pick__note{font-size:.84rem}
  /* review-tidy P3-16: the brushes and the hand fill the square thumbnail instead of the white ground */
  #pick-floss .gg-pick__media img{object-position:80% 50%;transform:scale(1.35);transform-origin:66% 54%}
}
/* one pick in a group: the card runs the full row on desktop, its picture a narrower column */
@media (min-width:900px){.gg-group--single .gg-picks{grid-template-columns:minmax(0,1fr)}.gg-group--single .gg-pick{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)}.gg-group--single .gg-pick__body{align-content:center}}
.gg-group .rc-drawnote{margin-top:.75rem}

/* stocking stuffers */
.gg-stuff{display:grid;overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(150deg,#fff 0,var(--rasp-tint) 100%);border:1px solid var(--rasp-line)}
@media (min-width:900px){.gg-stuff{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.gg-stuff__media{position:relative;aspect-ratio:16/9;background:var(--mist)}
@media (min-width:900px){.gg-stuff__media{aspect-ratio:auto;min-height:100%}}
.gg-stuff__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gg-stuff__body{display:grid;gap:.75rem;align-content:start;justify-items:start;padding:clamp(1.1rem,.8rem + 1.4vw,2rem)}
.gg-stuff__body h2{font-size:var(--t-h2)}
.gg-stuff__list{display:grid;gap:.55rem;width:100%}
@media (min-width:640px){.gg-stuff__list{grid-template-columns:1fr 1fr}}
.gg-stuff__list li{display:flex;gap:.65rem;align-items:flex-start;padding:.65rem .8rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--rasp-line)}
.gg-stuff__list li>.ic{flex:none;color:var(--rasp);margin-top:.1rem}
.gg-stuff__list b{display:block;font:600 .95rem/1.3 var(--display)}
.gg-stuff__list span{font-size:.9rem;line-height:1.45}
.gg-stuff__list .rc-src{margin-left:.2rem}
.gg-stuff__note{display:flex;gap:.45rem;align-items:flex-start;font-size:.875rem;color:var(--muted)}
.gg-stuff__note .ic{flex:none;color:var(--lav);margin-top:.1rem}

/* before you buy: three icon tiles, one line each */
.gg-checks{display:grid;gap:.75rem}
@media (min-width:768px){.gg-checks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gg-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start;padding:1rem 1.05rem;border-radius:var(--r-l);background:var(--lav-tint);border:1px solid var(--lav-line)}
.gg-check--note{background:#fff;border-color:var(--line)}
.gg-check__ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:13px;background:#fff;color:var(--lav)}
.gg-check--note .gg-check__ico{background:var(--aqua-tint);color:var(--aqua-800)}
.gg-check b{display:block;font:600 1rem/1.3 var(--display);color:var(--ink);margin-bottom:.2rem}
.gg-check p{font-size:.92rem;line-height:1.5}
.gg-check .rc-src{margin-left:.15rem}

/* read next: hub pills */
.gg-hubs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1.4rem}
.gg-hubs>span{font-weight:700;color:var(--ink);margin-right:.2rem}