/** Shopify CDN: Minification failed

Line 29:39 The "+" operator only works if there is whitespace on both sides
Line 30:42 The "+" operator only works if there is whitespace on both sides
Line 31:44 The "+" operator only works if there is whitespace on both sides
Line 47:39 The "+" operator only works if there is whitespace on both sides
Line 48:42 The "+" operator only works if there is whitespace on both sides
Line 49:43 The "+" operator only works if there is whitespace on both sides
Line 66:38 The "+" operator only works if there is whitespace on both sides
Line 67:41 The "+" operator only works if there is whitespace on both sides
Line 68:43 The "+" operator only works if there is whitespace on both sides
Line 93:38 The "+" operator only works if there is whitespace on both sides
... and 4 more hidden warnings

**/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .text-title {
    @apply /* Mobile (default) */
           tw-font-Dinamic
           tw-text-[24px]
           tw-leading-[30px]
           tw-tracking-[2.4px]

            /* Tablet */
            min-1024:tw-text-[calc(24px+0.5vw)]
            min-1024:tw-leading-[calc(30px+0.75vw)]
            min-1024:tw-tracking-[calc(2.4px+0.025vw)]

            /* Desktop */
            min-1200:tw-text-[35px]
            min-1200:tw-leading-[50px]
            min-1200:tw-tracking-[3.5px];
  }

  .text-heading {
    @apply /* Mobile (default) */
           tw-font-DinamicDisplay
           tw-text-[18px]
           tw-leading-[27px]
           tw-tracking-[.9px]

            /* Tablet */
            min-1024:tw-text-[calc(18px+0.5vw)]
            min-1024:tw-leading-[calc(27px+0.75vw)]
            min-1024:tw-tracking-[calc(.9px+0.025vw)]

            /* Desktop */
            min-1200:tw-text-[25px]
            min-1200:tw-leading-[32px]
            min-1200:tw-tracking-[1.25px];
    font-weight: 500;
  }

  .text-bodycopy,
  .text-bodycopy-medium {
    @apply /* Mobile (default) */
           tw-text-16px
           tw-leading-[25px]
           tw-tracking-[0.8px]
           
           /* Tablet */
           min-1024:tw-text-[calc(16px+0.5vw)]
           min-1024:tw-leading-[calc(24px+0.75vw)]
           min-1024:tw-tracking-[calc(0.8px+0.025vw)]
           
           /* Desktop */
           min-1200:tw-text-[20px]
           min-1200:tw-leading-[30px]
           min-1200:tw-tracking-[1px];
  }

  .text-bodycopy {
    @apply tw-font-Dinamic;
    font-weight: 300;
  }

  .text-bodycopy-medium {
    @apply tw-font-DinamicDisplay;
    font-weight: 400;
  }

  .text-buttoncopy {
    @apply /* Mobile (default) */
           tw-text-14px
           tw-leading-[18px]
           tw-tracking-[1px]
           
           /* Tablet */
           min-1024:tw-text-[calc(14px+0.5vw)]
           min-1024:tw-leading-[calc(18px+0.75vw)]
           min-1024:tw-tracking-[calc(1px+0.025vw)]
           
           /* Desktop */
           min-1200:tw-text-[15px]
           min-1200:tw-leading-[20px]
           min-1200:tw-tracking-[1px];
  }

  .row {
    @apply tw-flex tw-flex-row tw-flex-wrap tw-w-full tw-gap-x-8;
  }
  .column {
    @apply tw-flex tw-flex-col tw-basis-auto tw-flex-1;
  }
  .field.column {
    width: initial;
  }
  a[aria-disabled='true'] {
    color: currentColor;
    display: inline-block; /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
  }
  .button--blue {
    @apply tw-bg-[#2bbed8] tw-border-light_blue tw-text-white tw-border tw-border-solid;
  }
  .button--blue:hover,
  a.button--tertiary:focus,
  a.button--tertiary:hover {
    @apply tw-bg-white tw-border-light_blue tw-text-light_blue tw-border tw-border-solid;
  }
  button:before {
    content: none !important;
  }
  button:after {
    content: none !important;
  }
  .validation-advice {
    @apply tw-text-red tw-text-[15px] tw-leading-[1.4];
  }
  .spinner {
    /*
        display: none;
        position: absolute;
        margin: 0;
        right: 0;
        left: 0;
        top: 0;
        margin-top: 24px;
        */
    @apply tw-hidden tw-absolute tw-m-0 tw-right-0 tw-left-0 tw-top-0 tw-mt-[13px];
  }

  .spinner:before {
    @apply tw-content-[''] tw-animate-spin tw-border-2 tw-border-solid tw-border-light_grey tw-border-t-black tw-w-[20px] tw-h-[20px] tw-rounded-full tw-absolute tw-top-1/2 tw-left-1/2 tw-mt-[-10px] tw-ml-[-10px];
  }

  .Section__container {
    padding: 0;
    margin: 0 auto;
  }

  .tw-grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .option-header {
    @apply tw-flex-col tw-justify-start tw-items-start tw-gap-2 tw-flex;
  }

  .option-title-wrapper {
    @apply tw-self-stretch tw-justify-start tw-items-center tw-inline-flex;
  }

  .option-title {
    @apply tw-text-black tw-font-DinamicDisplay tw-leading-[1.2] tw-tracking-[1px] min-820:tw-leading-[1.2];
  }
  .OptionBtnText {
    @apply tw-text-black tw-font-DinamicDisplay tw-font-[500] tw-leading-[140%] tw-tracking-[1px];
  }

  .option-description-wrapper {
    @apply tw-self-stretch tw-justify-start tw-items-center tw-inline-flex;
  }

  .option-description {
    @apply tw-text-black tw-text-[21px] min-820:tw-text-[16px] tw-font-Dinamic tw-leading-[1.2] tw-tracking-[1.52px] min-820:tw-leading-[1.2] min-820:tw-tracking-[1.28px];
  }

  .option-button-text {
    @apply tw-text-black tw-font-DinamicDisplay tw-font-medium tw-tracking-[1px];
  }

  .option-btn-sub-text {
    @apply tw-text-black tw-font-Dinamic tw-tracking-[1.04px]  min-820:tw-tracking-[.96px];
  }

  [data-button-state='active'] .option-btn-sub-text {
    color: rgb(0 0 0 / .75);
  }

  .tw-bg-swatch_clear {
    @apply tw-bg-gradient-to-br tw-from-[#edeeed] tw-via-[#dddddd] tw-to-[#878887];
  }

  /* Specs modal rows */
  .product-spec__copy-inner {
    @apply tw-flex tw-gap-10px;
  }

  .spec__row-title {
    @apply tw-text-13px md:tw-text-15px tw-font-Dinamic tw-font-normal tw-leading-normal md:tw-leading-166% tw-tracking-wide tw-uppercase tw-text-black tw-basis-[calc(50%-10px)];
  }

  .spec__row-value {
    @apply tw-text-13px md:tw-text-15px tw-font-Dinamic tw-leading-normal md:tw-leading-166% tw-tracking-wide tw-text-black tw-basis-[calc(50%-10px)];
  }

  /* configuration pdp page for mobile
    .product {
        @apply tw-flex tw-flex-col tw-gap-x-[20px] tw-max-w-1280px md:tw-w-[calc(100%-80px)] lg:tw-w-[calc(100%-160px)] tw-mx-auto;
    }
    .ProductHeaderAndImageCarouselContainer {
        @apply tw-self-stretch tw-h-[413px] tw-p-[30px] tw-bg-white tw-flex-col tw-justify-start tw-items-start tw-gap-[25px] tw-flex;
    }
    .ProductHeader {
        @apply tw-px-[3px] tw-py-0.5 tw-flex-col tw-justify-start tw-items-start tw-gap-[3px] tw-flex;
    }
    .ProductTitle {
        @apply tw-self-stretch tw-justify-center tw-items-center tw-gap-2.5 tw-inline-flex;
    }
    .LiquidSensorPump {
        @apply tw-text-black tw-text-[23px] tw-font-medium tw-font-Dinamic tw-uppercase tw-leading-[29px] tw-tracking-widest;
    }
    .ProductTitleSubtext {
        @apply tw-h-[23px] tw-justify-start tw-items-center tw-gap-3 tw-inline-flex;
    }
    .ProductTitleSubtitleText {
        @apply tw-justify-center tw-items-center tw-flex;
    }
    .StartingAt70 {
        @apply tw-text-black tw-text-sm tw-font-light tw-font-Dinamic tw-leading-[17.30px] tw-tracking-widest;
    }
    .ProductTitleSubtitleText {
        @apply tw-justify-center tw-items-center tw-flex;
    }
    .ProductTitleSubtextLink {
        @apply tw-justify-center tw-items-center tw-flex;
    }
    .LearnMore {
        @apply tw-text-black tw-text-sm tw-font-normal tw-font-Dinamic tw-leading-[17.40px] tw-tracking-wide;
    }
    .ProductImageCarousel {
        @apply tw-self-stretch tw-h-[269px] tw-flex-col tw-justify-center tw-items-center tw-gap-[15px] tw-flex;
    }
    .ProductImageContainer {
        @apply tw-self-stretch tw-h-[250px] tw-bg-[#f6f6f8] tw-rounded tw-justify-center tw-items-center tw-gap-2.5 tw-inline-flex;
    }
    .Frame324 {
        @apply tw-self-stretch tw-p-[30px] tw-flex-col tw-justify-center tw-items-center tw-gap-2.5 tw-inline-flex;
    }
    .ProductImage {
        @apply tw-w-[300px] tw-h-[210px];
    }
    .ProductImageCarouselDots {
        @apply tw-justify-start tw-items-center tw-gap-2 tw-inline-flex;
    }
    .HorizontalOptionButtonSizeContainer {
        @apply tw-self-stretch tw-px-[33px] tw-py-[5px] tw-flex-col tw-justify-start tw-items-start tw-gap-[30px] tw-flex;
    }
    .option-header {
        @apply tw-h-[61px] tw-flex-col tw-justify-start tw-items-start tw-gap-2 tw-flex;
    }
    .option-title {
        @apply tw-self-stretch tw-h-[29px] tw-justify-start tw-items-center tw-inline-flex;
    }
    .Size {
        @apply tw-text-black tw-text-[23px] tw-font-medium tw-font-Dinamic tw-uppercase tw-leading-7 tw-tracking-[2.76px];
    }
    .OptionDescription {
        @apply tw-self-stretch tw-justify-start tw-items-center tw-inline-flex;
    }
    .PickYourVolumeCapacity {
        @apply tw-text-black tw-text-[19px] tw-font-normal tw-font-Dinamic tw-lowercase tw-leading-normal tw-tracking-wider;
    }
    .BtnContainer {
        @apply tw-flex-col tw-justify-start tw-items-start tw-gap-[15px] tw-flex;
    }
    .VerticalOptionButton {
        @apply tw-h-20 tw-px-[30px] tw-py-4 tw-rounded tw-border tw-border-black tw-flex-col tw-justify-center tw-items-start tw-flex;
    }
    .OptionBtnText {
        @apply tw-justify-center tw-items-center tw-inline-flex;
    }
    .NoEngraving {
        @apply tw-text-black tw-text-lg tw-font-medium tw-font-Dinamic tw-uppercase tw-leading-[25.20px] tw-tracking-wider;
    }
    .PerfectForBathrooms {
        @apply tw-text-black tw-text-sm tw-font-normal tw-font-Dinamic tw-leading-tight tw-tracking-wide;
    }
    .HorizontalOptionButtonText {
        @apply tw-w-40 tw-h-[60px] tw-px-[30px] tw-py-4 tw-rounded tw-border tw-border-black tw-justify-center tw-items-center tw-gap-2.5 tw-flex;
    }
    .FinishContainer {
        @apply tw-h-[201px] tw-px-[33px] tw-pt-[70px] tw-pb-0.5 tw-opacity-20 tw-flex-col tw-justify-start tw-items-start tw-gap-[30px] tw-flex;
    }
    .FinishOptions {
        @apply tw-self-stretch tw-justify-start tw-items-center tw-gap-[22px] tw-inline-flex;
    }
    .FinishColor {
        @apply tw-w-[38px] tw-h-[38px] tw-relative;
    }
    .Ellipse3 {
        @apply tw-w-[38px] tw-h-[38px] tw-left-0 tw-top-0 tw-absolute tw-rounded-full;
    }
    .QuantityContainer {
        @apply tw-h-[223px] tw-px-[33px] tw-pt-[70px] tw-pb-0.5 tw-opacity-20 tw-flex-col tw-justify-start tw-items-start tw-gap-[30px] tw-flex;
    }
    .CustomizeContainer {
        @apply tw-h-[318px] tw-px-[33px] tw-pt-[70px] tw-pb-0.5 tw-opacity-20 tw-flex-col tw-justify-start tw-items-start tw-gap-[30px] tw-flex;
    }
    .CrossSellContainer {
        @apply tw-h-[318px] tw-px-[33px] tw-pt-[70px] tw-pb-0.5 tw-opacity-20 tw-flex-col tw-justify-start tw-items-start tw-gap-[30px] tw-flex;
    }
    .CrossSellContainerDropDown {
        @apply tw-h-[613px] tw-px-[33px] tw-pt-[70px] tw-pb-0.5 tw-opacity-20 tw-flex-col tw-justify-start tw-items-start tw-gap-[30px] tw-flex;
    }
    .SpongeContainer {
        @apply tw-h-[318px] tw-px-[33px] tw-pt-[70px] tw-pb-0.5 tw-opacity-20 tw-flex-col tw-justify-start tw-items-start tw-gap-[30px] tw-flex;
    }
    .VerticalOptionButton {
        @apply tw-h-20 tw-px-[30px] tw-py-4 tw-rounded tw-border tw-border-black tw-flex-col tw-justify-center tw-items-start tw-flex;
    }
 */
}