/**
 * Responsive Mixin
 * This mixin is designed for a _cleaner_ first approach
 * This means that css isn't overridden but rather replaced for
 * different viewport widths; making it easier to inspect/debug css
 *
 * Usage:
 * @include media-query(exclude-medium)    { ... }
 * @include media-query(medium-up-to-site) 	   { ... }
 * ... etc
 */
/**
 * [Adds styles to allow an element's height scale proportionatelly]
 * @param  {[Number]} $width
 * @param  {[Number]} $height
 */
/**
 * [Calculates the percentage aspect ratio (what % height is compared to the width)]
 * @param  {[Number]} $width
 * @param  {[Number]} $height
 * @return {[Number(%)]}
 */
/**
 * *****REMEMBER TO USE MARGIN OR PADDING AND NOT TOP/BOTTOM******
 * [Calculates the center of an element in relation to a provided width and height.
 * Useful to place an absolute element at the center of another when
 * the positioned element cannot be the target's child ]
 * @param  {[Number]} $width
 * @param  {[Number]} $height
 * @return {[Number(%)]}
 */
/**
 * [In the  awful case you can't use Flexbox to vertically align something]
 * @param  {[type]} $transform:       false         [Use transforms to align instead of the absolute trick]
 * @param  {[type]} $pos:             absolute      [position type]
 * @param  {[type]} $posAdj:          0             [position adjustment. If $transform is true, this value only affects the 'top' property.]
 * @param  {[type]} $alignHorizontal: false         [Includes horizontal alignment]
 */
/**
 * Generate Enumerated Class
 * Iterates from 0 to the specified length and generates classes that set the specified property
 * @param  {[String]} $classname:       required      [Required: Specify the class name]
 * @param  {[String]} $property:        $classname    [Optional: Specify the enumerated property (if it's different from the name of the class)]
 * @param  {[Number]} $length:          10            [Optional: Specify the end of the loop]
 * @param  {[String]} $units:           null          [Optional: specify units to append to the enumerated property]
 */
/**
 * [Strip the pesky units from values]
 * @param  {[Number]} $value
 */
/**
 * [Fluid Type]
 */
/**
 * Returns the value of the `$key` value of a provided `$map`.
 */
/**
 * Uses `getProperty()` to return a value from the `$colors` map.
 */
/**
 * Uses `getProperty()` to return a value from the `$breakpoints` map.
 */
/*------------------------------------*\
  #TYPOGRAPHY
\*------------------------------------*/
/*------------------------------------*\
  #COLORS
\*------------------------------------*/
/*------------------------------------*\
  #ELEMENT-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
  #HEADER-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
  #HORIZONTAL-SPACING
\*------------------------------------*/
/*------------------------------------*\
  #BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*\
  #TRANSITIONS
\*------------------------------------*/
/*------------------------------------*\
  #TYPOGRAPHY
\*------------------------------------*/
/*------------------------------------*\
  #BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*\
  #COLORS
\*------------------------------------*/
/*------------------------------------*\
  #FOOTER-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
  #ELEMENT-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
  #GUTTERS
\*------------------------------------*/
/***************************
Special Handling Specific CSS
***************************/
.quickview__main .specialHandling-toggle {
  border-bottom: 1px solid #E6E4E7; }

.specialHandling-toggle {
  position: relative;
  margin: 0 0 30px;
  padding: 0;
  border-top: 0; }
  .specialHandling-toggle .product-attribute__label {
    margin-bottom: 0; }
  @media (max-width: 47.9375rem) {
    .specialHandling-toggle {
      border-bottom: 1px solid #E6E4E7;
      margin: 0 0 50px; } }
  .specialHandling-toggle .btn-wrap-apply {
    margin-top: 2rem; }
    .specialHandling-toggle .btn-wrap-apply .button--primary-outline {
      width: 100%; }
  .specialHandling-toggle .btn-wrap-cancel .btn {
    padding: 10px 0;
    font-size: .875rem; }
  .specialHandling-toggle .non-input-label {
    margin: 0; }
  .specialHandling-toggle .product-attribute__monogram:not(:disabled) ~ .tooltip__content {
    display: none; }

.monogram-area {
  color: #323952;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .monogram-area > div {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1; }
    .monogram-area > div.color ~ div.font {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; }
    .monogram-area > div.color {
      -webkit-box-ordinal-group: 4;
          -ms-flex-order: 3;
              order: 3; }
    .monogram-area > div.color ~ div:not(.font) {
      -webkit-box-ordinal-group: 5;
          -ms-flex-order: 4;
              order: 4; }
  .monogram-area ul {
    padding-left: 0; }
  .monogram-area li {
    list-style: none;
    display: inline-block; }

#monogramoptions {
  padding-top: 10px; }

#specialHandling {
  padding-top: 10px; }

.toggle-opener {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 20px 15px 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  cursor: pointer; }
  .toggle-opener:after {
    position: absolute;
    top: 19px;
    right: 0;
    content: ' '; }
  .toggle-opener[aria-expanded="true"]:after {
    top: 21px; }
  .toggle-opener.collapsed .summary-specialhandling .edit {
    display: block; }
  .toggle-opener .flex-frame {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .toggle-opener .flex-frame span {
      font-family: "proxima-nova", Helvetica, Arial, sans-serif; }
      .toggle-opener .flex-frame span.option-heading {
        padding-right: .5rem; }
    .toggle-opener .flex-frame .selected-personalization {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      padding-left: 20px; }
      .toggle-opener .flex-frame .selected-personalization .summary-title {
        margin: 0;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 2px; }
      .toggle-opener .flex-frame .selected-personalization .summary-label {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        float: left;
        white-space: nowrap;
        letter-spacing: 1px; }
  .toggle-opener .specialHandling-toggle__heading-plus {
    position: absolute;
    right: 0; }
    .toggle--active .toggle-opener .specialHandling-toggle__heading-plus {
      display: none; }
  .toggle-opener .specialHandling-toggle__heading-minus {
    display: none;
    position: absolute;
    right: 0; }
    .toggle--active .toggle-opener .specialHandling-toggle__heading-minus {
      display: block; }

.summary-specialhandling {
  position: relative;
  padding-right: 33px;
  padding-top: 7px; }
  .summary-specialhandling .edit {
    position: absolute;
    right: -21px;
    bottom: 3px;
    text-decoration: underline;
    text-transform: uppercase;
    font-family: "proxima-nova", Helvetica, Arial, sans-serif;
    font-weight: normal;
    display: none; }
  .summary-specialhandling .summary-details {
    font-family: "proxima-nova", Helvetica, Arial, sans-serif;
    cursor: initial;
    font-weight: normal;
    text-transform: none;
    display: block;
    margin: 0 -2px 10px; }
    .summary-specialhandling .summary-details span {
      padding: 1px 2px; }
    .summary-specialhandling .summary-details .summary-details {
      margin-bottom: 0; }
    .summary-specialhandling .summary-details .initials-label {
      float: left;
      margin-right: 5px; }
    .summary-specialhandling .summary-details .summary-initials-val {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -ms-flex-preferred-size: 80%;
          flex-basis: 80%;
      text-transform: uppercase; }
    .summary-specialhandling .summary-details .summary-style-val {
      text-transform: uppercase; }
    .summary-specialhandling .summary-details .summary-color-val {
      text-transform: capitalize; }

.pdp-custom-label {
  text-transform: uppercase;
  margin-bottom: 10px;
  margin-top: .75rem;
  display: inline-block; }
  .pdp-custom-label span {
    text-transform: initial; }
  .pdp-custom-label [data-alteration] {
    text-transform: inherit; }

.specialhandling-text-wrapper .errormessage-monogramming {
  margin-top: 10px; }

.SpecialHandlingPreview {
  overflow: hidden;
  margin-bottom: 10px; }
  .SpecialHandlingPreview .preview-image {
    background-size: contain;
    background-repeat: repeat;
    height: 44px; }
    .SpecialHandlingPreview .preview-image img {
      display: block;
      width: auto;
      height: 100%;
      margin-left: 1rem; }

.color-swatches-carousel {
  margin: 0 auto 0.375rem;
  max-width: 27.5rem; }
  @media (max-width: 47.9375rem) {
    .color-swatches-carousel {
      overflow: hidden;
      position: relative;
      padding: 0 20px; }
      .color-swatches-carousel .scroll {
        position: absolute;
        top: 42%;
        -webkit-transform: translateY(-60%);
                transform: translateY(-60%); }
        .color-swatches-carousel .scroll.scroll-left {
          left: 0; }
        .color-swatches-carousel .scroll.scroll-right {
          right: 0; } }

.color-swatches {
  padding-left: 0; }
  .color-swatches [type="radio"] {
    display: none; }
  .color-swatches [type="radio"]:checked + label .swatch--color:after {
    opacity: 1; }
  @media (max-width: 47.9375rem) {
    .color-swatches {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }
  .color-swatches li {
    margin-right: .75rem; }
    .color-swatches li label {
      margin: 0;
      position: relative;
      display: block;
      cursor: pointer;
      padding-top: 2px; }
      .color-swatches li label .color {
        display: inline-block;
        width: 1.75rem;
        height: 1.75rem; }
        .color-swatches li label .color.last {
          position: absolute;
          left: 4px;
          top: 6px;
          width: 1.25rem;
          height: 1.25rem; }
          .color-swatches li label .color.last::after {
            display: none; }

.style-swatches {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -5px 20px;
  text-align: center;
  margin-top: 10px; }
  .style-swatches [type="radio"] {
    display: none; }
  .style-swatches [type="radio"]:checked + label {
    border: 1px solid #737681; }
  @media (max-width: 90rem) {
    .style-swatches {
      margin: 0 -5px 10px; } }
  .style-swatches li {
    padding: 0 5px 10px;
    width: 25%;
    float: left; }
    .style-swatches li label {
      display: block;
      cursor: pointer; }
    .style-swatches li .style-swatch {
      display: block;
      height: 38px;
      pointer-events: none; }
      @media (max-width: 90rem) {
        .style-swatches li .style-swatch {
          height: 44px; } }
    .style-swatches li .swatch-style {
      margin: 10px 0 0;
      font-size: .875rem; }
      @media (max-width: 47.9375rem) {
        .style-swatches li .swatch-style {
          text-transform: uppercase; } }

.required-initials-styles {
  float: left;
  margin: 5px 0 11px;
  text-transform: uppercase;
  font-weight: normal;
  width: 100%; }

.monogram-location-options {
  padding-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (min-width: 64.0625rem) {
    .monogram-location-options {
      max-height: 14.469rem; } }
  @media (max-width: 90rem) {
    .monogram-location-options {
      padding-top: 0; } }
  .monogram-location-options li {
    margin-bottom: 10px;
    display: block;
    width: 50%; }
    .monogram-location-options li .fake-label {
      display: inline-block;
      max-width: 10rem;
      font-size: 0.875rem;
      line-height: 1.0625rem;
      font-weight: 400; }

.imageswatch {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  visibility: hidden; }

.buttons-wrapper {
  text-align: center;
  padding-bottom: 15px; }
  @media (max-width: 90rem) {
    .buttons-wrapper {
      padding-bottom: 10px;
      padding-top: 15px; } }
  .buttons-wrapper .btn-link {
    text-decoration: underline;
    letter-spacing: 1px; }

.product-options [data-option-id="specialHandlingCode"] .visually-hidden {
  display: none; }

.pdp-specialhandling-guide {
  font-weight: 400; }
  .pdp-specialhandling-guide [class^="icon-"],
  .pdp-specialhandling-guide [class*=" icon-"] {
    margin-left: 3px; }
  .pdp-specialhandling-guide .icon-info {
    display: inline-block;
    font-size: .75rem;
    border: 1px solid #323952;
    border-radius: 50%;
    padding: 0 .3rem;
    line-height: .8rem;
    margin: 0 .3rem; }

@media (min-width: 64.0625rem) {
  .info-dialog {
    width: 96% !important; } }

/**alteration select styles**/
.specialhandling-select-wrapper {
  margin-bottom: 15px; }
  .specialhandling-select-wrapper .jcf-select {
    min-width: 270px;
    -webkit-box-shadow: none;
            box-shadow: none;
    font-family: "freight-display-pro", Times, serif;
    width: auto; }
    .specialhandling-select-wrapper .jcf-select .jcf-select-text {
      text-transform: uppercase; }

.personalization-area .personalization-group {
  margin-bottom: 1rem; }

.specialhandling-ship-msg {
  background-color: #E0E0E0;
  margin-bottom: 1rem;
  padding: 0.25rem 1rem; }
  .specialhandling-ship-msg.specialhandling-ship-msg--alterations {
    padding: 1rem;
    letter-spacing: 0.07px; }

.specialhandling-text-wrapper[data-type="initials"] input.form-control {
  width: 9rem; }


/*# sourceMappingURL=specialhandling.css.map*/