/* TS_LUXE_HOME_V3 — SHEGLAM-style storefront: home, collections and category pages. Everything sits under .tsx
   (header/footer: ts-shell.css). Loaded after Bootstrap/custom.css through @push('styles'). */
.tsx{
  --ink:#111; --mute:#6b6b6b; --line:#eee; --soft:#f7f7f7; --pink:#ff2e8b; --pink-d:#e8157a; --pink-s:#fde4ec;
  --f:"Readex Pro",Almarai,Tahoma,sans-serif; --f-fun:"Marhey","Readex Pro",sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  --w:1880px; --gut:clamp(16px,3.2vw,64px); --top:0px;
  --c:#f6a5c0; --c-bg:#fde7ef; --btn:#fde4ec; --btn-ink:#e8157a;
  position:relative; width:100%; overflow-x:hidden; overflow-x:clip;
  background:#fff; color:var(--ink); font-family:var(--f); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.tsx *,.tsx *::before,.tsx *::after{box-sizing:border-box}
.tsx a{color:inherit;text-decoration:none}
.tsx h2,.tsx h3,.tsx p{margin:0}
.tsx img{display:block;max-width:100%}
.tsx button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* themes (SHEGLAM gives every collection its own color) */
.tsx-theme-offers{--c:#ff2e8b;--c-bg:#ffe0ee;--btn:#ff2e8b;--btn-ink:#fff}
.tsx-theme-makeup{--c:#f6a5c0;--c-bg:#fde7ef;--btn:#fde4ec;--btn-ink:#e8157a}
.tsx-theme-skincare{--c:#a9b8f5;--c-bg:#eef1ff;--btn:#4d5fd8;--btn-ink:#fff}
.tsx-theme-haircare{--c:#8a5b38;--c-bg:#f3e8de;--btn:#83552f;--btn-ink:#fff}

/* reveal: visible by default, JS opts in */
.tsx-js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.tsx-js [data-reveal].is-in{opacity:1;transform:none}

.tsx-title{font-weight:700;font-size:clamp(26px,3vw,40px);text-align:center;letter-spacing:-.01em;margin-bottom:26px!important}
.tsx-title-pink{color:var(--pink-d);text-align:right;margin-bottom:0!important}

/* ===== brand switch ===== */
.tsx-switch{display:flex;justify-content:center;gap:0;width:max-content;margin:14px auto 14px;background:#e9e9e9;border-radius:999px;padding:4px;direction:ltr}
.tsx-switch a{padding:10px 26px;border-radius:999px;font-weight:700;font-size:14px;color:#555!important;letter-spacing:.02em;transition:background .3s,color .3s}
.tsx-switch a.is-on{background:#4a3226;color:#fff!important}

/* ===== hero ===== */
.tsx-hero{position:relative}
.tsx-hero .swiper{width:100%}
.tsx-hero .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child){display:none}
.tsx-hero-slide{display:block;overflow:hidden;background:var(--soft)}
.tsx-hero-slide img{width:100%;height:auto;max-height:78vh;object-fit:cover;transform:scale(1.06);transition:transform 7s ease}
.tsx-hero .swiper-slide-active .tsx-hero-slide img{transform:scale(1)}
.tsx-hero-dots{position:absolute;z-index:3;bottom:18px!important;left:0;right:0;display:flex;justify-content:center;gap:7px}
.tsx-hero-dots .swiper-pagination-bullet{width:9px;height:9px;margin:0!important;background:#fff;opacity:.7;border-radius:9px;transition:width .4s var(--ease),background .3s}
.tsx-hero-dots .swiper-pagination-bullet-active{width:34px;background:var(--ink);opacity:1}

/* ===== tiles ===== */
.tsx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,26px);max-width:var(--w);margin:clamp(30px,4vw,50px) auto 0;padding:0 var(--gut)}
.tsx-tile{position:relative;display:block;border-radius:22px;padding:9px;background:var(--c);transition:transform .45s var(--ease),box-shadow .45s}
.tsx-tile:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 24px 40px -22px var(--c)}
.tsx-tile-img{position:relative;display:block;aspect-ratio:1/1.08;border-radius:16px;overflow:hidden;background:#fff}
.tsx-tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .7s}
.tsx-tile-img-2{opacity:0}
.tsx-tile:hover .tsx-tile-img img{transform:scale(1.08)}
.tsx-tile:hover .tsx-tile-img-2{opacity:1}
.tsx-tile-label{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:999px;padding:8px 24px;box-shadow:0 10px 24px -10px rgba(0,0,0,.35);white-space:nowrap}
.tsx-tile-label b{font-size:17px;font-weight:700;line-height:1.3}
.tsx-tile-label small{font-size:11.5px;color:var(--mute)}

/* ===== hype (Worth the Hype) ===== */
.tsx-hype{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(18px,3vw,40px);align-items:center;max-width:var(--w);margin:clamp(50px,6vw,80px) auto 0;padding:0 var(--gut)}
.tsx-hype-art{position:relative;aspect-ratio:1/1.05;border-radius:22px;padding:9px;background:var(--c);overflow:hidden}
.tsx-hype-art::before{content:"";position:absolute;inset:9px;border-radius:16px;background:linear-gradient(160deg,#fff5f9,#ffd3e4)}
.tsx-hype-art img{position:absolute;width:42%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;box-shadow:0 18px 30px -14px rgba(160,20,80,.45);border:4px solid #fff;
  left:calc(6% + var(--k) * 12%);top:calc(14% + (var(--k) - 2) * (var(--k) - 2) * 3%);transform:rotate(calc((var(--k) - 2) * 7deg));animation:tsxBob 5s ease-in-out infinite;animation-delay:calc(var(--k) * -1s)}
.tsx-hype-art img:nth-child(3){z-index:2;width:48%}
@keyframes tsxBob{50%{translate:0 -10px}}
.tsx-hype-sticker{position:absolute;z-index:3;bottom:20px;right:20px;background:var(--pink);color:#fff;font-weight:700;font-size:15px;padding:9px 18px;border-radius:999px;transform:rotate(-6deg);box-shadow:0 10px 20px -8px var(--pink)}
.tsx-hype .tsx-row-track{grid-auto-columns:calc((100% - 3 * 14px) / 4)}

/* ===== world block ===== */
.tsx-world{max-width:var(--w);margin:clamp(56px,7vw,96px) auto 0;padding:0 var(--gut);scroll-margin-top:calc(var(--top) + 14px)}
.tsx-banner{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;min-height:clamp(260px,30vw,400px);border-radius:24px;padding:10px;background:var(--c);overflow:hidden;isolation:isolate}
.tsx-banner::before{content:"";position:absolute;inset:10px;border-radius:18px;z-index:-1;background:radial-gradient(120% 120% at 15% 50%,#fff 0,var(--c-bg) 55%,var(--c-bg) 100%)}
.tsx-theme-offers .tsx-banner::before{background:radial-gradient(120% 120% at 15% 50%,#ff7ab5 0,#ff2e8b 70%)}
.tsx-theme-haircare .tsx-banner::before{background:radial-gradient(120% 120% at 15% 50%,#b78a63 0,#8a5b38 70%)}
.tsx-banner-copy{padding:clamp(20px,3vw,46px);display:flex;flex-direction:column;gap:6px}
.tsx-banner-copy small{font-size:12px;font-weight:600;letter-spacing:.18em;opacity:.7;direction:ltr;text-align:right}
.tsx-banner-copy b{font-size:clamp(40px,5.6vw,84px);font-weight:700;line-height:1.05;color:var(--btn-ink);letter-spacing:-.01em}
.tsx-theme-makeup .tsx-banner-copy b{color:var(--pink-d)}
.tsx-theme-skincare .tsx-banner-copy b{color:#3c4fc9}
.tsx-banner-copy span{font-size:clamp(16px,1.6vw,22px);font-weight:600;max-width:32ch}
.tsx-banner-copy em{font-style:normal;display:inline-block;width:max-content;margin-top:14px;background:var(--ink);color:#fff;padding:11px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:transform .3s var(--ease),background .3s}
.tsx-banner:hover .tsx-banner-copy em{transform:translateX(-6px);background:var(--pink-d)}
.tsx-theme-offers .tsx-banner-copy,.tsx-theme-haircare .tsx-banner-copy{color:#fff}
.tsx-theme-offers .tsx-banner-copy em,.tsx-theme-haircare .tsx-banner-copy em{background:#fff;color:var(--ink)}
.tsx-banner-stage{position:relative;height:100%;min-height:inherit;perspective:900px}
.tsx-banner-stage img{position:absolute;width:30%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;border:5px solid #fff;box-shadow:0 22px 36px -18px rgba(0,0,0,.45);
  left:calc(6% + var(--k) * 19%);top:50%;translate:0 -50%;rotate:calc((var(--k) - 1.5) * 6deg);transition:rotate .7s var(--ease),translate .7s var(--ease);backface-visibility:hidden;will-change:transform,opacity}
.tsx-banner-stage img:nth-child(2),.tsx-banner-stage img:nth-child(3){z-index:2;width:34%}
.tsx-banner:hover .tsx-banner-stage img{rotate:calc((var(--k) - 1.5) * 11deg);translate:0 calc(-50% - 10px)}
.tsx-banner-bubbles i{position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.55);animation:tsxRise 9s linear infinite}
.tsx-banner-bubbles i:nth-child(1){width:18px;height:18px;left:12%;bottom:-20px}
.tsx-banner-bubbles i:nth-child(2){width:10px;height:10px;left:30%;bottom:-20px;animation-delay:-3s}
.tsx-banner-bubbles i:nth-child(3){width:26px;height:26px;left:55%;bottom:-30px;animation-delay:-5s}
.tsx-banner-bubbles i:nth-child(4){width:12px;height:12px;left:75%;bottom:-20px;animation-delay:-1.5s}
.tsx-banner-bubbles i:nth-child(5){width:16px;height:16px;left:90%;bottom:-20px;animation-delay:-7s}
@keyframes tsxRise{to{transform:translateY(-460px);opacity:0}}

/* tabs */
.tsx-tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:22px 0 4px;padding:2px}
.tsx-tabs::-webkit-scrollbar{display:none}
.tsx-tab{flex-shrink:0;padding:10px 20px;border-radius:999px;border:1.5px solid var(--line)!important;font-weight:600;font-size:15px;transition:background .25s,border-color .25s,color .25s}
.tsx-tab sup{font-size:10px;opacity:.6}
.tsx-tab:hover{border-color:var(--c)!important}
.tsx-tab.is-on{background:var(--ink);border-color:var(--ink)!important;color:#fff}

/* product row (carousel) */
.tsx-row{position:relative}
.tsx-row-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 14px) / 5);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:18px 2px 8px;scroll-behavior:smooth;overscroll-behavior-x:contain;transition:opacity .3s}
.tsx-row-track::-webkit-scrollbar{display:none}
.tsx-row-track.is-busy{opacity:.35;pointer-events:none}
.tsx-arrow{position:absolute;z-index:4;top:34%;width:42px;height:42px;border-radius:50%;background:#fff!important;box-shadow:0 6px 18px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;transition:opacity .3s,transform .3s}
.tsx-arrow::before{content:"";width:9px;height:9px;border-left:2px solid #111;border-bottom:2px solid #111}
.tsx-arrow-next{left:-12px}.tsx-arrow-next::before{transform:translateX(2px) rotate(45deg)}
.tsx-arrow-prev{right:-12px}.tsx-arrow-prev::before{transform:translateX(-2px) rotate(-135deg)}
.tsx-arrow:hover{transform:scale(1.08)}
.tsx-arrow[disabled]{opacity:0;pointer-events:none}

/* card */
.tsx-card{scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;text-align:center}
.tsx-card.is-new{animation:tsxIn .7s var(--ease) both;animation-delay:calc(var(--n,0) * 60ms)}
@keyframes tsxIn{from{opacity:0;transform:translateY(24px)}}
.tsx-card-media{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--soft)}
.tsx-card-media .tsx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform 1s var(--ease)}
.tsx-js .tsx-img{opacity:0}
.tsx-js .tsx-img.is-loaded{opacity:1}
.tsx-img-alt,.tsx-js .tsx-img-alt.is-loaded{opacity:0}
.tsx-card:hover .tsx-img-main{transform:scale(1.06)}
.tsx-card:hover .tsx-img-alt.is-loaded{opacity:1;transform:scale(1.06)}
.tsx-tag{position:absolute;top:10px;right:10px;z-index:2;background:#c8b6ff;color:#fff;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:5px}
.tsx-tag-sale{background:var(--pink)}
.tsx-say{position:absolute;z-index:3;bottom:10px;left:50%;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff;color:var(--pink-d);font-family:var(--f-fun);font-weight:600;font-size:12.5px;padding:6px 13px;border-radius:16px 16px 16px 4px;
  box-shadow:0 8px 18px -6px rgba(232,21,122,.45);opacity:0;transform:translate(-50%,10px) scale(.7);transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.tsx-card.is-talking .tsx-say{opacity:1;transform:translate(-50%,0) scale(1)}
.tsx-card.is-talking .tsx-img-main{animation:tsxWiggle .6s ease}
@keyframes tsxWiggle{30%{rotate:-2deg;scale:1.04}70%{rotate:2deg;scale:1.04}}
.tsx-card-title{font-size:14.5px!important;font-weight:600!important;line-height:1.5!important;margin:12px 4px 4px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--f)!important}
.tsx-card-title a:hover{color:var(--pink-d)}
.tsx-card-price{display:flex;justify-content:center;align-items:baseline;gap:8px;font-size:14px}
.tsx-card-price b{font-weight:700}
.tsx-card-price s{color:#a5a5a5;font-size:13px}
.tsx-buy{display:flex;align-items:center;justify-content:center;margin-top:12px;min-height:42px;border-radius:9px;background:var(--btn)!important;color:var(--btn-ink)!important;font-weight:600;font-size:14px;transition:filter .25s,transform .25s;position:relative;overflow:hidden}
.tsx-buy::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.tsx-buy:hover{filter:brightness(.96);transform:translateY(-2px)}
.tsx-buy:hover::after{transform:translateX(120%)}
.tsx-buy.is-done{background:#1b9e5a!important;color:#fff!important}

/* skeleton */
.tsx-skel span{display:block;aspect-ratio:1;border-radius:14px}
.tsx-skel i{display:block;height:12px;width:70%;margin:14px auto 0;border-radius:6px}
.tsx-skel i+i{width:40%}
.tsx-skel span,.tsx-skel i{background:linear-gradient(90deg,#f2f2f2 25%,#fafafa 50%,#f2f2f2 75%);background-size:200% 100%;animation:tsxSk 1.2s infinite}
@keyframes tsxSk{to{background-position:-200% 0}}

/* ===== love (coverflow) ===== */
.tsx-love{max-width:var(--w);margin:clamp(70px,8vw,110px) auto 0;padding:0 var(--gut);position:relative}
.tsxLoveSwiper{overflow:visible!important;padding:10px 0 20px!important}
.tsxLoveSwiper .swiper-slide{width:clamp(180px,20vw,260px);transition:transform .5s,opacity .5s}
.tsxLoveSwiper .swiper-slide:not(.swiper-slide-active){opacity:.8}
.tsxLoveSwiper .swiper-slide-active .tsx-card-media{box-shadow:0 26px 50px -24px rgba(232,21,122,.55)}
.tsx-love-nav{display:flex;justify-content:center;gap:14px;margin-top:6px}
.tsx-love-nav .tsx-arrow{position:static}

/* ===== bento (Your Hot Takes) ===== */
.tsx-bento-wrap{max-width:var(--w);margin:clamp(70px,8vw,110px) auto 0;padding:0 clamp(12px,2vw,24px)}
.tsx-bento{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:clamp(300px,24vw,420px);gap:16px;padding:0 var(--gut)}
.tsx-b{border-radius:34px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:34px 28px}
.tsx-b-photo{padding:0;background:#f4d9e3}
.tsx-b-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tsx-b-photo:hover img{transform:scale(1.06)}
.tsx-b-white{background:#f6f6f6}
.tsx-b-hot{background:var(--pink);color:#fff}
.tsx-b-pink{background:#f3a6c2;color:#fff;grid-column:span 2}
.tsx-b p{font-size:15.5px;line-height:1.9;max-width:440px}
.tsx-b-chip{border:1.5px solid currentColor;border-radius:999px;padding:3px 14px;font-size:13px;font-weight:600;transition:transform .5s var(--ease)}
.tsx-pill{background:#fff;color:#111!important;padding:11px 22px;border-radius:12px;font-weight:700;font-size:14px;transition:transform .3s}
.tsx-pill-dark{background:#111;color:#fff!important}
.tsx-pill:hover{transform:translateY(-3px)}

/* ===== icons ===== */
.tsx-icons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:var(--w);margin:clamp(60px,7vw,90px) auto 0;padding:0 var(--gut);text-align:center}
.tsx-icons i{font-size:40px;display:block;margin-bottom:12px}
.tsx-icons div:nth-child(1) i{color:#f08fb3}.tsx-icons div:nth-child(2) i{color:#9fa9f2}.tsx-icons div:nth-child(3) i{color:#d39cf2}.tsx-icons div:nth-child(4) i{color:#9ccf8f}.tsx-icons div:nth-child(5) i{color:#f2c46b}
.tsx-icons b{display:block;font-size:15px;font-weight:700}
.tsx-icons span{font-size:13px;color:var(--mute)}

/* ===== toast ===== */
.tsx-toast{position:fixed;z-index:3001;left:50%;bottom:22px;transform:translateX(-50%);background:#111;color:#fff;padding:13px 20px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 16px 40px -12px rgba(0,0,0,.5);display:flex;gap:12px;align-items:center;white-space:nowrap}
.tsx-toast[hidden]{display:none}
.tsx-toast a{color:#ff7ab5!important;text-decoration:underline!important}

/* ===== responsive ===== */
@media (max-width:1100px){
  .tsx-row-track{grid-auto-columns:calc((100% - 3 * 14px) / 4)}
  .tsx-hype{grid-template-columns:1fr}
  .tsx-hype-art{max-width:520px;width:100%;margin:0 auto;aspect-ratio:1.4/1}
  .tsx-icons{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}
}
@media (max-width:767px){
  .tsx-switch a{padding:8px 16px;font-size:12px}
  .tsx-hero-slide img{max-height:none}
  .tsx-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tsx-tile{padding:6px;border-radius:18px}
  .tsx-tile-img{border-radius:13px}
  .tsx-tile-label{bottom:14px;padding:6px 16px}
  .tsx-tile-label b{font-size:15px}
  .tsx-hype-art{aspect-ratio:1.25/1}
  .tsx-title-pink{text-align:center}
  .tsx-row-track,.tsx-hype .tsx-row-track{grid-auto-columns:44%;gap:10px;padding-top:14px}
  .tsx-arrow-next,.tsx-arrow-prev{display:none}
  .tsx-banner{grid-template-columns:1fr;min-height:0;padding:7px;border-radius:20px}
  .tsx-banner::before{inset:7px;border-radius:15px}
  .tsx-banner-copy{padding:22px 20px 6px;text-align:center;align-items:center}
  .tsx-banner-copy small{text-align:center}
  .tsx-banner-stage{min-height:200px;margin-bottom:10px}
  .tsx-banner-stage img{width:31%;left:calc(3% + var(--k) * 21%)}
  .tsx-banner-stage img:nth-child(2),.tsx-banner-stage img:nth-child(3){width:34%}
  .tsx-tabs{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .tsx-card-title{font-size:13px!important}
  .tsx-buy{min-height:38px;font-size:13px}
  .tsx-bento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(200px,auto);gap:10px}
  .tsx-b{border-radius:24px;padding:24px 16px}
  .tsx-b-white,.tsx-b-hot,.tsx-b-pink{grid-column:span 2}
  .tsx-b p{font-size:14px}
  .tsx-icons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tsx-icons i{font-size:32px}
}
@media (hover:none){.tsx-card:hover .tsx-img-main{transform:none}}
@media (prefers-reduced-motion:reduce){.tsx *,.tsx *::before,.tsx *::after{animation:none!important;transition-duration:.01ms!important}}

/* ================= V3.1 — full width, tidy heads, see-all links, bento slideshows, typed text, collection page ================= */
@media (min-width:1600px){.tsx-row-track{grid-auto-columns:calc((100% - 5 * 16px) / 6);gap:16px}.tsx-hype .tsx-row-track{grid-auto-columns:calc((100% - 4 * 14px) / 5)}}
.tsx-sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.tsx-row-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}
.tsx-row-head .tsx-tabs{margin:0;flex:1;min-width:0}
.tsx-see-all{flex-shrink:0;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--ink)!important;padding:10px 20px;border-radius:999px;border:1.5px solid var(--ink);transition:background .3s,color .3s}
.tsx-see-all i{font-style:normal;display:inline-block;transition:transform .35s var(--ease)}
.tsx-see-all:hover{background:var(--ink);color:#fff!important}
.tsx-see-all:hover i{transform:translateX(-5px)}

/* bento: products one after another */
.tsx-b-show{position:relative;padding:0;background:#f6f6f6}
.tsx-show-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity 1s ease;pointer-events:none}
.tsx-show-slide.is-on{opacity:1;pointer-events:auto}
.tsx-show-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 6s ease}
.tsx-show-slide.is-on img{transform:scale(1)}
.tsx-show-cap{position:absolute;inset:auto 14px 14px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.94);border-radius:16px;padding:12px 16px;
  transform:translateY(20px);opacity:0;transition:transform .7s var(--ease) .35s,opacity .7s .35s;box-shadow:0 12px 30px -14px rgba(0,0,0,.4)}
.tsx-show-slide.is-on .tsx-show-cap{transform:none;opacity:1}
.tsx-show-cap b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsx-show-cap em{font-style:normal;font-weight:700;color:var(--pink-d);white-space:nowrap}
.tsx-show-dots{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2}
.tsx-show-dots i{width:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.55);overflow:hidden;position:relative}
.tsx-show-dots i.is-on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:100% 50%;animation:tsxBar 3.6s linear forwards}
@keyframes tsxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* typed text */
.tsx-js [data-type] .wd{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .35s,transform .45s var(--ease),filter .45s}
.tsx-js [data-type] .wd.on{opacity:1;transform:none;filter:none}
[data-type].is-typing::after{content:"";display:inline-block;width:2px;height:1.1em;margin-right:3px;vertical-align:-.15em;background:currentColor;animation:tsxCaret .8s steps(1) infinite}
@keyframes tsxCaret{50%{opacity:0}}
.tsx-b:hover .tsx-b-chip{transform:scale(1.06) rotate(-2deg)}
.tsx-b-white,.tsx-b-hot,.tsx-b-pink{position:relative;overflow:hidden}
.tsx-b-hot::before,.tsx-b-pink::before,.tsx-b-white::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.14);top:-90px;left:-70px;animation:tsxFloat 9s ease-in-out infinite}
.tsx-b-white::before{background:rgba(255,46,139,.06)}
@keyframes tsxFloat{50%{transform:translate(40px,30px) scale(1.1)}}
.tsx-b-white>*,.tsx-b-hot>*,.tsx-b-pink>*{position:relative}

/* collection page */
.tsx-collection{padding-bottom:30px}
.tsx-col-head{max-width:var(--w);margin:18px auto 0;padding:clamp(26px,3vw,44px) var(--gut);text-align:center;background:var(--c-bg);border-radius:0 0 28px 28px;border-bottom:6px solid var(--c)}
.tsx-crumbs{display:flex;justify-content:center;gap:8px;font-size:13px;color:var(--mute);margin-bottom:10px}
.tsx-crumbs b{color:var(--ink)}
.tsx-col-head h1{font-size:clamp(34px,4.6vw,64px);font-weight:700;line-height:1.1;margin:0 0 8px;color:var(--btn-ink)}
.tsx-theme-makeup .tsx-col-head h1{color:var(--pink-d)}
.tsx-theme-skincare .tsx-col-head h1{color:#3c4fc9}
.tsx-theme-offers .tsx-col-head h1{color:var(--pink-d)}
.tsx-theme-haircare .tsx-col-head h1{color:#83552f}
.tsx-col-head p{color:var(--mute);margin-bottom:18px!important}
.tsx-col-worlds{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.tsx-col-worlds a{padding:9px 20px;border-radius:999px;background:#fff;font-weight:600;font-size:14px;border:1.5px solid #fff;transition:border-color .25s}
.tsx-col-worlds a:hover{border-color:var(--c)}
.tsx-col-worlds a.is-on{background:var(--ink);color:#fff!important;border-color:var(--ink)}
.tsx-col-bar{max-width:var(--w);margin:22px auto 0;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.tsx-col-bar .tsx-tabs{margin:0;flex:1;min-width:0}
.tsx-col-tools{display:flex;align-items:center;gap:16px;flex-shrink:0}
.tsx-col-count{color:var(--mute);font-size:14px}
.tsx-col-count b{color:var(--ink)}
.tsx-sort{display:flex;align-items:center;gap:8px;font-size:14px;margin:0}
.tsx-sort select{font:inherit;font-weight:600;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;cursor:pointer}
.tsx-col-grid{max-width:var(--w);margin:24px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 16px}
.tsx-col-more{display:flex;justify-content:center;margin-top:34px}
.tsx-col-more[hidden]{display:none}
.tsx-col-more .tsx-buy{min-width:240px;background:var(--ink)!important;color:#fff!important}
.tsx-col-empty{text-align:center;color:var(--mute);padding:60px 0}
@media (max-width:1500px){.tsx-col-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1200px){.tsx-col-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.tsx-col-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tsx-bento{grid-auto-rows:280px}}
@media (max-width:767px){
  .tsx-row-head{flex-direction:column;align-items:stretch;gap:12px}
  .tsx-see-all{align-self:center;padding:9px 18px;font-size:14px}
  .tsx-sec-head{flex-direction:column}
  .tsx-col-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}
  .tsx-col-bar{flex-direction:column;align-items:stretch}
  .tsx-col-tools{justify-content:space-between}
  .tsx-col-head{border-radius:0 0 22px 22px;margin-top:10px}
  .tsx-bento{grid-auto-rows:240px;padding:0 var(--gut);grid-auto-flow:dense}
  .tsx-b-show{grid-column:span 1}
  .tsx-show-cap{inset:auto 8px 8px 8px;padding:8px 10px;flex-direction:column;align-items:flex-start;gap:2px}
  .tsx-show-cap b{font-size:12.5px;max-width:100%}
}

/* TS_BANNER_FLY_V1 — banner cards swap to more products of the world (transform only; translate/rotate stay for the fan) */
.tsx-banner-stage img.is-out-fly{animation:tsxFlyOut .9s cubic-bezier(.55,0,.75,.3) forwards}
.tsx-banner-stage img.is-in-fly{animation:tsxFlyIn 1.1s cubic-bezier(.2,.7,.25,1) both}
.tsx-banner-stage img.is-out-flip{animation:tsxFlipOut .45s ease-in forwards}
.tsx-banner-stage img.is-in-flip{animation:tsxFlipIn .55s cubic-bezier(.2,.8,.3,1.2) both}
.tsx-banner-stage img.is-out-zoom{animation:tsxZoomOut .45s ease-in forwards}
.tsx-banner-stage img.is-in-zoom{animation:tsxZoomIn .7s cubic-bezier(.3,1.6,.5,1) both}
.tsx-banner-stage img.is-out-swirl{animation:tsxSwirlOut .6s ease-in forwards}
.tsx-banner-stage img.is-in-swirl{animation:tsxSwirlIn .8s cubic-bezier(.2,.8,.25,1) both}
@keyframes tsxFlyOut{
  0%{transform:none;opacity:1}
  25%{transform:translate(calc(var(--dx,1) * 18px),-40px) rotate(calc(var(--dx,1) * 14deg)) rotateX(35deg) scale(1.04)}
  60%{transform:translate(calc(var(--dx,1) * 90px),-170px) rotate(calc(var(--dx,1) * -20deg)) rotateX(-40deg) rotateY(30deg) scale(.8);opacity:.9}
  100%{transform:translate(calc(var(--dx,1) * 160px),-340px) rotate(calc(var(--dx,1) * 50deg)) rotateX(70deg) rotateY(-50deg) scale(.5);opacity:0}}
@keyframes tsxFlyIn{
  0%{transform:translate(calc(var(--dx,1) * -120px),-300px) rotate(calc(var(--dx,1) * -40deg)) rotateX(60deg) scale(.6);opacity:0}
  35%{transform:translate(calc(var(--dx,1) * 50px),-140px) rotate(calc(var(--dx,1) * 18deg)) rotateX(-35deg) rotateY(-20deg) scale(.85);opacity:1}
  65%{transform:translate(calc(var(--dx,1) * -22px),-40px) rotate(calc(var(--dx,1) * -9deg)) rotateX(20deg) scale(.97)}
  85%{transform:translate(calc(var(--dx,1) * 6px),6px) rotate(calc(var(--dx,1) * 3deg)) rotateX(-6deg)}
  100%{transform:none;opacity:1}}
@keyframes tsxFlipOut{to{transform:rotateY(90deg) scale(.95)}}
@keyframes tsxFlipIn{from{transform:rotateY(-90deg) scale(.95)}to{transform:none}}
@keyframes tsxZoomOut{to{transform:scale(.2) rotate(-12deg);opacity:0}}
@keyframes tsxZoomIn{from{transform:scale(.2) rotate(10deg);opacity:0}to{transform:none;opacity:1}}
@keyframes tsxSwirlOut{to{transform:rotate(200deg) scale(.1);opacity:0}}
@keyframes tsxSwirlIn{from{transform:rotate(-200deg) scale(.1);opacity:0}to{transform:none;opacity:1}}
/* little bills/sparkles thrown when a card flies */
.tsx-banner-stage .tsx-bill{position:absolute;z-index:6;width:26px;height:14px;border-radius:3px;background:linear-gradient(135deg,#7bd88f,#2f9e57);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);pointer-events:none;
  animation:tsxBill 1.2s cubic-bezier(.3,.6,.4,1) forwards}
.tsx-banner-stage .tsx-bill.is-heart{width:auto;height:auto;background:none;box-shadow:none;font-size:16px;color:#ff2e8b}
@keyframes tsxBill{
  0%{transform:translate(0,0) rotate(0) rotateX(0);opacity:0}
  15%{opacity:1}
  100%{transform:translate(var(--bx),var(--by)) rotate(var(--br)) rotateX(540deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.tsx-banner-stage .tsx-bill{display:none}}

/* Category tabs as real pill buttons with a count badge (2026-11-03) */
.tsx .tsx-tabs{gap:8px;padding:4px 2px 6px}
.tsx .tsx-tabs .tsx-tab{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  min-height:42px;padding:8px 10px 8px 16px;
  border:1.5px solid #f0e4e8!important;border-radius:999px;
  background:#fff;color:#2a2025;
  font-family:'Readex Pro',Almarai,Tahoma,sans-serif;font-size:14.5px;font-weight:600;line-height:1;
  letter-spacing:0;word-spacing:normal;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 2px rgba(42,32,37,.04);
  transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s cubic-bezier(.34,1.4,.64,1)
}
.tsx .tsx-tabs .tsx-tab__n{
  min-width:26px;height:24px;padding:0 7px;display:inline-grid;place-items:center;
  border-radius:999px;background:#fbeff3;color:#b0405f;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1
}
.tsx .tsx-tabs .tsx-tab:hover{border-color:var(--c,#e3263f)!important;color:var(--c,#e3263f);transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(227,38,63,.45)}
.tsx .tsx-tabs .tsx-tab:active{transform:scale(.96)}
.tsx .tsx-tabs .tsx-tab.is-on{background:var(--ink,#1d1418);border-color:var(--ink,#1d1418)!important;color:#fff;box-shadow:0 8px 18px -10px rgba(29,20,24,.6)}
.tsx .tsx-tabs .tsx-tab.is-on .tsx-tab__n{background:rgba(255,255,255,.18);color:#fff}
.tsx .tsx-tabs .tsx-tab:focus-visible{outline:2px solid var(--c,#e3263f);outline-offset:2px}
@media (max-width:768px){
  .tsx .tsx-tabs .tsx-tab{min-height:38px;padding:6px 8px 6px 13px;font-size:13.5px;gap:6px}
  .tsx .tsx-tabs .tsx-tab__n{min-width:22px;height:21px;font-size:11px}
}

/* ==========================================================================
   Categories — the admin's own categories in the luxe design
   home carousel (.tsx-cats) · «تسوقي حسب القسم» sheet (.tsx-sheet)
   /categories (.tsx-cats-page) · /categories/{slug} (.tsx-col-head--cat)
   ========================================================================== */

/* ---------- one category card ---------- */
.tsx-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 0 var(--line), 0 14px 34px -22px rgba(17, 17, 17, .35);
  transform-style: preserve-3d;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.tsx-cat:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 var(--line), 0 26px 46px -24px rgba(232, 21, 122, .45);
}

.tsx-cat__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--soft);
}

.tsx-cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.tsx-cat:hover .tsx-cat__media img {
  transform: scale(1.08);
}

.tsx-cat__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(17, 17, 17, .28));
  pointer-events: none;
}

.tsx-cat__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 6px;
}

.tsx-cat__name {
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsx-cat__count {
  flex-shrink: 0;
  color: var(--mute);
  font-size: 13px;
}

.tsx-cat__go {
  margin: 0 16px 16px;
  color: var(--pink-d);
  font-size: 13px;
  font-weight: 700;
}

.tsx-cat__go i {
  display: inline-block;
  font-style: normal;
  transition: transform .35s var(--ease);
}

.tsx-cat:hover .tsx-cat__go i {
  transform: translateX(-6px);
}

/* ---------- home carousel: 4 at a time, turning by itself ---------- */
.tsx-cats {
  --per: 4;
  max-width: var(--w);
  margin: clamp(40px, 5vw, 72px) auto 0;
  padding: 0 var(--gut);
}

.tsx-cats__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.tsx-cats__title {
  margin-bottom: 4px !important;
  text-align: right;
}

.tsx-cats__line {
  color: var(--mute);
  font-size: 14px;
}

.tsx .tsx-cats__open {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 14px 30px -16px rgba(17, 17, 17, .6);
  transition: background .3s, transform .3s var(--ease);
}

.tsx .tsx-cats__open:hover {
  background: var(--pink-d);
  transform: translateY(-2px);
}

.tsx-cats__open-ico {
  display: grid;
  grid-template-columns: repeat(2, 6px);
  gap: 3px;
}

.tsx-cats__open-ico i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ease);
}

.tsx-cats__open:hover .tsx-cats__open-ico i:nth-child(1) { transform: translate(-2px, -2px); }
.tsx-cats__open:hover .tsx-cats__open-ico i:nth-child(2) { transform: translate(2px, -2px); }
.tsx-cats__open:hover .tsx-cats__open-ico i:nth-child(3) { transform: translate(-2px, 2px); }
.tsx-cats__open:hover .tsx-cats__open-ico i:nth-child(4) { transform: translate(2px, 2px); }

.tsx-cats__stage {
  position: relative;
  perspective: 1400px;
}

.tsx-cats__arrow {
  top: 38%;
}

.tsx-cats__track {
  display: grid;
  grid-template-columns: repeat(var(--per), minmax(0, 1fr));
  gap: 18px;
}

/* JS shows one page; without JS every category is listed */
.tsx-cats.is-live .tsx-cat {
  display: none;
}

.tsx-cats.is-live .tsx-cat.is-show {
  display: flex;
}

.tsx-cat.is-in {
  animation: tsxCatIn .9s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.tsx-cat.is-out {
  animation: tsxCatOut .42s cubic-bezier(.55, 0, .7, .2) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

.tsx-cats[data-dir="-1"] .tsx-cat.is-in { animation-name: tsxCatInBack; }
.tsx-cats[data-dir="-1"] .tsx-cat.is-out { animation-name: tsxCatOutBack; }

@keyframes tsxCatIn {
  0% { opacity: 0; transform: translateX(-90px) rotateY(-55deg) scale(.86); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}

@keyframes tsxCatOut {
  to { opacity: 0; transform: translateX(80px) rotateY(48deg) scale(.88); filter: blur(4px); }
}

@keyframes tsxCatInBack {
  0% { opacity: 0; transform: translateX(90px) rotateY(55deg) scale(.86); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}

@keyframes tsxCatOutBack {
  to { opacity: 0; transform: translateX(-80px) rotateY(-48deg) scale(.88); filter: blur(4px); }
}

.tsx-cats__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.tsx .tsx-cats__dot {
  position: relative;
  width: 28px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
  transition: width .4s var(--ease);
}

.tsx .tsx-cats__dot.is-on {
  width: 54px;
}

/* the active dot fills up until the next turn */
.tsx-cats__dot.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pink-d);
  transform-origin: right;
  animation: tsxCatFill var(--turn, 4s) linear both;
}

.tsx-cats.is-paused .tsx-cats__dot.is-on::after {
  animation-play-state: paused;
}

@keyframes tsxCatFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .tsx-cats { --per: 3; }
}

@media (max-width: 767px) {
  .tsx-cats { --per: 2; }

  .tsx-cats__head {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .tsx-cats__title {
    text-align: center;
  }

  .tsx .tsx-cats__open {
    justify-content: center;
  }

  .tsx-cats__track {
    gap: 12px;
  }

  .tsx-cat {
    border-radius: 16px;
  }

  .tsx-cat__body {
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 4px;
  }

  .tsx-cat__name {
    width: 100%;
    font-size: 14px;
  }

  .tsx-cat__go {
    margin: 0 12px 12px;
  }

  .tsx-cats__arrow {
    display: none;
  }
}

/* ---------- «تسوقي حسب القسم» sheet ---------- */
.tsx-sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--f);
}

.tsx-sheet::backdrop {
  background: rgba(17, 17, 17, .5);
  backdrop-filter: blur(4px);
}

.tsx-sheet[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tsx-sheet__box {
  width: min(1180px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: 26px clamp(16px, 3vw, 36px) 30px;
  border-radius: 28px 28px 0 0;
  background: #fff;
  animation: tsxSheetUp .55s var(--ease) both;
}

.tsx-sheet.is-closing .tsx-sheet__box {
  animation: tsxSheetDown .3s ease both;
}

@keyframes tsxSheetUp {
  from { transform: translateY(100%); }
}

@keyframes tsxSheetDown {
  to { transform: translateY(100%); }
}

.tsx-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.tsx-sheet__head h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
}

.tsx-sheet__head p {
  color: var(--mute);
  font-size: 14px;
}

.tsx .tsx-sheet__close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 16px;
  transition: background .25s, transform .3s var(--ease);
}

.tsx .tsx-sheet__close:hover {
  background: var(--pink-s);
  transform: rotate(90deg);
}

.tsx-sheet__search {
  display: block;
  margin: 18px 0 20px;
}

.tsx-sheet__search input {
  width: 100%;
  padding: 13px 18px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font: inherit;
  outline: 0;
  transition: border-color .25s;
}

.tsx-sheet__search input:focus {
  border-color: var(--pink-d);
}

.tsx-sheet__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.tsx-sheet[open] .tsx-sheet__grid .tsx-cat {
  animation: tsxCatPop .6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 35ms + 150ms);
}

@keyframes tsxCatPop {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
}

.tsx-sheet__grid .tsx-cat[hidden] {
  display: none;
}

.tsx-sheet__empty {
  padding: 30px 0;
  color: var(--mute);
  text-align: center;
}

.tsx-sheet__all {
  display: block;
  width: max-content;
  margin: 24px auto 0;
  font-weight: 700;
  color: var(--pink-d);
}

@media (max-width: 1000px) {
  .tsx-sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .tsx-sheet__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ---------- /categories ---------- */
.tsx-cats-page .tsx-col-head {
  margin-bottom: 0;
}

.tsx-cats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 16px;
  max-width: var(--w);
  margin: 28px auto 0;
  padding: 0 var(--gut);
}

@media (max-width: 1200px) {
  .tsx-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .tsx-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .tsx-cats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
}

/* ---------- /categories/{slug} ---------- */
.tsx-col-head--cat .tsx-col-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tsx .tsx-col-head--cat .tsx-cats__open {
  padding: 10px 20px;
  font-size: 14px;
}

.tsx-col-search {
  display: flex;
  flex: 1;
  min-width: min(100%, 260px);
  max-width: 460px;
  gap: 8px;
}

.tsx-col-search input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font: inherit;
  outline: 0;
  transition: border-color .25s;
}

.tsx-col-search input:focus {
  border-color: var(--pink-d);
}

.tsx .tsx-col-search button {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.tsx-cat-chips {
  display: flex;
  gap: 10px;
  max-width: var(--w);
  margin: 18px auto 0;
  padding: 2px var(--gut);
  overflow-x: auto;
  scrollbar-width: none;
}

.tsx-cat-chips::-webkit-scrollbar {
  display: none;
}

.tsx-cat-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .25s, background .25s, color .25s;
}

.tsx-cat-chip img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.tsx-cat-chip:hover {
  border-color: var(--pink-d);
}

.tsx-cat-chip.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

/* search on collections: its own full row when the world has tabs */
.tsx-col-bar:has(.tsx-tabs) .tsx-col-search {
  flex-basis: 100%;
  max-width: none;
}