:root{--sc-blue:#4a9eed;--sc-dark:#1e1e1e;--sc-white:#ffffff;--sc-gray-100:#f5f5f5;--sc-gray-200:#e0e0e0;--sc-gray-400:#9e9e9e;--sc-gray-600:#757575;--sc-gray-800:#1e1e1e;--sc-dogs-bg:#e8f5e9;--sc-cats-bg:#fce4ec;--sc-products-bg:#fff8e1;--sc-newsletter-bg:#dbeafe;--sc-tag-dogs:#8b5cf6;--sc-tag-cats:#ec4899;--sc-tag-product:#f59e0b;--sc-tag-best:#22c55e;--sc-tag-premium:#ef4444;--sc-card-radius:12px;--sc-font-body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;--sc-font-heading:Georgia, 'Times New Roman', serif}.sc-hero{position:relative;height:clamp(500px, 36vw, 650px);overflow:hidden;background:#fdf8f3;border-radius:0}.sc-hero-picture{display:block;width:100%;height:100%}.sc-hero-img{width:100%;height:100%;object-fit:cover;object-position:center 56%;display:block}.sc-hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to right,rgb(0 0 0 / .65) 0%,rgb(0 0 0 / .2) 60%,transparent 100%)}.sc-hero-content{position:absolute;top:50%;left:0;right:0;padding:0 40px;box-sizing:border-box;background:#fff0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;max-width:680px;margin:0 auto;transform:translateY(-50%)}.sc-hero-tag{display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;width:fit-content;padding:7px 14px;margin-bottom:16px;border:1px solid rgb(180 131 46 / .42)!important;border-radius:10px;background:rgb(255 248 235 / .88)!important;color:#17345c!important;font-size:12px;font-weight:900;line-height:1;letter-spacing:1.8px;text-transform:uppercase;text-align:center;text-shadow:none;box-shadow:0 8px 18px rgb(120 83 28 / .1),inset 0 1px 0 rgb(255 255 255 / .72);transform:none;overflow:hidden}.sc-hero-tag::before{content:"★";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#f7c85f 0%,#d99b24 100%);color:#fff;font-size:10px;letter-spacing:0;box-shadow:0 2px 6px rgb(180 131 46 / .26),inset 0 1px 0 rgb(255 255 255 / .45);transform:none}.sc-hero-tag::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:linear-gradient(90deg,transparent 0%,rgb(217 155 36 / .55) 50%,transparent 100%);opacity:.9}@media (max-width:768px){.sc-hero-tag{padding:6px 13px;margin-bottom:14px;font-size:11px}}@media (max-width:480px){.sc-hero-tag{padding:6px 12px;margin-bottom:12px;font-size:10px;letter-spacing:1.4px}.sc-hero-tag::before{width:16px;height:16px;font-size:9px}}.sc-hero-title{position:relative;font-family:var(--sc-font-heading);font-size:30px;line-height:1.3;margin-bottom:12px;display:block;word-break:break-word}.sc-hero-desc{color:#e0e0e0;font-size:15px;line-height:1.6;margin-bottom:20px;word-break:break-word}.sc-hero-meta{color:#bbb;font-size:13px}.sc-hero-actions{display:flex;align-items:center;justify-content:center;gap:20px}.sc-btn-primary{display:inline-block;background:linear-gradient(135deg,#f97316 0%,#fb8c24 48%,#f5a23a 100%);color:#fff;font-size:16px;font-weight:800;padding:14px 34px;border-radius:999px;border:1px solid rgb(255 255 255 / .28);cursor:pointer;box-shadow:0 14px 28px rgb(234 88 12 / .26),inset 0 1px 0 rgb(255 255 255 / .28);transition:transform 0.22s ease,box-shadow 0.22s ease,filter 0.22s ease,background 0.22s ease;text-decoration:none}.sc-btn-primary:hover{background:linear-gradient(135deg,#fb7a1f 0%,#ff9a2f 45%,#ffc061 100%);color:#fff;transform:translateY(-2px);box-shadow:0 18px 34px rgb(234 88 12 / .34),0 4px 10px rgb(120 53 15 / .12),inset 0 1px 0 rgb(255 255 255 / .34);filter:saturate(1.06)}.sc-btn-primary:focus-visible{outline:3px solid rgb(249 115 22 / .28);outline-offset:4px}@media (prefers-reduced-motion:reduce){.sc-btn-primary{transition:none}.sc-btn-primary:hover{transform:none}}.sc-btn-check-price{display:inline-flex;align-items:center;justify-content:center;background:var(--sc-blue);color:#fff;font-size:13px;font-weight:700;padding:10px 16px;border-radius:999px;border:none;cursor:pointer;text-align:center;transition:background 0.2s,transform 0.15s,box-shadow 0.2s;box-shadow:0 4px 14px rgb(74 158 237 / .22);text-decoration:none}.sc-btn-check-price:hover{background:#3a8ee5;color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgb(74 158 237 / .28)}.sc-products-section{padding:20px 0}.sc-products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 40px}.sc-products-list{display:flex;flex-direction:column;gap:12px;padding:0 40px}.sc-product-card{background:#fff;border-radius:var(--sc-card-radius);overflow:hidden;border:1px solid var(--sc-gray-200);transition:transform 0.2s,box-shadow 0.2s}.sc-product-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgb(0 0 0 / .1)}.sc-product-img-wrap{position:relative;height:180px;overflow:hidden;background:#eceff1}.sc-product-img{width:100%;height:100%;object-fit:contain;padding:10px}.sc-product-badge{position:absolute;top:12px;left:16px;font-size:11px;font-weight:700;color:#fff;padding:3px 10px;border-radius:20px;text-transform:uppercase}.sc-product-body{padding:14px}.sc-product-title{font-family:var(--sc-font-heading);font-size:15px;color:var(--sc-dark);line-height:1.4;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}.sc-product-price-row{display:flex;align-items:center;gap:10px}.sc-product-price{font-size:20px;font-weight:700;color:var(--sc-dark)}.sc-product-price-row .sc-btn-check-price{margin-left:auto}.sc-newsletter{background:var(--sc-newsletter-bg);border:2px solid var(--sc-blue);margin:0 40px 30px;border-radius:var(--sc-card-radius);padding:30px 40px;display:flex;align-items:center;gap:40px}.sc-newsletter-title{font-family:var(--sc-font-heading);font-size:22px;color:var(--sc-dark);margin-bottom:8px}.sc-newsletter-desc{color:var(--sc-gray-600);font-size:14px;line-height:1.5}.sc-newsletter-form{display:flex;margin-left:auto;flex-shrink:0}.sc-newsletter-email{background:#fff;border:1px solid var(--sc-blue);border-right:none;border-radius:20px 0 0 20px;padding:10px 20px;font-size:14px;color:#333;width:260px;outline:none}.sc-newsletter-email::placeholder{color:#aaa}.sc-newsletter-submit{background:var(--sc-blue);color:#fff;border:none;border-radius:0 20px 20px 0;padding:10px 24px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background 0.2s}.sc-newsletter-submit:hover{background:#3a8ee5}.savingcat-disclosure{font-size:12px;color:#757575;line-height:1.6;max-width:800px;margin:20px auto;text-align:center;padding:0 20px}.savingcat-empty{color:#999;font-size:14px;padding:20px;text-align:center}@media (max-width:768px){.sc-products-grid{grid-template-columns:repeat(2,1fr);padding:0 16px;gap:12px}.sc-newsletter{flex-direction:column;gap:20px;padding:24px 20px;margin:0 16px 20px}.sc-newsletter-form{margin-left:0;width:100%}.sc-newsletter-email{width:100%}.sc-hero{height:360px}.sc-hero-content{position:absolute;top:50%;bottom:auto;left:15px;right:15px;transform:translateY(-50%);align-items:center}.sc-hero-title{font-size:20px;text-align:center}.sc-hero-desc{font-size:13px;text-align:center}.sc-btn-primary{font-size:15px;padding:11px 22px}@media (max-width:480px){.sc-products-grid{grid-template-columns:1fr}.sc-hero{height:250px}.sc-hero-content{top:50%;bottom:auto;left:0;right:0;transform:translateY(-50%);align-items:center;width:100%;padding:0 10px}.sc-hero-title{font-size:calc(var(--sc-hero-title-size, 30px) - 8px)!important;text-align:center}.sc-hero-desc{display:block}.sc-hero-actions{width:100%;text-align:center;flex-wrap:wrap;gap:6px}.sc-btn-primary{font-size:14px!important;padding:9px 18px!important}}}08.1 Hero相关动态样式 8.2 Trust Bar相关动态样式 8.3 产品相关动态样式===========================================================================*/ .sc-hero-cta{background:var(--sc-teal)!important}.sc-hero-title-dynamic{font-size:48px;word-break:break-word}.sc-stars-filled-dynamic{width:90%}.apaw-disclosure{font-size:12px;color:#757575;line-height:1.6;max-width:800px;margin:20px auto;text-align:center}.sc-product-desc{font-size:12px;color:#757575;margin-bottom:8px}.sc-btn-check-price{display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;padding:10px 16px;border-radius:999px;box-shadow:0 4px 14px rgb(74 158 237 / .22);transition:background 0.2s,transform 0.15s,box-shadow 0.2s}.sc-btn-check-price:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgb(74 158 237 / .28)}.sc-hero .sc-hero-content{max-width:760px;padding:18px 28px 20px;border-radius:0;background:radial-gradient(ellipse at 50% 48%,rgb(255 255 255 / .78) 0%,rgb(255 255 255 / .58) 44%,rgb(255 255 255 / .22) 72%,#fff0 100%);border:0;box-shadow:none;backdrop-filter:none}.sc-hero .sc-hero-title{margin-bottom:14px;color:#121826!important;opacity:1!important;text-shadow:0 1px 0 rgb(255 255 255 / .9),0 0 18px rgb(255 255 255 / .9),0 8px 26px rgb(20 24 35 / .12)}.sc-hero .sc-hero-desc{max-width:620px;color:#1f2b3a!important;font-weight:600;text-shadow:0 1px 0 rgb(255 255 255 / .9),0 0 14px rgb(255 255 255 / .82)}@media (max-width:768px){.sc-hero .sc-hero-content{max-width:min(620px, calc(100% - 32px));padding:18px 22px 20px;background:radial-gradient(ellipse at 50% 48%,rgb(255 255 255 / .82) 0%,rgb(255 255 255 / .62) 54%,#fff0 100%)}}@media (max-width:480px){.sc-hero .sc-hero-content{max-width:calc(100% - 24px);padding:14px 16px 16px}.sc-hero .sc-hero-desc{font-size:12px;line-height:1.45}}文件结束===========================================================================最后更新:2026-04-29 更新内容:添加详细备注说明 快捷修改参考:───────────────────────────────────────────────────────────────────────────── 修改Hero移动端按钮位置 → 第307行 bottom:100px 修改产品卡片高度 → 第195行 height:180px 修改产品网格列数 → 第171行 repeat(4,1fr) 修改主题主色调 → 第21行 --sc-blue:#4a9eed===========================================================================*/