/* proto-pages-gr.css: Gorilla's pieces beside the shared frame (proto-pages.css, templates/search/_macros.html): the
   card's quantity and lock set buttons (search/_gr.html), the thread and hub ring pickers, the vehicle pages' panels
   and lead card (search/_vehicle.html), the lines around the lists (search/_list.html) and the home
   (search/home.html). Their look is cl-site.css's tokens: white, near-black type, the pink accent, the dark square
   button. Square boxes, full-contrast text, 40px tap targets, 16px inputs. */
@layer base, kit, site;

@layer site {

/* the page's edges on Gorilla's header gutter (50px, 16px on a phone) */
.pp-wrap.gr-page, .pp-wrap.gr-home__wrap { padding-left: var(--site-gutter); padding-right: var(--site-gutter); }

/* the page's first lines and the lines around the lists */
.gr-page .pp-lead + .pp-lead { margin-top: 8px; }
.gr-partial, .gr-none { max-width: 760px; margin-top: 16px; font: 400 17px/1.4 var(--site-font-body); color: var(--site-fg); }
/* a vehicle page's note (block `note`) reads as the lead does */
.gr-note { max-width: 760px; margin-top: 12px; font: 400 19px/1.4 var(--site-font-body); color: var(--site-fg); }
.gr-none a { color: var(--site-fg); text-decoration: underline; }
.gr-who { margin-top: 8px; font: 400 16px/1.35 var(--site-font-body); color: var(--site-fg); }
.gr-yours { margin-top: 8px; }
.gr-all { margin-top: 40px; }

/* a thread size keeps its case in the H1 (12x1.5, not 12X1.5) */
.gr-h1--plain { text-transform: none; }

/* the card: the thread-first name, "each" after a single nut's price, a note line */
.gr-card__name { text-transform: none; }
.gr-each { font-weight: 400; font-size: 16px; }
.gr-card__note { font: 400 15px/1.3 var(--site-font-body); color: var(--site-fg); }

/* the Add with its quantity, and the lock set as a second button under it */
/* the Add on Gorilla's darker pink, as the kit's Go button, so white on it is full contrast (#E54360 is 4.0:1) */
.pp-btn--accent { background: var(--site-accent-strong); color: var(--site-accent-fg); }
.pp-btn--accent:hover { background: var(--site-fg); color: var(--site-bg); }
.gr-add { display: flex; gap: 8px; }
.gr-add__qty {
  flex: 0 0 64px; width: 64px; min-height: 40px; padding: 0 6px; border: 2px solid var(--site-fg); border-radius: var(--site-radius);
  background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); text-align: center;
}
.gr-add__btn { flex: 1 1 auto; min-width: 0; }
.gr-lock { margin-top: 8px; }
.gr-lock__btn { width: 100%; min-height: 40px; padding: 0 8px; font-size: 14px; }

/* a card or section a picker hid stays hidden over the card's own display */
.gr-page [hidden] { display: none !important; }
/* a section's cards past its first 12, drawn on a page with a picker, show only while a picker has a value */
.gr-page:not(.is-picked) .gr-past { display: none; }

/* the pickers: a label and a square 40px select */
.gr-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.gr-pick + .gr-pick { margin-top: 12px; }
.gr-pick__label { margin-right: 4px; font: 700 16px/1 var(--site-font-body); color: var(--site-fg); }
.gr-pick__select:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.gr-pick--rings { gap: 12px 24px; }
.gr-pick__field { display: inline-flex; align-items: center; gap: 8px; }
.gr-pick__select {
  min-height: 40px; padding: 0 10px; border: 2px solid var(--site-fg); border-radius: var(--site-radius);
  background: var(--site-bg); color: var(--site-fg); font: 400 16px/1.2 var(--site-font-body);
}

/* the vehicle pages: a panel a section, its head the summary, the open one's lead card wide */
.gr-panel { margin-top: 40px; }
.gr-panel__head {
  display: flex; align-items: center; gap: 16px; min-height: 48px; padding-bottom: 8px;
  border-bottom: 2px solid var(--site-fg); cursor: pointer; list-style: none;
}
.gr-panel__head::-webkit-details-marker { display: none; }
.gr-panel__head .pp-h2 { flex: 1 1 auto; min-width: 0; }
.gr-panel__head::after { content: "+"; margin-left: auto; font: 700 28px/1 var(--site-font-body); color: var(--site-fg); }
.gr-panel[open] > .gr-panel__head::after { content: "\2212"; }
.gr-panel__head:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.gr-panel__body > * + * { margin-top: 16px; }
.gr-lead .gr-card { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 32px; align-items: start; }
.gr-lead .gr-card > .pp-card__img { grid-row: 1 / span 9; }
.gr-lead .gr-card .pp-card__img img { height: 260px; }
.gr-lead .pp-card__buy { max-width: 360px; }

/* the home: Gorilla's hero photo with the H1, a line and the vehicle finder over it */
.gr-hero { position: relative; min-height: 520px; display: flex; align-items: center; background: #141414; color: #FFFFFF; overflow: hidden; }
.gr-hero picture { position: absolute; inset: 0; }
.gr-hero__img { width: 100%; height: 100%; object-fit: cover; }
.gr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, .72), rgba(0, 0, 0, .15) 70%); }
.gr-hero__body { position: relative; z-index: 1; width: 100%; max-width: var(--site-max); margin: 0 auto; padding: 48px var(--site-gutter); }
.gr-hero__h { max-width: 760px; font: 700 52px/1 var(--site-font-heading); text-transform: uppercase; color: #FFFFFF; }
.gr-hero__finder { max-width: 1040px; margin-top: 28px; }
.gr-home__wrap { padding-top: 8px; }
.gr-home__wrap > section { margin-top: 48px; }

/* the part tiles: a product photo on white and the name */
.gr-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.gr-tile { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--site-line); background: var(--site-tile-bg); color: var(--site-fg); }
.gr-tile:hover { border-color: var(--site-fg); }
.gr-tile:hover .gr-tile__label { text-decoration: underline; }
.gr-tile__img { display: flex; align-items: center; justify-content: center; height: 200px; padding: 12px; background: var(--site-photo); }
.gr-tile__img img { width: 100%; height: 100%; object-fit: contain; }
.gr-tile__label { padding: 12px 16px 16px; font: 700 20px/1.15 var(--site-font-heading); text-transform: uppercase; }

/* the thread sizes and vehicles: square links, the name bold */
.gr-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.gr-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 2px solid var(--site-fg); color: var(--site-fg); font: 400 16px/1.2 var(--site-font-body); }
.gr-chip b { font-size: 18px; }
.gr-chip:hover { background: var(--site-fg); color: var(--site-bg); }

/* a phone: the H1 a little bigger, every other text a step smaller (Greg 2026-10-29) */
@media (max-width: 979.98px) {
  .gr-hero { min-height: 0; }
  .gr-hero__body { padding: 24px var(--site-gutter); }
  .gr-hero__h { font-size: 38px; }
  .gr-hero__finder { margin-top: 16px; }
  .gr-home__wrap > section { margin-top: 32px; }
  .gr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gr-tile__img { height: 130px; }
  .gr-tile__label { padding: 8px 10px 12px; font-size: 15px; }
  .gr-chips { gap: 8px; margin-top: 12px; }
  .gr-chip { min-height: 40px; padding: 0 12px; font-size: 14px; }
  .gr-chip b { font-size: 15px; }
  .gr-each { font-size: 13px; }
  .gr-card__note, .gr-who { font-size: 13px; }
  .gr-partial, .gr-none { font-size: 14px; }
  .gr-note { margin-top: 8px; font-size: 15px; }
  .gr-pick { margin-top: 20px; }
  .gr-pick__label { font-size: 14px; }
  .gr-panel { margin-top: 28px; }
  .gr-panel__head { min-height: 40px; }
  .gr-panel__head::after { font-size: 24px; }
  .gr-all { margin-top: 24px; }
}

@media (max-width: 600px) {
  .gr-pick { gap: 8px; }
  .gr-pick__field { flex: 1 1 100%; }
  .gr-pick__label { flex: 0 0 96px; margin-right: 0; }
  .gr-pick__field .gr-pick__select { flex: 1 1 auto; min-width: 0; }
  .gr-add__qty { flex-basis: 52px; width: 52px; }
  .gr-lock__btn { font-size: 13px; padding: 0 4px; }
  .gr-lead .gr-card { display: flex; }
  .gr-lead .gr-card .pp-card__img img { height: 180px; }
}

/* the vehicle row under a landing page's H1 on a phone (templates/partials/finder.html row; PICKER-BRIEF.md, Greg
   2026-10-30): one line of 44px fields, Year, Make, Model and Go, or the page's make as words then Model and Year;
   a picked vehicle is its name and Change. At 980px and up it goes and the kit's band stands at the top (.gr-desk). */
.gr-row { display: none; }
@media (max-width: 979.98px) {
  .gr-desk, .gr-hero__finder { display: none; }
  .gr-row { display: block; margin: 8px 0; background: none; color: var(--site-fg); border: 0; font-family: var(--site-font-body); }
  .gr-hero .gr-row { margin: 16px 0 0; color: #FFFFFF; }
  .gr-row__form { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
  .gr-row__form[hidden] { display: none; }
  .gr-row .kit-ymm-field, .gr-row__select { flex: 1 1 0; min-width: 0; }
  .gr-row .kit-ymm-field[hidden] { display: none; }
  .gr-row__form:not(.has-make) .kit-ymm-field--model { display: block; }
  /* the kit's Submodel never shows in the row: Go posts the vehicle and the kit asks the trim after it, as it does */
  .gr-row .kit-ymm-field--submodel { display: none !important; }
  .gr-row .kit-ymm-field--year, .gr-row__select--year { flex: 0 0 84px; }
  .gr-row .kit-ymm-field__button, .gr-row__select {
    height: 44px; padding: 0 24px 0 10px; border: 1px solid var(--parts-border); border-radius: 0;
    background-color: var(--site-field-bg); color: var(--site-fg); font: 400 16px/42px var(--site-font-body);
  }
  .gr-row .kit-ymm-field__button::after { right: 10px; }
  .gr-row .kit-ymm-field__panel { min-width: 200px; }
  .gr-row .kit-ymm-field--model .kit-ymm-field__panel { left: auto; right: 0; }
  .gr-row__select {
    display: block; -webkit-appearance: none; appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  }
  .gr-row__words { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/44px var(--site-font-body); }
  .gr-row__go { flex: 0 0 56px; min-width: 0; height: 44px; padding: 0; }
  .gr-row__now { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font: 400 16px/1.3 var(--site-font-body); }
  .gr-row__now b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gr-row__change { flex: none; min-height: 40px; margin: 0; padding: 0 4px; background: none; border: 0; color: inherit; font: 600 16px/1 var(--site-font-body); text-decoration: underline; cursor: pointer; }
  .gr-row--set .gr-row__form:not([hidden]) { margin-top: 4px; }
}

}