/*
Theme Name: KBE Shop
Theme URI: https://kbedurian.com
Description: KBE 猫山王商城主题。Twenty Twenty-Five 的子主题 —— 「同源的皮,标准的骨」:
             颜色、字体、导航、页脚和落地页同源,布局是正常网店该有的样子。
             色值与字体全部对齐 build/web/home.template.html 的 :root,改品牌色请两边一起改。
Author: KBE
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kbe-shop
*/

/* ══════════════════════════════════════════════════════════════════════════
   这个文件只写 theme.json 表达不了的东西(伪类、sticky、WooCommerce 的类名)。
   颜色 / 字体 / 按钮基础样式全在 theme.json —— 别在这里重复一遍,会打架。
   颜色一律引用 theme.json 生成的 --wp--preset--color--*,不要写死十六进制:
   改一次调色板全站跟着变,这正是用 theme.json 的理由。
   ══════════════════════════════════════════════════════════════════════════ */

/* 商城基底是英文,所以拉丁字母的紧排规则在这里适用(中文那套行高 1.1+、
   字距不低于 -0.01em 的约束是给落地页中文版的,见 HANDOFF §5)。 */

/* ── 页眉 ────────────────────────────────────────────────────────────────
   落地页的 nav 是 fixed + 滚动后变 solid;商城不需要那套影片交接逻辑,
   直接用 sticky 常驻。视觉取落地页 nav.solid 的那一档。 */
.kbe-head {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: .85rem clamp(1rem, 4vw, 2rem);
  background: rgba(250, 246, 236, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

.kbe-head p { margin: 0; }

/* 字母间距 .16em + 800 字重 = 落地页那个 KBE 字标。它是全站唯一的品牌锚点,
   商城和落地页必须一模一样,否则会被读成两个网站。 */
.kbe-logo a {
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 1.05rem;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.kbe-nav { gap: clamp(.8rem, 2.5vw, 1.7rem); }
.kbe-nav a {
  font-size: .86rem;
  color: var(--wp--preset--color--accent-3);
  text-decoration: none;
  transition: color .25s ease;
}
.kbe-nav a:hover { color: var(--wp--preset--color--accent-1); }

/* ── 页脚 ────────────────────────────────────────────────────────────────
   夜色底。落地页页脚就是这个色(--nite-2),是「影片那一侧」在商城里的唯一回声。 */
.kbe-foot {
  background: var(--wp--preset--color--accent-6);
  color: rgba(242, 237, 228, .62);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  font-size: .875rem;
  margin-top: clamp(3rem, 8vw, 6rem);
}
.kbe-foot-cols {
  gap: 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
  /* = theme.json 的 contentSize,也 = 落地页的 --wrap。
     页脚和上面的内容左右必须对齐,差一点点比差很多更显得是做坏了。 */
  max-width: 1080px;
  margin-inline: auto;
}
.kbe-foot p { margin: 0; max-width: 20rem; }
.kbe-foot a { color: rgba(242, 237, 228, .62); text-decoration: none; }
.kbe-foot a:hover { color: var(--wp--preset--color--accent-2); }
.kbe-foot strong {
  color: #F2EDE4;
  display: block;
  margin-bottom: .6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ── 全站一个宽度 ────────────────────────────────────────────────────────
   1080px = theme.json 的 contentSize = wideSize = 落地页的 --wrap。

   为什么 wideSize 也设成 1080:WooCommerce 给商品页的外层套的是
   `<div class="content-area alignwide">`,不设成一样宽的话商品页会比商店页
   宽出 200px,两页的左边缘对不齐 —— 那种「差一点点」最像做坏了。

   下面这条是收拾 woocommerce-blocktheme.css 里把购物车/结账/账号页钉死在
   1000px 的那条规则,同样是为了对齐。 */
.woocommerce-account main .woocommerce,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce,
.woocommerce-account .wp-block-post-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title { max-width: 1080px; }

/* 纯文字页面(配送退款条款、隐私政策)限一个可读的行长。
   1080px 是给商品网格和「图 + 摘要」并排用的宽度,拿来排正文一行 120 多个字符。
   ⚠️ 必须排除 .woocommerce-page:购物车/结账/账号页也是 page,
   把它们压到 70ch 会把结账的两栏布局挤坏。 */
body.page:not(.woocommerce-page) .wp-block-post-content { max-width: 70ch; }

/* ── 按钮 ────────────────────────────────────────────────────────────────
   theme.json 管配色和圆角,这里只补 hover(theme.json 的 :hover 对
   WooCommerce 自己那些 .button 类名盖不全,统一在这里做)。 */
.wp-block-button__link:hover,
a.button:hover,
button.button:hover,
input.button:hover { opacity: .92; }

/* WooCommerce 的经典模板不吃 theme.json 的 elements.button,得手动对齐一次。
   ⚠️ 选择器**不能**加 .woocommerce 前缀限定:下单成功页那类区块模板里,
   按钮并不在 .woocommerce 容器内,加了前缀就只剩底色、没有内边距和圆角
   —— 看起来像一段被荧光笔涂过的文字,不像按钮。踩过一次。 */
a.button,
button.button,
input.button,
.woocommerce #respond input#submit {
  background: var(--wp--preset--color--accent-1);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .85rem 1.8rem;
  border: 0;
}

/* ── WooCommerce 局部 ────────────────────────────────────────────────────
   猫山王金只做状态高亮,绝不做按钮文字 —— 米底上对比度只有 1.9:1,
   当正文色是不可读的(HANDOFF §10)。所以下面金色只出现在「底色」上。 */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--contrast);
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: .04em;
}

.woocommerce .price,
.woocommerce ul.products li.product .price {
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
}
.woocommerce .price del { color: var(--wp--preset--color--accent-3); font-weight: 400; }

/* 商品卡:照片就是卡片,不加容器边框(和落地页同一个判断)。 */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img { border-radius: 20px; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* 通知条:Woo 默认是紫色系,和这套暖色完全不搭。 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  border-top-color: var(--wp--preset--color--accent-1);
  background: var(--wp--preset--color--accent-5);
  color: var(--wp--preset--color--contrast);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--wp--preset--color--accent-1); }

/* WooCommerce 的经典模板输出的是裸 HTML,不走 block 的 blockGap,
   所以段落之间会一点空隙都没有(简介那两句会黏成一句)。这里把节奏补回来。 */
.woocommerce-product-details__short-description p,
.woocommerce-Tabs-panel p,
.woocommerce-page .woocommerce p:not([class]) { margin: 0 0 1em; }
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* 简介是「买不买」那一眼看的东西,给它比正文大一档。 */
.woocommerce-product-details__short-description {
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--accent-3);
  margin-bottom: 1.5rem;
}

/* 商品名在列表里用墨色,不用砖红 —— 砖红是行动色,一整页商品名都用它,
   「加入购物车」就不再是页面上最响的东西了。 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a:not(.button) {
  color: var(--wp--preset--color--contrast);
}

/* 详情页的价格给足重量:它是购买决策事实,不该和正文一样大。 */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 500;
  letter-spacing: -.01em;
}

/* 详情页主图也走圆角,和列表卡一致。 */
.woocommerce div.product div.images img { border-radius: 20px; }

/* 商品详情页的 SKU / 分类:Woo 输出的是几个并排的 <span>,挤成一行读不出结构。 */
.woocommerce div.product .product_meta > span {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
  color: var(--wp--preset--color--accent-3);
}

/* ── 详情页的标签页 ──────────────────────────────────────────────────────
   Woo 默认那套是灰色圆角小抽屉(带 ::before/::after 画出来的圆角),
   八九十年代的网页语汇,和这套暖色编辑感完全不搭。压成一排下划线。 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 2rem;
  margin: 0 0 2rem;
  padding: 0;
  border-bottom: 1px solid var(--wp--preset--color--accent-4);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .7rem 0;
  color: var(--wp--preset--color--accent-3);
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--wp--preset--color--contrast);
  border-bottom-color: var(--wp--preset--color--accent-1);
}

/* 商品正文限一个可读的行长。内容区 1080px 是给「图 + 摘要」并排用的,
   正文占满 1080 就是一行 120 多个字符,眼睛换行时会跳错行。 */
.woocommerce-Tabs-panel { max-width: 70ch; }

/* 排序下拉是全站唯一一个系统原生控件,不管它会显得整页只有这里没设计过。 */
.woocommerce .woocommerce-ordering select {
  font: inherit;
  font-size: .875rem;
  padding: .5rem 2rem .5rem .75rem;
  border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 10px;
  background: #fff;
  color: var(--wp--preset--color--contrast);
}

/* ── 售卖周期四态 ────────────────────────────────────────────────────────
   猫山王金只在这里出场 —— 它是状态色。注意是「金底 + 墨字」,
   反过来(米底 + 金字)对比度只有 1.9:1,不可读(HANDOFF §10)。 */
.kbe-banner {
  max-width: 1080px;   /* = 落地页的 --wrap,商城内容宽度也是它 */
  margin: 0 auto 2rem;
  padding: .9rem 1.1rem;
  background: var(--wp--preset--color--accent-5);
  border-left: 3px solid var(--wp--preset--color--accent-2);
  border-radius: 4px;
  font-weight: 500;
}

.kbe-status {
  margin: 0 0 1rem;
  color: var(--wp--preset--color--accent-3);
  font-size: .875rem;
}

/* 提醒按钮不能长得像「加入购物车」:那颗是行动,这颗是安慰。
   金底墨字,响度低一档,但仍然是一颗按钮。

   ⚠️ 选择器必须写这么长:Woo 的 `.woocommerce ul.products li.product .button`
   是 (0,4,3),短选择器压不过它,按钮会保持砖红 —— 看起来就跟「加入购物车」一样,
   于是「不能买」这件事在视觉上完全没传达出来。别为了好看把它简化掉。 */
.woocommerce ul.products li.product a.button.kbe-remind,
.woocommerce div.product a.button.kbe-remind,
.woocommerce a.button.kbe-remind,
a.button.kbe-remind {
  background: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--contrast);
  display: inline-block;
}

/* 表单控件对齐圆角与描边,免得结账页混着两种视觉语言。 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 10px;
  background: #fff;
}