/* stylelint-disable selector-pseudo-element-no-unknown,selector-pseudo-class-no-unknown,selector-type-no-unknown,declaration-empty-line-before */
@layer block {
  @layer core, modifyers;

  @layer core {
    .content-block {
      /* semantic ratios */
      --ar-square: 1 / 1;
      --ar-landscape: 5 / 3;
      --ar-portrait: 3 / 5;
      --ar-widescreen: 16 / 9;
      --ar-ultrawide: 18 / 5;
      --ar-golden: 1.618 / 1;

      /* numeric multipliers (height / width) */
      --mul-square: 1;
      --mul-landscape: 0.6; /* 3/5 */
      --mul-portrait: 1.6667; /* 5/3 */
      --mul-widescreen: 0.5625; /* 9/16 */
      --mul-ultrawide: 0.2778; /* 5/18 */
      --mul-golden: 0.618; /* 1/1.618... */

      /* active */
      --active-ar: var(--ar-portrait);
      --active-mul: var(--mul-portrait);

      --outter-gutter: var(--gutter-m);
      --col-gap: 0;
      --visible-gaps: 0;
      --visible-blocks: 1;

      --block-height-expr: 100cqi * var(--active-mul);
      --block-height-calc: var(--block-height-expr) -
        ((var(--outter-gutter) * 2) * var(--active-mul));

      --nav-button-size: 44px;

      position: relative;
      container-type: inline-size;
      container-name: block;
      isolation: isolate;
    }

    /* ===== IMAGES ===== */
    .content-block .block-img,
    .content-block .block-img :where(picture, img) {
      width: 100%;
    }

    .content-block .mobile-img:empty ~ .desktop-img {
      display: block;
    }

    .content-block .mobile-img {
      @container block (width >= 600px) {
        display: none;
      }

      @supports not (container-type: inline-size) {
        @media (width >= 600px) {
          display: none;
        }
      }
    }

    .content-block .desktop-img {
      display: none;

      @container block (width >= 600px) {
        display: block;
      }

      @supports not (container-type: inline-size) {
        @media (width >= 600px) {
          display: block;
        }
      }
    }

    .content-block a {
      text-decoration: none;
    }

    .content-block a:is(:hover, :focus-visible) {
      color: currentColor
    }

    /* ===== BASE COPY ===== */
    .content-block .block-copy {
      width: 100%;
      padding: 1em 0.5em 0 0.15em;
    }

    .content-block .block-copy,
    .content-block .block-copy > p {
      margin: 0;
      text-wrap: pretty;
      font-size: clamp(1.2rem, 1.2rem + 0.4vw, 2.4rem);
      line-height: 1.2;

      @media (min-width: 1200px) {
        font-size: clamp(1.2rem, 1rem + 0.7vw, 2.2rem);
      }
    }

    .content-block .block-copy[data-align="center"] {
      padding-inline: 0.5em;
    }

    .content-block .block-copy:has(> .button) {
      padding-block-start: 0;
    }

    .content-block:has(.promo) .block-copy {
      position: relative;
    }

    .content-block .promo {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      translate: 0 -100%;
      background: var(--clr-black);
      color: var(--clr-white);
      text-align: center;
      padding: 0.25em;
      min-height: 40px;
      font-size: clamp(1rem, 1rem + 0.2vw, 2rem);
      font-weight: bold;
      line-height: 1;

      @media (min-width: 400px) {
        font-size: clamp(1rem, 1rem + 0.6vw, 2rem);
      }

      @media (min-width: 600px) {
        font-size: clamp(1rem, 0.8rem + 0.5vw, 2rem);
      }

      @media (min-width: 900px) {
        font-size: clamp(1rem, 1rem + 0.7vw, 2.4rem);
      }

      @media (min-width: 1800px) {
        font-size: clamp(1rem, 1rem + 1vw, 2.6rem);
        padding-block: 0.5em;
      }
    }

    .content-block .promo:has(button) {
      @media (max-width: 899px) {
        padding: 0.25em 30px 0.25em 0.25em;
      }

      text-indent: 1ch;
    }

    .content-block .promo button.details-icon {
      @media (max-width: 899px) {
        position: absolute !important;
        right: 0;
        top: 50%;
        translate: 0 -50%;
      }
    }

    .content-block .promo button.details-icon::after {
      @media (min-width: 900px) {
        mask-position: 35% 50% !important;
      }
    }
  } /* END LAYER: core */

  /* ============================================================================================ */
  /* modifyers */
  /* ============================================================================================ */
  @layer modifyers {
    /* ===== overlay ===== */
    .content-block.overlay:not(:has(> a)),
    .content-block.overlay > a {
      position: relative;
      display: block;
    }

    .content-block.overlay .block-copy {
      position: absolute;
      inset: 0;
      padding: 0.5em;
    }

    @container block (width >= 600px) {
      .content-block.overlay-lg:not(:has(> a)),
      .content-block.overlay-lg > a {
        position: relative;
        display: block;
      }

      .content-block.overlay-lg .block-copy {
        position: absolute;
        inset: 0;
        padding: 0.5em;
      }
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 600px) {
        .content-block.overlay-lg:not(:has(> a)),
        .content-block.overlay-lg > a {
          position: relative;
        }

        .content-block.overlay-lg .block-copy {
          position: absolute;
          inset: 0;
          padding: 0.5em;
        }
      }
    }

    /* ============================================================================================ */
    /* PRODUCT CARDS */
    /* ============================================================================================ */
    .content-block.product-cards .block-copy {
      position: relative;
      font: var(--plp-product-title-font);
      line-height: 1.3;
      font-size: clamp(1.6rem, 1rem + 0.8vw, 1.8rem);
    }

    .content-block.product-cards .name {
      margin: 0 0 0.75em;
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text-color);
      max-height: fit-content;
    }

    .content-block.product-cards.amasty-text-label {
      line-height: 1.3;
      font-size: clamp(1.6rem, 1rem + 0.8vw, 1.8rem);
    }

    .content-block.product-cards.amasty-text-label.bottom-center {
      color: var(--clr-promo-green);
      font-size: 90%;
      font-weight: var(--fw-semibold);
      line-height: 1.8;
    }

    .content-block.product-cards .price {
      display: flex;
      align-items: baseline;
      gap: 0.7ch;
      font-weight: var(--fw-medium);
    }

    .content-block.product-cards .price-regular {
      color: var(--text-color-gray);
      font-size: 85%;
    }

    .content-block.product-cards a:is(:hover, :focus-visible) .name {
      color: var(--link-hover-color, var(--text-color));
    }
  } /* END LAYER: modifyers */
} /* END LAYER: block */