/* inner pages: shop, sets, care, workshop, delivery, legal */

.page-head { background: var(--mint); padding: 2.5rem 0 2.75rem; border-bottom: 2px solid #000; }
.page-head__lead { font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem); max-width: 46rem; margin: 1rem 0 0; }
.page-head__crumbs { font-size: .875rem; margin: 0 0 1rem; }
.page-head__crumbs a { text-decoration: none; border-bottom: 1px solid #000; }

.page-block { padding: 3.5rem 0; }
.page-block--tight { padding-top: 0; }
.page-block--tile { background: var(--tile); }
.page-block h2 { font: 600 clamp(1.875rem, 1.3rem + 2vw, 3rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1.25rem; }
.page-block h3 { font: 600 1.5rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: .5rem; }
.page-block p,
.page-block li { max-width: 52rem; }

.filters { display: grid; grid-gap: 1rem 2.5rem; padding: 1.75rem 0 1.5rem; border-bottom: 2px solid #000; }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filters__label { font: 700 .8125rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; margin-right: .5rem; min-width: 4.5rem; }
.chip {
  min-height: 2.5rem;
  padding: .4em 1.1em;
  border: 2px solid #000;
  border-radius: var(--pill);
  background: var(--paper);
  font: 400 1rem/1.2 var(--body);
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: #000; color: #fff; }
.shop-count { margin: 1.25rem 0 2rem; font-size: .9375rem; }
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 2.75rem 1.25rem; }
.shop-grid > li { min-width: 0; }
@media (min-width: 45em) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 87.5em) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 3.375rem 2.5rem; } }
.bag-notes { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.5rem; border-top: 2px solid #000; padding-top: 1.75rem; }
.bag-notes p { margin: 0; }
.bag-notes strong { display: block; font: 700 .8125rem/1.5 var(--label); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
@media (min-width: 63.75em) { .bag-notes { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); } }

.set-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.75rem; padding: 3rem 0; border-bottom: 2px solid #000; }
.set-row:first-of-type { padding-top: 1rem; }
.set-row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.set-row__name { font: 600 clamp(3rem, 2rem + 4vw, 5.5rem)/1 var(--display); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: max(4px, .09em); text-underline-offset: .075em; margin-bottom: 1rem; }
.calc-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; font-size: 1rem; }
.calc-table td { padding: .55rem 0; border-bottom: 1px solid #000; }
.calc-table td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
.calc-table tr.is-sum td { font-weight: 700; border-bottom: 2px solid #000; }
.set-row__buy { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.set-row__buy select { min-height: 2.75rem; border: 2px solid #000; border-radius: var(--pill); padding: 0 1rem; font: inherit; background: #fff; }
.set-row__price { font: 600 2.5rem/1 var(--display); margin-right: .75rem; }
@media (min-width: 63.75em) {
  .set-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-gap: 3.5rem; align-items: start; }
  .set-row:nth-of-type(2) .set-row__media { order: 2; }
}
.fit-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid #000; }
.fit-list li { display: grid; grid-template-columns: minmax(0, 1fr); padding: 1rem 0; border-bottom: 2px solid #000; max-width: none; }
.fit-list b { font: 600 1.5rem/1.1 var(--display); text-transform: uppercase; }
@media (min-width: 45em) { .fit-list li { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); grid-gap: 2rem; } }

.care-split { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--mint); }
.care-split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.care-split__text { padding: 2.75rem var(--gut) 3rem; }
@media (min-width: 63.75em) {
  .care-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .care-split__text { padding: 4rem var(--gut) 4rem 3.5rem; }
}
.topic-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0 3.5rem; }
.topic { border-top: 2px solid #000; padding: 1.5rem 0 1rem; }
.topic ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.topic li { margin-bottom: .4rem; }
@media (min-width: 63.75em) { .topic-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.people { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2.5rem; }
.people__card { border-top: 2px solid #000; padding-top: 1.25rem; }
.people__role { font: 700 .8125rem/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .75rem; }
@media (min-width: 63.75em) { .people { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-gap: 5rem; } }
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2rem; counter-reset: step; }
.process li { counter-increment: step; border-left: 2px solid #000; padding: 0 0 0 1.25rem; }
.process li:before { content: counter(step); display: block; font: 600 3.5rem/1 var(--display); margin-bottom: .5rem; }
@media (min-width: 63.75em) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-pair { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.25rem; }
.photo-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 45em) { .photo-pair { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.visit { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2rem; align-items: start; }
@media (min-width: 63.75em) { .visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.map-box { border: 2px solid #000; border-radius: 1.5rem; overflow: hidden; min-height: 20rem; background: var(--tile); display: grid; place-items: center; text-align: center; padding: 1.5rem; }
.map-box iframe { width: 100%; height: 22rem; border: 0; display: block; }
.map-box:has(iframe) { padding: 0; }

.ship-table { width: 100%; border-collapse: collapse; }
@media (max-width: 44.9375em) {
  .ship-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ship-table tr { display: block; border-bottom: 2px solid #000; padding: .6rem 0; }
  .ship-table td { display: block; border: 0; padding: .2rem 0; }
  .ship-table td:first-child { font: 600 1.375rem/1.2 var(--display); text-transform: uppercase; }
}
.ship-table th,
.ship-table td { text-align: left; padding: .9rem 1rem .9rem 0; border-bottom: 2px solid #000; vertical-align: top; }
.ship-table thead th { font: 700 .8125rem/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2.5rem; }
@media (min-width: 63.75em) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: 4rem; } }
.claim { background: var(--mint); padding: 3.5rem 0 4rem; border-top: 2px solid #000; }
.claim__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2.5rem; }
@media (min-width: 63.75em) { .claim__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-gap: 4rem; } }
.claim__form { display: grid; grid-gap: 1rem; }
.claim__form label { display: grid; gap: .35rem; font-weight: 600; font-size: .9375rem; }
.claim__form input,
.claim__form textarea {
  font: 400 1rem/1.4 var(--body);
  border: .125rem solid #000;
  border-radius: var(--pill);
  padding: .85em 1.5em .65em;
  background: rgba(255,255,255,.6);
  width: 100%;
}
.claim__form textarea { border-radius: 1.5rem; min-height: 7rem; resize: vertical; }
.claim__form input[type="file"] { border-radius: 1.5rem; padding: .9rem 1rem; }
.claim__form small { font-weight: 400; color: #333; }
.claim__want { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.claim__want legend { font-weight: 600; font-size: .9375rem; margin-bottom: .4rem; width: 100%; }
.claim__want label { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
.claim__want input { width: auto; }
.claim__row { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1rem; }
@media (min-width: 45em) { .claim__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.claim-sent { display: none; background: #fff; border: 2px solid #000; border-radius: 1.25rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.claim-sent:target { display: block; }
.claim-sent--bad { background: #ffd9c7; }

.legal { padding: 3rem 0 4rem; }
.legal h2 { font: 600 1.875rem/1.15 var(--display); text-transform: uppercase; margin: 2rem 0 .6rem; }
.legal p,
.legal li { font-size: 1.0625rem; line-height: 1.6; }
.legal ul { padding-left: 1.25rem; }