/*================ Variable ================*/
/*============================================================================
  Grid Breakpoints and Class Names
    - Do not change the variable names
==============================================================================*/
$grid-medium: 750px;
$grid-large: 990px;
$grid-widescreen: 1400px;
$grid-gutter: 30px;
$grid-gutter-mobile: 22px;

$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';

/*============================================================================
  Generate breakpoint-specific column widths and push classes
    - Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
    - Default is no push classes
==============================================================================*/
$grid-breakpoint-has-widths: ($small, $medium-up);
$grid-breakpoint-has-push: ($small, $medium-up);

/*================ Color Variables ================*/

// Text colors
$color-text: #3d4246;
$color-text-shadow: rgba(0, 0, 0, 0.1);
$color-body-text: #000000;
$color-sale-text: #000000;
$color-small-button: #fff;
$color-small-button-text: #3d4246;
$color-text-field: #fff;
$color-text-field-text: #000;
$color-navigation-text: #3d4246;

// Button colors
$color-btn-primary: #000000;
$color-btn-primary-text: #ffffff;

// Link buttons and secondary cta
$color-link: $color-body-text;
$opacity-link-hover: 0.6;
$transition-link-hover: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);

// Backgrounds
$color-body: #fff;
$color-bg: #fff;
$color-drawer-background: rgba(0, 0, 0, 0.6);
$color-bg-alt: rgba(0, 0, 0, 0.05);

// Overlays
$color-overlay-title-text: #ffffff;
$color-image-overlay: #5c5c5c;
$opacity-image-overlay: 0.25;

// Border colors
$color-border: #ebebeb;

// Helper colors for form error states
$color-disabled: #f4f4f4;
$color-disabled-border: #f4f4f4;
$color-error: #d20000;
$color-error-bg: #fff8f8;
$color-success: #19a340;
$color-success-bg: #f8fff9;

// Forms
$color-form-text: #333;
$color-error-input-text: $color-error;
$input-padding-top-bottom: 10px;
$input-padding-left-right: 18px;
$input-padding-top-bottom-small: 8px;
$input-padding-left-right-small: 15px;
$input-group-height: 46px;
$input-group-height-small: 42px;

// Social icons
$color-facebook: #3b5998;
$color-twitter: #00aced;
$color-pinterest: #cb2027;

/*================ Sizing Variables ================*/
$width-site: 1200px;
$gutter-site: 55px;
$gutter-site-mobile: 22px;
$section-spacing: 55px;
$section-spacing-small: 35px;
$border-radius: 2px;

/*================ Z-Index ================*/
$z-index-dropdown : 7;
$z-index-sub-nav: 8;
$z-index-drawer: 9;
$z-index-announcement-bar: 10;
$z-index-skip-to-content: 10000; // really high to be safe of app markup

/*================ SVG ================*/
$svg-select-icon: #{'//cdn.shopify.com/s/files/1/0045/8365/3422/t/12/assets/ico-select.svg?2021'};

/*================ Drawers ================*/
$transition-drawer: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);

/*================ Hero ================*/
$color-background-hero-button: #fff;
$color-text-hero-button: #000;

/*================ Hero Slider ================*/
$color-slideshow-arrows: #000;
$color-slideshow-dots: #fff;

$transition-text-slideshow: all 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
$transition-image-slideshow: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);

/*================ Typography ================*/




$font-weight-normal: 400;
$font-weight-bold: 700;

$font-stack-header: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
$font-weight-header: 400;
$font-size-header: 26px;
$font-bold-titles: true;

$font-stack-body: Poppins;
$font-size-base: 16px; // Henseforth known as 1em

$font-stack-cart-notification: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;

$font-size-mobile-input: 16px; // min 16px to prevent zooming

/*================ Gift Cards ================*/
$color-giftcard-tooltip-fallback: #333;
$color-giftcard-light: #fff;
$color-giftcard-tooltip: rgba(0, 0, 0, 0.9);
$color-giftcard-disabled: #999;
$color-giftcard-small-text: #b3b3b3;
$color-giftcard-shadow: rgba(0, 0, 0, 0.1);
$color-giftcard-print-bg: #fff;
$color-giftcard-print: #000;

/*================ Z-index ================*/
$z-index-giftcard-image: 2;
$z-index-giftcard-corners: 3;
$z-index-giftcard-tooltip: 4;
$z-index-giftcard-code: 5;



/*================ #Giftcard Template ================*/

.giftcard__apple-wallet-image {
  display: block;
  margin: 0 auto;
}

/*================ Print Giftcard Styles ================*/
@media print {
  @page {
    margin: 0.5cm;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  html,
  body {
    background-color: $color-giftcard-light;
    color: $color-giftcard-print;
  }

  .giftcard__print-link,
  .giftcard__apple-wallet {
    display: none;
  }
}

/*================ Custom Giftcard Styles ================*/
.template-giftcard {
  background: $color-body;

  .site-header__logo {
    padding-left: 0;
  }

  .site-header__logo-image {
    max-width: 200px;
  }

  .wrapper {
    max-width: 588px;

    img,
    object,
    iframe {
      max-width: 100%;
    }
  }
}

.giftcard-wrapper {
  max-width: 488px;
  margin: 0 auto;
}

.giftcard__header {
  margin-top: $gutter-site * 2;
}

.giftcard__tag--active {
  opacity: 0.6;
}

/*================ Gift Card image ================*/
.giftcard__wrap {
  position: relative;
  margin: ($gutter-site / 2) ($gutter-site / 2) $gutter-site;

  img {
    position: relative;
    display: block;
    border-radius: 10px;
    z-index: $z-index-giftcard-image;
  }

  // White corner caps that overlap gift card image
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 47px; // asset width
    height: 47px; // asset width
    z-index: $z-index-giftcard-corners;
  }

  &::before {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDdweCIgaGVpZ2h0PSI0N3B4IiB2aWV3Qm94PSIwIDAgNDcgNDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ3IDQ3IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBvcGFjaXR5PSIwLjEiPgoJCTxwYXRoIGQ9Ik00NC41ODYsMUwxLDQ0LjU4NlYxMGMwLTQuOTYzLDQuMDM3LTksOS05SDQ0LjU4NiBNNDcsMEgxMEM0LjQ3NywwLDAsNC40NzcsMCwxMHYzN0w0NywwTDQ3LDB6Ii8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDQuNTg2LDFMMSw0NC41ODZWMTBjMC00Ljk2Myw0LjAzNy05LDktOUg0NC41ODYiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K') 0 0 no-repeat;
    top: -1px;
    left: -1px;
  }

  &::after {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDdweCIgaGVpZ2h0PSI0N3B4IiB2aWV3Qm94PSIwIDAgNDcgNDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ3IDQ3IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBvcGFjaXR5PSIwLjEiPgoJCTxwYXRoIGQ9Ik0yLjQxNCw0Nkw0NiwyLjQxNFYzN2MwLDQuOTYzLTQuMDM3LDktOSw5SDIuNDE0IE0wLDQ3aDM3YzUuNTIzLDAsMTAtNC40NzcsMTAtMTBWMEwwLDQ3TDAsNDd6Ii8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMi40MTQsNDZMNDYsMi40MTRWMzdjMCw0Ljk2My00LjAzNyw5LTksOUgyLjQxNCIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=') 0 0 no-repeat;
    bottom: -1px;
    right: -1px;
  }
}

/*================ Gift card code ================*/
.giftcard__code {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  z-index: $z-index-giftcard-code;
}

.giftcard__code--medium {
  font-size: 0.875em;
}

.giftcard__code--small {
  font-size: 0.75em;
}

.giftcard__code__inner {
  display: inline-block;
  vertical-align: baseline;
  background-color: $color-giftcard-light;
  padding: 0.5em;
  border-radius: 4px;
  max-width: 450px;
  -webkit-box-shadow: 0 0 0 1px $color-giftcard-shadow;
  box-shadow: 0 0 0 1px $color-giftcard-shadow;
}

.giftcard__code__text {
  font-weight: 400;
  font-size: 1.875em;
  text-transform: uppercase;
  border: 1px dashed $color-border;
  padding: 0.4em 0.5em;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;

  &.disabled {
    color: $color-giftcard-disabled;
    text-decoration: line-through;
  }
}

/*================ Gift card amount ================*/
.giftcard__amount {
  position: absolute;
  top: 0;
  right: 0;
  color: $color-giftcard-light;
  font-size: 2.75em;
  line-height: 1.2;
  padding: 10px;
  z-index: $z-index-giftcard-code;

  strong {
    display: block;
    text-shadow: 2px 2px 0 $color-giftcard-shadow;
  }
}

.giftcard__amount--medium {
  font-size: 2em;
}

/*================ Tooltip ================*/
.giftcard__tooltip {
  display: block;
  position: absolute;
  top: -50%;
  right: 50%;
  margin-top: 16px;
  z-index: $z-index-giftcard-tooltip;
  color: $color-giftcard-light;
  text-align: center;
  white-space: nowrap;

  &::before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 0;
    height: 0;
    margin-left: -5px;
    margin-bottom: -5px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 5px solid $color-giftcard-tooltip-fallback;
    border-top: 5px solid $color-giftcard-tooltip;
  }
}

.giftcard__tooltip-label {
  display: block;
  position: relative;
  right: -50%;
  border: 0;
  border-radius: 4px;
  background-color: $color-giftcard-tooltip-fallback;
  background-color: $color-giftcard-tooltip;
  min-height: 14px;
  font-weight: 400;
  font-size: 12px;
  text-decoration: none;
  line-height: 16px;
  text-shadow: none;
  padding: 0.5em 0.75em;
  margin-left: 0.25em;

  small {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: $color-giftcard-small-text;
    font-size: 0.875em;
  }
}

/*================ QR code (print only) ================*/
.giftcard__qr-code {
  img {
    padding: 0;
    border: 1px solid $color-border;
    border-radius: 4px;
    margin: 0 auto $gutter-site;
  }
}

/*================ Medium-down width ================*/
@media screen and (max-width: 580px) {
  .giftcard {
    padding-top: $gutter-site * 2;
  }

  .print-link {
    display: none;
  }
}

/*================ Small width ================*/
@media screen and (max-width: 400px) {
  .giftcard__wrap::before,
  .giftcard__wrap::after {
    display: none;
  }

  .giftcard__code {
    font-size: 0.75em;
  }

  .giftcard__code--medium {
    font-size: 0.65em;
  }

  .giftcard__code--small {
    font-size: 0.55em;
  }
}


/*============================================================================
  #Print Styles
==============================================================================*/

@media print {
  .giftcard__actions,
  .giftcard__wrap::before,
  .giftcard__wrap::after,
  .giftcard__tooltip {
    display: none;
  }

  .shop-url {
    display: block;
    text-align: center;
  }

  .qr-code {
    display: block;
  }

  .print-link {
    display: none;
  }
}
