/*
 * app-pages.css — the legacy Shopify "app pages", rebuilt.
 *
 * One sheet for /design-studio, /collab, /bundles, /reviews,
 * /review-submission, /artists, /wishlist, /contact and the five retired
 * PowerBuy URLs. It loads only on those pages (inc/app-pages.php).
 *
 * The geometry is `sections/s6m-page-shell.liquid`'s own: the same
 * clamp(40px, 11vw, 80px) display title, the same 540px subtitle measure, the
 * same 2-up / 4-up product grid. Colours and type come from tokens.css so the
 * pages cannot drift from the rest of the storefront.
 */

/* ---------------------------------------------------------------- shell */

.sixm-apppage--wide .sixm-page__article { max-width: 1200px; }

.sixm-pageshell { padding-bottom: 8px; }

.sixm-pageshell__head { margin-bottom: 28px; }

.sixm-pageshell__eyebrow {
  display: block;
  color: var(--6m-signal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sixm-pageshell__title {
  font-family: var(--6m-display);
  font-size: clamp(40px, 11vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--6m-ink);
}

.sixm-pageshell__sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--6m-muted);
  margin: 14px 0 0;
  max-width: 540px;
}

.sixm-pageshell__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--6m-ink-2);
  max-width: 62ch;
  margin: 0 0 20px;
}

.sixm-pageshell__body { margin-bottom: 28px; }

.sixm-pageshell__empty { color: var(--6m-muted); }

.sixm-pageshell__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
}

.sixm-pageshell__link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--6m-ink);
  border-bottom: 2px solid var(--6m-ink);
  padding-bottom: 2px;
}

.sixm-pageshell__link:hover,
.sixm-pageshell__link:focus-visible { color: var(--6m-signal); border-color: var(--6m-signal); }

.sixm-pageshell__products { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--6m-line); }

.sixm-pageshell__grid-eyebrow {
  display: block;
  color: var(--6m-signal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ------------------------------------------------------- design studio */

.sixm-studio__steps {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  gap: 22px;
}

@media (min-width: 768px) { .sixm-studio__steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.sixm-studio__step { border-top: 2px solid var(--6m-ink); padding-top: 12px; }
.sixm-studio__step-n { display: block; font-size: 12px; color: var(--6m-muted); letter-spacing: 0.1em; }
.sixm-studio__step-h { font-size: 16px; font-weight: 800; margin: 8px 0 6px; text-transform: uppercase; letter-spacing: 0.01em; }
.sixm-studio__step-b { font-size: 14px; line-height: 1.55; color: var(--6m-ink-2); margin: 0; }

.sixm-studio__blanks { margin-bottom: 44px; }

.sixm-studio__form-h,
.sixm-collab__form-h,
.sixm-contactform__h {
  font-family: var(--6m-display);
  font-size: clamp(26px, 6vw, 38px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.sixm-studio__trust {
  list-style: none;
  margin: 34px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--6m-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 13px;
  color: var(--6m-muted);
}

.sixm-studio__trust li::before { content: "\2713"; color: var(--6m-signal); margin-inline-end: 7px; }

/* -------------------------------------------------------------- collab */

.sixm-collab__points {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  gap: 22px;
}

@media (min-width: 768px) { .sixm-collab__points { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.sixm-collab__point { border-top: 2px solid var(--6m-ink); padding-top: 12px; }
.sixm-collab__point-h { font-size: 16px; font-weight: 800; margin: 0 0 6px; text-transform: uppercase; }
.sixm-collab__point p { font-size: 14px; line-height: 1.55; color: var(--6m-ink-2); margin: 0; }

/* ------------------------------------------------------------- bundles */

.sixm-bundles__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

@media (min-width: 768px) { .sixm-bundles__list { grid-template-columns: repeat(3, 1fr); } }

.sixm-bundles__offer { border: 1px solid var(--6m-line); padding: 20px 18px; }
.sixm-bundles__tag { display: block; font-size: 11px; letter-spacing: 0.12em; color: var(--6m-signal); margin-bottom: 10px; }
.sixm-bundles__h { font-size: 19px; font-weight: 800; margin: 0 0 8px; line-height: 1.2; }
.sixm-bundles__b { font-size: 14px; line-height: 1.55; color: var(--6m-ink-2); margin: 0; }
.sixm-bundles__code { font-size: 13px; margin: 12px 0 0; color: var(--6m-muted); }
.sixm-bundles__code code {
  font-family: var(--6m-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--6m-ink);
  background: var(--6m-bg-2);
  padding: 3px 8px;
  letter-spacing: 0.05em;
}
.sixm-bundles__note { font-size: 13px; color: var(--6m-muted); margin: 18px 0 0; }

/* --------------------------------------------------------- review wall */

.sixm-reviewwall__agg {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--6m-line);
}

.sixm-reviewwall__score { font-family: var(--6m-display); font-size: clamp(36px, 8vw, 54px); line-height: 1; }
.sixm-reviewwall__count { font-size: 14px; color: var(--6m-muted); }

/* Five hollow stars with a filled copy clipped to the exact fraction, so 4.52
   reads as 4.52 rather than rounding up to a perfect five. */
.sixm-stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1; }
.sixm-stars__row { display: block; letter-spacing: 0.06em; }
.sixm-stars__row--on {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  white-space: nowrap;
}
.sixm-stars__s { color: var(--6m-line-solid, #d8d8d8); font-size: 17px; }
.sixm-stars__row--on .sixm-stars__s { color: var(--6m-signal); }
.sixm-stars__num { font-size: 12px; color: var(--6m-muted); margin-inline-start: 6px; }

.sixm-reviewwall__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

@media (min-width: 700px) { .sixm-reviewwall__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sixm-reviewwall__list { grid-template-columns: repeat(3, 1fr); } }

.sixm-reviewwall__item {
  border: 1px solid var(--6m-line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sixm-reviewwall__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--6m-ink);
  /* Reviews vary from six words to six paragraphs. Clamping keeps the grid
     from turning into one very tall column, and the full text is always on
     the product page the card links to. */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sixm-reviewwall__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--6m-muted);
}

.sixm-reviewwall__author { font-weight: 700; color: var(--6m-ink); }
.sixm-reviewwall__verified { font-size: 10px; letter-spacing: 0.1em; color: var(--6m-signal); }
.sixm-reviewwall__product { flex-basis: 100%; color: var(--6m-ink-2); font-size: 12px; text-underline-offset: 3px; }
.sixm-reviewwall__product:hover { color: var(--6m-signal); }

/* --------------------------------------------------------------- forms */

.sixm-form { max-width: 720px; }

.sixm-form__intro { font-size: 15px; line-height: 1.6; color: var(--6m-ink-2); margin: 0 0 20px; max-width: 62ch; }

.sixm-form__note { border-inline-start: 3px solid var(--6m-ink); padding: 12px 16px; margin: 0 0 22px; background: var(--6m-bg-2); }
.sixm-form__note p { margin: 0; font-size: 15px; }
.sixm-form__note ul { margin: 8px 0 0; padding-inline-start: 1.1em; font-size: 14px; }
.sixm-form__note--ok { border-color: var(--6m-signal); }
.sixm-form__note--error { border-color: #b00020; }

.sixm-form__grid { display: grid; gap: 16px; }

@media (min-width: 640px) { .sixm-form__grid { grid-template-columns: repeat(2, 1fr); } }

.sixm-form__row { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sixm-form__row--wide { grid-column: 1 / -1; }

.sixm-form__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--6m-ink); }
.sixm-form__req { color: var(--6m-signal); }
.sixm-form__hint { font-size: 12px; color: var(--6m-muted); }

.sixm-form__input {
  width: 100%;
  max-width: 100%;
  /* 44px is the smallest comfortable touch target; 12px padding on a 15px line
     lands at 38px on a phone, which is a miss waiting to happen. */
  min-height: 44px;
  font-family: var(--6m-sans);
  font-size: 15px;
  color: var(--6m-ink);
  background: #fff;
  border: 1px solid var(--6m-line);
  border-radius: 0;
  padding: 12px 14px;
  -webkit-appearance: none;
  appearance: none;
}

select.sixm-form__input {
  /* A native select with appearance:none loses its arrow; this is the one the
     rest of the theme uses on the collection sort control. */
  background-image: linear-gradient(45deg, transparent 50%, var(--6m-ink) 50%), linear-gradient(135deg, var(--6m-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 34px;
}

.sixm-form__input:focus-visible { outline: 2px solid var(--6m-ink); outline-offset: 1px; border-color: var(--6m-ink); }

textarea.sixm-form__input { min-height: 120px; resize: vertical; }

.sixm-form__submit {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  background: var(--6m-ink);
  color: #fff;
  font-family: var(--6m-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sixm-form__submit:hover { background: var(--6m-signal); }
.sixm-form__submit:focus-visible { outline: 2px solid var(--6m-signal); outline-offset: 2px; }

.sixm-form__legal { font-size: 12px; color: var(--6m-muted); margin: 14px 0 0; }

/* The honeypot is never shown and never announced. It is not `display:none`,
   because some bots skip what is display:none — it is moved off-screen. */
.sixm-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sixm-reviewform__rating { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sixm-reviewform__rating legend { padding: 0; margin-bottom: 8px; }
.sixm-reviewform__star {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline-end: 4px;
  color: var(--6m-ink-2);
  cursor: pointer;
}
.sixm-reviewform__star input { accent-color: var(--6m-signal); }

.sixm-contactform { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--6m-line); }

/* -------------------------------------------------------- artists A–Z */

.sixm-axi__search { margin: 0 0 18px; max-width: 420px; }
.sixm-axi__search input {
  width: 100%;
  font-family: var(--6m-sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--6m-line);
  border-radius: 0;
  background: #fff;
  color: var(--6m-ink);
  -webkit-appearance: none;
  appearance: none;
}
.sixm-axi__search input:focus-visible { outline: 2px solid var(--6m-ink); outline-offset: 1px; }

.sixm-axi__az {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  padding: 12px 0;
  margin: 0 0 8px;
  border-top: 1px solid var(--6m-line);
  border-bottom: 1px solid var(--6m-line);
  font-family: var(--6m-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.sixm-axi__az a,
.sixm-axi__az span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  text-decoration: none;
  color: var(--6m-ink);
}

.sixm-axi__az a:hover,
.sixm-axi__az a:focus-visible { background: var(--6m-ink); color: #fff; }
.sixm-axi__az .is-empty { color: var(--6m-muted-2); }

.sixm-axi__group { margin-top: 34px; scroll-margin-top: 80px; }

.sixm-axi__letter {
  font-family: var(--6m-display);
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--6m-ink);
}

.sixm-axi__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }

@media (min-width: 768px) { .sixm-axi__list { columns: 3; } }
@media (min-width: 1100px) { .sixm-axi__list { columns: 4; } }

.sixm-axi__item { break-inside: avoid; }

.sixm-axi__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 15px;
  text-decoration: none;
  color: var(--6m-ink);
  border-bottom: 1px solid var(--6m-line-2);
}

.sixm-axi__link:hover,
.sixm-axi__link:focus-visible { color: var(--6m-signal); }
.sixm-axi__count { font-size: 11px; color: var(--6m-muted-2); }

.sixm-axi__noresults { margin-top: 26px; color: var(--6m-muted); }

/* ------------------------------------------------------------ wishlist */

.sixm-wishlist__count { font-size: 12px; letter-spacing: 0.1em; color: var(--6m-muted); margin: 0 0 18px; }
.sixm-wishlist__empty p { font-size: 16px; color: var(--6m-ink-2); margin: 0; }
.sixm-wishlist__actions { margin: 26px 0 0; }

.sixm-wishlist__clear {
  background: none;
  border: 1px solid var(--6m-line);
  border-radius: 0;
  padding: 11px 22px;
  font-family: var(--6m-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--6m-ink);
  cursor: pointer;
}

.sixm-wishlist__clear:hover { border-color: var(--6m-ink); background: var(--6m-bg-2); }

/* A saved heart, wherever it is drawn. `is-saved` is the only class the script
   adds, so both button shapes light up from one rule. */
.sixm-card__wish.is-saved,
.s6m-pdp__wish.is-saved { color: var(--6m-signal); }
.sixm-card__wish.is-saved svg,
.s6m-pdp__wish.is-saved svg { fill: currentColor; }
.sixm-card__wish.is-saved { opacity: 1; }

/* ------------------------------------------------------------ lookbook */

.sixm-lb__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--6m-muted);
  margin: 0 0 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--6m-line);
}

.sixm-lb__vol { margin-top: 56px; }

.sixm-lb__folio {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--6m-muted-2);
  margin: 0 0 14px;
}

.sixm-lb__frames { display: grid; gap: 10px; }

@media (min-width: 768px) { .sixm-lb__frames--2 { grid-template-columns: 1fr 1fr; align-items: start; } }

.sixm-lb__frame {
  margin: 0;
  background: var(--6m-bg-2);
  overflow: hidden;
  max-width: 100%;
}

.sixm-lb__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sixm-lb__copy { margin-top: 22px; max-width: 62ch; }
.sixm-lb__sub { font-size: 11px; letter-spacing: 0.14em; color: var(--6m-signal); margin: 0 0 8px; }

.sixm-lb__title {
  font-family: var(--6m-display);
  font-size: clamp(30px, 7vw, 56px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.sixm-lb__body { font-size: 16px; line-height: 1.6; color: var(--6m-ink-2); margin: 0 0 12px; }

.sixm-lb__pq {
  font-family: var(--6m-serif, var(--6m-display));
  font-size: clamp(18px, 3.4vw, 24px);
  line-height: 1.3;
  color: var(--6m-ink);
  margin: 0;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--6m-signal);
}

.sixm-lb__grid { margin-top: 26px; }

.sixm-lb__quote {
  margin-top: 56px;
  padding: 44px 22px;
  background-color: var(--6m-bg-2);
  background-size: cover;
  background-position: center;
  text-align: center;
}

.sixm-lb__quote blockquote {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--6m-display);
  font-size: clamp(22px, 5vw, 38px);
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.75);
}

.sixm-lb__quote cite {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

.sixm-lb__next {
  margin-top: 56px;
  padding: 56px 22px;
  background-color: var(--6m-ink);
  background-size: cover;
  background-position: center 30%;
  color: #fff;
  text-align: center;
}

.sixm-lb__next p { margin: 0; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.8); }
.sixm-lb__next .sixm-mono { font-size: 11px; letter-spacing: 0.16em; color: var(--6m-signal-on-dark, #ff6b6b); }

.sixm-lb__next-title {
  font-family: var(--6m-display);
  font-size: clamp(38px, 10vw, 76px);
  line-height: 1;
  text-transform: uppercase;
  margin-top: 8px !important;
}

.sixm-lb__next-date { margin-top: 10px !important; font-size: 13px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.86); }