/* stylelint-disable keyframes-name-pattern */
@layer brand {
  @font-face {
    font-family: 'Formula Condensed';
    src: url('/fonts/FormulaCondensed-Bold.woff2') format('woff2'),
    url('/fonts/FormulaCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Formula Condensed';
    src: url('/fonts/FormulaCondensed-Regular.woff2') format('woff2'),
    url('/fonts/FormulaCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  :root {
    /* ----------  colors  ---------- */
    --clr-wdb-crimson: #9b2b45;
    --clr-wdb-mauve: #d39696;
    --clr-wdb-slate: #3c505e;
    --clr-wdb-coral: #f66;
    --clr-wdb-gray: #F0F0F0;
    --clr-wdb-gray-200: #D0D0D0;
    --clr-wdb-gray-300: #777;
    --clr-wdb-pink: #f2c8ce;
    --clr-wdb-tan: #f5f2f0;
    --clr-wdb-black: #2d2d2d;
    --clr-brand-primary: var(--clr-wdb-black);
    --clr-brand-secondary: var(--clr-wdb-slate);
    --clr-brand-teritary: var(--clr-wdb-gray-200);
    --text-color: var(--clr-black);
    --text-color-accent: var(--clr-brand-primary);
    --link-color: var(--text-color);
    --link-hover-color: var(--clr-brand-primary);
    --heading-color: var(--clr-black);


    /*----------  videos  ----------*/
    --video-background-color: #d7d6d3;


    /*---------- ratings | reviews | Labels  ----------*/
    --stars-filled: var(--clr-wdb-crimson);


    /*---------- banner ----------*/
    --global-banner-background: var(--clr-wdb-black);
    --global-banner-color: var(--clr-white);
    --banner-font: var(--fw-light) var(--body-font-size-s) var(--body-font-family);

    /*---------- button ----------*/
    --button-border-radius: 3rem;
    --button-padding: 0 18px;
    --button-text-transform: uppercase;
    --button-secondary-background: var(--clr-brand-secondary);
    --button-primary-text: var(--clr-white);
    --button-primary-background: var(--clr-wdb-mauve);
    --button-primary-background-hover: var(--clr-wdb-mauve);
    --button-secondary-background-hover: var(--clr-white);
    --button-tertiary-background-hover: var(--clr-black);
    --button-primary-border-color: var(--clr-wdb-mauve);
    --button-primary-border-color-hover: var(--clr-wdb-mauve);
    --button-secondary-border-color-hover: var(--clr-black);
    --button-primary-color: var(--clr-wdb-black);
    --button-primary-color-hover: var(--clr-white);
    --button-secondary-color-hover: var(--clr-black);
    --button-tertiary-color-hover: var(--clr-white);


    /*---------- focus colors ----------*/
    --focus-color: var(--clr-brand-primary);


    /*---------- fonts ----------*/
    --base-font-size: 1.8rem;
    --body-font-size-xxs: 1.2rem;
    --body-font-size-xs: 1.4rem;
    --body-font-family: 'montserrat', sans-serif;
    --body-font-family-bold: var(--body-font-family);
    --body-font-family-cond: var(--body-font-family);
    --heading-font-family: var(--body-font-family);
    --heading-font-family-secondary: 'montserrat-alternates', serif;
    --heading-font-family-tertiary: 'playfair-display', sans-serif;
    --font-body: var(--fw-light) var(--base-font-size)/1.4 var(--body-font-family);
    --font-body-bold: var(--fw-bold) var(--base-font-size) var(--body-font-family);
    --font-body-cond: var(--font-body);
    --font-heading-primary: var(--fw-bold) var(--heading-font-size-xl) var(--heading-font-family);
    --font-heading-seconday: var(--fw-normal) var(--heading-font-size-xl) var(--heading-font-family-secondary);


    /*---------- nav height ----------*/
    --nav-height: 6rem;
    --header-btm-border-size: 1px;


    /*---------- Global Banner ----------*/
    --global-banner-height: 4rem;
    --banner-line-height: 1.4rem;


    /*---------- plp ----------*/
    --plp-product-title-font: var(--fw-bold) var(--body-font-size-m) var(--body-font-family);
  }

  /*---------- button states ----------*/
  
  :is(a.button:any-link, button, .button):is(.primary):is( :hover, :focus-visible) {
    opacity: 0.8;
  }
  
  @media (width >= 900px), (min-width: 900px) {
    :root {
      --content-max-width: 84%;
    }
  }

  @media (width >= 1024px), (min-width: 1024px) {
    :root {
      --nav-height: 6.5rem;
    }
  }

  /* END :root */

  .page-wrapper {
    overflow-x: unset;
  }

  header {
    background-color: #fff;
  }

  header .nav-tools {
    background: none;
  }

  /* BEGIN - Temp BV v1 style rules */
  /* Write A Review button */
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate [class*=bv-core-container] .bv-action-bar button,
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate [class*=bv-core-container] .bv-action-bar button:hover,
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate [class*=bv-core-container] .bv-action-bar button:focus {
    background-color: var(--button-primary-background) !important;
    color: var(--button-primary-color) !important;
    border-radius: var(--button-border-radius) !important;
    font-weight: 700 !important;
    font-size: initial !important;
    text-transform: uppercase !important;
    outline: 0 !important;
  }

  /* First to review button */
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate .bv-shared button.bv-first-to-review,
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate .bv-shared button.bv-first-to-review:hover,
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate .bv-shared button.bv-first-to-review:focus {
    background-color: var(--button-primary-background) !important;
    color: var(--button-primary-color) !important;
    border-radius: var(--button-border-radius) !important;
    text-transform: uppercase !important;
    font-weight: initial !important;
    outline: 0 !important;
  }

  /* Ask A Product Question button */
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-ask-question.bv-focusable.bv-submission-button,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-ask-question.bv-focusable.bv-submission-button:hover,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-ask-question.bv-focusable.bv-submission-button:focus {
    background-color: var(--button-primary-background) !important;
    color: var(--button-primary-color) !important;
    border-radius: var(--button-border-radius) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    outline: 0 !important;
  }

  /* First to ask a question */
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate .bv-shared button.bv-first-to-ask-question,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate .bv-shared button.bv-first-to-ask-question:hover,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate .bv-shared button.bv-first-to-ask-question:focus {
    background-color: var(--button-secondary-background) !important;
    color: var(--button-secondary-color) !important;
    border-radius: var(--button-border-radius) !important;
    font-family: inherit !important;
    font-weight: initial !important;
    outline: 0 !important;
  }

  /* Answer This Question button */
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-secondary-content-actions-container .bv-content-btn,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-secondary-content-actions-container .bv-content-btn:hover,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-secondary-content-actions-container .bv-content-btn:focus {
    background-color: var(--button-secondary-background) !important;
    color: var(--button-secondary-color) !important;
    border-radius: var(--button-border-radius) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    outline: 0 !important;
  }

  /* Main buttons focus */
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate [class*=bv-core-container] .bv-action-bar button:focus,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-ask-question.bv-focusable.bv-submission-button:focus,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-secondary-content-actions-container .bv-content-btn:focus {
    background-color: var(--button-primary-background-hover) !important;
    color: var(--button-primary-color-hover) !important;
  }

  /* Review Highlights Text Header */
  .product-reviews.v1 .css-fom8uq,
  .product-reviews.v1 .css-tvbl82 {
    font-family: var(--heading-font-family-secondary) !important;
    color: var(--clr-brand-secondary) !important;
    font-size: 50px;
    font-weight: var(--fw-normal) !important;
    font-style: normal !important;
    line-height: 1 !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Reviews cards */
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate [class*=bv-core-container] .bv-content-item.bv-content-review {
    background-color: var(--clr-neutral-40) !important;
  }

  /* Reviews card slider */
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate [class*=bv-core-container] .bv-content-slider-container {
    background-color: #fff !important;
  }

  /* Small navigation arrows for navigating reviews */
  .product-reviews.v1 .bv-cv2-cleanslate .bv-shared .bv-content-pagination-container a.bv-content-btn {
    background-color: var(--button-secondary-background) !important;
    color: var(--button-secondary-color) !important;
    border-radius: var(--button-border-radius) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    outline: 0 !important;
  }

  /* Z-index fix for write a review pop-up (header in way) */
  body[style*="overflow: hidden"] header {
    z-index: 1;
  }

  /* Stars color */
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate [class*=bv-core-container] .bv-rating-stars-on {
    color: var(--stars-filled) !important;
  }

  /* Stars color on PLP and PDP */
  .product-list-page .products .list > ol > li .rating > div::before,
  .sidebar .product-title .rating .stars::before {
    content: '★★★★★';
    background: linear-gradient(90deg, var(--stars-filled), var(--percent), var(--stars-unfilled) var(--percent));
    background-clip: text;
  }

  /* Slider knob color */
  .product-reviews.v1 *[data-bv-show=reviews] .bv-cv2-cleanslate [class*=bv-core-container] .bv-content-slider-value {
    background-color: var(--stars-filled) !important;
  }

  /* Post Product Question button */
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-submission .bv-fieldsets .bv-form-actions .bv-submission-button-submit,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-submission .bv-fieldsets .bv-form-actions .bv-submission-button-submit:hover,
  .product-reviews.v1 *[data-bv-show=questions] .bv-cv2-cleanslate [class*=bv-core-container] .bv-submission .bv-fieldsets .bv-form-actions .bv-submission-button-submit:focus {
    background-color: var(--button-primary-background) !important;
    color: var(--button-primary-color) !important;
    border-radius: var(--button-border-radius) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    outline: 0 !important;
  }

  /* Write a Review and Answer this Question modal form submit buttons */
  #bv-mboxzone-lightbox.bv-cv2-cleanslate .bv-shared .bv-submission .bv-fieldsets .bv-form-actions .bv-submission-button-submit {
    background-color: var(--button-primary-background) !important;
    color: var(--button-primary-color) !important;
    border-radius: var(--button-border-radius) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    outline: 0 !important;
  }

  /* Reviews highlights ratings distribution color */
  .product-reviews.v1 .css-1ndw5ap > div:first-child {
    background-color: var(--stars-filled);
  }

  /* Reviews highlights ratings distribution color */
  .product-reviews.v1 .css-12t6rv svg linearGradient > stop:first-child {
    stop-color: var(--stars-filled) !important;
  }

  /* Pros and Cons "Full Review" text color */
  .product-reviews.v1 .css-chupt6 {
    color: var(--button-primary-background);
  }

  /* Pros and Cons "Full Review" stars color */
  .product-reviews.v1 .css-4s7zf4 {
    filter: grayscale(1) contrast(2.5);
  }

  /* END - Temp BV v1 style rules */
  /*=============================================
  =            header            =
  =============================================*/
  header.header-wrapper nav .nav-logo .icon {
    aspect-ratio: 3.7/1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }

  header.header-wrapper nav .nav-logo .icon svg {
    visibility: hidden;
  }

  header.header-wrapper nav .nav-logo .icon-logo_wonderbra_en {
    background-image: url('https://www.wonderbra.ca/media/wysiwyg/Wonderbra/WON_MAI24_Wonderbra_Logo_Unstoppable_EN_LR.jpg');
  }

  header.header-wrapper nav .nav-logo .icon-logo_wonderbra_fr {
    background-image: url('https://www.wonderbra.ca/media/wysiwyg/Wonderbra/WON_MAI24_Wonderbra_Logo_Invincibles_FR_LR.jpg');
  }

  header.header-wrapper nav > div {
    align-items: center;
  }

  header.header-wrapper .block:not(.banner) nav {
    background: var(--clr-white);
  }

  header.header-wrapper form input[type="text"] {
    border: 1px solid var(--clr-neutral-60) !important;
  }

  header.header-wrapper form input[type="text"]::placeholder {
    color: var(--clr-neutral-80);
  }

  .banner .promotion-content :is(p, a) {
    letter-spacing: 2px;
  }

  .banner-wrapper.banner-footer {
    height: var(--global-banner-height);
    padding: unset;
  }

  .section .copyright-wrapper {
    margin-bottom: unset;
  }

  footer[class$='-wrapper']:has(.banner-footer .banner > *) .section .copyright-wrapper {
    margin-bottom: var(--global-banner-height);
  }

  @media (width >= 1024px), (min-width: 1024px) {
    header.header-wrapper .block:not(.banner) {
      padding-inline-start: 0 !important;
    }

    header.header-wrapper .block:not(.banner) nav {
      padding-inline-start: var(--gutter-l);
    }

    .minicart-wrapper .minicart,
    header.header-wrapper nav .nav-hamburger .icon svg {
      filter: invert(0);
    }

    header.header-wrapper nav .nav-menu,
    header.header-wrapper nav .nav-menu > ul {
      height: 100%;
      margin-block-start: 0;
      align-items: flex-end;
    }

    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category a,
    header.header-wrapper nav .nav-menu > ul > li[aria-expanded="true"] .menu-nav-category a {
      padding-block: 0 1.2em !important;
      border: 0 none;
    }

    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category:hover a {
      color: var(--clr-wdb-mauve);
      border-color: #fff;
    }

    header.header-wrapper nav .nav-menu > ul > li.menu-expandable[aria-expanded="true"] .menu-nav-category a {
      position: relative;
      color: var(--clr-wdb-mauve);
    }

    header.header-wrapper nav .nav-menu > ul > li.menu-expandable[aria-expanded="true"] .menu-nav-category a::after {
      content: '';
      background: var(--clr-white);
      aspect-ratio: 1;
      clip-path: polygon(0 100%,100% 0,0 0);
      height: 1.5rem;
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      z-index: 50;
      border: 1px solid var(--header-border-color);
      transform: rotate(45deg);
      translate: -50% 57%;
    }

    header.header-wrapper nav .nav-menu .menu-expandable .menu-nav-dropdown {
      border-radius: 0 0 1rem 1rem;
      top: calc(var(--header-height) + var(--header-btm-border-size));
      border-top: 0 none;
    }

    header.header-wrapper nav .nav-menu ul .menu-nav-dropdown .m-col-1:has(> ul:first-child) {
      border-right: none;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .column > :is(p:first-of-type) a {
      border-bottom: 1px solid var(--text-color);
    }

    header.header-wrapper .block:not(.banner) .nav-tools,
    header.header-wrapper .block:not(.banner) form {
      align-self: end;
    }
  }
/*=====  End of header  ======*/
}

/*===== global dropin commerce =====*/ 

.dropin-design {
  --type-body-font-family: var(--body-font-family);
  --type-base-font-family: var(--body-font-family);
}