/* Approved Black Friday header, Tienda shop 1. */
html body #header {
  --td-bf-tint: rgba(158, 88, 119, .34);
  --td-bf-ink: #000;
}

/* The existing surface keeps its blur; the mask joins the tab to the capsule
   without overlapping two translucent backgrounds. Dropdowns stay unclipped. */
@media (max-width: 767px) {
  html body:not(#td-bf-reserved-1):not(#td-bf-reserved-2) #header #mobile-header-sticky {
    border-bottom-color: transparent !important;
  }

  html body:not(#td-bf-reserved-1):not(#td-bf-reserved-2) #header #mobile-header-sticky::before {
    bottom: -7px !important;
    border-radius: 0 !important;
    background: var(--td-bf-tint) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 0C5 0 5 8 12 8H88C95 8 95 0 100 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 0C5 0 5 8 12 8H88C95 8 95 0 100 0Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% calc(100% - 7px), 100px 8px;
    mask-size: 100% calc(100% - 7px), 100px 8px;
    -webkit-mask-position: left top, center bottom;
    mask-position: left top, center bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  html body:not(#td-bf-reserved-1):not(#td-bf-reserved-2) #header #mobile-header-sticky::after {
    content: "BLACK FRIDAY";
    position: absolute;
    top: 39px;
    z-index: 2;
    left: 50%;
    width: 100px;
    height: 15px;
    transform: translateX(-50%);
    display: block;
    color: var(--td-bf-ink);
    font: 200 10px/15px Urbanist, sans-serif;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    text-shadow: none;
    pointer-events: none;
  }
}

@media (min-width: 768px) {
  html body:not(#td-bf-reserved-1):not(#td-bf-reserved-2) #header #desktop-header::before {
    background: rgba(140, 99, 116, .18) !important;
  }

  html body #header #desktop_logo {
    position: relative;
  }

  html body #header #desktop_logo::after {
    content: "BLACK FRIDAY";
    position: absolute;
    top: 100%;
    z-index: 2;
    left: 50%;
    width: 112px;
    transform: translateX(-50%);
    color: var(--td-bf-ink);
    font: 200 12px/16px Urbanist, sans-serif;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    text-shadow: none;
    pointer-events: none;
  }
}

/* Follow the existing live iPhone header breakpoint. */
@media (min-width: 768px) {
  html.td-is-iphone body:not(#td-bf-reserved-1):not(#td-bf-reserved-2) #header #mobile-header-sticky {
    border-bottom-color: transparent !important;
  }

  html.td-is-iphone body:not(#td-bf-reserved-1):not(#td-bf-reserved-2) #header #mobile-header-sticky::before {
    bottom: -7px !important;
    border-radius: 0 !important;
    background: var(--td-bf-tint) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 0C5 0 5 8 12 8H88C95 8 95 0 100 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 0C5 0 5 8 12 8H88C95 8 95 0 100 0Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% calc(100% - 7px), 100px 8px;
    mask-size: 100% calc(100% - 7px), 100px 8px;
    -webkit-mask-position: left top, center bottom;
    mask-position: left top, center bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  html.td-is-iphone body:not(#td-bf-reserved-1):not(#td-bf-reserved-2) #header #mobile-header-sticky::after {
    content: "BLACK FRIDAY";
    position: absolute;
    top: 39px;
    z-index: 2;
    left: 50%;
    width: 100px;
    height: 15px;
    transform: translateX(-50%);
    display: block;
    color: var(--td-bf-ink);
    font: 200 10px/15px Urbanist, sans-serif;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    text-shadow: none;
    pointer-events: none;
  }
}

/* Follow the live bar's existing fade and back-to-top states. */
@media (min-width: 768px) {
  html body #header #desktop_logo {
    padding-bottom: 16px;
  }
  html body #header #desktop_logo::after {
    top: auto;
    bottom: 0;
  }
}
html body.td-header-at-bottom #header #mobile-header-sticky:not(.td-header-ghost-top)::after,
html body #header #mobile-header-sticky.td-header-ghost-bottom::after {
  visibility: hidden;
}
html body #header #mobile-header-sticky.td-header-reveal::after {
  animation: td-header-reveal 400ms ease-out both;
}
html body #header #mobile-header-sticky.td-header-fading-out::after {
  animation: td-header-fade-out 400ms linear both !important;
}
html body #header #mobile-header-sticky.td-header-fading-in::after {
  animation: td-header-reveal 400ms linear both !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #header #mobile-header-sticky:is(.td-header-reveal, .td-header-fading-out, .td-header-fading-in)::after {
    animation: none !important;
  }
}