/* Values in this file come from Quickbutik's theme editor. */
html body.jf-shop {
  --jf-editor-blue: #1689d8;
  --jf-editor-yellow: #ffd21c;
  --jf-editor-red: #e3262e;
  --jf-editor-page: #fffbeb;
  --jf-editor-trust-bg: #e3262e;
  --jf-editor-trust-text: #ffffff;
  --jf-editor-footer-bg: #252525;
  --jf-editor-footer-text: #ffd21c;
  --jf-editor-border: #141414;

  --jf-blue: var(--jf-editor-blue);
  --jf-pop-blue: var(--jf-editor-blue);
  --jf-card-blue: var(--jf-editor-blue);
  --jf-product-blue: var(--jf-editor-blue);
  --jf-yellow: var(--jf-editor-yellow);
  --jf-pop-yellow: var(--jf-editor-yellow);
  --jf-card-yellow: var(--jf-editor-yellow);
  --jf-product-yellow: var(--jf-editor-yellow);
  --jf-red: var(--jf-editor-red);
  --jf-pop-red: var(--jf-editor-red);
  --jf-card-red: var(--jf-editor-red);
  --jf-product-red: var(--jf-editor-red);
  --jf-black: var(--jf-editor-border);
  --jf-cream: var(--jf-editor-page);

  background-color: var(--jf-editor-page) !important;
  font-family: var(--jf-body-font-family);
}

html body.jf-shop :is(h1, h2, h3, h4, h5, h6, .font-heading, .jf-footer-v2__wordmark) {
  font-family: var(--jf-heading-font-family) !important;
}

/* Header */
html body.jf-shop #jf-site-header.jf-header,
html body.jf-shop.jf-home-v3 #jf-site-header.jf-header {
  background: var(--jf-editor-blue) !important;
  background-color: var(--jf-editor-blue) !important;
  border-bottom: 2px solid var(--jf-editor-border) !important;
  box-shadow: 0 4px 0 var(--jf-editor-yellow), 0 6px 0 var(--jf-editor-border) !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body.jf-shop #jf-site-header.jf-header.jf-header-edge-visible {
  background: var(--jf-editor-blue) !important;
  background-color: var(--jf-editor-blue) !important;
  border-bottom: 2px solid var(--jf-editor-border) !important;
  box-shadow: 0 4px 0 var(--jf-editor-yellow), 0 6px 0 var(--jf-editor-border) !important;
}

html body.jf-shop #jf-site-header .jf-header-brand > .font-heading {
  color: var(--jf-editor-yellow) !important;
  -webkit-text-fill-color: var(--jf-editor-yellow) !important;
  -webkit-text-stroke-color: var(--jf-editor-border) !important;
  text-shadow: 3px 3px 0 var(--jf-editor-border) !important;
}

html body.jf-shop #jf-site-header .jf-header-action:not(:disabled):not([aria-disabled="true"]) {
  color: var(--jf-editor-border) !important;
  background: var(--jf-editor-yellow) !important;
  border-color: var(--jf-editor-border) !important;
  box-shadow: 4px 4px 0 var(--jf-editor-border) !important;
}

/* One header appearance on every page and at every scroll position. */
html body.jf-shop #jf-site-header > header {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 28px;
  box-sizing: border-box;
}

html body.jf-shop #jf-site-header > header > nav > .jf-header-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 88px !important;
  padding-block: 0 !important;
  gap: 24px;
}

html body.jf-shop #jf-site-header .jf-header-brand {
  min-width: 0;
  justify-self: start;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html body.jf-shop #jf-site-header .jf-header-brand > .font-heading,
html body.jf-shop #jf-site-header .jf-header-brand > img {
  width: auto !important;
  height: 56px !important;
  max-height: 56px !important;
  padding-block: 4px !important;
  box-sizing: border-box;
}

html body.jf-shop #jf-site-header .jf-header-brand > .font-heading {
  font-size: 46px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  white-space: nowrap;
}

html body.jf-shop #jf-site-header .jf-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  gap: 12px !important;
}

html body.jf-shop #jf-site-header .jf-header-actions > :is(a, button):not(:disabled):not([aria-disabled="true"]),
html body.jf-shop #jf-site-header .jf-nav-button {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  flex: 0 0 48px !important;
  place-items: center;
  padding: 0 !important;
  color: var(--jf-editor-border) !important;
  background: var(--jf-editor-yellow) !important;
  border: 2px solid var(--jf-editor-border) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--jf-editor-border) !important;
  line-height: 44px !important;
  text-align: center;
}

html body.jf-shop #jf-site-header .jf-header-actions > :is(a, button) svg {
  display: inline-block;
  width: 26px !important;
  height: 26px !important;
  margin: auto;
  color: currentColor !important;
  stroke: currentColor !important;
  vertical-align: middle;
}

html body.jf-shop #jf-site-header .jf-header-action .jf-cart-icon circle {
  fill: currentColor !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.jf-shop #jf-site-header .jf-header-actions > :is(a, button):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
  html body.jf-shop #jf-site-header .jf-nav-button:is(:hover, :focus-visible) {
    color: var(--jf-editor-border) !important;
    background: var(--jf-editor-yellow) !important;
  }
}

@media (max-width: 767px) {
  html body.jf-shop #jf-site-header > header {
    padding-inline: 12px;
  }

  html body.jf-shop #jf-site-header > header > nav > .jf-header-layout {
    min-height: 76px !important;
    gap: 10px;
  }

  html body.jf-shop #jf-site-header .jf-header-brand > .font-heading,
  html body.jf-shop #jf-site-header .jf-header-brand > img {
    height: 48px !important;
    max-height: 48px !important;
    padding-block: 3px !important;
  }

  html body.jf-shop #jf-site-header .jf-header-brand > .font-heading {
    font-size: clamp(29px, 9vw, 36px) !important;
  }

  html body.jf-shop #jf-site-header .jf-header-actions {
    gap: 8px !important;
  }

  html body.jf-shop #jf-site-header .jf-header-actions > :is(a, button):not(:disabled):not([aria-disabled="true"]) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }
}

@media (max-width: 359px) {
  html body.jf-shop #jf-site-header > header {
    padding-inline: 8px;
  }

  html body.jf-shop #jf-site-header .jf-header-brand > .font-heading {
    font-size: 27px !important;
  }

  html body.jf-shop #jf-site-header .jf-header-actions {
    gap: 7px !important;
  }

  html body.jf-shop #jf-site-header .jf-header-actions > :is(a, button):not(:disabled):not([aria-disabled="true"]) {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex-basis: 42px !important;
  }
}

/* Start page hero and reassurance banner */
html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-hero {
  background: var(--jf-editor-blue) !important;
  border-color: var(--jf-editor-border) !important;
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-intro h1 {
  color: var(--jf-editor-yellow) !important;
  -webkit-text-fill-color: var(--jf-editor-yellow) !important;
  -webkit-text-stroke-color: var(--jf-editor-border) !important;
  text-shadow: 1px 1px 0 var(--jf-editor-border), 2px 2px 0 var(--jf-editor-border),
    3px 3px 0 var(--jf-editor-border), 4px 4px 0 var(--jf-editor-border),
    5px 5px 0 var(--jf-editor-border) !important;
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefits {
  color: var(--jf-editor-trust-text) !important;
  background: var(--jf-editor-trust-bg) !important;
  border-color: var(--jf-editor-border) !important;
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefit {
  color: var(--jf-editor-trust-text) !important;
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefit > svg {
  color: var(--jf-editor-border) !important;
  background: var(--jf-editor-yellow) !important;
  border-color: var(--jf-editor-border) !important;
}

/* Equal, compact geometry for the two reassurance messages. */
html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefits-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(calc(100% - 32px), 720px);
  min-height: 42px;
  margin-inline: auto;
  padding: 5px 0;
  gap: clamp(24px, 6vw, 72px);
  box-sizing: border-box;
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefit {
  display: grid;
  grid-template-columns: 26px max-content;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  gap: 11px;
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefit > svg {
  width: 26px;
  height: 26px;
  padding: 4px;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  box-sizing: border-box;
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefit strong {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 520px) {
  html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefits-inner {
    width: calc(100% - 20px);
    min-height: 40px;
    padding-block: 4px;
    gap: 10px;
  }

  html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefit {
    grid-template-columns: 23px max-content;
    gap: 7px;
  }

  html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefit > svg {
    width: 23px;
    height: 23px;
    padding: 3px;
  }

  html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-benefit strong {
    font-size: clamp(10px, 3vw, 12px);
  }
}

/* Cart icons inherit the contrast colour of the surface they sit on. */
html body.jf-shop .jf-product-page .jf-product-purchase .qs-cart-submit .jf-cart-icon,
html body.jf-shop .jf-mobile-buybar-button .jf-cart-icon {
  color: #fff !important;
  stroke: currentColor !important;
}

html body.jf-shop .jf-product-page .jf-product-purchase .qs-cart-submit .jf-cart-icon circle,
html body.jf-shop .jf-mobile-buybar-button .jf-cart-icon circle {
  fill: currentColor !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.jf-shop .jf-product-page .jf-product-purchase .qs-cart-submit:not(:disabled):is(:hover, :focus-visible) .jf-cart-icon,
  html body.jf-shop .jf-mobile-buybar-button:not(:disabled):is(:hover, :focus-visible) .jf-cart-icon {
    color: var(--jf-editor-border) !important;
  }
}

/* Product cards and selected filters */
html body.jf-shop.jf-home-v3 #jf-storefront .jf-merch-card {
  --jf-card-panel: var(--jf-editor-blue);
  border-color: var(--jf-editor-border) !important;
  box-shadow: 5px 5px 0 var(--jf-editor-border) !important;
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-merch-card:nth-child(3n + 2) {
  --jf-card-panel: var(--jf-editor-red);
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-merch-card:nth-child(3n) {
  --jf-card-panel: var(--jf-editor-yellow);
}

html body.jf-shop.jf-home-v3 #jf-storefront .jf-store-filters .jf-control[aria-pressed="true"] {
  background: var(--jf-editor-blue) !important;
  border-color: var(--jf-editor-border) !important;
}

/* Footer */
html body.jf-shop .jf-footer-v2 {
  color: var(--jf-editor-footer-text);
  background: var(--jf-editor-footer-bg);
  border-top-color: var(--jf-editor-border);
  box-shadow: 0 -4px 0 var(--jf-editor-yellow), 0 -6px 0 var(--jf-editor-border);
}

html body.jf-shop .jf-footer-v2 :is(
  .jf-footer-v2__wordmark,
  .jf-footer-v2__eyebrow,
  .jf-footer-v2__intro,
  .jf-footer-v2__nav h2,
  .jf-footer-v2__nav a,
  .jf-footer-v2__bottom
) {
  color: var(--jf-editor-footer-text);
  -webkit-text-fill-color: var(--jf-editor-footer-text);
}

html body.jf-shop .jf-footer-v2__wordmark,
html body.jf-shop .jf-footer-v2__nav h2 {
  -webkit-text-stroke-color: var(--jf-editor-border);
  text-shadow: 2px 2px 0 var(--jf-editor-border);
}

html body.jf-shop .jf-footer-v2__nav {
  border-color: color-mix(in srgb, var(--jf-editor-footer-text) 30%, transparent);
}

@media (min-width: 768px) and (max-width: 1024px) {
  html body.jf-shop #jf-site-header .jf-header-brand > .font-heading {
    font-family: var(--jf-heading-font-family) !important;
    font-weight: 400 !important;
    -webkit-text-stroke: 2px var(--jf-editor-border) !important;
    paint-order: stroke fill;
    text-shadow: 1px 1px 0 var(--jf-editor-border),
      2px 2px 0 var(--jf-editor-border),
      3px 3px 0 var(--jf-editor-border),
      4px 4px 0 var(--jf-editor-border),
      5px 5px 0 var(--jf-editor-border) !important;
  }
}

/* The mobile wordmarks use the hero's outline and five-step shadow. */
@media (max-width: 767px) {
  html body.jf-shop #jf-site-header .jf-header-brand > .font-heading,
  html body.jf-shop .jf-footer-v2__wordmark {
    -webkit-text-stroke: 2px var(--jf-editor-border) !important;
    paint-order: stroke fill;
    text-shadow: 1px 1px 0 var(--jf-editor-border),
      2px 2px 0 var(--jf-editor-border),
      3px 3px 0 var(--jf-editor-border),
      4px 4px 0 var(--jf-editor-border),
      5px 5px 0 var(--jf-editor-border) !important;
  }

  html body.jf-shop #jf-site-header .jf-header-brand > .font-heading {
    color: var(--jf-editor-yellow) !important;
    -webkit-text-fill-color: var(--jf-editor-yellow) !important;
  }

  html body.jf-shop .jf-footer-v2__wordmark {
    color: var(--jf-editor-footer-text) !important;
    -webkit-text-fill-color: var(--jf-editor-footer-text) !important;
  }
}