/* Africar Spares Warehouse: product page and listing additions.
 *
 * Loaded after site.css and catalog.css, only by the pages that use it: the product page, the
 * category listings and the brand pages link it through {% block extra_head %} with
 * ?v={{ asset_version }}. catalog.css still draws the gallery, the buy column, the cards and the
 * listing; this file adds what the review round put on those pages:
 *  - the category page's "Find in <department>" form;
 *  - on the product page: the web description and "Other parts mentioning" under the h1, the
 *    same-description notice, the availability line straight above the quantity and Add to quote
 *    (styled by pages.css .avail-note, which the cart shares; above the button, it is on screen
 *    whenever the button is), the in-place Add to quote status, the usual delivery times under
 *    it (.b-deliv), the returns line and call link,
 *    the "More in" and "More from" section heads, and a tighter phone layout that keeps the
 *    price, the availability line, quantity and Add to quote on the first screen of a 390x844
 *    phone, signed in or out, with one photo or several (the same-description notice, a web
 *    description or a very long title can still move the button below it; the line goes with it);
 *  - the card's in-place Add to quote status.
 * Same design language: flat grounds, hairlines, 2px corners, red underlines on ink links,
 * 44px targets on phones (760 and below).
 */

/* ── Category: find in this department ────────────────────────────────── */
.cat-find{max-width:640px;margin:0 0 28px}
.cat-find label{display:block;margin-bottom:8px;font-weight:700;overflow-wrap:break-word}
.cat-find .cf-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cat-find .input{flex:1 1 160px;min-width:0;height:48px;-webkit-appearance:none;appearance:none}
.cat-find .input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cat-find .btn{flex:none;min-height:48px;padding:0 24px}
.cat-find .cf-clear{display:inline-flex;align-items:center;min-height:44px;margin-left:8px}

/* ── Brand page: the "In our range" line sits close to the line under it ── */
.page-head .b-line + .sub{margin-top:4px}

/* ── Product page ──────────────────────────────────────────────────────── */
/* the lock as plain text (demo sign-in off) is not a link, so it loses the link's underline */
.buy .b-price span.price-lock span{text-decoration:none}

/* under the h1: the PIM's web description, then the description's words as searches */
.buy .b-about{margin-top:18px;max-width:62ch;font-size:var(--fs-body);line-height:1.6;overflow-wrap:break-word}
.b-explore{margin:0;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--fs-ui);line-height:1.7;overflow-wrap:anywhere}
.b-explore .bx-label{margin-right:6px;color:var(--muted);font-weight:600}
.b-explore a{font-weight:700;letter-spacing:.02em;text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .15s}
.b-explore a:hover{text-decoration-color:currentColor}
.b-explore .bx-dot{margin:0 8px;color:var(--muted)}
.b-explore.at-foot{display:none}

/* the same-description notice, under the price: the red rule marks it as a note to read */
.b-same{margin-top:18px;padding:14px 16px 16px;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--accent-ink);border-radius:var(--r);line-height:1.5}
.b-same p{margin:0}
.b-same .tlink{color:var(--ink);text-underline-offset:4px}
.b-same .btn{margin-top:12px}

/* Add to quote: the reply wraps under the quantity and button; empty, it takes no room */
.buy .b-add{flex-wrap:wrap;row-gap:0}
.buy .b-add .added{flex-basis:100%;font-size:var(--fs-ui);font-weight:600;line-height:1.5}
.buy .b-add .added:not(:empty){margin-top:12px}
.added .tlink{color:var(--ink);text-underline-offset:4px;white-space:nowrap}
/* the availability line, straight above the quantity and Add to quote (its look: pages.css
   .avail-note); the form under it comes closer, so the two read as one */
.buy .avail-note{margin-top:16px}
.buy .avail-note + .b-add{margin-top:14px}
/* the usual delivery times: one quiet line under Add to quote and its reply, ahead of Save to a
   list (above the button, its second row on a 390px phone cost some parts the button's place on
   the first screen) */
.buy .b-deliv{margin:10px 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--muted);text-wrap:pretty}
/* on a card the reply takes the foot's full width under the price and the button (the form's
   box steps aside, so its button and reply sit in the foot's own row); empty, it is out of flow */
.card .c-foot{flex-wrap:wrap;row-gap:8px}
.card .c-foot form{display:contents}
.card .added{flex-basis:100%;font-size:var(--fs-sm);font-weight:600;line-height:1.45;white-space:normal}
.card .added:empty{position:absolute}

/* before you order: the returns link, and the call link beside "Ask us" */
.before .checks .tlink{color:var(--ink);text-underline-offset:4px;white-space:nowrap}
.before .b-help{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:18px}
.before .b-help .b-ask{margin-top:0}
.before .b-call{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);white-space:nowrap}

/* More in / More from: a head with the 3px rule, the "All N parts" link at its right */
.related .rel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin-bottom:24px;padding-bottom:12px;border-bottom:var(--rule-heavy)}
.related .rel-head h2{margin:0;padding:0;border:0}
.related .rel-head .tlink{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .cat-find{margin-bottom:20px}
  .cat-find .btn{padding:0 20px}
  /* the row's gap spaces Clear; when it wraps under the field (320) it lines up with it */
  .cat-find .cf-clear{margin-left:0}

  /* the first screen: a slimmer crumb band, a capped photo, 44px thumbnails, a price line box
     no taller than its figures and tighter spacing, so the price, the availability line,
     quantity and Add to quote sit within 844px (the photo still opens the lightbox) */
  .pdp-head .wrap{padding-block:2px}
  .pdp-head + .page-body{padding-top:12px}
  .pdp{gap:12px}
  .gallery .g-main{aspect-ratio:auto;height:min(56vw,240px)}
  .gallery .g-main:has(> .noimg){height:112px}
  .gallery .g-main img{padding:3%}
  .gallery .g-zoom{right:8px;bottom:8px;width:44px;height:44px}
  .gallery .g-thumbs{gap:6px;margin-top:6px}
  .gallery .g-thumbs button{width:44px;height:44px}
  .buy .b-meta{min-height:0}
  .buy h1{margin-top:2px;padding-bottom:12px}
  .buy .b-desc{margin-top:8px}
  .buy .b-about{margin-top:12px}
  .buy .b-price{padding:8px 0}
  .buy .b-price .price{line-height:1.15}
  .buy .b-add{margin-top:12px}
  .buy .avail-note{margin-top:10px}
  .buy .avail-note + .b-add{margin-top:10px}
  /* the notice's part numbers sit in a sentence: a 44px tap area (a 24px line plus 10px above
     and below) whose equal negative margin keeps the line its normal height */
  .b-same{margin-top:12px;padding:12px}
  .b-same .tlink{display:inline-block;padding-block:10px;margin-block:-10px}
  .b-same .btn{margin-top:10px}

  /* the search words move under the buy form, as 44px chips */
  .b-explore.at-top{display:none}
  .b-explore.at-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding:12px 0 0;border-top:1px solid var(--line);border-bottom:0}
  .b-explore.at-foot .bx-label{flex-basis:100%;margin:0}
  .b-explore.at-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r);text-decoration:none}
  .b-explore.at-foot a:hover{border-color:var(--ink)}

  .card .added{flex-basis:auto}

  .before .checks .tlink{display:inline-flex;align-items:center;min-height:44px}
  .before .b-help{gap:0 20px}
  .related .rel-head{padding-bottom:8px}
}
/* one card per row: the button takes the room the form took (catalog.css flexes the form) */
@media (max-width:480px){
  .cards .card .c-foot .add{flex:1}
  .cards .card .added{flex-basis:100%}
}