.ok-media__wrapper {
    --media-bg-default: transparent;

    background: var(--media-bg, var(--media-bg-default));
}

.ok-media.image {
    display: flex;
    justify-content: center;
    margin-bottom: var(--size-spacing-one-x);
    position: relative;
}

.ok-media__wrapper .ok-media.image {
    min-height: 470px;
    max-width: none;
}

.ok-media__wrapper .ok-media.image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
}  

@media (min-width: 48rem) {
    .ok-media__wrapper .ok-media.image {
        min-height: 580px;
    }  
}

.product-grid {
    display: grid;
    gap: var(--size-spacing-half-x);
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    padding: var(--size-spacing-one-x);
    max-width: var(--size-breakpoint-lg);
    margin: 0 auto var(--size-spacing-one-x);
}

@media (min-width: 60rem) {
    .product-grid {
        gap: var(--size-spacing-one-x);
        grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    }
}

/**
 * Center a single ok-card or ok-story-card
 *
 * 1. ok-card collapses without, sets reasonable fallback 
      width of ok-story-card
 * 2. prevents ok-story-card from being too squatty
 */

.product-grid > .ok-card:nth-child(1):last-child, 
.product-grid > .ok-story-card:nth-child(1):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 300px; /* 1 */
    min-height: 310px; /* 2 */
}
/* BASE */
.sf-rte {
    max-width: var(--size-breakpoint-xl);
    margin: 0 auto var(--size-spacing-one-x);
    display: flex;
    padding: 0 var(--size-spacing-one-x);
}

@media (min-width: 75rem) {
    .sf-rte {
        padding: 0;
    }
}

.sf-rte__copy-block {
    display: flex;
    flex-direction: column;
    gap: var(--size-spacing-half-x);
}

.sf-rte--seo .sf-rte__copy-block > * {
    font-size: unset;
    font-weight: unset;
}

@media (min-width: 48rem) {
    .sf-rte__copy-block[data-spacing~=small] {
        gap:  var(--size-spacing-one-x);
    }
}

/* VERTICAL SPACING */
.sf-rte[data-spacing~=small] {
    padding:  var(--size-spacing-half-x) var(--size-spacing-one-x);
}

.sf-rte[data-spacing~=medium] {
    padding:  var(--size-spacing-one-and-a-half-x) var(--size-spacing-one-x);
} 

.sf-rte[data-spacing~=large] {
    padding:  var(--size-spacing-two-x) var(--size-spacing-one-x);
}

@media (min-width: 48rem) {
    .sf-rte[data-spacing~=small] {
        padding:  var(--size-spacing-one-x);
    }

    .sf-rte[data-spacing~=medium] {
        padding:  var(--size-spacing-two-x) var(--size-spacing-one-x);
    }

    .sf-rte[data-spacing~=large] {
        padding:  var(--size-spacing-four-x) var(--size-spacing-one-x);
    }
}

@media (min-width: 75rem) {
    .sf-rte[data-spacing~=small] {
        padding:  var(--size-spacing-one-x) 0;
    }

    .sf-rte[data-spacing~=medium] {
        padding:  var(--size-spacing-two-x) 0;
    }

    .sf-rte[data-spacing~=large] {
        padding:  var(--size-spacing-four-x) 0;
    }
}

/* BLOCK ALIGNMENT */
.sf-rte[data-block-alignment~=center] {
    justify-content: center;
}

.sf-rte[data-block-alignment~=right] {
    justify-content: end;
}

/* TEXT ALIGNMENT */
.sf-rte__copy-block[data-text-alignment~=center] {
    text-align: center;
}

.sf-rte__copy-block[data-text-alignment~=right] {
    text-align: right;
}

/* TEXT WIDTH */
.sf-rte__copy-block[data-text-width~=small]{
    max-width: 25rem;
}

.sf-rte__copy-block[data-text-width~=medium]{
    max-width: 37.5rem;
}

.sf-rte__copy-block[data-text-width~=full]{
    max-width: 50rem;
}
.ok-checkbox__label {
    align-items: start !important;
}
.sf-signup {
    padding: var(--size-spacing-one-x);
    display: flex;
    flex-direction: column;
    gap: var(--size-spacing-one-x);
    max-width: 800px;
    margin: 0 auto;
}

.sf-signup .ok-button {
    width: 100%;
}

.cx-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-spacing-one-x);
}

.sf-signup--terms-and-privacy {
    padding: var(--size-spacing-two-x);
    min-height: 10rem;
    max-height: 10rem;
    overflow-y: auto;
    border-radius: 3px;
    border: 3px dashed var(--color-blue-60n);
}
.hd-logo-row {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    background: var(--color-purple-20n);
    background: linear-gradient(
        180deg, 
        rgba(255,255,255,1) 19%, 
        rgba(232,146,67,1) 19%, 
        rgba(232,146,67,1) 38%,
        rgba(246,192,94,1) 38%, 
        rgba(246,192,94,1) 47%, 
        rgba(207,204,203,1) 47%, 
        rgba(207,204,203,1) 53%, 
        rgba(128,191,209,1) 53%, 
        rgba(128,191,209,1) 61%, 
        rgba(93,136,195,1) 61%, 
        rgba(93,136,195,1) 80%, 
        rgba(255,255,255,1) 80%
    );
    margin-top: var(--size-spacing-one-x);
}

@media (min-width: 60rem) {
    [data-brand='heydude'] .header-logo {
        min-width: 112px;
        min-height: 72.333px;
        flex-shrink: 0;
    }
}

.sf-sub-nav h2 {
	color: var(--color-base-90);
	font-size: var(--font-size-800);
	padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x);
}
.sf-sub-nav .sub-nav--without-icon .ok-sub-nav__text-wrapper {
	margin: 0;
}
.sf-sub-nav .sub-nav--with-icon .ok-sub-nav {
	padding-top: 0;
	padding-bottom: 0;
}
.sf-sub-nav .sub-nav--with-icon .ok-sub-nav svg {
	margin-bottom: var(--size-spacing-half-x);
}
.header-nav {
    display: flex;
}

[data-brand='heydude'] .header-nav {
    grid-column: 2;
    display: flex;
    flex-grow: 1;
    justify-content: center;
}
@media (min-width: 60rem) {
    [data-brand='heydude'] .header-wrapper {
        min-height: 144.33px;
    }
    [data-brand='heydude'] .nav-main-menu {
        top: 143px;
    }

    [data-brand='heydude'] .header-wrapper-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
        margin: 0 auto;
    }
}

@media (min-width: 75rem) {
    [data-brand='heydude'] .nav-main-menu {
        top: 161px;
    }
}

.header-wrapper-inner {
    display: flex;
    align-items: stretch;
    max-width: 90rem;
    margin: 0 auto;
}
/* null-search */
.null-search__top {
  background-color: var(--color-blue-10n);
  margin: var(--size-spacing-one-x) 0;
  padding: var(--size-spacing-one-x);
}
.null-search__top h3 {
  font-size: var(--font-size-900);
  margin: var(--size-spacing-one-x) 0;
}
.null-search__bottom {
  margin-bottom: var(--size-spacing-two-x);
}
.null-search__bottom form {
  max-width: 680px;
}
.null-search__bottom ul {
  list-style-type: disc;
  margin-bottom: var(--size-spacing-one-x);
  padding-left: var(--size-spacing-two-x);
}
.null-search__bottom ul li {
  line-height: 1.3;
}
.null-search__bottom h4 {
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-bold);
}
.null-search__suggestions a:first-of-type {
  font-weight: var(--font-weight-bold);
}
.null-search--margin-bottom {
	margin-bottom: var(--size-spacing-one-x);
}