 .sec{ padding: 18px 0; background:#fff; }
    .secHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom: 12px; }
    .secHead h2{ margin:0; font-size: 18px; letter-spacing: .4px; }
    .secHead .more{ color: var(--muted); font-size: 13px; }
    .secHead .more:hover{ color: var(--coffee); }

    .cats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .cat{
      border:1px solid var(--line);
      border-radius: var(--r2);
      background:#fff;
      padding: 14px;
      min-height: 88px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .cat:hover{ background:#faf7f2; }
    .cat b{ font-size: 14px; }
    .cat span{ display:block; color: var(--muted); font-size: 12px; margin-top:4px; }
    .cat .ico{
      width:38px;height:38px;border-radius: 14px;
      border:1px solid rgba(139,90,43,.5);
      background:#f3e8dd;
      display:flex;align-items:center;justify-content:center;
      color: var(--coffee);
      font-size: 16px;
    }

    .grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .card{
      border:1px solid var(--line);
      border-radius: var(--r);
      background:#fff;
      overflow:hidden;
      box-shadow: var(--shadow);
    }
    .cardTop{ height: 160px; background:#f6f6f6; border-bottom:1px solid var(--line); position:relative; }
    .corner{
      position:absolute;
      top:12px; left:12px;
      font-size:12px;
      padding:6px 10px;
      border-radius: 999px;
      border:1px solid rgba(139,90,43,.55);
      background:#f3e8dd;
      color: var(--coffee);
    }
    .cardBody{ padding: 14px; }
    .titleRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .cardBody b{ font-size: 14px; }
    .cardBody p{ margin:6px 0 10px 0; color: var(--muted); font-size: 12px; }
    .priceRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .price{ display:flex; align-items:baseline; gap:6px; }
    .price strong{ font-size: 16px; letter-spacing:.3px; color: var(--coffee); }
    .price small{ color: #9a9a9a; font-size: 12px; text-decoration: line-through; }

    .btnMini{
      height:34px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      padding:0 10px;
      cursor:pointer;
      color:#333;
    }
    .btnMini:hover{ background:#f6f6f6; }
    .btnMini.coffee{
      border-color: var(--coffee);
      background: var(--coffee);
      color:#fff;
    }

    .story{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 12px; align-items:stretch; }
    .story .panel{ padding: 20px; }
    .story h3{ margin:0 0 10px 0; }
    .story ul{ margin: 12px 0 0 0; padding:0; list-style:none; display:grid; gap:10px; }
    .story li{
      display:flex; gap:10px; align-items:flex-start;
      color: var(--muted);
      font-size: 13px;
      border:1px solid var(--line);
      border-radius: 14px;
      padding: 10px 12px;
      background:#fafafa;
    }
    .story li .k{
      width:10px; height:10px; border-radius:50%;
      margin-top: 6px;
      background: var(--coffee);
      box-shadow: 0 0 0 4px rgba(139,90,43,.14);
      flex: 0 0 auto;
    }

    .formRow{ display:flex; gap:10px; margin-top: 12px; flex-wrap: wrap; }
    .formRow input{
      flex: 1;
      min-width: 220px;
      height: 42px;
      border-radius: 14px;
      border:1px solid var(--line);
      background:#fff;
      padding: 0 12px;
      color: var(--text);
      outline: none;
    }
    .formRow input::placeholder{ color:#aaa; }
    .formRow button{
      height: 42px;
      border-radius: 14px;
      padding: 0 14px;
      border:1px solid var(--coffee);
      background: var(--coffee);
      color: #fff;
      cursor:pointer;
      white-space:nowrap;
    }

    /* 响应式（保留首页中间部分） */
    @media (max-width: 980px){
      .cats{ grid-template-columns: repeat(2, 1fr); }
      .grid{ grid-template-columns: repeat(2, 1fr); }
      .story{ grid-template-columns: 1fr; }
    }
    @media (max-width: 520px){
      .cats{ grid-template-columns: 1fr; }
      .grid{ grid-template-columns: 1fr; }
	  .story{ grid-template-columns: 1fr; }
    }