/* Prairie Desk: store pages (shop, subjects, free lessons, search, items, request).
   Tokens only; no hex values here. Spec: 02-design.md sections 9.3 to 9.8 and 11. */

/* Subject folder colours: one job each (tabs, cover top edges, the pulled band). */
.c-music { --c: var(--music); }
.c-life { --c: var(--life); }
.c-social { --c: var(--social); }
.c-science { --c: var(--science); }
.c-reading { --c: var(--reading); }
.c-math { --c: var(--math); }

.store { padding-bottom: var(--s-9); }
@media (max-width: 767px) { .store { padding-bottom: var(--s-8); } }

/* ---------- Breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); font-size: var(--fs-small); font-weight: 500; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); }
.crumbs li + li::before { content: "/"; color: var(--text-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }

/* ---------- Page head (shop, subject, free) ---------- */
.page-head { padding-top: var(--s-5); padding-bottom: var(--s-7); }
.page-head .h1-page { margin-top: var(--s-3); }
.page-line { margin-top: var(--s-3); max-width: 60ch; color: var(--text-muted); }
/* Subject pages: the folder is pulled. Its tab sits on a 12px band in the subject colour. */
.page-head--subject { padding-bottom: 0; }
.pulled-tab {
  display: inline-flex; align-items: center; height: var(--tab-h); margin-top: var(--s-4); padding: 0 var(--s-5);
  background: var(--c); color: var(--cream); border-radius: var(--r-tab) var(--r-tab) 0 0;
  font-family: var(--font-display); font-size: var(--fs-chip); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  vertical-align: bottom;
}
.pulled-band { height: 12px; background: var(--c); }
.page-head--subject .page-head-text {
  padding-top: var(--s-6); padding-bottom: var(--s-7);
}
.page-head--subject .page-head-text .h1-page { margin-top: 0; }
.also-tpt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-4); margin-top: var(--s-4); }
.also-tpt > p { color: var(--text-muted); }
.also-tpt ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.also-tpt a { display: inline-block; padding-block: var(--s-2); line-height: 28px; color: var(--text); font-weight: 500; font-size: var(--fs-small); }
.also-tpt a svg { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-left: var(--s-1); color: var(--c); }
.nowrap { white-space: nowrap; }

/* ---------- Shop layout: filter rail + results ---------- */
.shop-layout { align-items: start; row-gap: var(--s-5); }
.filters { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.filters > summary { display: none; }
.results { grid-column: 4 / -1; }
.rail-group + .rail-group, .rail-group + noscript + .js-filters, .js-filters .rail-group + .rail-group { margin-top: var(--s-6); }
.js-filters { margin-top: var(--s-6); }
.rail-h { display: block; margin-bottom: var(--s-3); font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 600; line-height: 1.2; color: var(--text); }
legend.rail-h { padding: 0; }
.rail-note { margin-top: var(--s-4); }
.rail-all { margin-top: var(--s-2); font-size: var(--fs-small); }

.subject-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.subject-tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3);
  background: var(--paper); color: var(--text); text-decoration: none;
  border-bottom: 3px solid var(--c); border-radius: var(--r-tab) var(--r-tab) 0 0;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.2;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}
.subject-tab:hover { background: color-mix(in srgb, var(--c) 8%, var(--paper)); }
.subject-tab:active { transform: scale(0.97); }
.subject-tab[aria-current="page"] { background: var(--c); color: var(--cream); font-weight: 600; }

.check { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; cursor: pointer; font-size: var(--fs-small); font-weight: 500; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--green-800); }

.text-button {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--link); font-weight: 600; font-size: var(--fs-small);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: transform 140ms var(--ease-out);
}
.text-button:active { transform: scale(0.97); }
.text-button svg { width: 16px; height: 16px; flex: none; }
.js-filters .text-button { margin-top: var(--s-4); }

.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); min-height: 44px; }
.results-count { font-weight: 600; font-size: var(--fs-ui); }
.sort { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); font-weight: 600; }
.sort[hidden] { display: none; }
.select {
  min-height: 44px; padding: 0 var(--s-3); background: var(--paper); color: var(--text);
  border: 1.5px solid var(--field-line); border-radius: var(--r-input); font-size: var(--fs-small); font-weight: 500;
}
select.input { padding-inline: var(--s-3); font-size: var(--fs-ui); }

/* Tablet and phone: the rail folds into a Filters pill above the grid. */
@media (max-width: 1023px) {
  .filters, .results { grid-column: 1 / -1; }
  .filters { position: relative; top: auto; }
  .filters > summary {
    list-style: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
    border: 1.5px solid var(--field-line); border-radius: var(--r-pill); background: var(--paper);
    font-size: var(--fs-ui); font-weight: 600; cursor: pointer; transition: transform 140ms var(--ease-out);
  }
  .filters > summary:active { transform: scale(0.97); }
  .filters > summary::-webkit-details-marker { display: none; }
  .filters > summary svg { width: 20px; height: 20px; }
  .filters[open] > summary { background: var(--surface); border-color: var(--green-800); }
  .filters-body { margin-top: var(--s-3); padding: var(--s-5); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-float); }
  .js-filters { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
  .js-filters[hidden] { display: none; }
  .js-filters .rail-group + .rail-group { margin-top: 0; }
  .js-filters .text-button { grid-column: 1 / -1; justify-self: start; }
}
.filter-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--action); color: var(--action-text); border-radius: var(--r-pill); font-size: var(--fs-chip);
}
.filter-count[hidden] { display: none; }

/* ---------- Product grid and cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); } }
@media (max-width: 1023px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .product-grid { gap: var(--s-5) var(--s-4); } }
.card-cell[hidden] { display: none; }
.product-grid.is-swapping { animation: swap-in 120ms ease; }
@keyframes swap-in { from { opacity: 0.4; } }

.pcard {
  display: flex; flex-direction: column; height: 100%; padding: var(--s-4);
  background: var(--surface); color: var(--text); text-decoration: none;
  border-radius: var(--r-card); box-shadow: var(--shadow-float);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pcard .cover { transition: transform 200ms var(--ease-out); }
.pcard:active { transform: scale(0.98); }
.pcard-title {
  margin-top: var(--s-2); font-family: var(--font-display); font-size: var(--fs-card); font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance;
}
.pcard-meta { margin-top: var(--s-1); color: var(--text-muted); }
.pcard:focus-visible { outline-offset: 4px; border-radius: var(--r-card); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-float-lift); }
  .pcard:hover > .cover { transform: translateY(-3px); }
}
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { box-shadow: var(--shadow-float-lift); }
  .pcard:hover .pcard-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
}
@media (max-width: 767px) {
  .pcard { padding: var(--s-3); }
  .pcard-title { -webkit-line-clamp: 3; }
  .item-page .crumbs li:last-child { display: none; }
}

/* Covers sit in a square box (02b section 6). TPT items: the TPT cover, filling the box, exactly as TPT shows it.
   Free lessons: the first page, lying on the cream desk. The subject colour edge sits above the box, never on it. */
.cover {
  position: relative; aspect-ratio: 1 / 1; margin-top: 6px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-paper);
  box-shadow: 0 -7px 0 -1px var(--c);
}
.cover picture, .cover img { display: block; width: 100%; height: 100%; }
.cover--tpt img { object-fit: cover; }
.cover--contain img { object-fit: contain; }
.cover--page { display: grid; place-items: center; background: var(--cream); }
.cover--page picture { width: auto; height: 86%; aspect-ratio: 1224 / 1584; }
.cover--page img { border: 1px solid var(--edge); border-radius: var(--r-paper); background: var(--paper); object-fit: cover; object-position: top center; }

/* Status chips sit under the cover, never on it. */
.status {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-3);
  border-radius: var(--r-pill); font-size: var(--fs-chip); font-weight: 600; line-height: 1;
}
.status--free { background: var(--cream); color: var(--green-800); box-shadow: inset 0 0 0 1px var(--hairline); }

/* Every card ends on one bottom line, pinned so rows align: the TPT price, or the free chip. */
.pcard-bottom { margin-top: auto; padding-top: var(--s-3); }
.pcard-price { font-size: var(--fs-ui); font-weight: 600; color: var(--text); line-height: 1.3; }
.pcard-on { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }

/* ---------- Empty states ---------- */
.empty-card {
  padding: var(--s-7) var(--s-6); background: var(--surface);
  border-radius: var(--r-card); box-shadow: var(--shadow-float);
}
.empty-card[hidden] { display: none; }
.empty-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--text); text-wrap: balance; }
.empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-5); }
.empty-card .subject-tabs { margin-top: var(--s-5); }
.empty-card noscript p { margin-top: var(--s-4); }

/* ---------- Product page ---------- */
.item-page .crumbs { padding-top: var(--s-3); }
.item-grid { margin-top: var(--s-4); align-items: start; row-gap: var(--s-6); }
.gallery { grid-column: 1 / span 7; }
.item-info { grid-column: 8 / span 5; }
.gallery-panel {
  display: grid; place-items: center; padding: var(--s-8) var(--s-7);
  background: var(--field); border-radius: var(--r-panel);
}
/* A fixed 4:5 box, so switching between the square cover and portrait pages doesn't move the page. */
.gallery-main { display: grid; place-items: center; width: min(460px, 100%); aspect-ratio: 4 / 5; }
.gallery-main picture { display: contents; }
.gallery-main img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  border-radius: var(--r-paper); background: var(--paper); box-shadow: var(--shadow-paper);
  transition: opacity 180ms ease;
}
.gallery-main.is-fading img { opacity: 0; }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.thumb {
  display: block; width: 64px; padding: 0; background: none; border: 0; border-radius: var(--r-paper); cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.thumb:active { transform: scale(0.97); }
.thumb img { display: block; width: 64px; height: 80px; object-fit: contain; border: 1px solid var(--hairline); border-radius: var(--r-paper); background: var(--paper); }
.thumb.is-active img { outline: 2px solid var(--green-800); outline-offset: 2px; }

.subject-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3);
  background: var(--c); color: var(--cream); border-radius: var(--r-tab) var(--r-tab) 0 0;
  font-family: var(--font-display); font-size: var(--fs-chip); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.item-info .h1-page { margin-top: var(--s-3); }
.item-meta { margin-top: var(--s-2); color: var(--text-muted); font-weight: 500; }
.item-info > .status { margin-top: var(--s-4); }
.item-body { margin-top: var(--s-5); }
.item-desc { max-width: 60ch; }
.item-h { margin-top: var(--s-6); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
.inside-list { margin-top: var(--s-3); padding-left: var(--s-5); list-style: disc; }
.inside-list li + li { margin-top: var(--s-1); }
.inside-list li::marker { color: var(--c); }
.form-card--inline { margin-top: var(--s-7); }
.form-card--inline .radios { grid-template-columns: 1fr; }
.item-free-line { margin-top: var(--s-4); font-weight: 600; }
/* TPT items: price, then the one button, then the helper line (02b sections 3 and 4). */
.item-price {
  margin-top: var(--s-5); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--text);
}
.buy { margin-top: var(--s-4); }
.buy-help { margin-top: var(--s-2); max-width: 52ch; text-wrap: pretty; font-size: var(--fs-small); font-weight: 500; line-height: 1.5; color: var(--text-muted); }
.item-facts { margin-top: var(--s-4); }
.item-use { margin-top: var(--s-4); }
.item-request { margin-top: var(--s-6); color: var(--text-muted); }
.item-request a { display: inline-block; padding-block: var(--s-3); margin-block: calc(var(--s-3) * -1); font-weight: 600; }

.more { margin-top: var(--s-9); }
.more-title { margin-bottom: var(--s-5); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; color: var(--heading); }
.more-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .gallery, .item-info { grid-column: 1 / -1; }
  .gallery-panel { padding: var(--s-7) var(--s-6); }
  .more-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .more-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-2) var(--s-4) var(--s-5);
    margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); padding-inline: var(--gutter);
  }
  .more-row > li { scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .gallery-panel { padding: var(--s-6) var(--s-5); }
  .gallery-main { width: min(300px, 100%); }
  .more { margin-top: var(--s-8); }
  .more-row { grid-auto-columns: 46%; }
  .thumbs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-1); margin: calc(var(--s-3) - var(--s-1)) calc(var(--s-1) * -1) 0; }
  .thumbs li { flex: none; scroll-snap-align: start; }
}

/* Phone: price and "Buy on TPT" in a bar fixed to the bottom of the viewport; the page leaves room for it. */
.buy-bar { display: none; }
@media (max-width: 767px) {
  .buy-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    min-height: 64px; padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--hairline);
  }
  .buy-bar-price { font-size: var(--fs-ui); font-weight: 600; color: var(--text); }
  .buy-bar .btn { min-height: 44px; }
  body.has-buy-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
.buy-btn svg { width: 20px; height: 20px; }

.optional { color: var(--text-muted); font-weight: 500; }

/* ---------- Request a lesson ---------- */
.request-grid { padding-top: var(--s-8); align-items: start; row-gap: var(--s-7); }
.request-intro { grid-column: 1 / span 5; }
.request-intro .lead { margin-top: var(--s-5); max-width: 40ch; }
.form-card--request { grid-column: 6 / span 7; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.field-row + .field { margin-top: var(--s-5); }
.textarea { min-height: 128px; padding: var(--s-3) var(--s-4); line-height: 1.5; resize: vertical; }
.field-help { margin-top: var(--s-2); }
.form-card .form-status .text-link { display: inline-flex; margin-top: var(--s-4); font-size: var(--fs-ui); }
@media (max-width: 1023px) {
  .request-intro, .form-card--request { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .request-grid { padding-top: var(--s-7); }
  .field-row { grid-template-columns: 1fr; }
}
/* The form sends for real now: a plain paper card, no placeholder dash or chip (02b section 13). */
.form-card--request { padding-top: var(--s-6); border: 0; }
.form-card--request::before { content: none; }
.form-card--request select.input { min-height: var(--input-h); }
.form-card--request .form-submit { margin-top: var(--s-6); }
.form-error {
  margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--paper); border-left: 2px solid var(--social); color: var(--text);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.5;
}
.form-error[hidden] { display: none; }
.privacy-line { margin-top: var(--s-3); max-width: 52ch; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* Show more: no paging, no infinite scroll (02b section 9). */
.show-more { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-7); }
.show-more[hidden] { display: none; }
.check-count { color: var(--text-muted); font-weight: 500; }
.check[hidden], .js-filters fieldset[hidden] { display: none; }


/* ---------- Search ---------- */
.search-big { padding-top: var(--s-8); max-width: 760px; }
.search-h { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--heading); }
.search-h label { cursor: text; }
.search-field { position: relative; display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.search-field svg { position: absolute; left: var(--s-5); top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--text-muted); pointer-events: none; }
.search-field input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 var(--s-5) 0 calc(var(--s-5) + 32px);
  background: var(--paper); border: 1.5px solid var(--field-line); border-radius: var(--r-pill);
  font-size: var(--fs-lead); font-weight: 500; caret-color: var(--green-800);
}
.search-field .btn { min-height: 56px; }
.search-line { margin-top: var(--s-6); }
.search-line:empty { display: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip-row[hidden] { display: none; }
.toggle-chip {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
  background: var(--paper); color: var(--text); border: 1.5px solid var(--field-line); border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; scroll-snap-align: start;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}
.toggle-chip:active { transform: scale(0.97); }
.toggle-chip[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--cream); }
.search-grid { margin-top: var(--s-6); }
.search-page .empty-card { margin-top: var(--s-6); max-width: 760px; }
.search-start { margin-top: var(--s-6); }
.search-start[hidden] { display: none; }
.search-start .subject-tabs { margin-top: var(--s-3); }
.search-page noscript .empty-card { margin-top: var(--s-6); }
@media (max-width: 767px) {
  .search-big { padding-top: var(--s-7); }
  .search-field .btn { padding-inline: var(--s-4); }
  .search-field input { font-size: var(--fs-ui); }
  .chip-row {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: var(--s-1) var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .toggle-chip { flex: none; }
}

/* ---------- Selects styled like inputs ---------- */
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.field .select-wrap { display: flex; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap select.input { width: 100%; padding-left: var(--s-4); }
.select-wrap svg { position: absolute; right: var(--s-3); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.select:hover { border-color: var(--text); }

.item-h + .item-desc, .item-h + .inside-list { margin-top: var(--s-3); }
.field-row > .field + .field { margin-top: 0; }