/* Match the official shopping panel with the existing sites' type and widths. */
.ob-home-jump { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:8px; }
.ob-home-jump a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-underline-offset:4px; }
.ob-video { color:var(--ob-dark,inherit); min-width:0; }
.ob-video h3, .ob-video h2 { margin:0 0 12px; }
.ob-video video { width:100%; height:auto; display:block; aspect-ratio:16/9; border-radius:12px; background:#161217; }
.ob-video p { margin:.75rem 0 0; font-size:.94rem; }
.ob-video a { display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; }
.ob-video-on-guide { max-width: min(840px, calc(100% - 40px)); margin: 32px auto; padding: clamp(16px,3vw,28px); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius:20px; }
.ob-style-example { width:min(210px,calc(100% - 40px)); margin:-1.5rem max(20px,calc((100% - 1140px)/2)) 2.5rem auto; }
.ob-guide-panel .ob-guide-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.ob-guide-panel .ob-written-guide, .ob-guide-panel .ob-video { padding:clamp(16px,2.2vw,24px); border:1px solid var(--ob-rule); border-radius:18px; background:var(--ob-panel); }
.ob-official-look { --ob-guide-tint:#fff2f7; --ob-guide-end:#fff0e9; --ob-guide-border:#fae0e9; --ob-guide-white:#fffafd; }
.ob-official-look :is(.ob-why-panel,.ob-guide-panel) { padding:clamp(18px,3vw,30px); border:1px solid var(--ob-guide-border); background:var(--ob-guide-tint); }
.ob-official-look .ob-why-panel { border-radius:24px 24px 0 0; margin-bottom:0; border-bottom:0; }
.ob-official-look .ob-guide-panel { border-radius:0 0 24px 24px; margin-top:0; border-top:0; background:linear-gradient(145deg,var(--ob-guide-tint) 65%,var(--ob-guide-end)); }
.ob-official-look :is(.ob-why-panel,.ob-guide-panel) .ob-module-inner { border:0; padding:0; }
.ob-official-look :is(.ob-why-panel,.ob-guide-panel) h2 { font:750 clamp(1.45rem,2.8vw,2.12rem)/1.17 system-ui,sans-serif; letter-spacing:-.025em; }
.ob-official-look :is(.ob-why-panel,.ob-guide-panel) h3 { font:700 1.05rem/1.3 system-ui,sans-serif; }
.ob-official-look .ob-guide-panel :is(.ob-written-guide,.ob-video) { background:var(--ob-guide-white); border-color:var(--ob-guide-border); }
.ob-official-look :is(.ptf-search,.dpz-search) { box-shadow:none; border:1px solid #ff186b; border-radius:19px; }
.ob-official-look :is(.ptf-search,.dpz-search) button { color:#fff; background:#d90857; }
.ob-official-look .dpz-label { border:1px solid var(--ob-guide-border); border-radius:22px; }
.ob-official-look .dpz-label::before { content:none; }
.ob-official-look .ptf-head { background:transparent; }
.ob-official-look :is(.ptf-head h1,.dpz-hero h1) { font:800 clamp(1.88rem,4vw,3.15rem)/1.11 system-ui,sans-serif; letter-spacing:-.035em; }
.ob-official-look .dpz-wall a { border-width:1px; }
@media(prefers-color-scheme:dark) {
  .ob-official-look { --ob-guide-tint:#2b1c28; --ob-guide-end:#302021; --ob-guide-border:#513443; --ob-guide-white:#211923; }
}
@media(max-width:1220px) { .ob-official-look :is(.ob-why-panel,.ob-guide-panel) { margin-inline:20px; } }
@media(max-width:760px) {
  .ob-guide-panel .ob-guide-layout { grid-template-columns:1fr; }
  .ob-style-example { margin:0 20px 2rem; }
}

:is(.ptf-wall,.dpz-wall,.hsh-aisles,.ptf-card,.hsh-aisle) img[src*="/img/cat/"] {
  width:100%;
  height:auto;
  aspect-ratio:448/352;
  object-fit:contain;
  background:#fff;
}

.ob-official-look .ptf-top::before { display:none; }
.ob-official-look .dpz-top { border-bottom:1px solid var(--ob-guide-border); }
.ob-official-look .ptf-nav a[aria-current="page"] { background:var(--ob-guide-tint); color:var(--ob-accent); }