.tfw-emotions, .tfw-emotions *{ box-sizing:border-box; }
.tfw-emotions{ font-family:'Bricolage Grotesque','Inter',sans-serif; }
.tfw-emotions a{ color:inherit; text-decoration:none; }
.tfw-emotions button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
.tfw-emotions{ --tfw-grid-h:620px; }
.tfw-emotions .container{ max-width:1440px; margin:0 auto; padding:0 40px; }
.tfw-emotions .section{ padding:78px 0; }
.tfw-emotions .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.tfw-emotions .section-head h2{ font-family:'Playfair Display',Georgia,serif; font-size:40px; line-height:53px; letter-spacing:1px; font-weight:600; margin:0; color:#0F0F0F; }
.tfw-emotions .section-head em{ color:#C99E43; font-style:italic; font-weight:600; }
.tfw-emotions .section-head-right{ display:flex; align-items:center; gap:22px; }
.tfw-emotions .view-all{ white-space:nowrap; }

.tfw-emotions .pill-toggle{ display:inline-flex; border:1px solid #ECE6DA; border-radius:0; padding:4px; background:#FFFEFB; gap:4px; }
.tfw-emotions .pill{ padding:9px 20px; font-size:12px; line-height:14px; letter-spacing:1px; border-radius:0; color:#0F0F0F; font-weight:400; transition: all .25s ease; text-transform:none; background:transparent; border:0; }
.tfw-emotions .pill.active{ background:#C99E43; color:#FFFEFB; }
.tfw-emotions .view-all{ font-size:12px; line-height:14px; letter-spacing:1.2px; color:#0F0F0F; text-transform:uppercase; font-weight:400; display:inline-block; }
.tfw-emotions .view-all .underline{ display:block; width:100%; height:1px; background:#D9D4CA; margin-top:8px; }
.tfw-emotions .view-all:hover{ color:#B08A38; }

/* ===== Emotions/Occasions swap stage ===== */
.tfw-emotions .bento-stack{ position:relative; margin-top:29px; }
.tfw-emotions .bento-grid{ display:flex; gap:var(--tfw-card-gap,12px); }
.tfw-emotions .bento-tall{ flex:0 0 30.88%; position:relative; border-radius:0; overflow:hidden; display:block; }
.tfw-emotions .bento-right{ flex:1; display:flex; flex-direction:column; gap:var(--tfw-card-gap,12px); min-width:0; }
.tfw-emotions .bento-row1{ display:flex; gap:var(--tfw-card-gap,12px); flex:0 0 300px; }
.tfw-emotions .bento-row2{ display:flex; gap:var(--tfw-card-gap,12px); flex:1; }
.tfw-emotions .bento-condolence{ flex:0 0 65.09%; }
.tfw-emotions .bento-love{ flex:1; }
.tfw-emotions .bento-missing{ flex:0 0 31.47%; }
.tfw-emotions .bento-sorry{ flex:0 0 31.47%; }
.tfw-emotions .bento-well{ flex:1; }

.tfw-emotions .bento-grid--occasions{ gap:var(--tfw-card-gap,12px); }
.tfw-emotions .occ-left{ flex:0 0 43.8%; display:flex; flex-direction:column; gap:var(--tfw-card-gap,12px); }
.tfw-emotions .occ-row1{ display:flex; gap:var(--tfw-card-gap,12px); flex:0 0 308px; }
.tfw-emotions .occ-row1 .bento-card{ flex:1; }
.tfw-emotions .occ-condolence{ flex:1; }
.tfw-emotions .occ-mid{ flex:0 0 23.5%; display:flex; flex-direction:column; gap:var(--tfw-card-gap,12px); }
.tfw-emotions .occ-love{ flex:0 0 223px; }
.tfw-emotions .occ-well{ flex:1; }
.tfw-emotions .occ-breakup{ flex:0 0 30.88%; }

/* Mobile-first: only the active grid is in the flow, instant swap (no room for a slide stage on narrow screens). */
.tfw-emotions .bento-stack .bento-grid{ display:none; }
.tfw-emotions .bento-stack .bento-grid.is-active{ display:flex; }

@media (min-width:721px){
  /* Desktop/tablet: both grids are stacked on top of each other and cross-slide. */
  .tfw-emotions .bento-stack{ height:var(--tfw-grid-h,620px); overflow:hidden; }
  .tfw-emotions .bento-stack .bento-grid{
    display:flex; position:absolute; top:0; left:0; width:100%; height:var(--tfw-grid-h,620px);
    opacity:0; pointer-events:none; transform:translateY(0); z-index:1;
    transition: transform var(--tfw-swap-speed,550ms) cubic-bezier(.4,0,.2,1), opacity var(--tfw-swap-speed,550ms) cubic-bezier(.4,0,.2,1);
  }
  .tfw-emotions .bento-stack .bento-grid.is-active{ opacity:1; pointer-events:auto; transform:translateY(0); z-index:2; }
  .tfw-emotions .bento-stack .bento-grid.is-leaving{ opacity:0; transform:translateY(-36px); z-index:1; }
  .tfw-emotions .bento-stack .bento-grid.is-entering{ opacity:0; transform:translateY(36px); z-index:1; }
}

/* ===== Cards ===== */
.tfw-emotions .bento-card, .tfw-emotions .bento-tall{ position:relative; border-radius:0; overflow:hidden; display:block; }
.tfw-emotions .bento-card img, .tfw-emotions .bento-tall img{ border-radius:0; }
.tfw-emotions .bento-card img, .tfw-emotions .bento-tall img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition: opacity var(--tfw-hover-speed,600ms) ease; }
.tfw-emotions .bento-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.62) 75%, rgba(0,0,0,0.88) 100%); transition: opacity var(--tfw-hover-speed,600ms) ease; }

.tfw-emotions .bento-text{
  position:absolute; left:24px; right:24px; bottom:var(--tfw-text-bottom,24px); z-index:2;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  transform: translateY(0);
  transition: bottom var(--tfw-hover-speed,600ms) cubic-bezier(.4,0,.2,1), transform var(--tfw-hover-speed,600ms) cubic-bezier(.4,0,.2,1);
}
.tfw-emotions .bento-text h4{
  font-family:'Playfair Display',Georgia,serif; color:#FFFEFB; font-size:28px; font-weight:500; letter-spacing:1px; line-height:normal; margin:0;
  transition: font-size var(--tfw-hover-speed,600ms) cubic-bezier(.4,0,.2,1);
}
.tfw-emotions .shop-now{
  color:#FFFEFB; font-size:11px; line-height:16px; letter-spacing:1px; font-weight:300; border-bottom:0.8px solid #C99E43; padding-bottom:4px;
  display:inline-flex; gap:4px; align-self:flex-start; text-transform:uppercase;
}

.tfw-emotions .emo-card::before{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; opacity:0; transition: opacity var(--tfw-hover-speed,600ms) ease; pointer-events:none; }
.tfw-emotions .emo-card[data-grad="breakup"]::before{ background: linear-gradient(180deg, rgb(193,154,69) 0%, rgb(174,118,0) 30%, rgb(214,160,46) 60%, rgb(154,107,8) 100%); }
.tfw-emotions .emo-card[data-grad="condolence"]::before{ background: linear-gradient(180deg, rgb(172,40,40) 0%, rgb(215,30,30) 42%, rgb(132,18,18) 75%, rgb(123,19,19) 100%); }
.tfw-emotions .emo-card[data-grad="love"]::before{ background: linear-gradient(180deg, rgb(237,176,155) 0%, rgb(227,108,66) 42%, rgb(232,108,34) 75%, rgb(227,145,97) 100%); }
.tfw-emotions .emo-card[data-grad="missing"]::before{ background: linear-gradient(180deg, rgb(94,189,98) 0%, rgb(58,135,61) 42%, rgb(75,197,80) 75%, rgb(38,106,41) 100%); }
.tfw-emotions .emo-card[data-grad="sorry"]::before{ background: linear-gradient(180deg, rgb(120,37,229) 0%, rgb(147,65,253) 42%, rgb(148,94,219) 75%, rgb(127,64,209) 100%); }
.tfw-emotions .emo-card[data-grad="wellsoon"]::before{ background: linear-gradient(180deg, rgb(204,140,141) 0%, rgb(224,95,97) 42%, rgb(186,66,67) 75%, rgb(148,44,46) 100%); }
.tfw-emotions .emo-card:hover::before{ opacity:1; }
.tfw-emotions .emo-card:hover .bento-scrim{ opacity:0; }
.tfw-emotions .emo-card:hover .bento-text{
  /* !important so the Elementor "Text Position" control (bottom:24px, same
     specificity, loaded later) can never pin the text to the bottom while
     the transform pulls it down — that was the half-clipped hover bug. */
  bottom:50% !important; transform: translateY(50%) !important; align-items:center !important; text-align:center !important;
}
.tfw-emotions .emo-card:hover .bento-text h4{ font-size:32px; }
.tfw-emotions .emo-card:hover .shop-now{ align-self:inherit; }

@media (max-width:980px){
  .tfw-emotions .container{ padding:0 24px; }
  .tfw-emotions .bento-grid{ flex-direction:column; height:auto; }
  .tfw-emotions .bento-tall{ flex-basis:340px; }
  .tfw-emotions .bento-row1{ flex-basis:260px; }
  .tfw-emotions .bento-row2{ flex-direction:row; }
  .tfw-emotions .bento-grid--occasions{ flex-direction:column; }
  .tfw-emotions .occ-left, .tfw-emotions .occ-mid, .tfw-emotions .occ-breakup{ flex-basis:auto !important; }
  .tfw-emotions .occ-row1{ flex-basis:220px; }
  .tfw-emotions .occ-love, .tfw-emotions .occ-well{ flex-basis:220px !important; }
  .tfw-emotions .occ-breakup{ min-height:280px; }
}
@media (max-width:720px){
  .tfw-emotions .section{ padding:32px 0; } /* was 52px — matched to the tighter mobile section rhythm from Figma */
  .tfw-emotions .section-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .tfw-emotions .bento-row2{ flex-direction:row; flex-wrap:wrap; gap:var(--tfw-card-gap,12px); }
  .tfw-emotions .bento-row2 .bento-missing, .tfw-emotions .bento-row2 .bento-sorry{ flex:0 0 calc(50% - 6px) !important; height:160px; }
  .tfw-emotions .bento-row2 .bento-well{ flex:0 0 100% !important; height:160px; }
  .tfw-emotions .bento-tall{ flex-basis:220px; }
  .tfw-emotions .bento-row1{ flex-direction:row; flex-wrap:wrap; flex-basis:auto; gap:var(--tfw-card-gap,12px); }
  .tfw-emotions .bento-row1 .bento-card{ flex:0 0 calc(50% - 6px) !important; height:180px; }
  .tfw-emotions .bento-text h4{ font-size:20px; }

  /* The colored gradient/"shrink to center" :hover effect above is a
     desktop mouse-hover interaction. On a touchscreen there's no real
     hover state — tapping a card can leave it visually "stuck" showing
     the hover look (gradient overlay, centered enlarged text) instead of
     just navigating, since touch browsers simulate :hover on tap. Neutral
     -ize the whole effect on mobile so cards always show their normal
     (non-hover) look — image + bottom scrim + left-aligned text — the
     same as the Figma mobile mockup, tap or no tap. */
  .tfw-emotions .emo-card:hover::before{ opacity:0; }
  .tfw-emotions .emo-card:hover .bento-scrim{ opacity:1; }
  .tfw-emotions .emo-card:hover .bento-text{ bottom:var(--tfw-text-bottom,24px) !important; transform:translateY(0) !important; align-items:flex-start !important; text-align:left !important; }
  .tfw-emotions .emo-card:hover .bento-text h4{ font-size:20px; }
  .tfw-emotions .emo-card:hover .shop-now{ align-self:inherit; }
}