/* Recovery PDP UI — gallery, details blocks and the restock notify form.
   Tokens only: cream/obsidian/ember/ice + Fraunces/Manrope already defined by
   site.css and daylight.css. No new palette, no rebrand. */

.bcg{margin:0;min-width:0}
.bcg-main{position:relative;border-radius:18px;overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line)}
/* contain, never cover: a cropped boot or case is not the product the buyer is paying
   for. Letterboxing sits on the surface token, which is the page background anyway. */
.bcg-main img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:contain;
  background:var(--surface)}
/* Larger hero than the old single .shot: the owner asked for bigger, more useful photos. */
@media(min-width:961px){.bcg-main img{min-height:420px}}
.bcg-ctl{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.bcg-nav{flex:0 0 auto;min-width:44px;min-height:44px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);border-radius:999px;font-size:20px;line-height:1;
  cursor:pointer}
.bcg-nav:hover{border-color:var(--ice)}
.bcg-count{color:var(--muted);font-size:13px}
.bcg-thumbs{display:flex;gap:10px;align-items:center;margin-top:10px;overflow-x:auto;
  padding-bottom:4px;max-width:100%;-webkit-overflow-scrolling:touch}
.bcg-thumb{flex:0 0 84px;height:64px;padding:0;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--surface);cursor:pointer}
.bcg-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:var(--surface)}
.bcg-thumb[aria-pressed="true"]{border-color:var(--ember);outline:1px solid var(--ember)}
.bcg[hidden]{display:none}
html .bcg-main,html .bcg-thumb,html .bcg-nav{background:var(--surface);border-color:var(--line);
  color:var(--text)}

/* ---------- accessory / support-part detail page ---------- */
.bc-acc-lede{color:var(--muted)}
.bc-detail-tbl th{text-align:left;width:38%;font-weight:600}
.bc-src{font-size:12px;color:var(--ice)}

/* ---------- restock notify form (backordered items only) ---------- */
.bc-notify{margin:0 0 18px;border:1px solid var(--line);border-radius:18px;padding:16px 16px 14px;
  background:var(--surface)}
.bc-notify h3{font-family:var(--display);font-size:17px;margin:0 0 6px}
.bc-notify p{margin:0 0 12px;font-size:14px;color:var(--muted)}
.bc-notify-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.bc-notify label{display:flex;flex-direction:column;gap:6px;flex:1 1 220px;font-size:13px;
  color:var(--muted)}
.bc-notify input[type="email"]{min-height:44px;border:1px solid var(--line);border-radius:12px;
  padding:0 12px;background:var(--bg);color:var(--text);font:inherit;font-size:15px}
.bc-notify input[type="email"]:focus-visible{outline:2px solid var(--ice);outline-offset:1px}
.bc-notify .btn{min-height:44px}
.bc-notify-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bc-notify-msg{margin:10px 0 0;font-size:13.5px;min-height:1em}
.bc-notify-msg.is-ok{color:var(--ice)}
.bc-notify-msg.is-err{color:var(--ember)}
html .bc-notify{background:var(--surface);border-color:var(--line)}