/* Lightweight parent product category cards for the Webrra Elementor widget. */
.webrra-parent-categories {
  --wpcat-columns: 4;
  --wpcat-column-gap: 28px;
  --wpcat-row-gap: 32px;
  --wpcat-card-height: 94px;
  --wpcat-card-bg: #fff;
  --wpcat-border-width: 1px;
  --wpcat-border: rgba(20, 48, 83, .09);
  --wpcat-border-hover: #8bc8ff;
  --wpcat-border-active: #FF8A00;
  --wpcat-image-size: 88px;
  --wpcat-image-offset: 27px;
  --wpcat-image-padding: 7px;
  --wpcat-image-x: 50%;
  --wpcat-image-y: 50%;
  --wpcat-image-frame-width: 4px;
  --wpcat-image-frame-color: #fff;
  --wpcat-image-bg: #f7f9fc;
  --wpcat-image-active-bg: #FF8A00;
  --wpcat-dot: #FF8A00;
  --wpcat-dot-size: 7px;
  --wpcat-arrow-size: 28px;
  --wpcat-arrow-icon-size: 16px;
  --wpcat-arrow: #25354a;
  --wpcat-arrow-bg: rgba(255, 255, 255, 0);
  --wpcat-arrow-hover: #fff;
  --wpcat-arrow-hover-bg: #0071e3;
  --wpcat-arrow-active: #fff;
  --wpcat-arrow-active-bg: #FF8A00;
  --wpcat-lift: 3px;
  width: 100%;
  max-width: 1240px;
  margin: 24px auto;
  padding: 28px 30px;
  border: 1px solid rgba(0, 113, 227, .10);
  border-radius: 28px;
  background: radial-gradient(circle at 8% 8%, rgba(10, 132, 255, .075), transparent 24%), #fff;
  box-shadow: 0 28px 76px rgba(15, 68, 122, .10), 0 3px 14px rgba(16, 35, 71, .04);
  color: #172337;
  font-family: inherit;
  box-sizing: border-box;
}

.webrra-parent-categories *,
.webrra-parent-categories *::before,
.webrra-parent-categories *::after {
  box-sizing: border-box;
}

.webrra-pcat-grid {
  display: grid;
  grid-template-columns: repeat(var(--wpcat-columns), minmax(0, 1fr));
  gap: var(--wpcat-row-gap) var(--wpcat-column-gap);
  padding-inline-start: var(--wpcat-image-offset);
}

.webrra-pcat-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: var(--wpcat-card-height);
  align-items: center;
  padding: 14px 67px 14px 42px;
  border: var(--wpcat-border-width) solid var(--wpcat-border);
  border-radius: 20px;
  outline: 0;
  color: #172337;
  background: var(--wpcat-card-bg);
  box-shadow: 0 10px 28px rgba(16, 35, 71, .07), 0 2px 7px rgba(16, 35, 71, .035);
  text-decoration: none !important;
  isolation: isolate;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
  -webkit-tap-highlight-color: transparent;
}

.webrra-pcat-card:hover,
.webrra-pcat-card:focus-visible {
  z-index: 4;
  border-color: var(--wpcat-border-hover);
  color: #172337;
  box-shadow: 0 15px 32px rgba(0, 113, 227, .11), 0 2px 6px rgba(16, 35, 71, .03);
  text-decoration: none !important;
  transform: translateY(calc(-1 * var(--wpcat-lift)));
}

.webrra-pcat-card:focus-visible {
  outline: 3px solid rgba(0, 113, 227, .18);
  outline-offset: 3px;
}

.webrra-pcat-card.is-active,
.webrra-pcat-card.is-more-highlighted {
  border-color: var(--wpcat-border-active);
  box-shadow: 0 12px 30px rgba(219, 158, 8, .10), 0 2px 6px rgba(16, 35, 71, .025);
}

.webrra-pcat-thumb {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(-1 * var(--wpcat-image-offset));
  display: grid;
  width: var(--wpcat-image-size);
  height: var(--wpcat-image-size);
  padding: var(--wpcat-image-padding);
  place-items: center;
  overflow: hidden;
  border: var(--wpcat-image-frame-width) solid var(--wpcat-image-frame-color);
  border-radius: 50%;
  background: var(--wpcat-image-bg);
  box-shadow: 0 12px 25px rgba(16, 35, 71, .12);
  transform: translateY(-50%);
  transition: background .24s ease, box-shadow .24s ease, transform .24s ease;
}

.webrra-pcat-card:hover .webrra-pcat-thumb {
  transform: translateY(-50%) scale(1.035);
}

.webrra-pcat-card.is-active .webrra-pcat-thumb,
.webrra-pcat-card.is-more-highlighted .webrra-pcat-thumb {
  background: var(--wpcat-image-active-bg);
  box-shadow: 0 14px 30px rgba(255, 138, 0, .24);
}

.webrra-pcat-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  object-fit: contain;
  object-position: var(--wpcat-image-x) var(--wpcat-image-y);
  box-shadow: none;
}

.webrra-pcat-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  color: #fff;
  background: linear-gradient(145deg, #168df0, #005fc8);
  font-size: calc(var(--wpcat-image-size) * .30);
  font-weight: 900;
}

.webrra-pcat-copy {
  display: block;
  min-width: 0;
  text-align: right;
}

.webrra-pcat-title {
  display: block;
  overflow: hidden;
  color: #172337;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.65;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webrra-pcat-count {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  overflow: hidden;
  color: #a1a9b5;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webrra-pcat-count > i {
  display: block;
  width: var(--wpcat-dot-size);
  height: var(--wpcat-dot-size);
  flex: 0 0 var(--wpcat-dot-size);
  border-radius: 50%;
  background: var(--wpcat-dot);
  box-shadow: 0 0 0 3px rgba(246, 185, 31, .10);
}

.webrra-pcat-count > b {
  color: #667387;
  font: inherit;
  font-weight: 850;
}

.webrra-pcat-arrow {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 13px;
  display: grid;
  width: var(--wpcat-arrow-size);
  height: var(--wpcat-arrow-size);
  padding: 0;
  place-items: center;
  border-radius: 50%;
  color: var(--wpcat-arrow);
  background: var(--wpcat-arrow-bg);
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.webrra-pcat-arrow > i {
  display: block;
  width: var(--wpcat-arrow-icon-size);
  height: var(--wpcat-arrow-icon-size);
  background: currentColor;
  -webkit-mask: url("iconscout-arrow-up-left.svg") center / contain no-repeat;
  mask: url("iconscout-arrow-up-left.svg") center / contain no-repeat;
}

.webrra-pcat-card:hover .webrra-pcat-arrow,
.webrra-pcat-card:focus-visible .webrra-pcat-arrow {
  color: var(--wpcat-arrow-hover);
  background: var(--wpcat-arrow-hover-bg);
  transform: translate(-2px, -2px);
}

.webrra-pcat-card.is-active .webrra-pcat-arrow,
.webrra-pcat-card.is-more-highlighted .webrra-pcat-arrow {
  color: var(--wpcat-arrow-active);
  background: var(--wpcat-arrow-active-bg);
  box-shadow: 0 7px 16px rgba(255, 138, 0, .22);
}

.webrra-pcat-more-icon {
  display: block;
  width: 42%;
  height: 42%;
  color: #fff;
  background: currentColor;
  -webkit-mask: url("iconscout-apps.svg") center / contain no-repeat;
  mask: url("iconscout-apps.svg") center / contain no-repeat;
}

.webrra-pcat-more.is-more-highlighted .webrra-pcat-count {
  color: #a6812a;
}

.webrra-pcat-empty {
  padding: 18px;
  border: 1px dashed rgba(0, 113, 227, .24);
  border-radius: 16px;
  color: #667792;
  background: #f7fbff;
  text-align: center;
  font-size: 13px;
}

@media (max-width: 1024px) {
  .webrra-parent-categories {
    --wpcat-columns: 2;
    --wpcat-column-gap: 24px;
    --wpcat-row-gap: 28px;
    --wpcat-card-height: 92px;
    --wpcat-image-size: 84px;
    --wpcat-image-offset: 25px;
    padding: 24px 22px;
  }
}

@media (max-width: 767px) {
  .webrra-parent-categories {
    --wpcat-columns: 1;
    --wpcat-column-gap: 18px;
    --wpcat-row-gap: 24px;
    --wpcat-card-height: 90px;
    --wpcat-image-size: 80px;
    --wpcat-image-offset: 23px;
    margin: 18px auto;
    padding: 20px 16px;
    border-radius: 22px;
  }

  .webrra-pcat-card {
    padding: 12px 62px 12px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .webrra-pcat-card,
  .webrra-pcat-thumb,
  .webrra-pcat-arrow {
    transition-duration: .01ms !important;
  }
}