/** Shopify CDN: Minification failed

Line 399:0 Unexpected "}"

**/
/*
  ============================================================
  DRIPFUL — Theme Override CSS
  ============================================================
  Inter is forced on EVERY element. Customizer cannot override.
  ============================================================
*/

/* ============================================================
   0. NUCLEAR FONT OVERRIDE — Inter on everything, everywhere
   ============================================================ */

*,
*::before,
*::after,
html,
body,
input,
button,
textarea,
select,
optgroup,
option,
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6,
.heading,
.section-header,
.section__heading,
.section-heading,
.product-card__title,
.product-card__vendor,
.product-card__price,
.product-card .price,
.badge,
.button,
.btn,
.input,
.textarea,
.select,
.announcement-bar,
.header,
.header__nav,
.header__menu,
.header__menu a,
.footer,
.footer *,
.cart-drawer,
.cart-drawer *,
.search-drawer,
.search-drawer *,
.navigation-drawer,
.navigation-drawer *,
.newsletter-drawer,
.newsletter-drawer *,
.product-info,
.product-info *,
.accordion,
.accordion *,
.pagination,
.pagination *,
.prose,
.prose * {
  font-family: 'Inter', sans-serif !important;
}

/* Force Inter on Impact's CSS variables too — kills the customizer font system */
:root,
body {
  --heading-font-family: 'Inter', sans-serif !important;
  --text-font-family: 'Inter', sans-serif !important;
  --font-heading-family: 'Inter', sans-serif !important;
  --font-body-family: 'Inter', sans-serif !important;
}

/* ============================================================
   1. GLOBAL COLOR TOKENS
   ============================================================ */

:root {
  --df-blue:        57, 142, 245;
  --df-teal:        26, 118, 110;
  --df-teal-dark:   18,  90,  84;
  --df-pink:       250, 103, 148;
  --df-pink-dark:  225,  82, 126;

  --df-bg:         248, 246, 242;
  --df-bg-soft:    242, 240, 234;
  --df-surface:    255, 255, 255;
  --df-ink:         15,  15,  18;
  --df-ink-soft:    60,  60,  68;
  --df-ink-faded: 130, 130, 140;
  --df-border:    225, 222, 215;
  --df-border-strong: 200, 197, 188;
}

body {
  --background-primary:           var(--df-bg);
  --background-secondary:         var(--df-bg-soft);
  --text-primary:                 var(--df-ink);
  --text-secondary:               var(--df-ink-soft);
  --button-background-primary:    var(--df-ink);
  --button-text-primary:          var(--df-bg);
  --button-background-secondary:  var(--df-teal);
  --button-text-secondary:        var(--df-bg);
  --accent:                       var(--df-teal);
  --primary-badge-background:     var(--df-teal);
  --primary-badge-text:           var(--df-bg);
  --on-sale-badge-background:     var(--df-pink);
  --on-sale-badge-text:           var(--df-ink);
  --sold-out-badge-background:    var(--df-border-strong);
  --sold-out-badge-text:          var(--df-ink);
  --star-color:                   var(--df-pink);
  --border-color:                 var(--df-border);
  --dialog-background:            var(--df-bg);
  --header-background:            var(--df-bg);
  --header-text:                  var(--df-ink);
  --header-transparent-text-color: var(--df-ink);
  --footer-background:            var(--df-ink);
  --footer-text:                  var(--df-bg);
  --rounded-button:               8px;
  --rounded-input:                6px;
  --rounded-xs:                   4px;
  --rounded-sm:                   8px;
  --rounded:                      12px;
  --rounded-lg:                   16px;
}

/* ============================================================
   2. BODY + BASE
   ============================================================ */

body {
  background: rgb(var(--df-bg));
  color: rgb(var(--df-ink));
}

.heading, .h0, .h1, .h2, .h3, .h4, .h5, .h6,
.prose h1, .prose h2, .prose h3,
.prose h4, .prose h5, .prose h6 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: rgb(var(--df-ink)) !important;
}

.text-xs, .text-sm,
.badge,
.subheading {
  letter-spacing: 0.01em;
}

/* ============================================================
   3. ANNOUNCEMENT BAR
   ============================================================ */

.announcement-bar {
  background: rgb(var(--df-ink)) !important;
  color: rgb(var(--df-bg)) !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.announcement-bar a,
.announcement-bar a:hover {
  color: rgb(var(--df-bg)) !important;
}

/* ============================================================
   4. HEADER / NAV
   ============================================================ */

/* ============================================================
   5. BUTTONS
   ============================================================ */

.button,
.btn {
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border-radius: 8px !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease !important;
}

.button:not(.button--secondary):not(.button--ghost),
.button--primary {
  background: rgb(var(--df-ink)) !important;
  color: rgb(var(--df-bg)) !important;
}

.button:not(.button--secondary):not(.button--ghost):hover,
.button--primary:hover {
  background: rgb(var(--df-hover-color, var(--df-teal))) !important;
  color: rgb(var(--df-bg)) !important;
}

.button--secondary {
  background: rgb(var(--df-teal)) !important;
  color: rgb(var(--df-bg)) !important;
}

.button--secondary:hover {
  background: rgb(var(--df-hover-color, var(--df-teal-dark))) !important;
}

.button--ghost,
.button.button--outline {
  background: transparent !important;
  color: rgb(var(--df-ink)) !important;
  border: 1px solid rgb(var(--df-border-strong)) !important;
}

.button--ghost:hover,
.button.button--outline:hover {
  background: rgb(var(--df-hover-color, var(--df-ink))) !important;
  color: rgb(var(--df-bg)) !important;
}

/* ============================================================
   6. PRODUCT CARDS
   ============================================================ */

.product-card {
  background: rgb(var(--df-surface)) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgb(var(--df-border)) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 15, 18, 0.06);
}

.product-card__figure {
  overflow: hidden !important;
  font-size: 0 !important;
  background: rgb(var(--df-bg-soft)) !important;
}

.product-card__image,
.product-card__image--primary,
.product-card__image--secondary {
  display: block !important;
  vertical-align: bottom !important;
  border-radius: 0 !important;
  transition: opacity 0.2s ease !important;
}

@media (hover: none) {
  .product-card__image--secondary {
    display: none !important;
    opacity: 0 !important;
  }
  .product-card__image--primary {
    opacity: 1 !important;
  }
}

.product-card__info {
  background: rgb(var(--df-surface)) !important;
  border-top: none !important;
  padding: 0.85rem 1rem 1rem !important;
}

.product-card__title {
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgb(var(--df-ink)) !important;
  line-height: 1.3 !important;
}

.product-card__vendor {
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgb(var(--df-ink-faded)) !important;
  margin-bottom: 0.25rem !important;
}

.product-card__price,
.product-card .price {
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: rgb(var(--df-ink)) !important;
}

.product-card .price--on-sale,
.product-card .price__sale {
  color: rgb(var(--df-pink)) !important;
}

.product-card .price__regular--strikethrough,
.product-card .price__compare {
  color: rgb(var(--df-ink-faded)) !important;
  text-decoration: line-through !important;
}

.badge {
  font-weight: 600 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.55rem !important;
}

/* ============================================================
   7. SECTION HEADINGS
   ============================================================ */

.section-header,
.section__heading,
.section-heading {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: rgb(var(--df-ink)) !important;
}

/* ============================================================
   8. CART DRAWER
   ============================================================ */

.cart-drawer::part(content) {
  background: rgb(var(--df-bg)) !important;
  color: rgb(var(--df-ink)) !important;
  border-radius: 16px 0 0 16px !important;
}

.cart-drawer .button {
  border-radius: 8px !important;
}

.cart-drawer__free-shipping-bar {
  background: rgb(var(--df-bg-soft)) !important;
}

.cart-drawer__free-shipping-bar-progress {
  background: rgb(var(--df-teal)) !important;
}

/* ============================================================
   9. FORMS / INPUTS
   ============================================================ */

.input,
.textarea,
.select {
  background: rgb(var(--df-surface)) !important;
  color: rgb(var(--df-ink)) !important;
  border: 1px solid rgb(var(--df-border)) !important;
  border-radius: 6px !important;
}

.input:focus,
.textarea:focus,
.select:focus-visible {
  border-color: rgb(var(--df-teal)) !important;
  box-shadow: 0 0 0 3px rgba(26, 118, 110, 0.15) !important;
  outline: none !important;
}

.input::placeholder,
.textarea::placeholder {
  color: rgb(var(--df-ink-faded)) !important;
}

/* ============================================================
   10. FOOTER
   ============================================================ */

.footer {
  background: rgb(var(--df-ink)) !important;
  color: rgb(var(--df-bg)) !important;
}

.footer a,
.footer__block a {
  color: rgb(var(--df-bg)) !important;
  transition: none !important;
}

.footer a:hover,
.footer__block a:hover {
  color: rgb(var(--df-pink)) !important;
}
}

.footer .heading,
.footer .h5,
.footer .h6 {
  color: rgb(var(--df-bg)) !important;
}

.footer .text-subdued,
.footer p {
  color: rgba(248, 246, 242, 0.99) !important;
}

.footer .input {
  background: rgba(248, 246, 242, 0.08) !important;
  border-color: rgba(248, 246, 242, 0.18) !important;
  color: rgb(var(--df-bg)) !important;
}

.footer .input::placeholder {
  color: rgba(248, 246, 242, 0.5) !important;
}

.footer .input:focus {
  border-color: rgb(var(--df-teal)) !important;
  box-shadow: 0 0 0 3px rgba(26, 118, 110, 0.25) !important;
}

/* ============================================================
   11. NEWSLETTER POPUP
   ============================================================ */

.newsletter-drawer__content {
  background: rgb(var(--df-bg)) !important;
  color: rgb(var(--df-ink)) !important;
}

.newsletter-drawer .h2,
.newsletter-drawer h2 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: rgb(var(--df-ink)) !important;
}

.newsletter-drawer .text-subdued,
.newsletter-drawer p {
  color: rgb(var(--df-ink-soft)) !important;
}

.newsletter-drawer .input {
  background: rgb(var(--df-surface)) !important;
  border: 1px solid rgb(var(--df-border)) !important;
  color: rgb(var(--df-ink)) !important;
}

.newsletter-drawer .input::placeholder {
  color: rgb(var(--df-ink-faded)) !important;
}

.newsletter-drawer .button:not(.button--secondary) {
  background: rgb(var(--df-teal)) !important;
  color: rgb(var(--df-bg)) !important;
}

.newsletter-drawer .button:not(.button--secondary):hover {
  background: rgb(var(--df-teal-dark)) !important;
}

.newsletter-drawer .input:focus,
.newsletter .input:focus,
[id*="newsletter"] .input:focus {
  box-shadow: none !important;
  border-color: rgb(var(--df-teal)) !important;
}

/* ============================================================
   12. ACCORDIONS
   ============================================================ */

.accordion,
.accordion__item {
  border-color: rgb(var(--df-border)) !important;
}

.accordion summary,
.accordion__heading {
  color: rgb(var(--df-ink)) !important;
  font-weight: 600 !important;
}

/* ============================================================
   13. VARIANT SWATCHES
   ============================================================ */

.variant-swatch,
.color-swatch {
  border: 1px solid rgb(var(--df-border)) !important;
}

.variant-swatch[aria-checked="true"],
.color-swatch[aria-checked="true"],
.variant-swatch.is-selected {
  border-color: rgb(var(--df-teal)) !important;
  box-shadow: 0 0 0 2px rgba(26, 118, 110, 0.2) !important;
}

/* ============================================================
   14. PAGINATION
   ============================================================ */

.pagination a,
.pagination span {
  color: rgb(var(--df-ink)) !important;
}

.pagination .is-active,
.pagination [aria-current="page"] {
  color: rgb(var(--df-teal)) !important;
  font-weight: 600 !important;
}

/* ============================================================
   15. DRAWERS / SEARCH
   ============================================================ */

/* ============================================================
   16. MISC UI
   ============================================================ */

:focus-visible { outline-color: rgb(var(--df-teal)) !important; }

::selection {
  background: rgb(var(--df-teal));
  color: rgb(var(--df-bg));
}

.link,
.prose a:not(.button) {
  color: rgb(var(--df-teal)) !important;
  background-image: linear-gradient(to right, rgb(var(--df-teal)), rgb(var(--df-teal))) !important;
}

/* ============================================================
   17. PRODUCT PAGE
   ============================================================ */

.product-info .h1,
.product-info .h2 {
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  line-height: 1.15 !important;
  color: rgb(var(--df-ink)) !important;
}

.product-info .button[name="add"] {
  width: 100% !important;
  padding-block: 1rem !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  background: rgb(var(--df-ink)) !important;
  color: rgb(var(--df-bg)) !important;
  border-radius: 8px !important;
}

.product-info .button[name="add"]:hover {
  background: rgb(var(--df-teal)) !important;
}

.product-info .product__vendor,
.product-info [data-vendor] {
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgb(var(--df-teal)) !important;
}

/* Product page image — match the product card outline */
.product-gallery__media,
.product-gallery__media-list-item,
.product__media-item {
  border: none !important;
  overflow: visible !important;
}

.product-gallery__media img,
.product-gallery img,
.product__media-item img {
  border: 1px solid rgb(var(--df-border)) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ============================================================
   18. COLLECTION SORT BAR
   ============================================================ */

.collection__top-bar {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 1rem !important;
  background: transparent !important;
  border-bottom: none !important;
}

.sort-by-facet {
  display: flex !important;
  margin-inline-start: auto !important;
  position: relative !important;
}

.facets__floating-filter {
  display: none !important;
}

.sort-by-facet .popover {
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
  right: 0 !important;
  left: auto !important;
  min-width: 200px !important;
  width: 200px !important;
  z-index: 100 !important;
}

.sort-by-facet .popover-listbox__option {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ============================================================
   19. Z-INDEX STACK
   Only bump cart/search drawers above header. Don't lock header
   z-index because it traps the navigation drawer.
   ============================================================ */

.cart-drawer {
  z-index: 1002 !important;
}

.search-drawer {
  z-index: 1002 !important;
}

.navigation-drawer {
  z-index: 1002 !important;
}
/* ============================================================
   20. MOBILE
   ============================================================ */

@media screen and (max-width: 699px) {
  .product-list { gap: 0.5rem !important; }
  .product-card { border-radius: 10px !important; }
  .product-card__info { padding: 0.7rem 0.85rem 0.85rem !important; }
  .product-card__title { font-size: 0.85rem !important; }
  .cart-drawer::part(content) { border-radius: 16px 16px 0 0 !important; }
}

/* ============================================================
   25. TRENDING NOW OVERLAY  (_NXaHhE)  ·  white btn / GREEN hover
   ============================================================ */

[id*="image_with_text_overlay_NXaHhE"] .h1,
[id*="image_with_text_overlay_NXaHhE"] .h2,
[id*="image_with_text_overlay_NXaHhE"] .heading,
[id*="image_with_text_overlay_NXaHhE"] h1,
[id*="image_with_text_overlay_NXaHhE"] h2,
[id*="image_with_text_overlay_NXaHhE"] .subheading,
[id*="image_with_text_overlay_NXaHhE"] p {
  color: #fff !important;
}

[id*="image_with_text_overlay_NXaHhE"] .button:not(.button--secondary):not(.button--ghost) {
  background: #fff !important;
  color: #000 !important;
}

[id*="image_with_text_overlay_NXaHhE"] .button:not(.button--secondary):not(.button--ghost):hover {
  background: rgb(var(--df-hover-color, var(--df-pink))) !important;
  color: #fff !important;
}

/* ============================================================
   26. NEW ARRIVALS OVERLAY  (_aaKCFB)  ·  white btn / BLUE hover
   ============================================================ */

[id*="image_with_text_overlay_aaKCFB"] .h1,
[id*="image_with_text_overlay_aaKCFB"] .h2,
[id*="image_with_text_overlay_aaKCFB"] .heading,
[id*="image_with_text_overlay_aaKCFB"] h1,
[id*="image_with_text_overlay_aaKCFB"] h2,
[id*="image_with_text_overlay_aaKCFB"] .subheading,
[id*="image_with_text_overlay_aaKCFB"] p {
  color: #fff !important;
}

[id*="image_with_text_overlay_aaKCFB"] .button:not(.button--secondary):not(.button--ghost) {
  background: #fff !important;
  color: rgb(var(--df-ink)) !important;
}

[id*="image_with_text_overlay_aaKCFB"] .button:not(.button--secondary):not(.button--ghost):hover {
  background: rgb(var(--df-blue)) !important;
  color: #fff !important;
}

/* ============================================================
   27. FOR THE GIRLS OVERLAY  (_rjkACL)  ·  white btn / PINK hover
   ============================================================ */

[id*="image_with_text_overlay_rjkACL"] .h1,
[id*="image_with_text_overlay_rjkACL"] .h2,
[id*="image_with_text_overlay_rjkACL"] .heading,
[id*="image_with_text_overlay_rjkACL"] h1,
[id*="image_with_text_overlay_rjkACL"] h2,
[id*="image_with_text_overlay_rjkACL"] .subheading,
[id*="image_with_text_overlay_rjkACL"] p {
  color: #fff !important;
}

[id*="image_with_text_overlay_rjkACL"] .button:not(.button--secondary):not(.button--ghost) {
  background: #fff !important;
  color: #000 !important;
}

[id*="image_with_text_overlay_rjkACL"] .button:not(.button--secondary):not(.button--ghost):hover {
  background: rgb(var(--df-pink)) !important;
  color: #fff !important;
}

/* ============================================================
   28. COLLECTION TILES — rounded + tri-color gradient border
   ============================================================ */

.logo-list__item {
  border: 2px solid transparent !important;
  border-radius: 18px !important;
  background:
    linear-gradient(rgb(var(--df-bg)), rgb(var(--df-bg))) padding-box,
    conic-gradient(
      from 0deg,
      rgb(var(--df-teal))  60deg,
      rgb(var(--df-blue)) 180deg,
      rgb(var(--df-pink)) 300deg,
      rgb(var(--df-teal)) 420deg
    ) border-box !important;
  overflow: hidden !important;
}

/* Clip the inner link / figure / image so the corners actually round */
.logo-list__item a,
.logo-list__item figure,
.logo-list__item img {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.logo-list__item {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.logo-list__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(15, 15, 18, 0.10) !important;
}

/* ============================================================
   END OF DRIPFUL OVERRIDES
   ============================================================ */