/* ============ The 4 category cards (both sides) — Goji Berry + Cloud Dancer only ============ */
.cat3-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1280px){.cat3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cat3-grid{grid-template-columns:1fr}}
.cat3{--fg:#B91428;--fg-2:rgba(185,20,40,.7);--ln:rgba(185,20,40,.2);--soft:rgba(185,20,40,.07);--on-fg:#F0EEE9;--bg:#F0EEE9;
  position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:460px;border-radius:26px;overflow:hidden;cursor:pointer;
  background:#F0EEE9!important;color:var(--fg);border:1px solid var(--ln)!important;outline:none;
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),--fg .3s;
  box-shadow:0 1px 0 rgba(185,20,40,.05)}
body.theme-exporter .cat3{border-color:transparent!important;box-shadow:0 18px 44px rgba(60,4,12,.28)!important}
/* the Goji Berry curtain that rises on hover */
.cat3::before{content:"";position:absolute;inset:0;z-index:-1;background:#B91428;transform:translateY(101%);transition:transform .65s cubic-bezier(.77,0,.18,1)}
.cat3:hover,.cat3:focus-visible{--fg:#F0EEE9;--fg-2:rgba(240,238,233,.78);--ln:rgba(240,238,233,.3);--on-fg:#B91428;transform:translateY(-8px);box-shadow:0 30px 60px rgba(60,4,12,.3)!important}
.cat3:hover::before,.cat3:focus-visible::before{transform:none}
body.theme-exporter .cat3:hover{box-shadow:0 34px 70px rgba(40,2,8,.45)!important;outline:2px solid rgba(240,238,233,.9);outline-offset:4px}
.cat3 *{transition:color .4s,background-color .4s,border-color .4s}
/* top line: big index + count */
.cat3-top{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px 0}
.cat3-no{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-size:40px;line-height:.9;color:var(--fg)}
.cat3-count{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--ln);color:var(--fg)}
/* stage: rotating ring + orbiting group icons + hero emoji */
.cat3-stage{position:relative;height:190px;display:grid;place-items:center;margin-top:4px}
.cat3-ring{position:absolute;width:168px;height:168px;border-radius:50%;border:1px dashed var(--ln);animation:cat3Spin 40s linear infinite}
.cat3-ring::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1px solid var(--ln);background:var(--soft)}
.cat3-orbit{position:absolute;width:168px;height:168px;animation:cat3Spin 26s linear infinite}
.cat3-orbit b{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(-84px)}
.cat3-orbit em{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:15px;background:#F0EEE9;border:1px solid var(--ln);
  transform:rotate(calc(-360deg / var(--n) * var(--i)));animation:cat3Counter 26s linear infinite}
.cat3-hero{position:relative;font-size:76px;line-height:1;filter:drop-shadow(0 16px 14px rgba(60,4,12,.22));animation:cat3Bob 4.5s ease-in-out infinite;transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.cat3:hover .cat3-hero{transform:scale(1.18) rotate(-6deg)}
.cat3:hover .cat3-orbit,.cat3:hover .cat3-orbit em{animation-duration:9s}
.cat3:hover .cat3-ring{animation-duration:14s}
/* text */
.cat3-body{padding:6px 24px 16px}
.cat3-body h3{margin:0 0 8px;font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:27px;line-height:1.08;letter-spacing:-.01em;color:var(--fg)}
.cat3-body p{margin:0;font-size:12.5px;line-height:1.55;color:var(--fg-2)}
/* scrolling product names */
.cat3-marquee{margin:auto 0 0;padding:10px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cat3-marquee>div{display:flex;gap:10px;width:max-content;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);animation:cat3Slide 32s linear infinite}
.cat3-marquee i{font-style:normal;opacity:.6}
.cat3:hover .cat3-marquee>div{animation-duration:14s}
/* call to action bar */
.cat3-cta{margin-top:0;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:var(--fg);color:var(--on-fg)!important;
  font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.cat3-cta *{color:var(--on-fg)!important}
.cat3-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--on-fg) 45%,transparent);font-size:18px;letter-spacing:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1)!important}
.cat3:hover .cat3-arrow{transform:translateX(4px) rotate(-45deg)}
.cat3:active{transform:translateY(-3px) scale(.985)}
@keyframes cat3Spin{to{transform:rotate(360deg)}}
@keyframes cat3Counter{from{transform:rotate(calc(-360deg / var(--n) * var(--i)))}to{transform:rotate(calc(-360deg / var(--n) * var(--i) - 360deg))}}
@keyframes cat3Bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes cat3Slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cat3-ring,.cat3-orbit,.cat3-orbit em,.cat3-hero,.cat3-marquee>div{animation:none}}
@media (max-width:640px){.cat3{min-height:420px}.cat3-stage{height:170px}}
/* win over the theme's "all text = ink" rule inside the CTA bar */
#app .cat3 .cat3-cta:not(#_),#app .cat3 .cat3-cta *:not(#_){color:var(--on-fg)!important}
#app .cat3 .cat3-arrow:not(#_){border-color:color-mix(in srgb,var(--on-fg) 45%,transparent)!important}
#app .cat3 .cat3-orbit em:not(#_){background:#F0EEE9!important;border-color:rgba(185,20,40,.2)!important}
.mobile-bar{z-index:60}
.cat3-top{justify-content:flex-end;padding-top:20px}.cat3-stage{margin-top:8px}
/* five categories: 3 on top, 2 wider below */
.cat3-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.cat3-grid>.cat3{grid-column:span 2}
.cat3-grid>.cat3:nth-child(4),.cat3-grid>.cat3:nth-child(5){grid-column:span 3}
@media (max-width:1100px){.cat3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cat3-grid>.cat3,.cat3-grid>.cat3:nth-child(4){grid-column:span 1}.cat3-grid>.cat3:nth-child(5){grid-column:span 2}}
@media (max-width:640px){.cat3-grid{grid-template-columns:1fr}.cat3-grid>.cat3,.cat3-grid>.cat3:nth-child(5){grid-column:auto}}
/* no Explore bar: the whole card is the button */
.cat3{min-height:400px}
.cat3-marquee{border-bottom:0;margin-bottom:10px}
/* Export side: red cards with a white pull-up (import side keeps white cards with a red pull-up) */
body.theme-exporter #app .cat3:not(#_){--fg:#F0EEE9;--fg-2:rgba(240,238,233,.78);--ln:rgba(240,238,233,.32);--soft:rgba(240,238,233,.1);--on-fg:#B91428;
  background:#B91428!important;border:1px solid rgba(240,238,233,.38)!important;box-shadow:0 18px 44px rgba(60,4,12,.35)!important}
body.theme-exporter #app .cat3::before{background:#F0EEE9}
body.theme-exporter #app .cat3:is(:hover,:focus-visible):not(#_){--fg:#B91428;--fg-2:rgba(185,20,40,.72);--ln:rgba(185,20,40,.22);--soft:rgba(185,20,40,.07);--on-fg:#F0EEE9;
  border-color:#F0EEE9!important;box-shadow:0 34px 70px rgba(40,2,8,.5)!important}
body.theme-exporter #app .cat3 .cat3-hero{filter:drop-shadow(0 16px 14px rgba(30,0,6,.35))}
/* eight categories: rows of 3 · 2 (wider) · 3 */
.cat3-grid>.cat3:nth-child(n+6){grid-column:span 2}
@media (max-width:1100px){.cat3-grid>.cat3:nth-child(5){grid-column:span 1}.cat3-grid>.cat3:last-child:nth-child(odd){grid-column:span 2}}
@media (max-width:640px){.cat3-grid>.cat3:last-child:nth-child(odd){grid-column:auto}}