/* POLYMATH — content pages: cart page, pages, contact, blog and article, 404, password page and gift card. */

.pm-page-head { text-align: left; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.pm-page-body { font-size: calc(1.08rem * var(--body-scale)); }
/* Headings inside a page stay below the page title. */
.pm-page-body h2, .pm-article__body h2 { font-size: var(--t-h3); }
.pm-page-body h3, .pm-article__body h3 { font-size: var(--t-h4); }
/* Article meta (the blog cards style it in section-story.css, which article pages don't load). */
.pm-post__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.pm-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

/* Cart page */
.pm-cart-page { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 990px) { .pm-cart-page { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .pm-cart-page__summary { position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); } }
.pm-cart-page .pm-line { grid-template-columns: 7.5rem 1fr; }
.pm-cart-page__summary { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--surface); }
.pm-cart-page__summary .pm-cart__ship { padding: 0 0 1rem; }
.pm-cart-page__extra { display: grid; gap: .5rem; }

/* Contact */
.pm-contact { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
@media (min-width: 990px) { .pm-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.pm-contact__form { display: grid; gap: 1.1rem; padding-top: clamp(0rem, 4vw, 4.5rem); }
.pm-contact__form .btn { justify-self: start; }
.pm-contact__row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .pm-contact__row { grid-template-columns: 1fr 1fr; } }

/* Article */
.pm-article__head { display: grid; gap: 1.1rem; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.pm-article__media { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.pm-article__media img { width: 100%; max-height: 80vh; object-fit: cover; border-radius: var(--radius-img); }
.pm-article__body { font-size: calc(1.1rem * var(--body-scale)); line-height: 1.75; }
.pm-article__body > p:first-child::first-letter { float: left; font-family: var(--font-heading); font-size: 4.2em; line-height: .8; padding: .08em .12em 0 0; color: var(--accent-text); }
.pm-article__share { margin-top: 2rem; }
.pm-article__back { margin-top: 3rem; }
.pm-comments { display: grid; gap: 1.5rem; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.pm-comment { padding: 1.25rem; border-radius: var(--radius); background: var(--surface); display: grid; gap: .5rem; }
.pm-comment-form { display: grid; gap: 1rem; }
.pm-comment-form .btn { justify-self: start; }

/* 404 */
.pm-404 .page-width { display: grid; justify-items: center; text-align: center; gap: 1.25rem; }
.pm-404__home { margin-top: .75rem; }
.pm-404__num { margin-bottom: .12em; display: flex; align-items: center; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(7rem, 24vw, 20rem) * var(--heading-scale)); line-height: .8; letter-spacing: -.04em; }
.pm-404__zero { display: grid; place-items: center; width: .78em; height: .78em; margin-inline: .04em; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.pm-404__zero svg { width: 45%; height: 45%; }
.js-motion .pm-404__zero { animation: pm-404-look 4s var(--ease-in-out) infinite; }
@keyframes pm-404-look { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-.08em) rotate(-12deg); } 60% { transform: translateX(.08em) rotate(10deg); } }
.pm-404 .pm-search-page__form { width: min(100%, 32rem); }

/* Password */
.pm-password-body { min-height: 100svh; }
.pm-password { position: relative; min-height: 100svh; display: grid; isolation: isolate; }
.pm-password__media { position: absolute; inset: 0; z-index: -1; }
.pm-password__media img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.pm-password__inner { display: grid; grid-template-rows: auto 1fr auto; gap: 2rem; padding-block: 2rem; }
.pm-password__body { display: grid; gap: 1.5rem; align-content: center; max-width: 46rem; }
.pm-password__form { max-width: 30rem; }
.pm-password__enter { display: grid; gap: .75rem; }
.pm-password__enter[open] summary { margin-bottom: .5rem; }
.pm-password__enter form { max-width: 26rem; }

/* Gift card */
.pm-giftcard { display: grid; gap: 1.5rem; padding-block: 3rem; }
.pm-giftcard__card { display: grid; gap: 1rem; padding: clamp(1.5rem, 5vw, 3rem); border-radius: calc(var(--radius) + 8px); box-shadow: var(--shadow-lg); }
.pm-giftcard__qr { justify-self: start; padding: .5rem; background: #fff; border-radius: 8px; }
@media print { .pm-giftcard .btn { display: none; } }

/* Customer accounts — login, register, account, addresses, order, reset and activate.
   Loaded for the customers/* page types from layout/theme.liquid. */
.pm-page-head { display: grid; gap: .75rem; }
.pm-page-head .pm-badge { justify-self: start; }
/* These page titles are followed by a line of text, so they need room for the descenders of a tall display face. */
.pm-auth__head, .pm-account__head { gap: 1rem; }
.pm-auth__head .h1, .pm-account__head .h1 { line-height: 1.1; }
address { font-style: normal; line-height: 1.6; }

/* Log in, register, reset, activate: one narrow column */
.pm-auth { width: min(100%, 30rem); margin-inline: auto; }
.pm-auth__head { text-align: center; justify-items: center; }
.pm-auth__head .muted { max-width: 34rem; }
.pm-auth__panel { display: grid; gap: 1.1rem; }
.pm-auth__form { display: grid; gap: 1.1rem; }
.pm-auth__row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .pm-auth__row { grid-template-columns: 1fr 1fr; } }
.pm-auth__actions { display: grid; gap: .75rem; }
.pm-auth__forgot { justify-self: end; margin-top: -.4rem; }
.pm-auth__alt { text-align: center; }
.pm-auth__guest { display: grid; gap: .6rem; margin-top: .5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.pm-auth__guest .btn { margin-top: .4rem; }
/* The recover panel is opened by the #recover link, and stays open on its own when its form reports an error. */
.pm-auth__recover { display: none; }
.pm-auth__recover:target,
.pm-auth__recover:has([data-form-error]) { display: grid; }
.pm-auth__recover:target ~ .pm-auth__login,
.pm-auth__recover:has([data-form-error]) ~ .pm-auth__login { display: none; }

/* Account and order layout */
.pm-account { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.pm-order { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 990px) {
  .pm-account { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .pm-order { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.pm-account__orders, .pm-order__items { display: grid; gap: 1.25rem; justify-items: start; }
.pm-account__orders > .pm-table, .pm-order__items > .pm-table { justify-self: stretch; }
.pm-account__side, .pm-order__side { display: grid; gap: 1.25rem; }
.pm-account__card { display: grid; gap: .85rem; justify-items: start; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius); background: var(--surface); }
.pm-account__card address { font-size: var(--t-small); }
.pm-account__label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }

/* Tables: order history and order line items */
.pm-table { position: relative; width: 100%; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); }
.pm-table table { min-width: 34rem; font-size: var(--t-small); }
.pm-table :is(th, td) { padding: .9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pm-table thead th { background: var(--surface); font-weight: 600; white-space: nowrap; }
.pm-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.pm-table tbody th { font-weight: 600; }
.pm-table__num { text-align: right; }

/* Order page */
.pm-order__cancelled { display: grid; gap: .25rem; justify-self: start; }
.pm-order__status { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: .25rem; }
.pm-order__status dt { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.pm-order__status dd { font-weight: 600; }
.pm-order__line { display: flex; gap: .9rem; align-items: flex-start; min-width: 14rem; }
.pm-order__thumb { flex: none; width: 4rem; aspect-ratio: 4 / 5; border-radius: calc(var(--radius) * .5); }
.pm-order__lineText { display: grid; gap: .2rem; font-weight: 400; }
.pm-order__lineText > a, .pm-order__lineText > span:first-child { font-weight: 600; }
/* Discounts are marked by the minus sign and weight, not colour: an accent that passes on the page background can
   still fail on a surface panel in some schemes. */
.pm-order__discount { color: var(--fg-muted); font-weight: 600; }
.pm-order__totals { display: grid; gap: .6rem; width: 100%; font-size: var(--t-small); }
.pm-order__totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.pm-order__totals-discount dd { color: var(--fg); font-weight: 600; }
.pm-order__totals-final { padding-top: .6rem; border-top: 1px solid var(--line); font-size: calc(1.05rem * var(--body-scale)); font-weight: 600; }

/* Addresses */
.pm-address__panel { display: grid; gap: 1rem; }
.pm-address__panel--new { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.pm-address__toggle { display: inline-flex; width: max-content; border-radius: var(--radius-btn); }
.pm-address__form { display: grid; gap: 1.1rem; width: min(100%, 34rem); padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius); background: var(--surface); }
.pm-address-list { display: grid; gap: 1.25rem; }
@media (min-width: 750px) {
  .pm-address-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
  /* An open edit form takes the whole row, so the fields are not squeezed into one card's width. */
  .pm-address:has(details[open]) { grid-column: 1 / -1; }
}
.pm-address { display: grid; gap: .85rem; align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius); border: 1px solid var(--line); }
.pm-address__default { justify-self: start; }
.pm-address__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: start; }
.pm-address__actions .pm-address__panel { gap: .85rem; }
.pm-address__panel[open] { flex: 1 0 100%; }
.pm-address__confirm { display: grid; gap: .85rem; }
.pm-address__confirm address { padding: .85rem 1rem; border-radius: var(--field-radius); background: var(--fg-subtle); font-size: var(--t-small); }
.pm-address__none { margin-top: 1rem; }