/* ==========================================================================
   PULSEHEAVEN – HOME TEMPLATE
   ========================================================================== */

/* -------------------------------------------------------------------------
   0.  Astra container fix → full‑bleed hero without side gaps
   ---------------------------------------------------------------------- */
body.page-template-ph-home #content > .ast-container{
  display:block;
}
body.page-template-ph-home #content .ast-container{
  max-width:none;             /* kill theme width limit  */
  padding:0;                  /* kill side paddings      */
}


/* ================= HERO: centered copy with left + right art ================= */


.ph-hero{ position:relative; width:100%; background:#fff; overflow:visible; }
.ph-hero--image{
  margin-bottom: 4em;
  padding:20px 20px 0; /* fixed 20px top padding */
}


.ph-hero--image .ph-hero-inner{
  position:relative; max-width:1200px; margin:0 auto; min-height:clamp(520px,46vw,760px);
}

/* centered copy, wider measure to avoid early break */
.ph-hero--image .ph-hero-copy{
  position:relative; z-index:2;
  max-width:clamp(760px,72vw,960px);
  margin:0 auto; padding:0 20px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(24px,3vw,40px);
}
.ph-hero--image .ph-hero-copy h1{
  font-weight:700; font-size:clamp(2rem,3.5vw,2.8rem); line-height:1.15; margin:0; color:#000;
}
.ph-hero--image .ph-hero-copy h1 .break{ display:block; }
.ph-hero--image .ph-hero-copy h2{ margin:0; }

/* art base */
.ph-hero-art{ position:absolute; z-index:1; pointer-events:none; }
.ph-hero-art img{ width:clamp(340px,32vw,480px); height:auto; display:block; }

/* LEFT: woman */
.ph-hero-art--left {
  top:clamp(10px, 1.5vw, 28px);  /* nudged down a bit */
  left:clamp(-40px, 4vw, 60px);
}

/* RIGHT: man */
.ph-hero-art--right {
  top:clamp(-4px, 0.5vw, 16px);   /* keep current vertical alignment */
  right:clamp(-20px, 2vw, 40px);  /* pulled further outward */
}



/* tighten hero cutouts inward between ~1120px–1310px */
@media (min-width:1120px) and (max-width:1310px){

  .ph-hero-art--left {
    left:clamp(60px, 8vw, 100px);   /* pushes the woman inward */
  }

  .ph-hero-art--right {
    right:clamp(60px, 8vw, 100px);  /* pushes the man inward */
  }

  /* keep button overlap consistent */
  .ph-hero-buttons .ph-btn:first-child {
    transform:translateX(clamp(-28px,-2.4vw,-44px));
  }
  .ph-hero-buttons .ph-btn:last-child {
    transform:translateX(clamp(28px, 2.4vw, 44px));
  }
}


/* Toggle: desktop vs mobile hero */
.ph-hero--mobile{ display:none; }
@media (max-width:61.24em){
  .ph-hero--image{ display:none; }   /* your existing desktop block */
  .ph-hero--mobile{ display:block; }
}

/* Mobile layout */
@media (max-width:61.24em){
  .ph-hero--mobile{ 
    background:#fff; 
  padding:20px 0px 0; /* fixed 20px top padding */
}



  /* Copy container — same heading styles as web, just full width */
  .ph-hero--mobile .ph-hero-copy{
    width:100%;
      max-width: 60ch;   /* around 20 characters wide */
  margin: 0 auto;
  white-space: normal;
    text-align:center;
  }
.ph-hero--mobile .ph-hero-copy :where(h2) {
  margin-bottom: 0;
}


  .ph-hero--mobile .ph-hero-copy h1{
    font-weight:700;                        /* ensure bold */
    width:100%;
  }

  /* two equal columns per row */
  .ph-hero-rows{ 
    display:flex; 
    flex-direction:column; 

  }
  .ph-hero-row{
    position:relative;                      /* needed for absolute buttons */
    display:grid; 
    grid-template-columns:1fr 1fr; 
    align-items:center; 
    justify-items:center;
    width:min(92vw,640px); 
    margin:0 auto;
  }



/* allow overflow and break the theme's max-width cap */
.ph-hero--mobile .ph-hero-fig{ overflow:visible; }
.ph-hero--mobile .ph-hero-fig img{
  max-width:none !important;               
  width:clamp(300px, 62vw, 500px);   /* larger min, wider scaling, bigger max */
  height:auto;
  display:block;
}



/* outward nudges like your mockup */
.ph-hero-row--1 .ph-hero-fig{ 
  grid-column:1; 
  transform: translateX(-10%);  /* was none → pushes left image outward */
}
  .ph-hero-row--2 .ph-hero-fig{ grid-column:2; } /* image right */

  /* buttons centered on PAGE */
  .ph-hero-cta{ 
    position:absolute; 
    left:50%;
    transform:translateX(-50%);             /* full page center */
    z-index:2;
  }
  

/* allow overlap and pull row 2 upward */
.ph-hero-rows{ overflow:visible; gap:clamp(4px,1.2vw,8px); }
.ph-hero-row{ position:relative; overflow:visible; }
.ph-hero-row--1{ z-index:2; }
.ph-hero-row--2{ z-index:1; margin-top:clamp(-230px,-26vw,-120px); } /* less raised */

/* optional: kill default figure margins if any */
.ph-hero--mobile .ph-hero-fig{ margin:0; }


  .ph-page-inner{ padding:0 20px 0 !important; } /* remove the 2em top pad */

  /* reuse hero button styling for mobile block */
  .ph-hero--mobile .ph-btn{
    display:inline-flex; 
    align-items:center; 
    justify-content:center;
    padding:.9rem 2.25rem; 
    border:0; 
    border-radius:18px;
    background:#e4e4e4; 
    color:#000; 
    text-decoration:none;
    transition:background .25s,color .25s,transform .25s,box-shadow .25s,filter .25s,opacity .25s;
    min-width:11rem; 
    font-size:clamp(1rem,1.1vw,1.1rem);
  }
  .ph-hero--mobile .ph-btn:hover{
    transform:translateY(-2px);
    background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(240,240,240,.28) 40%, rgba(0,0,0,.14) 100%);
    -webkit-backdrop-filter:blur(16px) saturate(120%) contrast(105%);
    backdrop-filter:blur(16px) saturate(120%) contrast(105%);
    box-shadow:0 16px 40px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.6) inset, 0 -6px 16px rgba(0,0,0,.16) inset;
    color:#111;
  }
}



/* buttons */
.ph-hero-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 0; margin:0; }
.ph-hero--image .ph-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 2.25rem; border:0; border-radius:18px;   /* ↑ bigger */
  background:#e4e4e4; color:#000; text-decoration:none;
  transition:background .25s,color .25s,transform .25s,box-shadow .25s,filter .25s,opacity .25s;
  min-width:11rem;                                       /* ↑ wider base */
  font-size:clamp(1rem,1.1vw,1.1rem);                    /* ↑ slightly larger text */
  position:relative; overflow:hidden;                    /* for glass layers */
}
/* glass layers (hidden until hover) */
.ph-hero--image .ph-btn::before,
.ph-hero--image .ph-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .25s ease;
}

/* LIQUID GLASS on hover */
.ph-hero--image .ph-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(240,240,240,.28) 40%, rgba(0,0,0,.14) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(120%) contrast(105%);
  backdrop-filter:blur(16px) saturate(120%) contrast(105%);
  box-shadow:0 16px 40px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.6) inset, 0 -6px 16px rgba(0,0,0,.16) inset;
  color:#111;
}
.ph-hero--image .ph-btn:hover::before{
  opacity:1;
  background:radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;
}
.ph-hero--image .ph-btn:hover::after{
  opacity:1;
  background:radial-gradient(80% 120% at 50% 120%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%);
}

/* slight overlaps toward each image (optional, keep subtle) */
.ph-hero-buttons .ph-btn:first-child{  transform:translateX(clamp(-24px,-2vw,-40px)); }
.ph-hero-buttons .ph-btn:last-child{   transform:translateX(clamp(24px, 2vw, 40px));  }


/* -------------------------------------------------------------------------
   2.  PAGE‑WIDE PADDING & SECTION SPACING
   ---------------------------------------------------------------------- */
.ph-page-inner{
  padding:2em 20px 0;
}

/* add generous vertical spacing between the big blocks  */
.category-section       { margin-bottom:5rem; }
.ph-stagger-wrap        { margin:6rem 0; }
.pulse-wrapper          { margin:6rem 0 120px; } /* retains bottom offset for pill */

/* -------------------------------------------------------------------------
   3.  CATEGORY SECTION STYLES
   ---------------------------------------------------------------------- */
:root{
  --card-width:240px;
  --pattern-img:url("https://pulseheaven.com/wp-content/uploads/2025/09/cloudy_background_compressed.webp");
  --indent:1%;
}

.category-section   { width:100%; position:relative; }
.category-section h2{ text-align:center; }

/* ROW – FLEX + HIDDEN SCROLLBAR */
.cat-row{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:50px;
  gap:20px;
  scrollbar-width:none;
}
.cat-row::-webkit-scrollbar{ display:none; }

/* CARD */
.cat-card{
  flex:1 0 var(--card-width);
  min-width:var(--card-width);
  aspect-ratio:4/5;
  background:var(--pattern-img) right center/cover no-repeat;
  border-radius:30px;
  -webkit-clip-path:polygon(0 0,100% 0,100% 35%,calc(100% - var(--indent)) 50%,100% 65%,100% 100%,0 100%,0 65%,var(--indent) 50%,0 35%);
          clip-path:polygon(0 0,100% 0,100% 35%,calc(100% - var(--indent)) 50%,100% 65%,100% 100%,0 100%,0 65%,var(--indent) 50%,0 35%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  position:relative;
  scroll-snap-align:center;

  /* subtle scale/tilt on hover */
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.cat-card:first-child{ scroll-snap-align:start; }
.cat-card:last-child { scroll-snap-align:end; }

/* IMAGE & HOVER */
.cat-card img{
  width:80%;
  height:80%;
  margin:auto 0;
  object-fit:contain;
  transition: transform .35s ease;
}

/* base hover effect */
.cat-card:hover{
  transform: scale(.985);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* remove old image-enlarge rules */
.cat-card:hover img,
.cat-card[href*="bottoms-womenswear"]:hover img,
.cat-card[href*="outerwear-womenswear"]:hover img{
  transform: none !important;
}

/* odd cards tilt left */
.cat-card:nth-child(odd):hover{
  transform: scale(.985) rotate(-1deg);
}

/* even cards tilt right */
.cat-card:nth-child(even):hover{
  transform: scale(.985) rotate(1deg);
}


/* LABEL */
.cat-label{ display:block; margin-top:20px; }

/* HINT */
.scroll-hint{ display:none; }
@media (max-width:61.24em){
  .scroll-hint{
    display:block;
    width:60px;
    height:4px;
    border-radius:2px;
    background:#cfd0d8;
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
  }
}

/* SAFARI HEIGHT PATCH */
@media (max-width:46.24em){
  .cat-card{ height:calc(var(--card-width) * 1.25); }
}

/* -------------------------------------------------------------------------
   4.  VTO + COMMUNITY STAGGER CARDS
   ---------------------------------------------------------------------- */
:root{ --max-card:800px; --overlap:80px; }

.ph-card{
  display:flex;
  width:clamp(320px,75%,var(--max-card));
  border-radius:40px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease, z-index 0s .3s;
  position:relative;
}
.ph-card:hover{
  z-index:3!important;
  transform:scale(1.02);
  box-shadow:0 24px 60px rgba(0,0,0,.12);
  transition:transform .3s ease, box-shadow .3s ease, z-index 0s;
}

/* flush positions */
.ph-vto { margin:0 auto 0 0px; z-index:2; }
.ph-comm{ margin:calc(-1 * var(--overlap)) 0px 3rem auto; z-index:1; }

/* VTO inner */
.ph-vto-img          { flex:1 1 50%; }
.ph-vto-img img      { width:100%; height:100%; display:block; object-fit:cover; }
.ph-vto-content      { flex:1 1 50%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.5rem 2rem; }
.ph-vto-text         { line-height:1.45; max-width:32ch; margin:0 0 1.75rem; text-align:justify; }
.ph-vto-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem 2rem;
  border:1px solid #fff;
  border-radius:14px;
  background:#e4e4e4;
  color:#000;
  font-weight:400;
  white-space:nowrap;
  text-decoration:none;
  transition:background .25s, border-color .25s, transform .25s;
}
.ph-vto-btn:hover{
  background:#fff;
  border-color:#e4e4e4;
  transform:translateY(-2px);
}

/* Community buttons */
.ph-comm-btn{
  width:12rem;
  text-align:center;
  margin:0 auto 1rem;
}
.ph-comm-btn:last-child{ margin-bottom:0; }

/* COMMUNITY inner */
.ph-comm-content      { flex:1 1 50%; padding:2.5rem 2rem; display:flex; flex-direction:column; justify-content:center; }
.ph-comm-text         { margin:0 0 1.5rem; line-height:1.45; max-width:32ch; text-align:justify; }
.ph-comm-text:last-child{ margin-bottom:0; }

/* right half animated bg */
.ph-comm-img{
  flex:1 1 50%;
  background:#f6f4fb;
  padding:1.5rem 0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ph-comm-img::before,
.ph-comm-img::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background-repeat:no-repeat;
  background-size:60% 60%;
  border-radius:50%;
  filter:blur(60px);
  opacity:.8;
  animation:blob 12s ease-in-out infinite;
  z-index:0;
}
.ph-comm-img::before{
  background-image: radial-gradient(
    circle at 30% 30%,
    rgba(200,160,255,0.6) 0%,   /* soft purple */
    transparent 70%
  );
}
.ph-comm-img::after{
  background-image: radial-gradient(
    circle at 70% 70%,
    rgba(255,180,120,0.6) 0%,   /* warm orange */
    transparent 70%
  );
  animation-delay:6s;
}
@keyframes blob{
  0%,100%{ transform:translate(0,0) scale(1); }
  25%    { transform:translate(25%,-25%) scale(1.2); }
  50%    { transform:translate(-30%,25%) scale(.8); }
  75%    { transform:translate(25%,20%) scale(1.1); }
}
.ph-comm-img img{
  width:60%;
  height:auto;
  display:block;
  position:relative;
  z-index:2;
  margin:auto;
}

/* Responsive tweaks */
@media (max-width:61.24em){
  .ph-card{
    width: calc(100% - 40px) !important;
    padding: 0;
    margin: 2rem auto !important;
    flex-direction: column;
  }

  /* VTO stays as-is */
  .ph-vto {
    margin-bottom: 5rem !important;
  }

  /* Community: swap image above content */
  .ph-card.ph-comm {
    flex-direction: column-reverse;
    margin-bottom: 3rem !important;
  }

  /* match internal flex proportions */
  .ph-vto-content,
  .ph-comm-content {
    flex: 3 1 auto;
  }
  .ph-vto-img,
  .ph-comm-img {
    flex: 1 1 auto;
  }

  /* center community text/buttons */
  .ph-comm-content {
    align-items: center;
    text-align: center;
  }
}

/* -------------------------------------------------------------------------
   5.  “WHAT MAKES OUR HEART PULSE” PILL
   ---------------------------------------------------------------------- */
.pulse-wrapper{
  padding:0 0px 0px;
  box-sizing:border-box;
}

.pulse-pill{
  position:relative;
  padding:40px 30px;
  height:450px;
  display:flex;
  gap:10rem;
  justify-content:center;
  align-items:stretch;
  overflow:visible;
  border-radius:50px;
  background:#f6f4fb;
}
.pulse-bg{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  z-index:1;
  background:#f6f4fb;
}
.pulse-bg::before,
.pulse-bg::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background-repeat:no-repeat;
  background-size:60% 60%;
  border-radius:50%;
  filter:blur(60px);
  opacity:.8;
  animation:blob 12s ease-in-out infinite;
}
.pulse-bg::before{
  background-image: radial-gradient(
    circle at 30% 30%,
    rgba(200,160,255,0.6) 0%,   /* soft purple */
    transparent 70%
  );
}
.pulse-bg::after{
  background-image: radial-gradient(
    circle at 70% 70%,
    rgba(255,180,120,0.6) 0%,   /* warm orange */
    transparent 70%
  );
  animation-delay:6s;
}
.pulse-content{
  flex:0 1 45%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  gap:.75rem;
  z-index:2;
}
.pulse-imgBox{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  height:100%;
  z-index:3;
}
.pulse-imgBox img{
  width:280px;
  max-width:100%;
  transform:translate(30%,100px);
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.18));
}


/* Tablet */
@media (max-width:61.24em) and (min-width:46.25em){
  .pulse-pill{
    height:340px;
    padding:40px 24px;
    gap:1.5rem;
  }
  .pulse-content{ flex:0 1 55%; }
  .pulse-imgBox{ flex:0 0 45%; align-items:flex-start; }
  .pulse-imgBox img{
    width:220px;
    transform:translate(25%,80px);
  }
}

/* Mobile */
@media (max-width:46.24em){
  .pulse-pill{
    flex-direction:column;
    gap:1rem;
    min-height:340px;
    padding:40px 24px 120px;
  }
  .pulse-content{
    text-align:left;
    align-items:flex-start;
  }
  .pulse-imgBox{
    position:absolute;
    bottom:-100px;
    right:-20px;
    width:180px;
    height:auto;
    z-index:3;
  }
  .pulse-imgBox img{
    width:100%;
    transform:none;
  }
}