/* SP-50 (Cars for Sale) - the For Sale marker on Gallery cards, the car page's sale banner, and the /forsale/ pages
   (Citroën For Sale and a car's sale page). Loaded by the Gallery's <head> (meta.php) from this deployment. The For Sale
   green is my Citroën's own green (#1e7a46): sale listings are made there. Named values for the Live Localhost Tuner. */
:root{ --fs-green:#1e7a46; --fs-green-dark:#17633a; --fs-ink:#152536; --fs-muted:#5a6772; --fs-line:#e5e7eb; --fs-soft:#f4fbf6; --fs-soft-line:#cfe9d5; }

/* ---- the marker on a Gallery card (the card is wrapped so the marker can be its own link) ---- */
.gallery-card-slot{ position:relative; display:grid; }
.gallery-card-slot > .gallery-card{ grid-column:auto; grid-row:auto; }
.gallery-card-slot--hero{ grid-column:span 2; grid-row:span 2; }
@media (max-width:640px){ .gallery-card-slot--hero{ grid-column:span 1; grid-row:span 1; } }
.gallery-card-sale{ position:absolute; top:8px; left:8px; z-index:1; background:var(--fs-green); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none; padding:3px 8px; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.gallery-card-sale:hover{ opacity:.8; color:#fff; }
.gallery-forsale-link{ margin-left:.4rem; white-space:nowrap; }

/* ---- the banner on the car's Registry page ---- */
.car-sale-banner{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 16px; padding:10px 16px; border:1px solid var(--fs-soft-line);
  background:var(--fs-soft); border-radius:10px; text-decoration:none; color:var(--fs-ink); }
.car-sale-banner:hover{ border-color:var(--fs-green); }
.car-sale-banner__tag, .fs-tag{ display:inline-block; background:var(--fs-green); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.car-sale-banner__text{ font-weight:600; flex:1; min-width:12em; }
.car-sale-banner__go{ color:var(--fs-green); font-weight:600; white-space:nowrap; }

/* ---- Citroën For Sale (the grid) ---- */
.fs-card-price{ color:var(--fs-green); font-weight:700; font-size:1rem; margin:.1rem 0 .2rem; }
.fs-sell-line{ margin-top:2rem; color:var(--fs-muted); font-size:.9rem; }

/* ---- a car's sale page ---- */
.fs-car-page{ --fs-panel-w:340px; --fs-gap:28px; --fs-panel-w--label:"Layout: sale panel width"; --fs-gap--label:"Layout: photos ↔ panel gap"; }
/* The sale page's parts as named values (operator, 2026-10-17: every vital size and space tunable) - shared by the public
   sale page and myCitroën's For Sale pages (the overview, and the listing completed in place); "Chapter: what" labels. */
.fs-layout{ --fs-thumbs-gap:8px; --fs-thumbs-above:10px;
  --fs-panel-pad-y:18px; --fs-panel-pad-x:20px; --fs-tag-size:.7rem; --fs-title-size:1.305rem; --fs-title-above:.55rem; --fs-price-size:1.53rem;
  --fs-loc-below:.9rem; --fs-btn-pad-y:.65rem; --fs-btn-below:1rem; --fs-facts-size:.9rem; --fs-facts-row-pad:.42rem; --fs-facts-label-w:8.5em; --fs-listed-size:.8rem;
  --fs-h2-size:1.15rem; --fs-desc-above:2rem; --fs-note-size:.8rem;
  --fs-thumbs-gap--label:"Photos: gap between thumbnails"; --fs-thumbs-above--label:"Photos: space above the thumbnails";
  --fs-panel-pad-y--label:"Sale panel: inner space top and bottom"; --fs-panel-pad-x--label:"Sale panel: inner space left and right";
  --fs-tag-size--label:"Sale panel: tag text size"; --fs-title-size--label:"Sale panel: car title size"; --fs-title-above--label:"Sale panel: space above the car title";
  --fs-price-size--label:"Sale panel: price size"; --fs-loc-below--label:"Sale panel: space below the location";
  --fs-btn-pad-y--label:"Sale panel: main button height (inner space)"; --fs-btn-below--label:"Sale panel: space below the main button";
  --fs-facts-size--label:"Sale panel: facts text size"; --fs-facts-row-pad--label:"Sale panel: facts row spacing"; --fs-facts-label-w--label:"Sale panel: facts label column width";
  --fs-listed-size--label:"Sale panel: footnote size";
  --fs-h2-size--label:"From the seller: heading size"; --fs-desc-above--label:"From the seller: space above"; --fs-note-size--label:"From the seller: closing note size"; }
.fs-wrap{ max-width:1090px; margin:24px auto 48px; }
.fs-layout{ display:grid; grid-template-columns:minmax(0, 1fr) var(--fs-panel-w); grid-template-areas:"media panel" "rest panel"; gap:var(--fs-gap); align-items:start; }
.fs-media{ grid-area:media; } .fs-rest{ grid-area:rest; min-width:0; }   /* the left column: photographs, then everything else at the same width */
.fs-main{ margin:0; }
.fs-main__img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:10px; background:#f1f2f4; }   /* one steady frame for every photograph; the full photograph opens on click */
.fs-main__img--standin{ object-fit:contain; background:#fff; padding:1rem; box-sizing:border-box; }
.fs-thumbs{ list-style:none; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--fs-thumbs-gap); margin:var(--fs-thumbs-above) 0 0; padding:0; }
.fs-thumb{ display:block; border-radius:6px; overflow:hidden; border:2px solid transparent; }
.fs-thumb img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.fs-thumb:hover{ opacity:.8; }
.fs-thumb.is-current{ border-color:var(--fs-green); }

.fs-panel{ grid-area:panel; align-self:start; position:sticky; top:20px;   /* spans both rows, so it stays in view to the end of the page */
   border:1px solid var(--fs-line); border-radius:10px; padding:var(--fs-panel-pad-y) var(--fs-panel-pad-x) calc(var(--fs-panel-pad-y) - 2px); background:#fff; }
.fs-title{ font-size:var(--fs-title-size); line-height:1.25; margin:var(--fs-title-above) 0 .3rem; color:var(--fs-ink); transition:font-size .2s ease; }   /* 10% below the first build (operator, 2026-10-14) */
.fs-price{ font-size:var(--fs-price-size); font-weight:700; color:var(--fs-green); margin:0 0 .15rem; transition:font-size .2s ease; }
.fs-location{ color:var(--fs-muted); font-weight:600; margin:0 0 var(--fs-loc-below); }   /* semibold under the price (R2, operator 2026-10-19) */
.fs-contact{ display:block; text-align:center; background:var(--fs-green); color:#fff; font-weight:600; text-decoration:none; border-radius:6px;
  padding:var(--fs-btn-pad-y) 1rem; margin:0 0 var(--fs-btn-below); }
.fs-contact:hover{ background:var(--fs-green-dark); color:#fff; }
/* the sale page's breadcrumb row: the trail, and "Contact the seller" at its right end (operator, 2026-10-18; replaced the
   panel button). Wraps below the trail where the row is too narrow - never a sideways scroll. */
.fs-trailrow{ --fs-clink-size:13px; --fs-clink-pad-y:2px; --fs-clink-pad-x:10px; --fs-trailrow-below:22px;
  --fs-clink-size--label:"Breadcrumb row: 'Contact the seller' size"; --fs-clink-pad-y--label:"Breadcrumb row: link pill, space top and bottom";
  --fs-clink-pad-x--label:"Breadcrumb row: link pill, space left and right"; --fs-trailrow-below--label:"Breadcrumb row: space below";
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:16px; row-gap:6px; margin:0 0 var(--fs-trailrow-below); }
.fs-trailrow .cr-trail{ margin:0; min-width:0; }
/* a cell, not a pill (operator, 2026-10-18): the corner radius of the site's fields, buttons and thumbnails. forsale.js
   centres it under the header's "For Sale" (is-placed: same row as the trail; is-below: its own line when the trail
   would collide); without script it stays at the right end of the row. */
.fs-contact-link{ margin-left:auto; font-size:var(--fs-clink-size); font-weight:700; color:var(--fs-green); text-decoration:none; white-space:nowrap;
  background:var(--fs-soft); border-radius:6px; padding:var(--fs-clink-pad-y) var(--fs-clink-pad-x); }
.fs-trailrow.has-placed{ position:relative; }
.fs-contact-link.is-placed{ position:absolute; margin:0; }
.fs-trailrow.has-below{ flex-direction:column; align-items:flex-start; }
.fs-contact-link:hover{ background:#e2f2e7; color:var(--fs-green-dark); }
.fs-layout .fs-tag{ font-size:var(--fs-tag-size); }
.fs-facts{ margin:0; border-top:1px solid var(--fs-line); }
.fs-facts > div{ display:grid; grid-template-columns:var(--fs-facts-label-w) 1fr; gap:8px; padding:var(--fs-facts-row-pad) 0; border-bottom:1px solid #f0f1f3; font-size:var(--fs-facts-size); }
.fs-facts dt{ color:var(--fs-muted); }
.fs-facts dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.fs-listed{ font-size:var(--fs-listed-size); color:var(--fs-muted); margin:.7rem 0 0; }
/* a Registry car not offered for sale (Gate 1 Part 6C, 2026-10-19; Design Paradigms §1b): the sale page's layout, the car's
   own Registry photograph ghosted as on the seller's sold page (opacity .45), the approved heading and sentence in the panel */
.fs-main--ghost .fs-main__img{ opacity:.45; }
.fs-main--ghost a:hover .fs-main__img{ opacity:.6; }
.fs-off__car{ font-weight:700; color:var(--fs-ink); margin:0 0 .5rem; }
.fs-off__text{ color:var(--fs-muted); line-height:1.5; margin:0 0 var(--fs-loc-below); }

.fs-h2{ font-size:var(--fs-h2-size, 1.15rem); margin:0 0 .6rem; color:var(--fs-ink); }
.fs-description{ margin:var(--fs-desc-above) 0 0; }
.fs-description p{ white-space:pre-line; line-height:1.6; margin:0 0 .9rem; }
.fs-history-line{ color:var(--fs-muted); margin:1rem 0 0; }

.fs-inquiry{ margin:2.2rem 0 0; padding:18px 20px; border:1px solid var(--fs-soft-line); background:var(--fs-soft); border-radius:10px; }
.fs-form label{ display:block; font-weight:600; font-size:.88rem; margin:0 0 .8rem; color:var(--fs-ink); }
.fs-form input, .fs-form textarea{ display:block; width:100%; box-sizing:border-box; margin-top:.3rem; padding:8px 10px; font:inherit; font-weight:400;
  border:1px solid #c9ced4; border-radius:6px; background:#fff; }
.fs-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.fs-optional{ font-weight:400; color:var(--fs-muted); }
.fs-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fs-send{ background:var(--fs-green); color:#fff; border:0; border-radius:6px; padding:.6rem 1.3rem; font:inherit; font-weight:600; cursor:pointer; }
.fs-send:hover:not(:disabled){ background:var(--fs-green-dark); }
.fs-send:disabled{ opacity:.6; cursor:default; }
.fs-form__msg{ margin:.7rem 0 0; font-size:.9rem; }
.fs-form__msg.is-error{ color:#b42318; }
.fs-form__done{ margin:0; font-weight:600; }
.fs-note{ font-size:var(--fs-note-size, .8rem); color:var(--fs-muted); margin:1.6rem 0 0; }

@media (max-width:860px){
  .fs-layout{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"media" "panel" "rest"; }
  .fs-panel{ position:static; }
  .fs-thumbs{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .fs-wrap{ margin-top:16px; }
  .fs-form__row{ grid-template-columns:1fr; }
  .fs-layout{ --fs-panel-pad-y:14px; --fs-panel-pad-x:16px; --fs-panel-pad-y--label:"Sale panel: inner space top and bottom (phones)"; --fs-panel-pad-x--label:"Sale panel: inner space left and right (phones)"; }
  .fs-inquiry{ padding:14px 16px; }
}

/* ---- the photograph viewer (forsale.js): large photograph, previous / next, counter, close ---- */
.fs-viewer{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:rgba(12,18,24,.94); }
.fs-viewer[hidden]{ display:none; }
.fs-viewer__img{ max-width:calc(100vw - 140px); max-height:calc(100vh - 90px); object-fit:contain; cursor:zoom-out; border-radius:4px; user-select:none; }
.fs-viewer__btn{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0; border-radius:50%; background:rgba(255,255,255,.14);
  color:#fff; font-size:30px; line-height:52px; cursor:pointer; }
.fs-viewer__btn:hover{ background:rgba(255,255,255,.28); }
.fs-viewer__btn--prev{ left:18px; } .fs-viewer__btn--next{ right:18px; }
.fs-viewer__btn[disabled]{ opacity:.25; cursor:default; }
.fs-viewer__close{ position:absolute; top:12px; right:16px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:#fff; font-size:30px; cursor:pointer; }
.fs-viewer__close:hover{ background:rgba(255,255,255,.14); }
.fs-viewer__count{ position:absolute; bottom:16px; left:0; right:0; text-align:center; color:#d6dbe0; font-size:.9rem; }
.fs-main__link{ cursor:zoom-in; display:block; }
@media (max-width:640px){
  .fs-viewer__img{ max-width:100vw; max-height:calc(100vh - 120px); border-radius:0; }
  .fs-viewer__btn{ top:auto; bottom:44px; transform:none; width:46px; height:46px; line-height:46px; }
}

/* ---- the sale panel while the contact form is the main thing on screen (wide layout only; forsale.js sets
   .is-compact): the main photograph small at the top right, the title and price stepped down beside it; a click on the
   photograph returns to the top of the page ---- */
.fs-car-page{ --fs-thumb-w:112px; --fs-thumb-w--label:"Panel photo (contact view): width"; }
.fs-panel__head{ display:flex; gap:12px; align-items:flex-start; }
.fs-panel__id{ flex:1; min-width:0; }
.fs-panel__thumb{ display:none; flex:0 0 var(--fs-thumb-w); margin-top:2px; padding:0; border:0; border-radius:6px; overflow:hidden; background:#f1f2f4; cursor:pointer; }
.fs-panel__thumb img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.fs-panel__thumb:hover{ opacity:.85; }
.fs-panel.is-compact .fs-panel__thumb{ display:block; animation:fs-thumb-in .2s ease; }
.fs-panel.is-compact .fs-title{ font-size:1.05rem; }
.fs-panel.is-compact .fs-price{ font-size:1.22rem; }
@keyframes fs-thumb-in{ from{ opacity:0; } to{ opacity:1; } }

/* ---- Post a Listing (forsale/post.php) ---- */
.fs-post__choices{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:1.2rem 0 1rem; }
.fs-post__choice{ display:flex; flex-direction:column; border:1px solid var(--fs-line); border-radius:10px; padding:16px 18px; background:#fff; }
.fs-post__choice h2{ font-size:1.1rem; margin:0 0 .5rem; color:var(--fs-ink); }
.fs-post__choice p{ margin:0 0 .7rem; line-height:1.5; }
.fs-post__small{ color:var(--fs-muted); font-size:.88rem; }
.fs-post__btn{ margin-top:auto; align-self:flex-start; background:var(--fs-green); color:#fff; font-weight:600; text-decoration:none; border-radius:6px; padding:.6rem 1.1rem; border:1px solid var(--fs-green); }
.fs-post__btn:hover{ background:var(--fs-green-dark); color:#fff; }
.fs-post__btn--ghost{ background:#fff; color:var(--fs-green); }
.fs-post__btn--ghost:hover{ background:var(--fs-soft); color:var(--fs-green-dark); }
.fs-post__choices--one{ grid-template-columns:1fr; max-width:620px; --fs-post-button-above:.7rem; --fs-post-button-above--label:"Post a Listing: space between text and Add my Citroën button"; }
.fs-post__choices--one .fs-post__choice p:last-of-type{ margin-bottom:var(--fs-post-button-above); }
/* P1 review r5 (Admin, 2026-10-19): the space between the header and the breadcrumb, a named value for the Live Tuner
   (the shell's own 1.5rem, unchanged until tuned) */
.gallery-wrap.fs-post{ --fs-post-trail-above:1.5rem; --fs-post-trail-above--label:"Post a Listing: space above the breadcrumb (below the header)"; padding-top:var(--fs-post-trail-above); }
/* P1 review (Admin, 2026-10-21): the P1 heading "List Your Citroën for Sale" on one line down to 320px - the shell's
   size where it fits, scaled with the width below that, at a lighter weight (named values for the Live Tuner) */
.fs-post__title{ --fs-post-title-max:1.76rem; --fs-post-title-max--label:"Post a Listing: heading size (wide screens)"; --fs-post-title-weight:600; --fs-post-title-weight--label:"Post a Listing: heading weight"; font-size:min(var(--fs-post-title-max), 6.2vw); font-weight:var(--fs-post-title-weight); white-space:nowrap; }
.fs-post__unsure{ color:var(--fs-muted); font-size:.92rem; max-width:760px; }
.fs-place{ color:var(--fs-green); font-weight:600; }
@media (max-width:640px){ .fs-post__choices{ grid-template-columns:1fr; } }