/* AUTOBOSS Taobao Detail 2.0 – shared tokens and components.
   Typography, greys, radii and spacing are the values measured from the archived 2025 item.taobao.com /
   detail.tmall.com pages (see project artifacts/tb2025). Colors come from the chosen scheme (inline vars).
   Device files: desktop.css (≥ desktop breakpoint), tablet.css, mobile.css; wide.css is shared by tablet+desktop. */

.abtd, .abtd-sheet, .abtd-viewer {
	--abtd-text: rgba(9, 9, 10, .92);
	--abtd-sub: rgba(9, 9, 10, .48);
	--abtd-weak: rgba(9, 9, 10, .24);
	--abtd-line: rgba(31, 31, 51, .1);
	--abtd-split: #ebebeb;
	--abtd-fill: rgba(31, 31, 51, .04);
	--abtd-fill-2: #f7f7f7;
	--abtd-green: #00a67c;
	--abtd-top: 0px;
	--abtd-font: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
	--abtd-num: "Inter", "Inter V", "SF Pro Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
	color: var(--abtd-text);
	font-family: var(--abtd-font);
	font-size: 14px;
	line-height: 22px;
	-webkit-font-smoothing: antialiased;
}
.abtd *, .abtd *::before, .abtd *::after, .abtd-sheet *, .abtd-sheet *::before, .abtd-sheet *::after { box-sizing: border-box; }
/* Zero-specificity resets so component classes always win over them and over theme element styles. */
:where(.abtd, .abtd-sheet, .abtd-viewer) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; letter-spacing: normal; text-transform: none; min-height: 0; box-shadow: none; border-radius: 0; line-height: inherit; }
:where(.abtd, .abtd-sheet) img { max-width: 100%; height: auto; display: block; }
:where(.abtd, .abtd-sheet) :is(h1, h2, h3, p, ul, dl, dd, figure) { margin: 0; padding: 0; font-family: inherit; letter-spacing: 0; text-transform: none; }
:where(.abtd, .abtd-sheet) ul { list-style: none; }
.abtd label, .abtd input, .abtd legend, .abtd-sheet label, .abtd-sheet input, .abtd-sheet legend { font-family: inherit; }
.abtd :focus-visible, .abtd-sheet :focus-visible { outline: 2px solid var(--abtd-text); outline-offset: 2px; }
/* Text fields always match :focus-visible, so a click drew the ring above, tinted by Blocksy's Customizer form focus
   colour (palette 6). Fields keep only the caret; buttons, links and options keep the keyboard ring. */
:is(.abtd, .abtd-sheet, .abtd-search) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus { outline: none; }
.abtd .abtd-qty input:focus { border-color: var(--abtd-line); background-color: #fff; }
.abtd .abtd-icon, .abtd-sheet .abtd-icon { width: 20px; height: 20px; flex: none; }
.abtd [hidden], .abtd-sheet [hidden] { display: none !important; }
/* Scroll lock on the root only: overflow:hidden on body would make it a scroll container, and the sticky purchase
   panel would then stick to body (which never scrolls) and jump back to its place in the flow behind the popup. */
html.abtd-lock { overflow: hidden; }
/* The same holds for every other scroll lock that can open over this page (side cart absc-locked, chat abch-lock,
   header abhf-lock, Blocksy panels): they all lock the root too, so body is kept non-scrolling here. :root raises
   the weight above their `html.x-lock body` rules (one of which is !important). */
:root body.abtd-page { overflow: clip visible !important; }
body.abtd-hide-floating .ct-floating-bar, body.abtd-hide-floating .ct-back-to-top { display: none !important; }
/* The floating bar's container (.ct-drawer-inner in the "end" drawer canvas) becomes an invisible fixed layer at the
   bottom once Blocksy activates the bar on scroll, and would swallow clicks meant for our purchase bar. */
body.abtd-hide-floating .ct-drawer-canvas[data-location="end"] > .ct-drawer-inner:has(> .ct-floating-bar) { display: none !important; }
body.abtd-hide-floating .ct-drawer-canvas[data-floating-bar] > .ct-drawer-inner { pointer-events: none !important; }
/* The "end" canvas stays in flow below the footer and reserves the bar's height (--floating-bar-height, 70px from
   Blocksy's floating cart) even though the bar is hidden here, leaving an empty strip under the footer. Mobile and
   tablet reserve our own fixed purchase bar there instead, so it does not cover the footer's last row. */
body.abtd-hide-floating .ct-drawer-canvas[data-location="end"] { --floating-bar-height: 0px; --floating-bar-parent-height: 0px; }

/* Break out of the theme content container: the layout owns the full viewport width like item.taobao.com. */
.abtd { width: calc(100vw - var(--abtd-sbw, 0px)); margin-left: calc(50% - 50vw + var(--abtd-sbw, 0px) / 2); max-width: none; }

/* ---------- gallery ---------- */
.abtd-gallery { position: relative; min-width: 0; }
.abtd-thumb-rail { display: contents; }
.abtd-thumb-scroll { display: none; }
.abtd-stage { position: relative; overflow: hidden; }
.abtd-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; width: 100%; height: 100%; }
.abtd-track::-webkit-scrollbar { display: none; }
.abtd-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.abtd-slide img { width: 100%; height: 100%; object-fit: contain; }
.abtd-stage-params { position: absolute; inset: 0; z-index: 2; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 24px 12px; padding: 32px; background: var(--abtd-fill-2); }
.abtd-stage-params > .is-fit-off { display: none; }
.abtd-stage-params div { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
/* Values wrap to two lines instead of a one-line ellipsis; the full row is in the title and in "View all". */
.abtd-stage-params :is(b, span) { display: -webkit-box; max-width: 100%; overflow: hidden; overflow-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.abtd-stage-params b { font-size: 16px; font-weight: 600; line-height: 22px; }
.abtd-stage-params span { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--abtd-sub); }
.abtd-stage-params .abtd-stage-all { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 2px; height: 36px; margin-top: 4px; padding: 0 12px 0 16px; border-radius: 18px; background: #fff; font-size: 14px; line-height: 36px; color: var(--abtd-text); }
.abtd-stage-params .abtd-stage-all .abtd-icon { width: 14px; height: 14px; }
.abtd-thumb { display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; background: #fff; border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
.abtd-thumb[aria-selected="true"] { border-color: var(--abtd-accent); }
.abtd-thumb img { width: 68px; height: 68px; object-fit: cover; border-radius: 10px; background: rgba(31, 31, 51, .04); }
.abtd-thumb:hover img { opacity: .92; }
.abtd-thumb-other { flex-direction: column; gap: 2px; background: rgba(31, 31, 51, .06); color: var(--abtd-weak); font-size: 12px; font-weight: 500; line-height: 16px; border: 0; border-radius: 10px; }
.abtd-thumb-other:hover, .abtd-thumb-other[aria-selected="true"] { background: var(--abtd-soft); color: var(--abtd-price); }
.abtd-thumb-other .abtd-icon { width: 22px; height: 22px; }
.abtd-counter { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 0 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); color: #fff; font-size: 12px; line-height: 20px; pointer-events: none; }
.abtd-counter b { font-weight: 600; }
.abtd-switch { display: flex; align-items: center; width: max-content; margin: 16px auto 0; padding: 4px; gap: 4px; border-radius: 20px; background: var(--abtd-fill); }
.abtd-switch button { padding: 5px 16px; border-radius: 16px; font-size: 14px; line-height: 22px; }
.abtd-switch button:hover, .abtd-switch button.is-on { background: #fff; }
.abtd-switch button.is-on { font-weight: 500; }
.abtd.is-params-view .abtd-stage-params { display: grid !important; }

/* ---------- price (block2) ---------- */
.abtd-price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 8px; }
.abtd-price-now { display: inline-flex; align-items: flex-end; color: var(--abtd-price); font-family: var(--abtd-num); font-weight: 600; white-space: nowrap; }
.abtd-cur { margin-right: 1px; font-size: 16px; line-height: 20px; }
.abtd-int { font-size: 28px; line-height: 28px; }
.abtd-dec { font-size: 16px; line-height: 20px; }
.abtd-dash { padding: 0 4px; font-size: 16px; line-height: 20px; }
.abtd-price-was { color: var(--abtd-sub); font-size: 14px; line-height: 20px; }
/* couponInfoArea: 12px below the price, label 14/22 + 8px, chips 26px tall with 4px radius. */
.abtd-coupon { display: flex; align-items: flex-start; margin-top: 12px; line-height: 26px; }
.abtd-coupon-label { flex: none; margin-right: 8px; color: var(--abtd-price); font-size: 14px; line-height: 26px; }
.abtd-coupon-list { display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; cursor: pointer; }
.abtd-coupon-go { display: flex; align-items: center; justify-content: center; width: 24px; height: 26px; margin-left: auto; color: var(--abtd-sub); }
.abtd-coupon-go .abtd-icon { width: 12px; height: 12px; }
.abtd-coupon-go:hover { color: var(--abtd-price); }

/* ---------- offers: coupon tickets, red packets, tags — a background (shape or image) with text laid over it ---------- */
.abtd-offer-chip { position: relative; display: inline-flex; align-items: center; gap: 3px; flex: none; height: 26px; padding: 0 8px; border-radius: 4px; background: var(--abtd-soft) center / cover no-repeat; color: var(--abtd-price); font-size: 14px; line-height: 26px; white-space: nowrap; }
.abtd-offer-chip b { font-family: var(--abtd-num); font-weight: 600; }
/* Coupon ticket: semicircle notches cut into both ends. */
.abtd-offer-chip.is-coupon, .abtd-offer-card.is-coupon, .abtd-offer-card.is-packet { -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 4px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; }
.abtd-offer-chip.is-coupon { padding: 0 10px; background-color: color-mix(in srgb, var(--abtd-accent) 14%, #fff); }
/* Red packet: red envelope with a gold seal. */
.abtd-offer-chip.is-packet, .abtd-offer-card.is-packet { background-color: #f5222d; background-image: linear-gradient(100deg, #ff4d4f, #e3162f); color: #ffe7b0; }
.abtd-offer-chip.has-bg, .abtd-offer-card.has-bg { background-color: transparent; }
.abtd-packet-ico { position: relative; flex: none; width: 12px; height: 15px; border-radius: 2px; background: linear-gradient(#ff6b5f, #d9001b); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .6); }
.abtd-packet-ico::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 2px 2px 50% 50%; background: #ff8a7a; }
.abtd-packet-ico::after { content: ""; position: absolute; left: 50%; top: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #ffd27a; }
.abtd-offer-list { margin: 4px 0 12px; }
.abtd-offer-card { display: flex; align-items: center; min-height: 76px; margin: 0 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--abtd-accent) 12%, #fff) center / cover no-repeat; color: var(--abtd-price); }
.abtd-offer-card.is-tag { background-color: var(--abtd-fill-2); color: var(--abtd-text); }
.abtd-offer-card.is-coupon, .abtd-offer-card.is-packet { -webkit-mask: radial-gradient(circle 6px at 92px 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 92px 100%, transparent 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 6px at 92px 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 92px 100%, transparent 97%, #000) bottom / 100% 51% no-repeat; }
.abtd-offer-amt { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; width: 92px; align-self: stretch; }
.abtd-offer-amt b { font-family: var(--abtd-num); font-size: 22px; font-weight: 700; line-height: 28px; }
.abtd-offer-amt .abtd-icon { width: 22px; height: 22px; }
.abtd-offer-amt .abtd-packet-ico { width: 18px; height: 22px; }
.abtd-offer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 8px 10px 4px; }
.abtd-offer-info strong { font-size: 15px; font-weight: 600; line-height: 22px; }
.abtd-offer-info span { font-size: 12px; line-height: 18px; opacity: .8; }
.abtd-offer-btn { flex: none; height: 28px; margin-right: 12px; padding: 0 12px !important; border-radius: 14px !important; background: var(--abtd-cart) !important; color: var(--abtd-on-cart) !important; font-size: 13px; font-weight: 600; line-height: 28px; transition: opacity .15s; }
.abtd-offer-card.is-packet .abtd-offer-btn { background: linear-gradient(#fff6d8, #ffe08a) !important; color: #d9001b !important; }
.abtd-offer-btn.is-done { opacity: .6; }

/* ---------- title (block1) ---------- */
.abtd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-bottom: 6px; font-size: 13px; line-height: 20px; color: var(--abtd-sub); }
.abtd-crumbs a { color: inherit; text-decoration: none; }
.abtd-crumbs a:hover { color: var(--abtd-text); text-decoration: underline; }
.abtd-crumbs a:last-child { color: var(--abtd-text); }
.abtd-block-title { display: flex; align-items: flex-start; gap: 12px; }
.abtd-title { flex: 1; min-width: 0; font-size: 20px; font-weight: 600; line-height: 28px; color: var(--abtd-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.abtd-points { margin-top: 8px; display: grid; gap: 2px; font-size: 14px; color: var(--abtd-sub); }
.abtd-points li::before { content: "·"; margin-right: 6px; }
.abtd-share { display: flex; color: var(--abtd-sub); }

/* ---------- info rows (delivery / guarantee / pay) ---------- */
.abtd-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font-size: 14px; line-height: 22px; color: var(--abtd-text); }
.abtd-row-icon { display: flex; flex: none; color: var(--abtd-text); }
.abtd-row-icon .abtd-icon { width: 18px; height: 18px; }
.abtd-row-value { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.abtd-row > .abtd-icon-chevron { width: 12px; height: 12px; color: var(--abtd-sub); transition: color .15s; }
.abtd-row[data-abtd-open]:hover > .abtd-icon-chevron, .abtd-row[data-abtd-open]:hover .abtd-row-value > span:last-child { color: var(--abtd-price); }
.abtd-sep { display: inline-block; width: 1px; height: 12px; margin: 0 7.5px; background: var(--abtd-line); transform: translateY(1px); }
.abtd-eta { color: var(--abtd-green); }

/* ---------- SKU ---------- */
.abtd-form { margin: 0; }
.abtd-dim { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.abtd-dim-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.abtd-dim legend { float: left; padding: 0; margin: 0; font-size: 14px; line-height: 22px; color: var(--abtd-sub); }
.abtd-bigmode { display: flex; align-items: center; gap: 4px; font-size: 14px; color: rgba(0, 0, 0, .52); }
.abtd-bigmode:hover, .abtd-bigmode[aria-pressed="true"] { color: var(--abtd-price); }
.abtd-bigmode .abtd-icon { width: 16px; height: 16px; }
.abtd-opts { clear: both; display: flex; flex-wrap: wrap; }
.abtd-opt { position: relative; max-width: calc(100% - 8px); margin: 0 8px 12px 0; cursor: pointer; }
.abtd-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.abtd-opt > span { display: flex; align-items: center; min-width: 48px; min-height: 40px; padding: 0 12px; border: 1px solid var(--abtd-line); border-radius: 8px; background: #fff; font-size: 14px; line-height: 22px; }
.abtd-opt.has-img > span { padding-left: 4px; }
.abtd-opt img { width: 32px; height: 32px; margin-right: 8px; border-radius: 4px; background: rgba(0, 0, 0, .03); object-fit: contain; }
.abtd-opt em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abtd-opt > span { transition: border-color .15s, color .15s; }
.abtd-opt input:checked + span { border-color: var(--abtd-accent); color: var(--abtd-price); }
@media (hover: hover) { .abtd-opt:hover > span { border-color: var(--abtd-accent); color: var(--abtd-price); } }
.abtd-opt input:focus-visible + span { outline: 2px solid var(--abtd-text); outline-offset: 2px; }
.abtd-opt.is-disabled { cursor: not-allowed; }
.abtd-opt.is-disabled > span, .abtd-opt.is-disabled:hover > span { opacity: .3; border-color: rgba(31, 31, 51, .3); color: var(--abtd-text); }
.abtd-dim.is-missing legend { color: #e02020; }
.abtd-dim.is-big .abtd-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.abtd-dim.is-big .abtd-opt { margin: 0; max-width: none; }
.abtd-dim.is-big .abtd-opt > span { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.abtd-dim.is-big .abtd-opt img { width: 100%; height: auto; aspect-ratio: 1; margin: 0; border-radius: 7px 7px 0 0; }
.abtd-dim.is-big .abtd-opt em { padding: 4px 8px; text-align: center; }

.abtd-qty-row { margin-top: 12px; }
.abtd-qty-label { display: block; margin: 0 0 12px; font-size: 14px; line-height: 22px; color: var(--abtd-sub); }
.abtd-qty-line { display: flex; align-items: center; min-width: 0; }
/* One 40px row: both buttons and the field are stretched to the same box, so theme or UA input metrics (iOS number
   inputs, theme min-heights) cannot push one part off the line. */
.abtd-qty { display: grid; grid-template-columns: 40px 40px 40px; align-items: stretch; height: 40px; background: #fff; }
.abtd .abtd-qty > * { box-sizing: border-box; height: 40px; min-height: 0; max-height: 40px; margin: 0; vertical-align: top; }
.abtd-qty button { display: flex; align-items: center; justify-content: center; width: 40px; padding: 0; border: 1px solid var(--abtd-line); color: var(--abtd-text); line-height: 1; }
.abtd-qty button:first-child { border-radius: 8px 0 0 8px; }
.abtd-qty button:last-child { border-radius: 0 8px 8px 0; }
.abtd-qty button:hover:not(:disabled) { background: rgba(0, 0, 0, .04); }
.abtd-qty button:disabled { color: var(--abtd-sub); cursor: not-allowed; }
.abtd-qty button:disabled svg { opacity: .3; }
.abtd-qty input { width: 40px; min-width: 40px; height: 40px; margin: 0; padding: 0; line-height: 38px; -webkit-appearance: none; appearance: textfield; border: 0; border-top: 1px solid var(--abtd-line); border-bottom: 1px solid var(--abtd-line); border-radius: 0; background: #fff; box-shadow: none; text-align: center; font-family: var(--abtd-num); font-size: 14px; font-weight: 600; color: var(--abtd-text); -moz-appearance: textfield; }
.abtd-qty input::-webkit-inner-spin-button, .abtd-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.abtd-qty-tip { margin-left: 12px; font-size: 14px; color: var(--abtd-sub); }
.abtd-form-msg { margin: 8px 0 0; color: #e02020; font-size: 14px; }
.abtd-form-msg:empty { display: none; }
.abtd-sheet-only { display: none !important; }

/* ---------- buttons (Actions) ---------- */
.abtd .abtd-btn, .abtd-sheet .abtd-btn { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; height: 48px; padding: 0 8px; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 24px; white-space: nowrap; }
.abtd .abtd-btn::after, .abtd-sheet .abtd-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; transition: background-color .15s; pointer-events: none; }
@media (hover: hover) { .abtd .abtd-btn:hover::after, .abtd-sheet .abtd-btn:hover::after { background: rgba(255, 255, 255, .24); } }
.abtd .abtd-btn:active::after, .abtd-sheet .abtd-btn:active::after { background: rgba(0, 0, 0, .08); }
.abtd .abtd-btn:disabled::after, .abtd .abtd-btn.is-off::after { display: none; }
.abtd .abtd-btn.is-cart, .abtd-sheet .abtd-btn.is-cart { background: var(--abtd-cart); color: var(--abtd-on-cart); }
.abtd .abtd-btn.is-buy, .abtd-sheet .abtd-btn.is-buy { background: var(--abtd-buy); color: var(--abtd-on-buy); }
.abtd .abtd-btn.is-off { background: var(--abtd-fill); color: var(--abtd-sub); cursor: not-allowed; }
.abtd-foot-btns, .abtd-sheet-actions { display: flex; flex: 1; min-width: 0; }
.abtd-foot-btns .abtd-btn:first-child, .abtd-sheet-actions .abtd-btn:first-child { border-radius: 12px 0 0 12px; }
.abtd-foot-btns .abtd-btn:last-child, .abtd-sheet-actions .abtd-btn:last-child { border-radius: 0 12px 12px 0; }
.abtd-foot-btns .abtd-btn:only-child, .abtd-sheet-actions .abtd-btn:only-child { border-radius: 12px; }
.abtd.is-busy .abtd-btn { opacity: .7; pointer-events: none; }
.abtd .abtd-btn.is-adding, .abtd .abtd-btn.is-added { opacity: 1; gap: 8px; }
.abtd-btn.is-adding::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: abtd-spin .7s linear infinite; }
.abtd-btn.is-added::before { content: "✓"; flex: none; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .abtd-btn.is-adding::before { animation: none; } }
.abtd-foot-icons { display: flex; }
.abtd-foot-icon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: 8px; color: var(--abtd-text); font-size: 12px; line-height: 16px; text-decoration: none; }
.abtd-foot-icon .abtd-icon { width: 20px; height: 20px; margin-bottom: 2px; }
.abtd-foot-icon:hover { color: var(--abtd-price); }
.abtd-cart-count { position: absolute; top: 0; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--abtd-accent); color: var(--abtd-on-cart); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.abtd-cart-count[data-count="0"] { display: none; }

/* ---------- detail sections (left column) ---------- */
.abtd-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.abtd-sec-head h2 { flex: none; font-size: 20px; font-weight: 600; line-height: 28px; color: var(--abtd-text); }
.abtd-dot { margin: 0 6px; }
.abtd-sec-sub { flex: 1; min-width: 0; font-size: 14px; color: var(--abtd-sub); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.abtd-sec-more { display: flex; align-items: center; margin-left: auto; font-size: 14px; color: var(--abtd-sub); }
.abtd-sec-more .abtd-icon { width: 12px; height: 12px; }
.abtd-sec-more:hover { color: var(--abtd-price); }
.abtd-empty { padding: 16px; border-radius: 12px; background: var(--abtd-fill-2); color: var(--abtd-sub); text-align: center; font-size: 14px; }
/* Placeholders look like the real control (no dashed outline); only administrators see them. */

.abtd-comment { margin-bottom: 24px; }
.abtd-comment-who { display: flex; align-items: center; gap: 12px; }
.abtd-avatar { width: 42px; height: 42px; border: 1px solid var(--abtd-line); border-radius: 50%; }
.abtd-comment-who strong { display: block; font-size: 14px; font-weight: 500; line-height: 22px; }
.abtd-comment-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 20px; color: var(--abtd-sub); }
.abtd-comment-text { margin: 4px 0 0 54px; font-size: 14px; line-height: 22px; }
.abtd-stars { --r: 5; width: 60px; height: 11px; background: linear-gradient(90deg, var(--abtd-accent) calc(var(--r) * 20%), var(--abtd-line) 0); -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); }
.abtd-show-all { display: flex; justify-content: center; }
.abtd-pill-btn { height: 48px; padding: 0 24px; border: 1px solid var(--abtd-line) !important; border-radius: 24px !important; background: #fff !important; font-size: 16px !important; font-weight: 500; line-height: 48px !important; }
.abtd-pill-btn:hover { background: rgba(0, 0, 0, .04) !important; }

/* Specifications. Page: one grey panel of tiles (label over value, centred), three per row (two on phones),
   each on one line with an ellipsis so every row keeps one height; "View all" in the section head opens the sheet.
   Sheet: a label | value table with full values; labels have their own column and wrap between words. */
.abtd-params { container-type: inline-size; }
.abtd-params-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; padding: 20px 32px; border-radius: 12px; background: var(--abtd-fill-2); }
/* Each tile keeps a side margin, so long values stop short of their neighbours before the ellipsis. */
.abtd-params-tiles > div { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 8px; text-align: center; }
.abtd-params-tiles :is(b, span) { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.abtd-params-tiles b { font-size: 16px; font-weight: 600; line-height: 22px; }
.abtd-params-tiles span { margin-bottom: 4px; font-size: 13px; line-height: 18px; color: var(--abtd-sub); }
/* "View all N" pill: last row of the grey panel, only where wide.css / mobile.css find tiles folded away. */
.abtd-params-tiles > .abtd-params-all { display: inline-flex; grid-column: 1 / -1; justify-self: center; align-items: center; gap: 2px; height: 36px; padding: 0 12px 0 16px; border-radius: 18px; background: #fff; font-size: 14px; line-height: 36px; color: var(--abtd-text); }
.abtd-params-all .abtd-icon { width: 14px; height: 14px; }
.abtd-params-all:hover { color: var(--abtd-price); }
@container (max-width: 559px) {
	.abtd-params-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.abtd-params-list { display: grid; grid-template-columns: 1fr; margin: 0; }
.abtd-params-list div { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); column-gap: 16px; align-items: start; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--abtd-split); font-size: 14px; line-height: 22px; }
.abtd-params-list div:last-child { border-bottom: 0; }
.abtd-params-list dt { min-width: 0; margin: 0; color: var(--abtd-sub); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.abtd-params-list dd { min-width: 0; margin: 0; overflow-wrap: break-word; }

.abtd-rich { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.abtd-rich img { width: 100%; height: auto; margin: 0 auto; }
.abtd-rich > :first-child { margin-top: 0; }

.abtd-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.abtd-card a { display: flex; flex-direction: column; height: 100%; color: var(--abtd-text); text-decoration: none; border-radius: 20px; }
.abtd-card-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--abtd-fill-2); }
.abtd-card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.abtd-card-img::after { content: ""; position: absolute; inset: 0; background: transparent; transition: background-color .15s; }
.abtd-card a:hover .abtd-card-img::after { background: rgba(0, 0, 0, .08); }
.abtd-card-title { margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abtd-card-price { display: flex; align-items: baseline; color: var(--abtd-price); font-family: var(--abtd-num); font-weight: 600; }
.abtd-card-cur { font-size: 14px; }
.abtd-card-price b { font-size: 20px; line-height: 22px; font-weight: 600; }
.abtd-card-sold { margin-left: 8px; font-family: var(--abtd-font); font-size: 12px; font-weight: 400; color: var(--abtd-sub); }

/* ---------- floating ---------- */
.abtd-toast { position: fixed; left: 50%; top: 45%; z-index: 100000; transform: translate(-50%, -50%) scale(.94); max-width: 80vw; padding: 10px 18px; border-radius: 8px; background: rgba(0, 0, 0, .78); color: #fff; font-family: var(--abtd-font, sans-serif); font-size: 14px; line-height: 22px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .3s cubic-bezier(.32, .72, 0, 1); }
.abtd-toast.is-on { opacity: 1; transform: translate(-50%, -50%); }

/* ---------- overlays: sheets / drawers / viewer ----------
   Side-cart structure: the <dialog> is a full-screen layer whose background is the scrim; the panel moves with a
   transform. JS adds .is-open a frame after showModal() and removes it before close(), so opening and closing both
   animate. Curve: the iOS sheet curve used by Vaul. Durations come from the Style tab (--abtd-in / --abtd-out for
   phones, -w for tablet/desktop). */
.abtd-sheet, .abtd-viewer, .abtd-search { --abtd-ease-in: var(--abtd-spring, cubic-bezier(.25, .8, .25, 1)); --abtd-ease-out: var(--abtd-exit, cubic-bezier(.47, 0, .745, .715)); --abtd-in-now: var(--abtd-in, 670ms); --abtd-out-now: var(--abtd-out, 260ms); --abtd-scrim-in: min(320ms, var(--abtd-in-now)); }
.abtd-sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; overflow: clip; background: transparent; color: var(--abtd-text); font-family: var(--abtd-font); font-size: 14px; line-height: 22px; }
/* Scrim as a layer of its own: only its opacity animates (composited), never a full-screen repaint. */
.abtd-sheet::before, .abtd-viewer::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity var(--abtd-out-now) cubic-bezier(.4, 0, 1, 1); will-change: opacity; }
.abtd-viewer::before { background: #000; }
.abtd-sheet.is-open::before, .abtd-viewer.is-open::before { opacity: 1; transition: opacity var(--abtd-scrim-in) cubic-bezier(0, 0, .2, 1); }
.abtd-sheet[open] { display: flex; }
.abtd-sheet:not([open]), .abtd-viewer:not([open]), .abtd-search:not([open]) { display: none !important; }
.abtd-sheet::backdrop, .abtd-viewer::backdrop { background: transparent; }

/* Closed state carries the exit transition, open state the spring entrance. */
.abtd-sheet-box { position: relative; display: flex; flex-direction: column; background: #fff; overflow: hidden; transition: transform var(--abtd-out-now) var(--abtd-ease-out); will-change: transform; }
.abtd-sheet.is-open .abtd-sheet-box { transform: none; transition: transform var(--abtd-in-now) var(--abtd-ease-in); }
.abtd-sheet.is-dragging .abtd-sheet-box { transition: none; }
/* Released after a drag: the panel is already moving, so it leaves with a decelerating curve from where it is. */
.abtd-sheet.is-flung .abtd-sheet-box { transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
.abtd-sheet-head { position: relative; flex: none; display: flex; align-items: center; min-height: 56px; padding: 12px 56px 12px 20px; touch-action: none; }
.abtd-sheet .abtd-sku-head { touch-action: none; }
.abtd-sheet-head h2 { font-size: 16px; font-weight: 600; line-height: 24px; }
.abtd-handle { display: none; }
.abtd-sheet-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--abtd-sub); }
.abtd-sheet-x:hover { background: rgba(0, 0, 0, .04); color: var(--abtd-text); }
.abtd-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; }
.abtd-sheet-body h3 { margin: 12px 0 6px; font-size: 14px; font-weight: 600; }
.abtd-list { margin: 0 0 8px; padding-left: 18px; list-style: disc; }
.abtd-note { color: var(--abtd-sub); font-size: 12px; }
.abtd-service-list li { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--abtd-split); }
.abtd-service-list .abtd-icon { width: 18px; height: 18px; margin-top: 2px; }
.abtd-service-list p { margin-top: 2px; color: var(--abtd-sub); }
.abtd-reviews-full .comment-reply-title, .abtd-reviews-full h2 { font-size: 16px; margin: 12px 0 8px; }
.abtd-reviews-full ol.commentlist { list-style: none; margin: 0; padding: 0; }
.abtd-reviews-full ol.commentlist li { padding: 12px 0; border-bottom: 1px solid var(--abtd-split); }
.abtd-reviews-full textarea, .abtd-reviews-full input[type="text"], .abtd-reviews-full input[type="email"] { width: 100%; }
/* SKU sheet (phones): the one real form is moved in by JS. */
.abtd-sheet.is-sku .abtd-sheet-head { min-height: 0; padding: 0; }
.abtd-sheet.is-sku .abtd-sheet-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.abtd-sheet.is-sku .abtd-sheet-x { top: 22px; transform: none; z-index: 2; }
.abtd-sheet.is-sku .abtd-sheet-body { padding: 0; display: flex; flex-direction: column; }
.abtd-sheet .abtd-sku-slot, .abtd-sheet .abtd-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.abtd-sheet .abtd-sheet-only { display: flex !important; }
.abtd-sheet .abtd-sku-head { gap: 12px; align-items: flex-end; padding: 16px 56px 12px 16px; }
.abtd-sku-img { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; background: var(--abtd-fill-2); }
.abtd-sku-price .abtd-int { font-size: 24px; line-height: 26px; }
.abtd-sku-chosen { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--abtd-sub); }
.abtd-sheet .abtd-sku-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; overscroll-behavior: contain; scrollbar-width: none; }
.abtd-sheet .abtd-sku-body::-webkit-scrollbar { display: none; }
.abtd-sheet .abtd-form-msg { margin: 0 16px 8px; }
.abtd-sheet .abtd-sheet-actions { flex: none; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--abtd-split); }
.abtd-sheet .abtd-sheet-actions .abtd-btn { height: 44px; }
.abtd-sheet .abtd-sheet-actions .abtd-btn:first-child { border-radius: 12px 0 0 12px; }
.abtd-sheet .abtd-sheet-actions .abtd-btn:last-child { border-radius: 0 12px 12px 0; }
.abtd-sheet .abtd-sheet-actions .abtd-btn:only-child, .abtd-sheet[data-mode] .abtd-sheet-actions .abtd-btn { border-radius: 12px; }
.abtd-sheet[data-mode="cart"] .abtd-btn.is-buy, .abtd-sheet[data-mode="buy"] .abtd-btn.is-cart, .abtd-sheet[data-mode="quote"] .abtd-btn.is-cart { display: none; }

/* ---------- viewer ---------- */
.abtd-viewer { --abtd-in-now: var(--abtd-in-v, 510ms); --abtd-out-now: var(--abtd-out-v, 240ms); --abtd-ease-in: var(--abtd-spring-v, cubic-bezier(.25, .8, .25, 1)); position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: #fff; }
/* The current picture zooms out of / back into the gallery (FLIP transform set by JS); controls fade in after it. */
.abtd-viewer figure { transition: transform var(--abtd-out-now) cubic-bezier(.2, 0, 0, 1), opacity var(--abtd-out-now) ease; }
.abtd-viewer.is-open figure { transition: transform var(--abtd-in-now) var(--abtd-ease-in), opacity var(--abtd-in-now) ease; }
.abtd-viewer.is-prep figure { transition: none; }
.abtd-viewer-count, .abtd-viewer-x, .abtd-viewer-nav { opacity: 0; transition: opacity .16s ease; }
.abtd-viewer.is-open :is(.abtd-viewer-count, .abtd-viewer-x, .abtd-viewer-nav) { opacity: 1; transition-duration: .24s; transition-delay: .12s; }
.abtd-viewer-track { position: relative; display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.abtd-viewer-track::-webkit-scrollbar { display: none; }
.abtd-viewer figure { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; overflow: auto; }
.abtd-viewer figure img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.abtd-viewer figure.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.abtd-viewer figure.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.abtd-viewer-count { position: absolute; left: 50%; top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%); font-size: 14px; }
.abtd-viewer-x { position: absolute; right: 12px; top: calc(8px + env(safe-area-inset-top)); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; }
.abtd-viewer-nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; display: flex; align-items: center; justify-content: center; }
.abtd-viewer-nav.is-prev { left: 16px; }
.abtd-viewer-nav.is-next { right: 16px; }

/* Reduced motion: nothing slides or zooms; overlays cross-fade instead of appearing abruptly (Apple HIG). */
@media (prefers-reduced-motion: reduce) {
	.abtd :not(dialog, dialog *) { transition: none !important; animation: none !important; }
	.abtd-sheet, .abtd-viewer, .abtd-search { --abtd-in-now: 220ms; --abtd-out-now: 160ms; --abtd-scrim-in: 220ms; --abtd-ease-in: ease-out; --abtd-ease-out: ease-in; }
	.abtd-sheet .abtd-sheet-box, .abtd-search .abtd-search-box, .abtd-viewer figure { transform: none !important; opacity: 0; transition: opacity var(--abtd-out-now) ease-in !important; }
	.abtd-sheet.is-open .abtd-sheet-box, .abtd-search.is-open .abtd-search-box, .abtd-viewer.is-open figure { opacity: 1; transition: opacity var(--abtd-in-now) ease-out !important; }
}
.abtd.is-params-view .abtd-stage-params { animation: abtd-fade .2s ease-out; }
@keyframes abtd-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- module order + custom blocks ---------- */
.abtd-panel-scroll > .abtd-mod { order: var(--abtd-o, 0); }
.abtd-panel-scroll > .abtd-form { order: 9999; }
.abtd-cb { min-width: 0; }
.abtd-cb img { max-width: 100%; height: auto; }
.abtd-live-price { display: inline-flex; align-items: flex-end; white-space: nowrap; }

/* Theme typography must not leak into the detail content (Taobao descV8 is plain body text + images). */
.abtd .abtd-rich :is(h1, h2, h3, h4, h5, h6) { margin: 20px 0 8px; font-family: var(--abtd-font); font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; text-transform: none; color: var(--abtd-text); }
.abtd .abtd-rich :is(p, ul, ol) { margin: 0 0 12px; }
.abtd .abtd-rich :is(ul, ol) { padding-left: 28px; }
.abtd .abtd-dim legend { font-weight: 400; color: var(--abtd-sub); }
.abtd .abtd-sec-head h2, .abtd .abtd-sec-more { font-family: var(--abtd-font); letter-spacing: 0; text-transform: none; }
.abtd .abtd-title { font-family: var(--abtd-font); letter-spacing: 0; text-transform: none; }

/* ---------- product video slide (UX-002 §5) ---------- */
.abtd-slide.is-video { position: relative; cursor: default; background: #000; }
.abtd-slide.is-video video { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.abtd-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 1px solid rgba(255, 255, 255, .6) !important; border-radius: 50% !important; background: rgba(0, 0, 0, .35) !important; color: #fff !important; }
.abtd-play svg { margin-left: 3px; }
.abtd-play:hover { background: rgba(0, 0, 0, .5) !important; }
.abtd-duration { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 0 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); color: #fff; font-size: 12px; line-height: 20px; pointer-events: none; }
.abtd-slide.is-playing .abtd-play, .abtd-slide.is-playing .abtd-duration, .abtd-slide.has-error .abtd-play { display: none; }
.abtd-video-error { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 12px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; white-space: nowrap; }
.abtd-thumb { position: relative; }
.abtd-thumb-play { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.abtd-thumb-play::after { content: ""; position: absolute; left: 9px; top: 6px; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.abtd-viewer.is-single .abtd-viewer-nav { display: none; }
.abtd-band { display: block; }
/* Playing: letterbox in black like the Taobao player; the Video | Gallery switch steps aside for the native controls. */
.abtd-slide.is-video.is-playing video { background: #000; }
.abtd-stage:has(.abtd-slide.is-playing) .abtd-mswitch { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* ---------- theme compatibility (AUTOBOSS child theme design system) ----------
   The child theme's IBM Plex fonts and 4/8/12px radius tiers are kept on purpose. Only joined controls keep their
   inner corners square, so a button pair / stepper still reads as one piece (outer corners follow the 12px tier).
   The theme rule lists #wp-submit inside :is(), which gives it ID specificity; :not(#abtd-x) matches that weight. */
.abtd-sheet:not([data-mode]) .abtd-sheet-actions:has(> .is-buy:not([hidden])) > .abtd-btn.is-cart:not(#abtd-x) { border-radius: 12px 0 0 12px !important; }
.abtd .abtd-foot-btns > .abtd-btn.is-buy:not(:first-child):not(#abtd-x), .abtd-sheet:not([data-mode]) .abtd-sheet-actions > .abtd-btn.is-buy:not(:first-child):not(#abtd-x) { border-radius: 0 12px 12px 0 !important; }
.abtd-sheet[data-mode] .abtd-sheet-actions > .abtd-btn:not(#abtd-x) { border-radius: 12px !important; }
.abtd .abtd-qty-line .abtd-qty input[name="quantity"][type="number"][inputmode][step] { border-radius: 0 !important; }

/* ---------- Favorite: the Blocksy wishlist button restyled as a bar icon ---------- */
/* The wrapper carries .entry-summary because Blocksy's wishlist script looks the single button up inside one. */
.abtd .abtd-foot-fav.entry-summary { display: flex; flex: none; width: 48px; max-width: none; margin: 0; padding: 0; float: none; }
.abtd .abtd-foot-fav .ct-wishlist-button-single { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 48px; height: 48px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--abtd-text); font-family: var(--abtd-font); font-size: 12px; font-weight: 400; line-height: 16px; cursor: pointer; }
.abtd-foot-fav .ct-icon-container { position: relative; display: flex; width: 20px; height: 20px; }
.abtd-foot-fav .ct-icon-container svg { width: 20px; height: 20px; fill: currentColor; }
.abtd-foot-fav .ct-heart-fill { fill: transparent; transition: fill .2s; }
.abtd-foot-fav [data-button-state="active"] { color: var(--abtd-price); }
.abtd-foot-fav [data-button-state="active"] .ct-heart-fill { fill: currentColor; }
.abtd-foot-fav .ct-tooltip, .abtd-foot-fav .ct-button-loader, .abtd-foot-fav .ct-done { display: none; }
/* Blocksy gives the wishlist label 16px/26px; match the other bar icons (12px/16px, e.g. Chat). */
.abtd .abtd-foot-fav .ct-label { font-size: 12px; font-weight: 400; line-height: 16px; }
.abtd-foot-fav [data-button-state="loading"] .ct-button-loader { display: block; position: absolute; inset: 0; animation: abtd-spin .7s linear infinite; }
.abtd-foot-fav [data-button-state="loading"] svg:not(.ct-button-loader) { opacity: 0; }
.abtd-foot-fav .ct-label { display: block !important; }
@media (hover: hover) { .abtd .abtd-foot-fav .ct-wishlist-button-single:hover { color: var(--abtd-price); } }
@keyframes abtd-spin { to { transform: rotate(360deg); } }
.abtd-sheet-intro { margin: 0 0 8px; }

/* Clear-selection button in the first specification header (left of "Large images" when both exist). */
.abtd-dim-head { gap: 12px; }
.abtd-dim-head legend { margin-right: auto; }
.abtd .abtd-sku-clear { display: inline-flex; align-items: center; gap: 4px; height: 22px; min-height: 0; padding: 0; color: rgba(0, 0, 0, .52); font-size: 14px; line-height: 22px; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; }
.abtd .abtd-sku-clear[hidden] { display: none; }
.abtd-sku-clear .abtd-icon { width: 14px; height: 14px; }
@media (hover: hover) { .abtd .abtd-sku-clear:hover { color: var(--abtd-price); } }

/* Line under the title: "{sold_round} bought | {favorites} favorites" (Popup text). */
.abtd-subtitle { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--abtd-sub); }
.abtd-subtitle .is-hot { color: var(--abtd-price); }

/* ---------- collapsible extras under the quantity: service guarantee, bundle ---------- */
.abtd-extra { margin-top: 16px; border: 1px solid var(--abtd-line); border-radius: 8px; background: #fff; }
.abtd-extra + .abtd-extra { margin-top: 8px; }
.abtd-extra > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--abtd-text); }
.abtd-extra > summary::-webkit-details-marker { display: none; }
.abtd-extra > summary > span { flex: 1; min-width: 0; }
.abtd-extra > summary .abtd-icon { width: 16px; height: 16px; color: var(--abtd-price); }
.abtd-extra > summary .abtd-icon-chevron { width: 12px; height: 12px; color: var(--abtd-sub); transform: rotate(90deg); transition: transform .24s cubic-bezier(.25, .46, .45, .94); }
.abtd-extra[open] > summary .abtd-icon-chevron { transform: rotate(-90deg); }
.abtd-extra > summary em { font-style: normal; font-weight: 600; color: var(--abtd-price); }
.abtd-extra-body { padding: 0 12px 12px; font-size: 13px; line-height: 20px; color: var(--abtd-sub); }
.abtd-extra-body :is(p, ul, ol) { margin: 0 0 6px; }
.abtd-extra-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.abtd-extra-list li { display: flex; gap: 8px; }
.abtd-extra-list .abtd-icon { width: 14px; height: 14px; margin-top: 3px; color: var(--abtd-green); }
.abtd-extra-list strong { display: block; font-weight: 500; color: var(--abtd-text); }
.abtd-bundle-list { margin: 0; padding: 0 12px 8px; list-style: none; }
.abtd-bundle-list li + li { border-top: 1px solid var(--abtd-split); }
.abtd .abtd-bundle .abtd-bundle-item { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 0; cursor: pointer; font-family: var(--abtd-font) !important; font-weight: 400 !important; }
.abtd-bundle-item input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--abtd-accent); }
.abtd-bundle-item img { flex: none; width: 44px; height: 44px; border-radius: 6px; background: var(--abtd-fill-2); object-fit: contain; }
.abtd-bundle-name { flex: 1; min-width: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 19px; color: var(--abtd-text); }
.abtd-bundle-price { flex: none; font-size: 14px; color: var(--abtd-price); }

/* Confirmed cart success: a clear theme badge, never used for validation errors. */
.abtd-toast.is-success { display: flex; flex-direction: column; align-items: center; gap: 14px; box-sizing: border-box; width: 236px; max-width: calc(100vw - 40px); padding: 24px 20px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 18px; background: #fff; color: var(--theme-palette-color-4, #212529); box-shadow: 0 16px 48px rgba(0, 0, 0, .2); font-size: 17px; font-weight: 700; line-height: 24px; text-align: center; }
.abtd-success-mark { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--theme-palette-color-1, #feb511); color: var(--theme-palette-color-4, #212529); box-shadow: 0 0 0 7px color-mix(in srgb, var(--theme-palette-color-1, #feb511) 18%, transparent); }
.abtd-success-mark svg { display: block; width: 32px; height: 32px; }
.abtd-success-mark path { stroke-dasharray: 26; stroke-dashoffset: 0; animation: abtd-success-check .32s ease-out both; }
@keyframes abtd-success-check { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
@keyframes abtd-success-enter { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.abtd-toast.is-success.is-on { animation: abtd-success-enter .24s ease-out both; }
@media (prefers-reduced-motion: reduce) { .abtd-toast.is-success, .abtd-toast.is-success.is-on, .abtd-toast.is-success:not([hidden]), .abtd-success-mark path { animation: none; transition: none; } }

/* Missing source prices are informative text, never a zero-valued offer. */
.abtd .abtd-price-unavailable, .abtd-price-now .abtd-price-unavailable { font-size: 20px; line-height: 1.4; }