

/* =========================================
  GENERAL SECTION
========================================= */

.atai-catalog,
.atai-catalog * {
  box-sizing: border-box;
}

.atai-catalog {
  --atai-blue: #025fef;
  --atai-green: #35ca02;
  --atai-navy: #102e52;

  width: 100%;
  overflow: hidden;
  padding: 100px 5% 110px;

  font-family: "Inter", "Segoe UI",
               Arial, sans-serif;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(53,202,2,.05),
      transparent 35%
    ),
    radial-gradient(
      circle at 0% 90%,
      rgba(2,95,239,.05),
      transparent 40%
    ),
    #ffffff;

  scroll-margin-top: 100px;
}

.atai-catalog-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* =========================================
  SECTION HEADING
========================================= */

.atai-catalog-header {
  max-width: 850px;
  margin: 0 auto 65px;
  text-align: center;
}

.atai-catalog-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;

  color: #0876c9;
  margin-bottom: 22px;
}

.atai-catalog-line {
  display: inline-block;
  width: 35px;
  height: 2px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,#025fef,#35ca02
  );
}

.atai-catalog-header h2 {
  font-size: clamp(34px,4vw,55px) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: -1.5px;

  color: #0b2d55 !important;
  margin: 0 0 19px !important;
}

.atai-catalog-header h2 span {
  display: block;

  background: linear-gradient(
    110deg,
    #025fef,
    #008ed2 30%,
    #00b4a1 65%,
    #35ca02
  );

  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: ataiCatalogGradient 7s
             ease-in-out infinite;
}

@keyframes ataiCatalogGradient {
  0%,100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.atai-catalog-subtitle {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  color: #2374a9 !important;
  margin: 0 0 20px !important;
}

.atai-catalog-intro {
  max-width: 740px;
  margin: 0 auto !important;

  color: #70859a;
  font-size: 15px;
  line-height: 1.95;
}

/* DECORATIVE DOTS */

.atai-catalog-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 27px;
}

.atai-catalog-dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5def1;
}

.atai-catalog-dots i:nth-child(2) {
  width: 27px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,#025fef,#35ca02
  );
}

/* =========================================
  TOOLBAR
========================================= */

.atai-catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  padding: 23px 0;
  margin-bottom: 28px;

  border-bottom: 1px solid #e3edf6;
}

.atai-catalog-toolbar-title {
  display: flex;
  align-items: center;
  gap: 13px;
}

.atai-catalog-icon {
  display: grid;
  place-items: center;

  width: 43px;
  height: 43px;
  border-radius: 12px;

  font-size: 23px;
  color: #16b64c;
  background: #e8f8eb;
}

.atai-catalog-toolbar-title strong {
  display: block;
  font-size: 15px;
  color: #16385b;
  font-weight: 800;
  margin-bottom: 4px;
}

.atai-catalog-toolbar-title small {
  display: block;
  font-size: 12px;
  color: #8395a7;
}

.atai-catalog-total {
  display: inline-flex;
  padding: 10px 17px;

  background: #eff7ff;
  border: 1px solid #dbeafa;
  border-radius: 50px;

  color: #086bc5;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* =========================================
  PRODUCT GRID
========================================= */

.atai-catalog-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  gap: 24px;
}

.atai-catalog-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: #70859a;
}

/* =========================================
  PRODUCT CARD
========================================= */

.atai-catalog-card {
  min-width: 0;
  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;
  border: 1px solid #e5edf5;
  border-radius: 22px;

  box-shadow:
    0 10px 30px rgba(8,57,112,.045);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.atai-catalog-card:hover {
  transform: translateY(-8px);
  border-color: #baddec;

  box-shadow:
    0 22px 48px rgba(8,57,112,.13);
}

/* PRODUCT IMAGE */

.atai-catalog-image {
  height: 240px;
  position: relative;
  overflow: hidden;

  padding: 25px;

  background: linear-gradient(
    135deg,#f0f8ff,#eaf9f3
  );
}

.atai-catalog-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  position: relative;
  z-index: 1;

  border-radius: 9px;

  transition: transform .6s ease;
}

.atai-catalog-card:hover img {
  transform: scale(1.08);
}

/* PRODUCT NUMBER */

.atai-catalog-number {
  position: absolute;
  z-index: 3;

  top: 16px;
  left: 16px;

  padding: 8px 12px;

  border-radius: 30px;
  border: 1px solid #e4eff5;

  background: #ffffff;

  color: #0e6fbb;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1px;
}

/* IMAGE DECORATION */

.atai-catalog-image::after {
  content: "";
  position: absolute;

  width: 210px;
  height: 210px;
  right: -90px;
  bottom: -100px;

  border: 1px solid rgba(2,95,239,.1);
  border-radius: 50%;

  pointer-events: none;
}

/* IMAGE PLACEHOLDER FOR PRODUCTS 05-40 */

.atai-catalog-placeholder {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  text-align: center;
  color: #85a2bb;
}

.atai-catalog-placeholder-symbol {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 75px;
  height: 75px;

  border-radius: 20px;
  background: rgba(255,255,255,.6);
  border: 1px solid #d8e9f5;

  color: #87b0d3;
}

.atai-catalog-placeholder-symbol svg {
  width: 38px;
  height: 38px;
}

.atai-catalog-placeholder-text {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .4px;
}

/* =========================================
  PRODUCT CONTENT
========================================= */

.atai-catalog-content {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 25px 22px 27px;
}

.atai-catalog-packing {
  display: block;

  color: #14a77b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.1px;
  line-height: 1.5;

  margin-bottom: 12px;
}

.atai-catalog-content h3 {
  color: #133657 !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;

  margin: 0 0 13px !important;
}

.atai-catalog-content p {
  color: #75889c;
  font-size: 13px;
  line-height: 1.8;

  margin: 0;
  overflow-wrap: anywhere;
}

/* =========================================
  BOTTOM CONTACT CTA
========================================= */

.atai-catalog-bottom {
  display: flex;
  align-items: center;
  gap: 20px;

  margin-top: 55px;
  padding: 27px 30px;

  border-radius: 19px;
  border: 1px solid #e0eef5;

  background: linear-gradient(
    110deg,#f0f8ff,#f3fff4
  );
}

.atai-catalog-bottom-icon {
  flex-shrink: 0;

  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background: #e1f6e9;
  color: #1bb653;
  font-size: 27px;
}

.atai-catalog-bottom-text {
  flex: 1;
}

.atai-catalog-bottom-text strong {
  display: block;
  font-size: 15px;
  font-weight: 850;
  color: #123a5e;
  margin-bottom: 6px;
}

.atai-catalog-bottom-text span {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: #7b8fa3;
}

.atai-catalog-bottom > a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;

  padding: 15px 23px;
  border-radius: 40px;

  background: linear-gradient(
    110deg,#025fef,#00a2b7,#28bd48
  );

  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.atai-catalog-bottom > a:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(2,95,239,.2);
}

/* =========================================
  TABLET
========================================= */

@media (max-width: 1100px) {
  .atai-catalog-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

/* =========================================
  MOBILE
========================================= */

@media (max-width: 767px) {
  .atai-catalog {
    padding: 70px 20px;
  }

  .atai-catalog-header {
    margin-bottom: 40px;
  }

  .atai-catalog-header h2 {
    font-size: 34px !important;
    letter-spacing: -.5px;
  }

  .atai-catalog-subtitle {
    font-size: 16px !important;
  }

  .atai-catalog-intro {
    font-size: 14px;
  }

  .atai-catalog-eyebrow {
    font-size: 10px;
    letter-spacing: 1px;
    gap: 8px;
  }

  .atai-catalog-line {
    width: 20px;
  }

  .atai-catalog-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .atai-catalog-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .atai-catalog-image {
    height: 265px;
  }

  .atai-catalog-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 25px;
    gap: 15px;
  }

  .atai-catalog-bottom > a {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================
  REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
  .atai-catalog-header h2 span {
    animation: none;
  }

  .atai-catalog-card,
  .atai-catalog-image img,
  .atai-catalog-bottom > a {
    transition: none;
  }
}

/* All products use the same image and text layout; neutral placeholder is displayed for unuploaded images. */
.atai-catalog-card {height:100%;}
.atai-catalog-image img {z-index:1;}
.atai-catalog-grid > .atai-catalog-card {width:100%;}

/* Plugin media placeholder — same dimensions as original product photographs */
.atai-catalog-placeholder {position:relative; z-index:1; display:flex;align-items:center;justify-content:center;height:100%;min-height:140px;text-align:center;padding:22px;color:#7391a8;font-size:12px;font-weight:700;letter-spacing:.7px;}
.atai-catalog-placeholder svg {width:48px;height:48px;display:block;margin:0 auto 12px;stroke:#7caeca;fill:none;}
.atai-catalog-content p {white-space:pre-line;}
/* No visual changes to the original cards, heading or responsive breakpoints */

/* Company tabs: scoped to each catalog instance. */
.atai-company-tabs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 30px;padding:6px 0;}
.atai-catalog .atai-company-tab{appearance:none;cursor:pointer;padding:14px 22px;border:1px solid #dceaf5;border-radius:12px;background:#fff;color:#23445e;font:inherit;font-size:14px;font-weight:650;line-height:1.5;text-align:center;transition:background .2s,color .2s,box-shadow .2s;}
.atai-catalog .atai-company-tab[aria-selected="true"]{background:linear-gradient(110deg,#13b609,#006cf6);color:#fff;border-color:transparent;box-shadow:0 7px 20px #006cf61a;}
.atai-catalog .atai-company-tab:hover{border-color:#006cf6;}
.atai-catalog .atai-company-tab:focus-visible,.atai-company-panel:focus-visible{outline:3px solid #006cf6;outline-offset:4px;}
.atai-catalog .atai-company-panel[hidden]{display:none!important;}
.atai-company-panel .atai-catalog-loading{grid-column:1/-1;}
@media(max-width:767px){.atai-company-tabs{gap:8px;}.atai-catalog .atai-company-tab{width:100%;padding:13px 16px;font-size:13px;}}
@media(prefers-reduced-motion:reduce){.atai-catalog .atai-company-tab{transition:none;}}

/* Per-widget company tab alignment. */
.atai-company-tabs--left{justify-content:flex-start;}
.atai-company-tabs--center{justify-content:center;}
.atai-company-tabs--right{justify-content:flex-end;}
