/* ============================================================================ * WooCommerce 原生页面的品牌样式层 * * 生成器产出（04-上线部署/theme-build/build_theme.py），请勿手改。 * * 用途：WooCommerce 经典模板自带配色会直接压在商店页/商品页/购物车/结账上， * 实测值为加购按钮 #7F54B3（WC 品牌紫）、价格 #958E09（黄绿）。 * 这里只把它们替换为设计稿的令牌（复用 base.css 的 :root 变量）， * 不改信息结构与布局层级。 * * 作用域：body.woocommerce-page 与 body.woocommerce 双写 —— 因为购物车页与 * 结账页的 body 只有 woocommerce-page，没有裸 woocommerce。 * 设计稿的 7 个页面是裸，不受本文件影响。 * ========================================================================== */ body.woocommerce-page .button, body.woocommerce .button, body.woocommerce-page .button.alt, body.woocommerce .button.alt, body.woocommerce-page .single_add_to_cart_button, body.woocommerce .single_add_to_cart_button, body.woocommerce-page .add_to_cart_button, body.woocommerce .add_to_cart_button, body.woocommerce-page .checkout-button, body.woocommerce .checkout-button, body.woocommerce-page #place_order, body.woocommerce #place_order, body.woocommerce-page .woocommerce-Button, body.woocommerce .woocommerce-Button, body.woocommerce-page button[name="apply_coupon"], body.woocommerce button[name="apply_coupon"], body.woocommerce-page button[name="update_cart"], body.woocommerce button[name="update_cart"], body.woocommerce-page .wc-block-components-button, body.woocommerce .wc-block-components-button, body.woocommerce-page .wc-block-cart__submit-button, body.woocommerce .wc-block-cart__submit-button, body.woocommerce-page .wc-block-components-checkout-place-order-button, body.woocommerce .wc-block-components-checkout-place-order-button{ background: var(--ink) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; min-height: 46px; padding: 12px 28px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .09em !important; text-transform: uppercase !important; line-height: 1.25 !important; box-shadow: none !important; text-decoration: none !important; transition: background .25s var(--ease), color .25s var(--ease); } body.woocommerce-page .button:hover, body.woocommerce .button:hover, body.woocommerce-page .button:focus, body.woocommerce .button:focus, body.woocommerce-page .single_add_to_cart_button:hover, body.woocommerce .single_add_to_cart_button:hover, body.woocommerce-page .add_to_cart_button:hover, body.woocommerce .add_to_cart_button:hover, body.woocommerce-page .checkout-button:hover, body.woocommerce .checkout-button:hover, body.woocommerce-page #place_order:hover, body.woocommerce #place_order:hover, body.woocommerce-page #place_order:focus, body.woocommerce #place_order:focus, body.woocommerce-page .woocommerce-Button:hover, body.woocommerce .woocommerce-Button:hover, body.woocommerce-page .wc-block-components-button:hover, body.woocommerce .wc-block-components-button:hover, body.woocommerce-page .wc-block-cart__submit-button:hover, body.woocommerce .wc-block-cart__submit-button:hover{ background: var(--coral) !important; color: #fff !important; } body.woocommerce-page .button.wc-backward, body.woocommerce .button.wc-backward, body.woocommerce-page .wc-block-components-button.is-link, body.woocommerce .wc-block-components-button.is-link, body.woocommerce-page .wc-block-cart__submit-button--outline, body.woocommerce .wc-block-cart__submit-button--outline{ background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; } body.woocommerce-page .added_to_cart, body.woocommerce .added_to_cart{ color: var(--coral) !important; background: transparent !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding-left: 12px !important; } body.woocommerce-page .price, body.woocommerce .price, body.woocommerce-page .price .amount, body.woocommerce .price .amount, body.woocommerce-page .woocommerce-Price-amount, body.woocommerce .woocommerce-Price-amount, body.woocommerce-page .woocommerce-Price-currencySymbol, body.woocommerce .woocommerce-Price-currencySymbol, body.woocommerce-page .wc-block-components-product-price, body.woocommerce .wc-block-components-product-price, body.woocommerce-page .wc-block-components-product-price__value, body.woocommerce .wc-block-components-product-price__value, body.woocommerce-page .wc-block-components-totals-item__value, body.woocommerce .wc-block-components-totals-item__value, body.woocommerce-page .wc-block-components-order-summary-item__total-price, body.woocommerce .wc-block-components-order-summary-item__total-price{ color: var(--ink) !important; font-variant-numeric: tabular-nums; } body.woocommerce-page input[type="text"], body.woocommerce input[type="text"], body.woocommerce-page input[type="email"], body.woocommerce input[type="email"], body.woocommerce-page input[type="tel"], body.woocommerce input[type="tel"], body.woocommerce-page input[type="url"], body.woocommerce input[type="url"], body.woocommerce-page input[type="password"], body.woocommerce input[type="password"], body.woocommerce-page input[type="number"], body.woocommerce input[type="number"], body.woocommerce-page input[type="search"], body.woocommerce input[type="search"], body.woocommerce-page select, body.woocommerce select, body.woocommerce-page textarea, body.woocommerce textarea, body.woocommerce-page .wc-block-components-text-input input, body.woocommerce .wc-block-components-text-input input, body.woocommerce-page .wc-blocks-components-select__select, body.woocommerce .wc-blocks-components-select__select{ background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: none !important; font-family: inherit !important; font-size: 15px !important; min-height: 48px; padding: 0 14px !important; } body.woocommerce-page input:focus, body.woocommerce input:focus, body.woocommerce-page select:focus, body.woocommerce select:focus, body.woocommerce-page textarea:focus, body.woocommerce textarea:focus{ border-color: var(--ink) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(20,17,16,.07) !important; } body.woocommerce-page .quantity input.qty, body.woocommerce .quantity input.qty, body.woocommerce-page .quantity input[type="number"], body.woocommerce .quantity input[type="number"], body.woocommerce-page form.cart .qty, body.woocommerce form.cart .qty{ width: 76px; min-height: 46px; border-radius: 999px !important; text-align: center; font-weight: 700 !important; } body.woocommerce-page ul.products li.product a img, body.woocommerce ul.products li.product a img, body.woocommerce-page .woocommerce-product-gallery__image img, body.woocommerce .woocommerce-product-gallery__image img{ border-radius: var(--radius) !important; background: var(--paper-2); aspect-ratio: 1 / 1; object-fit: cover; } body.woocommerce-page ul.products li.product .woocommerce-loop-product__title, body.woocommerce ul.products li.product .woocommerce-loop-product__title, body.woocommerce-page ul.products li.product h2, body.woocommerce ul.products li.product h2{ color: var(--ink) !important; font-weight: 800 !important; } body.woocommerce-page .woocommerce-result-count, body.woocommerce .woocommerce-result-count{ color: var(--muted) !important; font-size: 13.5px !important; } body.woocommerce-page select.orderby, body.woocommerce select.orderby{ min-height: 44px; padding: 0 38px 0 16px !important; border-radius: 999px !important; font-size: 13.5px !important; font-weight: 600 !important; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23141110' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; } body.woocommerce-page .woocommerce-breadcrumb, body.woocommerce .woocommerce-breadcrumb{ color: var(--muted) !important; font-size: 12.5px !important; letter-spacing: .04em; } body.woocommerce-page .woocommerce-pagination a, body.woocommerce .woocommerce-pagination a, body.woocommerce-page .woocommerce-pagination span.page-numbers, body.woocommerce .woocommerce-pagination span.page-numbers{ min-width: 42px; border: 1px solid var(--line) !important; border-radius: 999px !important; background: #fff !important; color: var(--ink) !important; } body.woocommerce-page .woocommerce-pagination span.current, body.woocommerce .woocommerce-pagination span.current{ background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; } body.woocommerce-page .product_meta, body.woocommerce .product_meta{ color: var(--muted) !important; font-size: 12.5px !important; } body.woocommerce-page .product_meta a, body.woocommerce .product_meta a{ color: var(--ink) !important; } body.woocommerce-page .single_add_to_cart_button, body.woocommerce .single_add_to_cart_button{ min-width: 200px; } body.woocommerce-page .woocommerce-tabs ul.tabs, body.woocommerce .woocommerce-tabs ul.tabs{ padding: 0 !important; margin: 0 0 26px !important; border-bottom: 1px solid var(--line) !important; } body.woocommerce-page .woocommerce-tabs ul.tabs li a, body.woocommerce .woocommerce-tabs ul.tabs li a{ border: 0 !important; background: transparent !important; color: var(--muted) !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .09em !important; text-transform: uppercase !important; padding: 14px 18px !important; } body.woocommerce-page .woocommerce-tabs ul.tabs li.active a, body.woocommerce .woocommerce-tabs ul.tabs li.active a, body.woocommerce-page .woocommerce-tabs ul.tabs li a:hover, body.woocommerce .woocommerce-tabs ul.tabs li a:hover{ color: var(--ink) !important; } body.woocommerce-page .woocommerce-tabs .panel, body.woocommerce .woocommerce-tabs .panel{ color: var(--ink-2) !important; } body.woocommerce-page #reviews .comment_container, body.woocommerce #reviews .comment_container, body.woocommerce-page #reviews .comment-form, body.woocommerce #reviews .comment-form{ border-color: var(--line) !important; } body.woocommerce-page .woocommerce-message, body.woocommerce .woocommerce-message, body.woocommerce-page .woocommerce-info, body.woocommerce .woocommerce-info, body.woocommerce-page .woocommerce-error, body.woocommerce .woocommerce-error{ background: var(--paper-2) !important; border: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: none !important; color: var(--ink) !important; font-size: 14.5px !important; padding: 18px 22px !important; } body.woocommerce-page .woocommerce-error, body.woocommerce .woocommerce-error{ background: #FFF1EE !important; } body.woocommerce-page .woocommerce-message::before, body.woocommerce .woocommerce-message::before, body.woocommerce-page .woocommerce-info::before, body.woocommerce .woocommerce-info::before{ color: var(--ink) !important; } body.woocommerce-page .woocommerce-error::before, body.woocommerce .woocommerce-error::before{ color: var(--red) !important; } body.woocommerce-page .woocommerce-message .button, body.woocommerce .woocommerce-message .button, body.woocommerce-page .woocommerce-info .button, body.woocommerce .woocommerce-info .button{ min-height: 38px; padding: 8px 20px !important; font-size: 11px !important; } body.woocommerce-page .wc-block-components-panel, body.woocommerce .wc-block-components-panel, body.woocommerce-page .wc-block-components-totals-wrapper, body.woocommerce .wc-block-components-totals-wrapper, body.woocommerce-page .wc-block-cart-items, body.woocommerce .wc-block-cart-items, body.woocommerce-page .wc-block-components-order-summary, body.woocommerce .wc-block-components-order-summary, body.woocommerce-page .wc-block-checkout__sidebar, body.woocommerce .wc-block-checkout__sidebar, body.woocommerce-page .wc-block-components-sidebar, body.woocommerce .wc-block-components-sidebar{ border-color: var(--line) !important; } body.woocommerce-page .wc-block-components-title, body.woocommerce .wc-block-components-title, body.woocommerce-page .wc-block-components-totals__heading, body.woocommerce .wc-block-components-totals__heading{ color: var(--ink) !important; font-weight: 800 !important; } body.woocommerce-page .wc-block-components-product-name, body.woocommerce .wc-block-components-product-name, body.woocommerce-page .wc-block-components-totals-item__label, body.woocommerce .wc-block-components-totals-item__label{ color: var(--ink) !important; } body.woocommerce-page .wc-block-components-order-summary-item__quantity, body.woocommerce .wc-block-components-order-summary-item__quantity{ background: var(--ink) !important; color: #fff !important; border: 0 !important; } body.woocommerce-page .wc-block-checkout__sidebar .wc-block-components-totals-item__value, body.woocommerce .wc-block-checkout__sidebar .wc-block-components-totals-item__value{ font-weight: 800 !important; } /* ---------------------------------------------------------------- 手机端归档卡老板反馈「手机端每个商品都挂着一个大按钮，太密集」。根因：390px 下 WC 仍走 2 列（每列 164px），文字与按钮集体换行、卡片高度不等。改为单列横排卡：左图 84px · 中标题价格 · 右小胶囊按钮。 */ @media (max-width: 640px) { /* 列表：2 列 → 单列纵向 */ body.woocommerce-page ul.products, body.woocommerce ul.products { display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; } body.woocommerce-page ul.products li.product, body.woocommerce ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; padding: 9px 10px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 10px !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 14px !important; overflow: hidden; } /* WC 把 img / h2 / price 都塞在同一个里，这里再分成「图 + 文案」两列 */ body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link, body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { grid-column: 1 !important; display: grid !important; grid-template-columns: 84px minmax(0, 1fr) !important; align-items: center !important; column-gap: 12px !important; min-width: 0 !important; } body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link img, body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 84px !important; height: 84px !important; margin: 0 !important; border-radius: 11px !important; object-fit: cover; } body.woocommerce-page ul.products li.product .woocommerce-loop-product__title, body.woocommerce ul.products li.product .woocommerce-loop-product__title { grid-column: 2 !important; align-self: end !important; margin: 0 !important; padding: 0 !important; font-size: 14.5px !important; line-height: 1.25 !important; overflow-wrap: anywhere; } body.woocommerce-page ul.products li.product .price, body.woocommerce ul.products li.product .price { grid-column: 2 !important; align-self: start !important; margin: 0 !important; font-size: 14px !important; } /* 按钮：从「撑满卡片的大黑块」压成右侧小胶囊（保留一键加购能力） ⚠ 高度必须 ≥44px —— 移动端最小可点区域（Apple HIG 44pt / Material 48dp）。 2026-09-20 实测：压到 32px 后全站体检报「可点元素 <44px」114 处，其中 7 处正是本按钮 —— 主转化按钮误触会直接吃掉订单，不能为省高度牺牲。 44px 是「合规下限」而非 46px，是为了仍比原值更紧凑。 ⚠ 必须同时覆盖 min-height：本文件前面的通用按钮规则写了 min-height:46px （没有 !important），只设 height 会被 min-height 顶住 —— 实测按钮仍是 46px 高。 */ body.woocommerce-page ul.products li.product .button, body.woocommerce ul.products li.product .button { grid-column: 2 !important; justify-self: end !important; width: auto !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 0 13px !important; font-size: 10px !important; letter-spacing: .04em !important; border-radius: 999px !important; white-space: nowrap !important; margin: 0 !important; } /* 结果计数 + 排序下拉：两行合并为一行，少占 60px */ body.woocommerce-page .woocommerce-result-count, body.woocommerce .woocommerce-result-count { font-size: 12px !important; margin: 0 !important; } body.woocommerce-page .woocommerce-ordering, body.woocommerce .woocommerce-ordering { margin: 0 !important; } body.woocommerce-page select.orderby, body.woocommerce select.orderby { min-height: 44px !important; font-size: 12px !important; padding: 0 32px 0 13px !important; } }