/* Listing add-to-cart: pills, price row, compact −|Köp|+ buy bar */

.frodig-listing-atc {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10, 0.5rem);
  width: 100%;
  margin-top: var(--wp--preset--spacing--10, 0.5rem);
}

.kb-splide .splide__arrow--prev,
.kb-splide .splide__arrow--next {
  top: 30%;
  background-color: transparent;
  color: var(--wp--preset--color--rust);
}

.kb-splide .splide__arrow--prev:focus-visible,
.kb-splide .splide__arrow--next:focus-visible {
  background-color: var(--wp--preset--color--rust);
  color: var(--wp--preset--color--white);
}

.kb-splide .splide__arrow--prev:focus:not(:focus-visible),
.kb-splide .splide__arrow--next:focus:not(:focus-visible) {
  background-color: transparent;
  color: var(--wp--preset--color--rust);
  outline: none;
}

@media (hover: hover) {
  .kb-splide .splide__arrow--prev:hover,
  .kb-splide .splide__arrow--next:hover {
    background-color: var(--wp--preset--color--rust);
    color: var(--wp--preset--color--white);
  }
}

.kb-splide .splide__arrow--prev {
  left: -2.8125rem;
}

.kb-splide .splide__arrow--next {
  right: -2.8125rem;
}

/*
 * Named anchor for overlay arrow height. Last non-clone image wins; cards in a
 * carousel share image height so that matches the visible photos.
 */
.kt-blocks-product-carousel-block
  .splide__slide:not(.splide__slide--clone)
  .woocommerce-loop-product__link
  > img {
  anchor-name: --frodig-carousel-img;
}

/*
 * Wide layout is 1280px. Arrows sit 2.8125rem outside the carousel, so below
 * ~1440px there is no margin for them and they overflow the viewport. Pull
 * them in; on product carousels stretch to the image so they overlay the photo.
 */
@media (max-width: 1439px) {
  .kb-splide .splide__arrow--prev {
    left: 0;
  }

  .kb-splide .splide__arrow--next {
    right: 0;
  }

  /* Etikett slides pad the li; keep arrows on the photo, not in the gutter. */
  .kt-blocks-product-carousel-block[class*="is-style-frodig-label"]
    .kb-splide
    .splide__arrow--prev {
    left: var(--frodig-label-slide-pad-inline, 0.375rem);
  }

  .kt-blocks-product-carousel-block[class*="is-style-frodig-label"]
    .kb-splide
    .splide__arrow--next {
    right: var(--frodig-label-slide-pad-inline, 0.375rem);
  }
}

@supports (height: anchor-size(--frodig-carousel-img height)) {
  @media (max-width: 1439px) {
    .kt-blocks-product-carousel-block .kb-splide .splide__arrow--prev,
    .kt-blocks-product-carousel-block .kb-splide .splide__arrow--next {
      top: 0;
      top: anchor(--frodig-carousel-img top);
      transform: none;
      height: anchor-size(--frodig-carousel-img height);
      border-radius: 0;
      z-index: 2;
      pointer-events: none;
    }

    .kt-blocks-product-carousel-block .kb-splide .splide__arrow svg {
      position: relative;
      z-index: 1;
    }

    .kt-blocks-product-carousel-block .kb-splide .splide__arrow::after {
      content: "";
      position: absolute;
      inset-inline: -2px;
      top: 50%;
      height: 66.667%;
      translate: 0 -50%;
      pointer-events: auto;
    }

    .kt-blocks-product-carousel-block .kb-splide .splide__arrow--next {
      container-type: size;
    }

    .kt-blocks-product-carousel-block .kb-splide .splide__arrow--next::after {
      clip-path: inset(max(0px, calc(3.25rem - 16.667cqh)) 0 0 0);
    }

    .kt-blocks-product-carousel-block .kb-splide .splide__arrow--prev:hover,
    .kt-blocks-product-carousel-block .kb-splide .splide__arrow--next:hover,
    .kt-blocks-product-carousel-block .kb-splide .splide__arrow--prev:focus,
    .kt-blocks-product-carousel-block .kb-splide .splide__arrow--next:focus {
      background-color: transparent;
      color: var(--wp--preset--color--rust);
      outline: none;
    }

    .kt-blocks-product-carousel-block
      .kb-splide
      .splide__arrow--prev:focus-visible,
    .kt-blocks-product-carousel-block
      .kb-splide
      .splide__arrow--next:focus-visible {
      background-color: color-mix(
        in srgb,
        var(--wp--preset--color--rust) 40%,
        transparent
      );
    }
  }
}

@media (hover: hover) {
  @supports (height: anchor-size(--frodig-carousel-img height)) {
    @media (max-width: 1439px) {
      .kt-blocks-product-carousel-block .kb-splide .splide__arrow--prev:hover,
      .kt-blocks-product-carousel-block .kb-splide .splide__arrow--next:hover {
        background-color: color-mix(
          in srgb,
          var(--wp--preset--color--rust) 40%,
          transparent
        );
      }
    }
  }
}

.frodig-listing-atc__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  /* Pushed to card bottom when ATC is a flex:1 column (see grid/carousel rules). */
  margin-top: auto;
}

.frodig-listing-atc__price {
  font-family: var(--wp--preset--font-family--bogart);
  font-size: var(--wp--preset--font-size--medium-large);
  font-weight: 600;
  color: var(--wp--preset--color--organic-green);
  line-height: 1.2;
}

/* Beat Woo loop `.price { font-size: 24px }` when variation markup injects .price. */
.woocommerce ul.products li.product .frodig-listing-atc__price,
.woocommerce ul.products li.product .frodig-listing-atc__price .price {
  font-size: var(--wp--preset--font-size--medium-large);
}

.frodig-listing-atc__price .amount {
  font-weight: 600;
}

.frodig-listing-atc__price del {
  color: var(--wp--preset--color--rust);
  opacity: 0.65;
  font-weight: 500;
  text-decoration: line-through;
}

.frodig-listing-atc__price del .amount {
  font-weight: 500;
}

.frodig-listing-atc__price ins {
  color: var(--wp--preset--color--rust);
  text-decoration: none;
  font-weight: 600;
}

.frodig-listing-atc__attrs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

fieldset.frodig-listing-atc__attr {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.frodig-listing-atc__attr-label {
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--wp--preset--color--forest-night);
  margin-bottom: 0.15rem;
}

.frodig-listing-atc__pills {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Keep radios focusable but visually hidden (same clip as core screen-reader-text). */
.frodig-listing-atc__pill-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.frodig-listing-atc__pill {
  --frodig-listing-atc-pill-border: 2px;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-width: var(--frodig-listing-atc-pill-border);
  border-style: solid;
  border-color: var(--wp--preset--color--sage);
  border-radius: 2px;
  background: transparent;
  color: var(--wp--preset--color--sage);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease;
}

/* Beat Woo `.woocommerce-page label { margin-bottom: .7em }` (0,2,1). */
.woocommerce-page .frodig-listing-atc__pill,
.frodig-listing-atc label.frodig-listing-atc__pill {
  margin-bottom: 0;
}

.frodig-listing-atc__pill:hover {
  border-color: var(--wp--preset--color--organic-green);
  background: var(--wp--preset--color--organic-green);
  color: var(--wp--preset--color--white);
}

.frodig-listing-atc__pill-input:checked + .frodig-listing-atc__pill {
  border-color: var(--wp--preset--color--organic-green);
  background: var(--wp--preset--color--organic-green);
  color: var(--wp--preset--color--white);
}

.frodig-listing-atc__pill-input:checked + .frodig-listing-atc__pill:hover {
  border-color: var(--wp--preset--color--moss);
  background: var(--wp--preset--color--moss);
  color: var(--wp--preset--color--white);
}

/* Mouse click: no focus ring on the sibling label / buy controls. */
.frodig-listing-atc__pill-input:focus:not(:focus-visible)
  + .frodig-listing-atc__pill,
.frodig-listing-atc__qty-btn:focus:not(:focus-visible),
.frodig-listing-atc__button:focus:not(:focus-visible),
.frodig-listing-atc__select:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Keyboard: ring outside the stamp so it does not thicken the border. */
.frodig-listing-atc__pill-input:focus-visible + .frodig-listing-atc__pill {
  outline: 2px solid var(--wp--preset--color--organic-green);
  outline-offset: 3px;
}

/*
 * Qty / Köp — background shift on keyboard focus (no outline; buy bar is
 * overflow:hidden and rings look like dividers between − / Köp / +).
 */
.frodig-listing-atc__qty-btn:focus-visible,
.frodig-listing-atc__button:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--wp--preset--color--moss);
  color: var(--wp--preset--color--white);
}

.frodig-listing-atc__select:focus-visible {
  outline: 2px solid var(--wp--preset--color--organic-green);
  outline-offset: 2px;
}

.frodig-listing-atc__select {
  max-width: 100%;
  font-size: 0.8125rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--wp--preset--color--sage);
  border-radius: 3px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--forest-night);
  font-family: var(--wp--preset--font-family--body);
}

.frodig-listing-atc__buy {
  --frodig-listing-atc-buy-h: 2rem;
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  height: var(--frodig-listing-atc-buy-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--wp--preset--color--organic-green);
  color: var(--wp--preset--color--white);
  overflow: hidden;
  box-sizing: border-box;
}

.frodig-listing-atc__qty-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  min-width: 2rem;
  min-height: 2rem;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  outline-color: var(--wp--preset--color--organic-green);
  transition: background-color 0.15s ease;
}

.frodig-listing-atc__qty-btn:hover:not(:disabled) {
  background: var(--wp--preset--color--moss);
}

.frodig-listing-atc__qty-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.frodig-listing-atc__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  height: 100%;
  min-height: var(--frodig-listing-atc-buy-h);
  padding: 0 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
}

.frodig-listing-atc__button:hover:not(:disabled) {
  background: var(--wp--preset--color--moss);
  color: var(--wp--preset--color--white);
}

.frodig-listing-atc__button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.frodig-listing-atc__button.loading {
  opacity: 0.7;
}

/* Belt-and-suspenders: Woo may inject "Visa varukorg" after AJAX add-to-cart. */
.frodig-listing-atc .added_to_cart {
  display: none;
}

.frodig-listing-atc__pill-input:disabled + .frodig-listing-atc__pill,
.frodig-listing-atc__pill.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--wp--preset--color--sage);
  background: transparent;
  color: var(--wp--preset--color--sage);
  text-decoration: line-through;
}

.frodig-listing-atc__pill-input:disabled + .frodig-listing-atc__pill:hover,
.frodig-listing-atc__pill.is-disabled:hover {
  border-color: var(--wp--preset--color--sage);
  background: transparent;
  color: var(--wp--preset--color--sage);
}

.frodig-listing-atc__select option:disabled {
  color: var(--wp--preset--color--sage);
}

.frodig-listing-atc__more {
  display: inline-block;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--organic-green);
  text-decoration: underline;
}

.frodig-listing-atc__more:hover {
  color: var(--wp--preset--color--moss);
}

/*
 * Hide Woo/Kadence loop price when listing ATC owns live pricing.
 * Loop price sits inside .woocommerce-loop-product__link (not a direct
 * li.product child). Beat Woo `.woocommerce ul.products li.product .price`.
 */
.woocommerce ul.products li.product:has(.frodig-listing-atc) > .price,
.woocommerce
  ul.products
  li.product:has(.frodig-listing-atc)
  .woocommerce-loop-product__link
  > .price {
  display: none;
}

/*
 * height:100% on the product link was for absolute-positioned loop ATC.
 * With ATC in normal flow as a sibling, that stretch leaves a gap under the
 * title and pushes ATC below the card. Keep the link content-sized.
 */
.woocommerce
  ul.products
  li.product:has(.frodig-listing-atc)
  a.woocommerce-loop-product__link {
  height: auto;
}

/*
 * Pin price + buy bar to the card bottom without touching ul.products display.
 * Forcing flex/wrap on ul.products breaks Splide (list is .splide__list) and
 * Kadence query grids (kb-query-grid-wrap). Rely on existing list layout; only
 * make the card a column so .frodig-listing-atc can grow and push the price-row.
 * Also cover Woo Product Collection (related/upsells on single product use
 * ul.wc-block-product-template, not ul.products).
 */
.woocommerce ul.products li.product:has(.frodig-listing-atc),
.kt-blocks-product-carousel-block li.product:has(.frodig-listing-atc),
.wc-block-product-template
  li.wc-block-product:has(.frodig-listing-atc) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.woocommerce
  ul.products
  li.product:has(.frodig-listing-atc)
  .frodig-listing-atc,
.kt-blocks-product-carousel-block
  li.product:has(.frodig-listing-atc)
  .frodig-listing-atc,
.wc-block-product-template
  li.wc-block-product:has(.frodig-listing-atc)
  .frodig-listing-atc {
  /* flex-grow fills the card; do not pair with margin-top:auto on this same node. */
  flex: 1 1 auto;
}

/*
 * Product Collection wraps listing ATC in .frodig-add-to-cart-block (block render).
 * That wrapper is the flex child of the card — grow it so ATC can fill and pin
 * .frodig-listing-atc__price-row with margin-top:auto.
 */
.wc-block-product-template
  li.wc-block-product:has(.frodig-listing-atc)
  > .frodig-add-to-cart-block {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/*
 * Carousel equal-height cards + bottom-aligned buy bar.
 * Woo sets float:left on li.product (woocommerce-layout.css). That wins over a
 * weak carousel selector and stops Splide's flex list from stretching slides, so
 * ATC never gets leftover height and .frodig-listing-atc__price-row margin-top:auto
 * stays 0. Beat Woo specificity, drop height:100% (blocks stretch when the list
 * height is content-sized), then stretch + existing ATC flex grow does the rest.
 *
 * Product Collection (is-flex-container) is the same: parent height is
 * content-sized, so height:100% prevents stretch — use height:auto + stretch.
 */
.kt-blocks-product-carousel-block .splide__list {
  align-items: stretch;
}

.kt-blocks-product-carousel-block
  .woocommerce
  ul.products
  li.product:has(.frodig-listing-atc),
.wc-block-product-template
  li.wc-block-product:has(.frodig-listing-atc) {
  float: none;
  align-self: stretch;
  height: auto;
  margin-bottom: 0;
}

/* Carousel: ATC in normal flow under image/title (not absolute corner CTA) */
.kt-blocks-product-carousel-block .frodig-listing-atc {
  position: relative;
  bottom: auto;
  right: auto;
  z-index: 1;
}

.kt-blocks-product-carousel-block .frodig-listing-atc__button {
  position: static;
}

/*
 * FiboSearch details panel: compact layout in the narrow side panel.
 * Hide FiboSearch’s static price when listing ATC owns live pricing.
 */
.dgwt-wcas-details-inner-product .frodig-listing-atc {
  margin-top: 0;
}

.dgwt-wcas-details-inner-product .frodig-listing-atc__price-row {
  margin-top: 0;
  flex-wrap: wrap;
}

.dgwt-wcas-details-inner-product .frodig-listing-atc__pills {
  flex-wrap: wrap;
}

.dgwt-wcas-details-inner-product:has(.frodig-listing-atc) .dgwt-wcas-pd-price {
  display: none;
}

/*
 * Kadence mobile (≤767px): stack price above buy bar; stretch buy bar full width.
 * Tablet/desktop shop keeps width: max-content beside the price.
 */
@media (max-width: 767px) {
  .frodig-listing-atc {
    margin-top: 4px;
  }

  .frodig-listing-atc__price-row {
    flex-direction: column;
    align-items: stretch;
  }

  .frodig-listing-atc__buy {
    width: 100%;
  }
}