/**
 * Global storefront float band: left/right slots share one bottom inset.
 * Sticky ATC clearance is applied once on the layer (not per float widget).
 * Edge-dock: slots collapse to the viewport edge with animated transform.
 * Marker: storefront-float-edge-dock-v1
 */
.w-storefront-float-layer {
  /* Shrink the layer box from the bottom so absolute slots lift above sticky ATC.
   * padding-bottom does NOT move position:absolute children (CB = padding edge). */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--weline-product-sticky-purchase-clearance, 0px);
  z-index: 2147482900;
  box-sizing: border-box;
  pointer-events: none;
  transition: bottom var(--weline-motion-normal, 0.2s) ease;
}

.w-storefront-float-layer__slot {
  position: absolute;
  pointer-events: auto;
  max-width: min(100vw, 28rem);
  /* Base transform of a slot that is centred on an axis. Collapsed rules
   * compose it with the edge shift, so every direction shares one mechanism.
   * Marker: storefront-float-edge-dock-directions-v2 */
  /* Identity (not empty): an empty custom property makes the composed
   * `var(--w-float-dock-base,) translateX(...)` collapse to `none` in Chromium,
   * which left edge slots un-translated. Marker: storefront-float-dock-base-identity-v1 */
  --w-float-dock-base: translate3d(0, 0, 0);
  transition:
    transform var(--weline-theme-duration-normal, 0.28s)
      var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    left var(--weline-theme-duration-normal, 0.28s)
      var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    right var(--weline-theme-duration-normal, 0.28s)
      var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
  /* Expanded: no will-change hint here (would create a fixed containing block;
   * mobile CS fullscreen panel would size to the FAB). Collapsed rule below.
   * Marker: storefront-float-edge-transform-clear-v1 */
}

.w-storefront-float-layer__slot.is-edge-collapsed {
  will-change: transform;
  overflow: visible;
  max-height: none;
}

.w-storefront-float-layer__slot--start {
  left: max(0.85rem, env(safe-area-inset-left, 0px));
  bottom: max(0.95rem, env(safe-area-inset-bottom, 0px));
}

.w-storefront-float-layer__slot--end {
  right: max(var(--weline-space-5, 1.25rem), env(safe-area-inset-right, 0px));
  bottom: max(var(--weline-space-5, 1.25rem), env(safe-area-inset-bottom, 0px));
}

/* Side slot: right-edge vertical mid container (customer-facing, business-agnostic;
 * widgets enter via default_injections — first use case: affiliate float).
 * Marker: storefront-float-side-slot-v1 */
.w-storefront-float-layer__slot--side {
  right: max(var(--weline-space-5, 1.25rem), env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  --w-float-dock-base: translateY(-50%);
  /* Keep edge recall (outside slot box) clickable — no scroll clipping.
   * Marker: storefront-float-edge-flush-v3 */
  overflow: visible;
}

/* Eight-direction containers. Empty slots have zero-size boxes, so they neither
 * occupy space nor block clicks; widgets enter via default_injections.
 * Marker: storefront-float-eight-direction-v1 */
.w-storefront-float-layer__slot--top-start {
  left: max(0.85rem, env(safe-area-inset-left, 0px));
  top: calc(var(--weline-header-height, 4.5rem) + 0.75rem);
}

.w-storefront-float-layer__slot--top-center {
  left: 50%;
  transform: translateX(-50%);
  --w-float-dock-base: translateX(-50%);
  top: calc(var(--weline-header-height, 4.5rem) + 0.75rem);
}

.w-storefront-float-layer__slot--top-end {
  right: max(var(--weline-space-5, 1.25rem), env(safe-area-inset-right, 0px));
  top: calc(var(--weline-header-height, 4.5rem) + 0.75rem);
}

.w-storefront-float-layer__slot--middle-start {
  left: max(0.85rem, env(safe-area-inset-left, 0px));
  top: 50%;
  transform: translateY(-50%);
  --w-float-dock-base: translateY(-50%);
}

.w-storefront-float-layer__slot--bottom-center {
  left: 50%;
  transform: translateX(-50%);
  --w-float-dock-base: translateX(-50%);
  bottom: max(0.95rem, env(safe-area-inset-bottom, 0px));
}

/* Async quick-login surface mounted by the theme float module (top-end slot). */
#w-storefront-float-layer .w-float-quick-login {
  box-sizing: border-box;
  width: min(216px, calc(100vw - 24px));
  padding: var(--weline-space-2, 8px);
  background: var(--weline-theme-surface-raised, #ffffff);
  border: var(--weline-theme-border-width, 1px) solid var(--weline-theme-border, #e2e8f0);
  border-radius: var(--weline-radius-md, 10px);
  box-shadow: var(--weline-theme-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
}

#w-storefront-float-layer .w-float-quick-login[data-weline-mount-state="empty"],
#w-storefront-float-layer .w-float-quick-login[data-weline-mount-state="pending"]:empty {
  display: none;
}

#w-storefront-float-layer .w-float-quick-login .weline-social-quick-inline {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

#w-storefront-float-layer .w-float-quick-login .weline-social-quick-bar__actions {
  gap: var(--weline-space-1, 6px);
}

#w-storefront-float-layer .w-float-quick-login .weline-social-quick-bar__btn {
  min-height: 36px;
  padding: 6px 10px;
  gap: var(--weline-space-2, 8px);
  border-radius: var(--weline-radius-sm, 6px);
  font-size: 12px;
}

#w-storefront-float-layer .w-float-quick-login .weline-social-quick-bar__btn-icon,
#w-storefront-float-layer .w-float-quick-login .weline-social-quick-bar__btn-icon svg {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

/*
 * Social float is content-only inside the layer: the slot owns placement and
 * collapse. Its self `position: fixed` left the slot 0×0, so the × chip hung off
 * the viewport's left edge (clipped 4px) and the collapse could not slide.
 * Marker: storefront-float-social-in-flow-v1
 */
#w-storefront-float-layer .w-social-float {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;
}

/* One collapse control per container: the layer ×/recall replaces the widget's
 * own toggle inside the layer. Marker: storefront-float-social-single-control-v1 */
#w-storefront-float-layer .w-social-float__toggle {
  display: none;
}

/* Social quick bar stacks above the end float — lift end slot only */
body:has(.weline-social-quick-bar:not([hidden]))
  .w-storefront-float-layer__slot--end:not(:has(.customer-service-widget.is-open)) {
  bottom: calc(
    max(var(--weline-space-5, 1.25rem), env(safe-area-inset-bottom, 0px))
    + 10.5rem
  );
}

/*
 * Cookie consent bar occupies the bottom band — lift both float slots so edge
 * chrome (×) never nests into the dark consent strip.
 * Marker: storefront-float-consent-clearance-v1
 */
body:has(#weline-consent-banner:not([hidden]))
  .w-storefront-float-layer__slot--start {
  bottom: calc(
    max(0.95rem, env(safe-area-inset-bottom, 0px))
    + var(--weline-consent-banner-clearance, 4.75rem)
  );
}

body:has(#weline-consent-banner:not([hidden]))
  .w-storefront-float-layer__slot--end:not(:has(.customer-service-widget.is-open)) {
  bottom: calc(
    max(var(--weline-space-5, 1.25rem), env(safe-area-inset-bottom, 0px))
    + var(--weline-consent-banner-clearance, 4.75rem)
  );
}

body:has(#weline-consent-banner:not([hidden])):has(.weline-social-quick-bar:not([hidden]))
  .w-storefront-float-layer__slot--end:not(:has(.customer-service-widget.is-open)) {
  bottom: calc(
    max(var(--weline-space-5, 1.25rem), env(safe-area-inset-bottom, 0px))
    + 10.5rem
    + var(--weline-consent-banner-clearance, 4.75rem)
  );
}

/* Edge dock chrome */
.w-storefront-float-edge__chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.w-storefront-float-edge__body {
  position: relative;
  z-index: 1;
}

.w-storefront-float-edge__dismiss {
  /* Readable × (was near-invisible 35%/0.72 on white article). Marker: storefront-float-dismiss-contrast-v1 */
  pointer-events: auto;
  position: absolute;
  top: -0.35rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  /* Themes may set `button { min-block-size: 2.5rem }` (hanfu layout-critical):
   * logical min/max must be pinned too, else the chip grows to 2.5rem tall.
   * Marker: storefront-float-edge-chip-size-v3
   * 1.25rem → 1.5rem（2026-10-29）：Lighthouse「触摸目标尺寸不足」要求 ≥24px，
   * 20px 的 × 在移动端被判失败（PIC 首页实测 2 处）。 */
  min-inline-size: 1.5rem;
  min-block-size: 1.5rem;
  max-inline-size: 1.5rem;
  max-block-size: 1.5rem;
  margin: 0;
  padding: 0;
  /* 控件边界可见性（WCAG 1.4.11 非文本对比 ≥3:1）。
   * 原「70% 浅边框 + 88% 半透明白底」在浅纸面上实测：默认主题 边框/页面底 = 1.23:1、
   * PIC 米底 = 1.41:1，圆底与页面底 1.00~1.09:1 —— × 只剩一个孤立字形，看不出是关闭点。
   * 改用文字色 60% 混出边框（白底 ≈4.4:1、米底 ≈3.9:1，留暗色/换 token 余量），底色改不透明 surface-raised。
   * Marker: storefront-float-dismiss-affordance-v4 */
  border: var(--weline-theme-border-width, 1px) var(--weline-theme-border-style, solid)
    color-mix(in srgb, var(--weline-theme-text, #111) 60%, transparent);
  border-radius: 999px;
  background: var(--weline-theme-surface-raised, #fff);
  color: color-mix(
    in srgb,
    var(--weline-theme-text, #111) 78%,
    transparent
  );
  box-shadow: var(--weline-theme-shadow-xs, var(--weline-theme-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08)));
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  opacity: 0.92;
  transition:
    opacity var(--weline-theme-duration-fast, 0.16s)
      var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    color var(--weline-theme-duration-fast, 0.16s)
      var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    background-color var(--weline-theme-duration-fast, 0.16s)
      var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

/* × / recall placement follows the slot's dock direction only — one rule set
 * for all eight containers. Marker: storefront-float-edge-dock-directions-v2 */
.w-storefront-float-layer__slot[data-float-dock='left'] .w-storefront-float-edge__dismiss {
  right: -0.15rem;
}

.w-storefront-float-layer__slot[data-float-dock='right'] .w-storefront-float-edge__dismiss {
  left: -0.15rem;
}

.w-storefront-float-layer__slot[data-float-dock='up'] .w-storefront-float-edge__dismiss {
  top: auto;
  bottom: -0.35rem;
  left: 50%;
  transform: translateX(-50%);
}

.w-storefront-float-layer__slot[data-float-dock='down'] .w-storefront-float-edge__dismiss {
  left: 50%;
  transform: translateX(-50%);
}

/* 交互态必须带 ID 前缀：默认页脚/PIC 页脚的内联 critical 用 `#w-storefront-float-layer …__dismiss`
 * (1,1,0) 钉住基础态，本文件不带 ID 的 hover(:hover) 只有 (0,2,0) 永远输给它 → 悬停无反馈。
 * Marker: storefront-float-dismiss-hover-specificity-v1 */
#w-storefront-float-layer .w-storefront-float-edge__dismiss:is(:hover, :focus-visible) {
  opacity: 1;
  color: var(--weline-theme-text, #111);
  background: var(--weline-theme-surface-raised, #fff);
  border-color: color-mix(
    in srgb,
    var(--weline-theme-text, #111) 78%,
    transparent
  );
  outline: none;
}

#w-storefront-float-layer .w-storefront-float-edge__dismiss:focus-visible {
  box-shadow: 0 0 0 var(--weline-theme-focus-ring-width, 2px)
    color-mix(in srgb, var(--weline-theme-primary, #0f766e) 45%, transparent);
}

.w-storefront-float-edge__recall {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--weline-space-5, 1.25rem);
  height: calc(var(--weline-space-8, 2rem) + 0.25rem);
  /* Same reason as the × chip: theme `button { min-block-size }` must not stretch it. */
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  color: var(--weline-theme-primary, var(--color-primary, #0f766e));
  background: color-mix(
    in srgb,
    var(--weline-theme-surface-raised, #fff) 88%,
    var(--weline-theme-primary, #0f766e) 12%
  );
  border: var(--weline-theme-border-width, 1px) var(--weline-theme-border-style, solid)
    color-mix(
      in srgb,
      var(--weline-theme-primary, #0f766e) 32%,
      var(--weline-theme-border, #e2e8f0)
    );
  box-shadow: var(--weline-theme-shadow-xs, var(--weline-theme-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08)));
  cursor: pointer;
  appearance: none;
  transition:
    color var(--weline-theme-duration-fast, 0.16s)
      var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1)),
    background-color var(--weline-theme-duration-fast, 0.16s)
      var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.w-storefront-float-layer__slot[data-float-dock='left'] .w-storefront-float-edge__recall {
  left: 100%;
  border-radius: 0 var(--weline-radius-md, 8px) var(--weline-radius-md, 8px) 0;
  border-left: none;
}

.w-storefront-float-layer__slot[data-float-dock='right'] .w-storefront-float-edge__recall {
  right: 100%;
  border-radius: var(--weline-radius-md, 8px) 0 0 var(--weline-radius-md, 8px);
  border-right: none;
}

.w-storefront-float-layer__slot[data-float-dock='up'] .w-storefront-float-edge__recall {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 var(--weline-radius-md, 8px) var(--weline-radius-md, 8px);
  border-top: none;
}

.w-storefront-float-layer__slot[data-float-dock='down'] .w-storefront-float-edge__recall {
  top: auto;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--weline-radius-md, 8px) var(--weline-radius-md, 8px) 0 0;
  border-bottom: none;
}

.w-storefront-float-edge__recall:is(:hover, :focus-visible) {
  color: var(--weline-theme-on-primary, #fff);
  background: var(--weline-theme-primary, #0f766e);
  outline: none;
}

.w-storefront-float-edge__recall-icon {
  display: inline-flex;
  line-height: 0;
  font-size: 1rem;
}

/*
 * Collapsed must beat widget critical insets (e.g. StoreMusic left:1.75rem)
 * and child visibility:visible overrides (music shell/entry force visible).
 * One rule per direction — any slot with `data-float-dock` behaves the same.
 * Marker: storefront-float-edge-dock-directions-v2
 */
#w-storefront-float-layer
  .w-storefront-float-layer__slot.is-edge-collapsed[data-float-dock='left'] {
  left: max(0px, env(safe-area-inset-left, 0px));
  right: auto;
  transform: var(--w-float-dock-base,) translateX(-100%);
}

#w-storefront-float-layer
  .w-storefront-float-layer__slot.is-edge-collapsed[data-float-dock='right'] {
  right: max(0px, env(safe-area-inset-right, 0px));
  left: auto;
  transform: var(--w-float-dock-base,) translateX(100%);
}

#w-storefront-float-layer
  .w-storefront-float-layer__slot.is-edge-collapsed[data-float-dock='up'] {
  transform: var(--w-float-dock-base,) translateY(-100%);
}

#w-storefront-float-layer
  .w-storefront-float-layer__slot.is-edge-collapsed[data-float-dock='down'] {
  transform: var(--w-float-dock-base,) translateY(100%);
}

#w-storefront-float-layer
  .w-storefront-float-layer__slot.is-edge-collapsed
  .w-storefront-float-edge__body,
#w-storefront-float-layer
  .w-storefront-float-layer__slot.is-edge-collapsed
  .w-storefront-float-edge__body
  * {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#w-storefront-float-layer
  .w-storefront-float-layer__slot.is-edge-collapsed
  .w-storefront-float-edge__dismiss {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  .w-storefront-float-layer__slot--start {
    left: max(0.55rem, env(safe-area-inset-left, 0px));
    bottom: max(0.7rem, env(safe-area-inset-bottom, 0px));
  }

  .w-storefront-float-layer__slot--end {
    right: max(var(--weline-space-3, 0.75rem), env(safe-area-inset-right, 0px));
    bottom: max(var(--weline-space-3, 0.75rem), env(safe-area-inset-bottom, 0px));
  }

  .w-storefront-float-layer__slot--side {
    right: max(var(--weline-space-3, 0.75rem), env(safe-area-inset-right, 0px));
  }

  body:has(.weline-social-quick-bar:not([hidden]))
    .w-storefront-float-layer__slot--end:not(:has(.customer-service-widget.is-open)) {
    bottom: calc(
      max(var(--weline-space-3, 0.75rem), env(safe-area-inset-bottom, 0px))
      + 10.5rem
    );
  }

  body:has(#weline-consent-banner:not([hidden]))
    .w-storefront-float-layer__slot--start {
    bottom: calc(
      max(0.7rem, env(safe-area-inset-bottom, 0px))
      + var(--weline-consent-banner-clearance, 5.25rem)
    );
  }

  body:has(#weline-consent-banner:not([hidden]))
    .w-storefront-float-layer__slot--end:not(:has(.customer-service-widget.is-open)) {
    bottom: calc(
      max(var(--weline-space-3, 0.75rem), env(safe-area-inset-bottom, 0px))
      + var(--weline-consent-banner-clearance, 5.25rem)
    );
  }

  body:has(#weline-consent-banner:not([hidden])):has(.weline-social-quick-bar:not([hidden]))
    .w-storefront-float-layer__slot--end:not(:has(.customer-service-widget.is-open)) {
    bottom: calc(
      max(var(--weline-space-3, 0.75rem), env(safe-area-inset-bottom, 0px))
      + 10.5rem
      + var(--weline-consent-banner-clearance, 5.25rem)
    );
  }

  /* Mobile scale: shrink FABs so they don't dominate the reading column. */
  .w-storefront-float-layer .w-store-music__avatar {
    width: 2.5rem;
    height: 2.5rem;
    --w-spectrum-r: 1.25rem;
  }

  .w-storefront-float-layer .w-store-music__spectrum-bar {
    --w-spectrum-len: calc(0.22rem + (var(--w-bar, 0) * 0.75rem));
  }

  .w-storefront-float-layer .cs-chat-button {
    width: 2.5rem;
    height: 2.5rem;
  }

  .w-storefront-float-layer .cs-chat-button .cs-icon {
    width: 1.15rem;
    height: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-storefront-float-layer__slot {
    transition: none;
  }
}

/* Slot-hosted floats: no viewport-fixed + no per-widget sticky stacking */
.w-storefront-float-layer .w-store-music-host[data-store-music-host] {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.w-storefront-float-layer .w-store-music[data-store-music] {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
}

.w-storefront-float-layer .customer-service-widget {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
}