/* ============================================================================ CentSnap · 统一设计系统 (brand.css) 风格定位：Lovehoney 风格 · 红色主品牌 + 蓝色次要 + 橙色强调 加载方式：由 core/storefront.php :: cs_head_meta() 在 末尾注入， 优先级高于 style.css / store.css / blocks.css。 强关联：设计变量优先消费后台「全局颜色调色板」(--cs-brand 等)， 后台改色 → 前台即时生效。 版本：v2 （Lovehoney 色板重品牌） ============================================================================ */ /* ── 主色板（Lovehoney 风格：红主色 + 蓝次要 + 橙强调）── */ :root{ --cs-brand:#E60012; /* 品牌主色：Lovehoney 红 */ --cs-brand-dark:#B80000; /* 主色深：主题深红 */ --cs-accent:#FF9900; /* 促销 / 强调：橙 */ --cs-accent-dark:#E68A00; /* 强调深 */ --cs-ink:#333333; /* 文本：深灰 */ --cs-graphite:#1a1a1a; --cs-graphite-2:#222222; --cs-paper:#ffffff; --cs-bg:#FFFFFF; /* 背景：纯白 */ --cs-bg-2:#F5F5F5; --cs-line:#E4E7ED; /* 边框 */ --cs-line-2:#D1D5DB; --cs-muted:#666666; --cs-faint:#999999; --cs-text:#333333; /* 文本色 */ --cs-success:#16a34a; /* 成功绿（保留） */ --cs-error:#093026; /* 错误：深青 */ --cs-link:#005BAC; /* 链接：蓝（截图默认色；后台 color_link 可覆盖）*/ --cs-radius:8px; /* Lovehoney 风格偏小圆角 */ --cs-radius-sm:6px; --cs-radius-lg:12px; --cs-shadow-sm:0 2px 8px rgba(0,0,0,.08); --cs-shadow:0 4px 16px rgba(0,0,0,.12); --cs-shadow-lg:0 8px 24px rgba(0,0,0,.16); --cs-container:1200px; --cs-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif; /* 动态块默认变量（blocks.css 使用） */ --cs-pg-cols:4; --cs-pg-gap:16px; --cs-pg-card-bg:#fff; --cs-pg-radius:8px; --cs-pg-card-border:var(--cs-line); --cs-pg-card-shadow:var(--cs-shadow-sm); --cs-pg-title-color:var(--cs-ink); --cs-pg-cat-color:var(--cs-faint); --cs-pg-desc-color:var(--cs-muted); --cs-pg-price-color:var(--cs-error); --cs-pg-btn-bg:var(--cs-brand); --cs-pg-btn-color:#fff; --cs-bs-cols:6; --cs-bs-gap:16px; --cs-bs-card-bg:#fff; --cs-bs-radius:8px; --cs-bs-card-border:var(--cs-line); --cs-bs-title-color:var(--cs-ink); --cs-bs-name-color:#374151; --cs-cb-theme:var(--cs-accent); --cs-cb-radius:8px; --cs-cb-gap:16px; } /* ── 接管 style.css 消费的变量 ── */ :root{ --primary-color:var(--cs-brand); --primary-dark:var(--cs-brand-dark); --white:#fff; --ink:var(--cs-ink); --line:var(--cs-line); --line-2:var(--cs-line-2); --text-400:#666666; --text-600:#999999; --text-700:#D1D5DB; --text-750:#444444; --text-900:var(--cs-ink); --faint:var(--cs-faint); --muted:var(--cs-muted); --bg-2:var(--cs-bg-2); --brand-accent:var(--cs-accent); --brand-gold:var(--cs-accent); --r:var(--cs-radius); --warn:#b45309; --warn-bg:#fef3c7; --warn-bg-3:#fde68a; --danger:var(--cs-error); --danger-bg:#fef2f2; --danger-bg-4:#fecaca; } /* ── 基础排版 ── */ *{box-sizing:border-box} body{font-family:var(--cs-font);color:var(--cs-text);background:var(--cs-bg);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;margin:0;} .wrap,.cs-wrap{max-width:var(--cs-container);margin:0 auto;padding-inline:16px;} h1,h2,h3,h4,h5{letter-spacing:-.01em;color:var(--cs-ink);line-height:1.25;margin:0 0 .5em;} a{color:var(--cs-link,#005BAC);text-decoration:none;transition:color .15s;} a:hover{color:var(--cs-link,#005BAC);opacity:.85;} img{max-width:100%;display:block} .cs-page-body{padding-block:36px;} /* ============================================================================ 顶部导航（Lovehoney 风格：白底 + 红色 Logo/CTA） ============================================================================ */ .cs-site-header{background:#fff;border-bottom:1px solid var(--cs-line);color:var(--cs-ink);box-shadow:0 1px 3px rgba(0,0,0,.06);} /* 顶栏 */ .cs-hd-topbar{background:var(--cs-bg-2);border-bottom-color:var(--cs-line);color:var(--cs-muted);} .cs-hd-topbar-right a{color:var(--cs-muted);} .cs-hd-topbar-right a:hover{color:var(--cs-brand);} .cs-hd-register{color:var(--cs-brand) !important;} /* 主栏 */ .cs-hd-logo{color:var(--cs-brand) !important;} .cs-hd-logo-icon{filter:none;} .cs-hd-search input{background:var(--cs-bg-2);border-color:var(--cs-line);color:var(--cs-ink);} .cs-hd-search input::placeholder{color:var(--cs-faint);} .cs-hd-search button{background:var(--cs-brand);border-color:var(--cs-brand);} .cs-hd-icon{color:var(--cs-muted);} .cs-hd-icon:hover{background:var(--cs-bg-2);color:var(--cs-brand);} /* 导航栏 */ .cs-hd-nav{border-bottom-color:var(--cs-line);background:#fff;} .cs-hd-nav a{color:var(--cs-ink);} .cs-hd-nav a:hover,.cs-hd-nav a.on{color:var(--cs-brand) !important;border-bottom-color:var(--cs-brand) !important;} /* ============================================================================ 按钮（Lovehoney 风格：红色实心 + 圆角适中） ============================================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--cs-radius-sm);padding:10px 18px;font-size:14px;font-weight:600;line-height:1;cursor:pointer;transition:.15s;border:1px solid var(--primary-color);} .btn:hover{transform:translateY(-1px);} .btn-primary{background:var(--cs-brand);color:#fff;border-color:var(--cs-brand);box-shadow:0 2px 8px rgba(230,0,18,.25);} .btn-primary:hover{background:var(--cs-brand-dark);border-color:var(--cs-brand-dark);color:#fff;} .btn-outline{border:1px solid var(--cs-line-2);color:var(--cs-ink);background:#fff;} .btn-outline:hover{border-color:var(--cs-brand);color:var(--cs-brand);background:rgba(230,0,18,.03);} .btn-ghostdark{border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent;} .btn-ghostdark:hover{background:rgba(255,255,255,.10);color:#fff;} .btn-lg{padding:13px 26px;font-size:15px;} .btn-sm{padding:7px 12px;font-size:13px;} .btn-text-link{color:var(--cs-brand);font-weight:600;} .btn-text-link:hover{color:var(--cs-brand-dark);} /* store.css 按钮 */ .cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--cs-radius-sm);font-weight:600;transition:.15s;border:1px solid transparent;cursor:pointer;} .cs-btn-primary{background:var(--cs-brand);border-color:var(--cs-brand);color:#fff;box-shadow:0 2px 8px rgba(230,0,18,.25);} .cs-btn-primary:hover{background:var(--cs-brand-dark);border-color:var(--cs-brand-dark);color:#fff;} .cs-btn-primary:disabled{background:#f5c6cb;cursor:not-allowed;box-shadow:none;} .cs-btn-ghost{background:#fff;color:var(--cs-brand);border-color:var(--cs-line-2);} .cs-btn-ghost:hover{background:var(--cs-bg-2);color:var(--cs-brand-dark);} .cs-btn-block{width:100%;} /* ============================================================================ 主视觉 Hero（Lovehoney 风格：白色/浅色背景 + 红色 CTA） ============================================================================ */ .hero{background:linear-gradient(135deg,#fff 0%,#FFF5F5 50%,#FFEAEA 100%);color:var(--cs-ink);position:relative;overflow:hidden;} .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(230,0,18,.06) 0%, transparent 60%);pointer-events:none;} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;min-height:480px;padding-block:64px;position:relative;z-index:1;} .hero-eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--cs-accent) !important;font-weight:700;margin-bottom:14px;} .hero h1,.hero-title{color:var(--cs-ink) !important;font-size:clamp(32px,4.5vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:0;} .hero p.lead,.hero .hero-sub{color:var(--cs-muted) !important;margin-top:16px;max-width:480px;font-size:16px;line-height:1.65;} .hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;} .hero-stats{display:flex;gap:36px;margin-top:40px;padding-top:24px;border-top:1px solid var(--cs-line) !important;} .hero-stats .n{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--cs-brand);} .hero-stats .l{font-size:12px;color:var(--cs-faint);margin-top:2px;} .hero-visual{aspect-ratio:4/3;background:var(--cs-bg-2) !important;border:1px solid var(--cs-line) !important;border-radius:var(--cs-radius-lg);display:grid;place-items:center;position:relative;overflow:hidden;} .hero-scroll-hint{color:var(--cs-faint);} /* 商店页 Hero（store_hero 可视化区块：背景/颜色/圆角/对齐均由区块数据驱动内联控制， 此处仅提供「无区块时的静态回退」默认观感，严禁 !important 覆盖内联 style） */ .cs-hero{margin-bottom:24px;} .cs-hero h1{color:#fff;font-size:28px;margin:0 0 8px;} .cs-hero p{color:rgba(255,255,255,.9);margin:0 0 20px;} .cs-hero .cs-search{max-width:560px;margin:0;} .cs-hero .cs-search input{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;} .cs-hero .cs-search input::placeholder{color:rgba(255,255,255,.6);} .cs-hero .cs-search button,.cs-hero .cs-btn-primary{background:var(--cs-accent);border-color:var(--cs-accent);color:#fff;} .cs-hero .cs-search button:hover,.cs-hero .cs-btn-primary:hover{background:var(--cs-accent-dark);border-color:var(--cs-accent-dark);} /* ============================================================================ 区块标题 / 眉标题 / 分区 ============================================================================ */ .eyebrow{color:var(--cs-accent) !important;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:10px;} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px;} .sec-head h2{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0;} .sec-head a{font-size:13px;color:var(--cs-muted);} .sec-head a:hover{color:var(--cs-brand);} .sec-sub{color:var(--cs-muted);font-size:14px;max-width:600px;margin:-10px 0 24px;line-height:1.65;} .cs-section{background:var(--cs-bg);} .cs-section-title{font-size:26px;font-weight:700;color:var(--cs-ink);margin:0 0 8px;} .cs-section-sub{color:var(--cs-muted);font-size:14px;margin:0 0 14px;} .cs-section-text{color:var(--cs-muted);line-height:1.75;} /* ============================================================================ 特性网格 / 信任背书（fg-section） ============================================================================ */ .fg-section{padding-block:64px;} .fg-section .sec-head{margin-bottom:14px;} .feature-grid{display:grid;gap:16px;background:none;border:none;grid-template-columns:repeat(3,minmax(0,1fr));} .feature-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));} .feature-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} .feature-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));} .fg-card{background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-radius);padding:24px;box-shadow:var(--cs-shadow-sm);transition:.2s;} .fg-card:hover{transform:translateY(-2px);box-shadow:var(--cs-shadow);border-color:var(--cs-brand);} .fg-eyebrow{display:block;font-size:12px;font-weight:700;color:var(--cs-accent) !important;margin-bottom:8px;letter-spacing:.04em;} .fg-card h3{font-size:17px;font-weight:700;margin-bottom:8px;} .fg-card p{color:var(--cs-muted);font-size:14px;line-height:1.65;margin:0;} .fg-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--cs-brand);border-bottom:1px solid var(--cs-line-2);padding-bottom:2px;} .fg-link:hover{color:var(--cs-brand-dark);border-color:var(--cs-brand);} /* ============================================================================ 产品网格（动态块 cs-pg-*） ============================================================================ */ .cs-pgrid{padding-block:56px;} .cs-pgrid .eyebrow{color:var(--cs-accent) !important;} .cs-pg-title{font-size:26px;font-weight:700;color:var(--cs-pg-title-color);margin:0 0 6px;} .cs-pg-sub{color:var(--cs-muted);font-size:14px;margin:0 0 24px;} .cs-pg-grid{display:grid;grid-template-columns:repeat(var(--cs-pg-cols,4),minmax(0,1fr));gap:var(--cs-pg-gap,16px);} .cs-pg-card{display:flex;flex-direction:column;background:var(--cs-pg-card-bg,#fff);border:1px solid var(--cs-pg-card-border,var(--cs-line));border-radius:var(--cs-pg-radius,8px);box-shadow:var(--cs-pg-card-shadow,var(--cs-shadow-sm));overflow:hidden;transition:.2s;} .cs-pg-card:hover{transform:translateY(-2px);box-shadow:var(--cs-shadow);border-color:var(--cs-brand);} .cs-pg-img{aspect-ratio:1/1;background:var(--cs-bg-2);} .cs-pg-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1;} .cs-pg-rank{position:absolute;top:8px;left:8px;background:var(--cs-brand);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;} .cs-pg-cat{font-size:11px;color:var(--cs-pg-cat-color,var(--cs-faint));text-transform:uppercase;letter-spacing:.04em;font-weight:600;} .cs-pg-title-link,.cs-pg-title a{color:var(--cs-pg-title-color,var(--cs-ink));font-weight:700;font-size:14.5px;line-height:1.35;} .cs-pg-title-link:hover,.cs-pg-title a:hover{color:var(--cs-brand);} .cs-pg-desc{color:var(--cs-pg-desc-color,var(--cs-muted));font-size:12.5px;line-height:1.55;} .cs-pg-price{font-size:17px;font-weight:800;color:var(--cs-pg-price-color,var(--cs-brand));margin-top:2px;} .cs-pg-actions{display:flex;gap:6px;margin-top:auto;padding-top:8px;} .cs-pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--cs-pg-btn-bg,var(--cs-brand));color:var(--cs-pg-btn-color,#fff);border:none;border-radius:var(--cs-radius-sm);padding:8px 10px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;flex:1;} .cs-pg-btn:hover{background:var(--cs-brand-dark);color:#fff;} .cs-pg-add{color:var(--cs-muted);font-size:12.5px;} .cs-pg-out{color:var(--cs-faint);font-size:12.5px;align-self:center;} .cs-pg-empty{padding:40px 16px;text-align:center;color:var(--cs-faint);background:var(--cs-bg-2);border:1px dashed var(--cs-line-2);border-radius:var(--cs-radius);} /* ============================================================================ 优惠券 / 促销区块 ============================================================================ */ .cs-coupon-box{background:linear-gradient(135deg,#E60012 0%,#B80000 100%);border-radius:var(--cs-radius-lg);padding:48px 0;margin-block:10px;} .cs-coupon-box .wrap{padding-inline:16px;} .cs-cb-title{font-size:26px;font-weight:700;color:#fff !important;margin:0 0 6px;} .cs-cb-sub{color:rgba(255,255,255,.8) !important;font-size:14px;margin:0 0 24px;} .cs-cb-list{display:grid;gap:var(--cs-cb-gap,16px);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));} .cs-cb-list.cs-cb-mode-list{grid-template-columns:1fr;} .cs-cb-card{display:flex;flex-direction:column;gap:8px;padding:16px;background:#fff;border:1px solid var(--cs-line);border-left:4px solid var(--cs-cb-theme,var(--cs-accent));border-radius:var(--cs-cb-radius,8px);box-shadow:var(--cs-shadow-sm);transition:.2s;} .cs-cb-card:hover{transform:translateY(-2px);box-shadow:var(--cs-shadow);} .cs-cb-amount{font-size:24px;font-weight:800;color:var(--cs-cb-theme,var(--cs-accent));line-height:1.1;} .cs-cb-meta{font-size:13px;color:var(--cs-muted);} .cs-cb-code{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;background:var(--cs-bg-2);border:1px dashed var(--cs-line-2);border-radius:6px;padding:4px 9px;color:var(--cs-ink);} .cs-cb-cond{font-size:12px;color:var(--cs-faint);} .cs-cb-copy{margin-top:2px;align-self:flex-start;background:var(--cs-cb-theme,var(--cs-accent));color:#fff;border:none;border-radius:var(--cs-radius-sm);padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;transition:.15s;} .cs-cb-copy:hover{background:var(--cs-accent-dark);color:#fff;} /* ============================================================================ 品牌实力墙（cs-bs-*） ============================================================================ */ .cs-bshow{padding-block:56px;} .cs-bshow .eyebrow{color:var(--cs-accent) !important;} .cs-bs-title{font-size:26px;font-weight:700;color:var(--cs-bs-title-color);margin:0 0 6px;} .cs-bs-sub{color:var(--cs-muted);font-size:14px;margin:0 0 24px;} .cs-bs-grid{display:grid;grid-template-columns:repeat(var(--cs-bs-cols,6),minmax(0,1fr));gap:var(--cs-bs-gap,16px);align-items:stretch;} .cs-bs-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 10px;background:var(--cs-bs-card-bg,#fff);border:1px solid var(--cs-bs-card-border,var(--cs-line));border-radius:var(--cs-bs-radius,8px);box-shadow:var(--cs-shadow-sm);transition:.2s;} .cs-bs-logo:hover{transform:translateY(-2px);box-shadow:var(--cs-shadow);} .cs-bs-logo img{max-width:100%;max-height:64px;object-fit:contain;} .cs-bs-logo .cs-ph{width:100%;height:64px;} .cs-bs-name{font-size:12px;font-weight:600;color:var(--cs-bs-name-color,#374151);text-align:center;} .cs-bs-empty{padding:40px 16px;text-align:center;color:var(--cs-faint);background:var(--cs-bg-2);border:1px dashed var(--cs-line-2);border-radius:12px;} /* ============================================================================ 通用商品卡（store.css .cs-card） ============================================================================ */ .cs-card{background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-radius);box-shadow:var(--cs-shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:.15s;} .cs-card:hover{box-shadow:var(--cs-shadow);transform:translateY(-2px);} .cs-card-img{display:block;aspect-ratio:1/1;position:relative;background:var(--cs-bg-2);} .cs-card-body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:4px;flex:1;} .cs-card-cat{font-size:11px;color:var(--cs-faint);} .cs-card-title{font-weight:700;font-size:14.5px;color:var(--cs-ink);line-height:1.35;} .cs-card-title:hover{color:var(--cs-brand);} .cs-card-desc{font-size:12px;color:var(--cs-faint);line-height:1.45;margin-top:-2px;} .cs-card-price{font-size:17px;font-weight:800;color:var(--cs-brand);} .cs-card-actions{display:flex;gap:6px;margin-top:auto;padding-top:6px;} .cs-card-actions .cs-btn{flex:1;padding:7px 9px;font-size:12.5px;} .cs-card--modern .cs-btn-basket,.cs-card--classic .cs-card-actions .cs-btn-primary{background:var(--cs-brand);border-color:var(--cs-brand);color:#fff;} .cs-card--modern .cs-btn-basket:hover{background:var(--cs-brand-dark);} .cs-card--classic .cs-card-actions .cs-btn-primary:hover{background:var(--cs-brand-dark);} .cs-card-oos{background:rgba(107,114,128,.08);} /* 商店分类导航 */ .cs-cats a{display:block;padding:8px 10px;border-radius:var(--cs-radius-sm);color:var(--cs-muted);font-weight:500;transition:.15s;} .cs-cats a:hover{background:var(--cs-bg-2);color:var(--cs-brand);} .cs-cats a.on{background:var(--cs-brand);color:#fff;} /* 商店布局 */ .cs-layout{display:flex;gap:24px;align-items:flex-start;padding-bottom:48px;} .cs-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;} .cs-grid.cs-list{grid-template-columns:1fr;gap:12px;} .cs-pagination{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:28px;flex-wrap:wrap;} .cs-pagination a,.cs-pagination span{padding:7px 11px;border-radius:var(--cs-radius-sm);border:1px solid var(--cs-line);color:var(--cs-muted);font-size:13px;} .cs-pagination a:hover{border-color:var(--cs-brand);color:var(--cs-brand);} .cs-pagination .on{background:var(--cs-brand);border-color:var(--cs-brand);color:#fff;} /* ============================================================================ 页脚（Lovehoney 风格：深灰底） ============================================================================ */ .cs-site-footer,.cs-footer,.site-footer{background:#1a1a1a;color:rgba(255,255,255,.7);padding:44px 0 24px;} .cs-site-footer a,.cs-footer a,.site-footer a{color:rgba(255,255,255,.75);} .cs-site-footer a:hover,.cs-footer a:hover,.site-footer a:hover{color:#fff;} .cs-footer-title,.cs-site-footer h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:14px;} /* ============================================================================ 响应式（Lovehoney 移动端风格） ============================================================================ */ @media (max-width:980px){ .hero .wrap{grid-template-columns:1fr;gap:24px;min-height:auto;} .hero-visual{order:-1;max-width:400px;} .feature-grid.cols-3,.feature-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));} .cs-bs-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;} .cs-pg-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} } @media (max-width:640px){ .feature-grid.cols-2,.feature-grid.cols-3,.feature-grid.cols-4{grid-template-columns:1fr;} .cs-pg-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} .cs-bs-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} .cs-layout{flex-direction:column;} .cs-hero{padding:32px 16px;} .sec-head{flex-direction:column;align-items:flex-start;} .sec-head h2,.cs-pg-title,.cs-cb-title,.cs-bs-title,.cs-section-title{font-size:22px;} /* Lovehoney 移动端：更紧凑的间距 */ .cs-page-body{padding-block:24px;} .fg-section,.cs-pgrid,.cs-bshow{padding-block:40px;} .fg-card{padding:18px 16px;} .cs-pg-body{padding:10px 12px 12px;} } /* ============================================================================ 移动端 / 平板端 · Lovehoney 风格强化（首页 / 产品列表 / 产品详情） 仅新增媒体查询，覆盖既有 cs- 类；不改动 DOM 与系统规则（架构零影响）。 断点：平板 ≤980px / ≤860px，手机 ≤640px。 ============================================================================ */ /* ── 平板 (≤980px) ── */ @media (max-width: 980px) { /* 首页：产品网格回落 3 列，区块间距收拢 */ .cs-pg-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } .cs-bs-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } .fg-section, .cs-pgrid, .cs-bshow { padding-block: 48px; } /* 产品列表：多列布局回落 3 列 */ .cs-grid.cs-grid--cols-4, .cs-grid.cs-grid--cols-5, .cs-grid.cs-grid--cols-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } /* 产品详情：平板保持双列（桌面同款），仅收紧间距 */ .cs-pd { gap: 28px; padding: 22px 0 48px; } } /* ── 手机 (≤640px) ── */ @media (max-width: 640px) { .cs-wrap { padding-inline: 14px; } .cs-page-body { padding-block: 20px; } /* ① 首页 */ .cs-hero { padding: 30px 18px; border-radius: 12px; } .cs-hero h1 { font-size: 23px; } .cs-hero p { font-size: 14px; margin-bottom: 16px; } .cs-hero .cs-search input { height: 42px; } .cs-hero .cs-search button { padding: 0 18px; } .cs-pgrid, .cs-bshow { padding-block: 36px; } .cs-pg-grid, .cs-grid.cs-grid--cols-2, .cs-grid.cs-grid--cols-3, .cs-grid.cs-grid--cols-4, .cs-grid.cs-grid--cols-5, .cs-grid.cs-grid--cols-6 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px; } .cs-pg-body { padding: 10px 11px 12px; } .cs-pg-price { font-size: 15px; } .cs-pg-btn { font-size: 12px; padding: 8px 8px; } .cs-coupon-box { padding: 30px 0; } .cs-coupon-box .cs-cb-card { padding: 14px; } .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; } .sec-head h2, .cs-pg-title, .cs-cb-title, .cs-bs-title, .cs-section-title { font-size: 21px; } .fg-card { padding: 16px 14px; } .feature-grid.cols-2, .feature-grid.cols-3, .feature-grid.cols-4 { grid-template-columns: 1fr; } /* ② 产品列表 (store.php) */ .cs-layout { flex-direction: column; } .cs-side { width: 100%; position: static; } .cs-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } .cs-toolbar-right { justify-content: space-between; } .cs-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px; } .cs-card-body { padding: 10px 11px 12px; } .cs-card-title { font-size: 14px; } .cs-card-price { font-size: 16px; } .cs-card-actions { flex-direction: column; gap: 6px; margin-top: 8px; } .cs-card-actions .cs-btn { width: 100%; padding: 9px 10px; } .cs-card--modern .cs-btn-basket { padding: 10px 12px; } .cs-rel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } /* ③ 产品详情 (product.php) */ .cs-pd { grid-template-columns: 1fr; gap: 18px; padding: 18px 0 40px; } .cs-pd-img { border-radius: 12px; } .cs-pd-title { font-size: 21px; } .cs-pd-price { font-size: 24px; } .cs-pd-thumbs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .cs-thumb { width: 60px; height: 60px; flex: 0 0 auto; } /* Lovehoney 移动端：加购栏吸底（仅在 .cs-pd 视区内吸底，离开详情区自动释放，不遮挡评价） */ .cs-pd-actions { position: sticky; bottom: 0; z-index: 30; flex-direction: column; gap: 8px; background: #fff; padding: 10px 0 12px; margin-top: 14px; box-shadow: 0 -3px 14px rgba(0,0,0,.08); } .cs-pd-actions .cs-btn { width: 100%; padding: 13px 16px; font-size: 15px; } .cs-tabs { gap: 2px; overflow-x: auto; flex-wrap: nowrap; } .cs-tab { padding: 11px 13px; white-space: nowrap; font-size: 14px; } .cs-spec-tbl th { width: 96px; } .cs-ship-grid { grid-template-columns: 1fr; } .cs-pd-metarow { gap: 8px; } .cs-pd-share { width: 100%; } .cs-share-btn { width: 100%; justify-content: center; } } /* ============================================================================ 布局对齐 v5（2026-08-20 规格）：三段边界垂直对齐 + 商店页 flex/响应式 ① 区块页脚 .cs-gfoot .cs-wrap：1280/20 → 1200/16，与页头、页中 .cs-wrap 完全一致（页头/页中维持现有 1200px/16px 不动，仅反压页脚）。 注：store.css:1053 与 blocks.css:763 的 .cs-gfoot .cs-wrap（0,2,0） 特异性压过本文件 .cs-wrap 基础规则（0,1,0），故须同特异性 + !important。 取值 var(--cs-container,1200px) 即 1200px（--cs-container 当前定义）， 且未来容器变量调整时三段自动同步。legacy 回退页脚 .cs-site-footer 不动。 ② 桌面（≥861px）分类侧栏固定 240px；gap:24px 已由上方 .cs-layout 接管。 768-860px 维持 store.css 既有堆叠行为（width:100%）。 ③ 平板 768-1199px：商品 3 列（覆盖后台 cols-N / tab-N / auto-fill）。 ④ 手机 ≤767px：隐藏左侧固定侧栏（分类走 mobile_header 区块汉堡抽屉 cs-mo-cat-panel），商品卡片 2 列。 PC ≥1200px：.cs-grid auto-fill(minmax(210px,1fr)) 按容器自适应—— 带侧栏 904px 可用宽 → 4 列；无侧栏满宽 1168px → 5 列。 ============================================================================ */ .cs-gfoot .cs-wrap { max-width: var(--cs-container, 1200px) !important; padding-inline: 16px !important; } @media (min-width: 861px) { .cs-side { width: 240px; flex: none; } } @media (min-width: 768px) and (max-width: 1199px) { .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { .cs-layout .cs-side { display: none; } .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } }