/*
Theme Name: TopToyFun
Theme URI: https://www.toptoyfun.com/
Author: TopToyFun
Description: 从 Toptoyfun 静态设计稿还原的 WooCommerce 主题：挤压玩具商店，含巨型菜单、变体商品详情页与包装阶梯。
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toptoyfun
Tags: e-commerce, woocommerce, custom-colors
WC requires at least: 9.0
WC tested up to: 11.0
*/

/* 这里只放主题级的东西。设计稿的色板与重置在 assets/css/base.css，
   由 functions.php 在「当前页没有专属模板样式表」时才加载 ——
   各模板样式表自带一份重置，而且取值不一样（博客页故意保留链接下划线），
   在这里全局铺一遍会把那些差异抹掉。 */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- WooCommerce 兼容层 ----------
   设计稿没有画这些控件，但 WooCommerce 会插进来：提示条、数量框、变体表单。
   这里把它们对齐到设计稿的粗描边风格，而不是让 WooCommerce 默认样式漏出来。 */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 auto 22px;
  max-width: 1180px;
  padding: 14px 18px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--mint);
  box-shadow: 5px 5px 0 rgba(39, 32, 37, .14);
  font-weight: 800;
  list-style: none;
}

.woocommerce-error { background: var(--pink); }
.woocommerce-info { background: var(--sky); }

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* WooCommerce 用 ::before 塞了一个图标字体的字形进提示条，字体没加载时会显示成
   一个方块。设计稿里这些提示条是纯文字的，去掉。 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
  content: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding-left: 18px;
}

.quantity input[type="number"] {
  width: 84px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  font-weight: 900;
  text-align: center;
}

/* 详情页把 WooCommerce 的原生变体表单藏起来，只留隐藏的 select 承接选择结果，
   界面交给设计稿的色板和包装卡片。表单本身不能 display:none —— WooCommerce 的
   变体脚本要读它的尺寸来判断可用性，所以搬到可视区域外。 */
.ttf-native-variations {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* WooCommerce 自带的 woocommerce-general.css 用 `.woocommerce a.button` 这种
   两级选择器给按钮上灰底圆角，比设计稿的 `.button` 优先级高，会把详情页和
   内容页的按钮全压成 WooCommerce 的默认样子。设计稿里 .button 是有描边和硬阴影的
   胶囊按钮，这里按同样的选择器强度重新声明，把它压回去。 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 1000;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--hot);
  cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--ink);
  color: var(--white);
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--hot);
}

.woocommerce a.button.secondary,
.woocommerce button.button.secondary {
  background: var(--white);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

/* 类名撞车的兜底：设计稿的购物车抽屉用 .cart-subtotal 做一行 flex（左文字右金额），
   而 WooCommerce 把同一个类名挂在结账表、购物车合计表、订单详情表的 <tr> 上。
   抽屉的样式表是全站加载的，撞上之后那些 <tr> 会变成 flex 容器，
   里面的 th/td 被 blockify，金额就对不齐列了。凡是表格里的行，钉回表格显示类型。 */
tr.cart-subtotal,
tr.order-total,
tr.cart-discount,
tr.shipping,
tr.fee,
tr.tax-rate {
  display: table-row;
}

tr.cart-subtotal > th,
tr.cart-subtotal > td,
tr.order-total > th,
tr.order-total > td,
tr.cart-discount > th,
tr.cart-discount > td,
tr.shipping > th,
tr.shipping > td,
tr.fee > th,
tr.fee > td,
tr.tax-rate > th,
tr.tax-rate > td {
  display: table-cell;
}