/*
Theme Name: TroveJoy Shell
Description: 极简 WordPress 主题,复用 TroveJoy 前台的 header/footer 与同一份 Astro CSS,让 WooCommerce 的购物车/结账/账户页和静态站看起来是同一个店。不改 Woo 的任何功能,只统一外壳。
Version: 1.0
Requires at least: 6.5
Tested up to: 7.1
Author: Cooblink
Text Domain: astro-shell
*/

/* ─────────────────────────────────────────────────────────────
   这里只做"桥接":把 WooCommerce 自己的表面映射到 TroveJoy 的设计令牌。
   令牌本身来自 Astro 那份 CSS(functions.php 运行时 glob 加载),
   所以**改设计只改 Astro,这个文件不用动**。

   刻意不逐像素重写 Woo 的组件 —— 那种东西每次 Woo 升级都会碎。
   目标是"不突兀",不是"像素级一致"。

   ⚠️ 已知坑(踩过的):
   - Gutenberg 版购物车按钮用的是 `wp-block-button__link`,不是
     `wc-block-components-button`;空车推荐位那几个按钮只吃前者。
   - 原生 <select> 与 <option> 要分别写,否则下拉展开时是系统白底。
   ───────────────────────────────────────────────────────────── */

body.woocommerce-page,
body.woocommerce,
body {
  background: var(--paper, #f7f5f1);
  color: var(--ink, #14130f);
  font-family: var(--font-text, ui-sans-serif, system-ui, sans-serif);
}

.astro-shell-main {
  inline-size: min(100%, 1560px);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter, 1.5rem) clamp(3rem, 7vw, 6rem);
  min-block-size: 55vh;
}

/* Gutenberg 的 alignwide/alignfull 会用自己的负边距"破框",算出来的左右留白
   和 header/footer 的 --gutter 对不上,页面看着差一点点。收回来。 */
.astro-shell-main .alignwide,
.astro-shell-main .alignfull {
  max-inline-size: 100%;
  inline-size: auto;
  margin-inline: 0;
}

.astro-shell-main h1,
.astro-shell-main h2,
.woocommerce-products-header__title,
.wc-block-cart__empty-cart__title,
.astro-shell-main .wp-block-heading {
  font-family: var(--font-wide, inherit);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink, #14130f);
}
.astro-shell-main h1 { font-size: clamp(1.9rem, 4.5vw, 3.4rem); }

/* ── 按钮:统一成 Astro 的 .btn ────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--ink, #14130f) !important;
  color: var(--paper, #f7f5f1) !important;
  border-radius: 0 !important;
  border: 1px solid var(--ink, #14130f) !important;
  font-family: var(--font-text, inherit) !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  font-weight: 500;
  padding: 0.95rem 1.65rem !important;
  transition: background 140ms ease, border-color 140ms ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--found, #b23a10) !important;
  border-color: var(--found, #b23a10) !important;
}

/* 次要动作(继续购物、应用优惠码)不该和主按钮抢注意力 */
.wc-block-components-button--outlined,
.woocommerce a.button.wc-backward {
  background: transparent !important;
  color: var(--ink, #14130f) !important;
}

/* ── 表面与描边 ───────────────────────────────────────────────── */
.woocommerce table.shop_table,
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-sidebar,
.wc-block-cart__sidebar {
  border-color: var(--rule, #dcd6c9) !important;
  background: var(--paper-2, #efebe3);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.wc-block-cart-items__row,
.wc-block-components-totals-item {
  border-color: var(--rule, #dcd6c9) !important;
}

/* 商品缩略图:和 Astro 的画框一样,白底融进纸面 */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.woocommerce table.shop_table img {
  mix-blend-mode: multiply;
  background: transparent;
}

/* ── 表单 ─────────────────────────────────────────────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-select__container select,
.wc-block-components-textarea {
  border-radius: 0 !important;
  border: 1px solid var(--rule, #dcd6c9) !important;
  background: var(--paper, #f7f5f1) !important;
  color: var(--ink, #14130f) !important;
  font-family: var(--font-text, inherit) !important;
}
/* <option> 要单独写 —— 只给 <select> 上色的话,展开的那一层还是系统白底 */
.woocommerce form .form-row select option,
.wc-block-components-select__container select option {
  background: var(--paper, #f7f5f1);
  color: var(--ink, #14130f);
}
.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus {
  outline: 2px solid var(--found, #b23a10);
  outline-offset: 1px;
}
.wc-block-components-text-input label,
.woocommerce form .form-row label {
  color: var(--ink-2, #56524a) !important;
}

/* ── Woo 的提示条 ─────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
  border-color: var(--found, #b23a10) !important;
  background: var(--paper-2, #efebe3) !important;
  color: var(--ink, #14130f) !important;
  border-radius: 0 !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--found, #b23a10) !important; }

/* ── 价格与合计:必须是高对比元素 ────────────────────────────── */
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
  font-variant-numeric: tabular-nums;
  color: var(--ink, #14130f) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.35rem;
  font-weight: 300;
}

/* 商品名 */
.wc-block-components-product-name,
.woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--font-text, inherit) !important;
  font-weight: 300 !important;
  color: var(--ink, #14130f) !important;
  letter-spacing: -0.018em;
}

/* ── 数量控件 ─────────────────────────────────────────────────── */
.wc-block-components-quantity-selector {
  border: 1px solid var(--rule, #dcd6c9) !important;
  border-radius: 0 !important;
  background: var(--paper, #f7f5f1);
}
.wc-block-components-quantity-selector__button { color: var(--ink-2, #56524a) !important; }

/* ── 链接 ─────────────────────────────────────────────────────── */
.astro-shell-main a { color: var(--ink, #14130f); }
.astro-shell-main a:hover { color: var(--found, #b23a10); }

/* ── 结账进度/步骤标题 ───────────────────────────────────────── */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--font-text, inherit) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink, #14130f) !important;
}
.wc-block-components-checkout-step__description {
  color: var(--ink-2, #56524a) !important;
}

/* WordPress 管理条会顶掉 sticky header 的定位,登录时按它的高度让位 */
body.admin-bar .masthead { inset-block-start: 32px; }
@media (max-width: 782px) {
  body.admin-bar .masthead { inset-block-start: 46px; }
}