.crumbs { font-size: 14px; color: var(--ink-3); padding-top: 1.4rem; }
  .crumbs a:hover { color: var(--ink); }
  .product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 1.2rem 4rem; }
  @media (min-width: 1000px) { .product { grid-template-columns: minmax(0, 1fr) 380px; gap: 3rem; align-items: start; } }

  /* Gallery */
  .g-main { position: relative; }
  .g-plate { aspect-ratio: 4 / 3; }
  .g-empty { aspect-ratio: 4 / 3; }
  .g-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--bg-2) 88%, transparent); color: var(--ink); font-size: 26px; line-height: 1; backdrop-filter: blur(6px); }
  .g-arrow:hover { border-color: var(--ink-3); }
  .g-prev { left: 12px; } .g-next { right: 12px; }
  .g-cap { font-size: 13.5px; color: var(--ink-3); margin-top: .6rem; min-height: 1.4em; white-space: pre; }
  .g-thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
  .thumb { flex: 0 0 auto; width: 84px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); opacity: .75; transition: opacity .15s, border-color .15s; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .thumb:hover { opacity: 1; }
  .thumb.on { opacity: 1; border-color: var(--accent); }

  /* Copy */
  .p-head { margin-top: 2rem; }
  .p-brand { font-size: 14px; color: var(--ink-3); }
  .p-name { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; margin-top: .25rem; }
  .p-blurb { margin-top: .8rem; }
  .p-body { margin-top: 1.6rem; display: grid; gap: 1.6rem; }
  .p-body h2 { font-size: 20px; margin-bottom: .5rem; }
  .p-body p { color: var(--ink-2); max-width: 65ch; }
  .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 2rem; margin: 0; }
  @media (min-width: 640px) { .specs { grid-template-columns: repeat(3, 1fr); } }
  .specs dt { font-size: 12.5px; color: var(--ink-3); }
  .specs dd { margin: .1rem 0 0; font-weight: 600; font-size: 15px; }

  /* Side panel: add, availability calendar */
  .side { background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--radius); }
  @media (min-width: 1000px) { .side { position: sticky; top: calc(var(--nav-h) + 16px); } }
  .side > div { padding: 1.1rem 1.15rem; }
  .side > div + div { border-top: 1px solid var(--rule); }
  .avail-note { font-size: 14px; color: var(--ink-2); margin-top: .8rem; }
  .side-actions { display: grid; gap: .5rem; margin-top: .9rem; }
  .cal-nav { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
  .cal-btn { width: 34px; height: 34px; background: transparent; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--ink); font-size: 20px; line-height: 1; }
  .cal-btn:hover { border-color: var(--ink-3); }
  .cal-month { margin-top: .9rem; }
  .cal-month h3 { font-size: 15px; margin-bottom: .4rem; }
  .weeks { display: grid; gap: 4px; }
  .week { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 38px; padding: .3rem .7rem; border-radius: var(--radius); font-size: 13.5px; border: 1px solid transparent; }
  .week .wk-days { font-variant-numeric: tabular-nums; }
  .week .wk-state { font-size: 12px; }
  .week.on { font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--ok) 16%, transparent); }
  .week.on .wk-state { color: var(--ok); }
  .week.off { color: var(--ink-3); opacity: .55; border-color: var(--rule); }
  .week.now { outline: 1px solid var(--accent); outline-offset: -1px; }
  .cal-fine { font-size: 12.5px; color: var(--ink-3); margin-top: .8rem; }
  .missing { padding: 4rem 0; display: grid; gap: 1rem; justify-items: start; }
  .modal { width: min(100% - 2rem, 460px); background: var(--bg-2); color: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 1.25rem 1.3rem 1.2rem; box-shadow: var(--shadow-lg); }
  .modal::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
  .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .modal-close { width: 36px; height: 36px; background: transparent; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--ink); font-size: 22px; line-height: 1; }
  .modal-title { font-size: 24px; margin-top: 1rem; }
  .modal-lede { font-size: 14px; color: var(--ink-2); margin-top: .4rem; }
  .modal .form { margin-top: 1rem; display: grid; gap: .85rem; }
  .form-actions { display: grid; gap: .5rem; margin-top: .3rem; }
  .form-note { font-size: 13px; color: var(--ink-2); min-height: 1.4em; }
  .updates-kicker { font-size: 13px; font-weight: 600; color: var(--accent); }
  .updates-actions { grid-template-columns: 1fr auto; align-items: center; }
  #updates-done { margin-top: 1rem; }