/* Brickwright storefront pages (owner: storefront): home, shop and category listings, gifts,
   product pages, services landing and the frame and case guide.
   Builds on the tokens and shared classes in base.css and never redefines them. Mobile first;
   breakpoints 600px, 900px and 1024px. No gradients, no card shadows, radius 4px. */

/* --------------------------------------------------------------- home: hero */
.hero { padding: var(--s-7) 0 var(--s-8); }
.hero__grid { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero__copy > * + * { margin-top: var(--s-4); }
.hero__title { max-width: 16ch; }
.hero__lead { max-width: 52ch; }
.hero__actions { margin-top: var(--s-5); max-width: 520px; }
.hero__meta { color: var(--muted); font-size: 13px; max-width: none; }
.hero__art { position: relative; padding-bottom: var(--s-2); }
.hero__panel img { width: 100%; height: auto; }
.hero__card { position: relative; margin: calc(-1 * var(--s-5)) var(--s-4) 0; max-width: 320px; }
@media (min-width: 600px) {
  .hero__card { margin-left: var(--s-5); }
}
@media (min-width: 1024px) {
  .hero { padding: var(--s-8) 0 var(--s-9); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
  .hero__art { padding-bottom: 0; }
  /* The card hangs from the panel and overlaps its bottom-left corner by 24px (DESIGN 6). */
  .hero__card { margin: calc(-1 * var(--s-5)) 0 0 calc(-1 * var(--s-5)); width: 300px; }
}

/* ------------------------------------------------------ home: other sections */
.home-strip { background: var(--bg); }
.home-strip .bench-strip { list-style: none; padding: 0; margin: 0; }
.home-occasions__rows { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.home-occasions__row > * + * { margin-top: var(--s-2); }
@media (min-width: 900px) {
  .home-occasions__rows { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); }
}

.cat-tiles { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; }
@media (min-width: 600px) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-tiles li { max-width: none; }
.cat-tile {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); height: 100%; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); text-decoration: none; overflow: hidden;
  transition: border-color var(--ease);
}
.cat-tile:hover { border-color: var(--rule-strong); color: var(--ink); }
.cat-tile__media { display: block; background: var(--surface-2); }
.cat-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.cat-tile__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.cat-tile__name { font-family: var(--font-serif); font-size: 19px; line-height: 1.25; font-weight: 600; }
.cat-tile__count { font-size: 12px; color: var(--muted); }
.cat-tile__blurb { font-size: var(--t-small); line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1024px) {
  .cat-tile { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .cat-tile__media { aspect-ratio: 4 / 3; }
}

.two-ways { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .two-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.two-ways__panel { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) var(--s-5); }
.two-ways__panel > * + * { margin-top: 0; }
.two-ways__steps { grid-template-columns: minmax(0, 1fr) !important; gap: var(--s-3); flex: 1; }
.two-ways__steps .step { flex-direction: row; align-items: baseline; gap: var(--s-3); }
.two-ways__steps .step__text { font-size: 15px; }

.teaser { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .teaser { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: start; } }
.teaser__copy > * + * { margin-top: var(--s-4); }
.teaser__list { display: grid; gap: var(--s-1) var(--s-5); grid-template-columns: minmax(0, 1fr); font-size: 15px; }
@media (min-width: 600px) { .teaser__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.teaser__list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 0; border-bottom: 1px dashed var(--rule); max-width: none; }
.teaser__list .mono { font-size: 13px; color: var(--muted); white-space: nowrap; }
.teaser__finder { padding: var(--s-5); }

.step__art { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); border-radius: var(--r); margin-bottom: var(--s-2); }

.michael-note { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s-6) var(--s-5); }
.michael-note__text { font-family: var(--font-serif); font-size: 20px; line-height: 1.5; color: var(--ink); }
.michael-note__text > * + * { margin-top: var(--s-4); }
.michael-note__sign { margin-top: var(--s-5); font-family: var(--font-serif); font-size: 20px; font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: baseline; }
.michael-note__sign a { font-family: var(--font-sans); font-weight: 400; }
@media (min-width: 900px) { .michael-note { padding: var(--s-7); } }

/* -------------------------------------------------------------- fit finder */
.fit-form > * + * { margin-top: var(--s-3); }
.fit-form__row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; }
.fit-form__field { flex: 1 1 220px; }
.fit-form__input { font-family: var(--font-mono); letter-spacing: 0.02em; }
.fit-form__btn { flex: none; }
.fit-form--compact .fit-form__pick .field__label { font-weight: 400; color: var(--muted); }
.fit-results:empty { display: none; }
.fit-results { margin-top: var(--s-5); }
.fit-results[aria-busy="true"] { opacity: 0.6; }
.fit-card .btn-row { margin-top: var(--s-4); }
.fit-choices { padding: var(--s-4); border: 1px dashed var(--ink); border-radius: var(--r); }
.fit-choices__list { margin-top: var(--s-2); }
.fit-choices__list li + li { margin-top: var(--s-1); }
.fit-choices__list a { display: inline-flex; gap: var(--s-2); min-height: 36px; align-items: center; }
.dims-form__row { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.dims-form__row .field + .field { margin-top: 0; }
.dims-form__btn { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .dims-form__row { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .dims-form__btn { grid-column: auto; }
}
.dims-form .field__help { margin-top: var(--s-2); }
.fit-dims-result > * + * { margin-top: var(--s-3); }
.fit-dims-result__lead { font-size: 15px; }

/* ---------------------------------------------------------- frame and case guide */
.guide-finder { padding: var(--s-5); }
@media (min-width: 900px) { .guide-finder { padding: var(--s-6); } }
.guide-page .section--tight > * + * { margin-top: var(--s-4); }
.guide-sizes { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .guide-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-size > * + * { margin-top: var(--s-2); }
.guide-size__title { font-size: var(--t-h3); }
.guide-size__title a { color: var(--ink); text-decoration-color: var(--rule); }
.guide-size__title .small { font-family: var(--font-sans); font-weight: 400; margin-left: var(--s-2); }
.measured-table th a { font-family: var(--font-mono); }

/* --------------------------------------------------------------- lists */
.parcel-list { list-style: none; padding: 0; }
.parcel-list li { position: relative; padding-left: 22px; font-size: 15px; }
.parcel-list li + li { margin-top: var(--s-2); }
.parcel-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border: 1px solid var(--ink); }
.parcel-list--numbered { counter-reset: parcel; }
.parcel-list--numbered li { counter-increment: parcel; padding-left: 32px; }
.parcel-list--numbered li::before { content: counter(parcel, decimal-leading-zero); border: 0; width: auto; height: auto; top: 0; font-family: var(--font-mono); font-size: 13px; color: var(--accent-ink); }

/* ---------------------------------------------------------- collection pages */
.collection-intro { margin-bottom: var(--s-5); color: var(--ink-2); }
.collection { align-items: start; }
.collection[aria-busy="true"] .collection-results { opacity: 0.55; transition: opacity var(--ease); }

.filters { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s-4); }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.filters__title { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.filters__group { border: 0; padding: var(--s-3) 0 0; margin: var(--s-3) 0 0; min-width: 0; border-top: 1px dashed var(--rule); }
.filters__form > .filters__group:first-child, .filters__form > input[type="hidden"]:first-child + .filters__group { margin-top: 0; padding-top: 0; border-top: 0; }
.filters__legend { padding: 0; margin-bottom: var(--s-2); font-size: 14px; font-weight: 600; color: var(--ink); }
.filters__list, .filters__links { list-style: none; padding: 0; }
.filters__check { min-height: 40px; padding: 4px 0; gap: var(--s-2); align-items: center; }
.filters__check input { margin-top: 0; }
.filters__check .check__text { font-size: 15px; }
.filters__links a { display: flex; align-items: center; min-height: 36px; color: var(--ink); text-decoration: none; font-size: 15px; border-left: 2px solid transparent; padding-left: var(--s-2); margin-left: calc(-1 * var(--s-2) - 2px); }
.filters__links a:hover { color: var(--accent-ink); text-decoration: underline; }
.filters__links a.is-active { border-left-color: var(--accent); font-weight: 600; }
.filters__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--rule); }
.filters__close, .filters-toggle { display: none; }

/* With JavaScript under 900px the rail becomes a bottom sheet opened by the Filter button. */
@media (max-width: 899px) {
  .js .filters-toggle { display: inline-flex; }
  .js .filters__close { display: inline-flex; }
  .js .filters {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 82vh; overflow-y: auto;
    border-radius: var(--r) var(--r) 0 0; border-color: var(--ink); box-shadow: var(--shadow-overlay); padding: var(--s-4) var(--gutter) var(--s-6);
  }
  .js .filters.is-open { display: block; }
  .js .filters__head { position: sticky; top: calc(-1 * var(--s-4)); background: var(--surface); padding: var(--s-2) 0; z-index: 1; }
  html.has-filter-sheet body { overflow: hidden; }
}

.collection-results > * + * { margin-top: var(--s-5); }
.collection-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.collection-count { font-family: var(--font-mono); font-size: 14px; color: var(--ink-2); }
.collection-toolbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.collection-sort { display: flex; align-items: center; gap: var(--s-2); }
.collection-sort__label { font-size: 14px; font-weight: 600; }
.collection-sort__select { width: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.active-filters li { max-width: none; }
.active-filters__chip { gap: var(--s-2); min-height: 36px; font-size: 14px; }
.active-filters__x { font-size: 16px; line-height: 1; color: var(--muted); }
.active-filters__chip:hover .active-filters__x { color: var(--accent-ink); }
.collection-fit > * + * { margin-top: var(--s-2); }
.collection-results .empty-state { margin-left: 0; }

.gift-chips { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.gift-corporate { margin-bottom: var(--s-5); }
.gift-panel { margin-bottom: var(--s-6); }
.gift-panel__list { list-style: none; padding: 0; display: grid; gap: var(--s-2) var(--s-5); grid-template-columns: minmax(0, 1fr); font-size: 15px; }
@media (min-width: 900px) { .gift-panel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gift-panel__list li { padding-left: 18px; position: relative; max-width: none; }
.gift-panel__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--accent); }

/* ------------------------------------------------------------- product page */
/* Phones: art, then the buy column, then the details. From 1024px: art and details on the left
   (7 of 12), the buy column sticky on the right (5 of 12) across both rows. */
.pdp { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .pdp { grid-template-areas: "media buy" "details buy"; grid-template-rows: auto 1fr; }
  .pdp__media { grid-area: media; }
  .pdp__buy-col { grid-area: buy; }
  .pdp__details { grid-area: details; }
}
.pdp__details > * + * { margin-top: var(--s-6); }
.pdp__art { aspect-ratio: 4 / 3; display: flex; }
.pdp__art img { width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.pdp__thumbs { display: flex; gap: var(--s-2); list-style: none; padding: 0; margin-top: var(--s-3) !important; }
.pdp__thumb { padding: 2px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); width: 80px; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--ink); }
.pdp__section > * + * { margin-top: var(--s-3); }
.pdp__spec .bench-card__row dt { min-width: 0; }

.pdp__buy-col > * + * { margin-top: var(--s-4); }
.pdp__buy-col > .eyebrow + .pdp__title { margin-top: var(--s-2); }
.pdp__title { font-size: var(--t-h1); line-height: 1.1; }
.pdp__set { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3) !important; }
.pdp__pricing > * + * { margin-top: var(--s-2); }
.pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); }
.pdp__lead { display: flex; align-items: center; gap: var(--s-2); font-size: 15px; font-weight: 600; }
.pdp__lead::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--muted); }
.pdp__lead--shelf { color: var(--green); }
.pdp__lead--shelf::before { background: var(--green); }
.pdp__lead--to-order { color: var(--accent-ink); }
.pdp__lead--to-order::before { background: var(--accent); }
.pdp__lead--service { color: var(--ink-2); }
.pdp__form > * + * { margin-top: var(--s-5); }
.pdp__form > input[type="hidden"] + * { margin-top: 0; }
.pdp__form .options + .options { margin-top: var(--s-5); }
.options__after { margin-top: var(--s-2); }
.pdp__note .textarea { min-height: 88px; }
.pdp__buy { display: flex; gap: var(--s-3); align-items: stretch; }
.pdp__buy .qty { flex: none; }
.pdp__buy .qty__btn { min-width: 44px; min-height: 44px; }
.pdp__buy .qty__input { min-height: 44px; }
.pdp__add { flex: 1 1 auto; }
.pdp__status { margin-top: var(--s-2) !important; color: var(--green); min-height: 0; }
.pdp__status:empty { display: none; }
.pdp__nojs > * + * { margin-top: var(--s-3); }
.pdp__size-finder > * + * { margin-top: var(--s-2); }
.pdp__size-finder label { display: block; }
.pdp__trust { padding-top: var(--s-2); }
.pdp__steps { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 600px) and (max-width: 1023px) { .pdp__steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.pdp-page > .section { padding-left: 0; padding-right: 0; }
.pdp__care > * + * { margin-top: var(--s-3); }

/* Size table: the selected size row is marked, not only coloured. */
.size-table tr.is-selected th, .size-table tr.is-selected td { background: var(--bg); }
.size-table__chosen { display: none; font-weight: 400; color: var(--muted); font-size: 12px; }
.size-table tr.is-selected .size-table__chosen { display: inline; }
.size-table td .mono { white-space: nowrap; }

/* True-size drawing (inline SVG, redrawn by storefront.js). */
.true-size { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s-4); }
.true-size__svg { width: 100%; height: auto; }
.true-size figcaption { margin-top: var(--s-2); }
.ts-shelf { stroke: var(--rule); stroke-width: 1; }
.ts-box { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.ts-a4 { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.ts-ruler, .ts-tick { stroke: var(--ink); stroke-width: 1; }
.ts-label { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); }
.ts-label--muted { fill: var(--muted); }
.ts-label--small { font-size: 11px; fill: var(--muted); }
@media (max-width: 599px) {
  .ts-label { font-size: 22px; }
  .ts-label--small { font-size: 18px; }
}

/* Sticky buy bar on phones once the main button has scrolled away. */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--ink); box-shadow: var(--shadow-overlay); padding: var(--s-2) 0; }
.buy-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.buy-bar__info { display: flex; flex-direction: column; min-width: 0; }
.buy-bar__title { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .buy-bar { display: none !important; } }
html:not(.js) .buy-bar { display: none !important; }

/* --------------------------------------------------------------- services */
.services-page .section--tight > * + * { margin-top: var(--s-4); }
.services-page .product-grid { margin-bottom: var(--s-4); }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  .collection[aria-busy="true"] .collection-results { transition: none; }
}
@media print {
  .filters, .collection-toolbar, .buy-bar, .pdp__form, .pdp__size-finder, .fit-form, .dims-form { display: none !important; }
}
.pdp__image-note { margin: var(--s-2) 0 0; font-size: var(--t-small); color: var(--muted); }