/* dx-curated-brands-ui - NoMad brand site */
:root {
  --top-navigation-font-size: 12px;
  --top-navigation-font-case: uppercase;
  --top-navigation-font-family: 'GothamMedium';
  --top-navigation-icon-nav-border-color: rgba(255, 255, 255, 0.2);

  --navigation-font-family: 'GothamMedium';
  --navigation-font-case: uppercase;

  --logo-grid-hover-content-paragraph-font-size: 18px;
  --logo-grid-hover-content-anchor-font-size: 16px;
  --logo-grid-hover-content-paragraph-line-height: normal;
  --logo-grid-additional-content-font-size: 14px;
  --logo-grid-additional-content-font-case: uppercase;
  --logo-grid-additional-content-font-family: 'GothamMedium';

  --desktop-body-copy-font-size: 24px;
  --desktop-body-copy-line-height: 36px;
  --desktop-body-copy-font-family: 'Sabon';
  --desktop-body-copy-font-style: italic;

  --curated-shop-form-font-case: uppercase;
  --curated-shop-form-font-family: 'GothamMedium';
  --curated-shop-form-font-size: 12px;
  --curated-shop-form-cta-background: rgba(255, 255, 255, 0.08);
  --curated-shop-form-cta-border: 1px solid rgba(255, 255, 255, 0.2);

  --curated-cta-font-size: 16px;
  --curated-cta-font-case: uppercase;
  --curated-cta-font-family: 'Gotham';

  --carousel-controls-font-family: 'Sabon';
  --carousel-controls-font-style: italic;
  --carousel-controls-font-size: 24px;

  --image-silder-carousel-controls-font-size: 18px;

  --media-copy-heading-font-size: 48px;
  --media-copy-heading-font-tablet-mobile: 36px;

  --mega-menu-font-case: uppercase;
  --mega-menu-font-family: 'Gotham';

  --mobile-nav-border-color: rgba(255, 255, 255, 0.2);

  --hero-shop-form-font-family: 'Gotham';
  --hero-shop-form-font-size: 14px;
  --hero-shop-form-font-weight: 400;
  --hero-shop-form-text-transform: uppercase;
  --hero-shop-form-button-height: 64px;
  --hero-shop-form-button-width: 33.3333333%;
  --hero-shop-form-button-bg-color: rgba(0, 0, 0, 0);
  --hero-shop-form-button-bg-color-hover: rgba(0, 0, 0, 0.08);
  --hero-shop-form-book-button-bg-color: rgba(255, 255, 255, 0.08);
  --hero-shop-form-book-button-bg-color-hover: rgba(255, 255, 255, 0.15);

  --copy-line-height: 28px;
  --copy-letter-spacing: -0.5px;

  --heading-case: uppercase;
  --heading-font-style: normal;
  --heading-font-size: 48px;
  --heading-line-height: 44px;
}

.theme-nd {
  --font-headline: 'Gotham';
  --font-headline-brand: 'Gotham';
  --font-sans: 'Sabon';
  --font-serif: 'Gotham';
}

[data-element-id='nomad-burger'] * {
  font-family: 'GothamMedium' !important;
}

.font-headline {
  text-transform: var(--heading-case);
  font-style: var(--heading-font-style);
}

.btn,
.btn--base {
  font-family: var(--curated-cta-font-family);
  text-transform: var(--curated-cta-font-case) !important;
  font-size: var(--curated-cta-font-size);
  text-decoration: none !important;
  font-style: normal !important;
  border-radius: 0px;
  font-weight: 400;
}

/* desktop only updates */
@media (min-width: 1280px) {
  /* apply to all body copy on desktop only*/
  [data-element-id='curated-flex-components'] p,
  [data-element-id='curated-flex-components'] ul,
  [data-element-id='curated-flex-components'] ol,
  [data-element-id='curated-flex-components'] a:not(.btn, .btn--base) {
    font-size: var(--desktop-body-copy-font-size);
    line-height: var(--desktop-body-copy-line-height);
    font-family: var(--desktop-body-copy-font-family);
    font-style: var(--desktop-body-copy-font-style);
  }

  /* Media & Copy */
  [data-element-id='media-and-copy-copy-section'] h2 {
    font-size: var(--media-copy-heading-font-size) !important;
  }
}

/* Media & Copy */
[data-element-id='media-and-copy-copy-section'] h2 {
  font-size: var(--media-copy-heading-font-tablet-mobile);
}

/* Top Navigation */
[data-element-id='top-navigation'],
[data-element-id='top-navigation'] button,
[data-element-id='nav-utility'] a,
[data-element-id='language-wrapper'] *,
[data-element-id='honors-header-login'] button {
  font-size: var(--top-navigation-font-size);
  text-transform: var(--top-navigation-font-case);
  font-family: var(--top-navigation-font-family);
}

[data-element-id='nav-utility'] li,
[data-element-id='honors-wrapper'],
[data-element-id='honors-wrapper-mobile'] {
  border-color: var(--top-navigation-icon-nav-border-color);
}

#brand-location-selector {
  margin: 0 -8px;
}

/* Mobile menu fonts */
[data-element-id='mobile-nav-layout'] button,
[data-element-id='mobile-nav-layout'] a {
  text-transform: var(--navigation-font-case) !important;
  font-family: var(--navigation-font-family) !important;
}

/* Mega Menu */
#mega-menu-container ul li a,
#mega-menu-container h3 {
  text-transform: var(--mega-menu-font-case);
  font-family: var(--mega-menu-font-family);
}

#mega-menu-container #main-ul h3 {
  font-size: 22px;
}

/* Sticky Shop Form */
.cp-header-shop-form * {
  text-transform: var(--curated-shop-form-font-case);
  font-family: var(--curated-shop-form-font-family);
  font-size: var(--curated-shop-form-font-size);
}

.cp-header-shop-form .btn {
  font-size: var(--curated-shop-form-font-size) !important;
  background: var(--curated-shop-form-cta-background);
  border: var(--curated-shop-form-cta-border);
  text-transform: var(--curated-shop-form-font-case) !important;
}

.cp-header-shop-form [data-osc-product='shop-form-button']:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

[data-element-id='shop-form-button-divider'][data-instance-id='3'] {
  display: none;
}

/* Logo Grid component */
[data-element-id='logo-grid-hover-content'] p,
[data-element-id='logo-grid-hover-content'] ul,
[data-element-id='logo-grid-hover-content'] ol {
  font-size: var(--logo-grid-hover-content-paragraph-font-size);
  line-height: var(--logo-grid-hover-content-paragraph-line-height);
}

[data-element-id='logo-grid-hover-content'] a {
  font-size: var(--logo-grid-hover-content-anchor-font-size) !important;
}

[data-element-id='logo-grid-additional-content'] {
  font-family: var(--logo-grid-additional-content-font-family);
  font-size: var(--logo-grid-additional-content-font-size);
  text-transform: var(--logo-grid-additional-content-font-case);
}

/* Image Slider */
[data-element-id='image-slider-pagination'] * {
  font-family: var(--carousel-controls-font-family);
  font-size: var(--image-silder-carousel-controls-font-size);
  font-style: var(--carousel-controls-font-style);
}

/* slider-controls-wrapper shared component */
[data-element-id='slider-controls-prev-next'] * {
  font-family: var(--carousel-controls-font-family);
  font-style: var(--carousel-controls-font-style);
  font-size: var(--carousel-controls-font-size);
}

/* gallery slider counter */
[data-element-id='gallery-slider-counter'] * {
  font-family: var(--carousel-controls-font-family);
  font-style: var(--carousel-controls-font-style);
}

/* 

HERO COMPONENT SHOP FORM STYLES

*/

/* tablet and larger ONLY */
@media screen and (min-width: 768px) {
  [data-element-id='hero-image'] .osc-search-content-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  [data-element-id='hero-image'] .osc-search-content-wrapper > fieldset,
  [data-element-id='hero-image']
    .osc-search-content-wrapper
    [data-osc-product='shop-form-btn-submit-wrapper'] {
    width: var(--hero-shop-form-button-width);
    height: var(--hero-shop-form-button-height);
    display: inline-flex;
    flex: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }

  [data-element-id='hero-image']
    .osc-search-content-wrapper
    [data-osc-product='shop-form-btn-submit-wrapper']
    button[data-osc-product='shop-form-button'] {
    height: var(--hero-shop-form-button-height);
    border: none;
  }

  [data-element-id='hero-image']
    .osc-search-content-wrapper
    [data-osc-product='shop-form-btn-submit-wrapper'] {
    border: none;
  }
}

[data-element-id='hero-image'] .osc-search-content-wrapper {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 850px;
  width: 100%;
  padding: 0;
  margin: 0;
}

[data-element-id='hero-image'] [data-element-id='shop-form-datepicker-wrapper'] {
  padding: 0;
}

/* Make shop form buttons expand to full width of container in hero image */
[data-element-id='hero-image'] .osc-search-content-wrapper select,
[data-element-id='hero-image'] [data-osc-product='shop-form-dates'] {
  width: 100%;
  align-self: stretch;
  justify-self: stretch;
  align-items: center;
  justify-items: center;
  display: flex;
  /* safari fix for <select> text alignment */
  text-align-last: center;
}

[data-element-id='hero-image'] [data-element-id='shop-form-datepicker-wrapper'] > div {
  width: 100%;
  height: 100%;
  display: flex;
}

[data-element-id='hero-image'] [data-element-id='shop-form-datepicker-wrapper'] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-element-id='hero-image'] .osc-search-content-wrapper > fieldset,
[data-element-id='hero-image']
  .osc-search-content-wrapper
  [data-osc-product='shop-form-btn-submit-wrapper'] {
  text-align: center;
  align-items: center;
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.2);
}

/* hero shop form buttons */
[data-element-id='hero-image']
  .osc-search-content-wrapper
  [data-osc-product='shop-form-btn-submit-wrapper']
  button[data-osc-product='shop-form-button'] {
  background-color: var(--hero-shop-form-book-button-bg-color);
  text-transform: var(--hero-shop-form-text-transform) !important;
  font-size: var(--hero-shop-form-font-size) !important;
}

[data-element-id='hero-image']
  .osc-search-content-wrapper
  [data-osc-product='shop-form-btn-submit-wrapper']
  button[data-osc-product='shop-form-button']:hover {
  transition: all 0.3s ease-in-out;
  background-color: var(--hero-shop-form-book-button-bg-color-hover);
}

[data-element-id='hero-image'] .osc-search-content-wrapper > fieldset,
[data-element-id='hero-image']
  .osc-search-content-wrapper
  [data-osc-product='shop-form-btn-submit-wrapper'] {
  background-color: var(--hero-shop-form-button-bg-color);
}

[data-element-id='hero-image'] .osc-search-content-wrapper > fieldset:hover,
[data-element-id='hero-image']
  .osc-search-content-wrapper
  [data-osc-product='shop-form-btn-submit-wrapper']:hover {
  background-color: var(--hero-shop-form-button-bg-color-hover);
}

/* end */

[data-element-id='hero-image'] .osc-search-content-wrapper * {
  font-family: var(--hero-shop-form-font-family) !important;
  font-size: var(--hero-shop-form-font-size);
  font-weight: var(--hero-shop-form-font-weight);
  text-transform: var(--hero-shop-form-text-transform);
}

[data-element-id='hero-image'] [data-element-id='shop-form-button-divider'] {
  display: none;
}

[data-element-id='shop-form-hero'] {
  bottom: -1px;
}

[data-element-id='shop-form-hero'],
[data-element-id='osc-composable-hero-div-wrapper'] {
  max-width: 850px;
  width: 100%;
}

/* small tablet / mobile */
@media screen and (max-width: 767px) {
  :root {
    --hero-shop-form-font-size: 12px;
  }

  [data-element-id='hero-image']
    .osc-search-content-wrapper
    [data-osc-product='shop-form-btn-submit-wrapper']
    button[data-osc-product='shop-form-button'] {
    border-color: rgba(255, 255, 255, 0.2);
  }

  [data-element-id='hero-image'] .osc-search-content-wrapper {
    padding: 10px;
  }

  [data-element-id='shop-form-datepicker-wrapper'] {
    border: none;
  }

  [data-element-id='shop-form-datepicker-wrapper'] button {
    margin-bottom: -5px;
  }

  #brand-location-selector {
    margin-top: -8px;
  }
}

/* Mobile nav burger */
[data-element-id='nav-modal'] > button {
  border-color: transparent !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

/* mobile nav items */
[data-element-id='mobile-nav-item'] {
  border-color: var(--mobile-nav-border-color);
}

/* paragraph sizes for these components specified by karen */
[data-element-id='media-and-copy-copy-section'] p,
[data-element-id='tile-content-wrapper'] p,
[data-element-id='copy-block-component-div'] p {
  line-height: var(--copy-line-height);
  letter-spacing: var(--copy-letter-spacing);
}

/* heading sizes for these components specified by karen */
[data-element-id='multi-column-copy-content'] h2,
[data-element-id='tile-content-wrapper'] h2,
[data-element-id='copy-block-component-div'] h2 > span:first-of-type {
  font-size: var(--heading-font-size) !important;
  line-height: var(--heading-line-height) !important;
}