/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./web/app/themes/codekrakers/components/cards/card-product/src/card-product.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.twz-card--product {
  --card-color: var(--white, #faf7f2);
  --card-meta: var(--gold-500, #d1ad59);
  --card-excerpt: var(--beige-200, #f2ece1);
  --card-footer-bg: var(--grey-600, #22211f);
  --card-bar-on: var(--orange-500, #e67025);
  --card-bar-off: #53504e;
  --card-media-h: 25.1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 42rem);
  list-style: none;
  color: var(--card-color);
  container-type: inline-size;
  container-name: twz_card_product;
}
.twz-card--product .twz-card__media {
  --card-media-border: var(--white, #faf7f2);
  position: relative;
  z-index: 0;
  overflow: visible;
  width: 100%;
  block-size: auto;
  aspect-ratio: 16/9;
  margin-block-end: -4.9rem;
}
@container twz_card_product (width < 250px) {
  .twz-card--product .twz-card__media {
    --card-media-h: 18rem;
  }
}
.twz-card--product .twz-card__media::after {
  content: "";
  position: absolute;
  inset: -0.1rem;
  z-index: 1;
  pointer-events: none;
  background-color: var(--card-media-border);
  -webkit-mask-image: url("../src/card-media-border.svg");
          mask-image: url("../src/card-media-border.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.twz-card--product .twz-card__media-link,
.twz-card--product .twz-card__image {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("../src/card-media-mask.svg");
          mask-image: url("../src/card-media-mask.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.twz-card--product .twz-card__image {
  -o-object-fit: cover;
     object-fit: cover;
}
.twz-card--product .twz-card__video {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-end: 1.1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white, #faf7f2);
  font-family: var(--font-base, "Manrope", sans-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
@container twz_card_product (width < 325px) {
  .twz-card--product .twz-card__video {
    inset-block-start: 0;
    inset-inline-end: 0.2rem;
    font-size: 1rem;
  }
}
.twz-card--product .twz-card__video:hover {
  opacity: 0.85;
}
.twz-card--product .twz-card__video-icon {
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 1.6rem;
  aspect-ratio: 1;
}
.twz-card--product .twz-card__video-icon :is(.twz-icon, svg) {
  inline-size: 100%;
  block-size: 100%;
}
.twz-card--product .twz-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  padding-block: 3.1rem 0;
  flex: 1 1 auto;
}
@container twz_card_product (width < 325px) {
  .twz-card--product .twz-card__body {
    padding-block: 3.75rem 0;
  }
}
.twz-card--product .twz-card__niveau {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@container twz_card_product (width < 300px) {
  .twz-card--product .twz-card__niveau {
    padding: 1rem 0 0 0;
  }
  .twz-card--product .twz-card__niveau .twz-card__niveau-label {
    font-size: 0.9rem;
  }
}
.twz-card--product .twz-card__niveau-bars {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  inline-size: 2.9rem;
}
.twz-card--product .twz-card__niveau-bar {
  flex: 1 1 0;
  min-inline-size: 0.1rem;
  block-size: 0.3rem;
  background-color: var(--card-bar-off);
}
.twz-card--product .twz-card__niveau-bar.is-active {
  background-color: var(--card-bar-on);
}
.twz-card--product .twz-card__niveau-label {
  font-family: var(--font-base, "Manrope", sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--card-color);
}
.twz-card--product .twz-card__heading {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
}
.twz-card--product .twz-card__available-from {
  margin: 0;
  padding: 0.2rem 0.7rem;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--white, #faf7f2);
  color: var(--black, #151312);
  font-family: var(--font-base, "Manrope", sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.twz-card--product .twz-card__title {
  margin: 0;
  font-family: var(--font-accent, "Outfit", sans-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--card-color);
  text-decoration: none;
}
.twz-card--product .twz-card__title:hover {
  opacity: 0.85;
}
.twz-card--product .twz-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--card-meta);
  font-family: var(--font-base, "Manrope", sans-serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
}
.twz-card--product .twz-card__meta-sep {
  flex-shrink: 0;
  inline-size: 0.4rem;
  aspect-ratio: 1;
  border: 0.1rem solid var(--card-meta);
  border-radius: 0.2rem;
}
.twz-card--product .twz-card__excerpt {
  margin: 0;
  width: 100%;
  color: var(--card-excerpt);
  font-family: var(--font-base, "Manrope", sans-serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
}
.twz-card--product .twz-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  padding: 0.8rem 0.8rem 0.8rem 1.6rem;
  background-color: var(--card-footer-bg);
  margin-top: auto;
}
@container twz_card_product (width < 250px) {
  .twz-card--product .twz-card__footer {
    flex-direction: column;
    align-items: stretch;
  }
}
@container twz_card_product (width < 300px) {
  .twz-card--product .twz-card__footer {
    --btn-padding: 1.1rem 1.3rem;
  }
}
.twz-card--product.is-almost-available {
  width: min(100%, 107.9rem);
}
@media (min-width: 768px) {
  .twz-card--product.is-almost-available {
    flex-direction: row;
    align-items: center;
    gap: 4.6rem;
  }
}
@media (min-width: 768px) {
  .twz-card--product.is-almost-available .twz-card__media {
    flex: 1 1 0;
    min-inline-size: 0;
    margin-block-end: 0;
    aspect-ratio: 516.5/357;
  }
}
.twz-card--product.is-almost-available .twz-card__niveau {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline-start: 0;
}
@media (min-width: 768px) {
  .twz-card--product.is-almost-available .twz-card__body {
    flex: 1 1 0;
    min-inline-size: 0;
    justify-content: center;
    padding-block: 0;
  }
}
.twz-card--product.is-almost-available .twz-card__heading {
  gap: 1.2rem;
}
.twz-card--product.is-almost-available .twz-card__meta {
  margin-block-start: -1.1rem;
}
.twz-card--product.is-almost-available .twz-card__footer {
  width: auto;
  padding: 0;
  margin-block-start: 0;
  background-color: transparent;
}
.twz-card--product.is-unavailable .twz-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(21, 19, 18, 0.62);
  pointer-events: none;
}
.twz-card--product .twz-card__unavailable {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(28.4rem, 90%);
  margin: auto;
  color: var(--white, #faf7f2);
  font-family: var(--font-accent, "Outfit", sans-serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
.twz-card--product .twz-card__price {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--font-accent, "Outfit", sans-serif);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--card-color);
}
@container twz_card_product (width < 300px) {
  .twz-card--product .twz-card__price {
    font-size: 1.8rem;
  }
}
.twz-card--product .twz-card__price :where(del, .woocommerce-Price-amount) {
  font: inherit;
  color: inherit;
}
.twz-card--product .twz-card__price del {
  opacity: 0.55;
  margin-inline-end: 0.4em;
}

.twz-card-video-dialog {
  --card-video-w: 16;
  --card-video-h: 9;
  position: fixed;
  inset: 0;
  z-index: 1100;
  width: min(95vw, 95vh * var(--card-video-w) / var(--card-video-h));
  width: min(95vw, 95svh * var(--card-video-w) / var(--card-video-h));
  height: min(95vh, 95vw * var(--card-video-h) / var(--card-video-w));
  height: min(95svh, 95vw * var(--card-video-h) / var(--card-video-w));
  max-width: 95vw;
  max-height: 95vh;
  max-height: 95svh;
  aspect-ratio: var(--card-video-w)/var(--card-video-h);
  margin: auto;
  padding: 0;
  border: 0;
  overflow: clip;
  background: #000;
  color: var(--white, #faf7f2);
}
.twz-card-video-dialog::backdrop {
  background: color-mix(in srgb, var(--black, #151312) 75%, transparent);
  cursor: pointer;
}
.twz-card-video-dialog[open] {
  display: grid;
}
.twz-card-video-dialog__close {
  position: absolute;
  z-index: 2;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--black, #151312) 55%, transparent);
  color: var(--white, #faf7f2);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.twz-card-video-dialog__media {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: #000;
}
.twz-card-video-dialog__media :where(iframe, video) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  -o-object-fit: contain;
     object-fit: contain;
}