/* =================================================================
   Products — "ผลิตภัณฑ์แนะนำ" (Figma "Product" 1440×1203 @ y=1183)
   Header (eyebrow + H2 | life-stage tabs) · 4×2 product cards · "ดูผลิตภัณฑ์ทั้งหมด".
   Card 270×411 (#FFEEF8, r16, 1px #EBEBEB outside) with a masked art area
   (top 150.5 → bottom, r 0/0/16/16) holding two blurred gradient ellipses and
   the product photo placed by its Figma box relative to the card.
   ================================================================= */
.s-products {
  --pc-bg: #FFEEF8;
  --pc-line: #EBEBEB;
  --pc-h: 411px;
  --pc-art-top: 150.5px;
  --pc-blur: 20px;
  /* hover motion standard: one curve + one tempo for hover-in AND hover-out */
  --pc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pc-dur: 560ms;
  /* photo / blob layer: a calmer, even ease-out (no front-loaded jump), in and out */
  --pc-img-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --pc-img-dur: 700ms;
  --pc-blob-dur: 900ms;
  position: relative;
  background: #FFFFFF;
  padding: 64px 0;
}
.s-products__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------- header ---------------- */
.s-products__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 132px;
}
.s-products__titles { display: flex; flex-direction: column; gap: 8px; width: 539px; max-width: 100%; }
.s-products__eyebrow {
  font-size: 14px; line-height: 1.4; font-weight: var(--fw-regular);
  color: var(--gsb-pink);
}
.s-products__title {
  font-size: 40px; line-height: 1.3; font-weight: var(--fw-semibold);
  color: var(--ink); letter-spacing: 0;
}

/* tabs: #F7F7F7 track r12 p4, pills r8 p7/12, Medium 14/1.2 #9A9A9A; active = pink pill */
.s-products__tabs-wrap {
  position: relative;
  flex: none;
  max-width: 100%;
  padding: 4px;
  border-radius: 12px;
  background: #F7F7F7;
  overflow: hidden;
}
.s-products__tabs-wrap::before,
.s-products__tabs-wrap::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 36px; z-index: 3;
  pointer-events: none; opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}
.s-products__tabs-wrap::before { left: 0; background: linear-gradient(90deg, #F7F7F7 20%, rgba(247, 247, 247, 0)); }
.s-products__tabs-wrap::after { right: 0; background: linear-gradient(270deg, #F7F7F7 20%, rgba(247, 247, 247, 0)); }
.s-products__tabs-wrap.is-fade-l::before,
.s-products__tabs-wrap.is-fade-r::after { opacity: 1; }
.s-products__tabs {
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
.s-products__tabs::-webkit-scrollbar { display: none; }
.s-products__ind {
  position: absolute; left: 0; top: 0; height: 32px; width: 0;
  border-radius: 8px;
  background: var(--gsb-pink);
  box-shadow: 0 6px 14px -8px rgba(237, 0, 140, 0.7);
  transition: transform 420ms var(--ease-out), width 420ms var(--ease-out);
  z-index: 0;
}
.s-products__tab {
  position: relative; z-index: 1;
  flex: none;
  height: 32px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px; line-height: 1.2; font-weight: var(--fw-medium);
  color: #9A9A9A;
  white-space: nowrap;
  transition: color var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.s-products__tab[aria-selected="true"] { color: #FFFFFF; font-weight: var(--fw-semibold); }
.s-products__tabs:not(.is-ready) .s-products__tab[aria-selected="true"] { background: var(--gsb-pink); }
.s-products__tab:active { transform: scale(0.97); }
.s-products__tab:focus-visible { outline-offset: -2px; border-radius: 8px; }
@media (hover: hover) {
  .s-products__tab[aria-selected="false"]:hover { color: var(--ink); }
}

/* ---------------- grid & panels ---------------- */
.s-products__panels { position: relative; margin-top: 40px; }
.s-products__panel:focus { outline: none; }
.s-products__panel.is-leaving {
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
}
.s-products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* ---------------- card ---------------- */
.pcard {
  position: relative;
  isolation: isolate;
  height: var(--pc-h);
  border-radius: 16px;
  background: var(--pc-bg);
  box-shadow: 0 0 0 1px var(--pc-line);
  transition: transform var(--pc-dur) var(--pc-ease);
}
/* Hover shadow lives on its own layer and only its opacity animates (no box-shadow
   interpolation → no jank). Outer shadows only, so it never paints over the card. */
.pcard::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px #F6D3E7,
    0 22px 40px -24px rgba(237, 0, 140, 0.36),
    0 10px 24px -18px rgba(42, 42, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pc-dur) var(--pc-ease);
}
/* scroll-reveal stagger; products.js drops [data-reveal] once it has played so hover isn't delayed */
.pcard[data-reveal] {
  transition:
    opacity var(--t-slow) var(--ease-out) calc(var(--i, 0) * 70ms),
    transform var(--t-slow) var(--ease-out) calc(var(--i, 0) * 70ms);
}
.pcard:has(.pcard__hit:focus-visible) { outline: 2px solid var(--gsb-pink); outline-offset: 4px; }

/* masked art area: section box y=150.37 → 411, radius 0 0 16 16 */
.pcard__art {
  position: absolute;
  left: 0; right: 0; top: var(--pc-art-top); bottom: 0;
  overflow: hidden;
  border-radius: 0 0 16px 16px;
  z-index: -1;
}
.pcard__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--pc-blur));
  /* kept permanently: the blurred blobs stay pre-rasterized layers, so their slow
     drift never re-rasterizes the blur (a visible "pop" at hover start/end) */
  will-change: transform;
  transition: transform var(--pc-blob-dur) var(--pc-img-ease);
}
.pcard__art .pcard__blob--pink {
  width: 258px; height: 258px;
  left: -129px;
  top: calc(var(--pink-y, 228px) - var(--pc-art-top));
  background: linear-gradient(159deg, #FF97B5 10%, #FF5298 82%);
}
.pcard__art .pcard__blob--blue {
  width: 132px; height: 132px;
  left: calc(50% - 54px);
  top: calc(291px - var(--pc-art-top));
  background: linear-gradient(141deg, #223B95 12%, #00C1FF 88%);
}
.pcard__img {
  position: absolute;
  left: calc(50% + var(--cx, 0px));
  top: calc(var(--y) - var(--pc-art-top));
  max-width: none;
  /* Hover "step forward": the photo rises + grows around the card's bottom-centre
     (card centre-x = -cx, mask floor = card height - y, in the image's own box), so
     the person grows up out of the mask floor instead of zooming about a point
     hidden below it. Every photo that reaches the floor extends >=54px below it and
     the origin sits inside every photo's width, so the lift never opens a gap at the
     mask's bottom or side edges. Transition lives on the base state → identical
     tempo in and out, interruptible from wherever it is. */
  transform-origin: calc(-1 * var(--cx, 0px)) calc(var(--pc-h) - var(--y, 0px));
  transition: transform var(--pc-img-dur) var(--pc-img-ease);
  user-select: none;
  -webkit-user-drag: none;
}
/* not hydrated yet (products.js swaps data-src → src near the viewport): no alt-text flash */
.s-products .pcard__img:not([src]) { visibility: hidden; }

/* Text block is in normal flow; the title's link stretches its hit-area
   (::after) over the whole card, so any click on the card opens the product page. */
.pcard__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 25px 24px 24px;
}
.pcard__title {
  font-size: 20px; line-height: 1.3; font-weight: var(--fw-semibold);
  color: var(--ink);
}
.pcard__hit {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pcard__hit::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.pcard__hit:focus-visible { outline: none; }
.pcard__desc {
  font-size: 12px; line-height: 1.4; font-weight: var(--fw-regular);
  color: var(--ink-2);
}

/* CTA pill (r12, #FFEEF8, 1px #F4F4F4 outside) / arrow button (44×44) */
.pcard__cta,
.pcard__go {
  position: absolute; z-index: 2;
  left: 24px; bottom: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px;
  border-radius: 12px;
  background: var(--pc-bg);
  box-shadow: 0 0 0 1px #F4F4F4;
  color: var(--ink);
  transition:
    background-color var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.pcard__cta {
  gap: 4px;
  padding: 12px 16px;
  font-size: 14px; line-height: 1.4; font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pcard__cta img { width: 18px; height: 18px; flex: none; border-radius: 4px; }
.pcard__go { width: 44px; padding: 0; }
.pcard__go svg { transition: transform var(--t-med) var(--ease-out); }
.pcard__cta:active,
.pcard__go:active { transform: scale(0.97); }

/* press: the stretched link (= the card) sinks a touch */
.pcard:has(.pcard__hit:active) { transform: scale(0.985); transition-duration: 160ms; }

@media (hover: hover) and (pointer: fine) {
  .pcard:not(.pcard--ask):hover { transform: translateY(-4px); will-change: transform; }
  .pcard:not(.pcard--ask):hover::after { opacity: 1; }
  .pcard:not(.pcard--ask):hover:has(.pcard__hit:active) { transform: translateY(-4px) scale(0.985); }
  /* -6px / 1.035 is the most the tallest photo allows: the retirement lady's hair
     (content top y=166) then peaks at y=151.4, just under the mask top (150.5). */
  .pcard:hover .pcard__img { transform: translateY(-6px) scale(1.035); will-change: transform; }
  .pcard:hover .pcard__blob--pink { transform: translate(8px, -6px) scale(1.03); }
  .pcard:hover .pcard__blob--blue { transform: translate(-6px, -8px) scale(1.04); }
}
@media (hover: hover) {
  .pcard__cta:hover,
  .pcard__go:hover {
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #F4F4F4, 0 8px 18px -10px rgba(42, 42, 42, 0.35);
  }
  .pcard__go:hover svg { transform: translateX(2px); }
}

/* ---------------- card without a product photo: glyph tile + key fact ---------------- */
.pcard--glyph { --tile: linear-gradient(150deg, #FF8FC8 0%, #F2399F 46%, #D0007B 100%); --tile-glow: rgba(237, 0, 140, 0.55); }
.pcard--blue { --tile: linear-gradient(150deg, #8DB0FF 0%, #4A6FE0 48%, #223B95 100%); --tile-glow: rgba(56, 95, 210, 0.55); }
.pcard--gold { --tile: linear-gradient(150deg, #FFE39B 0%, #EDB24A 48%, #B6861F 100%); --tile-glow: rgba(193, 138, 25, 0.5); }
.pcard__ring {
  position: absolute; right: -6px; top: -12px;
  width: 156px; height: 156px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 22px rgba(255, 255, 255, 0.16);
  transition: transform var(--pc-img-dur) var(--pc-img-ease);
}
.pcard__tile {
  position: absolute; right: 30px; top: 24px;
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 24px;
  background: var(--tile);
  color: #FFFFFF;
  /* same function list as the hover state → per-function interpolation, no matrix blend */
  transform: translateY(0) rotate(8deg) scale(1);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 18px rgba(0, 0, 0, 0.12),
    0 18px 30px -14px var(--tile-glow);
  transition: transform var(--pc-img-dur) var(--pc-img-ease);
}
.pcard__tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 75% at 22% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 58%);
}
.pcard__tile svg {
  position: relative;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
.pcard__fact {
  position: absolute; left: 24px; bottom: 82px;
  display: flex; flex-direction: column; gap: 1px;
  max-width: calc(100% - 48px);
  padding: 9px 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 24px -16px rgba(42, 42, 42, 0.35);
}
.pcard__fact-label { font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.pcard__fact-value { font-size: 18px; line-height: 1.3; font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) {
  /* image-less cards: the glyph tile is the "subject" — it steps forward the same way
     (rises 8px, grows 5%, straightens a little); the halo ring breathes out behind it */
  .pcard--glyph:hover .pcard__tile { transform: translateY(-8px) rotate(4deg) scale(1.05); will-change: transform; }
  .pcard--glyph:hover .pcard__ring { transform: scale(1.06); }
}

/* ---------------- "ask ออมสิน AI" card (only fills the gap in 3-col / ends the carousel) ---------------- */
.pcard--ask {
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF4FA 100%);
}
.pcard--ask .pcard__blob { z-index: -1; }
.pcard--ask .pcard__blob--pink { width: 258px; height: 258px; right: -90px; bottom: -120px; background: linear-gradient(159deg, #FF97B5 10%, #FF5298 82%); opacity: 0.9; }
.pcard--ask .pcard__blob--blue { width: 132px; height: 132px; right: 90px; bottom: -40px; background: linear-gradient(141deg, #223B95 12%, #00C1FF 88%); opacity: 0.85; }
.pcard__ask-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 1.4; font-weight: var(--fw-semibold);
  color: var(--gsb-pink);
}
.pcard__ask-kicker svg { color: var(--gsb-coral); }
.pcard__ask-btn {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  height: 44px; padding: 0 14px 0 18px;
  border-radius: 12px;
  background: var(--gsb-gradient);
  color: #FFFFFF;
  font-size: 14px; line-height: 1.4; font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-pink);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.pcard__ask-btn:active { transform: scale(0.97); }
@media (hover: hover) {
  .pcard__ask-btn:hover { box-shadow: 0 16px 30px -10px rgba(237, 0, 140, 0.55); }
  .pcard__ask-btn:hover svg { transform: translateX(2px); }
}
.pcard__ask-btn svg { transition: transform var(--t-med) var(--ease-out); }

/* ---------------- "ดูผลิตภัณฑ์ทั้งหมด >" ---------------- */
.s-products__progress { display: none; }
.s-products__all { margin-top: 40px; display: flex; justify-content: center; }
.s-products__all-link {
  display: inline-flex; align-items: center;
  font-size: 14px; line-height: 1.5; font-weight: var(--fw-medium);
  color: var(--gsb-blue);
  border-radius: 6px;
}
.s-products__all-link svg { flex: none; transition: transform var(--t-med) var(--ease-out); }
@media (hover: hover) {
  .s-products__all-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .s-products__all-link:hover svg { transform: translateX(3px); }
}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1279px) {
  .s-products__head { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 0; gap: 28px; }
  .s-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcard--ask { display: flex; }
}

@media (max-width: 1023px) {
  .s-products { padding: 56px 0; }
  .s-products__title { font-size: 36px; }
  .s-products__panels { margin-top: 32px; }
  .s-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard--ask { display: none; }
}

@media (max-width: 767px) {
  .s-products { padding: 48px 0 40px; }
  .s-products__head { gap: 20px; }
  .s-products__eyebrow { font-size: 14px; }
  .s-products__title { font-size: 28px; }
  .s-products__tabs-wrap { align-self: stretch; }
  .s-products__tab { height: 36px; padding: 9px 14px; }
  .s-products__ind { height: 36px; }
  .s-products__panels { margin-top: 24px; }
  /* swipeable carousel with a peeking next card */
  .s-products__grid {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 6px var(--gutter) 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .s-products__grid::-webkit-scrollbar { display: none; }
  .s-products__grid > .pcard { flex: 0 0 min(284px, calc(100vw - 88px)); scroll-snap-align: start; }
  .pcard--ask { display: flex; }
  .s-products__progress {
    display: block;
    position: relative;
    width: 72px; height: 3px; margin: 14px auto 0;
    border-radius: 3px;
    background: #F1DCE8;
    overflow: hidden;
  }
  .s-products__progress span {
    position: absolute; left: 0; top: 0; bottom: 0; width: var(--pw, 30%);
    border-radius: inherit;
    background: var(--gsb-pink);
    transform: translateX(var(--px, 0));
    transition: transform 120ms linear;
  }
  .s-products__all { margin-top: 24px; }
  .s-products__all-link { min-height: 44px; }
}

@media (max-width: 479px) {
  .s-products__title { font-size: 26px; }
}

/* Reduced motion: no lift / zoom / drift — the hover shadow still fades in as the affordance. */
@media (prefers-reduced-motion: reduce) {
  .s-products .pcard:hover,
  .s-products .pcard:has(.pcard__hit:active),
  .s-products .pcard:hover .pcard__img,
  .s-products .pcard:hover .pcard__blob,
  .s-products .pcard--glyph:hover .pcard__ring { transform: none; }
  .s-products .pcard--glyph:hover .pcard__tile { transform: translateY(0) rotate(8deg) scale(1); }
}