/* Desktop (≥ desktop breakpoint, default 1024 = Taobao PC min-width): measured item.taobao.com 2025 layout.
   Content = viewport − 2×80px, max 1600; left:right ≈ 7:5 with 48px gap (720/512 at 1440, 480/400 at 1024). */

/* Width = the Blocksy container (same variables as the header and footer: min(100%, edge spacing) capped at
   "Maximum Site Width"), so the page lines up with them at every width. */
.abtd { width: auto; margin-left: 0; margin-right: 0; }
.abtd-page { box-sizing: border-box; width: var(--theme-container-width, calc(100% - 160px)); max-width: var(--theme-normal-container-max-width, 1290px); margin: 0 auto; padding: 24px 0 0; }
.abtd-main { display: flex; align-items: stretch; }
.abtd-left { flex: 7 1 0; min-width: 0; } /* the purchase column keeps its 400px minimum; the gallery gives way at 1024 */
.abtd-right { position: relative; flex: 5 1 0; min-width: 400px; margin-left: 48px; padding-top: 4px; }

/* picGallery: 76px thumbnail rail + 16px gap, main picture area 4:3 with a centred square picture. */
.abtd-gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; container-type: inline-size; }
.abtd-gallery { position: relative; }
.abtd-thumb-rail { display: block; position: absolute; left: 0; top: 0; width: 76px; height: clamp(min(388px, 100cqw - 92px), (100cqw - 92px) * .75, 620px); }
.abtd-thumbs { position: absolute; left: 0; top: 0; width: 76px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.abtd-thumb-rail.has-overflow .abtd-thumbs { top: 30px; height: calc(100% - 60px); }
.abtd .abtd-thumb-scroll { position: absolute; left: 2px; width: 72px; height: 24px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--abtd-split); border-radius: 6px; background: var(--abtd-fill-2); color: var(--abtd-sub); cursor: pointer; }
.abtd .abtd-thumb-scroll[hidden] { display: none; }
.abtd-thumb-scroll.is-up { top: 0; }
.abtd-thumb-scroll.is-down { bottom: 0; }
.abtd .abtd-thumb-scroll:hover { background: var(--abtd-soft); color: var(--abtd-accent); }
.abtd-thumb-scroll:focus-visible { outline: 2px solid var(--abtd-accent); outline-offset: 2px; }
.abtd-thumbs::-webkit-scrollbar { display: none; }
.abtd-thumb { width: 72px; height: 72px; }
.abtd-thumb-other { width: 68px; height: 68px; }
/* mainPicWrap: 4:3, min 388, max 620, radius 12, transparent; the square mainPic carries rgba(0,0,0,.04) (computed on the live page). */
.abtd-stage { grid-column: 2; grid-row: 1; display: flex; justify-content: center; height: clamp(min(388px, 100cqw - 92px), (100cqw - 92px) * .75, 620px); border-radius: 12px; }
.abtd-track { width: auto; aspect-ratio: 1; border-radius: 12px; background: rgba(0, 0, 0, .04); }
.abtd-stage-params { left: 50%; right: auto; width: auto; aspect-ratio: 1; transform: translateX(-50%); border-radius: 12px; }
.abtd-counter { display: none; }
.abtd-nav { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; display: flex; align-items: center; justify-content: center; border: 1px solid #ebebeb; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.abtd-nav .abtd-icon { width: 14px; height: 14px; }
.abtd-nav:hover::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, .04); }
.abtd-nav.is-prev { left: 8px; }
.abtd-nav.is-next { right: 8px; }
.abtd-stage:hover .abtd-nav, .abtd-nav:focus-visible { opacity: 1; }
.abtd-switch { grid-column: 2; grid-row: 2; }

/* PurchasePanel: sticky 12px below the top, fixed height, own scroll; foot floats 24px above the viewport bottom. */
.abtd-panel { position: sticky; top: calc(var(--abtd-top) + 12px); height: auto; min-height: 0; padding-bottom: 112px; }
.abtd-panel.is-tall { position: static; }
.abtd-panel-scroll { height: auto; overflow: visible; padding-bottom: 0; scrollbar-width: none; }
.abtd-panel-scroll::-webkit-scrollbar { display: none; }
/* Foot: fixed 24px above the viewport bottom, horizontally aligned to the panel by JS (--abtd-foot-l/-w);
   docks to the end of the right column when the page scrolls past it. Without JS it stays in flow. */
.abtd-foot { position: fixed; bottom: 24px; left: var(--abtd-foot-l, 0); width: var(--abtd-foot-w, 0); z-index: 20; display: flex; align-items: center; box-sizing: border-box; height: 80px; padding: 15px 15px 15px 15px; border: 1px solid rgba(0, 0, 0, .02); border-radius: 20px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 36px rgba(31, 31, 51, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.abtd-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abtd-more { margin-top: 0; padding-top: 28px; border-top: 1px solid var(--abtd-split); }
.abtd-more .abtd-cards { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

.abtd-no-js .abtd-foot { position: static; width: auto; margin: 16px -16px 0; }
/* Room at the end of the purchase column: the foot comes to rest there when the block below pushes it up. */
.abtd-right { padding-bottom: 128px; } /* foot (82px) + 24px gap to the block below + breathing room */

/* Taobao foot: starts 16px left of the panel (in the column gap). Unlike Taobao it ends at the panel's right edge,
   so it never passes the content width; the button pair takes the room left by the Favorite icon. */
.abtd-foot-btns { flex: 1 1 auto; min-width: 0; }
.abtd-foot-icons { gap: 8px; margin-left: 12px; }
/* Favorite: sized by its label (never narrower than 48px) and 12px clear of the buttons. */
.abtd .abtd-foot-fav.entry-summary { width: auto; min-width: 48px; }
.abtd .abtd-foot-fav .ct-wishlist-button-single { width: auto; min-width: 48px; padding: 0 2px; white-space: nowrap; }
.abtd-foot-icons:not(:has(> .abtd-w-only)) { display: none; }
.abtd-foot-icon { margin-left: 0; }
/* Desktop: customer chat lives in the AUTOBOSS side toolbar, so the bar keeps only Favorite. */
.abtd-foot-chat { display: none; }
/* TitleTabs sit 16px below the gallery switch (margin) on top of their own 16px padding. */
.abtd-ptabs { margin-top: 16px; }