/*
  Plumbing: layout-only rules for the secondary templates (404, page, blog,
  article, search, collections list, customer account, gift card, password).
  Typography, color and the base utility classes live in theme.css.
  This file only arranges those utilities into rows, lists and forms.
*/

.ps-404 {
  text-align: center;
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}

.ps-404__mark {
  font-size: 96px;
  color: var(--ink-faint);
  margin: 0 0 var(--sp-4);
}

/* Lists of rows: blog, search, collections, orders, addresses */
.ps-blog__list,
.ps-search__list,
.ps-list-collections__list,
.ps-account__order-list,
.ps-account__address-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-blog__link,
.ps-search__link,
.ps-list-collections__link,
.ps-account__order-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--sp-6) 0;
}

.ps-account__order-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4);
}

.ps-account__address-row {
  padding: var(--sp-6) 0;
}

.ps-article__image {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--sp-6) 0;
}

.ps-article__content {
  margin-top: var(--sp-4);
}

.ps-article__tags {
  margin-top: var(--sp-6);
}

.ps-article__comments {
  margin-top: var(--sp-12);
}

.ps-article__comment {
  padding: var(--sp-4) 0;
}

/* Pagination */
.ps-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* Forms */
.ps-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 44ch;
  margin-top: var(--sp-6);
}

.ps-form--inline {
  margin-top: var(--sp-2);
}

.ps-field--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}

.ps-field--checkbox .ps-label {
  margin: 0;
}

/* Disclosure widgets used for recover / add / edit address panels */
.ps-account__new-address,
.ps-account__edit-address {
  margin-top: var(--sp-6);
}

.ps-account__new-address summary,
.ps-account__edit-address summary {
  cursor: pointer;
  padding: var(--sp-2) 0;
}

.ps-account__new-address[open] summary,
.ps-account__edit-address[open] summary {
  margin-bottom: var(--sp-2);
}

.ps-account__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.ps-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Order detail */
.ps-order__item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}

.ps-order__totals {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ps-order__totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}

.ps-order__totals-row--total {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}

.ps-order__addresses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
  margin-top: var(--sp-6);
}

/* Gift card, print-friendly, centred on its own sheet */
.ps-gift-card {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}

.ps-gift-card__balance {
  font-size: 48px;
  margin: var(--sp-4) 0 0;
}

.ps-gift-card__code {
  font-size: 24px;
  letter-spacing: 0.04em;
}

.ps-gift-card__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* Password page */
.ps-password {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}

.ps-password__panel {
  max-width: 52ch;
  width: 100%;
}