/* orbshopv2 — VIP 设计系统（Tailwind 补充层） */

/* ========== CSS 自定义属性 ========== */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 🛒 拼多多风格搜索区 */
  --pdd-search-bg:          #F5F5F5;
  --pdd-search-text:        #1A1A1A;
  --pdd-search-placeholder: #999999;
  --pdd-search-radius:      20px;
  --pdd-search-height:      36px;
  --pdd-red:                #E02E24;
}

/* ========== 🎨 GUI 主题切换过渡动画 ========== */
.text-brand, .bg-brand, .border-brand, .accent-brand,
.bg-brand\/5, .bg-brand\/25,
.bg-bg, .bg-bg2,
body, header, .waterfall-grid .waterfall-item,
button, a, input, select, textarea, label {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* ========== 全局过渡 ========== */
html { scroll-behavior: smooth; }

/* ========== 响应式容器 ========== */
.container-responsive{width:100%;max-width:480px;margin:0 auto}
@media(min-width:768px){.container-responsive{max-width:720px}}
@media(min-width:1024px){.container-responsive{max-width:960px}}

/* ========== 安全区域 ========== */
.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom,0)}
.safe-area-top{padding-top:env(safe-area-inset-top,0)}

/* ========== 瀑布流网格 ========== */
.waterfall-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px}
.waterfall-grid .waterfall-item{border-radius:12px;overflow:hidden;transition:transform .35s var(--ease-out-expo),box-shadow .35s var(--ease-out-expo)}
@media(hover:hover){.waterfall-grid .waterfall-item:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.12)}}
.waterfall-grid .waterfall-item:active{transform:scale(.97)}
@media(min-width:640px){.waterfall-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:1024px){.waterfall-grid{grid-template-columns:repeat(4,1fr);gap:16px;padding:16px}}
@media(min-width:1280px){.waterfall-grid{grid-template-columns:repeat(5,1fr);gap:20px;padding:20px}}
[dir=rtl] .waterfall-grid{direction:rtl}

/* ========== htmx 指示器 ========== */
.htmx-indicator{display:none}
.htmx-request .htmx-indicator{display:inline-block}
.htmx-request.htmx-indicator{display:inline-block}

/* ========== 骨架屏 ========== */
.skeleton{background:linear-gradient(110deg,#f0f0f0 30%,#f8f8f8 50%,#f0f0f0 70%);background-size:200% 100%;animation:shimmer 1.8s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ========== Toast（毛玻璃） ========== */
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-12px)}100%{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{0%{opacity:1}100%{opacity:0;transform:translate(-50%,-8px)}}

/* ========== 心形收藏动画 ========== */
@keyframes heartBeat{0%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.2)}60%{transform:scale(1)}}
.heart-active{animation:heartBeat .6s var(--ease-out-back);fill:#ef4444;color:#ef4444}

/* ========== 按钮光泽扫过 ========== */
@keyframes btnShine{0%{left:-100%}100%{left:200%}}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);animation:btnShine 3s infinite}

/* ========== 卡片悬浮抬升 ========== */
.card-lift{transition:transform .35s var(--ease-out-expo),box-shadow .35s var(--ease-out-expo)}
@media(hover:hover){.card-lift:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.1)}}

/* ========== 渐变金色 VIP ========== */
.vip-gold{background:linear-gradient(135deg,#c7923e,#e2c17d,#c7923e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ========== 毛玻璃面板 ========== */
.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* ========== 价格跳字动画 ========== */
@keyframes pricePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.price-updated{animation:pricePulse .4s var(--ease-out-back)}

/* ========== 页面切换过渡 ========== */
@keyframes pageIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
[data-page-in]{animation:pageIn .35s var(--ease-out-expo)}

/* ========== RTL ========== */
[dir=rtl] .waterfall-grid{direction:rtl}
[dir=rtl] .space-x-reverse > *+*{--tw-space-x-reverse:1}

/* ========== 触屏优化 ========== */
@media(hover:none) and (pointer:coarse){.touch-target{min-height:44px;min-width:44px}}

/* ========== 滚动条隐藏 ========== */
.scrollbar-hide::-webkit-scrollbar{display:none}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}

/* ========== 详情页宽度统一·初心铁律 ==========
   🚫【禁止 AI 修改】本段为定稿布局，任何 AI 一律不得改动此宽度/布局逻辑。
   🔒 初心（根源）：详情页内容区 + SKU 单选浮窗 + 首页顶部栏 + 底部操作栏，
      统一走同一个宽度变量 --page-max-w（72rem=1152px）。
      手机(<1152px)全宽、PC(≥1152px)锁 1152px 居中，自适应 PC/手机切换；
      改宽度只动 :root 一处，各处自动跟随，禁止重复硬编码宽度值。
   🔒 铁律：① 禁止改回双栏布局；② 禁止内部限宽（max-w-[480px]）的小气做法。 */
:root {
  --page-max-w: 72rem;
}

/* 详情页内容容器：480px 上限 → 统一变量上限（覆盖模板 max-w-[480px]） */
#detailOverlayContent .max-w-\[480px\] {
  max-width: var(--page-max-w);
}

/* PC 端主图改 16:9 横向，避免容器放大后出现 1152×1152 巨大正方形；手机端仍保持 1:1 */
@media (min-width: 768px) {
  #goodsSwiper { aspect-ratio: 16 / 9; }
}

/* SKU 单选浮窗：跟随详情页自动放大（覆盖模板 md:max-w-[600px]），与内容区同宽 */
@media (min-width: 768px) {
  #detailOverlayContent .md\:max-w-\[600px\] {
    max-width: var(--page-max-w);
  }
}