/* Holiday theme modifiers. Safe to link site-wide: only matches --theme-* classes.
   Themes: thanksgiving (also Friendsgiving), halloween.
   Later: christmas, hanukkah, new-year, posada, brunch. */
.articleDesignCard--theme-thanksgiving,
.articleDesignCard--theme-halloween,
.tiAtfCta--theme-halloween,
.articleSkuCard--theme-halloween{
  position:relative;
  overflow:visible !important;
  isolation:isolate;
}
.articleDesignCard--theme-thanksgiving,
.articleDesignCard--theme-halloween{
  padding:44px 156px 52px 148px;
  margin:52px 0 68px;
}
.articleDesignDecor{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:visible;
  border-radius:inherit;
}
.articleDesignSticker{
  position:absolute;
  display:block;
  width:auto;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.28)) drop-shadow(0 2px 2px rgba(40,22,10,.20)) drop-shadow(0 7px 10px rgba(40,22,10,.16));
}
.articleDesignCard--theme-halloween .articleDesignSticker,
.tiAtfCta--theme-halloween .articleDesignSticker,
.articleSkuCard--theme-halloween .articleDesignSticker{
  filter:drop-shadow(0 1px 0 rgba(255,232,200,.18)) drop-shadow(0 2px 2px rgba(0,0,0,.35)) drop-shadow(0 8px 12px rgba(0,0,0,.28));
}
.articleDesignCard--theme-thanksgiving > :not(.articleDesignDecor),
.articleDesignCard--theme-halloween > :not(.articleDesignDecor),
.tiAtfCta--theme-halloween > :not(.articleDesignDecor),
.articleSkuCard--theme-halloween > :not(.articleDesignDecor){
  position:relative;
  z-index:1;
}

/* —— Thanksgiving / Friendsgiving —— */
.articleDesignCard--theme-thanksgiving{
  background:
    radial-gradient(ellipse at 100% 0%, rgba(163,42,42,.10), transparent 42%),
    radial-gradient(ellipse at 0% 100%, rgba(201,90,20,.14), transparent 48%),
    linear-gradient(165deg, #FBF4E6 0%, #F6DFB8 48%, #E9C089 100%);
  border-color:rgba(140,62,28,.24);
  color:#3A2214;
  box-shadow:0 14px 34px rgba(90,40,16,.11);
}
.articleDesignCard--theme-thanksgiving:hover,
.articleDesignCard--theme-thanksgiving:focus-visible{
  border-color:rgba(140,62,28,.38);
  box-shadow:0 18px 42px rgba(90,40,16,.16);
}
.articleDesignCard--theme-thanksgiving .articleDesignEyebrow{color:#7A2C0E}
.articleDesignCard--theme-thanksgiving .articleDesignName{color:#3A2214}
.articleDesignCard--theme-thanksgiving .articleDesignDescription{
  color:#5C3D28;
  max-width:min(560px, 100%);
}
.articleDesignCard--theme-thanksgiving .articleDesignLink{color:#B84312}
.articleDesignCard--theme-thanksgiving .tiCardBtn{
  background:linear-gradient(135deg,#E07A2F,#B84312);
  color:#fff;
  box-shadow:0 6px 14px rgba(180,60,20,.25);
}
.articleDesignCard--theme-thanksgiving:focus-visible{outline-color:#8E3210}

.articleDesignCard--theme-thanksgiving .articleDesignSticker--pumpkin{left:2px;top:2px;width:132px;transform:rotate(-14deg)}
.articleDesignCard--theme-thanksgiving .articleDesignSticker--maple{right:2px;top:2px;width:152px;transform:rotate(16deg)}
.articleDesignCard--theme-thanksgiving .articleDesignSticker--oak{right:114px;top:2px;width:84px;transform:rotate(-18deg)}
.articleDesignCard--theme-thanksgiving .articleDesignSticker--wheat{left:6px;bottom:6px;width:118px;transform:rotate(-8deg)}
.articleDesignCard--theme-thanksgiving .articleDesignSticker--turkey{right:4px;bottom:4px;width:140px;transform:rotate(7deg)}
.articleDesignCard--theme-thanksgiving .articleDesignSticker--pie{right:4px;bottom:34%;width:96px;transform:rotate(12deg)}
.articleDesignCard--theme-thanksgiving .articleDesignSticker--maple2{left:4px;bottom:36%;width:78px;transform:rotate(22deg)}

/* —— Halloween design card —— */
.articleDesignCard--theme-halloween{
  background:
    radial-gradient(ellipse at 92% 8%, rgba(255,140,40,.20), transparent 38%),
    radial-gradient(ellipse at 8% 92%, rgba(110,40,170,.45), transparent 44%),
    linear-gradient(165deg, #1C1228 0%, #2A1740 52%, #140E1C 100%);
  border-color:rgba(255,150,60,.32);
  color:#FFF6E8;
  box-shadow:0 14px 34px rgba(16,6,24,.32);
}
.articleDesignCard--theme-halloween:hover,
.articleDesignCard--theme-halloween:focus-visible{
  border-color:rgba(255,150,60,.48);
  box-shadow:0 18px 42px rgba(16,6,24,.4);
}
.articleDesignCard--theme-halloween .articleDesignEyebrow{color:#F0A04A}
.articleDesignCard--theme-halloween .articleDesignName{color:#FFF6E8}
.articleDesignCard--theme-halloween .articleDesignDescription{
  color:#F0E0C8;
  max-width:min(560px, 100%);
}
.articleDesignCard--theme-halloween .articleDesignLink{color:#F0A04A}
.articleDesignCard--theme-halloween .tiCardBtn{
  background:linear-gradient(135deg,#F3A43A,#E07A1C);
  color:#1C1228;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}
.articleDesignCard--theme-halloween:focus-visible{outline-color:#F0A04A}

.articleDesignCard--theme-halloween .articleDesignSticker--lantern{left:2px;top:2px;width:136px;transform:rotate(-12deg)}
.articleDesignCard--theme-halloween .articleDesignSticker--ghost{right:2px;top:2px;width:140px;transform:rotate(10deg)}
.articleDesignCard--theme-halloween .articleDesignSticker--candy{left:8px;bottom:10px;width:120px;transform:rotate(-16deg)}
.articleDesignCard--theme-halloween .articleDesignSticker--lantern2{right:4px;bottom:4px;width:116px;transform:rotate(16deg)}
.articleDesignCard--theme-halloween .articleDesignSticker--bat{right:6px;top:48%;width:96px;transform:translateY(-50%) rotate(8deg)}
.articleDesignCard--theme-halloween .articleDesignSticker--star{right:128px;top:14px;width:36px;transform:rotate(12deg)}
.articleDesignCard--theme-halloween .articleDesignSticker--star2{left:22px;bottom:24px;width:28px;transform:rotate(-20deg)}

/* —— Halloween top-of-article button (scoped) —— */
.tiAtfCta--theme-halloween{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:148px;
  margin:22px 0 10px;
  padding:28px 140px 28px 132px;
  border:1px solid rgba(255,150,60,.32);
  border-radius:8px;
  background:
    radial-gradient(ellipse at 92% 8%, rgba(255,140,40,.20), transparent 38%),
    radial-gradient(ellipse at 8% 92%, rgba(110,40,170,.45), transparent 44%),
    linear-gradient(165deg, #1C1228 0%, #2A1740 52%, #140E1C 100%);
  box-shadow:0 14px 34px rgba(16,6,24,.28);
  color:#FFF6E8;
}
.tiAtfCta--theme-halloween .tiShowBtn,
.tiShowBtn--theme-halloween{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  align-self:center;
  background:linear-gradient(135deg,#F3A43A,#E07A1C)!important;
  color:#1C1228!important;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
  text-align:center;
  line-height:1.3;
}
.tiAtfCta--theme-halloween .articleDesignSticker--lantern{left:2px;top:2px;width:120px;transform:rotate(-12deg)}
.tiAtfCta--theme-halloween .articleDesignSticker--ghost{right:2px;top:2px;width:124px;transform:rotate(10deg)}
.tiAtfCta--theme-halloween .articleDesignSticker--candy{left:8px;bottom:10px;width:104px;transform:rotate(-16deg)}
.tiAtfCta--theme-halloween .articleDesignSticker--lantern2{right:4px;bottom:4px;width:100px;transform:rotate(16deg)}
.tiAtfCta--theme-halloween .articleDesignSticker--star{right:112px;top:10px;width:30px;transform:rotate(12deg)}
.tiAtfCta--theme-halloween .articleDesignSticker--star2{left:18px;bottom:18px;width:24px;transform:rotate(-20deg)}
.tiAtfCta--theme-halloween .articleDesignSticker--bat{display:none}

/* —— Halloween collection card (scoped) —— */
.articleSkuCard--theme-halloween{
  padding:8px;
  background:
    radial-gradient(ellipse at 92% 8%, rgba(255,140,40,.20), transparent 38%),
    linear-gradient(165deg, #1C1228 0%, #2A1740 52%, #140E1C 100%);
  border-color:rgba(255,150,60,.36);
  box-shadow:0 14px 34px rgba(16,6,24,.28);
}
.articleSkuCard--theme-halloween img{
  position:relative;
  z-index:1;
  border-radius:4px;
}
.articleSkuCard--theme-halloween .articleDesignDecor{z-index:2}
.articleSkuCard--theme-halloween .articleDesignSticker--lantern{left:2px;top:2px;width:108px;transform:rotate(-12deg)}
.articleSkuCard--theme-halloween .articleDesignSticker--ghost{right:2px;top:2px;width:112px;transform:rotate(10deg)}
.articleSkuCard--theme-halloween .articleDesignSticker--candy{left:8px;bottom:10px;width:96px;transform:rotate(-16deg)}
.articleSkuCard--theme-halloween .articleDesignSticker--lantern2{right:4px;bottom:4px;width:96px;transform:rotate(16deg)}
.articleSkuCard--theme-halloween .articleDesignSticker--star{right:100px;top:10px;width:28px;transform:rotate(12deg)}
.articleSkuCard--theme-halloween .articleDesignSticker--bat{display:none}
.articleSkuCard--theme-halloween .articleDesignSticker--star2{display:none}

@media (max-width:700px){
  .articleDesignCard--theme-thanksgiving,
  .articleDesignCard--theme-halloween{
    padding:104px 18px 112px 18px;
    margin:44px 0 60px;
  }
  .articleDesignCard--theme-thanksgiving .articleDesignDescription,
  .articleDesignCard--theme-halloween .articleDesignDescription{
    max-width:100%;
  }
  /* hide mid-edge stickers that would sit in the text column */
  .articleDesignSticker--mid{display:none}

  .articleDesignCard--theme-thanksgiving .articleDesignSticker--pumpkin{width:100px;left:4px;top:4px}
  .articleDesignCard--theme-thanksgiving .articleDesignSticker--maple{width:110px;right:4px;top:4px}
  .articleDesignCard--theme-thanksgiving .articleDesignSticker--wheat{width:92px;left:8px;bottom:8px}
  .articleDesignCard--theme-thanksgiving .articleDesignSticker--turkey{width:108px;right:4px;bottom:6px}
  .articleDesignCard--theme-thanksgiving .articleDesignSticker--oak{
    left:50%;right:auto;top:6px;width:72px;transform:translateX(-50%) rotate(-16deg)
  }

  .articleDesignCard--theme-halloween .articleDesignSticker--lantern{width:104px;left:4px;top:4px}
  .articleDesignCard--theme-halloween .articleDesignSticker--ghost{width:108px;right:4px;top:4px}
  .articleDesignCard--theme-halloween .articleDesignSticker--candy{width:96px;left:10px;bottom:12px}
  .articleDesignCard--theme-halloween .articleDesignSticker--lantern2{width:96px;right:4px;bottom:6px}
  .articleDesignCard--theme-halloween .articleDesignSticker--star{width:28px;right:96px;top:12px}
  .articleDesignCard--theme-halloween .articleDesignSticker--star2{width:22px;left:22px;bottom:22px}

  .tiAtfCta--theme-halloween{
    min-height:0;
    justify-content:center;
    align-items:center;
    padding:92px 16px 96px;
    margin:20px 0 14px;
  }
  .tiAtfCta--theme-halloween .articleDesignSticker--lantern{width:92px;left:4px;top:4px}
  .tiAtfCta--theme-halloween .articleDesignSticker--ghost{width:96px;right:4px;top:4px}
  .tiAtfCta--theme-halloween .articleDesignSticker--candy{width:84px;left:10px;bottom:12px}
  .tiAtfCta--theme-halloween .articleDesignSticker--lantern2{width:84px;right:4px;bottom:6px}
  .tiAtfCta--theme-halloween .articleDesignSticker--star{width:24px;right:86px;top:10px}
  .tiAtfCta--theme-halloween .articleDesignSticker--star2{width:18px;left:18px;bottom:18px}

  .articleSkuCard--theme-halloween .articleDesignSticker--lantern{width:84px;left:4px;top:4px}
  .articleSkuCard--theme-halloween .articleDesignSticker--ghost{width:88px;right:4px;top:4px}
  .articleSkuCard--theme-halloween .articleDesignSticker--candy{width:76px;left:10px;bottom:12px}
  .articleSkuCard--theme-halloween .articleDesignSticker--lantern2{width:76px;right:4px;bottom:6px}
  .articleSkuCard--theme-halloween .articleDesignSticker--star{width:22px;right:78px;top:10px}
  .tiAtfCta--theme-halloween .tiShowBtn{font-size:13px;padding:12px 16px;white-space:nowrap;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .articleDesignCard--theme-thanksgiving,
  .articleDesignCard--theme-halloween,
  .tiAtfCta--theme-halloween,
  .articleSkuCard--theme-halloween{transition:none}
}