/* HaTuaBaht SG — sticker-wall safety & scrapbook redesign.
 * A real gallery strip reserves layout space, never floats under category tiles. */
.home-categories{overflow:hidden}
.home-categories .container{position:relative;isolation:isolate}
.home-categories::before,.home-categories::after{pointer-events:none!important}
.fan-sticker-wall{
  --ink-accent:#68539a;
  position:relative;isolation:isolate;
  margin:28px 0 34px;
  padding:23px 22px 18px;
  border:2px dashed #c5bae7;
  border-radius:30px;
  background:
    radial-gradient(circle at 2% 12%,#e0d5fa86 0 5%,transparent 24%),
    radial-gradient(circle at 98% 88%,#d2f0cc8a 0 8%,transparent 32%),
    repeating-linear-gradient(135deg,transparent 0 16px,#fff9 17px 18px),
    linear-gradient(110deg,#fffefd 0%,#f8f3ff 52%,#effae9 100%);
  box-shadow:0 12px 27px #6752a218;
}
.fan-sticker-wall::before,.fan-sticker-wall::after{
  position:absolute;content:'✦';color:#a994d5;line-height:1;font-size:20px;
  pointer-events:none;
}
.fan-sticker-wall::before{top:-12px;left:22px}
.fan-sticker-wall::after{bottom:-12px;right:20px}
.fan-sticker-heading{
  position:relative;
  margin:0 auto 19px;
  color:#5b4a90;
  font-weight:900;
  text-align:center;
  font-size:12px;
  letter-spacing:.18em;
  line-height:1.4;
}
.fan-sticker-heading-mark{color:#5f956a;margin:0 8px}
.fan-sticker-strip{
  display:flex;align-items:center;justify-content:center;gap:13px;
  min-height:112px;
  max-width:100%;padding:10px 4px 16px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:#ccbfe6 transparent;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.fan-sticker-collection{
  position:static!important;inset:auto!important;
  display:flex;align-items:center;justify-content:center;gap:13px;
  flex:0 0 auto;
  overflow:visible!important;pointer-events:none;
}
.fan-legacy-sticker,.fan-sticker-slot{
  flex:0 0 auto;width:clamp(68px,7.1vw,96px);height:clamp(68px,7.1vw,96px);
  border-radius:20px;
  padding:6px;
  background:#fffefff0;
  border:1px solid #e2d7f0;
  box-shadow:0 8px 17px #57448b1a;
  object-fit:contain;scroll-snap-align:center;
}
.fan-legacy-sticker:nth-child(odd){rotate:-6deg}
.fan-legacy-sticker:nth-child(even){rotate:5deg}
.fan-legacy-sticker[hidden],.fan-sticker-slot[hidden]{display:none!important}
.fan-sticker-slot{display:grid;place-items:center;animation:htbGalleryFloat 6s ease-in-out infinite alternate}
.fan-sticker-slot img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.fan-sticker-slot-0{rotate:-7deg;animation-delay:-1s}
.fan-sticker-slot-1{rotate:4deg;animation-delay:-3s}
.fan-sticker-slot-2{rotate:-3deg;animation-delay:-2s}
.fan-sticker-slot-3{rotate:7deg;animation-delay:-4s}
.fan-sticker-slot-4{rotate:-4deg;animation-delay:-5s}
@keyframes htbGalleryFloat {0%{translate:0 1px}100%{translate:0 -5px}}
.fan-sticker-empty{display:flex;align-items:center;justify-content:center;gap:30px;min-height:90px;color:#7763a7;white-space:nowrap}
.fan-sticker-empty[hidden]{display:none!important}
.fan-sticker-empty span{font-size:clamp(24px,4vw,44px)}
.fan-sticker-empty span:nth-child(2n){rotate:-16deg;color:#558666}
.fan-sticker-caption{display:flex;align-items:center;justify-content:center;gap:15px;margin:15px 0 0;font:italic 17px Georgia,serif;color:#67528d;text-align:center}
/* Add easy scrapbook details directly on category cards without obscuring merchandise. */
.home-categories .catalog-tile{position:relative;isolation:isolate;overflow:visible;border-color:#ddd2ef}
.home-categories .catalog-tile::before{
  content:'';position:absolute;z-index:4;top:-9px;left:45%;width:64px;height:17px;
  background:#e0eacbdc;border:1px solid #c4d5b4;rotate:-7deg;
  box-shadow:0 2px 3px #5d4c7115;pointer-events:none;
}
.home-categories .catalog-tile:nth-child(even)::before{rotate:8deg;background:#e6d6f3cf;border-color:#d2bfe5}
.home-categories #home-collection-list{position:relative;z-index:3;margin-top:7px}
.home-categories .home-catalog-actions{position:relative;z-index:4;margin-top:28px}
/* Replace former floating positions with normal-flow gallery. */
.categories-sticker-layer,.category-sticker-collection,.categories-sticker-layer .decor-sticker{display:none!important}
/* Extra festive mark on CTA: no arrow glyphs can sit underneath it. */
.hero-actions a.primary-btn > span[aria-hidden],
.home-catalog-actions a.primary-btn > span[aria-hidden]{display:none!important}
.hero-actions a.primary-btn,.home-catalog-actions a.primary-btn{padding-right:58px!important}
.hero-actions a.primary-btn::after,.home-catalog-actions a.primary-btn::after{right:18px!important;top:50%;font-size:21px;line-height:1;pointer-events:none}
@media(max-width:770px){
  .fan-sticker-wall{margin:24px 0 28px;padding:17px 10px 14px;border-radius:22px}
  .fan-sticker-strip,.fan-sticker-collection{gap:9px;justify-content:flex-start}
  .fan-sticker-strip{min-height:91px}
  .fan-legacy-sticker,.fan-sticker-slot{height:75px;width:75px;border-radius:16px}
  .fan-sticker-heading{font-size:10px;letter-spacing:.1em}
  .fan-sticker-caption{font-size:13px;gap:7px;flex-wrap:wrap}
  .fan-sticker-empty{gap:14px}
  .home-categories .catalog-tile::before{width:43px;left:43%}
}
@media(prefers-reduced-motion:reduce){.fan-sticker-slot{animation:none!important}}

/* Secondary, compact scrapbook ribbon in How to order — never overlaps steps. */
.fan-sticker-encore{display:flex;align-items:center;justify-content:center;gap:25px;margin:33px auto 0;padding:15px 20px;border-top:1px dashed #c2b3e5;border-bottom:1px dashed #c2b3e5;max-width:900px;background:linear-gradient(90deg,#f7f2ffbb,#eff8ebdd)}
.fan-sticker-encore[hidden]{display:none!important}
.fan-sticker-encore-note{font:italic 17px Georgia,serif;color:#66548f;max-width:160px;text-align:center}
.fan-sticker-encore-strip{display:flex;flex-wrap:nowrap;gap:12px;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.fan-sticker-encore-strip .fan-sticker-slot{width:74px;height:74px;background:#ffffffdd}
@media(max-width:700px){.fan-sticker-encore{gap:10px;padding:12px 8px;margin-top:24px}.fan-sticker-encore-note{font-size:13px;max-width:87px}.fan-sticker-encore-strip{gap:5px}.fan-sticker-encore-strip .fan-sticker-slot{width:43px;height:43px;border-radius:11px;padding:3px}}

/* Shell-sync visual safety: never let decorative images cover titles, cards or CTA. */
.home-categories{overflow:hidden!important}
.home-categories .container>.small-label,
.home-categories .container>h2,
.home-categories .container>p{position:relative;z-index:2}
.home-categories #fan-sticker-wall{
  display:block!important;position:relative!important;
  clear:both;float:none;left:auto;right:auto;top:auto;bottom:auto;
  width:100%;min-width:0;max-width:100%;
  z-index:2;overflow:hidden;
}
.home-categories #fan-sticker-strip{position:relative!important;inset:auto!important;z-index:1;min-width:0}
.home-categories #home-collection-list{position:relative!important;z-index:3;clear:both}
.home-categories .home-catalog-actions{position:relative!important;z-index:3;clear:both}
.home-categories .fan-legacy-sticker,
.home-categories .fan-sticker-slot,
.home-categories .fan-sticker-slot>img{
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  max-width:100%;
}
.home-categories .fan-legacy-sticker,.home-categories .fan-sticker-slot>img{object-fit:contain!important}
/* Keep the actual main button free of the old arrow, with one seasonal icon in a safe slot. */
.hero-actions a.primary-btn,.home-catalog-actions a.primary-btn{padding-right:56px!important}
.hero-actions a.primary-btn>span[aria-hidden],.home-catalog-actions a.primary-btn>span[aria-hidden]{display:none!important}
.hero-actions a.primary-btn::after,.home-catalog-actions a.primary-btn::after{content:var(--button-decoration-default,'✿')!important;right:17px!important;top:50%!important;transform:translateY(-50%)!important}
@media(max-width:700px){.home-categories #fan-sticker-wall{margin:20px 0 26px!important}.home-categories #fan-sticker-strip{overflow-x:auto!important}}
