/* Desktop-only inner-page reading lane. Mobile retains the 1.2.21 baseline. */
@media (max-width: 767px) {
  /* A desktop-only category code must not reserve a missing mobile unit. */
  [data-factory-sticky-host][data-ad-empty='true'] { height: 0; padding-block: 0; margin-block: 0; }
}
@media (min-width: 768px) {
  body[data-template-layout]:is([data-page-type='category'],[data-page-type='content'],[data-page-type='translation']) .site-shell {
    width: min(100%,896px); max-width: 896px; padding-inline: 16px; margin-inline: auto;
  }
  body[data-desktop-directory] .page-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  body[data-desktop-directory] .page-title-hero__inner { max-width: 864px; }
  body[data-desktop-directory] .nav-toggle { display: inline-flex; flex-shrink: 0; }
  body[data-desktop-directory] .mobile-nav-panel {
    inset: calc(var(--masthead-height,68px) + 12px) max(16px,calc((100% - 896px)/2)) auto auto;
    margin: 0; width: min(480px,calc(100% - 32px)); max-width: 480px;
    height: auto; max-height: calc(100dvh - var(--masthead-height,68px) - 28px);
    border: 1px solid var(--ref-border); border-radius: 16px;
    background: var(--color-surface); color: var(--color-ink);
    box-shadow: 0 20px 64px #0004;
  }
  body[data-desktop-directory] .mobile-nav-panel::backdrop { background: #0002; }
  body[data-desktop-directory] .mobile-nav-header { min-height: 68px; padding: 12px 16px; }
  body[data-desktop-directory] .mobile-nav-header .brand { font-size: 15px; }
  body[data-desktop-directory] .mobile-nav-links { padding: 8px 12px 16px; }
  body[data-desktop-directory] .mobile-nav-groups summary { min-height: 48px; font-size: 15px; }
  body[data-desktop-directory] .mobile-nav-groups details > a { padding-block: 10px; }
  .factory-ad iframe { border-radius: 12px; }
  [data-factory-sticky-host] {
    display: block; width: 100%; max-width: 896px; height: 82px; padding: 16px 40px 16px 0;
    margin: 16px auto; top: var(--masthead-height,68px);
  }
  /* Keep measurable width when empty so a wider viewport can restore the ad. */
  body[data-page-type='home'] [data-factory-sticky-host] { padding-inline: 0; }
  .factory-ad--sticky320x50 { position: static; }
  .factory-ad--sticky320x50 button {
    display: grid; place-items: center; right: 8px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; padding: 4px;
    border: 1px solid color-mix(in srgb,var(--color-ink) 14%,transparent);
    color: var(--color-muted-ink); background: var(--color-canvas);
    box-shadow: 0 1px 2px #0001;
  }
  .factory-ad--sticky320x50 button:hover { color: var(--color-ink); }
  .factory-ad--sticky320x50 button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  body [data-factory-sticky-host][data-ad-empty='true'] { height: 0; padding: 0; margin-block: 0; }
  body[data-desktop-directory] :is(.factory-ad--rail160x600,.factory-ad--rail160x300) {
    top: calc(var(--masthead-height,68px) + 12px); border-radius: 12px;
  }
  body[data-template-layout][data-desktop-directory] .factory-ad--rail160x600 { left: calc((100% - 896px)/2 - 180px); }
  body[data-template-layout][data-desktop-directory] .factory-ad--rail160x300 { right: calc((100% - 896px)/2 - 180px); }
}
/* Category cards remain continuous, including before deferred ad initialization. */
@media (min-width: 768px) {
  body[data-page-type='category'] .category-ad-reservation { display: none; }
}