/** Shopify CDN: Minification failed

Line 159:8 Expected ":"

**/
/* Self-Hosted Fonts */

/* font-display: swap added 2026-04-25 — without it, Chrome defaults to
   `block` and hides ElderGods text for up to 3s on every cold load. The
   collection-hero headline (84-100px ElderGods) is invisible during the
   worst of LCP. `swap` shows fallback (Futura PT / Impact) immediately,
   then snaps to ElderGods when it arrives — small visible flicker, but
   text is readable from first paint. */
@font-face {
  font-family: "ElderGods BB";
  src: url("ElderGodsBB.eot");
  src: url("ElderGodsBB.eot?#iefix") format("embedded-opentype"),
  url("ElderGodsBB.woff2") format("woff2"),
  url("ElderGodsBB.woff") format("woff"),
  url("ElderGodsBB.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ElderGods BB";
  src: url("ElderGodsBB-Italic.eot");
  src: url("ElderGodsBB-Italic.eot?#iefix") format("embedded-opentype"),
  url("ElderGodsBB-Italic.woff2") format("woff2"),
  url("ElderGodsBB-Italic.woff") format("woff"),
  url("ElderGodsBB-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPE SCALE — Phase 2 typography pass 2026-04-26
   ═══════════════════════════════════════════════════════════════════════════
   Four reusable text scales for consistent typography across the site.
   Apply via class on markup, OR mirror the specs in component CSS to keep
   visual hierarchy consistent across breakpoints.

   Color palette (text only): #000 primary, #555 secondary. NO other greys.
   Companion roadmap: FONTS.md (font-family swap inventory).

   Scale guide:
   - DISPLAY  — page-dominant headlines (product title, trust badge headline)
   - BODY     — default copy (description, paragraph, large labels)
   - SECONDARY — muted context (artist credit, captions, attribution)
   - MICRO    — small chips (size pills, tiny labels)
   ─────────────────────────────────────────────────────────────────────── */
.text-display {
  font-family: 'Futura PT', Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: #000;
  letter-spacing: 0;
}
@media screen and (min-width: 750px) {
  .text-display { font-size: 32px; }
}

.text-body {
  font-family: 'Futura PT', Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
}
@media screen and (min-width: 750px) {
  .text-body { font-size: 17px; }
}

.text-secondary {
  font-family: 'Futura PT', Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #555;
}
@media screen and (min-width: 750px) {
  .text-secondary { font-size: 15px; }
}

.text-micro {
  font-family: 'Futura PT', Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #000;
}

/* Homepage background: white (was cream #f6ebd8, owner requested removal) */
body.index-page {
  background-color: #ffffff !important;
  letter-spacing: 0.1px !important;
}

body {
  background-color: white;
}

body.wicked-clothes-gdpr {
  /* background-color: #f6ebd8 !important;
  cursor: url("/cdn/shop/files/heart-cursor-dropshadow.png?17678") 25 25, auto !important; */
}

* {
  /* Standard brand font chain — long form, matches the Phase 2 type scale.
     Was `'Futura', sans-serif` (short chain) — Phase 5 typography pass
     2026-04-27: standardized so every element falls through the SAME chain
     regardless of where it lives. Without this, a font swap requires
     editing dozens of selectors to land consistently.

     NOTE: if Futura PT isn't installed locally and isn't being served via
     @font-face / Adobe Typekit, browsers will fall through to the system
     sans-serif (Segoe UI on Windows, Helvetica on Mac). See FONTS.md for
     the swap roadmap. */
  font-family: 'Futura PT', Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
}

/* #CartPopup */
/* Upcart side-cart  */

#CartPopup .upcart-header .upcart-header-text {
  font-weight: 600;
  font-size: 100% !important;
}

#CartPopup .styles_CartPreview__empty__WFP86 h3 {
  font-weight: 400;
}

/* Upcart side-cart-end  */

/* Wishlist Page  */

.wishlistpage h1 {
  font-weight: bold;
}

.wishlistpage .products .buttons {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 0px;
  margin: 0px 0px;
}

.wishlistpage .products .addbutton {
  margin-bottom: 10px !important;
}

.wishlistpage a.btn.btn-warning.removebutton {
  background-color: #ffffff;
  border none !important;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.wishlistpage a.btn.btn-warning.removebutton:focus {
  background-color: #ffffff;
  border-color: #ffffff;
}

.wishlistpage .product .text h3 {
  font-size: 14px;
  font-weight: 600;
  height: auto;
  text-transform: none;
  letter-spacing: 0.08em;
}

/* ═══ Hide "Sale" badge on product cards ═══
 * Every product is on sale so the badge is meaningless noise covering
 * the product image — the #1 selling asset. "Sold Out" badge (color-inverse) is kept.
 * Sale badge uses color-accent-2, sold out uses color-inverse. */
.price__badge-sale,
.card__badge .badge.color-accent-2 {
  display: none !important;
}

/* ═══ Card Price Overrides ═══
 * These MUST live here in wc-base.css (not component-price.css or
 * component-card.css) because Shopify's CDN aggressively caches
 * Dawn's built-in CSS files. wc-base.css loads after Dawn's CSS
 * in the cascade and reliably applies.
 *
 * Card title uses .h5 = calc(var(--font-heading-scale) * 1.2rem)
 * on mobile, 1.3rem on 750px+. Price must use the same formula
 * so they match exactly. "font-size: inherit" does NOT work here
 * because .price and h3.h5 are siblings — inherit resolves to
 * body text size, not the heading size. */

/* Price: not bold, no extra margin (generic — all contexts) */
.price {
  margin: 0;
}

.price .price-item {
  font-weight: 400;
}

.price--on-sale .price__sale {
  font-weight: 400;
}

/* Card-specific: match .h5 title size exactly */
.card-information .price .price-item,
.card-information .price--on-sale .price-item--regular {
  font-size: calc(var(--font-heading-scale) * 1.2rem) !important;
  font-weight: 400 !important;
}

@media screen and (min-width: 750px) {
  .card-information .price .price-item,
  .card-information .price--on-sale .price-item--regular {
    font-size: calc(var(--font-heading-scale) * 1.3rem) !important;
  }
}

/* Strikethrough compare price: minimal gap, no overhang */
.card-information .price--on-sale .price-item--regular {
  margin-right: 0.15rem !important;
}

/* Tighter vertical spacing around price in cards */
.card-information > .price {
  margin-top: -5px !important;     /* was 0.15rem → 0 → -5px (2026-04-27). Negative pull so the price hugs the artist credit above it. The artist's line-height padding wouldn't budge with line-height tricks; direct negative margin is the deterministic fix. */
}


/* Card info area: tighter padding above and below */
.card__information {
  padding: 0.4rem 0.8rem 0.5rem;
}

@media screen and (min-width: 750px) {
  .card__information {
    padding: 0.4rem 0.8rem 0.5rem;
  }
}

/* ═══ Collection Grid: Edge-to-Edge on Mobile ═══
 * Pull the product grid outward into the container's padding so
 * product images are larger. Design art is the #1 selling factor.
 * Container has padding: 0 1.5rem (24px). Grid gap = 5px.
 * Negative margin = gap - padding = 5px - 24px = -19px per side.
 * This only affects the grid — pagination/filters keep their padding. */
@media screen and (max-width: 749px) {
  ul.product-grid {
    margin-left: calc(var(--grid-mobile-horizontal-spacing) - 1.5rem);
    margin-right: calc(var(--grid-mobile-horizontal-spacing) - 1.5rem);
  }
}

/* ═══ Hero Banner: Tighter spacing on mobile ═══
 * Previously 0.875rem 2rem 0.5rem (14/32/8 px). User wanted 5-10px less
 * above the CTA and below the trust line — now 4/32/2 px. */
@media screen and (max-width: 749px) {
  .banner__box {
    padding: 0.25rem 2rem 0.125rem;
  }
}

/* Hero trust-line ("1,563,403+ shirts sold since 2010") — +2pt mobile,
 * +50% desktop. Bold-ish so it holds against the hero yellow. */
.banner .banner__text {
  font-size: 1.7rem;        /* ~17px mobile, up from body 15px */
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 750px) {
  .banner .banner__text {
    font-size: 2.2rem;      /* ~22px desktop */
  }
}

/* ═══ Homepage Featured Collection: Kill white gap above grid ═══
 * The .collection__title has class .title-wrapper which Dawn styles
 * with margin-bottom:3rem in base.css. Needs !important to override.
 * The ul.grid also has margin-bottom:2rem from base.css. */
[id*="featured_collection"] .title-wrapper {
  margin-bottom: 0 !important;
}
[id*="featured_collection"] .product-grid {
  margin-top: 0;
}

/* ═══ PDP Artist Credit ═══
   Phase 1 typography pass 2026-04-26 — was 18/21px in #888 (3.7:1 contrast,
   fails WCAG AA). Now in the Secondary palette color #555 (5.5:1, AA) — same
   color as the trust badge body + review name.

   2026-04-26 — markup repositioned: artist credit now sits ABOVE the product
   title as an "eyebrow" label (was below). Selector simplified from
   `.product__title + .wc-pdp-artist` (adjacent-sibling) to bare class.

   2026-04-27 — size + weight matched to Fit Assistant link
   (.size-enhanced__tool-btn) per owner request: 16px / weight 600. Keeps
   color at #555 secondary; visually pairs with the size-area's Fit Assistant
   so the eyebrow + that link feel like part of the same UI vocabulary. */
.wc-pdp-artist {
  font-family: 'Futura PT', Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
  font-size: 16px;                /* matches Fit Assistant — no breakpoint bump (Fit Assistant is 16px on both) */
  font-weight: 600;               /* matches Fit Assistant */
  color: #555;
  margin: 0;                      /* tightens to title — gap below now governed entirely by .product__title margin-top from `* + *` (10px) */
  padding: 0;
}

/* When the artist has a matching collection (Himawari Keep, DinoMike), the
 * eyebrow renders as an <a>. Inherit the eyebrow's #555 color and 600 weight
 * so it reads as one continuous label, but keep a subtle underline so mobile
 * users (no hover state) can see it's tappable. Underline darkens on hover
 * for desktop affordance. */
.wc-pdp-artist a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 2px;
}
.wc-pdp-artist a:hover {
  text-decoration-color: currentColor;
}

/* ═══ PDP — kill desktop top whitespace above title ═══
 * The trust-bar-wrapper grid item is display:none on desktop but its
 * markup still occupied a slot. Pull the info column up flush. */
@media screen and (min-width: 990px) {
  .product__info-wrapper {
    padding-top: 0 !important;
    align-self: start;
  }
  .product__info-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .product__info-container > *:first-child,
  .product__info-container > .product__title:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .product__info-container > .product__title > h1,
  .product__info-container > .product__title > .h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Trust-bar-wrapper: leave hidden but ensure it doesn't reserve a row */
  .trust-bar-wrapper {
    display: none !important;
    grid-column: 1 / -1;
    height: 0;
  }
}

/* ═══ PDP: B3G3F badge inline with price ═══ */
.wc-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;
  flex-wrap: wrap;
}
/* Kill the 10px margin-bottom that .product__info-container > * + * adds
 * to the price row, so the .wc-price-subline below it sits flush. Same
 * specificity trick as the subline rule below. */
.product__info-container > .wc-price-row {
  margin-bottom: 0;
}
.wc-b3g3f-badge {
  background: #cc0000;
  color: #fff;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 12px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
/* Secondary line below the price + badge. The badge does the headline
 * savings job ("SAVE 50%"); this line does the per-unit education job
 * ("$16.50/shirt"). Color matched to the badge red (#cc0000) so the deal
 * messaging visually reads as one connected unit instead of two
 * disconnected lines.
 *
 * Selector deliberately prefixed with .product__info-container to beat
 * the same-specificity `.product__info-container > * + *` rule in
 * section-main-product.css (10px margin) — that file loads AFTER this
 * one so a bare `.wc-price-subline` rule was silently overridden. */
.product__info-container > .wc-price-subline {
  font-family: 'Futura PT', Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #cc0000;
  margin: 5px 0 0;
  padding: 0;
}

/* ═══ PDP: Collapsible product description ═══ */
.wc-description-collapse {
  border-top: none;
  padding: 0;
  margin-top: 0;
}
.wc-description-collapse__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 18px;
  font-weight: 700;
  color: #000;                     /* Phase 5 — was inheriting Dawn's body color rgba(18,18,18,0.75); forced to true black per owner request so "Product Description" reads as primary text not muted */
  cursor: pointer;
  list-style: none;
}
.wc-description-collapse__toggle::-webkit-details-marker {
  display: none;
}
.wc-description-collapse__toggle::after {
  content: '+';
  font-size: 27px;
  font-weight: 300;
  line-height: 1;
}
.wc-description-collapse[open] .wc-description-collapse__toggle::after {
  content: '−';
}
.wc-description-collapse .product__description {
  padding-bottom: 12px;
}
.wc-description-collapse {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 4px;
}


/* ═══ Hero Banner: Clean up $99 price styling ═══ */
.banner .wc-hero-price {
  color: #cc0000;
  font-weight: 900;
  font-size: 110%;
}

.wishlistpage p.price {
  font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT CARDS — homepage + collection
   ───────────────────────────────────────────────────────────────────
   - Product name (below image/Quick Add): +2pt mobile, +50% desktop
     on collections, slight bump on homepage.
   - "by Artist": +2pt mobile, +50% desktop on collections, darker.
   - Uses !important to override inline style on card__artist and
     the .h5 size class on card__heading.
   ═══════════════════════════════════════════════════════════════════ */

/* Card title — beats .card__heading.h5 via high specificity + !important
 * NOTE: heading lives inside .card__information (underscore), NOT
 * .card-information (hyphen — that's a sibling div for price/vendor).
 * The hyphen-named selectors are kept for any legacy markup. */
.card__information .card__heading,
.card__information .card__heading.h5,
.card__information h3.card__heading,
.card__information .card__heading a,
.card__information .card__heading .full-unstyled-link,
.card-information .card__heading,
.card-information .card__heading.h5,
.card-information h3.card__heading,
.card-information .card__heading a,
.card-information .card__heading .full-unstyled-link {
  font-size: calc(var(--font-heading-scale) * 1.3rem) !important;   /* −1pt mobile (was 1.4rem) */
  font-weight: 700 !important;
  color: #000 !important;
  letter-spacing: 0.02rem;
  line-height: 1.3 !important;
}
@media screen and (min-width: 750px) {
  .card__information .card__heading,
  .card__information .card__heading.h5,
  .card__information h3.card__heading,
  .card__information .card__heading a,
  .card__information .card__heading .full-unstyled-link,
  .card-information .card__heading,
  .card-information .card__heading.h5,
  .card-information h3.card__heading,
  .card-information .card__heading a,
  .card-information .card__heading .full-unstyled-link {
    font-size: calc(var(--font-heading-scale) * 1.75rem) !important;  /* −2pt desktop (was 1.95rem) */
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Homepage "Shop by vibe" collection-list overrides
   ───────────────────────────────────────────────────────────────────
   1. Title styled to match the FEATURED ARTIST eyebrow style — bold,
      tracked, uppercase — but +100% size (36px mobile / 40px desktop)
      and centered. Beats the inline-richtext h1 default.
   2. Collection card names +50% vs global, centered under image tile.
   Scoped to `body.index-page` so other collection-list usages are
   untouched. Title wrapper also re-centered (Dawn defaults left-align).
   ═══════════════════════════════════════════════════════════════════ */
body.index-page .section-collection-list .title-wrapper-with-link {
  display: block !important;              /* defeat Dawn's flex left-align */
  text-align: center !important;
  margin-top: 0 !important;               /* sits flush against the yellow CTA above */
  margin-bottom: 0 !important;            /* gap to cards lives in padding-bottom below */
  padding-bottom: 20px !important;        /* breathing room under SHOP BY VIBE text */
}
body.index-page .section-collection-list .collection-list-title,
body.index-page .section-collection-list .collection-list-title strong,
body.index-page .section-collection-list .title-wrapper-with-link .collection-list-title {
  font-size: 36px !important;             /* +100% — was 18px */
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #000 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  text-align: center !important;
  margin: 0 !important;                   /* spacing handled on title-wrapper */
}
@media screen and (min-width: 750px) {
  body.index-page .section-collection-list .collection-list-title,
  body.index-page .section-collection-list .collection-list-title strong,
  body.index-page .section-collection-list .title-wrapper-with-link .collection-list-title {
    font-size: 40px !important;           /* +100% — was 20px */
  }
}

/* Collection card names +50% AND centered — only on homepage Shop by vibe.
   Card heading default elsewhere is 1.3rem mobile / 1.75rem desktop;
   here we bump to 1.95rem mobile / 2.625rem desktop and center under tile. */
body.index-page .section-collection-list .card__information,
body.index-page .section-collection-list .card-information {
  text-align: center !important;
}
body.index-page .section-collection-list .card__information .card__heading,
body.index-page .section-collection-list .card__information .card__heading.h5,
body.index-page .section-collection-list .card__information h3.card__heading,
body.index-page .section-collection-list .card__information .card__heading a,
body.index-page .section-collection-list .card__information .card__heading .full-unstyled-link {
  font-size: 16px !important;        /* 1.95rem → 18px → 17px → 16px (2026-04-27). Direct px instead of calc(...rem) because the theme's rem base is 10px (not the usual 16px), so 1.8rem was rendering as 18px instead of the 28.8px the rem math suggests. Direct px = no ambiguity. */
  font-weight: 900 !important;            /* heaviest — collection names should pop */
  text-align: center !important;
  display: block !important;              /* let text-align take effect on inline link */
}
@media screen and (min-width: 750px) {
  body.index-page .section-collection-list .card__information .card__heading,
  body.index-page .section-collection-list .card__information .card__heading.h5,
  body.index-page .section-collection-list .card__information h3.card__heading,
  body.index-page .section-collection-list .card__information .card__heading a,
  body.index-page .section-collection-list .card__information .card__heading .full-unstyled-link {
    font-size: calc(var(--font-heading-scale) * 2.625rem) !important;
  }
}

/* Artist credit — overrides the inline style="font-size:11px; color:#888" */
.card__artist {
  font-size: 13px !important;
  color: #555 !important;           /* was #888 (5.5:1) — now 7:1 on white */
  font-weight: 500 !important;
  margin: 0 !important;             /* was 0 0 3px — 2026-04-27 per owner request: tightened to 0 so artist credit hugs the price line below it on collection / recommended-products cards */
  padding: 0 !important;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 750px) {
  .card__artist {
    font-size: 17px !important;     /* +50% desktop */
  }
}

/* Card price — +2pt mobile / +50% desktop. Colors left to Dawn defaults
 * (sale price red #d0284b, strikethrough compare #8d8d8d). */
.card-information .price .price-item,
.card-information .price--on-sale .price-item--regular {
  font-size: calc(var(--font-heading-scale) * 1.4rem) !important;
  font-weight: 500 !important;
}
@media screen and (min-width: 750px) {
  .card-information .price .price-item,
  .card-information .price--on-sale .price-item--regular {
    font-size: calc(var(--font-heading-scale) * 1.95rem) !important;
  }
}

/* Keep the tighter right margin on the strikethrough; color stays Dawn default */
.card-information .price--on-sale .price-item--regular {
  margin-right: 0.2rem !important;
}

/* ═══ PDP product description — +2pt ═══
   Phase 1 typography pass 2026-04-26 — added explicit font-family + !important
   on font-family + font-weight to defeat any inline <font face="..."> or
   style="font-family:..." set in the rich-text editor. Without this,
   description content was falling through to system sans-serif (Arial /
   Helvetica) on some loads, while everything else stayed on Futura PT —
   making the description look like a different brand than the rest of the
   PDP. Color #000 declared explicitly so it doesn't inherit a parent grey. */
.product__info-container .product__description,
.product__info-container .product__description p,
.product__info-container .product__description span,
.product__info-container .product__description li,
.wc-description-collapse .product__description,
.wc-description-collapse .product__description p,
.wc-description-collapse .product__description span,
.wc-description-collapse .product__description li {
  font-family: 'Futura PT', Futura, 'Century Gothic', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px;                /* +2pt over body 15px */
  line-height: 1.55;
  color: #000;
}