/**
 * TABLE OF CONTENTS
 *
 * SETTINGS
 * Global..................Globally-available variables and config.
 *
 * TOOLS
 * Mixins..................Useful mixins.
 *
 * COMPONENTS
 * PDP Images..............Mobile gallery and desktop layout
 * Primary Information.....Critical information like name and price
 * Reviews Teaser..........Summarized review list on PDP.
 * PDP Variations..........Variation selector styles seen in the PDP
 * 
 * 
 * MODULES
 *
 */
/*------------------------------------*\
  #SETTINGS
\*------------------------------------*/
/**
 * 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
\*------------------------------------*/
/*------------------------------------*\
  #HORIZONTAL-SPACING
\*------------------------------------*/
/*------------------------------------*\
  #BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*\
  #TRANSITIONS
\*------------------------------------*/
/*------------------------------------*\
  #TOOLS
\*------------------------------------*/
/**
 * 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]
 */
/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/
.product-gallery--pdp {
  width: 100%; }

.product-gallery__item {
  cursor: -webkit-zoom-in;
  cursor: zoom-in; }

@media (min-width: 48rem) {
  .pdp-gallery__thumbnails {
    padding-top: 1.125rem; }
  .pdp-gallery__thumbnail-item:not(:last-child) {
    margin-bottom: 1.875rem; }
  .pdp-gallery__thumbnail {
    display: block; }
    .pdp-gallery__thumbnail.toggle--active {
      -webkit-box-shadow: 0 0 0 .125rem;
              box-shadow: 0 0 0 .125rem; }
  .product-gallery__item:not(:last-child) {
    margin-bottom: 1.875rem; } }

.product-zoom__arrow {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }

.product-zoom__arrow--prev {
  left: 0; }

.product-zoom__arrow--next {
  right: 0; }

@media (min-width: 48rem) {
  .product-zoom__arrow {
    width: 5rem;
    font-size: 3rem; } }

.pdp {
  position: relative; }

.pdp-main__price {
  margin-top: .6rem; }

.pdp-main__social {
  margin-top: 1.875rem; }

@media (min-width: 48rem) {
  .pdp {
    margin-bottom: 4rem; }
  .pdp-main__section:not(:last-child) {
    margin-bottom: 1.875rem; }
  .pdp-main__section--main {
    margin-bottom: 1.25rem; }
  .pdp-main__details {
    padding-top: 3rem;
    padding-bottom: 1.5rem; }
  .pdp-main__number-rating {
    margin-top: 1.625rem; }
  .pdp-main__promotions {
    margin-bottom: .875rem; }
  .pdp-main__viewall {
    margin-bottom: 3rem; } }

@media (max-width: 47.9375rem) {
  .pdp {
    margin-bottom: 3rem; }
  .pdp-main__section {
    margin-top: 1.25rem; }
  .pdp-main__section--main {
    margin-bottom: 2.625rem; }
  .pdp-main__section--payment {
    z-index: 1;
    bottom: -18.75rem;
    left: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
    -webkit-transition-property: bottom;
    transition-property: bottom;
    -webkit-transition-duration: 320ms;
            transition-duration: 320ms;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0.9, 0.4, 1);
            transition-timing-function: cubic-bezier(0.4, 0.9, 0.4, 1); }
    .pdp-main__section--payment.fixit--active {
      top: initial;
      bottom: 0;
      -webkit-transition-delay: 213ms;
              transition-delay: 213ms; }
  .pdp-main__number-rating {
    margin-top: 1rem; }
  .pdp-main__viewall {
    margin-top: 2rem;
    margin-bottom: 2rem; } }

@media (min-width: 48rem) {
  .pdp__details {
    margin-top: 2rem;
    overflow: hidden; } }

.preorder-notification-container {
  margin-left: 3rem;
  width: 100%; }
  .preorder-notification-container ~ .product-attribute--qty {
    margin-top: -4.1rem; }

.preorder-notification-container ~ .product-attribute--qty {
  margin-top: -4.1rem; }

.affirm-as-low-as {
  font-size: 14px;
  color: #666666;
  font-weight: 300;
  margin-top: 0.4rem; }

.pdp__recommendations .product-promotions {
  display: none; }

.pdp__recommendations .affirm-as-low-as {
  display: none; }

.product-breadcrumb-set, .product-breadcrumb {
  margin-top: 1rem; }

@media (min-width: 48rem) {
  .product-breadcrumb {
    margin-left: 17%; } }

.final-sale {
  color: red; }

.explicit-recommendations {
  margin-top: 2.5rem;
  margin-bottom: 0; }
  @media (min-width: 48rem) {
    .explicit-recommendations {
      margin-top: 3.5rem;
      margin-bottom: 2.5rem; } }
  .explicit-recommendations .product-list-title {
    margin-bottom: 1.125rem; }
  .explicit-recommendations .plist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 1.125rem; }
  @media (max-width: 47.9375rem) {
    .explicit-recommendations .product-list-wrapper .products-container {
      margin-top: 2rem;
      margin-bottom: 2rem; } }

.pdp__reviews {
  margin-bottom: 3rem; }

.set-item {
  position: relative; }

@media (min-width: 48rem) {
  .set-item:not(:last-child) {
    margin-bottom: 4rem; } }

@media (max-width: 47.9375rem) {
  .set-item:not(:last-child) {
    margin-bottom: 2rem; } }

.set-items-preorder {
  width: 76%; }


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