/*
  pages.css
  Layout for the content pages: About, FAQ, Size guide, Shipping and
  returns, Contact, Search, 404, and the customer account pages. Loaded
  only on those templates.
*/

/* Shared page header (sections/main-page.liquid) */
.page-head { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 0.9rem; }
.page-head__title { font-weight: 400; }
.page-head__lead { max-width: 56ch; color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.45; }
.page-body { padding-bottom: var(--section-space); }
.prose { display: grid; gap: 1rem; max-width: 62ch; }
.prose h2 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; margin-top: 1.25rem; line-height: 1.15; }
.prose p, .prose li { color: var(--color-text-muted); }
.prose ul { display: grid; gap: 0.4rem; padding-left: 1.1rem; list-style: disc; }
.two-col { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } .two-col__aside { position: sticky; top: calc(var(--header-height) + 1.5rem); } }

/* About (sections/story-chapters.liquid, values-row.liquid, founder-note.liquid) */
.chapters { position: relative; display: grid; gap: clamp(4rem, 10vw, 8rem); padding-block: var(--section-space); }
.chapter { display: grid; gap: 1.5rem; align-items: center; }
.chapter__media { border-radius: var(--radius); overflow: hidden; background: var(--color-surface); }
.chapter__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.chapter--wide .chapter__media img { aspect-ratio: 16 / 10; }
.chapter__text { display: grid; gap: 1rem; max-width: 46ch; }
.chapter__text p { color: var(--color-text-muted); }
@media (min-width: 900px) {
  .chapter { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 7rem); }
  .chapter:nth-child(even) .chapter__media { order: 2; }
  .chapter--wide { grid-template-columns: 7fr 5fr; }
  .chapter--wide:nth-child(even) { grid-template-columns: 5fr 7fr; }
}
.values { padding-block: var(--section-space); border-top: 1px solid var(--color-border); }
.values__grid { display: grid; gap: 2rem; }
.values__item { display: grid; gap: 0.5rem; align-content: start; }
.values__item h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; }
.values__item p { color: var(--color-text-muted); max-width: 34ch; }
@media (min-width: 768px) { .values__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.note { padding-block: var(--section-space); }
.note__inner { display: grid; gap: 1.25rem; max-width: 48ch; margin-inline: auto; text-align: left; }
.note__inner p { font-family: var(--font-heading); font-size: var(--text-xl); line-height: 1.3; }
.note__sign { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); }

/* FAQ (sections/faq.liquid) */
.faq-group { display: grid; gap: 0.5rem; margin-bottom: 2.5rem; }
.faq-group h2 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; margin-bottom: 0.5rem; }
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 60px; font-weight: 500; padding-block: 0.75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; transition: transform var(--duration) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq__answer { padding-bottom: 1.25rem; color: var(--color-text-muted); max-width: 60ch; display: grid; gap: 0.6rem; }
.help-card { display: grid; gap: 0.75rem; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius); }

/* Size guide and shipping tables (sections/size-guide.liquid, shipping-returns.liquid) */
.table-wrap:focus-visible { outline-offset: -2px; }
.table-wrap { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: 0.7rem 0.6rem; text-align: left; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.table th { font-weight: 500; font-size: var(--text-xs); color: var(--color-text-muted); }
.table td:first-child { font-weight: 500; }
.size-block { display: grid; gap: 1rem; margin-bottom: 3rem; }
.size-block h2 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; }
.units { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; justify-self: start; }
.units button { padding: 0.45rem 1rem; font-size: var(--text-xs); font-weight: 500; }
.units button[aria-pressed="true"] { background: var(--color-text); color: var(--color-background); }
.measure-steps { display: grid; gap: 1rem; counter-reset: step; }
.measure-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; color: var(--color-text-muted); }
.measure-steps li::before { counter-increment: step; content: counter(step); font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-text); line-height: 1.2; }
.measure-steps strong { color: var(--color-text); font-weight: 500; }

/* Contact (sections/contact.liquid) */
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field__input--area { min-height: 160px; padding-block: 0.75rem; resize: vertical; }
.contact-aside { display: grid; gap: 1.25rem; }
.contact-aside h2 { font-size: var(--text-sm); font-weight: 500; }
.contact-aside p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Search results (sections/main-search.liquid) */
.search-page__form { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--color-text); max-width: 720px; }
.search-page__form input { flex: 1; min-height: 64px; border: 0; background: transparent; font-family: var(--font-heading); font-size: var(--text-2xl); padding: 0; }
.search-page__form input:focus-visible { outline: none; }
.search-page__meta { margin-block: 1.25rem 2rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.search-page__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--grid-gap) * 2) var(--grid-gap); }
@media (min-width: 1024px) { .search-page__grid { grid-template-columns: repeat(4, 1fr); } }
.search-page__pages { display: grid; gap: 0.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); max-width: 480px; }
.search-page__pages a { display: flex; justify-content: space-between; padding: 0.5rem 0; }

/* 404 (sections/main-404.liquid) */
.lost { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--section-space); }
.lost__inner { display: grid; gap: 1.25rem; justify-items: center; }
.lost__word { font-family: var(--font-devanagari); font-size: var(--text-4xl); line-height: 1.1; color: var(--color-maroon); }
.lost__links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

/* Customer pages (templates/customers/*.json) */
.auth { display: grid; place-items: start center; padding-block: clamp(2.5rem, 8vw, 6rem) var(--section-space); }
.auth__card { width: min(100%, 440px); display: grid; gap: 1.5rem; }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--color-border); }
.auth__tabs button { padding: 0.8rem 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth__tabs button[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-text); }
.auth form { display: grid; gap: 1rem; }
.auth__alt { font-size: var(--text-sm); color: var(--color-text-muted); }
.account-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .account-grid { grid-template-columns: 2fr 1fr; gap: 4rem; } }
.account-card { display: grid; gap: 0.5rem; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius); align-content: start; }
.status { display: inline-block; padding: 0.2rem 0.5rem; border-radius: var(--radius); font-size: var(--text-xs); background: var(--color-surface); }
.status--made { background: rgba(232, 163, 23, 0.18); }
.status--sent { background: rgba(63, 107, 58, 0.16); }

/* Grid children must be allowed to shrink so wide tables scroll inside their wrapper */
.account-grid > *, .two-col > * { min-width: 0; }