/** Shopify CDN: Minification failed

Line 5260:22 Unexpected "{"
Line 5260:31 Expected ":"
Line 5260:38 Unexpected "{"
Line 5267:22 Unexpected "{"
Line 5267:31 Expected ":"
Line 5293:22 Unexpected "{"
Line 5293:31 Expected ":"
Line 5293:38 Unexpected "{"
Line 5412:7 Expected identifier but found whitespace
Line 5412:8 Unexpected "2px"
... and 8 more hidden warnings

**/
:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}



/* Navigation ligesom LETZKICK */
.header__inline-menu a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important; /* Ekstra fed */
  font-size: 14px !important;
  text-transform: uppercase !important;
  color: black !important;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  padding: 8px 14px;
  display: inline-block;
}




/* Logo hover-effekt – "Nordic Sneaker Store" springer lidt ud ved mouseover */
.header__heading-link {
  transition: transform 0.3s ease;
}

.header__heading-link:hover {
  transform: scale(1.08);
}


/* ============================== */
/* LETZKICK-STYLE: Header Ikoner  */
/* ============================== */

/* Skjul land/valuta i header */
.localization-form {
  display: none !important;
}

/* Kurv: sort badge med tal */
.header__icon--cart {
  position: relative;
}





/* Fuld bredde på tværs af sitet (desktop) */
@media screen and (min-width: 990px) {
  /* Global container */
  .page-width,
  .page-width-desktop,
  .header.page-width,
  .utility-bar__grid.page-width {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important; /* justér til 16–32px efter smag */
  }

  /* Sektioner der selv sætter max-width */
  .content-container,
  .rte-width {
    max-width: 100% !important;
  }
}

/* Header wrapper uden kunstig begrænsning */
.header-wrapper,
.header-wrapper .header {
  width: 100% !important;
}

/* Tving “full bleed” på de mest stædige sektioner */
.section,
.shopify-section,
.index-section,
.slideshow,
.image-banner,
.collection-list,
.product-grid {
  max-width: 100% !important;
  width: 100% !important;
}

/* Lidt mindre side-padding på desktop, ellers føles kanten sløv */
@media screen and (min-width: 1200px) {
  .page-width,
  .page-width-desktop { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Strammere produkt-grid gaps på store skærme */
@media screen and (min-width: 1200px) {
  :root {
    --grid-desktop-horizontal-spacing: 18px;
    --grid-desktop-vertical-spacing: 24px;
  }
}

/* Nulstil auto-centrering på tværs */
.page-width, .page-width-desktop, .content-container, .rte-width {
  margin-left: auto !important; margin-right: auto !important; /* behold centrering men ingen max-width */
}









/* ===== Kontaktformular - Clean Letzkick Style ===== */

/* Selve boksen */
.contact-form {
  max-width: 600px;
  margin: 40px auto;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Overskrift */
.contact-form h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: left;
}

.contact-form p {
  font-size: 16px;
  color: #444;
  margin-bottom: 30px;
}

/* Labels over felter */
.contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #222;
}

/* Input & textarea */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background: #f9f9f9;
  transition: border 0.2s ease, background 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #000;
  background: #fff;
  outline: none;
}

/* Textarea */
.contact-form textarea {
  resize: none;
  min-height: 120px;
}

/* Send-knap */
.contact-form button {
  display: inline-block;
  background: #000;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.contact-form button:hover {
  background: #333;
}









/* ===== Kontakt side styling ===== */

.contact-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contact-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

.contact-header p {
  font-size: 16px;
  color: #444;
  line-height: 1.5;
}

/* Formular styling */
.contact-form form {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background: #f9f9f9;
  transition: border 0.2s ease, background 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #000;
  background: #fff;
  outline: none;
}

/* To kolonner (navn + mail) */
.contact-form .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Knap */
.contact-form button {
  display: inline-block;
  background: #000;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.contact-form button:hover {
  background: #333;
}











/* ===== Kontakt side styling ===== */

.contact-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contact-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

.contact-header p {
  font-size: 16px;
  color: #444;
  line-height: 1.6;
}

/* Formular */
.custom-contact-form {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.custom-contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.custom-contact-form input,
.custom-contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background: #f9f9f9;
  transition: border 0.2s ease, background 0.2s ease;
}

.custom-contact-form input:focus,
.custom-contact-form textarea:focus {
  border-color: #000;
  background: #fff;
  outline: none;
}

/* To kolonner (navn + mail) */
.custom-contact-form .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Knappen */
.custom-contact-form button {
  display: inline-block;
  background: #000;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.custom-contact-form button:hover {
  background: #333;
}

/* Succes- og fejlmeddelelser */
.form-success {
  color: green;
  margin-bottom: 20px;
}
.form-error {
  color: red;
  margin-bottom: 20px;
}


/* Succes besked */
.form-success {
  background: #e6f9ed;
  border: 1px solid #34a853;
  color: #19692c;
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ✔️ ikon */
.form-success .checkmark {
  font-size: 20px;
}

/* Fejlbesked */
.form-error {
  background: #fdecea;
  border: 1px solid #d93025;
  color: #a50e0e;
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.form-error .error-icon {
  font-size: 20px;
}


/* Fjern overskrift "Kontakt" */
.template-contact .main-page-title {
  display: none !important;
}

/* Succes-besked efter indsendelse */
.contact .form-status {
  background: #f0fff4;
  border: 1px solid #38a169;
  color: #2f855a;
  padding: 18px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  margin-bottom: 25px;
}
.contact .form-status svg {
  display: none; /* Fjern ikon hvis du vil have helt clean */
}

/* Inputfelter clean style */
.contact .field__input {
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fafafa;
  transition: border 0.2s ease, background 0.2s ease;
}
.contact .field__input:focus {
  border-color: #000;
  background: #fff;
}

/* Overskrift + brødtekst styling */
.contact .title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}
.contact .contact-text {
  text-align: center;
  font-size: 16px;
  color: #555;
  margin-bottom: 40px;
}



/* Styling af succes-besked på kontaktformular */
.contact .form-status.form-status-list.form__message {
  background: #e8fdf3;
  border: 1px solid #38a169;
  color: #22543d;
  padding: 25px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
  margin: 0 auto 30px auto;
  max-width: 600px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Første linje mere markant */
.contact .form-status.form-status-list.form__message strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Grøn check ikon centreres pænt */
.contact .form-status.form-status-list.form__message svg {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}




/* Pris større + fed */
.price-item,
.price-item--regular,
.price {
  font-weight: 700 !important;
  font-size: 18px !important;
}



/* ===== Nordic Sneaker Store – bredt layout uden slideshow-kanter ===== */
:root{
  /* Skru op/ned for hvor langt ud tingene går */
  --site-max: 1720px;   /* prøv 1680–1800 for endnu bredere */
  --site-pad: 8px;      /* indvendig side-padding på indhold */
}

html, body { overflow-x: hidden; }

/* 1) Header/announcement: fuld bredde og tættere mod venstre */
.announcement-bar,
.header-wrapper,
.header {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 8px !important;   /* tæt på venstre kant */
  padding-right: 8px !important;
}
.header .page-width,
.header .container,
.header .content-container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Alt almindeligt indhold – bred container (rykker længere ud) */
.shopify-section{
  box-sizing: border-box;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
}

/* Fang tema-wrappers så de følger samme bredde */
.page-width,
.container,
.content-container,
.section-template,
.section-padding,
.section--padding,
.section-header,
.product-grid,
.collection,
.collection-list,
.featured-collection,
.multicolumn,
.rich-text {
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--site-pad) !important;
  padding-right: var(--site-pad) !important;
  box-sizing: border-box;
}

/* 3) Slideshow/Banner – 100% kant-til-kant (ingen hvide kanter) */
/* Viktigt: denne blok SKAL stå efter reglerne ovenfor. */
.shopify-section.slideshow,
.shopify-section.image-banner,
.shopify-section.banner,
.shopify-section.hero {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;      /* fjern side-padding */
  border: 0 !important;
}

.slideshow,
.image-banner,
.banner,
.hero {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fjern indre page-width/padding inde i slides */
.shopify-section.slideshow .page-width,
.shopify-section.slideshow .content-container,
.shopify-section.image-banner .page-width,
.shopify-section.image-banner .content-container,
.banner .page-width,
.banner .content-container,
.hero .page-width,
.hero .content-container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Sikr at billederne faktisk fylder hele bredden */
.slideshow img,
.image-banner img,
.banner img,
.hero img {
  display: block;
  width: 100% !important;
  height: auto;
}

/* Mobil: lidt ekstra luft så det ikke klistrer */
@media (max-width: 749px){
  :root{ --site-pad: 12px; }
}






/* Slideshow/banner: fjern kanter, afrunding og indre padding */
.shopify-section.slideshow,
.shopify-section.image-banner,
.shopify-section.banner,
.shopify-section.hero,
.slideshow,
.image-banner,
.banner,
.hero,
.slideshow .slideshow__slide,
.slideshow .slideshow__media,
.slideshow .media,
.slideshow .banner__media,
.image-banner .banner__media,
.banner .banner__media,
.hero .banner__media {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Sørg for at selve billedet fylder hele bredden og ikke efterlader “glimt” */
.slideshow img,
.image-banner img,
.banner img,
.hero img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Hvis temaet stadig sætter en indvendig “page-width” i banneret, nulstil den også */
.slideshow [class*="page-width"],
.image-banner [class*="page-width"],
.banner [class*="page-width"],
.hero [class*="page-width"] {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* NØDLØSNING: tving fuld bleed hvis temaet gemmer padding et sted */
.slideshow,
.image-banner,
.banner,
.hero {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
html, body { overflow-x: hidden; } /* undgå vandret scroll ved 100vw */




/* Full-bleed fix – fyld HELT ud i begge sider kun for slideshow/hero */
@media (min-width: 990px){
  .shopify-section.slideshow,
  .shopify-section.image-banner,
  .shopify-section.banner,
  .shopify-section.hero{
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;  /* bleed venstre */
    margin-right: calc(50% - 50vw) !important; /* bleed højre  */
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .slideshow,
  .image-banner,
  .banner,
  .hero{
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Nulstil skjulte wrappers som kan give sidepadding */
  .slideshow .page-width,
  .image-banner .page-width,
  .banner .page-width,
  .hero .page-width,
  .slideshow .content-container,
  .image-banner .content-container,
  .banner .content-container,
  .hero .content-container{
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* undgå horisontal scroll når vi bruger 100vw-bleed */
html, body { overflow-x: hidden; }


/* ==== SLIDESHOW FULL-BLEED, BEGGE SIDER – NO GAPS ==== */
html, body { margin: 0 !important; padding: 0 !important; overflow-x: hidden; }

/* Nulstil ALT omkring banner/slideshow */
.shopify-section.slideshow,
.shopify-section.image-banner,
.shopify-section.banner,
.shopify-section.hero,
.slideshow,
.image-banner,
.banner,
.hero,
.slideshow .slideshow__wrapper,
.slideshow .slideshow__slide,
.slideshow .slideshow__media,
.banner .banner__media,
.image-banner .banner__media {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Ægte bleed: fyld hele viewportens bredde præcist */
@media (min-width: 990px){
  .shopify-section.slideshow,
  .shopify-section.image-banner,
  .shopify-section.banner,
  .shopify-section.hero,
  .slideshow,
  .image-banner,
  .banner,
  .hero {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;   /* venstre kant */
    margin-right: -50vw !important;   /* højre kant */
  }
}

/* Billederne må ikke efterlade 1px glimt */
.slideshow img,
.image-banner img,
.banner img,
.hero img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Hvis temaet putter en .page-width/.content-container inde i slides, slå det fra */
.slideshow [class*="page-width"],
.image-banner [class*="page-width"],
.banner [class*="page-width"],
.hero [class*="page-width"],
.slideshow .content-container,
.image-banner .content-container,
.banner .content-container,
.hero .content-container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ===== Header: ens størrelse på ikoner, tyndere outline, centreret søg ===== */
:root{
  --ink: #000;              /* farve på streger/kant */
  --icon-size: 24px;        /* samme størrelse til person + kurv */
  --icon-stroke: 1.8px;     /* ens stregtykkelse til begge ikoner */
  --search-h: 44px;         /* højde på søgefelt */
  --search-pad-x: 16px;     /* vandret padding i input */
  --search-border: 2px;     /* tykkelsen på kanten rundt om søg */
}

/* = Ikoner: samme størrelse + samme stroke = */
.header__icons a svg,
.header__icons button svg,
.header__icons .icon,
.header__icons .icon-account,
.header__icons .icon-cart,
.header__icons .icon-bag{
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
}

.header__icons svg [stroke]{
  stroke-width: var(--icon-stroke) !important;
  stroke: currentColor !important;
}
.header__icons, .header__icons a, .header__icons button{ color: var(--ink) !important; }

/* Hvis kurv stadig ser mindre ud pga. viewBox, giv den 1px ekstra (valgfrit) */
/* .header__icons .icon-cart, .header__icons .icon-bag{ width: 25px !important; height: 25px !important; } */

/* = Søg: én kant, tekst 100% centreret vertikalt = */
.header__search .field{
  border: var(--search-border) solid var(--ink) !important;
  border-radius: 9999px !important;
  height: var(--search-h) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* fjern temaets pseudo-kanter som giver dobbelt outline */
.header__search .field:before,
.header__search .field:after{ content: none !important; display: none !important; }

/* input uden egen kant; line-height = højde for perfekt centrering */
.header__search .field__input{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  height: calc(var(--search-h) - 2px) !important;
  line-height: calc(var(--search-h) - 2px) !important;
  padding: 0 var(--search-pad-x) !important;
  border-radius: 9999px !important;
}
.header__search .field__input::placeholder{ line-height: inherit !important; }


/* Kurv = samme størrelse/tykkelse som person + lidt tykkere søge-kant */
:root{
  --cart-size: 25px;        /* justér 24–26px hvis den stadig virker mindre */
  --cart-stroke: 1.8px;     /* samme outline som personen */
  --search-border-w-bump: 2.5px; /* var ~2px – nu lidt tykkere */
}

/* Kurv-ikon: størrelse */
.header__icons .icon-cart,
.header__icons .icon-bag,
.header__icons a[href*="/cart"] svg,
.header__icons a[href*="cart"] svg,
.header__icons a[href*="checkout"] svg {
  width: var(--cart-size) !important;
  height: var(--cart-size) !important;
}

/* Kurv-ikon: stroke-tykkelse */
.header__icons .icon-cart [stroke],
.header__icons .icon-bag [stroke],
.header__icons a[href*="/cart"] svg [stroke],
.header__icons a[href*="cart"] svg [stroke],
.header__icons a[href*="checkout"] svg [stroke]{
  stroke-width: var(--cart-stroke) !important;
  stroke: currentColor !important;
}

/* Søg-felt: en smule tykkere kant (ingen dobbeltkant) */
.header__search .field{
  border-width: var(--search-border-w-bump) !important;
}


/* ===== Kurv = samme størrelse/tykkelse som person + lidt tykkere søge-kant ===== */
:root{
  --cart-size: 24px;        /* øg til 25–26px hvis du vil en my større */
  --cart-stroke: 1.6px;     /* visuel tykkelse på kurvens outline */
  --search-border-w-bump: 2.4px; /* søgefelt-kant en anelse tykkere */
}

/* 1) Find kurv-ikonet på tværs af temaer og giv ens STØRRELSE */
.header__icons .header__icon--cart svg,
#cart-icon-bubble svg,
.header__icons a[href*="/cart"] svg,
.header__icons a[href*="cart"] svg,
.header__icons a[href*="checkout"] svg {
  width: var(--cart-size) !important;
  height: var(--cart-size) !important;
}

/* 2) Giv kurven ens OUTLINE, uanset om SVG'en bruger <path>, <use> eller fill  */
.header__icons .header__icon--cart svg,
#cart-icon-bubble svg,
.header__icons a[href*="/cart"] svg,
.header__icons a[href*="cart"] svg,
.header__icons a[href*="checkout"] svg {
  color: currentColor !important;
}
.header__icons .header__icon--cart svg *,
#cart-icon-bubble svg *,
.header__icons a[href*="/cart"] svg *,
.header__icons a[href*="cart"] svg *,
.header__icons a[href*="checkout"] svg * {
  stroke: currentColor !important;
  stroke-width: var(--cart-stroke) !important;
  fill: none !important; /* slår “fyldte” versioner fra, så outline matcher personen */
}
/* hvis SVG'en er defineret som <use>, så giv stroke direkte på use også */
.header__icons .header__icon--cart svg use,
#cart-icon-bubble svg use,
.header__icons a[href*="/cart"] svg use,
.header__icons a[href*="cart"] svg use { 
  stroke: currentColor !important;
  stroke-width: var(--cart-stroke) !important;
  fill: none !important;
}

/* 3) Søgefelt-kant en my tykkere for at matche ikonernes vægt */
.header__search .field { border-width: var(--search-border-w-bump) !important; }



/* ===== Header: ens størrelse på ikoner, tyndere outline, centreret søg ===== */
:root{
  --ink: #000;              /* farve på streger/kant */
  --icon-size: 25px;        /* samme størrelse til person + kurv */
  --icon-stroke: 1.8px;     /* ens stregtykkelse til begge ikoner */
  --search-h: 44px;         /* højde på søgefelt */
  --search-pad-x: 16px;     /* vandret padding i input */
  --search-border: 2px;     /* tykkelsen på kanten rundt om søg */
}

/* = Ikoner: samme størrelse + samme stroke = */
.header__icons a svg,
.header__icons button svg,
.header__icons .icon,
.header__icons .icon-account,
.header__icons .icon-cart,
.header__icons .icon-bag{
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
}

.header__icons svg [stroke]{
  stroke-width: var(--icon-stroke) !important;
  stroke: currentColor !important;
}
.header__icons, .header__icons a, .header__icons button{ color: var(--ink) !important; }

/* Hvis kurv stadig ser mindre ud pga. viewBox, giv den 1px ekstra (valgfrit) */
/* .header__icons .icon-cart, .header__icons .icon-bag{ width: 25px !important; height: 25px !important; } */

/* = Søg: én kant, tekst 100% centreret vertikalt = */
.header__search .field{
  border: var(--search-border) solid var(--ink) !important;
  border-radius: 9999px !important;
  height: var(--search-h) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* fjern temaets pseudo-kanter som giver dobbelt outline */
.header__search .field:before,
.header__search .field:after{ content: none !important; display: none !important; }

/* input uden egen kant; line-height = højde for perfekt centrering */
.header__search .field__input{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  height: calc(var(--search-h) - 2px) !important;
  line-height: calc(var(--search-h) - 2px) !important;
  padding: 0 var(--search-pad-x) !important;
  border-radius: 9999px !important;
}
.header__search .field__input::placeholder{ line-height: inherit !important; }


/* Kurv = samme størrelse/tykkelse som person + lidt tykkere søge-kant */
:root{
  --cart-size: 26px;        /* justér 24–26px hvis den stadig virker mindre */
  --cart-stroke: 1.6px;     /* samme outline som personen */
  --search-border-w-bump: 2.5px; /* var ~2px – nu lidt tykkere */
}

/* Kurv-ikon: størrelse */
.header__icons .icon-cart,
.header__icons .icon-bag,
.header__icons a[href*="/cart"] svg,
.header__icons a[href*="cart"] svg,
.header__icons a[href*="checkout"] svg {
  width: var(--cart-size) !important;
  height: var(--cart-size) !important;
}

/* Kurv-ikon: stroke-tykkelse */
.header__icons .icon-cart [stroke],
.header__icons .icon-bag [stroke],
.header__icons a[href*="/cart"] svg [stroke],
.header__icons a[href*="cart"] svg [stroke],
.header__icons a[href*="checkout"] svg [stroke]{
  stroke-width: var(--cart-stroke) !important;
  stroke: currentColor !important;
}

/* Søg-felt: en smule tykkere kant (ingen dobbeltkant) */
.header__search .field{
  border-width: var(--search-border-w-bump) !important;
}


/* ===== Kurv = samme størrelse/tykkelse som person + lidt tykkere søge-kant ===== */
:root{
  --cart-size: 24px;        /* øg til 25–26px hvis du vil en my større */
  --cart-stroke: 1.8px;     /* visuel tykkelse på kurvens outline */
  --search-border-w-bump: 2.4px; /* søgefelt-kant en anelse tykkere */
}

/* 1) Find kurv-ikonet på tværs af temaer og giv ens STØRRELSE */
.header__icons .header__icon--cart svg,
#cart-icon-bubble svg,
.header__icons a[href*="/cart"] svg,
.header__icons a[href*="cart"] svg,
.header__icons a[href*="checkout"] svg {
  width: var(--cart-size) !important;
  height: var(--cart-size) !important;
}

/* 2) Giv kurven ens OUTLINE, uanset om SVG'en bruger <path>, <use> eller fill  */
.header__icons .header__icon--cart svg,
#cart-icon-bubble svg,
.header__icons a[href*="/cart"] svg,
.header__icons a[href*="cart"] svg,
.header__icons a[href*="checkout"] svg {
  color: currentColor !important;
}
.header__icons .header__icon--cart svg *,
#cart-icon-bubble svg *,
.header__icons a[href*="/cart"] svg *,
.header__icons a[href*="cart"] svg *,
.header__icons a[href*="checkout"] svg * {
  stroke: currentColor !important;
  stroke-width: var(--cart-stroke) !important;
  fill: none !important; /* slår “fyldte” versioner fra, så outline matcher personen */
}
/* hvis SVG'en er defineret som <use>, så giv stroke direkte på use også */
.header__icons .header__icon--cart svg use,
#cart-icon-bubble svg use,
.header__icons a[href*="/cart"] svg use,
.header__icons a[href*="cart"] svg use { 
  stroke: currentColor !important;
  stroke-width: var(--cart-stroke) !important;
  fill: none !important;
}

/* 3) Søgefelt-kant en my tykkere for at matche ikonernes vægt */
.header__search .field { border-width: var(--search-border-w-bump) !important; }



/* ===== Nordic Sneaker Store – Header: fix kurv + søg (ren version) ===== */
:root{
  /* Søg-felt */
  --search-height: 40px;
  --search-pad-x: 16px;
  --search-border-w: 3.0px;   /* lidt tykkere kant */

  /* Kurv-ikon (match person) */
  --cart-size: 25px;          /* hæv til 25–26px hvis den stadig ser mindre ud */
  --cart-stroke: 1.5px;       /* samme outline-tykkelse som personen */
  --cart-scale: 1.10;         /* kompensér for “luft” i viewBox (1.00–1.12) */
  --header-ink: #000;
}

/* ============== SØGEFELT ============== */
.header__search .field{
  border: var(--search-border-w) solid var(--header-ink) !important;
  border-radius: 9999px !important;
  height: var(--search-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.header__search .field:before,
.header__search .field:after{ content: none !important; display: none !important; }

.header__search .field__input{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  height: calc(var(--search-height) - 2px) !important;
  line-height: calc(var(--search-height) - 2px) !important;
  padding: 0 var(--search-pad-x) !important;
  border-radius: 9999px !important;
}

/* ============== KURV-IKON (kun kurven, personen røres ikke) ============== */
/* 1) Gør SELVE kurv-containeren lige så stor som personen */
.header__icons .header__icon--cart,
#cart-icon-bubble,
.header__icons a[href*="/cart"]{
  width: var(--cart-size) !important;
  height: var(--cart-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--header-ink) !important;
}

/* 2) Lad SVG’en fylde containeren og boost lidt hvis der er “luft” */
.header__icons .header__icon--cart svg,
#cart-icon-bubble svg,
.header__icons a[href*="/cart"] svg{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(var(--cart-scale));
  transform-origin: center center;
}

/* 3) Ens outline på kurven uanset SVG-type */
.header__icons .header__icon--cart svg *,
#cart-icon-bubble svg *,
.header__icons a[href*="/cart"] svg *{
  stroke: currentColor !important;
  stroke-width: var(--cart-stroke) !important;
  fill: none !important;  /* drop fyldte versioner for at matche personen */
}


/* Fine-tuning kun for kurv */
:root{
  --cart-size: 37px;     /* var 24px – gør selve kurven større */
  --cart-scale: 1.14;    /* var 1.10 – kompensér for indvendig luft */
  --cart-stroke: 0.8px;  /* samme outline-tykkelse som personen */
}

/* Sikrer at overrides tager effekt */
.header__icons .header__icon--cart,
#cart-icon-bubble,
.header__icons a[href*="/cart"]{
  width: var(--cart-size) !important;
  height: var(--cart-size) !important;
}

.header__icons .header__icon--cart svg,
#cart-icon-bubble svg,
.header__icons a[href*="/cart"] svg{
  width: 100% !important;
  height: 100% !important;
  transform: scale(var(--cart-scale)) !important;
  transform-origin: center center !important;
}

.header__icons .header__icon--cart svg *,
#cart-icon-bubble svg *,
.header__icons a[href*="/cart"] svg *{
  stroke-width: var(--cart-stroke) !important;
  stroke: currentColor !important;
  fill: none !important;
}










/* ===== Unified header-bounce (samme for person + kurv) ===== */
:root{
  --icon-bounce-scale: 1.12;      /* slutstørrelse efter bounce (1.08–1.16) */
  --icon-bounce-duration: 320ms;  /* hvor hurtigt (280–360ms) */
}

/* 0) Slå temaets eksisterende hover-transforme/animationer fra på PERSON */
.header__icons .header__icon--account:hover svg,
.header__icons .header__icon--account:focus-visible svg{
  animation: none !important;
  transform: none !important;
}

/* 1) Vi animerer CONTAINEREN for begge ikoner (ikke svg’en) */
.header__icons .header__icon--account,
.header__icons .header__icon--cart,
#cart-icon-bubble,
.header__icons .icon-cart,
.header__icons .icon-bag,
.header__icons a[href*="/cart"]{
  transform-origin: center center !important;
  will-change: transform;
}

/* 2) Samme keyframes til begge */
@keyframes header-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  65%  { transform: scale(0.94); }
  100% { transform: scale(var(--icon-bounce-scale)); }
}

/* 3) Trigger på hover + keyboard-fokus for BEGGE ikoner */
.header__icons .header__icon--account:hover,
.header__icons .header__icon--account:focus-visible,
.header__icons .header__icon--cart:hover,
.header__icons .header__icon--cart:focus-visible,
#cart-icon-bubble:hover,
#cart-icon-bubble:focus-visible,
.header__icons .icon-cart:hover,
.header__icons .icon-cart:focus-visible,
.header__icons .icon-bag:hover,
.header__icons .icon-bag:focus-visible,
.header__icons a[href*="/cart"]:hover,
.header__icons a[href*="/cart"]:focus-visible{
  animation: header-bounce var(--icon-bounce-duration) ease-out both;
}

/* 4) Respektér brugere der ikke vil have animationer */
@media (prefers-reduced-motion: reduce){
  .header__icons .header__icon--account:hover,
  .header__icons .header__icon--account:focus-visible,
  .header__icons .header__icon--cart:hover,
  .header__icons .header__icon--cart:focus-visible,
  #cart-icon-bubble:hover,
  #cart-icon-bubble:focus-visible,
  .header__icons .icon-cart:hover,
  .header__icons .icon-cart:focus-visible,
  .header__icons .icon-bag:hover,
  .header__icons .icon-bag:focus-visible,
  .header__icons a[href*="/cart"]:hover,
  .header__icons a[href*="/cart"]:focus-visible{
    animation: none !important;
    transform: scale(var(--icon-bounce-scale)) !important;
  }
}





/* ===== AmiKicks – Button Fix Pack (REPLACE ALL YOUR CUSTOM CSS WITH THIS) ===== */
:root{
  --btn-radius: 12px;
  --btn-hover-scale: 1.015;
  --btn-active-scale: 0.985;
}

/* ---------- 1) PRODUKTSIDE: LÆG I INDKØBSKURV (ikke sticky) ---------- */
.product-form:not(.product-form--sticky) .product-form__submit,
.product-form:not(.product-form--sticky) button[name="add"]{
  display:block !important;
  width:100% !important;
  background:#000 !important;
  color:#fff !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:var(--btn-radius) !important;
  padding:14px 20px !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  transition:transform .12s cubic-bezier(.2,.7,.3,1), background-color .2s ease !important;
  will-change:transform;
}
.product-form:not(.product-form--sticky) .product-form__submit:hover,
.product-form:not(.product-form--sticky) button[name="add"]:hover{
  transform:translateY(-1px) scale(var(--btn-hover-scale));
}
.product-form:not(.product-form--sticky) .product-form__submit:active,
.product-form:not(.product-form--sticky) button[name="add"]:active{
  transform:translateY(0) scale(var(--btn-active-scale));
}
.product-form:not(.product-form--sticky) .product-form__submit,
.product-form:not(.product-form--sticky) .product-form__submit::before,
.product-form:not(.product-form--sticky) .product-form__submit::after{
  border:0 !important; outline:0 !important; box-shadow:none !important;
}
/* ===== STICKY ATC — HARD RESET (flush left, full width, no shift) ===== */
.onhow-sticky,
#onhow-sticky,
.onhow-sticky-bar,
#onhow-sticky-bar,
.onhow_atc_sticky,
.product-sticky-bar,
#sticky-add-to-cart,
.cart-bar,
.sticky-atc {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;

  /* Critical: use 100%, not 100vw (vw causes right shift when scrollbar exists) */
  width: 100% !important;
  max-width: 100% !important;

  /* Kill any full-bleed tricks that could push it horizontally */
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  inset-inline: 0 !important;
  transform: none !important;
  translate: none !important;

  /* Make sure padding doesn’t create a fake left gap */
  padding-left: 0 !important;
  padding-right: 0 !important;

  box-sizing: border-box !important;
  z-index: 9998 !important;
  overflow-x: hidden !important;
}

/* If the sticky bar has an inner/container, keep it inside the viewport grid */
.onhow-sticky .inner,
.onhow-sticky .onhow-container,
.onhow-sticky-bar .inner,
#sticky-add-to-cart .inner,
.product-sticky-bar .inner,
.cart-bar .inner,
.sticky-atc .inner {
  max-width: var(--page-width, 1200px) !important;
  margin: 0 auto !important;
  padding-left: var(--site-pad, 8px) !important;
  padding-right: var(--site-pad, 8px) !important;
  box-sizing: border-box !important;
}

/* Neutralize any old bounce/scale that can nudge layout */
.onhow-sticky button[name="add"],
.onhow-sticky-bar button[name="add"],
#sticky-add-to-cart button[name="add"],
.product-sticky-bar button[name="add"],
.cart-bar button[name="add"],
.sticky-atc button[name="add"] {
  transform: none !important;
  transition: background-color .2s ease !important;
  border-radius: 12px !important;
}
.onhow-sticky button[name="add"]:hover,
.onhow-sticky button[name="add"]:active,
.onhow-sticky-bar button[name="add"]:hover,
.onhow-sticky-bar button[name="add"]:active,
#sticky-add-to-cart button[name="add"]:hover,
#sticky-add-to-cart button[name="add"]:active,
.product-sticky-bar button[name="add"]:hover,
.product-sticky-bar button[name="add"]:active,
.cart-bar button[name="add"]:hover,
.cart-bar button[name="add"]:active,
.sticky-atc button[name="add"]:hover,
.sticky-atc button[name="add"]:active {
  transform: none !important;
}

/* Last guard against horizontal scroll from anything else */
html, body { overflow-x: hidden !important; }


/* ===== Fix OnHOW Sticky alignment ===== */
.onhow-sticky {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Fjern "page-width" auto margins i sticky, så den ikke hopper højre */
.onhow-sticky .page-width {
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 12px !important;   /* lille luft – justér hvis du vil */
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

/* Sørg for at inner-grid ikke overskrider viewport */
.onhow-sticky .page-width-inner {
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}


/* ===== OnHOW Sticky button fix: lad være med at strække ud af viewport ===== */
.onhow-sticky .product-form button[name="add"] {
  max-width: 100% !important;
  width: auto !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}










/* === Overskrift (produktnavn) – LetzKick style === */
body.template-product h1.product__title,
body.template-product h1.product-single__title,
body.template-product .product__title,
body.template-product .product-single__title {
  font-size: 42px !important;       /* stor tekst */
  font-weight: 900 !important;      /* ekstra fed */
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
  color: #000 !important;
  letter-spacing: -0.3px !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  text-transform: none !important;  /* ingen auto uppercase */
}


/* === Pris === */
.product__price, 
.product-single__price, 
.price, 
.price-item {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 20px;
  display: block;
  color: #000 !important;
}

/* === Størrelsesknapper (LetzKick style) === */
.product-form__input--pill input[type="radio"] + label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
  padding: 12px 20px !important;
  margin: 6px 6px 6px 0 !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  background: #f7f7f7 !important;
  border: none !important;
  color: #000 !important;
  min-width: 56px !important;
  min-height: 44px !important;
  text-align: center !important;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.product-form__input--pill input[type="radio"] + label:hover {
  background: #ebebeb !important;
}

.product-form__input--pill input[type="radio"]:checked + label {
  background: #000 !important;
  color: #fff !important;
}

/* === Sektionstitel: STØRRELSE === */
.product-form__input legend {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 20px 0 12px 0 !important;
  display: block;
  color: #000 !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  padding-bottom: 6px !important;
  width: 100% !important;
}

/* === Fjern ANTAL på produktsiden, men behold i kurven === */
body.template-product .product-form__input--quantity,
body.template-product label[for^="Quantity"],
body.template-product .quantity__label,
body.template-product .quantity,
body.template-product .quantity * {
  display: none !important;
}

/* === Divider under størrelser === */
.product-form__input--pill:last-of-type {
  border-bottom: 1px solid #e5e5e5 !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

/* === Tilføj til kurv knap === */
.product-form__submit {
  width: 100%;
  background: #000 !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  padding: 14px;
  border-radius: 6px;
  margin-top: 20px;
  text-transform: uppercase;
}

/* Fjern 'Køb med Shop' knap */
.shopify-payment-button {
  display: none !important;
}

/* === KURV: Vis antal igen === */
body.template-cart .cart__qty,
body.template-cart .cart__qty-input,
body.template-cart .quantity,
body.template-cart .quantity__input,
body.template-cart .quantity__button,
body.template-cart input[name^="updates"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
}

body.template-cart .cart__qty-input {
  max-width: 80px !important;
  padding: 8px 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  background: #fff !important;
}

/* === Sticky bar: Titel + pris i én linje === */
.sticky-cart .product__title,
.sticky-cart .price {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.sticky-cart .product-info-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important; /* lille afstand mellem titel og pris */
}

.sticky-cart .product__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000 !important;
  letter-spacing: -0.2px;
  flex-shrink: 1; /* gør så titlen kan tilpasse sig */
}

.sticky-cart .price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #000 !important;
  white-space: nowrap !important; /* prisen bryder aldrig linjen */
}

/* === Sticky bar: Justér pris mindre end titel === */
.sticky-cart .product__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000 !important;
  letter-spacing: -0.2px;
  margin: 0 !important;
}

.sticky-cart .price {
  font-size: 13px !important;   /* mindre end titel */
  font-weight: 600 !important;  /* lidt fed, men ikke dominerende */
  color: #000 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* === Sticky bar titel og pris === */
.onhow-sticky-title {
  font-size: 16px !important;   /* mindre end produkt-siden */
  font-weight: 600 !important;  /* semibold */
  line-height: 1.3 !important;
  margin: 0 !important;
  color: #000 !important;
}

.onhow-sticky-price {
  font-size: 14px !important;   /* lidt mindre end titlen */
  font-weight: 700 !important;  /* fed */
  margin-left: 6px !important;  /* fjern kæmpe mellemrum */
  color: #000 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* === Sticky bar: Titel + pris i samme linje === */
.onhow-sticky .onhow-product-content {
  display: flex;
  align-items: center;
  gap: 8px; /* lille afstand mellem billede og tekstblok */
}

.onhow-sticky .onhow-product-content .product__title {
  font-size: 14px !important;
  font-weight: 600 !important; /* semibold */
  line-height: 1.3 !important;
  margin: 0 !important;
  color: #000 !important;
  display: inline-block !important;
}

.onhow-sticky #price-{{ section.id }} {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: baseline !important;
}

.onhow-sticky #price-{{ section.id }} .price {
  font-size: 13px !important;  /* mindre end titel */
  font-weight: 500 !important; /* let fed */
  color: #000 !important;
  margin-left: 6px !important; /* tættere på titlen */
  display: inline-block !important;
  vertical-align: baseline !important;
}

/* === Sticky bar: titel + pris på samme linje === */
.onhow-sticky .onhow-product-content > div {
  display: flex !important;
  align-items: baseline !important; /* titel og pris justeres på teksten */
  gap: 6px !important; /* lille afstand mellem titel og pris */
}

/* Titel */
.onhow-sticky .product__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #000 !important;
  white-space: nowrap !important; /* undgå linjeskift */
}

/* Pris */
.onhow-sticky #price-{{ section.id }} {
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #000 !important;
  white-space: nowrap !important; /* prisen bryder aldrig linjen */
}

/* Sticky bar: titel og pris side om side */
.onhow-sticky-title-price {
  display: flex;
  align-items: baseline; /* så pris følger linjen med titlen */
  gap: 6px;
  flex-wrap: nowrap;
}

.onhow-sticky-title-price .desktop-title {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
}

.onhow-sticky-title-price .onhow-sticky-price {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}

/* Produkt-side: fjern linjen over første felt (variant/"Størrelse") */
.template-product .product__info-container .product-form__input:first-of-type{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 12px; /* justér afstand efter behov */
}

/* Hvis der stadig ses en svag linje (pseudo-element) */
.template-product .product__info-container .product-form__input:first-of-type::before{
  display: none !important;
}

/* Fix featured collection slider: altid 4 produkter på desktop */
.slider--desktop .slider__slide {
  flex: 0 0 24% !important;   /* præcis 25% bredde */
  max-width: 25% !important;
}
.slider--desktop .slider__slide:last-child {
  margin-right: 0 !important;
}












.product-form__quantity label {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 20px 0 12px 0 !important;
  display: block !important;
  color: #000 !important;
  letter-spacing: 0.5px !important;
}

.product-form__quantity {
  display: none !important;
}
.accordion__title {
  font-weight: 900 !important;   /* gør teksten fed */
  text-transform: uppercase !important; /* matcher stil med “Størrelse” */
  letter-spacing: 0.25px !important;     /* hvis du vil have lidt luft mellem bogstaverne */
}












.slider-button svg {
  width: 22px;
  height: 22px;
  stroke: #000;              /* sort */
  transition: transform 0.2s ease;
}

.slider-button:hover svg {
  transform: scale(1.2);
}



.collection__view-all a.button {
  border-radius: 20px;   /* gør den rundere */
  padding: 10px 26px;    /* lidt mere luft inde i knappen */
  font-weight: 700;      /* lidt mere fed skrift */
}

.collection__view-all a.button {
  border-radius: 12px;      /* eller det tal du synes passer */
  border: none !important;  /* fjern den grimme default kant */
  outline: none !important; /* fjern evt. fokusramme */
  padding: 10px 24px;
  font-weight: 600;
}

border: 2px solid #000;     /* eksempel med sort kant */
border-radius: 12px;


.collection__view-all {
  background: transparent !important; /* fjerner hvid/grå baggrund fra wrapper */
}

.collection__view-all a.button {
  border-radius: 12px;       /* dine runde hjørner */
  border: none !important;   /* ingen kant */
  outline: none !important;  /* ingen default focus outline */
  background-color: #000;    /* sort baggrund */
  color: #fff;               /* hvid tekst */
  display: inline-block;     /* sikrer at container ikke tegner baggrund */
}
.collection__view-all a.button::before,
.collection__view-all a.button::after {
  display: none !important;
}

.collection__view-all a.button {
  display: inline-flex;          /* gør knappen til flex container */
  align-items: center;           /* centrer lodret */
  justify-content: center;       /* centrer vandret */
  border-radius: 12px;
  border: none !important;
  outline: none !important;
  background-color: #000;
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;            /* jævn luft rundt om teksten */
  text-align: center;
}









.collection__title {
  display: flex;
  justify-content: space-between; /* titel til venstre, knap til højre */
  align-items: center;
}

.collection__view-all {
  margin: 0; /* fjern unødvendig margin */
}











.price-item--sale {
  color: #d32f2f !important;   /* klar rød */
  font-weight: 700;            /* gør prisen tydelig */
}

.price-item--regular {
  color: #777;                 /* afdæmpet grå til den gennemstregede pris */
}







/* Gør pilene større og tydeligere */
.slider-button svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.5;   /* tykkere linjer */
}

/* Hold pilene centreret omkring counteren */
.slider-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px; /* afstand mellem pil og tal */
}

/* Gør tælleren (1/3) mere fed og tydelig */
.slider-counter {
  font-weight: 700;
  font-size: 16px;
  color: #000;
}




/* Fælles styling */
.price-item {
  font-size: 18px !important;
  font-weight: 700;
}

/* Ny pris (udsalg) */
.price-item--sale,
.price-item--last {
  color: #d32f2f !important;
  font-weight: 700;
  text-decoration: none !important; /* den nye pris må ikke få streg */
}

/* Førpris (kun når der findes en ny pris ved siden af) */
.price-item--regular + .price-item--sale,
.price-item--regular + .price-item--last,
.price__compare {
  color: #777 !important;
  text-decoration: line-through !important;
}






/* Pris direkte under titel, venstrestillet */
.product__title{ margin-bottom:0 !important; }

.product__info-container .ami-price__inner{
  display:block !important;
  margin:6px 0 0 0 !important;
  padding:0 !important;
  text-align:left !important;
  float:none !important;
}

/* Skjul temaets standardpris, bevar vores indsatte */
.product__info-container .price:not(.ami-price__inner){
  display:none !important;
}








/* AmiKicks — OnHOW: pris + 'Spar xx kr.' på samme linje */
.product__info-container .onhow-horizontal-layout{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.product__info-container .onhow-horizontal-layout .onhow-price-element{
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

.product__info-container .onhow-horizontal-layout .onhow-savings-badge{
  display: inline-block !important;
  margin-left: 8px !important;
  vertical-align: baseline !important;
}
.product__info-container .ami-price__inner .price__badges{ display:none !important; }

/* Skjul den ekstra pris vi indsatte under titlen */
.product__info-container .ami-price__inner{
  display: none !important;
}





/* AmiKicks — større pris i OnHOW-blokken */
.product__info-container .onhow-horizontal-layout .price .price-item--sale{
  font-size: 22px !important;   /* hæv fra ~18px */
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.product__info-container .onhow-horizontal-layout .price .price-item--regular{
  font-size: 16px !important;   /* gennemstreget førpris mindre */
  opacity: .9;
}

/* lille spacing mellem sorteret pris og badge */
.product__info-container .onhow-horizontal-layout .price .price-item{
  margin-right: 8px !important;
}




{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

.header__icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform !important;
  transform: translateY(0) !important;
  border-radius: 8px !important;
}

.header__icon:hover,
.header__icon:focus {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
}

.header__icon--cart .cart-count-bubble {
  transition: transform 0.3s ease !important;
  transform-origin: center !important;
}

.header__icon--cart:hover .cart-count-bubble,
.header__icon--cart:focus .cart-count-bubble {
  transform: scale(1.1) !important;
}

.header__icon .svg-wrapper {
  transition: transform 0.3s ease !important;
}

.header__icon:hover .svg-wrapper,
.header__icon:focus .svg-wrapper {
  transform: scale(1.1) !important;
}

.search__button {
  transition: transform 0.3s ease !important;
}

.search__button:hover,
.search__button:focus {
  transform: translateY(-4px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .header__icon,
  .header__icon:hover,
  .header__icon:focus,
  .header__icon--cart .cart-count-bubble,
  .header__icon .svg-wrapper,
  .search__button {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}


/* Designed by OnHOW YouTube Channel - Anas El Medlaoui */

.facets__summary,
.facets__summary *,
.mobile-facets__summary,
.mobile-facets__summary *,
.facets__summary-label,
.facets__summary span,
.mobile-facets__summary span {
  text-decoration: none !important;
}

.facets__summary:hover,
.facets__summary:hover *,
.mobile-facets__summary:hover,
.mobile-facets__summary:hover *,
.facets__summary:focus,
.facets__summary:focus *,
.mobile-facets__summary:focus,
.mobile-facets__summary:focus * {
  text-decoration: none !important;
}





/* AMIKICKS — vis pris på ALLE produkter (uden Liquid i CSS) */

/* Sørg for at hele prisblokken kan vises */
.product__info-container [id^="price-"],
.product__info-container [id^="price-"] .price,
.product__info-container [id^="price-"] .price__container{
  display:block !important;
  visibility:visible !important;
}

/* 1) Produkter UDEN udsalg: vis regular, skjul sale/badges */
.product__info-container [id^="price-"] .price:not(.price--on-sale) .price__regular{
  display:block !important;
  visibility:visible !important;
}
.product__info-container [id^="price-"] .price:not(.price--on-sale) .price__sale,
.product__info-container [id^="price-"] .price:not(.price--on-sale) .price__badges,
.product__info-container [id^="price-"] .price:not(.price--on-sale) .badge{
  display:none !important;
}

/* 2) Produkter MED udsalg: skjul regular for at undgå dobbelt pris */
.product__info-container [id^="price-"] .price.price--on-sale .price__regular{
  display:none !important;
}

/* Din placering/typografi kan blive som før */
.product__title{ margin-bottom:0 !important; }
.product__info-container .ami-price__inner{
  display:block; margin:6px 0 0 0; padding:0; text-align:left; float:none;
}

/* Ryd gamle “skjul pris”-eksperimenter, også inline style fra apps */
.product__info-container [id^="price-"] .price [style*="display:none"]{ display:block !important; }




/* AMIKICKS — pris direkte under overskriften, helt til venstre */

/* Nulstil alle venstre-indryk på prisblokken */
.product__info-container [id^="price-"],
.product__info-container [id^="price-"] > *,
.product__info-container [id^="price-"] .price,
.product__info-container [id^="price-"] .price__container{
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  float: none !important;
}

/* Hvis din “onhow-horizontal-layout” blander sig, neutralisér den */
.product__info-container .onhow-horizontal-layout{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Behold top-spacing og typografien vi satte tidligere */
.product__title{ margin-bottom:0 !important; }
.product__info-container .ami-price__inner{
  display:block; margin:6px 0 0 0; padding:0; text-align:left; float:none;
}

/* AMIKICKS — lidt større pris på produktsiden */
.product__info-container .ami-price__inner .price-item{
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

/* Når der er udsalg, må salgsprisen godt være en anelse større */
.product__info-container .ami-price__inner .price-item--sale{
  font-size: 24px !important;
}

/* Mobil: en tand ned så det ikke råber */
@media (max-width: 749px){
  .product__info-container .ami-price__inner .price-item{ font-size: 19px !important; }
  .product__info-container .ami-price__inner .price-item--sale{ font-size: 21px !important; }
}

/* Badge skal ikke hoppe: hold den på linjen med prisen */
.product__info-container .ami-price__inner .badge{
  vertical-align: middle !important;
}


/* AMIKICKS — gør normal pris lige så stor som udsalgsprisen (kun når der IKKE er udsalg) */
.product__info-container .price:not(.price--on-sale) .price__regular .price-item--regular{
  font-size: 24px !important;   /* samme som den røde */
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

/* bonus: fjern evt. mikroskopisk indrykning på normal pris */
.product__info-container .price:not(.price--on-sale) .price__regular .price-item--regular{
  margin: 0 !important;
  padding: 0 !important;
}










/* AmiKicks — gør ATC-knappen fuld bredde og i flugt med størrelseslinjen */
.product__info-container .product-form__buttons {
  max-width: none !important;       /* fjern temaets cap */
  width: 100% !important;           /* brug hele info-kolonnens bredde */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;       /* ingen indryk så den flugter med linjen */
  padding-right: 0 !important;
  display: block !important;        /* ingen centrerende flex/grid */
  justify-content: stretch !important;
}

/* selve knappen skal også fylde wrapperen */
.product__info-container .product-form__buttons .product-form__submit,
.product__info-container .shopify-payment-button {
  width: 100% !important;
  max-width: none !important;
}

/* hvis temaet har grid med “quantity + submit”, så kollaps til én kolonne */
.product__info-container form[action*="/cart/add"] {
  display: block !important;        /* drop grid/gap, gør fuld bredde simpelthen */
  column-gap: 0 !important;
}




/* AmiKicks — gør "Hurtig Levering / Nem Returnering / Sikker Betaling" mere markant */
.product__info-container .onhow-custom-icons-container span.onhow-custom-icons-text,
.onhow-custom-icons-container .onhow-custom-icons .onhow-custom-icons-text {
  font-family: var(--font-heading-family) !important; /* samme familie som overskrifter */
  font-weight: 800 !important;                        /* ekstra fed */
  letter-spacing: 0.3px !important;                   /* lidt mere “brandet” look */
  font-size: 13px !important;                         /* justér til smag: 12–14px */
  text-transform: uppercase !important;               /* fjern hvis du ikke vil have caps */
  color: rgb(var(--color-foreground)) !important;     /* ens farve med resten */
}
  font-family: var(--font-body-family) !important;
  font-weight: 700 !important;
  text-transform: none !important;


  /* AmiKicks — gør ATC-knap tekst knivskarp */
.product__info-container .product-form__submit {
  font-family: var(--font-heading-family) !important; /* samme font som overskrifter */
  font-weight: 800 !important;                        /* tungere = skarpere */
  font-size: 15px !important;                         /* en anelse større for bedre rendering */
  letter-spacing: 0.5px !important;                   /* lidt spacing for at undgå sammentryk */
  text-transform: uppercase !important;               /* matcher brandstil */
  -webkit-font-smoothing: antialiased !important;     /* gør kanter skarpere i Chrome/Safari */
  -moz-osx-font-smoothing: grayscale !important;      /* gør kanter skarpere i Firefox */
}
/* AmiKicks — gør ATC-knap-tekst knivskarp */
.product-form__buttons .product-form__submit span {
  font-family: var(--font-heading-family) !important; /* samme som overskrifter */
  font-weight: 800 !important;                        /* tungere = mere skarp rendering */
  font-size: 15px !important;                         /* lidt større */
  letter-spacing: 0.5px !important;                   /* undgå komprimeret look */
  text-transform: uppercase !important;               /* samme stil som nu */
  
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;      /* tving pixel-perfekt rendering */
  font-variation-settings: "wght" 800 !important;     /* specifikt vægtstyring */
}

/* AmiKicks — gør sko-størrelse tallene federe */
.product-form__input input[type="radio"] + label {
  font-weight: 512 !important;                 /* gør tallene fede */
  font-family: var(--font-heading-family) !important; /* samme font som overskrifter */
  letter-spacing: 0.2px !important;            /* lidt luft, så de ikke ser pressede ud */
  font-size: 16px !important;                  /* bevar samme størrelse, men gør skriften skarpere */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}






.header__submenu.list-menu {
  border-radius: 12px;
  overflow: visible !important;
  box-shadow: 0 6px 20px rgba(var(--color-foreground), 0.1), 
              0 2px 8px rgba(var(--color-foreground), 0.06);
  padding: 8px;
}



/* HERO button -> hvid "pill" som i Nike-billedet */
.banner .banner__buttons .button,
.slideshow .slideshow__buttons .button,
.banner .button.button--primary,
.slideshow .button.button--primary,
.banner .button.button--secondary,
.slideshow .button.button--secondary {
  background-color: #fff !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 9999px !important;     /* pill-form */
  padding: 12px 28px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
}

/* Hover/focus så den ikke skifter tilbage til sort */
.banner .banner__buttons .button:hover,
.slideshow .slideshow__buttons .button:hover,
.banner .button.button--primary:hover,
.slideshow .button.button--primary:hover,
.banner .button.button--secondary:hover,
.slideshow .button.button--secondary:hover {
  opacity: .95 !important;
  transform: translateY(-1px);
}

/* HERO button: mindre afrunding som i billede 2 */
.banner .banner__buttons .button,
.slideshow .slideshow__buttons .button,
.banner .button.button--primary,
.slideshow .button.button--primary,
.banner .button.button--secondary,
.slideshow .button.button--secondary {
  border-radius: 12px !important;   /* prøv 10–14px hvis du vil finjustere */
}
/* HERO button: sort ved hover/focus/active – kun farver ændres */
.banner .banner__buttons .button:hover,
.banner .banner__buttons .button:focus,
.banner .banner__buttons .button:focus-visible,
.banner .banner__buttons .button:active,
.slideshow .slideshow__buttons .button:hover,
.slideshow .slideshow__buttons .button:focus,
.slideshow .slideshow__buttons .button:focus-visible,
.slideshow .slideshow__buttons .button:active {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  opacity: 1 !important;           /* overstyr evt. tidligere hover-opacity */
  transform: none !important;      /* bevar formen, ingen hop */
  box-shadow: none !important;     /* valgfrit: undgå lys kant ved tryk */
}

/* === AmiKicks • Feature/collection slider arrows (Dawn) === */
:root{
  --ami-arrow-size: 44px;
  --ami-arrow-gap: 12px;
  --ami-arrow-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Sørg for, at containeren kan positionere absolutte knapper */
slider-component.slider-component,
.slider-component{
  position: relative !important;
}

/* Wrapper skal ikke sluge klik */
.slider-component .slider-buttons{
  pointer-events: none !important;
}

/* Basis-stil på knapperne (skjult som default) */
.slider-component .slider-buttons .slider-button{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: var(--ami-arrow-size) !important;
  height: var(--ami-arrow-size) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: #fff !important;
  color: #000 !important;                    /* ikoner følger currentColor */
  box-shadow: var(--ami-arrow-shadow) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 9 !important;
  opacity: 0 !important;                     /* skjult til hover */
  transition: opacity .18s ease, background-color .18s ease, color .18s ease !important;
  pointer-events: auto !important;
}

/* Placering venstre/højre */
.slider-component .slider-buttons .slider-button--prev{ left: var(--ami-arrow-gap) !important; }
.slider-component .slider-buttons .slider-button--next{ right: var(--ami-arrow-gap) !important; }

/* Ikonstørrelse og farve (Dawn caret bruger stroke/fill) */
.slider-component .slider-buttons .slider-button svg{
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* Vis pile når man HOVER over slideren (hele rækken med produkter) */
@media (min-width: 990px){
  .slider-component:hover .slider-buttons .slider-button,
  .slider-component:focus-within .slider-buttons .slider-button{
    opacity: 1 !important;
  }
}

/* Hover/focus style på selve knappen */
.slider-component .slider-buttons .slider-button:hover,
.slider-component .slider-buttons .slider-button:focus-visible{
  background: #000 !important;
  color: #fff !important;
  outline: none !important;
}

/* Skjul helt når disabled (start/slut) */
.slider-component .slider-buttons .slider-button[disabled]{
  opacity: 0 !important;
  pointer-events: none !important;
}





/* ===== AmiKicks: Kollektions-overskrift — STOR og FED (variabel + fallback) ===== */

/* Overstyrer Dawn's heading-scale kun på collection hero */
.collection-hero {
  --font-heading-scale: 1.65 !important;  /* skru op for H1 uden at ramme resten af sitet */
}

/* Fallback der tromler alt andet hvis en app/komponent spiller klog */
h1.collection-hero__title {
  font-size: clamp(40px, 5vw, 64px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.3px !important;
  margin: 0 0 10px !important;
  text-transform: uppercase; /* slet denne linje hvis du ikke vil have versaler */
}

/* Teksten under overskriften lidt tydeligere */
.collection-hero__description {
  font-size: clamp(16px, 1.5vw, 18px) !important;
  font-weight: 600 !important;
  max-width: 80ch;
}
/* ===== AmiKicks: Collection H1 — LUFTET variant ===== */
.collection-hero {
  --font-heading-scale: 1.45 !important; /* lidt mindre end før, så det ikke klemmer */
}

h1.collection-hero__title,
.template-collection .collection-hero__title {
  font-size: clamp(38px, 4.4vw, 58px) !important;
  font-weight: 800 !important;             /* ned fra 900 */
  line-height: 1.10 !important;            /* mere vertikal luft */
  letter-spacing: 0.8px !important;        /* mere horisontal luft */
  margin: 0 0 16px !important;
  text-transform: none !important;         /* drop VERSALER */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* underteksten en tand pænere */
.collection-hero__description {
  font-size: clamp(16px, 1.4vw, 18px) !important;
  font-weight: 500 !important;
  max-width: 75ch;
}
/* AmiKicks — luft OVER "Bestsellers" */
#MainContent .collection-hero__text-wrapper{
  padding-top: clamp(18px, 2vw, 36px) !important;
}










/* HERO-subtekst: tving til kridhvid */
.banner .banner__content--middle-center .banner__text,
.banner .banner__content .banner__text,
.banner .banner__text,
.image-banner .banner__text,
.banner__box .banner__text {
  color: #fff !important;
  opacity: 1 !important;
}

/* HERO – behold center-opstilling, flyt HELE blokken en smule mod venstre */
@media (min-width: 990px){
  .banner .banner__content--middle-center{
    justify-content: flex-end !important;        /* stadig højre side */
    padding-right: 0 !important;
  }

  .banner .banner__box{
    text-align: center !important;               /* CENTRER indholdet igen */
    margin-right: clamp(24px, 5vw, 120px) !important;  /* luft til højre */
    transform: translateX(-2.5vw);               /* samlet nudge mod venstre */
    max-width: min(760px, 62vw);
  }

  /* sørg for at alle indre elementer holder sig centreret */
  .banner .banner__heading,
  .banner .banner__text,
  .banner .banner__buttons{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* === AMI sticky header + announcement (hard fix) === */
:root{
  --ami-annbar-h: 0px;   /* udfyldes af JS */
  --ami-header-h: 0px;   /* udfyldes af JS */
}

/* Announcement bar (din OnHOW-marquee eller standard) */
[id^="onhow-marquee-section"],
#shopify-section-announcement-bar,
.announcement-bar-section{
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 1000 !important;
  width: 100%;
}

/* Header */
.header-wrapper{
  position: fixed !important;
  top: var(--ami-annbar-h) !important;  /* lige under announcement */
  left: 0; right: 0;
  z-index: 999 !important;
  width: 100%;
  background: var(--color-background, #fff); /* undgå gennemsigtighed */
  backface-visibility: hidden;
}

/* Skub resten af siden ned med den samlede højde */
#MainContent{
  margin-top: calc(var(--ami-annbar-h) + var(--ami-header-h)) !important;
}

/* === AMI: Header må ALDRIG være gennemsigtig === */

/* Tving hvid baggrund på alle header-varianter */
.shopify-section-header,
.shopify-section-header .header-wrapper,
.shopify-section-header .header,
.header-wrapper,
.header,
header.header {
  background: #fff !important;
  background-color: #fff !important;
  --color-background: 255,255,255 !important;   /* nogle temaer bruger denne */
  --alpha-header-background: 1 !important;      /* Dawn/transparency-kontrol */
}

/* Dræb alle "transparent/overlay" modifiers temaet smider på ved scroll */
.header--transparent,
.header-wrapper--transparent,
.header-wrapper--overlay,
.shopify-section-header-sticky .header--transparent,
.shopify-section-header-sticky .header-wrapper--transparent {
  background: #fff !important;
  background-color: #fff !important;
}

/* Fjern pseudo-overlays/gradienter der skaber gennemsigtighed */
.header::before,
.header::after,
.header-wrapper::before,
.header-wrapper::after {
  content: none !important;
}

/* Sørg for at ikoner/links ikke bliver hvide ovenpå hvid baggrund */
.header svg,
.header .icon,
.header .header__icon,
.header a {
  fill: #000 !important;
  stroke: #000 !important;
  color: #000 !important;
}

/* Søg-feltet skal også være hvidt i headeren */
.header input[type="search"],
.header .search__input {
  background: #fff !important;
}




/* === AMI: Cart popup over sticky header og placeret under bar+header === */

/* Dawn/standard cart notification (lille popup ved ikon) */
.cart-notification,
#cart-notification,
.cart-notification-wrapper,
.cart-notification__container {
  position: fixed !important;
  top: calc(var(--ami-annbar-h) + var(--ami-header-h) + 8px) !important;
  right: clamp(12px, 2vw, 24px) !important;
  z-index: 2001 !important; /* over announcement(1000) + header(999) */
}

/* Hvis du bruger cart drawer i stedet for popup */
.cart-drawer,
.drawer {
  top: calc(var(--ami-annbar-h) + var(--ami-header-h)) !important;
  height: calc(100vh - (var(--ami-annbar-h) + var(--ami-header-h))) !important;
  z-index: 2001 !important;
}

/* Sikr at overlay til drawer også ligger øverst */
.drawer__overlay,
.modal-overlay {
  z-index: 2000 !important;
}









/* Skjul den lille standard-cart-notification for altid */
.cart-notification,
#cart-notification,
.cart-notification-wrapper,
.cart-notification__container {
  display: none !important;
}



/* === AMI Cart Drawer: højre anker, pæn bredde, sticky checkout, mobilvenlig === */

:root { --ami-drawer-w: clamp(380px, 32vw, 560px); }

.cart-drawer, cart-drawer, .drawer, drawer-cart {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: var(--ami-drawer-w) !important;
  height: 100vh !important;
  transform: translateX(0) !important;
  background: #fff !important;
  z-index: 3003 !important;                 /* over alt andet */
  box-shadow: -14px 0 28px rgba(0,0,0,.18);
  border-left: 1px solid rgba(0,0,0,.06);
}

@media (max-width: 768px){
  :root { --ami-drawer-w: 94vw; }          /* næsten fuld bredde på mobil */
}

.cart-drawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer .drawer__inner{
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  padding: 0 !important;
}

/* Min LetzKick-style top: titel + sort strip + progress (hvis du har den) */
.ami-cart-head{ position: sticky; top: 0; z-index: 2; background:#fff; border-bottom:1px solid rgba(0,0,0,.08); }
.ami-cart-title{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; font-weight:800; font-size:16px; letter-spacing:.2px; }
.ami-cart-close{ appearance:none; border:1px solid rgba(0,0,0,.28); background:#fff; border-radius:10px; width:36px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ami-cart-strip{ background:#000; color:#fff; text-align:center; padding:8px 12px; font-size:13px; font-weight:700; }
.ami-freebar{ padding:10px 16px 14px; background:#fff; }
.ami-freebar-track{ height:6px; background:#eee; border-radius:999px; overflow:hidden; }
.ami-freebar-fill{ height:100%; width:0%; background:#111; transition:width .3s ease; }
.ami-freebar-labels{ display:flex; justify-content:space-between; margin-top:6px; font-size:12px; color:#555; }

.ami-cart-body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px 140px !important;      /* bundluft så footer aldrig dækker indhold */
}

/* Sticky checkout i bunden – altid synlig og klikbar */
.cart-drawer .cart__footer,
cart-drawer .cart__footer,
.drawer .cart__footer,
.cart-drawer .cart__ctas,
cart-drawer .cart__ctas,
.drawer .cart__ctas{
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  padding: 12px 16px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  z-index: 4 !important;
}

.cart-drawer .cart__ctas [name="checkout"],
.cart-drawer .cart__ctas .cart__checkout-button,
cart-drawer .cart__ctas [name="checkout"],
.drawer .cart__ctas [name="checkout"]{
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* Vores egen overlay – dækker alt */
#ami-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.58);
  z-index: 3002; display: none;
}

/* Lås baggrunds-scroll når skuffen er åben */
html.ami-drawer-open, body.ami-drawer-open{ overflow: hidden !important; }

/* === AMI DRAWER: fuld højde, fuld højrekant, over ALT === */

/* Brug en fornuftig bredde (desktop/mobil) */
:root { --ami-drawer-w: clamp(380px, 32vw, 560px); }

@media (max-width: 768px){
  :root { --ami-drawer-w: 94vw; }   /* mobil: næsten fuld bredde */
}

/* Selve skuffen */
.cart-drawer, cart-drawer, .drawer, drawer-cart {
  position: fixed !important;
  top: 0 !important;
  right: max(0px, env(safe-area-inset-right)) !important; /* ingen notch-gap */
  left: auto !important;
  bottom: 0 !important;
  width: var(--ami-drawer-w) !important;
  height: 100vh !important;
  transform: translateX(0) !important;
  background: #fff !important;
  z-index: 999999 !important;                 /* over alt cirkus */
  box-shadow: -14px 0 28px rgba(0,0,0,.18);
  border-left: 1px solid rgba(0,0,0,.06);
}

/* Vores overlay dækker HELE viewporten, inkl. sticky bars */
#ami-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.58) !important;
  z-index: 999998 !important;                 /* lige under panelet */
  display: none;
}

/* Indre container: fuld højde og ingen indsnævring */
.cart-drawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer .drawer__inner{
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  padding: 0 !important;
}

/* Dræb temaets "page-width" indsnævring/padding inde i drawer */
.cart-drawer .page-width,
cart-drawer .page-width,
.drawer .page-width,
.cart-drawer .page-width--narrow,
.drawer .page-width--narrow{
  max-width: none !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Selve body-området må gerne scrolle og have bundluft til footer */
.ami-cart-body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px 140px !important;
}

/* Sticky checkout i bunden, altid synlig og klikbar */
.cart-drawer .cart__footer,
cart-drawer .cart__footer,
.drawer .cart__footer,
.cart-drawer .cart__ctas,
cart-drawer .cart__ctas,
.drawer .cart__ctas{
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  padding: 12px 16px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  z-index: 4 !important;
}

.cart-drawer .cart__ctas [name="checkout"],
.cart-drawer .cart__ctas .cart__checkout-button,
cart-drawer .cart__ctas [name="checkout"],
.drawer .cart__ctas [name="checkout"]{
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* Lås baggrund når åben */
html.ami-drawer-open, body.ami-drawer-open{ overflow: hidden !important; }










/* === AMI Drawer: udfyld hele højrekanten + fast checkout-knap === */

/* Brug samme bredde som før */
:root { --ami-drawer-w: clamp(380px, 32vw, 560px); }
@media (max-width: 768px){ :root { --ami-drawer-w: 94vw; } }

/* Skuffen forankret i højre side, fuld højde, over alt */
.cart-drawer, cart-drawer, .drawer, drawer-cart{
  position: fixed !important;
  top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
  width: var(--ami-drawer-w) !important; height: 100vh !important;
  transform: translateX(0) !important;
  background:#fff !important; z-index: 999999 !important;
  box-shadow: -14px 0 28px rgba(0,0,0,.18);
  border-left: 1px solid rgba(0,0,0,.06);
}

/* Indre container skal fylde HELE bredden – ingen “page-width” klem */
.cart-drawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer .drawer__inner{
  display:flex !important; flex-direction:column !important;
  height:100vh !important; max-height:100vh !important; padding:0 !important;
}

/* Dræb temaets indre margin/gap og brug 16px side-padding i stedet */
.cart-drawer .drawer__content,
cart-drawer .drawer__content,
.drawer .drawer__content,
.cart-drawer .drawer__contents,
.drawer .drawer__contents,
.cart-drawer .page-width,
cart-drawer .page-width,
.drawer .page-width,
.cart-drawer .page-width--narrow,
.drawer .page-width--narrow{
  max-width:none !important; width:100% !important; margin:0 !important;
  padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important;
}

/* Selve scrolldelen (din vareliste) */
.ami-cart-body{
  flex:1 1 auto !important; overflow:auto !important; -webkit-overflow-scrolling:touch;
  /* reserver plads til den faste checkout i bunden */
  padding:10px 16px 120px !important;
}

/* Fikseret checkout i bunden – altid synlig */
:root { --ami-cta-h: 72px; } /* højde på knap-område */
.cart-drawer .cart__footer,
cart-drawer .cart__footer,
.drawer .cart__footer,
.cart-drawer .cart__ctas,
cart-drawer .cart__ctas,
.drawer .cart__ctas{
  position: fixed !important;
  right: 0 !important; bottom: 0 !important;
  width: var(--ami-drawer-w) !important;
  background:#fff !important; z-index: 100 !important;
  border-top:1px solid rgba(0,0,0,.08) !important;
  padding:12px 16px !important;
}

/* Selve knappen */
.cart-drawer .cart__ctas [name="checkout"],
.cart-drawer .cart__ctas .cart__checkout-button,
cart-drawer .cart__footer [name="checkout"],
.drawer .cart__ctas [name="checkout"]{
  display:block !important; width:100% !important; height:var(--ami-cta-h) !important;
  font-weight:800 !important; letter-spacing:.2px;
}

/* Overlay dækker ALT (du har allerede #ami-overlay fra før) */
#ami-overlay{ position:fixed !important; inset:0 !important; background:rgba(0,0,0,.58) !important; z-index:999998 !important; }
html.ami-drawer-open, body.ami-drawer-open{ overflow:hidden !important; }





/* === AMI: fast subtotal + fast CTA (altid synligt) === */
:root{
  --ami-drawer-w: clamp(380px, 32vw, 560px); /* samme som før */
  --ami-cta-h: 72px;                         /* højde på checkout-baren */
  --ami-summary-h: 68px;                     /* højde på subtotal-baren */
}

/* Fikseret CTA nederst (du har dette i forvejen, men samler her) */
.cart-drawer .cart__ctas,
cart-drawer .cart__ctas,
.drawer .cart__ctas,
.cart-drawer .cart__footer .cart__ctas{
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--ami-drawer-w) !important;
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  padding: 12px 16px !important;
  z-index: 102 !important;
}
.cart-drawer .cart__ctas [name="checkout"],
.cart-drawer .cart__ctas .cart__checkout-button{
  width: 100% !important;
  height: var(--ami-cta-h) !important;
  font-weight: 800 !important;
}

/* Fikseret SUBTOTAL-bjælke lige over CTA */
.cart-drawer .totals,
cart-drawer .totals,
.drawer .totals,
.cart-drawer .cart__footer .totals{
  position: fixed !important;
  right: 0 !important;
  bottom: var(--ami-cta-h) !important;      /* lige over CTA */
  width: var(--ami-drawer-w) !important;
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  padding: 12px 16px !important;
  z-index: 101 !important;
}

/* Sørg for korrekt layout af subtotal-linjen */
.cart-drawer .totals,
cart-drawer .totals{
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.cart-drawer .totals .totals__subtotal-value{ 
  font-weight: 800 !important; 
}

/* Rulleområdet: reserver plads til begge bjælker */
.ami-cart-body{
  padding: 10px 16px calc(var(--ami-cta-h) + var(--ami-summary-h) + 24px) !important;
}

/* Hvis temaet har en ekstra "tax-note" eller lignende, gør den statisk, så den følger subtotalen */
.cart-drawer .tax-note,
cart-drawer .tax-note{
  font-size: 12px;
  color: #666;
}




/* === AMI Drawer: udfyld hele højrekanten + fast subtotal/CTA === */

/* bredde */
:root { --ami-drawer-w: clamp(380px, 32vw, 560px); }
@media (max-width: 768px){ :root { --ami-drawer-w: 94vw; } }

/* selve skuffen */
.cart-drawer, cart-drawer, .drawer, drawer-cart{
  position: fixed !important;
  top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
  width: var(--ami-drawer-w) !important; height: 100vh !important;
  background:#fff !important; transform: translateX(0) !important;
  z-index: 999999 !important; box-shadow: -14px 0 28px rgba(0,0,0,.18);
  border-left: 1px solid rgba(0,0,0,.06);
}

/* indre wrappers: ingen max-width/margin/gap der skaber “luft” til højre */
.cart-drawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer .drawer__inner,
.cart-drawer .drawer__content,
cart-drawer .drawer__content,
.drawer .drawer__content,
.cart-drawer .drawer__contents,
.drawer .drawer__contents,
.cart-drawer .page-width,
cart-drawer .page-width,
.drawer .page-width,
.cart-drawer .page-width--narrow,
.drawer .page-width--narrow,
.cart-drawer .content,
.drawer .content{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* scrolldel */
.ami-cart-body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px calc(var(--ami-cta-h) + var(--ami-summary-h) + 20px) !important;
}

/* fast CTA nederst */
:root{ --ami-cta-h: 64px; --ami-summary-h: 56px; }

.cart-drawer .cart__ctas,
cart-drawer .cart__ctas,
.drawer .cart__ctas{
  position: fixed !important;
  right: 0 !important; bottom: 0 !important;
  width: var(--ami-drawer-w) !important;
  background:#fff !important; border-top:1px solid rgba(0,0,0,.08) !important;
  padding: 12px 16px !important; z-index: 102 !important;
}
.cart-drawer .cart__ctas [name="checkout"],
.cart-drawer .cart__ctas .cart__checkout-button{
  width:100% !important; height: var(--ami-cta-h) !important; font-weight:800 !important;
}

/* skjul temaets “gamle” totals i scrolldelen – vi viser vores egen fast */
.ami-cart-body .totals,
.cart-drawer .cart__footer .totals{ display:none !important; }

/* vores faste subtotalbar */
#ami-subtotal-bar{
  position: fixed;
  right: 0; bottom: var(--ami-cta-h);
  width: var(--ami-drawer-w);
  background:#fff; border-top:1px solid rgba(0,0,0,.08);
  padding: 10px 16px; z-index:101;
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px;
}
#ami-subtotal-bar .label{ color:#333; font-size:14px; }
#ami-subtotal-bar .value{ font-weight:800; font-size:16px; }

/* overlay (fra vores tidligere opsætning) */
#ami-overlay{ position:fixed !important; inset:0 !important; background:rgba(0,0,0,.58) !important; z-index:999998 !important; }
html.ami-drawer-open, body.ami-drawer-open{ overflow:hidden !important; }






/* Progressbar: sort fremdrift, lys rest */
.ami-freebar{ padding:10px 16px 14px; background:#fff; }
.ami-freebar-track{
  position: relative;
  height: 8px;
  background: #e9e9e9;         /* rest */
  border-radius: 999px;
  overflow: hidden;
}
.ami-freebar-fill{
  height: 100%;
  width: 0%;
  background: #111;            /* fremdrift */
  transition: width .35s ease; /* glidende opdatering */
}
.ami-freebar-labels{
  display:flex; justify-content:space-between; margin-top:6px;
  font-size:12px; color:#555;
}

/* Genskab temaets subtotal (så du altid ser en pris, også hvis JS ikke når at køre) */
.ami-cart-body .totals,
.cart-drawer .cart__footer .totals{
  display: grid !important;
}





/* Fast subtotal lige over “Gå til betaling” */
:root{ --ami-drawer-w: clamp(380px, 32vw, 560px); --ami-cta-h: 64px; --ami-summary-h: 56px; }

#ami-subtotal-bar{
  position: fixed;
  right: 0;
  bottom: var(--ami-cta-h);
  width: var(--ami-drawer-w);
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 10px 16px;
  z-index: 101;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.ami-cart-body{
  padding: 10px 16px calc(var(--ami-cta-h) + var(--ami-summary-h) + 20px) !important;
}









/* Skjul native subtotal i scrolldelen – vi bruger kun den faste bar */
.ami-cart-body .totals,
.cart-drawer .cart__footer .totals { 
  display: none !important; 
}

/* Gør den faste subtotal-bar altid synlig over CTA */
#ami-subtotal-bar{
  position: fixed;
  right: 0;
  bottom: var(--ami-cta-h);
  width: var(--ami-drawer-w);
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 10px 16px;
  z-index: 103;                         /* over CTA-wrapper */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

/* Sørg for at scrolldelen ikke løber ind under bjælkerne */
.ami-cart-body{
  padding: 10px 16px calc(var(--ami-cta-h) + var(--ami-summary-h) + 24px) !important;
}

/* CTA-wrapper nederst (bliver under subtotalen) */
.cart-drawer .cart__ctas,
cart-drawer .cart__ctas,
.drawer .cart__ctas{
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--ami-drawer-w) !important;
  background:#fff !important;
  border-top:1px solid rgba(0,0,0,.08) !important;
  padding:12px 16px !important;
  z-index: 102 !important;              /* under subtotal-bjælken */
}










/* 1) Skjul den indvendige header/X – behold kun den øverste (vores) */
.ami-cart-body h2,
.ami-cart-body .drawer__header,
.ami-cart-body .cart-drawer__close,
.ami-cart-body .drawer__close {
  display: none !important;
}

/* 2) Brug temaets subtotal, men fast placeret over CTA */
:root{
  --ami-drawer-w: clamp(380px, 32vw, 560px);
  --ami-cta-h: 64px;              /* højde på “Gå til betaling” */
  --ami-summary-h: 56px;          /* højde på subtotal-linjen */
}

.cart-drawer .totals,
cart-drawer .totals,
.drawer .totals {
  position: fixed !important;
  right: 0 !important;
  bottom: var(--ami-cta-h) !important;   /* lige over CTA */
  width: var(--ami-drawer-w) !important;
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  padding: 12px 16px !important;
  z-index: 103 !important;               /* over CTA-wrapper */
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.cart-drawer .totals .totals__subtotal-value{
  font-weight: 800 !important;
}

/* 3) Sørg for at indholdet ikke gemmer sig bag subtotal/CTA */
.ami-cart-body{
  padding: 10px 16px calc(var(--ami-cta-h) + var(--ami-summary-h) + 20px) !important;
}

/* CTA nederst – under subtotalen */
.cart-drawer .cart__ctas,
cart-drawer .cart__ctas,
.drawer .cart__ctas{
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--ami-drawer-w) !important;
  background:#fff !important;
  border-top:1px solid rgba(0,0,0,.08) !important;
  padding:12px 16px !important;
  z-index: 102 !important;
}

/* Drop min gamle fast-bar, hvis den findes */
#ami-subtotal-bar{ display: none !important; }



/* 1) Fiks subtotal-række som flekslinje */
.cart-drawer .totals,
cart-drawer .totals,
.drawer .totals{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;       /* samme padding som CTA */
  margin: 0 !important;
  width: var(--ami-drawer-w) !important;
}

/* 2) Pris venstrestillet og flugter med CTA-kant */
.cart-drawer .totals .totals__subtotal-value{
  text-align: left !important;
  font-weight: 800 !important;
}

/* inline note (vi tilføjer den via JS) */
#ami-tax-inline{
  font-size: 12px;
  color: #666;
  white-space: nowrap;                 /* lille tekst, ingen 3-linjers roman her */
}

/* skjul den gamle note i scrolldelen – vi flytter indholdet op til subtotalen */
.ami-cart-body .tax-note{ display: none !important; }

/* 3) Centrer CTA-tekst rigtigt */
.cart-drawer .cart__ctas [name="checkout"],
.cart-drawer .cart__ctas .cart__checkout-button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}



/* Totals-bjælken: samme venstrekant som CTA */
:root { --ami-pad: 16px; }

.cart-drawer .totals,
cart-drawer .totals,
.drawer .totals,
.cart-drawer .cart__blocks .totals{
  padding-left: var(--ami-pad) !important;
  padding-right: var(--ami-pad) !important;
  left: auto !important;
  right: 0 !important;
  width: var(--ami-drawer-w) !important;
  box-sizing: border-box !important;
}

/* Nulstil ALT der skubber pris indad */
.cart-drawer .totals .totals__subtotal,
.cart-drawer .totals .totals__subtotal-label,
.cart-drawer .totals .totals__subtotal-value{
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Hvis temaet stædigt giver indryk på indre wrappers */
.cart-drawer .totals *{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

<style id="ami-cta-center-grid">
  :root{ --ami-cta-h: 64px; } /* du kan gøre den 56/60/66 hvis du vil – teksten bliver stadig centreret */

  /* Selve checkout-knappen: brug Grid og centrer alt */
  #CartDrawer-Checkout,
  .cart-drawer .cart__ctas [name="checkout"],
  .cart-drawer .cart__ctas .cart__checkout-button{
    display: grid !important;
    place-items: center !important;       /* centrer vertikalt + horisontalt */
    height: var(--ami-cta-h) !important;
    min-height: var(--ami-cta-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border: 0 !important;
  }

  /* Nulstil ALT inde i knappen (spans/wrappers/ikoner) */
  #CartDrawer-Checkout > *,
  .cart-drawer .cart__ctas [name="checkout"] > *,
  .cart-drawer .cart__ctas .cart__checkout-button > *{
    position: static !important;
    transform: none !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
    justify-self: center !important;
    align-self: center !important;
  }

  /* Sluk alt tema-lir der kan skubbe tekst (pseudo/spinner) */
  .cart-drawer .cart__ctas [name="checkout"]::before,
  .cart-drawer .cart__ctas [name="checkout"]::after,
  .cart-drawer .cart__ctas .cart__checkout-button::before,
  .cart-drawer .cart__ctas .cart__checkout-button::after,
  .cart-drawer .cart__ctas .loading-overlay__spinner{
    content: none !important;
    display: none !important;
  }
</style>







/* Fjern den sorte kasse om skraldespanden – uden at gøre noget hvidt ved hover */
.cart-drawer .cart-remove-button,
.cart-drawer .cart-item__remove .button,
.cart-drawer .cart__remove,
.cart-drawer [data-cart-remove],
.cart-drawer button[name="remove"],
.cart-drawer button[id*="Remove"],
.cart-drawer .quantity-popover button.cart-remove-button,
.cart-drawer .cart-item__remove button.button--tertiary {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  opacity: 1 !important;                 /* ingen udvanding */
  color: #111 !important;                /* ikonfarve */
}

/* Hover/focus – stadig ingen baggrund, ingen opacitet */
.cart-drawer .cart-remove-button:hover,
.cart-drawer .cart-item__remove .button:hover,
.cart-drawer .cart__remove:hover,
.cart-drawer [data-cart-remove]:hover,
.cart-drawer button[name="remove"]:hover,
.cart-drawer button[id*="Remove"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  color: #000 !important;
}

/* Fokus-ring for tilgængelighed, uden baggrund */
.cart-drawer .cart-remove-button:focus-visible,
.cart-drawer .cart-item__remove .button:focus-visible,
.cart-drawer .cart__remove:focus-visible,
.cart-drawer [data-cart-remove]:focus-visible,
.cart-drawer button[name="remove"]:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Selve ikonet – ingen hvid udfyldning */
.cart-drawer .cart-remove-button svg,
.cart-drawer .cart-item__remove .button svg,
.cart-drawer .cart__remove svg,
.cart-drawer [data-cart-remove] svg,
.cart-drawer button[name="remove"] svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}




/* === Skraldespand i cart drawer: altid ikon, aldrig sort kasse === */

/* Normal state */
.cart-drawer .cart-item__remove .button,
.cart-drawer .button.button--tertiary.cart-remove-button,
.cart-drawer .cart-remove-button,
.cart-drawer [data-cart-remove]{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* fjern Dawn-knap dimensioner */
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  --btn-min-width: 0 !important;

  /* fast klik-område så intet hopper ved hover */
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;

  /* ingen animationer der blinker hvidt */
  transition: none !important;
  opacity: 1 !important;
  color: #111 !important;
}

/* Ikonet selv */
.cart-drawer .cart-item__remove .button svg,
.cart-drawer .button.button--tertiary.cart-remove-button svg,
.cart-drawer .cart-remove-button svg,
.cart-drawer [data-cart-remove] svg{
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Hover / focus / active – stadig IKKE nogen baggrund eller opacitet */
.cart-drawer .cart-item__remove .button:hover,
.cart-drawer .button.button--tertiary.cart-remove-button:hover,
.cart-drawer .cart-remove-button:hover,
.cart-drawer [data-cart-remove]:hover,
.cart-drawer .cart-item__remove .button:focus,
.cart-drawer .button.button--tertiary.cart-remove-button:focus,
.cart-drawer .cart-remove-button:focus,
.cart-drawer [data-cart-remove]:focus,
.cart-drawer .cart-item__remove .button:active,
.cart-drawer .button.button--tertiary.cart-remove-button:active,
.cart-drawer .cart-remove-button:active,
.cart-drawer [data-cart-remove]:active{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  color: #000 !important; /* let tydeligere ved hover */
}

/* Tilgængelig fokus-ring uden kasse */
.cart-drawer .cart-item__remove .button:focus-visible,
.cart-drawer .button.button--tertiary.cart-remove-button:focus-visible,
.cart-drawer .cart-remove-button:focus-visible,
.cart-drawer [data-cart-remove]:focus-visible{
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}








/* AmiKicks: size-fit bar */
.size-fit-indicator{margin:6px 0 10px}
.size-fit-indicator__bar{display:flex;gap:8px;height:12px;margin:6px 0 8px}
.size-fit-indicator__segment{flex:1;background:#f0f0f0;border-right:3px solid #fff;border-radius:2px}
.size-fit-indicator__segment:last-child{border-right:0}
.size-fit-indicator__segment.is-active{background:#000}
.size-fit-indicator__labels{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:#444}

/* AmiKicks: lagerstatus-boks */
.stock-status-message{display:block;margin:12px 0 20px;padding:10px;border:2px solid #228b22;border-radius:5px;background:#fff;color:#228b22;font-weight:600}
.stock-status-message .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#228b22;margin-right:8px;position:relative;top:-1px}
.stock-status-message.is-preorder{border-color:#a86b00;color:#a86b00}
.stock-status-message.is-preorder .dot{background:#a86b00}
.stock-status-message.is-out{border-color:#b00020;color:#b00020}
.stock-status-message.is-out .dot{background:#b00020}

/* AmiKicks: grøn prik på lager-størrelser */
.product-form__input input[type="radio"] + label{position:relative}
.ami-variant-dot{position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:#228b22;box-shadow:0 0 0 2px #fff;display:none}
.ami-variant-hasstock .ami-variant-dot{display:inline-block}





/* AmiKicks — Size fit bar */
.size-fit-indicator{margin:14px 0 8px}
.size-fit-indicator__bar{
  display:flex;
  gap:8px;              /* afstand mellem segmenter */
  height:12px;          /* bar-højde */
  margin-bottom:8px;
}
.size-fit-indicator__segment{
  flex:1;
  background:#f0f0f0;   /* lysegrå segmenter */
  border-radius:2px;
}
.size-fit-indicator__segment.is-active{
  background:#000;      /* aktivt felt (sort) */
}
.size-fit-indicator__labels{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#5f5f5f;
  font-weight:600;
}
.size-fit-indicator__labels span{flex:1}
.size-fit-indicator__labels span:nth-child(2){
  text-align:center;    /* “Normal” i midten */
}
.size-fit-indicator__labels span:last-child{
  text-align:right;
}





.size-fit-indicator__bar{
  display:flex;
  gap:8px;
  height:12px;
  margin-bottom:8px;
  width:100%;
}

.size-fit-indicator__segment{
  flex:1;
  height:12px;          /* vigtigt: eksplicit højde på child */
  background:#f0f0f0;
  border-radius:2px;
}

.size-fit-indicator__segment.is-active{ background:#000; }
.size-fit-indicator__labels{ display:flex; justify-content:space-between; font-size:12px; color:#5f5f5f; font-weight:600; }
.size-fit-indicator__labels span{ flex:1; }
.size-fit-indicator__labels span:nth-child(2){ text-align:center; }
.size-fit-indicator__labels span:last-child{ text-align:right; }










/* AmiKicks – Size fit bar (endelig) */
.size-fit-indicator{ margin:14px 0 8px; }
.size-fit-indicator__bar{
  display:flex; gap:8px; height:12px; margin-bottom:8px; width:100%;
}
.size-fit-indicator__segment{
  flex:1; height:12px; background:#f0f0f0; border-radius:2px;
}
.size-fit-indicator__segment.is-active{ background:#000; }
.size-fit-indicator__labels{
  display:flex; justify-content:space-between; font-size:12px; color:#5f5f5f; font-weight:600;
}
.size-fit-indicator__labels span:nth-child(2){ text-align:center; flex:1; }
.size-fit-indicator__labels span:last-child{ text-align:right; }






/* AmiKicks — Size fit bar (match screenshot) */
.size-fit-indicator { margin: 10px 0 14px; }

.size-fit-indicator__bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  height: 12px;
  margin-bottom: 8px;
}

.size-fit-indicator__segment {
  background: #efefef;         /* lysegrå felter */
  border-radius: 2px;
}

.size-fit-indicator__segment.is-active {
  background: #000;            /* sort aktivt felt */
}

.size-fit-indicator__labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 12px;
  font-weight: 600;
  color: #5f5f5f;
}

.size-fit-indicator__labels span:nth-child(2) { text-align: center; }
.size-fit-indicator__labels span:last-child   { text-align: right; }










/* ===== AmiKicks • Mega menu (LetzKick 1:1) ===== */
@media (min-width: 990px){

  /* 0) Position som popup under hele headeren */
  .header { position: relative !important; }
  .header__inline-menu details { position: static !important; }

  /* backup: hvis temaet spejler summary ind i content */
  .mega-menu__content .header__menu-item { display: none !important; }

  /* 2) Dawn giver popup’en en top-padding via global-settings-popup – væk med den */
  .mega-menu__content.global-settings-popup {
    padding-top: 0 !important;
  }

  /* 3) Selve panelet: centreret under headeren, fast bredde som LetzKick */
@media (min-width: 990px){
  /* panelet skal ikke have luft over sig – ellers falder hover væk */
  .header .mega-menu__content{
    top: 100% !important;        /* ← ikke calc(100% + 10px) */
    margin-top: 0 !important;    /* bare for en sikkerheds skyld */
  }
}


  /* 4) Vis KUN panelet når åbent (ingen “tom bar” state) */
  .header__inline-menu details:not([open]) > .mega-menu__content{
    display: none !important;
  }

  /* 5) 6 kolonner og typografi som i eksemplet */
  .mega-menu__list{
    display: grid !important;
    grid-template-columns: repeat(6, minmax(150px, 1fr)) !important;
    gap: 8px 34px !important;
  }
  .mega-menu__list > li > a,
  .mega-menu__list .list-menu__item--heading{
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .2px !important;
    padding: 2px 0 !important;
  }
  .mega-menu__list .list-menu__item a{
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 4px 0 !important;
    text-decoration: none !important;
  }
  .mega-menu__list .list-menu__item a:hover{ text-decoration: underline !important; }
}

/* ===== AmiKicks • Mega menu (fix den hvide bar + centrering) ===== */
@media (min-width: 990px){

  /* Forankr panelet til hele headeren */
  .header { position: relative !important; }
  .header__inline-menu details { position: static !important; }


  /* Nulstil Dawn's global-settings-popup offset og pseudo-overlay */
  .header .mega-menu__content {
    --header-bottom-position: 0 !important;     /* <- DENNE dræber den “hvide bjælke” */
    padding-block-start: 0 !important;
    margin-block-start: 0 !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;          /* under headeren */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1180px, calc(100vw - 40px)) !important;
    padding: 22px 22px 16px !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.10) !important;
  }
  .header .mega-menu__content::before,
  .header .mega-menu__content::after { display: none !important; }

  /* Vis KUN panelet når åbent */
  .header__inline-menu details:not([open]) > .mega-menu__content { display: none !important; }

  /* 6 kolonner + typografi */
  .mega-menu__list { display: grid !important; grid-template-columns: repeat(6, minmax(150px,1fr)) !important; gap: 8px 34px !important; }
  .mega-menu__list > li > a,
  .mega-menu__list .list-menu__item--heading { font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .2px !important; padding: 2px 0 !important; }
  .mega-menu__list .list-menu__item a { font-weight: 500 !important; text-transform: none !important; padding: 4px 0 !important; text-decoration: none !important; }
  .mega-menu__list .list-menu__item a:hover { text-decoration: underline !important; }
}












/* AmiKicks — Mega-menu typografi (LetzKick-ish) */
@media (min-width: 990px){
  /* justerbare værdier */
  :root{
    --mm-heading-size: 15px;
    --mm-heading-weight: 800;
    --mm-heading-letter: .04em;

    --mm-item-size: 14px;
    --mm-item-weight: 500;   /* 400–500 alt efter din font */
    --mm-item-opacity: .78;
    --mm-row-gap: 8px;       /* afstand mellem rækker */
    --mm-col-gap: 36px;      /* afstand mellem kolonner */
  }

  /* kolonne-grid */
  .mega-menu__list{
    column-gap: var(--mm-col-gap) !important;
    row-gap: var(--mm-row-gap) !important;
    font-size: var(--mm-item-size);
    line-height: 1.35;
  }

  /* OVERSKRIFTEN i hver kolonne = første element */
  .mega-menu__list > li > *:first-child{
    display: block !important;
    margin: 0 0 12px !important;
    text-transform: uppercase;
    letter-spacing: var(--mm-heading-letter);
    font-weight: var(--mm-heading-weight) !important;
    font-size: var(--mm-heading-size) !important;
    opacity: 1 !important;
  }

  /* almindelige links/linjer under overskriften */
  .mega-menu__list > li > * + *{
    margin-top: var(--mm-row-gap) !important;
    font-weight: var(--mm-item-weight) !important;
    font-size: var(--mm-item-size) !important;
    opacity: var(--mm-item-opacity) !important;
  }

  /* link farve/hover – subtil */
  .mega-menu__list a{
    color: #111 !important;
    text-decoration: none !important;
    transition: opacity .15s ease, transform .15s ease;
  }
  .mega-menu__list a:hover{
    opacity: 1 !important;
    transform: translateX(2px);
  }
}







@media (min-width: 990px){
  /* Stak alt i hver kolonne lodret, venstrealign */
  .mega-menu__list > li{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--mm-row-gap, 8px) !important; /* bruger samme spacing-var. som før */
    text-align: left !important;
  }

  /* Sørg for at hvert element i kolonnen er “block” */
  .mega-menu__list > li > *{
    display: block !important;
    margin: 0 !important; /* vi bruger gap ovenfor */
  }

  /* Overskriften bevarer sin styling fra før */
  .mega-menu__list > li > *:first-child{
    margin: 0 0 12px !important;
  }
}









/* ==== MEGA MENU – kolonner & typografi (desktop) ==== */
@media (min-width: 990px) {
  /* 1) Grid med lige brede kolonner og pæn afstand */
  .section-header .mega-menu__content .mega-menu__list{
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* antal kolonner */
    column-gap: 40px !important;   /* vandret afstand mellem kolonner */
    row-gap: 18px !important;      /* lodret afstand, når der brydes til 2. række */
    grid-auto-flow: row !important; /* bryd videre nedad, ikke sidelæns */
  }

  /* 2) Stak hvert kolonne-indhold lodret og venstrealign */
  .section-header .mega-menu__content .mega-menu__list > li{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;       /* tillad linjeskift */
  }

  /* Overskrift i kolonne (brand/gruppe) */
  .section-header .mega-menu__content .mega-menu__list > li > a.mega-menu__link--level-2{
    display: block !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    font-size: 14px !important;
    margin: 0 0 12px !important;
    text-transform: none !important; /* skift til uppercase hvis du vil */
  }

  /* Liste med underpunkter */
  .section-header .mega-menu__content .mega-menu__list > li > ul{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .section-header .mega-menu__content .mega-menu__list > li > ul > li{
    list-style: none !important;
    margin: 0 0 8px !important;
  }
  .section-header .mega-menu__content .mega-menu__list > li > ul a{
    display: block !important;           /* fjern inline-block */
    white-space: normal !important;      /* ophæv nowrap */
    font-weight: 500 !important;         /* tyndere end overskrift */
    font-size: 13px !important;
    opacity: .95 !important;
  }
}













/* ==== MEGA MENU FIX – Dawn ==== */
@media (min-width: 990px){

  /* Kolonne-layout (6 kolonner = 2 rækker når der er 7 brands) */
  .header .mega-menu__content .mega-menu__list{
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* ændr 6 hvis du vil */
    column-gap: 40px !important;
    row-gap: 20px !important;
    grid-auto-flow: row dense !important;  /* pak rækkerne pænt */
  }

  /* Én kolonne = heading øverst, links under */
  .header .mega-menu__content .mega-menu__list > li{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  /* Overskrift/brand */
  .header .mega-menu__content .mega-menu__list > li > a.mega-menu__link--level-2{
    display: block !important;
    margin: 0 0 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: .02em !important;
    text-transform: none !important; /* skift til uppercase hvis du vil */
  }

  /* Underpunkter (links) */
  .header .mega-menu__content .mega-menu__list > li > ul{
    margin: 0 !important;
    padding: 0 !important;
  }
  .header .mega-menu__content .mega-menu__list > li > ul > li{
    list-style: none !important;
    margin: 0 0 8px !important;
  }
  .header .mega-menu__content .mega-menu__list > li > ul a{
    display: block !important;         /* ophæver inline-block */
    white-space: normal !important;    /* ophæver nowrap */
    font-weight: 500 !important;       /* tyndere end overskrift */
    font-size: 13px !important;
    opacity: .95 !important;
  }
}












/* NAV: gør mega-menu trigger (summary) til at ligne top-links – uden at røre <a>  */
@media (min-width: 990px){
  .section-header .header__inline-menu .list-menu > li > details > summary{
    text-transform: uppercase;     /* match topmenu */
    font-weight: 800;
    letter-spacing: .08em;
    font-size: 14px;
    line-height: 1.2;
    padding: 0 10px;
    color: inherit;
    background: transparent;
    border: 0;                     /* rør ikke andre links' border */
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  /* Understregning/border kun for summary så det matcher hover/åben */
  .section-header .header__inline-menu .list-menu > li > details > summary:hover,
  .section-header .header__inline-menu .list-menu > li > details[open] > summary{
    border-bottom: 2px solid currentColor;  /* matcher de andre items’ effekt */
  }

  /* Fjern default marker + justér caret */
  .section-header .header__inline-menu .list-menu > li > details > summary::-webkit-details-marker{ display:none; }
  .section-header .header__inline-menu .list-menu > li > details > summary .icon-caret{
    width: 10px;
    height: 10px;
    margin-left: 6px;
    transform: translateY(-1px);
  }
}







/* AMIKICKS — gør alle toplevel menu-tekster identiske (inkl. "Sneakers" summary) */

/* Ram både normal header og sticky header-klonen */
.header__inline-menu a.header__menu-item span,
.header__inline-menu summary.header__menu-item span,
sticky-header .header__inline-menu a.header__menu-item span,
sticky-header .header__inline-menu summary.header__menu-item span {
  font-family: var(--font-heading-family, var(--font-body-family)) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;  /* for variable fonts */
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
}

/* Sørg for at forældreled ikke nedtoner vægten */
.header__inline-menu a.header__menu-item,
.header__inline-menu summary.header__menu-item,
.header__inline-menu .link,
.header__inline-menu .link--text,
sticky-header .header__inline-menu a.header__menu-item,
sticky-header .header__inline-menu summary.header__menu-item,
sticky-header .header__inline-menu .link,
sticky-header .header__inline-menu .link--text {
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;
}

/* Fjern browserens marker på summary */
details > summary::-webkit-details-marker { display: none !important; }










/* AMIKICKS — gør ALLE topmenu-links som "Sneakers" (også summary/dropdown) */

/* 1) Basis-typografi på selve menupunktet */
header .header__inline-menu .list-menu__item {
  font-family: var(--font-heading-family, var(--font-body-family)) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;

  /* farve/”opacity”-look som Sneakers */
  color: rgba(var(--color-foreground), 0.82) !important;
  transition: color var(--duration-short, .15s) ease !important;
}

/* 2) Teksten inde i span arver blot */
header .header__inline-menu .list-menu__item > span {
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* 3) Hover/ fokus: mørkere, præcis som Sneakers */
header .header__inline-menu .list-menu__item:hover,
header .header__inline-menu .list-menu__item:focus {
  color: rgba(var(--color-foreground), 1) !important;
}

/* 4) Fjern browserens marker på summary og justér caret en smule */
header details > summary::-webkit-details-marker { display: none !important; }
header .header__inline-menu summary.list-menu__item .icon-caret {
  margin-left: 6px !important;
  transform: translateY(1px);
}















/* AMIKICKS — header typografi + linjering, tving sidste ord */
header.header .header__inline-menu .list-menu--inline { align-items: center !important; }

/* Ens typografi (du har allerede noget lignende, men vi gentager for at være øverst i cascade) */
header.header .header__inline-menu a.header__menu-item span,
header.header .header__inline-menu summary.header__menu-item span {
  font-family: var(--font-heading-family, var(--font-body-family)) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  color: rgb(var(--color-foreground)) !important;
  opacity: 0.82 !important;
}

/* Hover samme “mørkere” som Sneakers */
header.header .header__inline-menu a.header__menu-item:hover span,
header.header .header__inline-menu summary.header__menu-item:hover span {
  opacity: 1 !important;
}

/* Pixel-linje: flyt tekst i links en anelse op, lad Sneakers stå neutralt */
header.header .header__inline-menu .list-menu--inline > li > a.header__menu-item.link--text > span {
  position: relative !important;
  display: inline-block !important;
  top: -1px !important;           /* skift til -2px hvis den stadig hænger lidt */
}

header.header .header__inline-menu .list-menu--inline > li > summary.header__menu-item.link > span {
  position: relative !important;
  display: inline-block !important;
  top: 0 !important;              /* Sneakers = referencehøjde */
}

/* Understregning må ikke se off ud efter nudgen */
header.header .header__inline-menu .header__active-menu-item::after {
  bottom: -6px !important;
}

/* Caret roder ikke med baseline */
header.header .header__inline-menu summary.header__menu-item .icon-caret {
  margin-left: 6px !important;
  transform: translateY(1px);
}






sticky-header header.header .header__inline-menu .list-menu--inline > li > a.header__menu-item.link--text > span {
  top: -1px !important;
}







/* AMI: UDSALG badge på produktkort */
.ami-sale-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:#000; color:#fff; font-weight:800; text-transform:uppercase;
  font-size:12px; line-height:1; letter-spacing:.4px;
  padding:7px 10px; border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,.12);
}
/* Sørg for at badge kan positioneres relativt til kortet */
.card-wrapper{ position:relative; }











/* AMI: UDSALG badge – større og mindre runde kanter */
.ami-sale-badge{
  font-size:14px;          /* før 12px */
  padding:8px 12px;        /* lidt mere fylde */
  border-radius:6px;       /* mindre rund */
  top:14px; left:14px;     /* kompensation for større badge */
}

/* Lidt nedskalering på små skærme */
@media (max-width: 600px){
  .ami-sale-badge{
    font-size:13px;
    padding:7px 10px;
    border-radius:5px;
    top:10px; left:10px;
  }
}



/* AMIKICKS — Image banner full-bleed på mobil, med centreret indhold */
@media screen and (max-width: 749px) {

  /* Få selve banner-sektionen til at strække til skærmens kanter */
  .shopify-section .banner {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Sørg for at billedet fylder rammen */
  .banner__media,
  .banner__media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Tekstboksen: centrér og giv behagelig sidepadding */
  .banner__content,
  .banner__box {
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Fjern temaets ekstra gutters omkring banneret */
  .page-width:has(.banner),
  .banner .page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}












/* AMIKICKS — Fix: Image banner text skal være center på desktop */
@media screen and (min-width: 750px) {
  /* Dækker de typiske Dawn/Sense varianter af "center" */
  .banner--content-align-center .banner__content,
  .banner--desktop-content-center .banner__content,
  .banner--middle-center .banner__content,
  .banner .banner__content[data-alignment="center"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Sørg for, at boksen ikke har en sneget margin, der skubber den højre */
  .banner--content-align-center .banner__box,
  .banner--desktop-content-center .banner__box,
  .banner--middle-center .banner__box,
  .banner .banner__box {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Nulstil evt. tema-push fra padding/translate */
  .banner__content {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}