/* Thai Product Slider */
.tbs{--navy:#0d1d52;--pink:#f4a7bf;--pink2:#ec5f8e;--bg:#fdf4f6;--img:640px;--txt:520px;--in:56px;--gap:110px;
  position:relative;overflow:hidden;background:var(--bg);font-family:'Jost',sans-serif;color:var(--navy);padding:110px 0}
.tbs *{box-sizing:border-box}
.tbs-track{display:flex;gap:var(--gap);will-change:transform;transition:transform .7s cubic-bezier(.65,.05,.25,1)}
.tbs-slide{flex:none;display:flex;align-items:center;gap:var(--in);width:calc(var(--img) + var(--in) + var(--txt))}

/* image card */
.tbs-media{position:relative;flex:none;width:var(--img);aspect-ratio:1;border-radius:10px;overflow:hidden;display:block;
  background:radial-gradient(circle at 50% 46%,#fff 0%,#fbe6ec 42%,#eab3c5 100%)}
.tbs .tbs-media img.tbs-img{display:block;transition:transform .6s ease}
.tbs--photo .tbs-media img.tbs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tbs-pod{display:none}
.tbs--photo .tbs-spark{display:none}
.tbs--packshot .tbs-media img.tbs-img{position:absolute;z-index:2;left:8%;top:8%;width:84%;height:84%;object-fit:contain;
  mix-blend-mode:multiply}  /* white photo backgrounds melt into the pink backdrop */
.tbs-slide.is-active .tbs-media:hover img.tbs-img{transform:translateY(-6px) scale(1.02)}
.tbs-pod{position:absolute;z-index:1;left:12%;right:12%;bottom:-7%;height:22%;border-radius:50%;
  background:linear-gradient(180deg,#fff 0%,#f6eef2 55%,#e8dde4 100%);box-shadow:0 -6px 18px rgba(255,255,255,.6) inset}
.tbs-spark{position:absolute;z-index:3;width:44px;left:16%;top:18%;fill:#fff;opacity:.9;filter:drop-shadow(0 0 6px #fff)}

/* text */
.tbs-text{width:var(--txt);transition:opacity .5s}
.tbs-slide:not(.is-active) .tbs-text{opacity:.4}
.tbs-brand{display:inline-block;font-size:14px;letter-spacing:5px;text-transform:uppercase;color:var(--pink2);font-weight:500;margin-bottom:12px}
.tbs h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:'Jost',sans-serif;font-size:46px;line-height:1.08;font-weight:600;text-transform:uppercase;margin:0 0 22px;letter-spacing:.5px}
.tbs h3 a{color:var(--navy);text-decoration:none}
.tbs .tbs-desc{font-family:'Jost',sans-serif;font-size:20px;line-height:1.75;margin:0 0 22px;color:#2a3566;max-width:500px}
.tbs-price{font-size:24px;font-weight:500;margin:0 0 30px;color:var(--navy)}
.tbs-price del{opacity:.5;font-weight:400;margin-right:8px}
.tbs-price ins{text-decoration:none;color:var(--pink2)}
.tbs .tbs-btn{display:block;max-width:472px;text-align:center;border:1.5px solid var(--navy);color:var(--navy);text-decoration:none;background:transparent;
  font-family:'Jost',sans-serif;font-size:15px;letter-spacing:5px;text-transform:uppercase;padding:16px 20px;transition:background .3s,color .3s}
.tbs .tbs-btn:hover{background:var(--navy);color:#fff}

/* controls */
.tbs .tbs-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:46px;height:46px;padding:0;border-radius:50%;border:0;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(13,29,82,.15);transition:background .3s}
.tbs .tbs-arrow:hover{background:var(--pink)}
.tbs-arrow svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.8}
.tbs-prev{left:20px}.tbs-next{right:20px}
.tbs-dots{display:flex;justify-content:center;gap:10px;margin-top:44px}
.tbs .tbs-dots button{width:8px;height:8px;min-height:0;border-radius:8px;border:0;padding:0;background:rgba(13,29,82,.2);cursor:pointer;transition:width .4s,background .4s}
.tbs .tbs-dots button.on{width:28px;background:var(--pink2)}

@media (max-width:1440px){.tbs{--img:520px;--txt:440px;--in:44px;--gap:90px}.tbs h3{font-size:38px}.tbs .tbs-desc{font-size:18px}}
@media (max-width:1100px){.tbs{--img:42vw;--txt:38vw;--in:32px;--gap:60px;padding:70px 0}.tbs h3{font-size:34px}.tbs .tbs-desc{font-size:17px}}
@media (max-width:767px){
  .tbs{--img:84vw;--txt:84vw;--in:22px;--gap:14px;padding:44px 0}
  .tbs-slide{flex-direction:column;align-items:flex-start;width:var(--img)}
  .tbs h3{font-size:28px;margin-bottom:12px}.tbs .tbs-desc{font-size:16px;margin-bottom:14px}.tbs-brand{font-size:12px;margin-bottom:6px}
  .tbs-price{font-size:20px;margin-bottom:20px}
  .tbs-slide:not(.is-active) .tbs-text{opacity:0}
  .tbs .tbs-arrow{top:calc(44px + 42vw);width:40px;height:40px}.tbs-prev{left:10px}.tbs-next{right:10px}
  .tbs-dots{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.tbs-track{transition:none}}
