/* Phones (below the phone breakpoint): Taobao app detail, 1:1 with the UX-002 spec
   (codex-projects-260928/phone-detail-260929/artifacts/AUTOBOSS手机端商品详情_一比一复刻规格.md).
   Screenshot device 440pt wide; values below are taobao pt × 0.886 for a 390px viewport.
   Sections are full-bleed white blocks separated by 10px grey bars (no rounded floating cards). */

.abtd-w-only, .abtd-ptabs { display: none !important; }
.abtd { --abtd-pad: 16px; --abtd-gap: 10px; --abtd-bg-page: #f5f5f5; --abtd-row-line: #eeeeee; background: var(--abtd-bg-page); padding-bottom: calc(var(--abtd-bar-h, 52px) + env(safe-area-inset-bottom) + 12px); }
body.abtd-page .site-main > [data-vertical-spacing], body.abtd-page .ct-container[data-vertical-spacing] { padding-top: 0 !important; padding-bottom: 0 !important; }
body.abtd-page .woocommerce-breadcrumb, body.abtd-page .ct-breadcrumbs { display: none; }
/* §3.1: the Taobao top bar replaces the theme header on these pages. */
body.abtd-page:has(.abtd.has-mhead) #header, body.abtd-page:has(.abtd.has-mhead) header.ct-header { display: none !important; }

.abtd-main { display: flex; flex-direction: column; }
.abtd-left { display: contents; }
.abtd-gallery { order: 1; background: #fff; }
.abtd-gallery.is-empty { display: none; }
.abtd-right { order: 2; }
.abtd-details { order: 3; }

/* ---------- §3 top bar: overlay (H0) → cross-fade (H1) → solid (H2) ---------- */
.abtd-topbar { --abtd-p: 0; position: fixed; left: 0; right: 0; top: var(--abtd-top); z-index: 100; padding-top: env(safe-area-inset-top); background: rgba(255, 255, 255, var(--abtd-p)); }
.abtd-topbar { transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.abtd-topbar[data-state="hidden"] { transform: translateY(-110%); }
.abtd-topbar[data-state="solid"] { background: #fff; box-shadow: 0 .5px 0 var(--abtd-row-line); }
.abtd-topbar-row { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px; }
.abtd-tb-btn { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: color-mix(in srgb, #111 calc(var(--abtd-p) * 100%), #fff); background: rgba(0, 0, 0, calc(.35 * (1 - var(--abtd-p)))); text-decoration: none; }
.abtd-tb-btn::after { content: ""; position: absolute; inset: -7px; }
.abtd-tb-btn .abtd-icon { width: 18px; height: 18px; }
.abtd-topbar[data-state="solid"] .abtd-tb-btn .abtd-icon { width: 21px; height: 21px; }
.abtd-tb-btn .abtd-cart-count { top: -5px; right: -6px; background: var(--abtd-accent); color: var(--abtd-on-cart); }
.abtd-tb-spacer { flex: 1; }
/* Same look as the site header's phone search (autoboss-header-footer .abhf-m-sbox): 1px #191919 border, the
   theme's form-field radius, black button inset 2px. A long keyword placeholder ends in an ellipsis. */
.abtd-tb-search { display: none; flex: 1; min-width: 0; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; margin: 0; padding: 0 2px 0 12px; border: 1px solid #191919; border-radius: var(--theme-form-field-border-radius, 4px); background: #fff; opacity: var(--abtd-p); }
.abtd-tb-search > .abtd-icon { width: 16px; height: 16px; color: rgba(0, 0, 0, .5); }
.abtd .abtd-tb-search button[type="submit"] .abtd-icon { width: 16px; height: 16px; color: #fff; }
.abtd-tb-search input[type="search"] { flex: 1; min-width: 0; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 14px; color: #191919; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.abtd-tb-search input[type="search"]::placeholder { color: rgba(0, 0, 0, .5); opacity: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The theme gives every submit button a min-height and padding (Blocksy button tokens), which pushed this 22px
   button out of the 30px field; reset them here. The 8px radius tier from the child theme stays. */
.abtd .abtd-tb-search button[type="submit"] { flex: none; box-sizing: border-box; width: auto; height: 26px; min-height: 0; max-height: 26px; display: flex; align-items: center; justify-content: center; width: 40px; margin: 0; padding: 0; border: 0; background: var(--abhf-primary, #191919); color: #fff; line-height: 0; box-shadow: none; }
/* The child theme rounds every search submit to its medium radius; inside this field it follows the field. */
body .abtd .abtd-tb-search button[type="submit"] { border-radius: max(0px, calc(var(--theme-form-field-border-radius, 4px) - 1px)) !important; }
.abtd-tb-search input[type="search"][readonly] { cursor: text; }
.abtd-topbar:not([data-state="overlay"]) .abtd-tb-search { display: flex; }
.abtd-topbar:not([data-state="overlay"]) .abtd-tb-spacer, .abtd-topbar:not([data-state="overlay"]) .abtd-tb-search-icon { display: none; }
/* During the cross-fade the search field fades in over the space between Back and the right-hand icons. */
.abtd-topbar[data-state="overlay"] .abtd-tb-search { display: flex; position: absolute; left: 46px; right: 146px; pointer-events: none; }
.abtd-topbar:not([data-state="overlay"]) .abtd-tb-btn { background: transparent; color: #111; }

/* §13 section tabs: a second row of the solid bar, four equal columns. */
.abtd-mtabs { display: none; height: 32px; }
.abtd-topbar[data-state="solid"] .abtd-mtabs { display: block; box-shadow: 0 .5px 0 var(--abtd-row-line); animation: abtd-fade .2s ease-out; }
.abtd-no-js .abtd-mtabs { display: none; }
.abtd-mtabs ul { display: flex; height: 100%; }
.abtd-mtabs li { flex: 1 1 0; }
.abtd-mtabs a { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; color: #999; font-size: 15px; text-decoration: none; white-space: nowrap; }
.abtd-mtabs a[aria-current="true"] { color: #111; font-weight: 600; }
.abtd.has-tab-line .abtd-mtabs a[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: var(--abtd-accent); }

/* §4.5 floating notice, pinned under the bar. */
.abtd-float-promo { position: fixed; left: 8px; top: calc(var(--abtd-top) + env(safe-area-inset-top) + 52px); z-index: 85; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); height: 20px; padding: 0 8px 0 4px; border-radius: 4px; background: var(--abtd-accent); color: var(--abtd-on-cart); font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; }
.abtd-float-promo .abtd-icon { width: 14px; height: 14px; }
.abtd:has(.abtd-topbar[data-state="solid"]) .abtd-float-promo { top: calc(var(--abtd-top) + env(safe-area-inset-top) + 84px); }
html.abtd-lock .abtd-float-promo { display: none; }

/* ---------- §4 hero ---------- */
.abtd-thumbs, .abtd-nav { display: none; }
.abtd-stage { aspect-ratio: var(--abtd-ratio, 1 / 1); background: #fff; }
.abtd.is-single-media .abtd-track { overflow: hidden; }
.abtd-counter { right: 12px; bottom: 12px; padding: 0 8px; border-radius: 10px; font-size: 12px; line-height: 20px; }
.abtd-counter[hidden] { display: none; }
.abtd-mswitch { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; padding: 1px; border-radius: 11px; background: rgba(0, 0, 0, .45); }
.abtd-mswitch button { height: 20px; padding: 0 10px; border-radius: 10px; color: rgba(255, 255, 255, .6); font-size: 12px; line-height: 20px; }
.abtd-mswitch button.is-on { background: rgba(255, 255, 255, .2); color: #fff; font-weight: 500; }
.abtd-stage-params { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 16px; }

/* ---------- §6 price band (full bleed) + §7 offers + §8 title ---------- */
.abtd-panel-scroll { display: flex; flex-direction: column; }
.abtd-strip { margin: 0; padding: 8px var(--abtd-pad); border-radius: 0; background: var(--abtd-soft); font-size: 13px; }
.abtd-block-head { display: flex; flex-direction: column; padding: 0 0 12px; background: #fff; }
.abtd-block-price { margin: 0; }
.abtd-mod-price { padding-bottom: 2px; background: #fff; }
.abtd-mod-title { background: #fff; }
.abtd-cb.is-framed { margin-top: var(--abtd-gap); padding: 12px var(--abtd-pad); background: #fff; }
.abtd-details > .abtd-cb:not(.is-framed) { margin-top: var(--abtd-gap); }
.abtd-band { display: flex; flex-direction: column; gap: 4px; padding: 10px var(--abtd-pad); background: var(--abtd-cart); color: var(--abtd-on-cart); }
.abtd-band .abtd-price-now, .abtd-band .abtd-price-was, .abtd-band .abtd-sold { color: inherit; }
.abtd-band-campaign { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.abtd-band-campaign b { font-size: 15px; font-weight: 700; }
.abtd-band-campaign span { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abtd-price { align-items: flex-end; flex-wrap: nowrap; }
.abtd-price-now .abtd-cur { font-size: 16px; line-height: 22px; }
.abtd-price-now .abtd-int { font-size: 28px; line-height: 30px; }
.abtd-price-now .abtd-dec { font-size: 16px; line-height: 22px; }
.abtd-price-was { font-size: 14px; line-height: 22px; opacity: .8; }
.abtd-sold { margin-left: auto; font-size: 13px; line-height: 22px; white-space: nowrap; }
.abtd-band-rule { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; font-size: 13px; line-height: 20px; color: inherit; text-align: left; }
.abtd-band .abtd-offer-chip { height: 20px; padding: 0 6px; border-radius: 3px; font-size: 12px; font-weight: 600; line-height: 20px; }
.abtd-band .abtd-offer-chip:not(.is-packet):not(.has-bg) { background-color: #fff; }
.abtd-band-more { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.abtd-band-rule .abtd-icon { width: 12px; height: 12px; margin-left: auto; }

.abtd-coupon { align-items: center; margin: 10px 0 0; padding: 0 0 0 var(--abtd-pad); }
.abtd-coupon-label { font-size: 14px; line-height: 24px; }
.abtd-coupon-list { flex: 1; min-width: 0; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.abtd-coupon-list::-webkit-scrollbar { display: none; }
.abtd-coupon-list .abtd-offer-chip { scroll-snap-align: start; height: 24px; font-size: 13px; line-height: 24px; }
.abtd-coupon-go { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 24px; margin: 0; color: #bbb; }
.abtd-coupon-go .abtd-icon { width: 12px; height: 12px; }

.abtd-block-title { margin: 8px 0 0; padding: 0 var(--abtd-pad); }
.abtd-crumbs { flex-wrap: nowrap; margin: 0; padding: 8px var(--abtd-pad) 0; overflow-x: auto; white-space: nowrap; font-size: 12px; scrollbar-width: none; }
.abtd-crumbs::-webkit-scrollbar { display: none; }
.abtd-crumbs + .abtd-block-title { margin-top: 4px; }
.abtd-title { font-size: 16px; line-height: 24px; font-weight: 600; color: #111; }
.abtd-share { padding: 2px 0 0 8px; }
.abtd-points { margin-top: 6px; padding: 0 var(--abtd-pad); font-size: 13px; }

/* ---------- §10 summary rows: icon, no text label, 44px, inset lines ---------- */
.abtd-block-rows { margin: var(--abtd-gap) 0 0; padding: 0 var(--abtd-pad); gap: 0; background: #fff; border: 0; }
.abtd-row { position: relative; height: 44px; padding: 0; gap: 0; font-size: 14px; line-height: 20px; color: #111; }
.abtd-row + .abtd-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--abtd-row-line); }
.abtd-row-icon { display: flex; width: 24px; color: #333; }
.abtd-row-icon .abtd-icon { width: 16px; height: 16px; }
.abtd-row-label { display: none; }
.abtd-row-value { flex: 1; min-width: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.abtd-row-value > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.abtd-row-value > span:first-of-type { flex-shrink: 0; max-width: 72%; }
.abtd-row .abtd-sep { margin: 0 6px; }
.abtd-row > .abtd-icon-chevron { margin-left: 8px; color: #bbb; }
.abtd-row .abtd-eta { flex: none; margin-right: 8px; padding: 0 5px; border-radius: 3px; background: #e6f7ef; color: var(--abtd-green); font-size: 12px; line-height: 20px; }
.abtd-row.is-done .abtd-row-value { font-weight: 500; }

/* The real form moves into the SKU sheet (JS). Without JS it stays inline as a normal form. */
.abtd .abtd-panel-scroll > .abtd-form { display: none; }
.abtd-no-js .abtd-panel-scroll > .abtd-form { margin: var(--abtd-gap) 0 0; padding: 12px var(--abtd-pad); background: #fff; }

/* ---------- §11/12/16/17 sections: full-bleed white blocks, 10px grey bars ---------- */
.abtd-sec { margin: var(--abtd-gap) 0 0; padding: 14px var(--abtd-pad); border-radius: 0; background: #fff; scroll-margin-top: calc(var(--abtd-top) + env(safe-area-inset-top) + 84px); }
.abtd-sec-head { margin-bottom: 10px; }
.abtd-sec-head h2 { font-size: 17px; line-height: 24px; color: #111; }
.abtd-sec-sub { font-size: 13px; color: var(--abtd-price); }
.abtd-sec-more { font-size: 14px; color: #999; }
.abtd-comment { margin-bottom: 12px; }
.abtd-avatar { width: 18px; height: 18px; }
.abtd-comment-who { gap: 8px; }
.abtd-comment-who strong { font-size: 15px; }
.abtd-comment-text { margin-left: 26px; font-size: 15px; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.abtd-show-all { display: none; }
.abtd-empty { padding: 14px; border-radius: 6px; font-size: 14px; }
/* §12 "Ask us" row inside the reviews block, separated by an inset line. */
.abtd-ask { position: relative; display: flex; align-items: center; height: 40px; margin-top: 14px; padding: 0 4px 0 10px; border-radius: 6px; background: #f5f5f5; color: #999; font-size: 14px; text-decoration: none; }
.abtd-ask::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 1px; background: var(--abtd-row-line); }
.abtd-ask b { padding-right: 10px; margin-right: 10px; border-right: 1px solid #ddd; color: var(--abtd-price); font-size: 16px; line-height: 16px; }
.abtd-ask span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.abtd-ask em { flex: none; height: 32px; padding: 0 14px; border-radius: 4px; background: #fff; color: #111; font-style: normal; font-weight: 600; line-height: 32px; }

.abtd-params-tiles { gap: 16px 12px; padding: 16px 16px; }
.abtd-params-tiles > div { padding: 0 4px; }
.abtd-params-tiles b { font-size: 14px; line-height: 20px; }
.abtd-params-tiles span { margin-bottom: 2px; font-size: 12px; line-height: 16px; }
/* Phone fold: the first params_limit_m tiles (section and main-image Specs view); "View all" is always shown. */
:is(.abtd-params-tiles, .abtd-stage-params) > .is-over-m { display: none; }
.abtd-params-tiles > .abtd-params-all { display: inline-flex; height: 32px; padding: 0 10px 0 14px; font-size: 13px; line-height: 32px; }
.abtd-params-list div { grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); column-gap: 12px; padding: 9px 0; border-bottom-color: var(--abtd-row-line); }
.abtd-params-list dt { color: #999; }
.abtd-detail { overflow: hidden; }
.abtd-rich img { width: calc(100% + var(--abtd-pad) * 2); max-width: none; margin-left: calc(var(--abtd-pad) * -1); }
.abtd-recommend, .abtd-more { background: var(--abtd-bg-page); padding-left: 8px; padding-right: 8px; }
.abtd-recommend .abtd-sec-head, .abtd-more .abtd-sec-head { padding: 0 8px; }
.abtd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.abtd-card a { overflow: hidden; border-radius: 8px; background: #fff; }
.abtd-card-img { border-radius: 0; }
.abtd-card-title { margin: 8px 8px 2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 19px; }
.abtd-card-price { margin: auto 8px 8px; }
.abtd-card-price b { font-size: 17px; }

/* ---------- §14 bottom bar: Home / Chat / Cart | Add to cart + Buy now ---------- */
.abtd-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; align-items: center; gap: 0; min-height: 52px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) 4px; background: #fff; box-shadow: 0 -1px 0 var(--abtd-row-line); }
/* Icons sit at a fixed 44px pitch from the left edge (Taobao bar), 6px before the buttons, instead of being spread over 39%. */
.abtd-foot-icons { order: -1; flex: none; display: flex; gap: 2px; margin-right: 6px; }
.abtd-foot-icon { flex: none; width: 44px; height: 44px; margin: 0; color: #333; font-size: 11px; line-height: 14px; }
.abtd-foot-icon span { color: #666; }
.abtd-foot-icon .abtd-icon { width: 20px; height: 20px; }
.abtd-foot-icon .abtd-cart-count { top: 0; right: 2px; }
.abtd.no-mbar { padding-bottom: 12px; }
.abtd.no-mbar .abtd-foot { position: static; margin-top: var(--abtd-gap); box-shadow: none; }
.abtd-foot-btns { position: relative; flex: 1; }
.abtd .abtd-foot .abtd-btn { height: 40px; font-size: 15px; font-weight: 600; }
.abtd-foot-btns .abtd-btn:first-child { border-radius: 12px 0 0 12px; }
.abtd-foot-btns .abtd-btn:last-of-type { border-radius: 0 12px 12px 0; }
.abtd-foot-btns .abtd-btn:only-of-type { border-radius: 12px; }
.abtd-buy-badge { position: absolute; right: 8px; top: -8px; z-index: 2; height: 16px; padding: 0 5px; border-radius: 4px; background: #fff3e0; color: #8a4b08; font-size: 11px; line-height: 16px; white-space: nowrap; pointer-events: none; }
html.abtd-viewer-open .abtd-foot, html.abtd-fullscreen .abtd-foot { display: none; }

.abtd-top { position: fixed; right: 12px; bottom: calc(var(--abtd-bar-h, 52px) + 16px + env(safe-area-inset-bottom)); z-index: 80; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }

/* ---------- §15 bottom sheets ---------- */
.abtd-sheet { align-items: flex-end; }
.abtd-sheet-box { width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translate3d(0, 100%, 0); }
.abtd-handle { display: block; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #dcdfe3; }
.abtd-sheet-head { justify-content: center; padding: 12px 48px; }
.abtd-sheet-body { padding: 0 16px 16px; }
.abtd-sheet.is-sku .abtd-sheet-box { height: 75vh; height: 75dvh; padding-bottom: 0; overflow: visible; }
/* The options list scrolls on its own (.abtd-sku-body); the wrapper must not clip the picture rising above the sheet. */
.abtd-sheet.is-sku .abtd-sheet-body { overflow: visible; }
.abtd-sheet.is-sku .abtd-sku-img { margin-top: -24px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.abtd-sheet.is-sku .abtd-opt > span { min-height: 36px; font-size: 14px; }
.abtd-sheet.is-drawer .abtd-sheet-box { height: 88vh; height: 88dvh; }
.abtd-offer-list li, .abtd-more-list li { border-bottom: 1px solid var(--abtd-row-line); }
.abtd-offer-list li { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-size: 14px; }
.abtd-offer-list .abtd-icon { width: 18px; height: 18px; color: var(--abtd-price); }
.abtd-more-list a, .abtd-more-list button { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; color: #111; font-size: 15px; text-decoration: none; }
.abtd-more-list .abtd-icon { width: 20px; height: 20px; }
.abtd-viewer-nav { display: none; }

/* ---------- search panel (opened from the top bar) ---------- */
.abtd-search { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--abtd-text, #111); font-family: var(--abtd-font); font-size: 14px; line-height: 22px; }
.abtd-search[open] { display: block; }
.abtd-search::backdrop { background: transparent; }
.abtd-search-box { display: flex; flex-direction: column; height: 100%; padding-top: env(safe-area-inset-top); background: #fff; opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity var(--abtd-out-now) ease, transform var(--abtd-out-now) var(--abtd-ease-out); }
.abtd-search.is-open .abtd-search-box { opacity: 1; transform: none; transition: opacity var(--abtd-scrim-in) cubic-bezier(0, 0, .2, 1), transform var(--abtd-in-now) var(--abtd-ease-in); }
.abtd-search-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 52px; margin: 0; padding: 0 12px 0 4px; }
.abtd-search .abtd-search-back { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #111; }
.abtd-search .abtd-icon { width: 20px; height: 20px; flex: none; }
/* Field and button follow the site header's phone search (1px #191919, form-field radius, black button). */
.abtd-search-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: 36px; margin: 0; padding: 0 4px 0 12px; border: 1px solid #191919; border-radius: var(--theme-form-field-border-radius, 4px); background: #fff; }
.abtd-search-field > .abtd-icon { display: none; } /* the magnifier sits in the black button, as in the header */
.abtd .abtd-search-field input[type="search"] { flex: 1; min-width: 0; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-family: inherit; font-size: 15px; color: #111; -webkit-appearance: none; appearance: none; }
.abtd-search-field input::-webkit-search-cancel-button { display: none; }
.abtd .abtd-search-clear { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; color: #999; }
.abtd .abtd-search-clear[hidden] { display: none; }
.abtd-search-clear .abtd-icon { width: 14px; height: 14px; }
.abtd .abtd-search-go { flex: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 48px; height: 36px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--theme-form-field-border-radius, 4px); background: var(--abhf-primary, #191919); color: #fff; line-height: 0; box-shadow: none; }
.abtd-search .abtd-search-go .abtd-icon { width: 20px; height: 20px; color: #fff; }
.abtd .abtd-search-field input[type="search"] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #191919; font-size: 14px; }
.abtd .abtd-search-field input[type="search"]::placeholder { color: rgba(0, 0, 0, .5); opacity: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.abtd-search-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); }
.abtd-search-sec { margin-top: 16px; }
.abtd-search-sec[hidden] { display: none; }
.abtd-search-sec header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.abtd-search-sec h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; color: #111; }
.abtd-search-sec header button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; color: #999; background: transparent; }
.abtd-search-sec header .abtd-icon { width: 18px; height: 18px; }
.abtd-search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.abtd-search-chips a { max-width: 100%; height: 30px; padding: 0 12px; overflow: hidden; border-radius: 15px; background: #f5f5f5; color: #333; font-size: 13px; line-height: 30px; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.abtd-search-chips a:active { background: #ebebeb; }
.abtd-search-suggest { margin: 0; padding: 0; list-style: none; }
.abtd-search-suggest[hidden] { display: none; }
.abtd-search-suggest li { border-bottom: 1px solid #f0f0f0; }
.abtd-search-suggest a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; color: #111; font-size: 14px; line-height: 20px; text-decoration: none; }
.abtd-search-suggest img, .abtd-search-noimg { flex: none; width: 40px; height: 40px; border-radius: 6px; background: #f5f5f5; object-fit: contain; }
.abtd-search-name { flex: 1; min-width: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.abtd-search-name mark { background: none; color: var(--abtd-price); font-weight: 600; }
.abtd-search-suggest b { flex: none; color: var(--abtd-price); font-weight: 600; }
.abtd-search-all a { gap: 8px; min-height: 44px; color: #666; }
.abtd-search-all .abtd-icon { width: 16px; height: 16px; }

/* Joined pair only when a phone-visible second button exists (desktop-only buttons are hidden here). */
.abtd .abtd-foot-btns:has(> .is-buy:not(.abtd-w-only)) > .abtd-btn.is-cart:not(#abtd-x) { border-radius: 12px 0 0 12px !important; }
.abtd .abtd-foot-btns > .abtd-btn.is-buy.abtd-m-only:not(#abtd-x) { border-radius: 0 12px 12px 0 !important; }
.abtd-subtitle { margin-top: 4px; padding: 0 var(--abtd-pad); font-size: 13px; line-height: 20px; }
.abtd-sheet .abtd-extra { margin-top: 12px; }

/* Room under the site footer for the fixed purchase bar (see frontend.css). */
body.abtd-hide-floating .ct-drawer-canvas[data-location="end"] { --floating-bar-height: var(--abtd-bar-h, 56px); --floating-bar-parent-height: var(--abtd-bar-h, 56px); }