/* ===========================================================
   PREP LIKE NOAH — GEAR
   Requires pln-base.css (tokens, top bar, masthead, footer).
   =========================================================== */

/* ——— two-column layout: categories left, cards right ——— */
.layout {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;   /* .masthead owns the space above */
  display: grid; grid-template-columns: 232px 1fr; gap: 40px; align-items: start;
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; gap: 20px; } }

/* A grid item defaults to min-width:auto, so a wide child (the brands
   rail is a 36-card flex row) stretches the 1fr column instead of
   scrolling inside it. min-width:0 is what keeps the column honest. */
.layout > .content { min-width: 0; }
.catsec, .grid, .brand-rail { min-width: 0; }

.sidebar { position: sticky; top: calc(var(--nav-h) + 20px); }
body.editing .sidebar { top: calc(var(--nav-h) + 77px); }
@media (max-width: 900px) { .sidebar, body.editing .sidebar { position: static; } }
.sidebar-inner { display: flex; flex-direction: column; gap: 14px; }

.search {
  width: 100%; padding: 10px 14px; font: inherit; font-size: 15.5px;
  border: 1px solid var(--line); border-radius: var(--radius-field);
  background: var(--card); color: var(--ink);
}
.search::placeholder { color: var(--muted); }
.search:focus { outline: 2px solid var(--rust-ring); outline-offset: -1px; border-color: var(--rust); }

.catnav { display: flex; flex-direction: column; gap: 1px; }
.catnav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  font-size: 15.5px; font-weight: 600; color: var(--text);
  transition: background .14s ease, color .14s ease;
}
.catnav a span { font-size: 15px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.catnav a:hover { background: var(--line); color: var(--head); }
.catnav a.is-on { background: var(--select); color: #fff; }
.catnav a.is-on span { color: rgba(255,255,255,.72); }
.category-field { display: none; font-size: 15px; font-weight: 600; color: var(--text); }
.category-select {
  display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: 6px;
  padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--card);
}
.category-select:focus-visible { outline: 2px solid var(--rust-ring); outline-offset: 2px; border-color: var(--rust); }
@media (max-width: 900px) {
  .has-category-select .category-field { display: block; }
  .has-category-select .catnav { display: none; }
  .catnav { flex-direction: row; flex-wrap: wrap; gap: 7px; }
  .catnav a { border: 1px solid var(--line); background: var(--card); padding: 8px 14px; border-radius: 99px; font-size: 16px; }
  .catnav a span { display: none; }
}

/* ——— category sections ——— */
/* Anchor offset has to clear whatever is pinned above: the bar alone when
   browsing, bar + editbar when editing, or the heading lands underneath. */
.catsec { padding: 0 0 40px; scroll-margin-top: calc(var(--nav-h) + 20px); }
body.editing .catsec { scroll-margin-top: calc(var(--nav-h) + 77px); }
.catsec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.catsec-head h2 {
  font-family: var(--disp); font-weight: 600; font-size: clamp(24px, 2.9vw, 30px);
  line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--head);
}
.catsec-head .count { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.catsec-blurb { color: var(--text); margin: 0 0 18px; max-width: 60ch; font-size: 16px; }

/* ——— cards ——— */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .grid { grid-template-columns: 1fr; } }

.gear-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-box);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.gear-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }

/* Square product frame with a real gutter — the product never touches the
   edge, and the frame stays square regardless of the photo's aspect. */
.gear-media {
  position: relative; width: 100%; aspect-ratio: 1; flex: 0 0 auto;
  background: #fff; border-bottom: 1px solid var(--line);
}
.gear-media img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; }
.gear-media.is-empty { background: var(--page); }
.gear-media.is-empty::after {
  content: 'No photo'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--line-strong);
}

.gear-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.gear-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; line-height: 1.5;
}
.pill-priority { background: var(--line); color: var(--muted); }
.gear-card[data-priority="critical"] .pill-priority { background: var(--rust-wash); color: var(--rust); }
.gear-card[data-priority="important"] .pill-priority { background: rgba(78,74,65,.12); color: var(--text); }

/* Name clamps at two lines; the description then takes whatever is left of
   a four-line budget (3 lines after a one-line name, 2 after a two-line
   name) so every card lands on the same text height. --desc-lines is set
   per card by balanceCards() in gear-editor.js. */
.gear-name {
  font-family: var(--disp); font-size: 19.5px; font-weight: 500; color: var(--head);
  line-height: 1.18; letter-spacing: .005em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gear-desc {
  color: var(--text); font-size: 15.5px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--desc-lines, 3); overflow: hidden;
}
/* No horizontal padding: .gear-foot is nested inside .gear-body, so any
   would stack on the body's and push the price off the text's left edge. */
.gear-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 0; margin-top: auto; }
.gear-cost { font-weight: 800; font-size: 17px; color: var(--head); font-variant-numeric: tabular-nums; }
.gear-cost:empty::before { content: '—'; color: var(--line-strong); font-weight: 400; }
/* Heaven's Harvest items carry a discount code, and it is the reason to
   buy through that link rather than anywhere else, so it sits on the card
   face next to the price. 14px, not the 12.5px .pill, because this
   audience skews older and a code nobody can read earns nothing. */
.gear-promo {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: var(--rust-wash); color: var(--rust);
  font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
/* The card has no Buy button. Its foot carries the price alone, and the
   outbound link lives in the modal where the vendor is named and it is
   obvious you are leaving the site. */
.gear-foot { justify-content: flex-start; }

/* ——— view switcher (sits directly above the grid) + list view ——— */
.content-bar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 16px; }
.viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-field); overflow: hidden; background: var(--card); }
.viewtoggle button {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--muted);
  background: transparent; border: 0; padding: 8px 14px; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.viewtoggle button + button { border-left: 1px solid var(--line); }
.viewtoggle button svg { width: 15px; height: 15px; }
.viewtoggle button:hover { color: var(--ink); }
.viewtoggle button.is-on { background: var(--head); color: #fff; }

/* One compact row per item: small square thumb, copy, price + buy.
   Note the markup: .gear-foot lives INSIDE .gear-body, not beside it, so
   the row is built as a grid on .gear-body (copy left, foot right) rather
   than as a third column on the card. The thumb is a fixed square that
   does not stretch — letting it stretch gave 220px rows with a tiny
   product adrift in white. */
body[data-view="list"] .grid { grid-template-columns: 1fr; gap: 10px; }
body[data-view="list"] .gear-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "media body"; align-items: center;
}
body[data-view="list"] .gear-card:hover { transform: none; box-shadow: var(--shadow-up); }
/* Flush to the card's left edge and the full height of the row, so the
   photo is part of the card rather than a thumbnail floating in padding.
   That buys back the width the old margin and border were spending. */
body[data-view="list"] .gear-media {
  grid-area: media; align-self: stretch; flex: none;
  width: 104px; aspect-ratio: auto; margin: 0;
  border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #fff;
}
body[data-view="list"] .gear-media img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
body[data-view="list"] .gear-media.is-empty::after { font-size: 10px; letter-spacing: .08em; }

body[data-view="list"] .gear-body {
  grid-area: body; display: grid; padding: 13px 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name foot" "desc foot";
  align-items: center; column-gap: 20px; row-gap: 3px;
  padding: 12px 16px 12px 14px;
}
body[data-view="list"] .gear-name  { grid-area: name; font-size: 19px; }
body[data-view="list"] .gear-desc  {
  grid-area: desc; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
body[data-view="list"] .gear-foot {
  grid-area: foot; align-self: center; justify-content: flex-end;
  gap: 18px; padding: 0; margin-top: 0;
}
@media (max-width: 700px) {
  body[data-view="list"] .gear-media { width: 84px; }
  body[data-view="list"] .gear-body { padding: 11px 13px; row-gap: 2px; }
  body[data-view="list"] .gear-name { font-size: 17px; }
  body[data-view="list"] .gear-desc { -webkit-line-clamp: 2; font-size: 16px; }
  body[data-view="list"] .gear-foot { gap: 10px; }
}
@media (max-width: 520px) {
  /* Only now is there genuinely no room for a side column. */
  body[data-view="list"] .gear-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "desc" "foot";
  }
  body[data-view="list"] .gear-foot { justify-content: space-between; padding-top: 9px; }
}

.empty-state { text-align: center; padding: 70px 24px; color: var(--muted); }
.empty-state b { display: block; font-family: var(--disp); font-size: 25px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--head); margin-bottom: 6px; }

/* ===========================================================
   EDIT MODE
   =========================================================== */

/* The edit surface ships in the markup on every build, so it must be
   hidden by default and revealed only once an editor script has declared
   the host local. Styling it visible and relying on JS to hide it means
   any host where that script does not run shows an Edit button, which is
   exactly what happened on production. Same pattern as .card-tools below. */
.edit-fab { display: none; }
body.is-local .edit-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: var(--head); color: #fff; border: 0;
  border-radius: 999px; padding: 13px 22px; font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer; box-shadow: var(--shadow-up); display: flex; align-items: center; gap: 8px;
}
.edit-fab:hover { background: var(--rust); }
.edit-fab svg { width: 18px; height: 18px; }

.editbar { display: none; position: sticky; top: var(--nav-h); z-index: 45; background: var(--head); color: #fff; }
body.editing .editbar { display: block; }
.editbar .wrap { display: flex; gap: 10px; align-items: center; padding: 10px 24px; flex-wrap: wrap; min-height: 57px; }
.editbar .label { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--line-strong); margin-right: 4px; }
.ebtn {
  font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer;
  transition: all .14s ease; white-space: nowrap;
}
.ebtn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
.ebtn-primary { background: var(--rust); border-color: var(--rust); }
.ebtn-primary:hover { background: var(--rust-deep); border-color: var(--rust-deep); }
.ebtn-done { margin-left: auto; }
.dirty-dot { display: none; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; }
body.is-dirty .dirty-dot { display: block; }

body.editing .gear-card { cursor: grab; }
body.editing .gear-card:hover { transform: none; }
body.editing .gear-card.dragging { opacity: .4; cursor: grabbing; }
body.editing .gear-card.drop-before { box-shadow: inset 4px 0 0 0 var(--rust), var(--shadow); }
body.editing .gear-card.drop-after  { box-shadow: inset -4px 0 0 0 var(--rust), var(--shadow); }

/* On a local host the tools are simply there; the published page never
   builds them at all. */
.card-tools { display: none; position: absolute; top: 8px; right: 8px; z-index: 2; gap: 4px; }
body.is-local .card-tools { display: flex; }
.gear-card .card-tools { opacity: 0; transition: opacity .14s ease; }
.gear-card:hover .card-tools, body.editing .card-tools { opacity: 1; }
.card-tools button {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line);
  background: rgba(255,253,248,.97); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 1px 4px rgba(44,32,16,.18);
}
.card-tools button:hover { background: var(--head); color: #fff; border-color: var(--head); }
.card-tools button svg { width: 15px; height: 15px; }
.card-tools .t-del:hover { background: var(--rust); border-color: var(--rust); }
body.editing .catsec { outline: 2px dashed transparent; outline-offset: 8px; border-radius: 12px; transition: outline-color .15s ease; }
body.editing .catsec.drop-target { outline-color: var(--rust); }

/* ——— drawer ——— */
.drawer-back { position: fixed; inset: 0; z-index: 70; background: rgba(44,40,32,.42); display: none; }
.drawer-back.open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); z-index: 71;
  background: var(--card); box-shadow: -10px 0 40px rgba(44,32,16,.26);
  transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex: none; }
.drawer-head h2 { font-family: var(--disp); font-size: 23px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--head); }
.drawer-head .x { margin-left: auto; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.drawer-head .x:hover { color: var(--rust); }
/* The form sits between the drawer and its body, so it has to carry the
   flex chain through — otherwise .drawer-body grows to content height
   and the page scrolls instead of the panel. min-height:0 lets it
   shrink below its content. */
#gear-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.drawer-body { padding: 20px 22px 28px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.drawer-foot {
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--page);
  display: flex; gap: 10px; align-items: center; flex: none;
}
/* Delete sits bottom-left as a quiet icon; Cancel and Save group on the right. */
.drawer-foot #drawer-cancel { margin-left: auto; }
.fld { margin-bottom: 15px; }
.fld > label { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.fld input, .fld textarea, .fld select {
  width: 100%; font: inherit; font-size: 15.5px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-field);
  background: #fff; color: var(--ink);
}
.fld textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: 2px solid var(--rust-ring); outline-offset: -1px; border-color: var(--rust); }
.fld .hint { font-size: 13px; color: var(--muted); margin-top: 5px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-save { font: inherit; font-weight: 700; font-size: 15px; padding: 11px 20px; border-radius: var(--radius-field); border: 0; background: var(--rust); color: #fff; cursor: pointer; }
.btn-save:hover { background: var(--rust-deep); }
.btn-cancel { font: inherit; font-weight: 700; font-size: 15px; padding: 11px 20px; border-radius: var(--radius-field); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.btn-cancel:hover { border-color: var(--muted); }
.btn-del {
  width: 40px; height: 40px; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-field); border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer;
}
.btn-del svg { width: 17px; height: 17px; pointer-events: none; }
.btn-del:hover { background: var(--rust); color: #fff; border-color: var(--rust); }
.img-preview { width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: #fff center/contain no-repeat; margin-bottom: 8px; }

/* ——— import modal ——— */
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(44,40,32,.5); display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-back.open { display: flex; }
.modal { background: var(--card); border-radius: var(--radius-box); width: min(780px, 100%); max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-up); }
.modal-head { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.modal-head h2 { font-family: var(--disp); font-size: 24px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--head); }
.modal-head .x { margin-left: auto; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.modal-head .x:hover { color: var(--rust); }
.modal-body { padding: 20px 24px; overflow-y: auto; }
.modal-foot { padding: 14px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; background: var(--page); align-items: center; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tab { font: inherit; font-weight: 700; font-size: 14.5px; padding: 9px 15px; border: 0; background: none; color: var(--muted); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tab.is-on { color: var(--head); border-bottom-color: var(--rust); }
.tabpane { display: none; }
.tabpane.is-on { display: block; }
.modal textarea {
  width: 100%; min-height: 230px; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; line-height: 1.55; padding: 12px; border: 1px solid var(--line);
  border-radius: 8px; resize: vertical; background: var(--page); color: var(--ink);
}
.modal p { margin-bottom: 12px; color: var(--text); font-size: 15.5px; }
.modal code { background: var(--line); padding: 1.5px 6px; border-radius: 4px; font-size: 13.5px; font-family: ui-monospace, Menlo, monospace; }
.modal pre { background: var(--page); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; color: var(--text); }
.import-note { font-size: 14px; color: var(--muted); margin-right: auto; }
.import-note.err { color: var(--rust); font-weight: 700; }
.import-note.ok { color: var(--green); font-weight: 700; }

@media print { .topbar, .sidebar, .edit-fab, .editbar, .card-tools { display: none !important; } body { padding-top: 0; } .layout { grid-template-columns: 1fr; } }

/* ——— item-modal pieces specific to gear ——— */
/* ===========================================================
   ITEM MODAL — full detail, with prev/next
   =========================================================== */

.gear-card { cursor: pointer; }
body.editing .gear-card { cursor: grab; }

.gear-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 18px; }
.meta-row dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.meta-row dd { font-size: 16px; font-weight: 700; color: var(--head); }
.gear-options { list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* White card with the product photo flush to the left edge, so the image
   reads as part of the card rather than a thumbnail floating on a tint. */
/* A grid rather than a row, so the price can sit directly above the buttons
   it prices. Columns are assigned by class, which keeps the options that
   carry no photo (column 1 collapses to nothing) laid out the same way. */
.gear-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); overflow: hidden;
}
/* Square, always. The photo used to size its own row from its natural
   aspect, so a tall thin product (the LifeStraw) made its row half again as
   deep as the one above it for no reason a reader could see. */
.opt-im {
  width: 76px; aspect-ratio: 1; object-fit: contain; align-self: stretch;
  height: auto; min-height: 100%;
  background: #fff; border-right: 1px solid var(--line);
  flex: none; padding: 8px;
}
.opt-im  { grid-column: 1; grid-row: 1 / span 2; }
.opt-main { grid-column: 2; grid-row: 1 / span 2; padding: 11px 14px; }
/* Price above the buttons, not beside them. Side by side, a two-vendor row
   pushed the price away from the thing it prices and squeezed the name into
   a column too narrow to read. */
.opt-price { grid-column: 3; grid-row: 1; padding: 11px 12px 0; align-self: end; }
.opt-links { grid-column: 3; grid-row: 2; padding: 5px 12px 11px; align-self: start; }

.opt-main { display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; }

/* A product name that wraps to two lines was carrying the inherited body
   leading, which opened a gap wide enough to read as two separate titles. */
.opt-name { font-weight: 700; font-size: 15.5px; line-height: 1.22; color: var(--head); }
/* Two lines, then it stops. These notes vary from four words to a sentence
   and a half, and the long ones set the height of every row beside them. */
.opt-note {
  font-size: 14px; line-height: 1.3; color: var(--muted); margin-top: 3px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.opt-price {
  font-weight: 800; font-size: 15.5px; color: var(--head); white-space: nowrap;
  display: block; text-align: right;
}
.opt-links { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.opt-link {
  background: var(--rust); color: #fff; text-decoration: none; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; padding: 7px 12px; border-radius: 7px;
  transition: background .14s ease;
}
.opt-link:hover { background: var(--rust-deep); }

/* ——— options editor (inside the drawer) ——— */
.opt-editor { display: flex; flex-direction: column; gap: 10px; }
.opt-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: var(--card); }
.opt-row input { background: #fff; }
.opt-row .o-lab {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 5px;
}
.opt-row .o-lab + textarea, .opt-row .o-lab + input { margin-bottom: 10px; }
.opt-row textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.4;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); resize: vertical;
}
.opt-row textarea:focus, .opt-row input:focus {
  outline: 2px solid var(--rust-ring); outline-offset: -1px; border-color: var(--rust);
}
.opt-row .o-split { display: flex; gap: 10px; }
.opt-row .o-split > div { width: 150px; }
.opt-row .o-expand {
  margin-left: auto; font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 0; color: var(--rust); cursor: pointer;
  padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.opt-row .o-expand:hover { color: var(--rust-deep); }
.opt-row .vrow { display: grid; grid-template-columns: 110px 1fr 32px; gap: 7px; margin-top: 7px; }
.opt-row .mini {
  font: inherit; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer;
}
.opt-row .mini:hover { border-color: var(--muted); color: var(--ink); }
.opt-row .x {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
}
.opt-row .x:hover { background: var(--rust); color: #fff; border-color: var(--rust); }
.opt-row .foot { display: flex; gap: 7px; margin-top: 9px; align-items: center; }
.opt-row .foot .del { margin-left: auto; color: var(--rust); }
.opt-row .foot .del:hover { background: var(--rust); color: #fff; border-color: var(--rust); }
.opt-add {
  font: inherit; font-size: 14px; font-weight: 700; padding: 9px 14px; border-radius: 8px;
  border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); cursor: pointer;
}
.opt-add:hover { border-color: var(--muted); color: var(--ink); }

/* ——— unsaved-draft notice (inline, never a blocking dialog) ——— */
.draft-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--head); color: #fff; border-radius: var(--radius-field);
  padding: 11px 14px; margin-bottom: 16px; font-size: 14.5px; font-weight: 600;
}
.draft-bar .ebtn { padding: 6px 12px; font-size: 13.5px; }
.draft-bar .restore { background: var(--rust); border-color: var(--rust); }
.draft-bar .restore:hover { background: var(--rust-deep); border-color: var(--rust-deep); }

/* ——— editable category heading + blurb (edit mode only) ——— */
body.editing .catsec-title,
body.editing .catsec-blurb {
  outline: 1px dashed var(--line-strong); outline-offset: 4px; border-radius: 4px;
}
body.editing .catsec-title:focus,
body.editing .catsec-blurb:focus {
  outline: 2px solid var(--rust); outline-offset: 4px; background: var(--card);
}
body.editing .catsec-blurb:empty::before {
  content: 'Add a description for this category…'; color: var(--muted); font-style: italic;
}

/* Pencil sits beside the close button, top-right of the pop-up. */
.im-edit {
  position: absolute; top: 10px; right: 54px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: rgba(255,255,255,.94);
  color: var(--ink); cursor: pointer;
}
.im-edit svg { width: 15px; height: 15px; pointer-events: none; }
.im-edit:hover { background: var(--head); color: #fff; border-color: var(--head); }

/* Pull a remote image into the repo and relink the field. */
.img-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.mini-btn {
  font: inherit; font-weight: 700; font-size: 14px; padding: 8px 13px;
  border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer;
}
.mini-btn:hover { border-color: var(--muted); }
.mini-btn[disabled] { opacity: .55; cursor: default; }
.img-note { font-size: 14px; color: var(--muted); }
.img-note.ok { color: var(--green); font-weight: 700; }
.img-note.err { color: var(--rust); font-weight: 700; }

/* Roomier box for a longer note — a panel, not a takeover. */
.expand-back {
  position: fixed; inset: 0; z-index: 95; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(51,47,40,.45);
}
.expand-box {
  background: var(--card); border-radius: var(--radius-box);
  width: min(560px, 100%); padding: 20px 22px 18px;
  box-shadow: var(--shadow-up); display: flex; flex-direction: column; gap: 12px;
}
.expand-head { display: flex; align-items: center; gap: 12px; }
.expand-head b { font-size: 17px; color: var(--head); }
.expand-head .x {
  margin-left: auto; background: none; border: 0; font-size: 24px;
  line-height: 1; color: var(--muted); cursor: pointer;
}
.expand-head .x:hover { color: var(--rust); }
.expand-box textarea {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.5;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-field);
  background: #fff; color: var(--ink); resize: vertical;
}
.expand-box textarea:focus { outline: 2px solid var(--rust-ring); outline-offset: -1px; border-color: var(--rust); }
.expand-foot { display: flex; gap: 10px; justify-content: flex-end; }

/* Typed confirmation for a destructive action — the page's own dialog,
   not the browser's host-labelled prompt. */
.confirm-back {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(51,47,40,.5);
}
.confirm-box {
  background: var(--card); border-radius: var(--radius-box);
  width: min(420px, 100%); padding: 26px 26px 22px;
  box-shadow: var(--shadow-up); display: flex; flex-direction: column; gap: 10px;
}
.confirm-box h3 {
  font-family: var(--body); font-weight: 800; font-size: 21px; color: var(--head);
}
.cf-name {
  font-weight: 700; font-size: 16px; color: var(--ink);
  background: var(--page); border-radius: 8px; padding: 10px 12px;
}
.cf-say { font-size: 15.5px; color: var(--text); line-height: 1.45; }
.cf-say b { color: var(--rust); letter-spacing: .04em; }
.cf-in {
  width: 100%; font: inherit; font-size: 16px; letter-spacing: .06em;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-field);
  background: #fff; color: var(--ink);
}
.cf-in:focus { outline: 2px solid var(--rust-ring); outline-offset: -1px; border-color: var(--rust); }
.confirm-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.cf-yes {
  font: inherit; font-weight: 700; font-size: 15px; padding: 11px 18px;
  border-radius: var(--radius-field); border: 0;
  background: var(--rust); color: #fff; cursor: pointer;
}
.cf-yes:hover:not([disabled]) { background: var(--rust-deep); }
.cf-yes[disabled] { opacity: .4; cursor: default; }

@media (max-width: 520px) {
  .gear-option { flex-wrap: wrap; }
  .opt-im { width: 100%; height: 120px; border-right: 0; border-bottom: 1px solid var(--line); }
  .gear-option > .opt-main { flex: 1 1 100%; }
  .gear-option > .opt-price, .gear-option > .opt-links { padding: 0 14px 12px; }
}