/**
 * Bundle Categories — the category strip above a bundle's product list.
 *
 * Mirrors the category tabs in the Bundle Details element: a horizontal row of
 * cards, each with the category's image, its name, how many products it holds
 * and how many are selected. The row is an Embla carousel, so the slides are
 * laid out by the carousel and only the card itself is styled here.
 */
[data-div-type="element"] {
  &[data-element-type="bundleCategories"] {
    // The builder writes width/height/margin/padding as --_ctm-* custom properties
    // rather than as plain CSS. Without consuming them the Layout panel appears to
    // do nothing — which is exactly how this element behaved.
    //
    // `--_sf-nw-wh` closes the chain: it is the width the element emits itself
    // while a resize drag is in flight, before the percentage is committed.
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% *
          var(
            --_ctm-mob-ele-nw-wh-vl,
            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
          )
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, 0)));
    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, 0)));

    // Show Border / Show Shadow are CONTROLS, not CSS, so the builder never turns
    // them into `--_ctm-*` variables — the element surfaces them as data
    // attributes and the gates below read those.
    &[data-show-border="false"] > .wrapper {
      border-style: none;
    }

    // A gate of its own rather than the shared `--_show-shadow`: custom properties
    // inherit, so a parent whose shadow is switched off would silently clear this
    // element's too.
    &[data-show-shadow="false"] {
      --_sf-bc-show-shadow: none;
    }

    // Background type is chosen in the Design tab and written onto the element as
    // `data-background-type`; gradients add `data-gradient-type`. Both are gated
    // exactly as the repeater item gates them, and like it the painted surface is
    // the wrapper rather than the root — the root carries the builder's own
    // `#<id>` rule and cannot be overridden from this stylesheet.
    &[data-background-type="color"] > .wrapper {
      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
    }

    &[data-background-type="image"] > .wrapper {
      background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
    }

    &[data-background-type="gradient"] > .wrapper {
      --_sf-bc-gradient-angle: calc(
        var(--_ctm-mob-dn-gt-ae, var(--_ctm-tab-dn-gt-ae, var(--_ctm-dn-gt-ae, 90))) * 1deg
      );
      --_sf-bc-gradient-start-color: var(
        --_ctm-mob-dn-gt-st-cr,
        var(--_ctm-tab-dn-gt-st-cr, var(--_ctm-dn-gt-st-cr, transparent))
      );
      --_sf-bc-gradient-start-position: calc(
        var(--_ctm-mob-dn-gt-st-pn, var(--_ctm-tab-dn-gt-st-pn, var(--_ctm-dn-gt-st-pn, 0))) * 1%
      );
      --_sf-bc-gradient-end-color: var(
        --_ctm-mob-dn-gt-ed-cr,
        var(--_ctm-tab-dn-gt-ed-cr, var(--_ctm-dn-gt-ed-cr, transparent))
      );
      --_sf-bc-gradient-end-position: calc(
        var(--_ctm-mob-dn-gt-ed-pn, var(--_ctm-tab-dn-gt-ed-pn, var(--_ctm-dn-gt-ed-pn, 100))) * 1%
      );
      --_sf-bc-gradient-position: var(
        --_ctm-mob-dn-gt-pn,
        var(--_ctm-tab-dn-gt-pn, var(--_ctm-dn-gt-pn, center))
      );
    }

    &[data-gradient-type="Linear Gradient"] > .wrapper {
      background-image: linear-gradient(
        var(--_sf-bc-gradient-angle),
        var(--_sf-bc-gradient-start-color) var(--_sf-bc-gradient-start-position),
        var(--_sf-bc-gradient-end-color) var(--_sf-bc-gradient-end-position)
      );
    }

    &[data-gradient-type="Radial Gradient"] > .wrapper {
      background-image: radial-gradient(
        circle at var(--_sf-bc-gradient-position),
        var(--_sf-bc-gradient-start-color) var(--_sf-bc-gradient-start-position),
        var(--_sf-bc-gradient-end-color) var(--_sf-bc-gradient-end-position)
      );
    }
    background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
    background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
    background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));

    border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
    border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
    border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
    border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));

    // Show Border / Show Shadow are CONTROLS, not CSS, so they never become
    // variables — the element surfaces them as data attributes instead.
    &[data-show-border="false"] {
      border-style: none;
    }

    // A gate of its own rather than the shared `--_show-shadow`: custom properties
    // inherit, so a parent whose shadow is switched off would silently clear this
    // element's too.
    &[data-show-shadow="false"] {
      --_sf-bc-show-shadow: none;
    }

    // Per-part fallbacks: without them one unset part invalidates the whole
    // `box-shadow` at computed-value time and it resolves to `none`.
    box-shadow: var(
      --_sf-bc-show-shadow,
      var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae, 0)))
        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br, 0)))
        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd, 0)))
        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr, transparent)))
    );

    // Height goes on the wrapper, not here: the builder emits the element's own
    // default styles as `#<id>{ height: auto }`, and an id selector outranks this
    // stylesheet — so a height set here could never win and the top/bottom resize
    // handles moved nothing. The wrapper is outside that rule's reach.
    > .wrapper {
      width: 100%;
      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, 100%))) !important;

      // Border, radius and shadow ride on the wrapper alongside the background so
      // the whole painted surface is one box.
      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));

      background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
      background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
      background-attachment: var(
        --_ctm-mob-dn-bd-at,
        var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))
      );
      // Position is stored as separate X and Y values, not one shorthand.
      background-position: var(
          --_ctm-mob-dn-bd-pn-x,
          var(--_ctm-tab-dn-bd-pn-x, var(--_ctm-dn-bd-pn-x, center))
        )
        var(--_ctm-mob-dn-bd-pn-y, var(--_ctm-tab-dn-bd-pn-y, var(--_ctm-dn-bd-pn-y, center)));

      // Per-part fallbacks: without them one unset part invalidates the whole
      // `box-shadow` at computed-value time and it resolves to `none`.
      box-shadow: var(
        --_sf-bc-show-shadow,
        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae, 0)))
          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br, 0)))
          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd, 0)))
          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr, transparent)))
      );
    }

    // Bundle name above the strip, matching the heading Bundle Details prints.
    .bundle__name {
      margin: 0 0 12px;
      font-size: 18px;
      font-weight: 600;
    }

    .bundle__categories {
      width: 100%;

      // Embla's own classes. The container has to be an explicit row — otherwise
      // the slides stack — and each slide needs a width of its own, or it
      // collapses to the widest word and the labels wrap per character.
      .embla__container {
        display: flex;
        flex-direction: row;
      }

      .embla__slide {
        flex: 0 0 auto;
        min-width: 240px;
      }

      // Arrow placement is driven by the carousel's control position, which the
      // shared EmblaCarouselBasic stamps onto `.embla` as `data-control-type`.
      // In "Side" mode — the default this element passes — it renders the two
      // buttons as bare children of `.embla` with no wrapper, so an earlier rule
      // written against an `.arrow-navigation` wrapper never matched and the
      // arrows stacked above and below the strip.
      //
      // Keyed and sized exactly as bundleDetails does it: the viewport gives up
      // 120px so the absolutely-placed arrows sit beside the cards rather than
      // on top of them.
      .embla {
        position: relative;

        &[data-control-type="Side"] {
          .embla__viewport {
            width: calc(100% - 120px);
            margin-inline: auto;
          }

          .left-button,
          .right-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }

          .left-button {
            left: 0;
          }

          .right-button {
            right: 0;
          }
        }
      }
    }

    .bundle__category {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      font: inherit;
      text-align: left;
      width: 100%;
      min-width: 240px;
      white-space: nowrap;

      // The open tab. Kept to a border rather than a fill so the strip stays quiet
      // against the product list below it.
      &[data-is-active="true"] {
        border-color: #1f1f1f;
      }
    }

    .bundle__category__image {
      flex: 0 0 auto;
      width: 56px;
      height: 56px;
      overflow: hidden;
      border-radius: 2px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .bundle__category__text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .bundle__category__name {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
    }

    .bundle__category__tick {
      color: #2e7d32;
    }

    .bundle__category__count,
    .bundle__category__selected {
      font-size: 12px;
      opacity: 0.75;
    }

    // Validation message for this category, shown after a failed add to cart.
    // `white-space: normal` because the card itself is nowrap.
    .bundle__category__error {
      margin-top: 4px;
      font-size: 12px;
      color: #c62828;
      white-space: normal;
    }
  }
}