/** Shopify CDN: Minification failed

Line 491:0 Expected "}" to go with "{"

**/
/**
 * 新版尺码选择器样式
 * 严格按照UI设计稿实现
 *
 * 设计规范:
 * - 间距: 严格遵循 16px/12px/24px/10px 规范
 * - 尺寸: 标签 48px*28px, 按钮 100px*36px
 * - 圆角: 统一 2px
 * - 字体: Medium 14px, Book 14px, Medium/Book 12px
 */

/* ========================================
   变量定义
   ======================================== */
.t4s-size-selector {
  /* 颜色变量 */
  --size-selector-bg: #1a1a1a;
  --size-selector-text: #d0d0d0;
  --size-selector-text-secondary: #999999;
  --size-selector-border: #666666;
  --size-selector-orange: #FF9000; /* 选中状态橙色背景 */
  --size-selector-orange-hover: #ffa020;
  --size-selector-disabled: rgba(153, 153, 153, 0.3);
  --size-selector-selected-text: #FFFFFF; /* 选中状态白色文字 */
  --size-selector-button-bg: #333333; /* 未选中按钮灰色背景 */

  /* 间距变量 - 考虑其他元素本身间距的精确值 */
  --spacing-between-header-tabs: 16px; /* Size for 到 tabs 16px */
  --spacing-between-tabs-grid: 10px; /* tabs 到 grid 10px */
  --spacing-button-gap: 9px; /* 尺码按钮间距 9px */
  --spacing-horizontal: 0px; /* 左右间距 0px */

  /* 尺寸变量 */
  --tab-width: 48px;
  --tab-height: 28px;
  --button-width: 100px;
  --button-height: 36px;
  --icon-size: 11px;

  /* 圆角 */
  --border-radius: 2px;
}

/* ========================================
   容器布局
   ======================================== */
.t4s-size-selector {
  /* background-color: var(--size-selector-bg); */ /* 移除背景色 */
  padding: var(--spacing-top) 0 var(--spacing-bottom);
  margin-bottom: 0; /* 底部间距已在 padding-bottom 中设置为 24px */
}

/* ========================================
   顶部状态栏
   ======================================== */
.t4s-size-selector__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap; /* 防止换行 */
  margin-bottom: var(--spacing-between-header-tabs);
  padding: 0 var(--spacing-horizontal); /* 左右16px */
  gap: 12px; /* 元素之间的间距 */
}

.t4s-size-selector__status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1; /* 允许状态栏在必要时收缩 */
  min-width: 0; /* 允许内容溢出处理 */
}

.t4s-size-selector__status-label {
  font-size: 16px; /* 增加2px */
  font-weight: 500; /* Bold - 加粗 */
  line-height: 100%; /* 16px */
  letter-spacing: -0.05em; /* -5% */
  color: var(--size-selector-selected-text); /* 白色 #FFFFFF - 与 status-value 统一 */
}

.t4s-size-selector__status-value {
  font-size: 14px;
  font-weight: 500; /* Bold - 加粗 */
  line-height: 100%; /* 16px */
  letter-spacing: -0.05em; /* -5% */
  color: var(--size-selector-selected-text); /* 白色 #FFFFFF */
}

/* 尺码指南链接 */
.t4s-size-selector__guide-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px; /* 增加2px */
  font-weight: 325; /* Book */
  line-height: 100%; /* 14px */
  letter-spacing: -0.05em; /* -5% */
  color: #FFFFFF !important; /* 白色 */
  text-decoration: none !important;
  transition: color 0.2s ease; /* 只过渡颜色 */
  flex-shrink: 0; /* 防止 Size Guide 按钮收缩 */
  white-space: nowrap; /* 防止文本换行 */
}

/* Size Guide 文字颜色 */
.t4s-size-selector__guide-link span {
  color: #FFFFFF !important; /* 白色 */
}

/* Size Guide SVG图标 */
.t4s-size-selector__guide-link svg {
  opacity: 1; /* 完全不透明 */
}

.t4s-size-selector__guide-link:hover {
  color: #FF9000 !important; /* 悬停时橙色 */
  text-decoration: underline !important; /* 添加下划线效果 */
}

.t4s-size-selector__guide-link:hover span {
  color: #FF9000 !important; /* 悬停时文字橙色 */
}

.t4s-size-selector__guide-link:hover svg {
  opacity: 1; /* 悬停时图标完全不透明 */
}

.t4s-size-selector__guide-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ========================================
   尺码体系标签页
   ======================================== */
.t4s-size-selector__tabs {
  display: flex;
  gap: 0; /* 标签之间无间距,共享边框 */
  margin-bottom: var(--spacing-between-tabs-grid);
  padding: 0 var(--spacing-horizontal); /* 左右16px */
}

/* 非鞋类产品隐藏尺码系统标签 */
.t4s-size-selector[data-product-type="APPAREL"] .t4s-size-selector__tabs,
.t4s-size-selector[data-product-type="OTHER"] .t4s-size-selector__tabs {
  display: none;
}

/* 非鞋类产品调整间距(因为没有标签了) */
.t4s-size-selector[data-product-type="APPAREL"] .t4s-size-selector__panels,
.t4s-size-selector[data-product-type="OTHER"] .t4s-size-selector__panels {
  margin-top: 0;
}

.t4s-size-selector__tab {
  width: var(--tab-width);
  height: var(--tab-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--size-selector-border);
  border-radius: 0; /* 默认无圆角 */
  background-color: var(--size-selector-button-bg); /* 灰色背景 */
  color: var(--size-selector-text);
  font-size: 14px; /* 增加2px */
  font-weight: 325; /* Book - 未选中状态 */
  line-height: 16px;
  letter-spacing: -0.05em;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; /* 只过渡颜色，避免抖动 */
  padding: 0;
  position: relative; /* 为伪元素定位 */
  flex-shrink: 0; /* 防止收缩 */
  text-align: center; /* 文字居中 */
}

/* 使用伪元素预加载bold字体，避免切换时抖动 */
.t4s-size-selector__tab::before {
  content: attr(data-size-tab); /* 显示相同的文字 */
  font-size: 14px; /* 增加2px */
  font-weight: 500; /* Bold */
  line-height: 16px;
  letter-spacing: -0.05em;
  visibility: hidden; /* 隐藏但保持占位 */
  height: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none; /* Safari 支持 */
  user-select: none;
  position: absolute; /* 绝对定位避免影响布局 */
}

/* 第一个标签左侧圆角 */
.t4s-size-selector__tab:first-child {
  border-radius: 2px 0 0 2px;
}

/* 最后一个标签右侧圆角 */
.t4s-size-selector__tab:last-child {
  border-radius: 0 2px 2px 0;
}

/* 相邻标签共享边框 */
.t4s-size-selector__tab + .t4s-size-selector__tab {
  margin-left: -1px;
}

.t4s-size-selector__tab:hover {
  background-color: var(--size-selector-orange); /* 悬浮时显示橙色背景 */
  border-color: var(--size-selector-orange);
  color: var(--size-selector-selected-text); /* 白色文字 */
}

.t4s-size-selector__tab.is-active {
  background-color: var(--size-selector-button-bg); /* 保持灰色背景 #333333 */
  border-color: var(--size-selector-border);
  color: var(--size-selector-orange); /* 橙色文字 #FF9000 */
  font-weight: 500; /* Bold - 选中状态加粗 */
  font-size: 14px; /* 增加2px */
  line-height: 100%; /* 14px */
  letter-spacing: -0.05em; /* -5% */
  text-decoration: underline; /* 有下划线 ✅ */
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  position: relative;
  z-index: 1; /* 确保选中状态在最上层 */
}

/* ========================================
   尺码面板
   ======================================== */
.t4s-size-selector__panels {
  position: relative;
}

.t4s-size-selector__panel {
  display: none;
}

.t4s-size-selector__panel.is-active {
  display: block;
}

/* ========================================
   尺码网格
   ======================================== */
.t4s-size-selector__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-button-gap);
  padding: 0 var(--spacing-horizontal); /* 左右16px */
}

/* ========================================
   尺码按钮
   ======================================== */
.t4s-size-selector__size-btn {
  position: relative;
  width: var(--button-width);
  height: var(--button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--size-selector-border);
  border-radius: var(--border-radius);
  background-color: var(--size-selector-button-bg); /* 灰色背景 */
  color: var(--size-selector-text);
  font-size: 14px; /* 增加2px */
  font-weight: 325; /* Book - 未选中状态 */
  line-height: 100%; /* 14px - 与选中状态保持一致 */
  letter-spacing: -0.05em; /* -5% */
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  overflow: visible;
}

.t4s-size-selector__size-btn:hover:not(.is-out-of-stock) {
  background-color: var(--size-selector-orange); /* 悬浮时显示橙色背景 */
  border-color: var(--size-selector-orange);
  color: var(--size-selector-selected-text); /* 白色文字 */
}

.t4s-size-selector__size-btn.is-selected {
  background-color: var(--size-selector-orange);
  border-color: var(--size-selector-orange);
  color: var(--size-selector-selected-text); /* 白色文字 */
  font-weight: 350; /* Medium - 选中状态 */
  font-size: 14px; /* 增加2px */
  line-height: 100%; /* 14px */
  letter-spacing: -0.05em; /* -5% */
  text-decoration: none; /* 无下划线 */
}

/* 缺货状态 */
.t4s-size-selector__size-btn.is-out-of-stock {
  background-color: var(--size-selector-button-bg); /* 保持 #333333 背景 */
  border-color: var(--size-selector-border);
  cursor: pointer; /* 可点击显示通知 */
  opacity: 1; /* 不透明 */
}

/* 缺货按钮文字删除线效果 */
.t4s-size-selector__size-btn.is-out-of-stock .t4s-size-selector__size-label {
  position: relative;
  z-index: 1;
  color: #6C6C6C; /* 灰色文字 */
  text-decoration: line-through;
  text-decoration-color: #6C6C6C;

  font-weight: 325;
  font-size: 14px; /* 增加2px */
  line-height: 16px;
  letter-spacing: -0.05em;
}

/* 缺货按钮悬浮效果 - 使用灰白色而非橙色 */
.t4s-size-selector__size-btn.is-out-of-stock:hover {
  background-color: rgba(208, 208, 208, 0.1); /* 浅灰色半透明背景 */
  border-color: #999999; /* 灰白色边框 */
}

.t4s-size-selector__size-btn.is-out-of-stock:hover .t4s-size-selector__size-label {
  color: #d0d0d0; /* 灰白色文字 */
  text-decoration-color: #d0d0d0;
}

.t4s-size-selector__size-label {
  position: relative;
  z-index: 1;
}

/* ========================================
   缺货铃铛图标
   ======================================== */
.t4s-size-selector__notify-icon {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 11px;
  height: 12px;
  color: #6C6C6C;
  pointer-events: none;
  z-index: 2;
}

/* 缺货按钮悬停时铃铛图标高亮 - 使用灰白色 */
.t4s-size-selector__size-btn.is-out-of-stock:hover .t4s-size-selector__notify-icon {
  color: #d0d0d0; /* 灰白色 */
}

/* ========================================
   缺货通知触发器 (隐藏元素,由JS控制)
   ======================================== */
.t4s-size-selector__notify-trigger {
  display: none;
}

/* ========================================
   响应式设计
   ======================================== */

/* 小屏幕设备 */
@media (max-width: 480px) {
  .t4s-size-selector {
    --button-width: 80px;
    --button-height: 32px;
    /* 移除间距覆盖，保持与桌面端一致的2px */
  }

  .t4s-size-selector__header {
    /* 保持水平排列，确保 Size Guide 和 Size for 在同一行 */
    gap: 8px; /* 缩小间距以适应移动端 */
    padding: 0 8px; /* 减少左右内边距 */
  }

  /* 移动端继承桌面端字体样式 (14px Bold)，保持一致性 */

  .t4s-size-selector__status {
    gap: 2px; /* 缩小 label 和 value 之间的间距 */
  }

  .t4s-size-selector__guide-link {
    /* 继承桌面端 12px Book 样式 */
    gap: 3px; /* 缩小图标和文字的间距 */
  }

  .t4s-size-selector__guide-icon {
    width: 14px; /* 进一步缩小图标 */
    height: 14px;
  }

  /* 移除grid gap覆盖，使用全局的2px设置 */
}

/* 中等屏幕设备 */
@media (min-width: 481px) and (max-width: 768px) {
  .t4s-size-selector {
    --button-width: 90px;
  }
}

/* ========================================
   无障碍支持
   ======================================== */

/* 聚焦状态 */
.t4s-size-selector__tab:focus-visible,
.t4s-size-selector__size-btn:focus-visible {
  outline: 2px solid var(--size-selector-orange);
  outline-offset: 2px;
}

/* 禁用状态 - 但缺货按钮除外（缺货按钮可点击以显示通知） */
.t4s-size-selector__size-btn[aria-disabled="true"]:not(.is-out-of-stock) {
  cursor: not-allowed;
}

/* 缺货按钮始终显示可点击鼠标样式 */
.t4s-size-selector__size-btn.is-out-of-stock {
  cursor: pointer !important;
}

/* 屏幕阅读器文本 */
.t4s-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
   动画效果
   ======================================== */
@keyframes size-selector-fade-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.t4s-size-selector__panel.is-active {
  animation: size-selector-fade-in 0.2s ease-out;
}

/* ========================================
   打印样式
   ======================================== */
@media print {
  .t4s-size-selector__notify-icon {
    display: none;
  }

  .t4s-size-selector__guide-link {
    display: none;
  }
}

/* ========================================
   深色主题支持 (如果需要)
   ======================================== */
@media (prefers-color-scheme: dark) {
  .t4s-size-selector {
    /* 已经是深色主题,无需额外调整 */
  }
}

/* ========================================
   高对比度模式
   ======================================== */
@media (prefers-contrast: high) {
  .t4s-size-selector {
    --size-selector-border: #ffffff;
    --size-selector-text: #ffffff;