:root{--ob-rule:var(--dpz-line);--ob-tint:var(--dpz-card);--ob-panel:var(--dpz-card);--ob-accent:var(--dpz-pink-ink);--ob-dark:var(--dpz-ink);--ob-muted:var(--dpz-ink2);--ob-radius:4px;--ob-tag:var(--dpz-m);--ob-grid:1180px;}
/* Homepage guide and warehouse examples use each site's existing palette. */
.ob-module, .ob-specialty {
  max-width: var(--ob-grid);
  margin: clamp(2.5rem, 6vw, 5rem) auto;
  padding-inline: 20px;
  scroll-margin-top: 1rem;
}
.ob-module-inner { border-top: 2px solid var(--ob-rule, #d8cbd1); padding-top: clamp(1.25rem, 3vw, 2.25rem); }
.ob-module h2 { margin-bottom: 1.1rem; }
.ob-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding: 0; margin: 0; list-style: none; }
.ob-entries li { min-width: 0; margin: 0; padding: 0 0 0 1rem; border-inline-start: 2px solid var(--ob-rule, #d8cbd1); }
.ob-entries h3 { margin: 0 0 .45rem; }
.ob-entries p { margin: 0; color: var(--ob-muted, inherit); }
.ob-entries + .ob-links { margin-top: .85rem; }
.ob-entries:is(ol) { counter-reset: guide-step; grid-template-columns: 1fr; gap: .95rem; }
.ob-entries:is(ol) li { counter-increment: guide-step; position: relative; padding-left: 2.65rem; border: 0; }
.ob-entries:is(ol) li::before {
  content: counter(guide-step, decimal-leading-zero); position: absolute; left: 0; top: .05rem;
  color: var(--ob-accent, #ad064b); font: 600 .9rem/1.35 var(--ob-tag, monospace);
}
.ob-guide-layout, .ob-help-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); align-items: start; gap: clamp(1.25rem, 4vw, 3.75rem); }
.ob-guide-layout:not(:has(figure)), .ob-help-layout:not(:has(figure)) { grid-template-columns: minmax(0, 70ch); }
.ob-links, .ob-extra-links { display: flex; flex-wrap: wrap; column-gap: 1.4rem; }
.ob-links a, .ob-extra-links a, .ob-specialty > a, a.ob-primary { display: inline-flex; min-height: 44px; align-items: center; }
a.ob-primary { font-weight: 700; }
.ob-qc-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); gap: 12px; align-items: start; }
.ob-qc, .ob-look { margin: 0; border-radius: var(--ob-radius); border: 1px solid var(--ob-rule, #d8cbd1); overflow: hidden; background: var(--ob-panel); }
.ob-qc a, .ob-look a { display: block; }
.ob-qc a:focus-visible, .ob-look a:focus-visible { outline-offset: -4px; }
.ob-qc img, .ob-look img { width: 100%; height: auto; background: var(--ob-tint); }
.ob-qc img { aspect-ratio: 4 / 3; object-fit: contain; }
.ob-look img { aspect-ratio: 4 / 3; object-fit: contain; }
.ob-qc figcaption, .ob-look figcaption { padding: .55rem .75rem .7rem; font-size: .875rem; line-height: 1.45; color: var(--ob-muted, inherit); }
.ob-specialty { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--ob-rule, #d8cbd1); background: var(--ob-tint); border-radius: var(--ob-radius); }
.ob-specialty p { margin: 0 0 .6rem; color: var(--ob-accent, inherit); font: 600 .8rem/1.4 var(--ob-tag, monospace); }
.ob-specialty h2 { margin-bottom: .25rem; }
.ob-specialty > a { font-weight: 700; }
.ob-anchor { display: block; scroll-margin-top: 1rem; }
.ptf-head h1, .dpz-hero h1, .hsh-hero h1 { max-width: none; }
.ptf-sub, .dpz-sub { display: flex; flex-wrap: wrap; column-gap: 1rem; align-items: center; }
.ptf-head input[type=search], .dpz-hero input[type=search], .hsh-hero input[type=search] { min-width: 0; }
.dpz-hero .dpz-label { padding-right: clamp(1rem, 3vw, 2rem); }
@media(max-width: 1220px) { .ob-specialty { margin-inline: 20px; } }
@media(max-width: 680px) {
  .ob-entries, .ob-guide-layout, .ob-help-layout { grid-template-columns: 1fr; }
  .ob-entries { gap: .95rem; }
  .ob-look { max-width: 410px; }
}

@media(max-width: 520px) {
  .ptf-top-in { gap: 8px; }
  .ptf-brand { gap: 8px; }
  .ptf-brand img { width: 76px; }
  .ptf-brand-t { font-size: .93rem; max-width: 12ch; }
  .ptf-head, .hsh-hero { padding-top: 24px; }
  .dpz-hero .dpz-label { padding-inline: 16px; }
}
.ob-guide-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
.ob-look { width: min(100%, 240px); }
.ob-look img { aspect-ratio: auto; }
.ob-expand { display: flex; align-items: center; padding-inline: .75rem; min-height: 44px; font-size: .85rem; }
.ob-qc figcaption, .ob-look figcaption { border-top: 1px solid var(--ob-rule); }
@media(max-width: 680px) {
  .ob-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .ob-look { width: min(100%, 200px); }
}