/*
 * AmpParts Supply — additions for markup the static site never had.
 *
 * Loaded after style.css (inc/setup.php enqueues it with 'ampparts' as a
 * dependency), so nothing here may restate a rule the static CSS already owns:
 * if the static site renders the element, style.css is the only source of truth.
 *
 * Five things live here and nothing else:
 *   1. .pager a        — the server-side twin of the JS-generated .pager button
 *   2. form/notice     — WooCommerce's own controls, reached only under .woocommerce
 *   3. account table   — WooCommerce's order table cells, same scope
 *   4. .colorpick      — the colour swatch row variable.php renders
 *   5. .addtocart      — the amplifiedparts-style buy row (see section 6)
 */

/* ---------------------------------------------------------------------------
 * 1. Server-side pagination
 *
 * gc_pager() renders real <a> elements where app.js renders <button>s, because
 * each catalogue page has to be a crawlable URL. These declarations mirror
 * style.css lines 365-369 (.pager button, :hover, .on, [disabled]) exactly, so
 * the two pager implementations are pixel-identical.
 * ------------------------------------------------------------------------ */

.pager a {
	min-width: 30px;
	height: 28px;
	border: 1px solid var(--line);
	background: #fff;
	cursor: pointer;
	font-size: 12px;
	color: var(--ink);
	/* the button defaults the <a> does not get */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	text-decoration: none;
}

.pager a:hover {
	border-color: var(--orange);
	color: var(--red);
	text-decoration: none;
}

.pager a.on {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
	font-weight: bold;
}

.pager a.on:hover {
	color: #fff;
}

/* The edge states app.js expresses as <button disabled>. */
.pager a[aria-disabled="true"] {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 2. WooCommerce form controls
 *
 * Every selector is prefixed with .woocommerce, so no rule here can match an
 * element the static templates render.
 * ------------------------------------------------------------------------ */

.woocommerce form .form-row {
	margin: 0 0 10px;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	color: var(--ink);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty {
	width: 100%;
	padding: 5px 7px;
	border: 1px solid var(--line);
	background: #fff;
	font: inherit;
	font-size: 12px;
	color: var(--ink);
	border-radius: 0;
}

.woocommerce .quantity input.qty {
	width: 60px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--orange);
	outline: none;
}

.woocommerce form .form-row .required {
	color: var(--red);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 3. WooCommerce notices
 *
 * Mapped onto the .notice / .notice.info block style.css already defines, so a
 * WooCommerce message looks like every other notice on the site.
 * ------------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid #f0d9a8;
	background: #fdf6e6;
	color: #6b4d05;
	padding: 9px 11px;
	font-size: 12.5px;
	margin: 0 0 12px;
	list-style: none;
}

.woocommerce-info {
	border-color: #bcd6ee;
	background: #f0f6fc;
	color: #1d4a72;
}

.woocommerce-error {
	border-color: #eec4c4;
	background: #fdf0f0;
	color: #8a1f1f;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-error li {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 4. Account / order tables
 * ------------------------------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 6px 10px;
	font-size: 12.5px;
	border-bottom: 1px solid var(--line-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--orange-l);
	color: var(--red);
	font-weight: bold;
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 1px solid var(--line-2);
	padding: 7px 9px;
	text-align: start;
}

.woocommerce table.shop_table thead th {
	background: var(--bg);
	font-weight: bold;
	color: var(--ink);
}

/* ---------------------------------------------------------------------------
 * 5. Colour options (.colorpick)
 *
 * Markup the static site never had — printed by
 * woocommerce/single-product/add-to-cart/variable.php — so every rule is scoped
 * under .colorpick and inherits the static design tokens (square corners,
 * orange accent, 12–13px type) instead of inventing a new look.
 * ------------------------------------------------------------------------ */

.colorpick {
	margin: 0 0 11px;
}

.colorpick > label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	color: var(--muted);
}

.colorpick > label b {
	color: var(--ink);
}

.colorpick .swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.colorpick .swatch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 9px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	cursor: pointer;
	font: inherit;
}

.colorpick .swatch:hover {
	border-color: var(--orange);
}

.colorpick .swatch.on {
	border-color: var(--orange);
	background: var(--orange-l);
	box-shadow: inset 0 0 0 1px var(--orange);
}

.colorpick .sw-dot {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .18);
	background: var(--sw, #ccc);
}

.colorpick .sw-name {
	font-size: 12px;
	color: var(--ink);
	white-space: nowrap;
}

.colorpick .swatch.on .sw-name {
	font-weight: bold;
}

/* A colour that is out of stock stays selectable — the page still has to show
 * its picture and price — but it is visibly not the one to pick. */
.colorpick .swatch.is-off {
	opacity: .55;
}

.colorpick .swatch.is-off .sw-name {
	text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
 * 6. Add to cart (.btn-atc)
 *
 * Modelled on amplifiedparts.com's buy button, whose values were measured from
 * a rendered page (see amplifiedparts-add-to-cart-report.md):
 *
 *   flat fill, no border, no shadow, no gradient   -> kept exactly
 *   white label, sentence case, regular weight     -> kept (the reference weighs
 *                                                     400 where this site's own
 *                                                     .btn is bold, so the cart
 *                                                     button reads as its own
 *                                                     control)
 *   white "+" glyph before the label, ~4px gap     -> kept
 *   radius ~2px                                    -> var(--radius), the site token
 *   height 32px card / 49px detail                 -> 30px / 44px, scaled to this
 *                                                     theme's 13px base (the
 *                                                     reference's base is 14px)
 *
 * The reference's own blue (#148ce1) is used rather than the site orange, because
 * that contrast is what makes the button the single obvious action — the point of
 * the pattern. Both values are variables: to match the site palette instead,
 * change --atc / --atc-d here and nowhere else.
 *
 * HOVER IS A GUESS. The reference is Bootstrap 3 and its compiled CSS is behind a
 * bot challenge, so its real hover colour could not be read; --atc-d is the
 * measured blue darkened by the same ratio Bootstrap darkens its own.
 * ------------------------------------------------------------------------ */

:root {
	--atc: #148ce1;
	--atc-d: #1178c0;
}

.btn-atc {
	background: var(--atc);
	border-color: var(--atc);
	color: #fff;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
	gap: 4px;
	white-space: nowrap;
}

.btn-atc:hover,
.btn-atc:focus {
	background: var(--atc-d);
	border-color: var(--atc-d);
	color: #fff;
	text-decoration: none;
}

.btn-atc .atc-plus {
	font-size: 15px;
	font-weight: normal;
	line-height: 1;
}

.btn-atc[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

/* Detail page: the cart button takes a row of its own, near full width of the
 * buy box, with the inquiry action underneath it. The reference stacks them the
 * same way — quantity row, then button, then availability. */
.pdetail .buy-actions .btn-atc {
	flex: 1 1 100%;
	height: 44px;
	padding: 0 18px;
	font-size: 15px;
}

.pdetail .buy-actions .btn-atc .atc-plus {
	font-size: 17px;
}

/* Listing / category card: compact and content-hugging, first in the row. */
.card .btn-atc {
	height: 30px;
	padding: 0 11px;
	font-size: 12.5px;
	gap: 3px;
}

.card .btn-atc .atc-plus {
	font-size: 14px;
}

/* The card's controls, following the reference site's card layout: a short
 * "Qty: *" caption and the box on the first line, the buy button on the second.
 *
 * That layout is also the one that fits. A 4-up card in the 1000px container is
 * ~190px wide, leaving 170px of row, and "Quantity: [box] [+ Add to cart]" side by
 * side needs 196px in English. Giving the button its own line solves it and lets
 * the button be wide, which is what makes it easy to hit. flex:1 1 100% on both
 * children is what forces the break: each claims a whole line. */
.card .actions {
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.card .card-qty {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	/* 不再独占一行：Qty 右边要能坐下「颜色 / 型号」下拉 */
	flex: 0 1 auto;
	font-size: 12px;
	color: var(--ink);
}

.card .cq-label {
	white-space: nowrap;
	font-weight: bold;
}

/* The reference site's red required marker (Bootstrap 3's #d9534f). */
.card .cq-req {
	color: #d9534f;
	font-weight: bold;
}

.card .cq-input {
	width: 56px;
	height: 28px;
	padding: 0 7px;
	margin-left: 2px;
	border: 1px solid var(--line);
	background: #fff;
	font: inherit;
	font-size: 12px;
	color: var(--ink);
	text-align: left;
	border-radius: var(--radius);
}

.card .cq-input:focus {
	border-color: var(--orange);
	outline: none;
}

.card .actions .btn-atc {
	flex: 1 1 100%;
	height: 30px;
	padding: 0 12px;
	margin-left: 0;
	font-size: 12.5px;
}

.card .actions .btn-atc .atc-plus {
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * 7. Product page: gallery pictures under the description text
 *
 * The same images as the gallery above, printed below the Description tab's
 * prose (owner's request). Clicking one opens the page's lightbox — see the
 * delegated handler in assets/js/app.js, which survives the rebuild that
 * gc-colors.js does when another colour is picked.
 * ------------------------------------------------------------------------ */

/* One large picture per row, not a thumbnail strip (owner's request). The pane is
 * 1000px wide, so a square product photo would be 1000px tall if it filled the
 * row; capping at 620px keeps each one big and readable while the whole tab stays
 * scrollable. They are plain <img> — not links, and no lightbox. */
.descpics {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 16px 0 0;
}

.descpics .descpic {
	display: block;
	width: 100%;
	max-width: 620px;
	height: auto;
	padding: 10px;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: var(--radius);
}

/* ---------------------------------------------------------------------------
 * 8. Home rail: every product family open
 *
 * gc_rail_group() prints its header as .grp-head instead of the .grp-tog button
 * when expand_all is on, because there is nothing left to toggle. Same metrics
 * as .grp-tog so the rows still line up with the other rails; no cursor, no
 * hover highlight, no chevron.
 * ------------------------------------------------------------------------ */

.procate .grp-head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	position: relative;
}

/* ---------------------------------------------------------------------------
 * 9. Product page: the magnifier lens
 *
 * style.css scales the whole photograph on hover (.gallery .main:hover img).
 * That is switched off here and replaced by a circle that follows the cursor and
 * magnifies only what is under it — assets/js/gc-zoom.js drives its position,
 * background-size and background-position. style.css itself is a byte-for-byte
 * copy of the static site's stylesheet, so the override lives here.
 * ------------------------------------------------------------------------ */

.gallery .main:hover img {
	transform: none;
}

.gallery .main .zoomlens { display: none !important; }

.zoompanel {
	position: fixed;
	display: none;
	z-index: 9999;
	background-color: #fff;
	background-repeat: no-repeat;
	border: 1px solid var(--line);
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	pointer-events: none;
}

.zoompanel.on { display: block; }

/* Anything narrower than 641px is the phone layout: no hover, so no lens. */
@media (max-width: 640px) {
	.gallery .main .zoomlens {
		display: none !important;
	}
}

/* 商品卡上的「颜色 / 型号」下拉（Qty 右边） */
.card-vars { display: inline-flex; gap: 5px; align-items: center; flex: 0 1 auto; }
.card-vars .cv-select {
	max-width: 92px;
	height: 28px;
	padding: 0 4px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font: inherit;
	font-size: 11.5px;
	color: var(--ink);
}
.card-vars .cv-select:focus { border-color: var(--orange); outline: none; }

/* 价格梯度表：表头 "Price / unit"、"You save" 和下面的数字要右对齐到同一列。
   style.css 里只有 td.num 的规则，表头 th.num 是左对齐的，所以银色（服务端
   渲染的那张表）看起来"数字对不齐"。 */
table.data th.num{text-align:right}

/* ---------------------------------------------------------------- 商品卡：交互反馈 + 可选颜色 */
/* 悬停时整张卡片变蓝、抬起来一点（业主 2026-10-28：反馈要强一点） */
.card { transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.card:hover {
  background: #e8f2fd;
  border-color: #8fbde6;
  box-shadow: 0 8px 20px rgba(23, 92, 156, .18);
  transform: translateY(-2px);
}
.card:hover .thumb { background: #f4f9ff; border-bottom-color: #cfe2f5; }
.card:hover h3 a { color: #14507f; }

/* 「Colors Available:」 + 色点 */
.card-colors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.card-colors .cc-label { font-size: 11px; color: var(--muted); }
.card-colors .cc-dots { display: inline-flex; gap: 4px; align-items: center; }
.card-colors .cc-dot {
  width: 13px; height: 13px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--sw, #ccc); border: 1px solid rgba(0, 0, 0, .18); line-height: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card-colors .cc-dot:hover { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(23, 92, 156, .18); }
.card-colors .cc-dot.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14507f; }

/* ---------------------------------------------------------------- 方案 A：吸底购买条 */
.stickybuy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; background: #fff;
  border-top: 1px solid #dbe6f2; box-shadow: 0 -6px 18px rgba(0, 0, 0, .12);
}
.stickybuy[hidden] { display: none; }
.stickybuy .sb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stickybuy .sb-name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybuy .sb-color { font-size: 11.5px; color: var(--muted); }
.stickybuy .sb-price { font-size: 20px; font-weight: bold; color: var(--price); white-space: nowrap; }
.stickybuy .sb-price .price-old { font-size: 12px; font-weight: normal; }
.stickybuy .sb-qty { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.stickybuy .sb-qty input { width: 64px; padding: 6px 8px; border: 1px solid var(--line); text-align: center; font: inherit; }
.stickybuy .sb-add { min-width: 170px; justify-content: center; }
body.sticky-buy-on { padding-bottom: 72px; }

@media (max-width: 720px) {
  .stickybuy { gap: 10px; padding: 8px 10px; }
  .stickybuy .sb-name { font-size: 12px; }
  .stickybuy .sb-price { font-size: 17px; }
  .stickybuy .sb-qty { display: none; }
  .stickybuy .sb-add { min-width: 0; flex: 0 0 auto; padding: 9px 14px; font-size: 12.5px; }
}