/* Guides own their presentation. The common editorial tokens own the site values; layouts stay independent.
 * Missing global size tokens are derived once from the site's text size, by semantic role.
 * Consumers may override these --nf-guide-* tokens without adding component overrides.
 */
.nf-guide-ui {
  --nf-guide-font: var(--nf-ui-font);
  --nf-guide-heading-font: var(--nf-ui-heading-font);
  --nf-guide-button-font: var(--nf-ui-button-font);
  --nf-guide-text: var(--nf-ui-text);
  --nf-guide-heading: var(--nf-ui-heading);
  --nf-guide-accent: var(--nf-ui-accent);
  --nf-guide-surface: var(--nf-ui-surface);
  --nf-guide-soft: var(--nf-ui-soft);
  --nf-guide-tint: var(--nf-ui-tint);
  --nf-guide-border: var(--nf-ui-border);
  --nf-guide-weight: var(--nf-ui-weight);
  --nf-guide-heading-weight: var(--nf-ui-heading-weight);
  --nf-guide-control-weight: var(--nf-ui-control-weight);
  --nf-guide-size: var(--nf-ui-size);
  --nf-guide-small-size: var(--nf-ui-small-size);
  --nf-guide-reading-size: var(--nf-ui-reading-size);
  --nf-guide-lead-size: var(--nf-ui-lead-size);
  --nf-guide-title-size: var(--nf-ui-title-size);
  --nf-guide-section-size: var(--nf-ui-section-size);
  --nf-guide-h2-size: var(--nf-ui-h2-size);
  --nf-guide-h3-size: var(--nf-ui-h3-size);
  --nf-guide-body-leading: var(--nf-ui-body-leading);
  --nf-guide-heading-leading: var(--nf-ui-heading-leading);
  --nf-guide-space: var(--nf-ui-space);
  --nf-guide-radius: var(--nf-ui-radius);
  --nf-guide-field-radius: var(--nf-ui-field-radius);
  --nf-guide-button-radius: var(--nf-ui-button-radius);
  --nf-guide-button-bg: var(--nf-ui-button-bg);
  --nf-guide-button-text: var(--nf-ui-button-text);
  --nf-guide-container: var(--nf-ui-container);
  --nf-guide-reading-width: var(--nf-ui-reading-width);
  --nf-guide-media-width: var(--nf-ui-media-width);
  --nf-guide-sticky-top: var(--nf-ui-sticky-top);
  box-sizing: border-box;
  color: var(--nf-guide-text);
  font-family: var(--nf-guide-font);
  font-size: var(--nf-guide-size);
  font-weight: var(--nf-guide-weight);
  line-height: 1.6;
  text-align: start;
  overflow-wrap: anywhere;
}
.nf-guide-ui *, .nf-guide-ui *::before, .nf-guide-ui *::after {
  box-sizing: inherit;
}
/* HTML hidden must beat author display:flex/grid, including in Woo drawers. */
.nf-guide-ui[hidden], .nf-guide-ui [hidden] {
  display: none !important;
}
.nf-guide-ui :is(h1, h2, h3, h4, h5, h6) {
  color: var(--nf-guide-heading);
  font-family: var(--nf-guide-heading-font);
  font-weight: var(--nf-guide-heading-weight);
  line-height: var(--nf-guide-heading-leading);
  margin: 0 0 var(--nf-guide-space);
}
.nf-guide-ui h1 {
  font-size: var(--nf-guide-title-size);
}
.nf-guide-ui h2, .nf-guide-ui h3 {
  font-size: var(--nf-guide-section-size);
}
.nf-guide-ui :is(p, ul, ol, figure) {
  margin-block: 0 var(--nf-guide-space);
}
.nf-guide-ui a {
  color: var(--nf-guide-accent);
  text-underline-offset: .2em;
}
.nf-guide-ui a:hover {
  text-decoration: underline;
}
.nf-guide-ui :is(button, input, select, textarea) {
  font-family: var(--nf-guide-font);
  font-size: var(--nf-guide-size);
}
.nf-guide-ui :is(input, select, textarea) {
  min-inline-size: 0;
  max-inline-size: 100%;
  color: var(--nf-guide-text);
  background-color: var(--nf-guide-surface);
  border: 1px solid var(--nf-guide-border);
  border-radius: var(--nf-guide-field-radius);
  box-shadow: none;
}
/* Leave focus-visible to the theme's --wd-otl-* variables and the browser fallback. */
.nf-guide-ui :is(.sp-guide-search button, .sp-empty button, .sp-side-button, .pc-full-guide, .eu-guide-button, .gr-video-cover button, .gr-video-cover > a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nf-guide-space);
  min-block-size: 44px;
  max-inline-size: 100%;
  padding: calc(var(--nf-guide-space) * .55) var(--nf-guide-space);
  border: 1px solid var(--nf-guide-button-bg);
  border-radius: var(--nf-guide-button-radius);
  background: var(--nf-guide-button-bg);
  color: var(--nf-guide-button-text);
  font-family: var(--nf-guide-button-font);
  font-size: var(--nf-guide-size);
  font-weight: var(--nf-guide-control-weight);
  line-height: 1.5;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.nf-guide-ui :is(.sp-guide-search button, .sp-empty button, .sp-side-button, .pc-full-guide, .eu-guide-button, .gr-video-cover button, .gr-video-cover > a):hover {
  background: var(--nf-guide-accent);
  border-color: var(--nf-guide-accent);
  color: var(--nf-guide-button-text);
  text-decoration: none;
}
.nf-guide-ui :is(.sp-text-button, .sp-reset, .sp-guide-products-search button) {
  min-block-size: 44px;
  padding: calc(var(--nf-guide-space) * .3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--nf-guide-accent);
  font: inherit;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.nf-guide-shell {
  inline-size: 100%;
  max-inline-size: var(--nf-guide-container);
  margin-inline: auto;
  padding-block: calc(var(--nf-guide-space) * 1.5) calc(var(--nf-guide-space) * 4);
}
.nf-guide-ui .sp-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--nf-guide-space) * .5);
  margin-block-end: calc(var(--nf-guide-space) * 1.5);
  font-size: var(--nf-guide-small-size);
}
.nf-guide-ui .sp-breadcrumbs a {
  color: inherit;
}
.nf-guide-ui .sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nf-guide-space) * .5);
  margin-block-end: var(--nf-guide-space);
  color: var(--nf-guide-accent);
  font-size: var(--nf-guide-small-size);
  font-weight: var(--nf-guide-heading-weight);
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nf-guide-ui .sp-eyebrow::before {
  content: '';
  inline-size: 2em;
  block-size: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.nf-guide-hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--nf-guide-space) * 3);
  margin-block-end: calc(var(--nf-guide-space) * 2);
  border: 1px solid var(--nf-guide-border);
  border-radius: calc(var(--nf-guide-radius) * 2);
  background: radial-gradient(circle at 90% 15%, var(--nf-guide-tint), transparent 35%), var(--nf-guide-soft);
}
.nf-guide-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-start: calc(var(--nf-guide-space) * 3);
  inset-inline-end: calc(var(--nf-guide-space) * 2);
  inline-size: 16em;
  aspect-ratio: 1;
  background: url('../../../articles/assets/podoshop-logo-fine-lines.png') center / contain no-repeat;
  opacity: .16;
  pointer-events: none;
}
.nf-guide-hero > div {
  max-inline-size: calc(var(--nf-guide-size) * 70);
}
.nf-guide-hero h1 {
  margin-block-end: var(--nf-guide-space);
  letter-spacing: -.035em;
  line-height: 1.1;
}
.nf-guide-hero :is(.sp-library-heading > p, .nf-guide-deck) {
  font-size: var(--nf-guide-lead-size);
  line-height: 1.6;
  margin: 0;
}
.nf-guide-ui .gr-media {
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: calc(var(--nf-guide-space) * 1.5) 0;
}
.nf-guide-ui .gr-image {
  text-align: center;
}
.nf-guide-ui .gr-image img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 40em;
  object-fit: contain;
  margin-inline: auto;
}
.nf-guide-ui :is(figcaption, .gr-video-caption) {
  color: var(--nf-guide-text);
  font-size: var(--nf-guide-small-size);
  line-height: 1.6;
  padding: calc(var(--nf-guide-space) * .5);
}
.nf-guide-ui .gr-video {
  max-inline-size: var(--nf-guide-media-width);
  border: 1px solid var(--nf-guide-border);
  border-radius: var(--nf-guide-radius);
  overflow: hidden;
  background: var(--nf-guide-surface);
}
.nf-guide-ui .gr-video :is(video, iframe) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
.nf-guide-ui .gr-video-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: calc(var(--nf-guide-space) * .65);
  aspect-ratio: 16 / 9;
  padding: var(--nf-guide-space);
  background: var(--nf-guide-soft);
  text-align: center;
}
.nf-guide-ui .gr-video-cover :is(strong, small, button, .gr-play, a) {
  position: relative;
  z-index: 1;
}
.nf-guide-ui .gr-video-cover small {
  font-size: var(--nf-guide-small-size);
}
.nf-guide-ui .gr-play {
  display: grid;
  place-items: center;
  inline-size: 2.5em;
  block-size: 2.5em;
  border-radius: 50%;
  background: var(--nf-guide-accent);
  color: var(--nf-guide-button-text);
}
.nf-guide-ui .gr-video-poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.nf-guide-ui .gr-has-poster {
  color: var(--nf-guide-button-text);
  background: var(--nf-guide-button-bg);
}
.nf-guide-ui .gr-has-poster .gr-video-poster {
  opacity: .35;
}
.nf-guide-ui .gr-video-caption {
  margin: 0;
  text-align: end;
}
.nf-guide-ui .gr-document, .nf-guide-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nf-guide-space);
  padding: var(--nf-guide-space);
  margin-block: var(--nf-guide-space);
  border: 1px solid var(--nf-guide-border);
  border-radius: var(--nf-guide-radius);
  background: var(--nf-guide-soft);
}
.nf-guide-file strong, .nf-guide-ui .gr-document strong {
  display: block;
  color: var(--nf-guide-heading);
  font-weight: var(--nf-guide-control-weight);
}
.nf-guide-file span, .nf-guide-ui .gr-document small {
  display: block;
  font-size: var(--nf-guide-small-size);
}
.nf-guide-ui .gr-file-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 3em;
  block-size: 3.5em;
  border: 1px solid var(--nf-guide-border);
  font-size: var(--nf-guide-small-size);
}
@media (max-width: 767px) {
  .nf-guide-shell {
    padding-block: var(--nf-guide-space) calc(var(--nf-guide-space) * 2.5);
  }
  .nf-guide-hero {
    padding: calc(var(--nf-guide-space) * 1.5) var(--nf-guide-space);
    border-radius: var(--nf-guide-radius);
  }
  .nf-guide-hero::after {
    display: none;
  }
}