/* What the working shop adds to the demo's style.css: forms that answer, the office picker, the gallery, tracking. */
.muted { color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hero__lead { margin-top: 14px; max-width: 46ch; color: var(--deep-muted); }
.form__h { font-size: 1.4rem; margin-top: 12px; }
.form__note { color: var(--muted); font-size: .95rem; }
.formerr { padding: 14px 16px; border-radius: 8px; background: #fdecea; color: #8a1c13; border: 1px solid #f3c2bd; font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; min-height: 0; margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }
.check a { color: inherit; }
.dlbox { display: grid; gap: 14px; }
.dlbox[hidden], .invbox[hidden] { display: none; }
.invbox { display: grid; gap: 14px; padding: 16px; border: 1px dashed var(--line); border-radius: 8px; }
.officepick { position: relative; }
.officepick__list { display: grid; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 6px; }
.officepick__list:empty { display: none; }
.officepick__list button { text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; font: inherit; color: inherit; }
.officepick__list button:hover, .officepick__list button:focus { background: #f4f3f0; outline: 0; }
.officepick__list button b { display: block; font-size: .95rem; }
.officepick__list button small { color: var(--muted); }
.officepick__list p { padding: 10px 14px; margin: 0; color: var(--muted); }
.officepick input.is-picked { border-color: #1f7a3a; }
[data-submit][disabled] { opacity: .6; pointer-events: none; }
.sbar__form--page { background: #fff; border-color: var(--line); margin-bottom: 18px; max-width: 760px; }
.sbar__form--page input { color: var(--ink); }
.shop--nofilters { grid-template-columns: minmax(0, 1fr) !important; }
.shop__bar { gap: 12px; flex-wrap: wrap; }
.sortby { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.sortby select { min-height: 36px; border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; background: #fff; font: inherit; color: var(--ink); }
.price--ask { font-weight: 700; font-size: .95rem; color: var(--muted); white-space: normal; }
.pdp__price .price--ask { font-size: 1.4rem; }
.card__out { font-size: .85rem; font-weight: 700; color: var(--muted); }
.pdp__stock { margin-top: 8px; font-weight: 600; font-size: .95rem; }
.pdp__stock--in { color: #1f7a3a; }
.pdp__stock--order { color: #9a6700; }
.pdp__stock--out { color: #8a1c13; }
.pdp__gal { display: grid; gap: 10px; }
.pdp__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp__thumbs button { width: 72px; height: 72px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.pdp__thumbs button.is-on { border-color: var(--accent); }
.pdp__thumbs img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pdp--info { margin-top: 50px; align-items: start; }
.rich h2 { font-size: 1.35rem; margin: 26px 0 8px; }
.rich p, .rich ul { margin: 0 0 12px; }
.rich ul { padding-left: 20px; }
.rich li { margin: 4px 0; }
.track { margin-top: 20px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.track h2 { font-size: 1.6rem; margin: 6px 0 8px; }
.track__ev { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; border-left: 2px solid var(--accent); }
.track__ev li { padding-left: 14px; display: grid; gap: 2px; }
.track__ev time { font-size: .85rem; color: var(--muted); font-weight: 600; }
.tag [data-ends] { font-variant-numeric: tabular-nums; }
.site-credit { display: inline-flex; align-items: center; gap: 7px; opacity: .72; text-decoration: none; color: inherit; font-size: .85rem; }
.site-credit:hover { opacity: 1; }
.site-credit img { height: 13px; width: auto; }
.line__k s { color: var(--muted); margin-right: 6px; }
@media (max-width: 720px) {
  .pdp--info { margin-top: 30px; }
  .shop__bar .sortby { order: 3; }
}