/* ============================================================
   ZYMK 大类产品展示板块 v1.16 — 六大水晶品类（对齐 vograce 原图结构）
   卡片内部 = 仅背景（有机色块，hover 位移）+ 中央主题图标（厚度感）
   标题 / 描述 / 按钮 = 卡片外部下方（左对齐垂直堆叠）
   素材（用户后续提供）：stamp 艺术字 / pattern 底纹 / pop 悬浮物 PNG
   当前为 emoji 占位版
   v1.16：ZoyMake 大标题 → Chewy（免费手写泡泡体，近似 bombon Akina）；
          品牌区正文加黑加粗加大
   ============================================================ */

/* Chewy（Google Fonts OFL 免费商用，本地化） */
@font-face{
  font-family:'Chewy';src:url('https://zymk.store/wp-content/uploads/zymk-assets/fonts/chewy.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* 板块 v1.12：去掉嵌套容器（vograce-container），内容直接全宽铺开与背景融为一体；
   左右留白用 section padding（仅 padding-top 被 .vog-page>* !important 覆盖，
   顶部留白用 ::before 占位高度承载） */
.zymk-cat-section{
  background:
    radial-gradient(52% 40% at 12% 6%,rgba(190,170,240,.20),transparent 70%),
    radial-gradient(46% 38% at 88% 12%,rgba(255,214,170,.16),transparent 72%),
    linear-gradient(180deg,#FAF7FD 0%,#F4EFFA 100%);
  padding:0 5.5vw 88px;
  position:relative;
}
.zymk-cat-section::before{content:'';display:block;height:44px;pointer-events:none} /* v1.17: 72→44 与上方滚动条更近 */

/* 品牌区（v1.16：标题 Chewy 手写泡泡体；正文加黑加粗加大） */
.zymk-cat__brand{display:flex;align-items:center;justify-content:space-between;gap:80px;margin-bottom:64px}
.zymk-cat__brand-copy{flex:1;min-width:0}
.zymk-cat__brand-title{
  font-family:'Chewy',system-ui,sans-serif;font-weight:400;
  font-size:56px;line-height:1.06;letter-spacing:.01em;
  color:var(--vog-hx,#14121A);margin:0;
}
.zymk-cat__brand-text{margin-top:24px;font-size:17.5px;font-weight:600;line-height:1.85;color:#2A2434;max-width:100%}

/* 旋转 sticker */
.zymk-cat__sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;width:196px;height:196px;flex:none;border-radius:50%;text-decoration:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.zymk-cat__sticker:hover{transform:rotate(-16deg)}
.zymk-cat__sticker-ring{position:absolute;inset:0;border-radius:50%;animation:zymk-spin 15s linear infinite}
.zymk-cat__sticker-ring text{font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.34em;fill:#2A2436}
.zymk-cat__sticker-core{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:50%;background:linear-gradient(160deg,#1D1926,#3A3048);color:#fff;font-size:42px;box-shadow:0 14px 30px rgba(35,28,55,.28),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.zymk-cat__sticker:hover .zymk-cat__sticker-core{transform:rotate(26deg) scale(1.07)}
@keyframes zymk-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* 网格 v1.14：全宽下改 3 列（卡片 500×375 适中比例，tint Y 方向回归正常） */
.zymk-cat__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 30px}
@media(max-width:1080px){.zymk-cat__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 26px}}
@media(max-width:640px){.zymk-cat__grid{grid-template-columns:1fr;gap:44px 0}}

/* 卡片：仅背景+图标；不裁切（破框关键）、明度差嵌入、hover 浮起 */
.zymk-cat__card{
  position:relative;display:block;aspect-ratio:4/3;border-radius:30px;
  text-decoration:none;isolation:isolate;z-index:1;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;
}
.zymk-cat__card:hover{z-index:6;transform:translateY(-8px);box-shadow:0 30px 60px rgba(70,50,120,.15)}

/* 背景：有机液体色块（同色系深浅交织，对齐 vograce 迷彩风），hover 视差位移 */
.zymk-cat__tint{
  position:absolute;inset:0;border-radius:inherit;z-index:-1;overflow:hidden;
  background-image:
    radial-gradient(42% 36% at 18% 22%,rgba(255,255,255,.55),transparent 62%),
    radial-gradient(34% 30% at 82% 16%,rgba(255,255,255,.38),transparent 60%),
    radial-gradient(46% 42% at 76% 82%,rgba(0,0,0,.07),transparent 62%),
    radial-gradient(30% 28% at 22% 78%,rgba(255,255,255,.42),transparent 60%),
    radial-gradient(24% 22% at 55% 45%,rgba(0,0,0,.05),transparent 60%);
  background-size:120% 120%;
  transition:transform .65s ease,background-position .65s ease;
}
.zymk-cat__card:hover .zymk-cat__tint{transform:scale(1.06) translate(10px,-8px);background-position:8% 6%}

/* 中央主题图标：厚度感（text-shadow 层叠 + 悬浮投影），顶部破框 */
.zymk-cat__stamp{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;
  width:150px;height:120px;font-size:92px;line-height:1;z-index:2;
  text-shadow:3px 5px 0 rgba(40,25,70,.20),0 0 0 transparent;
  filter:drop-shadow(0 18px 26px rgba(40,25,70,.30));
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.zymk-cat__card:hover .zymk-cat__stamp{transform:translateX(-50%) scale(1.1) rotate(-5deg)}

/* 悬浮物：破框（跨出卡片/侵入 gutter）+ 大尺寸 + 双层投影 + 随机角度 */
.zymk-cat__pop{
  position:absolute;z-index:3;font-size:72px;line-height:1;pointer-events:none;
  opacity:0;transform:scale(0) rotate(-36deg);
  filter:drop-shadow(0 16px 22px rgba(30,18,55,.34)) drop-shadow(0 4px 8px rgba(30,18,55,.2));
  transition:opacity .18s ease;
}
.zymk-cat__pop--1{left:-34px;top:-14px;font-size:84px;--zr:-16deg}
.zymk-cat__pop--2{left:calc(50% - 33px);top:-40px;font-size:66px;--zr:9deg}
.zymk-cat__pop--3{right:-38px;top:-8px;font-size:76px;--zr:13deg}
.zymk-cat__pop--4{left:-30px;bottom:-20px;font-size:72px;--zr:-9deg}
.zymk-cat__pop--5{right:-36px;bottom:-12px;font-size:88px;--zr:7deg}

.zymk-cat__card:hover .zymk-cat__pop{animation:zymk-pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
.zymk-cat__card:hover .zymk-cat__pop--2{animation-delay:.05s}
.zymk-cat__card:hover .zymk-cat__pop--3{animation-delay:.1s}
.zymk-cat__card:hover .zymk-cat__pop--4{animation-delay:.15s}
.zymk-cat__card:hover .zymk-cat__pop--5{animation-delay:.2s}
.zymk-cat__card:hover .zymk-cat__pop--1{animation-name:zymk-pop,zymk-float-a;animation-delay:0s,.55s}
.zymk-cat__card:hover .zymk-cat__pop--2{animation-name:zymk-pop,zymk-float-b;animation-delay:.05s,.6s}
.zymk-cat__card:hover .zymk-cat__pop--3{animation-name:zymk-pop,zymk-float-a;animation-delay:.1s,.65s}
.zymk-cat__card:hover .zymk-cat__pop--4{animation-name:zymk-pop,zymk-float-b;animation-delay:.15s,.7s}
.zymk-cat__card:hover .zymk-cat__pop--5{animation-name:zymk-pop,zymk-float-a;animation-delay:.2s,.75s}

@keyframes zymk-pop{
  0%{opacity:0;transform:scale(0) rotate(-36deg)}
  60%{opacity:1;transform:scale(1.32) rotate(calc(var(--zr,0deg) + 9deg))}
  100%{opacity:1;transform:scale(1) rotate(var(--zr,0deg))}
}
@keyframes zymk-float-a{0%,100%{transform:translateY(0) rotate(var(--zr,0deg))}50%{transform:translateY(-13px) rotate(var(--zr,0deg))}}
@keyframes zymk-float-b{0%,100%{transform:translateY(0) rotate(var(--zr,0deg))}50%{transform:translateY(-8px) rotate(calc(var(--zr,0deg) + 8deg))}}

/* 文字区：卡片外部下方，左对齐（v1.13 对齐原版间距：图-标题26 / 标题-描述10 / 描述-按钮24） */
.zymk-cat__meta{position:relative;z-index:1;margin-top:26px;text-align:left}
.zymk-cat__title{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.zymk-cat__desc{display:block;margin-top:10px;font-size:15px;line-height:1.75;opacity:.78;max-width:36ch}
/* CTA：荧光黄绿胶囊 + 黑粗字 + 扁平无阴影（v1.13 对齐原版 Neon Lime） */
.zymk-cat__cta{
  display:inline-block;margin-top:24px;padding:13px 30px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.01em;color:#101010;
  background:#CDF44F;text-decoration:none;
  transition:transform .3s,background .3s;
}
.zymk-cat__cta:hover{transform:translateX(5px);background:#D8F96B}

/* 六卡主题色：低饱和马卡龙（3 号粉卡配翠绿按钮 = 原图粉配绿对比） */
.zymk-cat__card--1{background:linear-gradient(165deg,#F7EFE0,#EFE1C9)}
.zymk-cat__card--1 .zymk-cat__title{color:#44331E}
.zymk-cat__card--1 .zymk-cat__desc{color:#5C4A31}
.zymk-cat__card--2{background:linear-gradient(165deg,#EFEAFB,#DDD3F6)}
.zymk-cat__card--2 .zymk-cat__title{color:#35275E}
.zymk-cat__card--2 .zymk-cat__desc{color:#4B3E7A}
.zymk-cat__card--3{background:linear-gradient(165deg,#FCECF3,#F4D3E4)}
.zymk-cat__card--3 .zymk-cat__title{color:#5C2A45}
.zymk-cat__card--3 .zymk-cat__desc{color:#73395C}
.zymk-cat__card--4{background:linear-gradient(165deg,#FCEFE2,#F1D9C0)}
.zymk-cat__card--4 .zymk-cat__title{color:#5C3A22}
.zymk-cat__card--4 .zymk-cat__desc{color:#74502F}
.zymk-cat__card--5{background:linear-gradient(165deg,#EAF5EC,#D2E9D8)}
.zymk-cat__card--5 .zymk-cat__title{color:#24502E}
.zymk-cat__card--5 .zymk-cat__desc{color:#366B42}
.zymk-cat__card--6{background:linear-gradient(165deg,#EBF2F9,#D5E2F1)}
.zymk-cat__card--6 .zymk-cat__title{color:#243C58}
.zymk-cat__card--6 .zymk-cat__desc{color:#35516F}

/* 移动端 */
@media(max-width:880px){
  .zymk-cat-section{padding:0 20px 64px}
  .zymk-cat-section::before{height:28px}
  .zymk-cat__brand{gap:28px;flex-wrap:wrap}
  .zymk-cat__sticker{width:150px;height:150px}
  .zymk-cat__sticker-core{width:78px;height:78px;font-size:32px}
  .zymk-cat__brand-title{font-size:34px}
}
@media(max-width:640px){
  .zymk-cat__card{aspect-ratio:auto;min-height:230px}
  .zymk-cat__stamp{width:112px;height:96px;font-size:68px;top:-12px}
  .zymk-cat__pop{font-size:44px}
  .zymk-cat__pop--1{left:-18px;top:-8px;font-size:50px}
  .zymk-cat__pop--2{top:-26px;font-size:40px}
  .zymk-cat__pop--3{right:-18px;top:-6px;font-size:46px}
  .zymk-cat__pop--4{left:-14px;bottom:-14px;font-size:44px}
  .zymk-cat__pop--5{right:-16px;bottom:-10px;font-size:50px}
  .zymk-cat__meta{margin-top:20px}
  .zymk-cat__title{font-size:28px}
  .zymk-cat__desc{font-size:14px}
}