/* site.css: the pages the drafts did not have (the shop, the bag, care, thank you) and the bag's
   quantity controls. Same quiet layer as lux.css: square, one colour, the type the client chose. */

/* a page that opens on its words, not a photograph */
.page-top { padding-top: calc(var(--s-9, 96px) + var(--s-4)); }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5) var(--s-7); margin-bottom: var(--s-7); }
.page-head h1 { font-size: clamp(40px, 2.6vw + 16px, 60px); line-height: 1.05; margin: 0; }
.page-head p { margin: var(--s-3) 0 0; color: var(--muted); max-width: 46ch; }
.page-head--stack { margin-bottom: var(--s-6); }
.page-head--centre { justify-content: center; text-align: center; }
.page-head--centre p { margin-inline: auto; }

/* the shop's filter: three words, the chosen one underlined */
.filter { display: flex; gap: var(--s-5); }
.filter > button { background: none; border: 0; padding: var(--s-2) 0; color: var(--muted); font: inherit; cursor: pointer;
                   border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.filter > button > span { font-size: var(--t-small); margin-left: 2px; }
.filter > button:hover { color: var(--ink); }
.filter > button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.filter > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.shop__group[hidden], .shop__drops[hidden] { display: none; }
.shop .section-head { margin-bottom: var(--s-5); }
@media (min-width: 640px) { .shop .grid--studs .tile { --tile-ratio: 3 / 4; } }

/* the bag: in the sheet and on its page */
.bag__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.bag__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; }
.bag__pic { display: block; }
.bag__row img { width: 72px; height: 72px; object-fit: contain; background: var(--surface); padding: 8px; border-radius: 0; }
.bag__info { display: grid; gap: 2px; }
.bag__info > a { text-decoration: none; }
.bag__info > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bag__ctl { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); height: 34px; }
.qty > button { width: 34px; height: 100%; background: none; border: 0; color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.qty > button:disabled { color: var(--muted); cursor: default; }
.qty > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.qty > output { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.bag__remove { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: var(--t-small); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.bag__remove:hover { color: var(--ink); }
.bag__line { font-variant-numeric: tabular-nums; }
.bag__foot > .btn { width: 100%; height: 50px; }
.bag__view { justify-self: center; }
.bag[open] { overflow-y: auto; }

.bagpage__grid { align-items: start; }
.bag__list--page { gap: 0; border-top: 1px solid var(--line); }
.bag__list--page > .bag__row { grid-template-columns: 120px minmax(0, 1fr) auto; padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.bag__list--page img { width: 120px; height: 120px; padding: 12px; }
.bag__empty { display: grid; gap: var(--s-5); justify-items: start; padding-block: var(--s-6); border-top: 1px solid var(--line); }
.bagpage__sum { display: grid; gap: var(--s-4); background: var(--surface); padding: var(--s-6); }
.bagpage__sum h2 { margin: 0; }
.sum { margin: 0; display: grid; gap: var(--s-3); }
.sum > div { display: flex; justify-content: space-between; gap: var(--s-4); }
.sum dt { color: var(--muted); }
.sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.bagpage__checkout { width: 100%; height: 52px; }
@media (max-width: 1023px) { .bagpage__sum { grid-column: 1 / -1; margin-top: var(--s-6); } .bagpage__list { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .bag__list--page > .bag__row { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .bag__list--page img { width: 84px; height: 84px; padding: 8px; }
}

/* care: three habits, numbered in the display face */
.habits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); align-content: start; }
.habit { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.habit:last-child { border-bottom: 0; }
.habit__n { font: 400 44px/1 var(--font-display); color: var(--muted); }
.habit h2 { font-size: clamp(24px, 1vw + 16px, 30px); margin: 0 0 var(--s-2); }
.habit p { margin: 0; max-width: 48ch; }

/* thank you */
.thanks .wrap { display: grid; justify-items: center; align-content: center; min-height: 50svh; }
.thanks__row { justify-content: center; }
/* a phone: square tiles, the head closer, so the studs and the head share one screen */
@media (max-width: 639px) {
  .shop .tile { --tile-ratio: 1 / 1; }
  .shop .page-head { margin-bottom: var(--s-5); gap: var(--s-4); }
  .shop .section-head { margin-bottom: var(--s-4); }
  .shop .grid { row-gap: var(--s-5); }
}

/* the shop filtered to one kind: its first screen closes up round what is left, so the drops
   come straight under the head instead of a screen below it */
main > .section.shop.is-filtered { min-height: 0; height: auto; padding-bottom: var(--s-6); }
main > .section.shop__drops.is-filtered { min-height: 0; height: auto; padding-top: 0; }

/* spec rows: a long value wraps under its name on a narrow screen instead of running into it */
.rows--spec .rows__value { white-space: normal; }
@media (max-width: 639px) {
  .rows--spec > li { grid-template-columns: auto minmax(0, 1fr); }
  .rows--spec .rows__name { white-space: nowrap; }
  #specs .faq--tight { display: none; }   /* a phone keeps the specs to one screen; the care guide is a link away */
}
.specs__care { margin-top: var(--s-5); }

/* a phone: the odd last tile under "More pearl earrings" stays half width like the others */
@media (max-width: 639px) { #more .grid > .tile:is(.span-3, .span-4):nth-child(odd of .tile):nth-last-child(1 of .tile) { grid-column: auto / span 6; } }

/* the name, one way everywhere: FLOW MOON in capitals, the letters spaced. The space after the last
   letter is given back on the left where the name is centred, so the letters sit on the centre */
.nav__logo { font-family: var(--font-display); letter-spacing: .3em; }
@media (min-width: 1024px) { .nav--split .nav__logo { padding-left: .3em; } }
@media (max-width: 639px) { .nav--split .nav__logo { letter-spacing: .26em; } }   /* a phone: the spaced name, the button and the menu on one line */
@media (max-width: 379px) { .nav--split .nav__logo { font-size: 17px; letter-spacing: .22em; } }
.close__word { letter-spacing: .14em; }
.closing__cta.close--word, .close__word { min-width: 0; }   /* the spaced name is wider than the line before it is fitted: it must not stretch the close */
.brand { letter-spacing: .16em; }

/* studio photographs (a product with photos/shot/), on the same stone grey as the cut-outs (the retouch
   sets them on #ededeb). In a tile the pair cropped from the photograph sits like a cut-out; on hover the
   photograph of the pair on the ear fills the tile */
.gallery__main, .frame--photo { background: var(--surface); }
.tile__media--cut > .tile__alt--photo { padding: 0; object-fit: cover; }
.menu-card .panel > img.cut--shot { padding: 7% 10% 3%; }   /* its reflection runs into the lower padding, so the pair matches the cut-outs */

/* the product page's gallery: the photograph large, the thumbnails in a row under it, the chosen one
   underlined like the shop's filter */
.hero__media.gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-3); background: none; overflow: visible; }
.gallery__main { position: relative; overflow: clip; min-height: 0; }
.gallery__main > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity .25s var(--ease); }
.gallery__main > img.is-swapping { opacity: 0; }
.gallery__thumbs { display: flex; gap: var(--s-3); padding-bottom: 7px; }
.gallery__thumbs > button { position: relative; flex: none; width: 64px; aspect-ratio: 1; padding: 0; border: 0; background: var(--surface); cursor: pointer;
                            opacity: .6; transition: opacity var(--dur) var(--ease); }
.gallery__thumbs > button > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--ink); opacity: 0; transition: opacity var(--dur) var(--ease); }
.gallery__thumbs > button:hover, .gallery__thumbs > button[aria-pressed="true"] { opacity: 1; }
.gallery__thumbs > button[aria-pressed="true"]::after { opacity: 1; }
.gallery__thumbs > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 639px) { .gallery__thumbs { gap: var(--s-2); } .gallery__thumbs > button { width: 52px; } }
/* the other size, which has no photographs yet: its cut-out sits in the frame, and the thumbnails (of the
   size that has them) step back until that size is chosen again */
.gallery__main > img.is-cut, .gallery__main > img.is-plain { object-fit: contain; }   /* a pair on the plain grey is shown whole */
.gallery.is-other .gallery__thumbs { visibility: hidden; }
.gallery__thumbs[hidden] { display: none; }   /* the other size's thumbnails */
@media (prefers-reduced-motion: reduce) { .gallery__main > img { transition: none; } }
/* a phone: the heading, then the pair on the ear (square, the ear kept in), then the close-up */
@media (max-width: 639px) {
  .tall-small--photo > .split-col { display: contents; }
  .tall-small--photo > .split-col > * { grid-column: 1 / -1; }
  .tall-small--photo > .split-col > .section-head { order: -2; }
  .tall-small--photo > .frame { order: -1; --ratio: 100% !important; }
  .tall-small--photo > .frame > .frame__img { object-position: 50% 35%; }
  .tall-small--photo .split-col__end .frame.small { margin-top: 0; }
}

/* a pair that runs off its photograph (an editorial crop, noted by shots.py): the side it runs off is laid
   on the frame's edge, so the pair runs off the frame too instead of stopping in mid-air */
:is(.gallery__main, .tile__media--cut, .menu-card .panel) > img.bleed-r { object-position: 100% 50%; padding-right: 0; }
:is(.gallery__main, .tile__media--cut, .menu-card .panel) > img.bleed-l { object-position: 0 50%; padding-left: 0; }