/*
Theme Name: CocoonLume B2B
Theme URI: https://cocoonlume.com/
Description: B2B OEM/ODM lighting storefront child theme for Storefront. Custom header, footer, homepage and quote-driven product catalogue.
Author: CocoonLume
Template: storefront
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: cocoonlume-b2b
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --cl-ink: #0f172a;
  --cl-body: #475569;
  --cl-muted: #64748b;
  --cl-line: #e2e8f0;
  --cl-line-2: #eef2f7;
  --cl-bg: #ffffff;
  --cl-soft: #f6f8fc;
  --cl-primary: #1d4ed8;
  --cl-primary-dark: #1e40af;
  --cl-accent: #f59e0b;
  --cl-dark: #0b1220;
  --cl-radius: 16px;
  --cl-radius-lg: 24px;
  --cl-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px -18px rgba(15, 23, 42, .22);
  --cl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --cl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --cl-maxw: 1200px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html { scroll-behavior: smooth; }
body,
body.custom-font-enabled,
.site {
  font-family: var(--cl-font) !important;
  color: var(--cl-body) !important;
  background: var(--cl-bg) !important;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; }
.site-content, #content { padding: 0 !important; margin: 0 !important; }
.col-full { max-width: var(--cl-maxw) !important; padding: 0 24px !important; width: 100%; }
img { max-width: 100%; height: auto; }
a { color: var(--cl-primary); text-decoration: none; }
a:hover { color: var(--cl-primary-dark); }

.cl-wrap { max-width: var(--cl-maxw); margin: 0 auto; padding: 0 24px; }
.cl-sec { padding: 84px 0; }
.cl-sec--soft { background: var(--cl-soft); }
.cl-sec--tight { padding: 56px 0; }
.cl-sec > .cl-wrap > :first-child { margin-top: 0; }

h1, h2, h3, h4, .cl-h1, .cl-h2, .cl-h3 {
  font-family: var(--cl-font) !important;
  color: var(--cl-ink) !important;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.015em;
}
h1, .cl-h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); margin: 0 0 .5em; }
h2, .cl-h2 { font-size: clamp(1.6rem, 2.9vw, 2.25rem); margin: 0 0 .45em; }
h3, .cl-h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin: 0 0 .5em; }
p { margin: 0 0 1em; }

.cl-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cl-primary);
  margin-bottom: 14px;
}
.cl-lead { font-size: 1.16rem; color: var(--cl-body); max-width: 62ch; }
.cl-center { text-align: center; }
.cl-center .cl-lead { margin-left: auto; margin-right: auto; }
.cl-muted { color: var(--cl-muted); }
.cl-section-head { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.cl-section-head.cl-left { margin-left: 0; text-align: left; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.cl-btn,
a.cl-btn,
button.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-decoration: none !important;
}
.cl-btn--primary { background: var(--cl-primary); color: #fff !important; box-shadow: 0 10px 24px -12px rgba(29, 78, 216, .7); }
.cl-btn--primary:hover { background: var(--cl-primary-dark); transform: translateY(-1px); }
.cl-btn--ghost { background: #fff; color: var(--cl-ink) !important; border-color: var(--cl-line); }
.cl-btn--ghost:hover { border-color: #c8d3e2; transform: translateY(-1px); }
.cl-btn--light { background: #fff; color: var(--cl-dark) !important; }
.cl-btn--outline-light { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.cl-btn--outline-light:hover { background: rgba(255, 255, 255, .1); }
.cl-btn--sm { padding: 11px 20px; font-size: 14.5px; }
.cl-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.cl-btns.cl-center { justify-content: center; }

/* ==========================================================================
   4. Header
   ========================================================================== */
.cl-topbar {
  background: var(--cl-dark);
  color: #cbd5e1;
  font-size: 13.5px;
}
.cl-topbar .cl-wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 40px; }
.cl-topbar a { color: #e2e8f0; }
.cl-topbar strong { color: #fff; font-weight: 600; }
.cl-topbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
@media (max-width: 860px) { .cl-topbar { display: none; } }

.cl-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--cl-line);
}
.cl-header__inner { display: flex; align-items: center; gap: 28px; min-height: 74px; }
.cl-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.cl-brand__mark { width: 34px; height: 34px; flex: 0 0 34px; }
.cl-brand__logo {
  height: 38px;
  width: auto;
  max-width: 56px;
  flex: 0 0 auto;
  display: block;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}
.cl-brand__logo--footer { height: 46px; max-width: 68px; flex: 0 0 auto; margin-bottom: 16px; }
.cl-brand__name { font-size: 21px; font-weight: 750; color: var(--cl-ink) !important; letter-spacing: -.02em; }
.cl-brand__sub { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cl-muted); margin-top: -2px; }
.cl-nav { margin-left: auto; }
.cl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.cl-nav li { position: relative; }
.cl-nav > ul > li > a {
  display: block;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cl-ink) !important;
}
.cl-nav > ul > li > a:hover { background: var(--cl-soft); color: var(--cl-primary) !important; }
.cl-nav .sub-menu,
.cl-nav .children {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: 14px;
  box-shadow: var(--cl-shadow);
  padding: 8px;
  display: none;
  z-index: 70;
}
.cl-nav li:hover > .sub-menu,
.cl-nav li:hover > .children { display: block; }
.cl-nav .sub-menu li a,
.cl-nav .children li a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 15px; font-weight: 500; color: var(--cl-body) !important; }
.cl-nav .sub-menu li a:hover,
.cl-nav .children li a:hover { background: var(--cl-soft); color: var(--cl-primary) !important; }
.cl-header__cta { flex: 0 0 auto; }
.cl-burger { display: none; background: none; border: 1px solid var(--cl-line); border-radius: 10px; padding: 9px 11px; cursor: pointer; }
.cl-burger span { display: block; width: 20px; height: 2px; background: var(--cl-ink); margin: 4px 0; }
@media (max-width: 1024px) {
  /* 必须允许换行：否则 .cl-nav 的 flex:1 0 100% 无法落到第二行，展开时把页面撑出横向溢出 */
  .cl-header__inner { flex-wrap: wrap; row-gap: 0; }
  .cl-header { position: sticky; }
  .cl-burger { display: block; order: 3; }
  .cl-header__cta { order: 2; }
  .cl-header__cta .cl-btn { padding: 10px 16px; font-size: 14px; }
  .cl-nav {
    order: 4;
    flex: 1 0 100%;
    display: none;
    margin: 0 0 14px;
  }
  .cl-nav.is-open { display: block; }
  .cl-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .cl-nav .sub-menu, .cl-nav .children { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 14px; }
  .cl-nav > ul > li > a { padding: 12px 4px; border-bottom: 1px solid var(--cl-line-2); border-radius: 0; }
}
@media (max-width: 560px) {
  .cl-header__inner { gap: 12px; }
  .cl-brand__name { font-size: 19px; }
  .cl-brand__sub { display: none; }
  .cl-header__cta .cl-btn { padding: 9px 13px; font-size: 13px; }
}
body.admin-bar .cl-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .cl-header { top: 46px; } }

/* --------------------------------------------------------------------------
   4b. 内容区容器：Storefront 用 float 布局正文，会导致页脚被浮动层覆盖/挤出
   -------------------------------------------------------------------------- */
.cl-main { display: flow-root; }
.content-area,
#primary,
#primary.content-area,
.site-main,
#secondary,
.storefront-full-width-content .content-area { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.cl-footer { clear: both; }

/* --------------------------------------------------------------------------
   4c. Storefront 4.x 页面模板（page.php / single-product）没有 .col-full 容器
       → 正文会贴边且行宽过大，这里补上容器与排版
   -------------------------------------------------------------------------- */
#primary.content-area {
  max-width: var(--cl-maxw) !important;
  margin: 0 auto !important;
  padding: 0 24px 0 !important;
  box-sizing: border-box;
}
.entry-header { max-width: 900px; margin: 0 auto; padding: 56px 0 0; }
.entry-header .entry-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 .3em; }
.entry-content { max-width: 900px; margin: 0 auto; padding: 28px 0 72px; }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { margin-top: 1.9em; font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
.entry-content h3 { margin-top: 1.5em; font-size: 1.15rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 22px; }
.entry-content li { margin-bottom: .5em; }
.entry-content table { width: 100% !important; border-collapse: collapse !important; margin: 0 0 1.6em; font-size: 15.4px; }
.entry-content th, .entry-content td { border: 1px solid var(--cl-line) !important; padding: 12px 14px !important; text-align: left; vertical-align: top; }
.entry-content th { background: var(--cl-soft) !important; color: var(--cl-ink); font-weight: 650; }
.entry-content blockquote { border-left: 3px solid var(--cl-primary); margin: 0 0 1.4em; padding: 4px 0 4px 18px; color: var(--cl-muted); }
.entry-content .cl-btn { margin: 6px 0; }
.entry-content img { border-radius: var(--cl-radius); }
.single-product .entry-content { max-width: 100%; }
.woocommerce-breadcrumb { padding: 18px 0 0 !important; }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.cl-hero { padding: 74px 0 70px; background: linear-gradient(180deg, #f8faff 0%, #fff 100%); overflow: hidden; }
.cl-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.cl-hero h1 { margin-bottom: .55em; }
.cl-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.cl-checks li { position: relative; padding-left: 30px; color: var(--cl-ink); font-size: 16px; font-weight: 500; }
.cl-checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(29, 78, 216, .12);
}
.cl-checks li::after {
  content: "";
  position: absolute;
  left: 6px; top: .62em;
  width: 6px; height: 10px;
  border-right: 2px solid var(--cl-primary);
  border-bottom: 2px solid var(--cl-primary);
  transform: rotate(45deg);
}
.cl-hero__media img { width: 100%; border-radius: var(--cl-radius-lg); box-shadow: var(--cl-shadow); display: block; }
.cl-hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cl-chip {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cl-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cl-body);
}
@media (max-width: 980px) { .cl-hero__grid { grid-template-columns: 1fr; gap: 34px; } }

/* ==========================================================================
   6. Cards & grids
   ========================================================================== */
.cl-grid { display: grid; gap: 26px; }
.cl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cl-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .cl-grid--4 { grid-template-columns: repeat(2, 1fr); } .cl-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cl-grid--2, .cl-grid--3, .cl-grid--4 { grid-template-columns: 1fr; } }

.cl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cl-card:hover { transform: translateY(-3px); box-shadow: var(--cl-shadow); border-color: #d6deea; }
.cl-card__media { aspect-ratio: 4 / 3; background: var(--cl-soft); overflow: hidden; }
.cl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.cl-card__body h3 { margin-bottom: .4em; }
.cl-card__body p { font-size: 15.4px; color: var(--cl-body); margin-bottom: 1em; }
.cl-card__link { margin-top: auto; font-weight: 650; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.cl-card__link::after { content: "→"; transition: transform .18s ease; }
.cl-card:hover .cl-card__link::after { transform: translateX(3px); }

.cl-cap {
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  padding: 26px 24px;
}
.cl-cap h3 { font-size: 1.08rem; margin-bottom: .45em; }
.cl-cap p { font-size: 15.2px; margin: 0; }
.cl-cap__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(29, 78, 216, .1);
  color: var(--cl-primary);
  display: grid; place-items: center;
  margin-bottom: 16px;
  font-size: 19px;
  font-weight: 700;
}

.cl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.cl-split img { width: 100%; border-radius: var(--cl-radius-lg); box-shadow: var(--cl-shadow); display: block; }
@media (max-width: 980px) { .cl-split { grid-template-columns: 1fr; gap: 30px; } }

.cl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 1024px) { .cl-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cl-steps { grid-template-columns: 1fr; } }
.cl-step { background: #fff; border: 1px solid var(--cl-line); border-radius: var(--cl-radius); padding: 24px 20px; }
.cl-step__no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cl-primary); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.cl-step h3 { font-size: 1.02rem; margin-bottom: .4em; }
.cl-step p { font-size: 14.6px; margin: 0; }

.cl-cta {
  background: radial-gradient(120% 140% at 12% 10%, #1b3fa8 0%, var(--cl-dark) 62%);
  color: #e2e8f0;
  border-radius: var(--cl-radius-lg);
  padding: 62px 46px;
  text-align: center;
}
.cl-cta h2 { color: #fff !important; }
.cl-cta p { color: #c7d2e4; max-width: 62ch; margin: 0 auto 1em; }
.cl-cta .cl-btns { justify-content: center; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.cl-footer { background: var(--cl-dark); color: #94a3b8; margin-top: 0; }
.cl-footer a { color: #cbd5e1; }
.cl-footer a:hover { color: #fff; }
.cl-footer__main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding: 66px 0 46px; }
@media (max-width: 980px) { .cl-footer__main { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .cl-footer__main { grid-template-columns: 1fr; } }
.cl-footer h4 { color: #fff; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 18px; }
.cl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.cl-footer__brand .cl-brand__name { color: #fff !important; }
.cl-footer__brand p { font-size: 15px; color: #94a3b8; max-width: 38ch; }
.cl-footer__bar { border-top: 1px solid rgba(148, 163, 184, .22); padding: 20px 0; font-size: 13.8px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   8. Page content (hand-written HTML pages)
   ========================================================================== */
.cl-pagehead { background: var(--cl-soft); border-bottom: 1px solid var(--cl-line); padding: 58px 0 52px; }
.cl-pagehead h1 { margin-bottom: .35em; font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.cl-pagehead p { max-width: 68ch; margin: 0; font-size: 1.1rem; }
.cl-pagehead .cl-btns { margin-top: 24px; }

.cl-content { padding: 64px 0; }
.cl-content .cl-wrap { max-width: 900px; }
.cl-content h2 { margin-top: 1.9em; }
.cl-content h3 { margin-top: 1.5em; }
.cl-content ul, .cl-content ol { margin: 0 0 1.2em; padding-left: 22px; }
.cl-content li { margin-bottom: .5em; }
.cl-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 15.4px; }
.cl-content th, .cl-content td { border: 1px solid var(--cl-line); padding: 12px 14px; text-align: left; }
.cl-content th { background: var(--cl-soft); color: var(--cl-ink); font-weight: 650; }
.cl-content-wide .cl-wrap { max-width: var(--cl-maxw); }

/* ==========================================================================
   9. Forms (Contact Form 7)
   ========================================================================== */
.cl-form-wrap { background: #fff; border: 1px solid var(--cl-line); border-radius: var(--cl-radius-lg); padding: 34px; box-shadow: var(--cl-shadow-sm); }
.wpcf7 p { margin: 0 0 16px; }
.wpcf7 label { display: block; font-weight: 600; color: var(--cl-ink); font-size: 14.6px; margin-bottom: 7px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 input[type="number"], .wpcf7 input[type="url"], .wpcf7 select, .wpcf7 textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--cl-line);
  border-radius: 11px;
  font-size: 15.5px;
  font-family: var(--cl-font);
  color: var(--cl-ink);
  background: #fff;
  box-sizing: border-box;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--cl-primary); box-shadow: 0 0 0 3px rgba(29, 78, 216, .12); }
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input[type="submit"] {
  background: var(--cl-primary); color: #fff; border: 0; border-radius: 999px;
  padding: 15px 34px; font-size: 15.5px; font-weight: 650; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--cl-primary-dark); }
.wpcf7 .cf7-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 700px) { .wpcf7 .cf7-grid { grid-template-columns: 1fr; } }
.wpcf7-response-output { border-radius: 12px !important; margin: 18px 0 0 !important; padding: 14px 16px !important; font-size: 15px; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #16a34a !important; background: #f0fdf4; color: #166534; }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output { border-color: #dc2626 !important; background: #fef2f2; color: #991b1b; }

/* ==========================================================================
   10. WooCommerce — catalogue
   ========================================================================== */
.woocommerce .cl-wrap, .woocommerce-page .cl-wrap { margin-left: auto; margin-right: auto; }
ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0 0 40px !important; padding: 0 !important; }
/* Storefront 的 clearfix 伪元素在 grid 里会占掉一个单元格 → 必须清掉 */
ul.products::before,
ul.products::after,
.cl-grid::before,
.cl-grid::after { content: none !important; display: none !important; }
ul.products.columns-3, ul.products.columns-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { ul.products, ul.products.columns-3, ul.products.columns-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { ul.products, ul.products.columns-3, ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { ul.products, ul.products.columns-3, ul.products.columns-2 { grid-template-columns: 1fr; } }
ul.products li.product {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--cl-shadow); }
ul.products li.product a img { border-radius: 0 !important; margin: 0 !important; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
ul.products li.product .woocommerce-loop-product__title { font-size: 17px !important; font-weight: 650 !important; padding: 18px 20px 6px !important; color: var(--cl-ink) !important; }
ul.products li.product .cl-loop-meta { padding: 0 20px 4px; font-size: 13.6px; color: var(--cl-muted); }
ul.products li.product .cl-loop-meta span + span::before { content: "·"; margin: 0 7px; }
ul.products li.product .button,
ul.products li.product .cl-quote-btn {
  margin: auto 20px 22px !important;
  background: none !important;
  border: 1.5px solid var(--cl-primary) !important;
  color: var(--cl-primary) !important;
  border-radius: 999px !important;
  padding: 11px 20px !important;
  font-size: 14.6px !important;
  font-weight: 650 !important;
  text-align: center;
  display: block !important;
}
ul.products li.product .button:hover, ul.products li.product .cl-quote-btn:hover { background: var(--cl-primary) !important; color: #fff !important; }
ul.products li.product .price,
ul.products li.product .star-rating,
ul.products li.product .onsale { display: none !important; }

.cl-catalog { padding: 46px 0 74px; }
.woocommerce-result-count { margin: 0 0 22px !important; color: var(--cl-muted) !important; font-size: 15px !important; }
.woocommerce-ordering { display: none; }

/* ==========================================================================
   11. WooCommerce — single product
   ========================================================================== */
.single-product div.product { display: grid !important; grid-template-columns: 1.05fr 1fr; gap: 52px; padding: 58px 0 20px; align-items: start; }
@media (max-width: 980px) { .single-product div.product { grid-template-columns: 1fr; gap: 30px; } }
/* 显式指定网格位次：图库左、摘要右，描述与相关产品整行在下（否则自动排布会把图库丢到右列，
   左上留下整块空白、摘要被挤到第二行） */
.single-product div.product > .woocommerce-product-gallery { grid-column: 1 !important; grid-row: 1 !important; }
.single-product div.product > .summary { grid-column: 2 !important; grid-row: 1 !important; }
.single-product div.product > .woocommerce-tabs { grid-column: 1 / -1 !important; grid-row: 2 !important; margin-top: 12px; }
.single-product div.product > .storefront-product-pagination { grid-column: 1 / -1 !important; }
@media (max-width: 980px) {
  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > .summary,
  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .storefront-product-pagination { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
/* 相关产品：占满整个商品网格的两列，并按 3 列排（否则被挤进 563px 左栏、每张卡仅 121px，
   标题与按钮会断在词中间） */
.single-product div.product .related.products {
  grid-column: 1 / -1;
  width: 100%;
  margin: 10px 0 0;
  padding-top: 46px;
  border-top: 1px solid var(--cl-line);
}
.single-product div.product .related.products > h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 0 0 26px; }
.single-product div.product .related.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 860px) { .single-product div.product .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .single-product div.product .related.products ul.products { grid-template-columns: 1fr !important; } }
/* 报价按钮不拆词 */
.cl-quote-btn, a.button.cl-quote-btn { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.single-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.single-product div.product .woocommerce-product-gallery img { border-radius: var(--cl-radius-lg); }
.single-product div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; }
.single-product div.product .product_title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .35em; }
.single-product div.product .price,
.single-product div.product form.cart,
.single-product div.product .product_meta,
.single-product div.product .woocommerce-product-rating { display: none !important; }
.single-product div.product .woocommerce-product-details__short-description { font-size: 1.06rem; color: var(--cl-body); }
.cl-quote-box { background: var(--cl-soft); border: 1px solid var(--cl-line); border-radius: var(--cl-radius); padding: 24px; margin: 24px 0; }
.cl-quote-box dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 20px; font-size: 15.4px; }
.cl-quote-box dt { color: var(--cl-muted); font-weight: 600; }
.cl-quote-box dd { margin: 0; color: var(--cl-ink); font-weight: 600; }
.cl-quote-box .cl-btns { margin-top: 0; }
.cl-trust { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14.8px; }
.cl-trust li { position: relative; padding-left: 24px; color: var(--cl-body); }
.cl-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--cl-primary); font-weight: 700; }

.woocommerce-tabs { clear: both; }
.woocommerce-tabs ul.tabs { padding: 0 !important; margin: 30px 0 0 !important; border-bottom: 1px solid var(--cl-line); display: flex; gap: 8px; }
.woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
.woocommerce-tabs ul.tabs li a { padding: 13px 18px !important; font-weight: 650 !important; color: var(--cl-muted) !important; border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { color: var(--cl-ink) !important; border-bottom-color: var(--cl-primary); }
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs li::after, .woocommerce-tabs ul.tabs li::before { display: none !important; }
.woocommerce-tabs .panel { padding: 30px 0 0 !important; margin: 0 !important; }
.woocommerce-tabs .panel h2 { font-size: 1.3rem; }
.shop_attributes { border-collapse: collapse; width: 100%; }
.shop_attributes th, .shop_attributes td { border: 1px solid var(--cl-line) !important; padding: 11px 14px !important; background: none !important; font-style: normal !important; }
.shop_attributes th { background: var(--cl-soft) !important; width: 220px; color: var(--cl-ink); }
.related.products, .upsells.products { clear: both; padding: 26px 0 60px; }
.related.products > h2, .upsells.products > h2 { font-size: 1.5rem; margin-bottom: 24px; }

.woocommerce-breadcrumb { padding: 18px 0 0 !important; font-size: 14px !important; color: var(--cl-muted) !important; margin: 0 !important; }
.woocommerce-breadcrumb a { color: var(--cl-muted) !important; }

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: 12px !important; border-top: 0 !important; }

/* hide cart / checkout affordances site-wide (B2B quote model) */
.cl-no-cart .storefront-breadcrumb, .cl-no-cart #site-header-cart { display: none; }

/* ==========================================================================
   12. Misc
   ========================================================================== */
.cl-logos { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cl-logos span { border: 1px solid var(--cl-line); border-radius: 12px; padding: 12px 20px; font-size: 14.5px; font-weight: 650; color: var(--cl-body); background: #fff; }
.cl-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; padding: 18px 20px; font-size: 15.4px; color: #92400e; }

/* ==========================================================================
   13. Planned-catalogue notice (reference only)
   ========================================================================== */
.cl-notice {
  margin: 30px 0 6px;
  padding: 22px 26px;
  border: 1px solid rgba(29, 78, 216, .2);
  border-left: 4px solid var(--cl-primary);
  border-radius: var(--cl-radius);
  background: #f4f7ff;
  color: var(--cl-ink);
}
.cl-notice h3 { margin: 0 0 10px; font-size: 18.5px; line-height: 1.3; }
.cl-notice p { margin: 0 0 10px; font-size: 15.4px; line-height: 1.68; color: var(--cl-body); }
.cl-notice p:last-child, .cl-notice ul:last-child { margin-bottom: 0; }
.cl-notice ul { margin: 0 0 10px; padding-left: 20px; font-size: 15px; line-height: 1.62; color: var(--cl-body); }
.cl-notice li { margin-bottom: 4px; }
.cl-notice--compact {
  margin: 22px 0 0;
  padding: 15px 20px;
  border-left-width: 3px;
  border-radius: 12px;
  background: #f7f9ff;
  font-size: 15px;
  line-height: 1.62;
  color: var(--cl-body);
}
.cl-notice--compact strong { color: var(--cl-ink); }
.cl-notice-inline {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--cl-soft);
  font-size: 13.6px;
  line-height: 1.55;
  color: var(--cl-muted);
}
@media (max-width: 640px) {
  .cl-notice { padding: 18px 18px; }
  .cl-notice h3 { font-size: 17px; }
}