/* ============================================================
   HOME / CATEGORIES - "Built for every kind of learner"
   4 product families (Dropiz, PocketAR, AR Wear, Accessories)
   showcasing the full logo palette around the center toy-stack
   banner. Owned by categories agent.

   Builds on the brand-tinted backgrounds already set in
   arkidzoo-brand-overrides.css (red-50 / purple-50 / yellow-50 /
   blue-50). Adds card chrome, type, ringed icons, hover lift,
   per-card accent rings, decorative ball polish.
   ============================================================ */

/* ---- SECTION ROOT - cream paper rhythm + decorative ball ---- */
body .elementor-element-ed89f35 {
  background: var(--surface-page) !important;
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
  position: relative;
  isolation: isolate;
}

/* Soft yellow sunburst behind the section so the 4 colored cards
   sit on a warm "spotlight" tile rather than flat cream. */
body .elementor-element-ed89f35::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 10% auto auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle,
                rgba(245, 197, 24, .18) 0%,
                rgba(245, 197, 24, 0) 70%);
  pointer-events: none;
}

/* Decorative ball PNG - keep but lift it with a soft yellow ring */
body .elementor-element-6cddc0d .pxl-item--image {
  filter: drop-shadow(0 8px 16px rgba(74, 32, 24, .15));
}

/* ---- HEADING + INTRO COPY ---------------------------------- */
body .elementor-element-399a4f4 .pxl-heading--text,
body .elementor-element-399a4f4 h2 {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-display-l) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-display) !important;
  color: var(--text-primary) !important;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto var(--space-3) !important;
}

body .elementor-element-b300150 .pxl-text-editor,
body .elementor-element-b300150 .pxl-text-editor p {
  font-family: var(--font-body) !important;
  font-size: var(--text-lead) !important;
  line-height: var(--leading-normal) !important;
  color: var(--text-secondary) !important;
  text-align: center;
  max-width: 56ch;
  margin: 0 auto var(--space-7) !important;
}

/* ---- GRID WRAPPER - 3-column rhythm around the banner ------ */
body .elementor-element-23299c3 .e-con-inner {
  gap: var(--space-6) !important;
  align-items: center !important;
}

body .elementor-element-2cbd3e0,
body .elementor-element-67b07fc {
  gap: var(--space-5) !important;
}

/* Center column with banner-center.webp - keep image untouched
   but give the column a clean centering pad + warm drop shadow
   that ties the toy stack to the colored cards on either side. */
body .elementor-element-57c178c {
  align-items: center !important;
  justify-content: center !important;
}

body .elementor-element-0c77fdf .pxl-item--image img {
  filter: drop-shadow(0 24px 48px rgba(74, 32, 24, .18))
          drop-shadow(0 4px 8px rgba(74, 32, 24, .08));
  transition: transform var(--duration-slow) var(--ease-out);
}

body .elementor-element-0c77fdf:hover .pxl-item--image img {
  transform: translateY(-6px) scale(1.01);
}

/* ---- CARD SHELL (all 4 product family boxes) --------------- */
/* Build on the tinted backgrounds in arkidzoo-brand-overrides.css.
   Promote the cards to confident product tiles: full radius card,
   warm shadow, padding, hover lift, snappy transition.

   Note: brand-overrides sets border-left + radius-md - this
   bumps it to radius-lg (28px cards) for a more "play" feel. */

body .elementor-element-ed89f35 .pxl-icon-box.pxl-icon-box3 {
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6) !important;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-bounce),
              box-shadow var(--duration-base) var(--ease-out) !important;
  position: relative;
  overflow: visible;
  min-height: 180px;
  display: flex;
  align-items: center;
}

body .elementor-element-ed89f35 .pxl-icon-box.pxl-icon-box3:hover {
  transform: translateY(-6px) rotate(-.3deg);
  box-shadow: var(--shadow-lg);
}

/* The inner layout - icon left for display-row-revert (left col),
   icon right for display-default (right col). Keep template flow
   but tighten spacing and align middle. */
body .elementor-element-ed89f35 .pxl-icon-box3 .pxl-item--inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 !important;
}

body .elementor-element-ed89f35 .pxl-icon-box3.display-default .pxl-item--inner {
  flex-direction: row-reverse;
}

/* ---- ICON CONTAINER - colored ring per card ---------------- */
/* Each icon sits inside a circular tinted disc with a ring in the
   card's signature color. Echoes the pillars row styling above. */

body .elementor-element-ed89f35 .pxl-icon-box3 .pxl-item--icon {
  background: var(--color-paper-raised) !important;
  border-radius: 50%;
  padding: var(--space-3);
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-bounce);
}

body .elementor-element-ed89f35 .pxl-icon-box3:hover .pxl-item--icon {
  transform: rotate(-6deg) scale(1.05);
}

body .elementor-element-ed89f35 .pxl-icon-box3 .pxl-item--icon img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
}

/* Per-card icon ring + accent border tint */
body .elementor-element-95ec026 .pxl-item--icon {
  box-shadow: 0 0 0 4px var(--color-brand), 0 8px 16px rgba(230, 59, 59, .18);
}
body .elementor-element-7155172 .pxl-item--icon {
  box-shadow: 0 0 0 4px var(--color-purple-500), 0 8px 16px rgba(111, 42, 140, .18);
}
body .elementor-element-7bbd7bd .pxl-item--icon {
  box-shadow: 0 0 0 4px var(--color-yellow-500), 0 8px 16px rgba(245, 197, 24, .22);
}
body .elementor-element-3a324eb .pxl-item--icon {
  box-shadow: 0 0 0 4px var(--color-blue-500), 0 8px 16px rgba(46, 137, 216, .18);
}

/* ---- CARD TYPE - Fredoka title, Nunito tagline ------------- */
body .elementor-element-ed89f35 .pxl-icon-box3 .pxl-item--title,
body .elementor-element-ed89f35 .pxl-icon-box3 .pxl-item--title span {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-h4) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text-primary) !important;
  margin: 0 0 var(--space-2) !important;
}

body .elementor-element-ed89f35 .pxl-icon-box3 .pxl-item--excerpt {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-s) !important;
  line-height: var(--leading-normal) !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* Per-card title accent on hover - title picks up the card color */
body .elementor-element-95ec026:hover .pxl-item--title span { color: var(--color-brand) !important; }
body .elementor-element-7155172:hover .pxl-item--title span { color: var(--color-purple-500) !important; }
body .elementor-element-7bbd7bd:hover .pxl-item--title span { color: var(--color-yellow-700) !important; }
body .elementor-element-3a324eb:hover .pxl-item--title span { color: var(--color-blue-500) !important; }

/* ---- RESPONSIVE - collapse 3 cols -> stacked on tablet/mob -- */
@media (max-width: 1024px) {
  body .elementor-element-ed89f35 .pxl-icon-box.pxl-icon-box3 {
    min-height: 0;
    padding: var(--space-4) var(--space-5) !important;
  }
  body .elementor-element-ed89f35::before {
    width: 320px;
    height: 320px;
  }
}

@media (max-width: 640px) {
  body .elementor-element-ed89f35 .pxl-icon-box3 .pxl-item--icon {
    width: 80px;
    height: 80px;
  }
  body .elementor-element-ed89f35 .pxl-icon-box3 .pxl-item--icon img {
    width: 56px !important;
    height: 56px !important;
  }
  body .elementor-element-ed89f35 .pxl-icon-box3.display-default .pxl-item--inner {
    flex-direction: row;
  }
}