/* The parts marketplace. Loaded AFTER public.css and never instead of
   it: every structural class the parts pages use (.public-page,
   .public-header, .public-hero, .public-grid, .public-vcard,
   .public-sublink, .public-browse-section, .public-footer) is the car
   marketplace's own, so the two sites are the same site. Item: "same
   design as the car site".

   What is here is only what a parts shop has and a car marketplace
   does not: the shelves, the counter, and a buyer's own request page.
   Every colour, radius and font below is a theme.css token, never a
   literal, for the same reason public.css gives. */

/* ─── SEARCH ─── */

/* The car landing's search box is 480px because it sits under a short
   heading. A part is described by more words than a car is ("right
   hand headlamp, 2016 Hilux"), so the box is wider and the placeholder
   has room to teach what can be typed into it. */
.pt-search { max-width: 560px; }

.pt-asked {
  margin: 18px 0 0; padding: 12px 14px;
  /* The same pastel-bg/saturated-text pair every other completion
     state in this app uses, rather than a second green. */
  background: var(--badge-complete-bg); border: 1px solid var(--lime-deep);
  color: var(--badge-complete-text);
  border-radius: var(--radius-md); font-size: var(--font-size-body);
}

.pt-count { color: var(--grey); font-size: var(--font-size-label); }
.pt-empty { max-width: 60ch; line-height: 1.7; }
.pt-section-lead { color: var(--grey); font-size: var(--font-size-label); margin: 0 0 14px; max-width: 70ch; line-height: 1.6; }

/* ─── THE CARD ─── */

/* Nothing. The part card is the car card: .public-vcard and its
   children, unchanged, so the two cannot drift apart in height.
   It used to add a row of bordered pills and a seller line of its
   own, which is what made it stand taller than the cars beside it. */

/* ─── THE SHELVES ─── */

.pt-shelves-section { margin-top: 32px; }
.pt-shelves {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
/* A shelf, not a pill. The browse-by-make row uses .public-sublink
   because a make is one word; a department has a name and a count and
   reads as a place you walk to, so it gets a box with two lines. */
.pt-shelf {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
}
.pt-shelf:hover { border-color: var(--lime-deep); }
.pt-shelf-name { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.pt-shelf-meta { font-size: 0.72rem; color: var(--grey); font-family: 'Space Mono', monospace; }
.pt-sublink-ask { border-style: dashed; }
.pt-shelf-ask { margin: 26px 0 0; color: var(--grey); font-size: var(--font-size-label); }

/* ─── THE COUNTER ─── */

/* Deliberately the most solid block on the page. On an empty
   marketplace this is the only thing that works, so it is not allowed
   to look like a footer afterthought. */
.pt-counter {
  margin: 36px 0 0; padding: 24px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pt-counter h2 { font-size: 1.15rem; margin: 0 0 8px; }
.pt-counter-lead { color: var(--grey); font-size: var(--font-size-body); margin: 0 0 18px; max-width: 62ch; line-height: 1.6; }
.pt-counter-error {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--badge-danger-bg); border: 1px solid var(--badge-danger-text);
  color: var(--badge-danger-text); font-size: var(--font-size-label);
}
.pt-counter-form { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.pt-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 0; min-width: 0; }
.pt-field-label { font-size: var(--font-size-label); font-weight: 500; color: var(--ink); }
.pt-field input { width: 100%; margin: 0; font-size: 16px; }
.pt-field-help { font-size: var(--font-size-small); color: var(--grey); line-height: 1.5; }
.pt-optional { color: var(--grey); font-weight: 400; }
.pt-field-row { display: flex; gap: 12px; }
.pt-field-narrow { flex: 0 0 96px; }
.pt-counter-submit { align-self: flex-start; }
/* The line that says what the button will do. Margin to nothing,
   because the form is a flex column with its own gap and a default
   paragraph margin would double it. */
.pt-counter-signed { margin: 0; }
/* Off screen rather than display:none. A bot reading the markup fills
   anything it can see in the DOM; hiding it this way keeps it out of
   the layout without announcing that it is a trap. */
.pt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) {
  .pt-field-row { flex-direction: column; }
  .pt-field-narrow { flex: 1 1 auto; }
  .pt-counter { padding: 18px 16px; }
}

/* ─── FOR SELLERS ─── */

.pt-sell { margin: 36px 0 8px; }
.pt-sell h2 { font-size: 1.05rem; margin: 0 0 8px; }
.pt-sell p { color: var(--grey); font-size: var(--font-size-body); margin: 0 0 14px; max-width: 62ch; line-height: 1.6; }

/* ─── A BUYER'S OWN REQUEST ─── */

.pt-request-note { color: var(--grey); font-size: var(--font-size-body); margin: 0 0 4px; max-width: 62ch; }
.pt-keep {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--paper); border: 1px solid var(--line);
  font-size: var(--font-size-label); color: var(--grey); max-width: 62ch; line-height: 1.6;
}
.pt-offers { margin: 32px 0 0; }
.pt-offers h2 { font-size: 1.05rem; margin: 0 0 14px; }
.pt-offer {
  padding: 16px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); margin-bottom: 12px;
}
.pt-offer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pt-offer-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.pt-offer-name:hover { text-decoration: underline; }
.pt-offer-price { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--ink); }
.pt-offer-note { color: var(--grey); font-size: var(--font-size-label); margin: 8px 0 12px; line-height: 1.6; }
.pt-close { margin: 24px 0 0; }

/* ─── SORT AND REFINEMENTS ─── */

/* .filter-chip is theme.css's own, the same object the car
   marketplace's filter bar is built from, so a buyer meets one control
   on both sites. These are anchors rather than buttons because the
   whole state lives in the URL: no JavaScript, every refinement is
   shareable and back works. */
.pt-refine { margin: 18px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.pt-refine-group { display: flex; flex-direction: column; gap: 6px; }
.pt-refine-label { font-size: var(--font-size-label); color: var(--grey); font-weight: 500; }
.pt-refine-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* An anchor styled as a chip needs the bits a button gets for free. */
.pt-refine-row .filter-chip { text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; }
.pt-refine-row .filter-chip:hover { border-color: var(--lime-deep); }
.pt-refine-row .filter-chip.active:hover { border-color: var(--black); }
.pt-refine-count { font-family: 'Space Mono', monospace; font-size: 0.72rem; opacity: 0.75; }
.pt-refine-hidden { margin: 0; font-size: var(--font-size-small); color: var(--grey); line-height: 1.6; max-width: 64ch; }

/* The search dropdown. .public-search-results and .public-search-result
   are the car marketplace's own, so the two boxes behave the same; only
   the second line is new, because a part suggestion needs to say what
   it fits and a car suggestion does not. */
.pt-suggest-sub { display: block; color: var(--grey); font-size: var(--font-size-small);
                  margin-top: 2px; }

/* The part number on a card. Item: "instead of an icon, just write
   part no small dark font". The label stays in the row's own grey and
   the number goes dark: the number is the thing being scanned and the
   label only says what it is. */
.pt-label { color: var(--grey); }
.pt-partno { color: var(--ink); font-family: 'Space Mono', monospace; }

/* The fitment line on a card. nowrap and an ellipsis on the PARTS
   card only, never on .public-vcard-sub itself, which the car card
   shares and whose "Ref: KK1234" is short enough never to need it.
   Changing the shared rule would be changing the car site to fix a
   parts problem. */
.pt-fit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ─── THE TYRES BOX ─── */
/* Item, 19 October: "have a tickbox in filters specifically for tyres,
   default state is search all parts minus tyres but ticking the tyres
   option isolates search to tyres (sizes and manufacturers)."

   A LINK DRAWN AS A CHECKBOX. Every other control on this page is a GET
   link carrying the whole state, and one that needed a form submit
   would be the only thing here that does not work with a tap. So the
   tick is CSS and the semantics are role="checkbox" with aria-checked,
   which is what a screen reader needs to hear. */
.pt-tyres { margin: 0 0 14px; }
.pt-tyres-box { display: flex; align-items: flex-start; gap: 10px;
                padding: 11px 13px; border-radius: var(--radius-md);
                border: 1px solid var(--line); background: var(--paper);
                text-decoration: none; color: var(--ink); }
.pt-tyres-box:hover { border-color: var(--lime); }
.pt-tyres-box.active { border-color: var(--lime); background: var(--row-hover); }

/* The tick itself. 20px, because this is the one control on the page a
   thumb has to land on precisely, and a 13px native checkbox is half
   what a finger needs. */
.pt-tyres-tick { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
                 border: 2px solid var(--line); border-radius: 4px;
                 background: #fff; position: relative; }
.pt-tyres-box.active .pt-tyres-tick { border-color: var(--lime-deep);
                                      background: var(--lime-deep); }
.pt-tyres-box.active .pt-tyres-tick::after {
  content: ""; position: absolute; left: 4px; top: 0px;
  width: 7px; height: 12px; border: solid #fff;
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

.pt-tyres-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.pt-tyres-note { color: var(--grey); font-size: 0.8rem; line-height: 1.5; }
.pt-eg { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.78rem;
         padding: 1px 4px; border-radius: 4px; background: var(--row-hover);
         white-space: nowrap; }


/* ─── THE PART CARD HAS NO FRAME OF ITS OWN, ON PURPOSE ─── */
/* It uses .public-vcard-photo, the car card's own 150px, and a
   .pt-card-photo override at 4:3 was added on 19 October and taken out
   the same day.

   WHY IT WAS WRONG. "4:3 everywhere" was answered to a question I had
   framed badly: I said the parts cards were "already effectively that
   shape" and they were not. The grid is minmax(240px, 1fr), so a cell
   is 240px at its narrowest and wider as the viewport grows, and a
   150px photo in it is a ratio of 1.60 at 240px and 2.40 at 360px.
   Nowhere near 1.33. Forcing 4:3 made the photo 20% taller at 240px and
   80% taller at 360px, which the founder reported as "the thumbnails on
   parts are huge compared to cars". Measured, not estimated.

   AND THE CAR SIDE ITSELF MAKES THIS SPLIT. Its card is a fixed 150px
   and only its detail grid is 4:3, so matching cars surface for surface
   is both what was asked for and what fixes this. One ratio imposed
   across surfaces of different jobs was never the car side's technique;
   a definite shape on every frame was. */


/* ─── A PART AS A ROW ─── */
/* Item, 20 October: "the cards are not showing as the car side does. a
   small icon, then details on the right."

   NEARLY NOTHING IS HERE ON PURPOSE. _parts_row.html uses the car row's
   own classes out of public.css, which both parts pages already load,
   so the two lists line up at every width and a change to the shared
   rules reaches both. What follows is only what a part has that a car
   does not. */

/* The part number, which is the field a buyer holding a broken part
   matches on, so it reads as a code rather than as prose. */
.pt-row-number { font-size: 0.8rem; color: var(--grey); margin-top: 2px; }
.pt-row-number .token { font-family: 'Space Mono', monospace; color: var(--ink); }

/* A part with no photograph. The box still occupies its column so every
   heading down the list keeps one left edge, which is the same reason
   the Stock row and the car row both render a placeholder. */
.pt-row-noshot { background: var(--thumb-placeholder); }