/* =========================================================
   Cuddles — Editorial Festive Kidswear Hero
   Namespaced under .cuddles-hero — safe to drop in without
   touching the existing site CSS. Homepage only.
   ========================================================= */
.cuddles-hero{
  --ch-ivory:#FBF6EC;          /* warm cream base (not pure white) */
  --ch-ink:#1B1B1F;            /* charcoal primary text */
  --ch-ink-soft:#5A5560;       /* muted body text */
  --ch-pink:#F79BD3;           /* principal accent */
  --ch-magenta:#C9367F;        /* deep accent / highlight */
  --ch-glow:rgba(247,155,211,.45);
  --ch-radius:32px;
  --ch-ease:cubic-bezier(.22,.61,.36,1);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 12%, #FFF6FB 0%, var(--ch-ivory) 46%, var(--ch-ivory) 100%);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  padding:clamp(28px,4vw,64px) 0 clamp(40px,5vw,72px);
}

/* ---- decorative background (kept subtle, behind everything) ---- */
.cuddles-hero__decor{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cuddles-hero__glow{
  position:absolute;right:6%;top:8%;width:min(46vw,620px);aspect-ratio:1;
  background:radial-gradient(circle,var(--ch-glow) 0%,rgba(247,155,211,0) 68%);
  filter:blur(6px);
}
.cuddles-hero__confetti{position:absolute;right:2%;top:0;width:min(38vw,420px);height:auto;opacity:.7}

/* ---- layout: 45% content / 55% media, trust under content ---- */
.cuddles-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  grid-template-areas:
    "content media"
    "trust   media";
  align-items:center;
  column-gap:clamp(28px,4vw,64px);
  row-gap:26px;
  min-height:clamp(600px,72vh,760px);
}
.cuddles-hero__content{grid-area:content;max-width:600px}
.cuddles-hero__media{grid-area:media;align-self:center}
.cuddles-hero__trust{grid-area:trust;align-self:start}

/* ---- eyebrow ---- */
.cuddles-hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ch-magenta);margin-bottom:18px;
}
.cuddles-hero__dot{color:var(--ch-pink)}

/* ---- headline ---- */
.cuddles-hero__title{
  font-family:'Manrope','Plus Jakarta Sans',var(--ch-ink),sans-serif;
  font-weight:800;
  font-size:clamp(3.5rem,5.2vw,6.2rem);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--ch-ink);
  margin:0 0 20px;
}
.cuddles-hero__title-accent{color:var(--ch-magenta)}

/* ---- supporting text ---- */
.cuddles-hero__text{
  max-width:560px;
  font-size:clamp(1rem,1.15vw,1.15rem);
  line-height:1.6;
  color:var(--ch-ink-soft);
  margin:0 0 30px;
}

/* ---- CTAs ---- */
.cuddles-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.cuddles-hero__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 30px;border-radius:var(--ch-radius);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid transparent;
  transition:transform .25s var(--ch-ease),box-shadow .25s var(--ch-ease),background .2s,color .2s,border-color .2s;
}
.cuddles-hero__btn--primary{
  background:var(--ch-ink);color:#fff;
  box-shadow:0 10px 26px rgba(27,27,31,.18);
}
.cuddles-hero__btn--primary:hover{background:var(--ch-magenta);transform:translateY(-3px);box-shadow:0 16px 34px rgba(201,54,127,.28)}
.cuddles-hero__btn--secondary{
  background:transparent;color:var(--ch-ink);border-color:rgba(27,27,31,.22);
}
.cuddles-hero__btn--secondary:hover{border-color:var(--ch-magenta);color:var(--ch-magenta);transform:translateY(-3px)}
.cuddles-hero__btn:focus-visible,
.cuddles-hero__siblingbtn:focus-visible,
.cuddles-hero__sibling:focus-visible{
  outline:3px solid var(--ch-magenta);outline-offset:3px;border-radius:999px;
}

/* ---- sibling sets: prominent branded pill button ----
   Contrasting magenta fill so it clearly reads as a primary action next to the
   ink/outline hero buttons, not a plain text link. */
.cuddles-hero__siblingbtn{
  display:inline-flex;align-items:center;gap:10px;margin-top:4px;
  min-height:48px;padding:0 26px;border-radius:999px;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.2px;
  color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--ch-magenta),#e0559b);
  box-shadow:0 12px 28px rgba(201,54,127,.30);
  transition:transform .25s var(--ch-ease),box-shadow .25s var(--ch-ease),filter .2s;
}
.cuddles-hero__siblingbtn:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(201,54,127,.38);filter:saturate(1.06)}
.cuddles-hero__arrow{display:inline-flex}
.cuddles-hero__arrow svg{width:18px;height:18px;transition:transform .25s var(--ch-ease)}
.cuddles-hero__siblingbtn:hover .cuddles-hero__arrow svg{transform:translateX(5px)}

/* ---- trust row ---- */
.cuddles-hero__trust{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px 26px;
}
.cuddles-hero__trust li{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.9rem;font-weight:500;color:var(--ch-ink-soft);
}
.cuddles-hero__trust-ic{display:inline-flex;color:var(--ch-magenta)}
.cuddles-hero__trust-ic svg{width:22px;height:22px}

/* ======================= MEDIA / COLLAGE ======================= */
.cuddles-hero__media{position:relative}
.cuddles-hero__collage{
  position:relative;
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  grid-template-rows:1fr 1fr;
  gap:18px;
  height:clamp(520px,64vh,700px);
}
.cuddles-hero__card{
  position:relative;margin:0;overflow:hidden;
  border-radius:var(--ch-radius);
  background:var(--ch-ivory);
  box-shadow:0 18px 44px rgba(27,27,31,.14);
}
.cuddles-hero__card picture,.cuddles-hero__card img{display:block;width:100%;height:100%}
.cuddles-hero__card img{object-fit:cover;object-position:top center;transition:transform .6s var(--ch-ease)}
.cuddles-hero__card--main{grid-column:2;grid-row:1 / span 2;border-radius:calc(var(--ch-radius) + 4px)}
.cuddles-hero__card--top{grid-column:1;grid-row:1;align-self:start;margin-top:14px}
.cuddles-hero__card--bottom{grid-column:1;grid-row:2;align-self:end;margin-bottom:14px}

/* subtle collage motion on desktop hover */
@media (hover:hover) and (min-width:1025px){
  .cuddles-hero__collage:hover .cuddles-hero__card--main img{transform:scale(1.04)}
  .cuddles-hero__collage:hover .cuddles-hero__card--top{transform:translateY(-6px)}
  .cuddles-hero__collage:hover .cuddles-hero__card--bottom{transform:translateY(6px)}
  .cuddles-hero__card--top,.cuddles-hero__card--bottom{transition:transform .5s var(--ch-ease)}
}

/* floating "New Arrivals" label — top-left of the main card, clear of the sibling card */
.cuddles-hero__float-label{
  position:absolute;left:16px;top:16px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-radius:14px;padding:8px 14px;
  box-shadow:0 8px 22px rgba(27,27,31,.14);
  font-size:.74rem;font-weight:500;color:var(--ch-ink-soft);line-height:1.25;
}
.cuddles-hero__float-label b{display:block;font-family:'Manrope',sans-serif;font-size:.9rem;color:var(--ch-magenta)}

/* optional Sibling Edit floating card — bottom-left, away from the floating action buttons */
.cuddles-hero__sibling{
  position:absolute;left:-20px;bottom:-22px;z-index:3;
  display:flex;align-items:center;gap:12px;max-width:258px;
  background:#fff;border-radius:20px;padding:13px 15px;
  box-shadow:0 18px 44px rgba(27,27,31,.18);
  text-decoration:none;
  transition:transform .25s var(--ch-ease),box-shadow .25s var(--ch-ease);
}
.cuddles-hero__sibling:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(201,54,127,.22)}
.cuddles-hero__sibling-ic{
  flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--ch-pink);color:#fff;
}
.cuddles-hero__sibling-ic svg{width:24px;height:24px}
.cuddles-hero__sibling-txt{font-size:.76rem;color:var(--ch-ink-soft);line-height:1.35}
.cuddles-hero__sibling-txt b{display:block;font-family:'Manrope',sans-serif;font-size:.95rem;color:var(--ch-ink)}
.cuddles-hero__sibling-cta{display:inline-block;margin-top:4px;font-weight:600;color:var(--ch-magenta)}

/* ======================= ENTRANCE ANIMATION ======================= */
@keyframes ch-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ch-reveal{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
.cuddles-hero__eyebrow,
.cuddles-hero__title,
.cuddles-hero__text,
.cuddles-hero__actions,
.cuddles-hero__siblingbtn,
.cuddles-hero__trust{opacity:0;animation:ch-rise .7s var(--ch-ease) forwards}
.cuddles-hero__title{animation-delay:.08s}
.cuddles-hero__text{animation-delay:.16s}
.cuddles-hero__actions{animation-delay:.24s}
.cuddles-hero__siblingbtn{animation-delay:.30s}
.cuddles-hero__trust{animation-delay:.38s}
.cuddles-hero__card{opacity:0;animation:ch-reveal .8s var(--ch-ease) forwards}
.cuddles-hero__card--main{animation-delay:.12s}
.cuddles-hero__card--top{animation-delay:.26s}
.cuddles-hero__card--bottom{animation-delay:.36s}
.cuddles-hero__sibling{opacity:0;animation:ch-rise .7s var(--ch-ease) .5s forwards}

/* ======================= RESPONSIVE ======================= */
/* Tablet / small laptop: stack into single column, imagery below copy */
@media (max-width:1024px){
  .cuddles-hero__inner{
    grid-template-columns:1fr;
    grid-template-areas:"content" "media" "trust";
    row-gap:30px;min-height:0;text-align:left;
  }
  .cuddles-hero__content{max-width:640px}
  .cuddles-hero__collage{height:min(58vh,540px);max-width:620px}
  .cuddles-hero__confetti{width:min(52vw,360px)}
}

/* Mobile: intentional redesign — one dominant portrait + two small cards */
@media (max-width:680px){
  .cuddles-hero{padding:20px 0 34px}
  .cuddles-hero__inner{row-gap:24px;padding-left:20px;padding-right:20px}
  .cuddles-hero__title{font-size:clamp(2.5rem,11vw,4rem);line-height:1.02}
  .cuddles-hero__text{font-size:1rem;margin-bottom:24px}

  /* CTAs: two equal-width primary buttons side by side */
  .cuddles-hero__actions{gap:12px}
  .cuddles-hero__btn{flex:1 1 0;min-width:0;min-height:52px;padding:0 16px}
  /* Sibling button: full-width, clearly separated, below the two CTAs */
  .cuddles-hero__siblingbtn{display:flex;justify-content:center;width:100%;margin-top:12px}

  /* collage → one dominant portrait with two small overlapping cards */
  .cuddles-hero__collage{
    display:block;position:relative;height:auto;max-width:none;
    aspect-ratio:4/5;margin-top:6px;
  }
  .cuddles-hero__card--main{
    position:absolute;inset:0;width:76%;height:100%;margin-left:auto;border-radius:26px;
  }
  .cuddles-hero__card--top{
    position:absolute;top:6%;left:0;width:44%;height:38%;margin:0;z-index:2;border-radius:22px;
  }
  .cuddles-hero__card--bottom{
    position:absolute;bottom:6%;left:4%;width:40%;height:34%;margin:0;z-index:2;border-radius:22px;
  }
  .cuddles-hero__float-label{left:auto;right:10px;top:10px;bottom:auto;padding:7px 12px}
  .cuddles-hero__sibling{position:relative;right:auto;bottom:auto;margin:18px auto 0;max-width:none;width:100%}
  .cuddles-hero__confetti{display:none}
  .cuddles-hero__trust{gap:10px 18px}
  .cuddles-hero__trust li{font-size:.84rem}
}

@media (max-width:390px){
  .cuddles-hero__btn{font-size:.94rem;letter-spacing:-.01em}
  .cuddles-hero__title{font-size:clamp(2.3rem,12vw,3.4rem)}
}

/* ======================= REDUCED MOTION ======================= */
@media (prefers-reduced-motion:reduce){
  .cuddles-hero__eyebrow,.cuddles-hero__title,.cuddles-hero__text,
  .cuddles-hero__actions,.cuddles-hero__siblingbtn,.cuddles-hero__trust,
  .cuddles-hero__card,.cuddles-hero__sibling{animation:none;opacity:1;transform:none}
  .cuddles-hero__card img,.cuddles-hero__card,.cuddles-hero__arrow svg,
  .cuddles-hero__btn,.cuddles-hero__siblingbtn,.cuddles-hero__sibling{transition:none}
}