/* stylelint-disable property-no-vendor-prefix */
/* typo for account login */
/* stylelint-disable property-no-vendor-prefix */
/* stylelint-disable scss/no-global-function-names */
#pdpMain {
  --c-bg: #f7f9fa;
  --c-bg-b: #eff2f3;
  --c-button-copy: white;
  --c-body: rgba(0, 0, 0, 0.87);
  --c-em-med: rgba(0, 0, 0, 0.87);
  --c-em-low: rgba(0, 0, 0, 0.68);
  --c-em-xlow: rgba(0, 0, 0, 0.38);
  --c-em-2xlow: rgba(0, 0, 0, 0.16);
  --c-em-3xlow: rgba(0, 0, 0, 0.08);
  --c-em-4xlow: rgba(0, 0, 0, 0.04);
  --c-em-high: black;
  --c-em-high-contrast: white;
  --pdpHeaderHeight: 20px;
  --pdp-sideOffset: 16px;
  --mainWidth: calc(100vw - var(--pdp-sideBarWidth));
  --pdp-sideBarWidth: 0;
  --pdp-sideBarPadding: 0;
  --pdp-sideBarMargins: 16px;
  --pdp-navbarHeight: 84px;
  --top-offset: 117px; }
  #pdpMain.pdp-main-harman {
    --c-accent: #0073ae;
    --c-accent-safe: #00395a;
    --c-button: #00395a; }
  #pdpMain.pdp-main-jbl {
    --c-accent: #f30;
    --c-accent-safe: #db2c00;
    --c-button: #df2d00; }
  [data-theme*=dark] #pdpMain, #pdpMain[data-theme*=dark] {
    --c-button-copy: black;
    --c-body:     rgba(255,255,255,0.87);
    --c-em-med:   rgba(255,255,255,0.87);
    --c-em-low:   rgba(255,255,255,0.68);
    --c-em-xlow:  rgba(255,255,255,0.38);
    --c-em-2xlow: rgba(255,255,255,0.16);
    --c-em-3xlow: rgba(255,255,255,0.08);
    --c-em-4xlow: rgba(255,255,255,0.04);
    --c-em-high: white;
    --c-em-high-contrast: black; }
  #pdpMain > .sidebar .personalize-wrapper {
    padding: 1rem 0;
    margin: 1rem 0;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    /* stylelint-disable-next-line no-descending-specificity */ }
    #pdpMain > .sidebar .personalize-wrapper .header-personalized {
      font-size: 1rem;
      cursor: pointer; }
      #pdpMain > .sidebar .personalize-wrapper .header-personalized.active:after {
        content: "\2795";
        /* Unicode character for "plus" sign (+) */
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px; }
      #pdpMain > .sidebar .personalize-wrapper .header-personalized:after {
        content: "\2796";
        /* Unicode character for "minus" sign (-) */
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px; }
    #pdpMain > .sidebar .personalize-wrapper .personalize-body-content {
      margin-top: 1rem; }
      @media (max-width: 1023px) {
        #pdpMain > .sidebar .personalize-wrapper .personalize-body-content {
          text-align: center;
          padding-bottom: 1rem; }
          #pdpMain > .sidebar .personalize-wrapper .personalize-body-content .tab-navigation.personalized-option {
            justify-content: center;
            border-bottom: none; } }
    #pdpMain > .sidebar .personalize-wrapper .personalized-custom__recipe {
      display: flex;
      flex-direction: row-reverse;
      justify-content: start;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 24px;
      margin-top: 18px; }
      @media (max-width: 1023px) {
        #pdpMain > .sidebar .personalize-wrapper .personalized-custom__recipe {
          justify-content: center;
          margin-bottom: 32px; } }
      #pdpMain > .sidebar .personalize-wrapper .personalized-custom__recipe > * {
        margin-right: 8px; }
      #pdpMain > .sidebar .personalize-wrapper .personalized-custom__recipe .personalized-custom__recipe__add .personalized-custom__recipe_add-button {
        height: 2.8125rem;
        width: 2.8125rem;
        border: 1px solid;
        padding-bottom: 0.4375rem;
        font-size: 2.1875rem;
        background: var(--c-em-high-contrast);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 36px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        color: var(--c-accent);
        cursor: pointer; }
        #pdpMain > .sidebar .personalize-wrapper .personalized-custom__recipe .personalized-custom__recipe__add .personalized-custom__recipe_add-button:hover {
          background: var(--c-accent-safe);
          color: var(--c-em-high-contrast); }
      #pdpMain > .sidebar .personalize-wrapper .personalized-custom__recipe .personalized-custom__recipe__image {
        width: 60px; }
        #pdpMain > .sidebar .personalize-wrapper .personalized-custom__recipe .personalized-custom__recipe__image a {
          background-color: var(--c-em-high-contrast);
          display: block;
          border: 1px solid rgba(0, 0, 0, 0.16);
          border-radius: 6px; }
          #pdpMain > .sidebar .personalize-wrapper .personalized-custom__recipe .personalized-custom__recipe__image a.selected {
            border-color: var(--c-accent); }
    #pdpMain > .sidebar .personalize-wrapper .share-pz {
      display: none; }
    #pdpMain > .sidebar .personalize-wrapper .swatches {
      border: 0;
      /* .personalization-design-link {
                    display: none;
                } */ }
    #pdpMain > .sidebar .personalize-wrapper .cta.customizeLink {
      display: none; }
    #pdpMain > .sidebar .personalize-wrapper .tab-navigation {
      margin-bottom: 8px;
      display: flex;
      justify-content: flex-start;
      border-bottom: 4px solid var(--c-bg-b);
      color: var(--c-em-high); }
      @media (min-width: 1024px) {
        #pdpMain > .sidebar .personalize-wrapper .tab-navigation {
          margin-top: 16px; } }
      #pdpMain > .sidebar .personalize-wrapper .tab-navigation li {
        padding: 6px 0;
        border-radius: 0;
        background-color: transparent;
        border: 0;
        border-bottom: 4px solid var(--c-bg-b);
        font-weight: bold;
        color: #666;
        padding-right: 8px;
        margin-right: 8px;
        margin-bottom: -4px;
        margin-left: 4px;
        position: relative;
        cursor: pointer;
        font-size: 0.875rem; }
        @media (max-width: 1023px) {
          #pdpMain > .sidebar .personalize-wrapper .tab-navigation li {
            margin: 0;
            padding: 0 1rem; } }
        #pdpMain > .sidebar .personalize-wrapper .tab-navigation li::after {
          content: " ";
          display: block;
          position: absolute;
          pointer-events: none;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-top: 7px solid transparent;
          bottom: -11px;
          left: 50%;
          transform: translateX(-50%); }
        #pdpMain > .sidebar .personalize-wrapper .tab-navigation li:hover, #pdpMain > .sidebar .personalize-wrapper .tab-navigation li:focus, #pdpMain > .sidebar .personalize-wrapper .tab-navigation li.-active {
          background-color: transparent; }
    #pdpMain > .sidebar .personalize-wrapper .tab-content {
      display: none;
      padding: 0;
      background-color: transparent; }
      #pdpMain > .sidebar .personalize-wrapper .tab-content.-active {
        display: block; }
    #pdpMain > .sidebar .personalize-wrapper .personalized-custom__inspiration {
      margin-bottom: 1.25rem;
      min-height: 4rem; }
      @media (max-width: 1023px) {
        #pdpMain > .sidebar .personalize-wrapper .personalized-custom__inspiration {
          margin-bottom: 2.5rem; } }
    #pdpMain > .sidebar .personalize-wrapper .personalized-custom__inspiration__title {
      font-size: 16px;
      font-weight: bold; }
    #pdpMain > .sidebar .personalize-wrapper .personalized-custom__inspiration__image {
      display: inline-block;
      margin: 4px 4px 0 0;
      background-color: rgba(255, 255, 255, 0.8);
      border: 2px solid var(--c-em-3xlow);
      border-radius: 6px;
      max-width: 3.75rem; }
      #pdpMain > .sidebar .personalize-wrapper .personalized-custom__inspiration__image:hover {
        border-color: var(--c-accent-safe);
        background-color: var(--c-em-high-contrast); }
    #pdpMain > .sidebar .personalize-wrapper .personalized-custom__blank {
      display: flex;
      margin-top: 16px;
      margin-bottom: 16px; }
      #pdpMain > .sidebar .personalize-wrapper .personalized-custom__blank .personalized-custom__blank__image {
        width: 70px;
        margin-right: 16px; }
    #pdpMain > .sidebar .personalize-wrapper .personalization-design-link {
      display: inline-block;
      transform: translateY(14px); }
      #pdpMain > .sidebar .personalize-wrapper .personalization-design-link img {
        display: none; }
    #pdpMain > .sidebar .personalize-wrapper .personalization-design-link a,
    #pdpMain > .sidebar .personalize-wrapper .customizeLink,
    #pdpMain > .sidebar .personalize-wrapper .customTab {
      font-weight: bold;
      border-radius: 24px;
      padding: 4px 24px;
      display: inline-block;
      border: 2px solid var(--c-button);
      color: var(--c-em-high);
      background: var(--c-em-high-contrast);
      font-size: 0.75rem;
      line-height: 36px;
      height: 48px;
      vertical-align: middle; }
      #pdpMain > .sidebar .personalize-wrapper .personalization-design-link a:hover,
      #pdpMain > .sidebar .personalize-wrapper .customizeLink:hover,
      #pdpMain > .sidebar .personalize-wrapper .customTab:hover {
        border-color: var(--c-button);
        background-color: var(--c-button);
        color: var(--c-button-copy); }
      #pdpMain > .sidebar .personalize-wrapper .personalization-design-link a::before,
      #pdpMain > .sidebar .personalize-wrapper .customizeLink::before,
      #pdpMain > .sidebar .personalize-wrapper .customTab::before {
        vertical-align: middle;
        content: " ";
        width: 1.25rem;
        height: 36px;
        background: url("../../img/pdpv2/icon-pz.png") no-repeat left center;
        background-size: contain;
        display: inline-block;
        margin-right: 8px; }

.modal-pdp-personalization__configurator {
  background-color: #fff;
  transition: background-color 1.5s linear; }
  .modal-pdp-personalization__configurator .modal-header {
    display: block;
    width: 100% !important;
    min-height: 49px;
    border-bottom: none;
    margin: 0 auto; }
    .modal-pdp-personalization__configurator .modal-header button {
      padding-bottom: 0;
      position: relative;
      display: flex;
      flex-direction: row-reverse;
      z-index: 999;
      width: 120px;
      height: 40px;
      padding: 10px;
      font-size: 18px;
      font-weight: 400;
      margin: 0;
      margin-top: -2px;
      float: right;
      color: #db2c00;
      text-shadow: none;
      opacity: 1; }
      @media screen and (max-width: 600px) {
        .modal-pdp-personalization__configurator .modal-header button {
          top: -11px;
          right: -25px; } }
      .modal-pdp-personalization__configurator .modal-header button:before {
        width: 32px;
        content: "arrow_forward";
        font-family: var(--font-icon);
        color: #db2c00; }
      .modal-pdp-personalization__configurator .modal-header button:hover {
        color: white;
        background: #d12d03;
        opacity: unset !important; }
        .modal-pdp-personalization__configurator .modal-header button:hover::before {
          color: white; }
      .modal-pdp-personalization__configurator .modal-header button:focus {
        border: 1px solid black;
        color: white;
        background: #d12d03; }
        .modal-pdp-personalization__configurator .modal-header button:focus::before {
          color: white; }
  .modal-pdp-personalization__configurator .modal-dialog {
    width: 100% !important;
    max-width: 100%;
    margin-top: -50px;
    pointer-events: auto;
    /* stylelint-disable-next-line scss/media-feature-value-dollar-variable */ }
    @media screen and (max-width: 600px) {
      .modal-pdp-personalization__configurator .modal-dialog {
        margin-left: auto;
        margin-right: auto; } }
    .modal-pdp-personalization__configurator .modal-dialog #app {
      /* stylelint-disable-next-line no-descending-specificity */
      /* stylelint-disable-next-line scss/media-feature-value-dollar-variable */ }
      .modal-pdp-personalization__configurator .modal-dialog #app *:not(button) {
        box-sizing: unset; }
      .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__color-pattern-print-selection,
      .modal-pdp-personalization__configurator .modal-dialog #app .jbl-custom__cuff-side-selection button,
      .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__image-upload-menu-contents-remove,
      .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__image-upload-menu-contents-scale-position,
      .modal-pdp-personalization__configurator .modal-dialog #app button.btn-remove,
      .modal-pdp-personalization__configurator .modal-dialog #app button.btn-edit,
      .modal-pdp-personalization__configurator .modal-dialog #app button.remove,
      .modal-pdp-personalization__configurator .modal-dialog #app button.edit-button {
        text-transform: unset !important; }
      .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__print-feature-position-button,
      .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__headphone-text-and-sticker-menu__nav__button,
      .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__headphone-menu-buttons,
      .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__pattern-feature-edit-button,
      .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__speaker-menu-buttons,
      .modal-pdp-personalization__configurator .modal-dialog #app .jbl-custom__start-over button {
        text-transform: unset !important; }
      .modal-pdp-personalization__configurator .modal-dialog #app input[type="range"]::-webkit-slider-runnable-track {
        box-shadow: none; }
      .modal-pdp-personalization__configurator .modal-dialog #app .c-modal.modal--add-to-cart-modal {
        /* stylelint-disable-next-line scss/media-feature-value-dollar-variable */ }
        @media screen and (min-width: 1100px) {
          .modal-pdp-personalization__configurator .modal-dialog #app .c-modal.modal--add-to-cart-modal {
            height: 125vh; } }
      .modal-pdp-personalization__configurator .modal-dialog #app .c-modal-container {
        margin: 10px auto auto; }
      @media screen and (max-width: 600px) {
        .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__image-upload-menu-contents-remove {
          width: 40%;
          max-width: 40%; }
        .modal-pdp-personalization__configurator .modal-dialog #app button.jbl-custom__image-upload-menu-contents-scale-position {
          width: calc(60% + 1px); }
        .modal-pdp-personalization__configurator .modal-dialog #app .jbl-custom__image-upload-menu-contents-scale-position-icon {
          left: calc(75% - 105px); } }