/* =========================
   基础主题变量（DAYMI 橙）
   ========================= */
:root {
  --bg: #05070b;
  --card: rgba(15, 18, 27, 0.85);
  --card-solid: #0f121b;
  --text: #f0f0f2;
  --muted: #a9adb6;
  --muted-strong: #c5c8d1;
  --brand: #ff6901;
  /* DAYMI 橙 */
  --brand-600: #e65f00;
  /* hover/active */
  --brand-200: #ffdabf;
  /* 浅提示 */
  --border: rgba(255, 255, 255, 0.08);
  --frosted-border: rgba(255, 255, 255, 0.16);
  --shadow-lg: 0 26px 90px rgba(4, 6, 12, 0.55);
  --shadow-md: 0 18px 46px rgba(4, 6, 12, 0.38);
  --shadow-sm: 0 10px 24px rgba(6, 8, 15, 0.3);

  /* 统一主题动效时序（Logo 与按钮） */
  --theme-anim-duration: .48s;
  --theme-anim-ease: cubic-bezier(.2, .8, .2, 1);

  /* 顶栏 & 品牌标语颜色（暗色主题默认） */
  --topbar-bg: var(--bg);
  --topbar-fg: var(--text);

  --brandbar-bg: var(--card);
  --brandbar-title: var(--brand);
  --brandbar-sub: var(--muted);
}

:root.light {
  --bg: #f8f7f4;
  --card: rgba(255, 255, 255, 0.8);
  --card-solid: #ffffff;
  --text: #1a1b1e;
  --muted: #616672;
  --muted-strong: #30343c;
  --brand: #ff6901;
  --brand-600: #e65f00;
  --brand-200: #ffe4d1;
  --border: rgba(26, 27, 30, 0.08);
  --frosted-border: rgba(26, 27, 30, 0.16);
  --shadow-lg: 0 32px 120px rgba(12, 15, 24, 0.14);
  --shadow-md: 0 18px 46px rgba(12, 15, 24, 0.12);
  --shadow-sm: 0 10px 24px rgba(12, 15, 24, 0.1);

  /* 亮色主题：顶栏 & 品牌标语 */
  --topbar-bg: #fff;
  --topbar-fg: #1a1b1e;

  --brandbar-bg: #fff;
  --brandbar-title: var(--brand);
  --brandbar-sub: #555;
}

/* =========================
   基础排版与容器
   ========================= */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--text);
  background: var(--bg);
  position: relative;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(620px 420px at 15% 15%, rgba(255, 105, 1, 0.32), transparent 65%),
    radial-gradient(780px 520px at 85% 10%, rgba(117, 112, 255, 0.24), transparent 70%),
    radial-gradient(960px 640px at 50% 100%, rgba(255, 255, 255, 0.06), transparent 70%);
  opacity: 0.9;
  z-index: -2;
}

.container {
  width: min(1100px, 94%);
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =========================
   Header（极简；目前整体隐藏）
   ========================= */
.header {
  display: none;
  /* 已整体隐藏，不占位 */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* 透明图标按钮：无圆圈、仅图标 */
.btn.icon-toggle {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  /* 去掉内边距 */
  width: auto;
  height: auto;
  /* 不再固定 40x40 */
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  outline: none;
  box-shadow: none;
}

/* 键盘可达性：聚焦时给轻微发光而不是边框圆圈 */
.btn.icon-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: .5rem;
  /* 为了焦点可视，不影响图标本身 */
}


.btn.icon-toggle:hover {
  background: transparent;
  outline: none;
  box-shadow: none;
}

/* 键盘可达性：聚焦时给轻微发光而不是边框圆圈 */
.btn.icon-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: .5rem;
  /* 为了焦点可视，不影响图标本身 */
}

/* =========================
   Logo interaction
   ========================= */
.logo-anim {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  --logo-duration: 2.1s;
  --logo-delay: 0s;
  --logo-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.logo-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transform: translateY(-120%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.logo-anim .logo-img,
.logo-anim .top-logo {
  display: block;
  height: clamp(24px, 5vw, 52px);
  width: auto;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  filter: none;
  opacity: 1;
  will-change: transform, opacity, clip-path, filter;
}

@media (max-width: 600px) {

  .logo-anim .logo-img,
  .logo-anim .top-logo {
    height: clamp(22px, 7vw, 46px);
  }
}

.logo-anim.logo-slide::after {
  animation: logoSweep calc(var(--logo-duration) * 0.85) ease-out var(--logo-delay) forwards;
}

.logo-anim.logo-slide .logo-img,
.logo-anim.logo-slide .top-logo {
  animation: logoSlideDown var(--logo-duration) var(--logo-ease) var(--logo-delay) forwards;
}

@keyframes logoSlideDown {
  0% {
    transform: translateY(-45%);
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    filter: blur(12px) saturate(1.2);
  }

  55% {
    clip-path: inset(0 0 0 0);
    filter: blur(0) saturate(1.05);
  }

  72% {
    transform: translateY(6%);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}

@keyframes logoSweep {
  0% {
    opacity: 0;
    transform: translateY(-120%);
  }

  35% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    transform: translateY(120%);
  }
}

/* =========================
   顶栏（Top Bar）
   ========================= */
.top-bar {
  background: color-mix(in srgb, var(--topbar-bg) 60%, transparent);
  backdrop-filter: blur(18px);
  color: var(--topbar-fg);
  border-bottom: 1px solid var(--border);
  transition: transform 1s ease-in-out, background .3s ease;
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 0;
}

.top-bar .container {
  width: 100%;
  padding: 0 2rem;
}

.top-logo {
  height: 32px;
  width: auto;
}

.top-bar .icon-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: clamp(.75rem, 2vw, 1.25rem);
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}

.nav-toggle:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
}

.nav-toggle-box {
  position: relative;
  width: 20px;
  height: 16px;
  display: inline-block;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .3s ease, top .3s ease, opacity .3s ease;
}

.nav-toggle-bar {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle-bar::before {
  top: -6px;
}

.nav-toggle-bar::after {
  top: 6px;
}

body.nav-open .nav-toggle-bar {
  background: transparent;
}

body.nav-open .nav-toggle-bar::before {
  top: 0;
  transform: rotate(45deg);
}

body.nav-open .nav-toggle-bar::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-overlay {
  display: none;
}

/* 若还存在旧结构，强制无阻碍（可选） */
.top-bar-left,
.top-bar-right {
  display: contents;
}

.brand-link {
  display: inline-flex;
  align-items: center;
}

.main-nav {
  margin-left: clamp(1rem, 4vw, 3rem);
  flex: 1;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: clamp(1.2rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  background: none;
  border: none;
  color: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  cursor: pointer;
  padding: .6rem .2rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
}

.nav-link .nav-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: .32rem solid transparent;
  border-right: .32rem solid transparent;
  border-top: .38rem solid currentColor;
  margin-top: .05rem;
  transition: transform .2s ease;
}

.nav-item.has-dropdown:hover>.nav-link .nav-arrow,
.nav-item.has-dropdown:focus-within>.nav-link .nav-arrow,
.nav-item.has-dropdown.is-open>.nav-link .nav-arrow {
  transform: rotate(180deg);
}

.nav-item.has-dropdown.is-closing>.nav-link .nav-arrow,
.nav-item.has-dropdown.is-closing:hover>.nav-link .nav-arrow,
.nav-item.has-dropdown.is-closing:focus-within>.nav-link .nav-arrow {
  transform: rotate(0);
}

.nav-link:focus-visible,
.dropdown-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: .5rem;
}

.nav-item.has-dropdown:hover>.dropdown,
.nav-item.has-dropdown:focus-within>.dropdown,
.nav-item.has-dropdown.is-open>.dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .top-bar-inner {
    gap: .75rem;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 55%, rgba(0, 0, 0, 0.55));
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1040;
  }

  body.nav-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .main-nav {
    position: fixed;
    inset: var(--topbar-height) 0 0 0;
    background: color-mix(in srgb, var(--bg) 90%, rgba(0, 0, 0, 0.65));
    backdrop-filter: blur(18px);
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.2rem, 6vw, 2.5rem) 2.5rem;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease;
    max-height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
    z-index: 1050;
    margin: 0;
    flex: 0 0 auto;
  }

  body.nav-open .main-nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    font-size: .82rem;
    letter-spacing: .12em;
    padding: .9rem 0;
  }

  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    margin-top: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
    border: none;
    display: none;
  }

  .dropdown.dropdown-wide {
    display: none;
  }

  .nav-item.is-open > .dropdown {
    display: grid;
    gap: .5rem;
    padding-bottom: 1rem;
    grid-template-columns: 1fr;
  }

  .dropdown-column {
    width: 100%;
  }

  .dropdown-heading {
    font-size: .7rem;
    letter-spacing: .18em;
    margin-top: .6rem;
  }

  .dropdown-link {
    padding: .35rem 0;
  }

  .nav-item.has-dropdown > .nav-link .nav-arrow {
    transition: transform .2s ease;
    transform: rotate(0);
  }

  .nav-item.has-dropdown.is-open > .nav-link .nav-arrow {
    transform: rotate(180deg);
  }
}

.nav-item.has-dropdown.is-closing > .dropdown,
.nav-item.has-dropdown.is-closing:hover > .dropdown,
.nav-item.has-dropdown.is-closing:focus-within > .dropdown {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.dropdown {
  position: absolute;
  top: calc(100% + .2rem);
  left: 0;
  display: grid;
  gap: .4rem;
  min-width: 200px;
  background: color-mix(in srgb, var(--card) 92%, rgba(0, 0, 0, 0.25) 8%);
  border: 1px solid var(--frosted-border);
  border-radius: 1rem;
  padding: .9rem 1rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}

.dropdown-wide {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-width: clamp(480px, 48vw, 620px);
}

.dropdown-column {
  display: grid;
  gap: .35rem;
  min-width: 140px;
}

.dropdown-heading {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.dropdown-column-enfeites {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  column-gap: .8rem;
}

.dropdown-column-enfeites .dropdown-heading {
  grid-column: 1 / -1;
}

.dropdown-link {
  color: inherit;
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .04em;
  padding: .3rem 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.dropdown-link-all {
  font-weight: 600;
  color: var(--text);
}

.dropdown-link-highlight {
  padding: .45rem .75rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  font-weight: 600;
  justify-content: center;
  text-align: center;
  color: var(--topbar-fg);
}

.dropdown-link-highlight:hover {
  background: color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--brand-000, #fff);
}

.dropdown-link:hover {
  color: var(--brand-200);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.top-search {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: color-mix(in srgb, var(--card) 88%, rgba(255, 255, 255, 0.05) 12%);
  border: 1px solid var(--frosted-border);
  border-radius: 999px;
  padding: .35rem .8rem .35rem 1rem;
}

.top-search .search-wrapper.condensed {
  position: relative;
  width: clamp(160px, 28vw, 260px);
}

.top-search input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: .92rem;
  padding-right: 1.6rem;
}

.top-search input::-webkit-search-cancel-button,
.top-search input::-webkit-search-decoration,
.top-search input::-webkit-search-results-button,
.top-search input::-webkit-search-results-decoration {
  display: none;
}

.top-search input:focus {
  outline: none;
}

.btn-clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.btn-clear:hover {
  color: var(--brand-200);
}

.btn-ghost.small {
  padding: .5rem 1rem;
  font-size: .78rem;
}

.btn-ghost.small,
.btn-ghost.small:hover {
  border-radius: 999px;
}

/* =========================
   Hero imersivo
   ========================= */
#sobre {
  scroll-margin-top: calc(var(--topbar-height, 72px) + 32px);
}

.hero {
  position: relative;
  display: grid;
  align-items: end;
  width: 100%;
  min-height: max(100vh, 720px);
  min-height: max(100svh, 720px);
  margin: 0;
  padding: clamp(6rem, 14vh, 8rem) 0 clamp(5rem, 16vh, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -6% -10% -10% -6%;
  background: none;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  z-index: 0;
}

.hero-media {
  position: absolute;
  inset: -2% -4% 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--topbar-bg);
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.03);
  transition: opacity .6s ease, transform 18s ease;
  animation: hero-pan 26s ease-in-out infinite alternate;
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.4rem, 1.05rem + 1.6vw, 2.4rem);
  align-content: end;
  max-width: min(1020px, 92vw);
}

.hero-eyebrow {
  font-size: .85rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brand-200);
  font-weight: 600;
}

.hero-title {
  display: none;
}

.hero-sub {
  margin: 0;
  color: color-mix(in srgb, var(--muted-strong) 88%, transparent);
  max-width: 46ch;
  font-size: clamp(1.02rem, .95rem + .6vw, 1.18rem);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

@keyframes hero-pan {
  from {
    transform: scale(1.08) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.16) translate3d(0, -2%, 0);
  }
}

.hero-media.is-fading {
  opacity: .4;
  transition: opacity .32s ease;
}

:root.has-js .hero:not(.hero-ready) .hero-media {
  opacity: 0;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #fff 12%), var(--brand-600));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--brand-600) 90%, #000 10%);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--brand-200);
  color: var(--text);
  font-weight: 600;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand-200);
  transform: translateY(-2px);
}

:root:not(.light) .btn-ghost {
  color: #fff;
  border-color: color-mix(in srgb, #ffffff 55%, transparent);
  background: color-mix(in srgb, rgba(255, 255, 255, 0.08) 100%, transparent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

:root:not(.light) .btn-ghost:hover {
  border-color: color-mix(in srgb, #ffffff 70%, transparent);
  color: #fff;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.14) 100%, transparent);
}

/* =========================
   Filters（搜索/筛选区）
   ========================= */
.filters {
  margin: clamp(3rem, 5vw, 4rem) auto 0;
  padding: clamp(1.4rem, 4vw, 1.8rem);
  width: min(1000px, 94%);
  background: color-mix(in srgb, var(--card) 88%, rgba(255, 255, 255, 0.12) 12%);
  border: 1px solid var(--frosted-border);
  border-radius: 1.4rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px);
}

.filters-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .8rem;
  align-items: center;
}

.filters .search-wrapper {
  width: 100%;
  position: relative;
}

.filters input {
  width: 100%;
  font-size: 1rem;
  padding: .8rem 2.6rem .8rem .9rem;
  border-radius: 2rem;
  border: 1px solid var(--frosted-border);
  background: color-mix(in srgb, var(--card-solid) 85%, rgba(255, 255, 255, 0.1) 15%);
  color: var(--text);
}

.filters input::placeholder {
  color: var(--muted);
}

.filters #clearInputBtn {
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1.3rem;
  color: var(--muted);
  cursor: pointer;
  display: none;
}

.filters select,
.filters #searchBtn {
  height: 2.9rem;
  font-size: .95rem;
  padding: 0 1rem;
  border-radius: 2rem;
  border: 1px solid var(--frosted-border);
  background: color-mix(in srgb, var(--card-solid) 85%, rgba(255, 255, 255, 0.1) 15%);
  color: var(--text);
}

.filters #searchBtn {
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  border-color: color-mix(in srgb, var(--brand-600) 80%, #000 20%);
  transition: transform .2s ease, box-shadow .2s ease;
}

.filters #searchBtn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 820px) {
  .filters-row {
    grid-template-columns: 1fr;
  }

  .filters select,
  .filters #searchBtn {
    width: 100%;
  }
}

/* =========================
   Grid + Card（产品网格）
   ========================= */
.container.main,
main.container {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  gap: 2rem;
}

.grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 小屏 2 列 */
  padding-bottom: 1rem;
}

@media (min-width: 720px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card {
  background: color-mix(in srgb, var(--card) 80%, rgba(255, 255, 255, 0.08) 20%);
  border: 1px solid var(--frosted-border);
  border-radius: 1.2rem;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-sm);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.thumb {
  aspect-ratio: 4/3;
  width: 100%;
  display: block;
  object-fit: cover;
  background: #0003;
}

.card-body {
  padding: 1.1rem;
  display: grid;
  gap: .45rem;
}

.card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.price {
  font-weight: 600;
  color: var(--brand);
}

.muted {
  color: var(--muted);
  font-size: .9rem;
}

/* =========================
   Pagination
   ========================= */
.pagination {
  display: flex;
  gap: .6rem;
  justify-content: center;
  align-items: center;
  padding: 1rem 0 2.5rem;
  flex-wrap: wrap;
}

.page-btn {
  background: color-mix(in srgb, var(--card) 85%, rgba(255, 255, 255, 0.14) 15%);
  color: var(--text);
  border: 1px solid var(--frosted-border);
  border-radius: 999px;
  padding: .55rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.page-btn[aria-current="page"],
.page-btn.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #fff;
  border-color: color-mix(in srgb, var(--brand-600) 80%, #000 20%);
  cursor: default;
  box-shadow: var(--shadow-sm);
}

.page-btn:hover:not(.active):not([disabled]) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--brand-200);
}

.page-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* =========================
   Dialog（预览）
   ========================= */
.dialog {
  width: min(900px, 92%);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0;
  background: var(--card);
  color: var(--text);
}

.dialog::backdrop {
  background: rgba(0, 0, 0, .6);
}

.dialog-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  padding: 1rem;
}

.dialog-close {
  position: absolute;
  right: .8rem;
  top: .8rem;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.dialog-body img {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid var(--border);
  object-fit: cover;
  aspect-ratio: 4/3;
}

.dialog-info h2 {
  margin: 0 0 .25rem;
}

.dialog-info p {
  margin: .2rem 0;
}

@media (max-width: 760px) {
  .dialog-body {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Contact
   ========================= */
.contact-section {
  background: color-mix(in srgb, var(--card) 85%, rgba(255, 255, 255, 0.1) 15%);
  border-top: 1px solid var(--frosted-border);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  margin-top: clamp(3rem, 5vw, 5rem);
  backdrop-filter: blur(14px);
}

.contact-title {
  margin: 0 0 1.6rem;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  color: var(--brand);
  text-align: center;
}

.contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  flex-wrap: wrap;
}

.contact-lines p {
  margin: .5rem 0;
  font-size: 1rem;
  color: var(--muted-strong);
}

.icon-inline {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
}

.contact-logo {
  height: 68px;
  width: auto;
}

.social {
  text-align: center;
  margin-top: 2.4rem;
}

.social-icons {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: .5rem;
}

.social-icons img {
  height: 28px;
  width: auto;
  display: inline-block;
}

/* Redes Sociais 图标：默认无下划线，悬停/聚焦放大 */
.social-icons a {
  text-decoration: none;
}

.social-icons img {
  height: 28px;
  width: auto;
  display: inline-block;
  transition: transform .15s ease;
  transform-origin: center;
}

/* 尊重系统“减少动态效果”偏好，仅在允许时启用放大 */
@media (prefers-reduced-motion: no-preference) {

  .social-icons a:hover img,
  .social-icons a:focus-visible img {
    transform: scale(1.2);
    /* 悬停/键盘聚焦放大 */
  }

  .social-icons a:active img {
    transform: scale(1.12);
    /* 按下轻微缩回 */
  }
}


/* —— 联系方式交互（统一蓝色需求 + 图标/文字不同交互） —— */
/* 文字链接统一蓝色（默认不下划线），悬停下划线+放大；图标始终无下划线，悬停放大 */
.contact-lines a {
  color: #007bff;
  /* 统一蓝色（可换成 #0000EE） */
  text-decoration: none;
  /* 默认不显示下划线 */
  transition: color .15s ease, transform .15s ease;
}

/* 左侧小图标：无下划线，悬停放大 */
.contact-lines p a img.icon-inline {
  display: inline-block;
  vertical-align: -3px;
  transition: transform .15s ease;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .contact-lines p a:hover img.icon-inline {
    transform: scale(1.2);
    /* 悬停放大 */
  }

  .contact-lines p a:active img.icon-inline {
    transform: scale(1.1);
    /* 按下反馈 */
  }
}

/* 右侧文字链接：默认无下划线，悬停下划线 + 放大（蓝色保持一致） */
.contact-lines p a+a {
  display: inline-block;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .contact-lines p a+a:hover {
    color: #007bff;
    text-decoration: underline;
    transform: scale(1.12);
  }

  .contact-lines p a+a:active {
    transform: scale(1.06);
  }
}

/* =========================
   Footer
   ========================= */
.footer {
  text-align: center;
  padding: 1rem 0;
  color: var(--muted);
}

.footer-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 交叉淡入图标层（改进版） */
.btn.icon-toggle .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 保证始终正中 */
  font-size: 1.2rem;
  /* 统一字体大小，可根据需要调节 */
  line-height: 1;
  /* 避免不必要的垂直偏移 */
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
  will-change: opacity;
}

/* 暗色默认显示月亮，太阳透明 */
.btn.icon-toggle .icon.moon {
  opacity: 1;
}

.btn.icon-toggle .icon.sun {
  opacity: 0;
}

/* 切到亮色：太阳淡入、月亮淡出 */
:root.light .btn.icon-toggle .icon.sun {
  opacity: 1;
}

:root.light .btn.icon-toggle .icon.moon {
  opacity: 0;
}

/* 尊重减少动画偏好（可选） */
@media (prefers-reduced-motion: reduce) {
  .btn.icon-toggle .icon {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .hero {
    padding: clamp(5rem, 12vh, 7rem) 0 clamp(3.8rem, 12vh, 5.8rem);
  }

  .hero-title {
    font-size: clamp(2.4rem, 1.7rem + 3vw, 3.8rem);
  }

  .hero-brand {
    max-width: min(460px, 52ch);
  }
}



@media (max-width: 1024px) {
  .hero {
    padding: clamp(5rem, 12vh, 7rem) 0 clamp(3.8rem, 12vh, 5.8rem);
  }

  .hero-title {
    font-size: clamp(2.4rem, 1.7rem + 3vw, 3.8rem);
  }

  .hero-brand {
    max-width: min(460px, 52ch);
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: max(100svh, 600px);
    padding: clamp(4.6rem, 18vh, 6.4rem) 0 clamp(3.4rem, 20vh, 5.2rem);
  }


  .hero-content {
    text-align: center;
    align-items: center;
    justify-items: center;
    gap: clamp(1.2rem, 2vh, 1.8rem);
  }

  .hero-brand {
    margin-inline: auto;
    text-align: center;
    background: color-mix(in srgb, rgba(10, 14, 22, .82) 82%, transparent);
    box-shadow: 0 18px 42px rgba(4, 6, 12, .36);
  }

  .hero-eyebrow,
  .hero-sub {
    margin-inline: auto;
  }

  .hero-title {
    max-width: 18ch;
  }

  .hero-cta {
    justify-content: center;
  }

  .hero-controls {
    bottom: clamp(1.4rem, 8vh, 2.4rem);
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 960px) {
  .top-bar-inner {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .main-nav {
    order: 3;
    width: 100%;
    margin: 0;
  }

  .nav-list {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .nav-item {
    width: auto;
  }

  .dropdown {
    position: static;
    transform: none;
    width: 100%;
    margin-top: .4rem;
    box-shadow: none;
  }

  .dropdown-wide {
    flex-wrap: wrap;
    min-width: 100%;
  }

  .top-actions {
    width: 100%;
    justify-content: center;
  }

  .top-search {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    padding: .5rem .8rem;
  }

  .top-search .search-wrapper.condensed {
    width: min(100%, 320px);
  }
}

@media (max-width: 560px) {
  .nav-link {
    letter-spacing: .12em;
    font-size: .68rem;
  }

  .btn-ghost.small {
    width: 100%;
    justify-content: center;
  }

  .top-actions {
    gap: .6rem;
  }

  .top-search {
    gap: .5rem;
  }
}

.experience,
.collection-highlight,
.testimonials,
.newsletter {
  margin: clamp(3.5rem, 6vw, 6rem) 0;
}

.section-heading {
  display: grid;
  gap: .75rem;
  max-width: 640px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
}

.section-heading p {
  margin: 0;
  color: var(--muted);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-200);
}

.experience-grid {
  display: grid;
  gap: 1.6rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.experience-card {
  background: var(--card);
  border: 1px solid var(--frosted-border);
  border-radius: 1.4rem;
  padding: 2.2rem 1.8rem;
  display: grid;
  gap: .9rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}

.experience-card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.experience-card p {
  margin: 0;
  color: var(--muted);
}

.experience-icon {
  font-size: 1.8rem;
}

.collection-highlight {
  position: relative;
}

.highlight-inner {
  display: grid;
  gap: clamp(2.4rem, 6vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: center;
  padding: clamp(2.4rem, 5vw, 4rem);
  border-radius: 2rem;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%),
    color-mix(in srgb, var(--card) 88%, rgba(255, 255, 255, 0.12) 12%);
  border: 1px solid var(--frosted-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  backdrop-filter: blur(22px);
}

.highlight-copy {
  display: grid;
  gap: 1rem;
}

.highlight-copy p {
  margin: 0;
  color: var(--muted);
}

.highlight-copy ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  display: grid;
  gap: .45rem;
}

.highlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .5rem;
}

.highlight-media {
  position: relative;
  border-radius: 1.6rem;
  min-height: clamp(240px, 40vw, 360px);
  background: linear-gradient(160deg, rgba(255, 105, 1, 0.6), rgba(117, 112, 255, 0.35)), url('assets/16-9/5.png') center/cover no-repeat;
  box-shadow: var(--shadow-md);
}

.catalog-highlight {
  margin: clamp(3.5rem, 6vw, 6rem) 0;
}

.catalog-highlight-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: center;
  padding: clamp(2.4rem, 5vw, 4rem);
  border-radius: 2rem;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 45%),
    color-mix(in srgb, var(--card) 90%, rgba(255, 255, 255, 0.08) 10%);
  border: 1px solid var(--frosted-border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

.catalog-highlight-copy {
  display: grid;
  gap: 1rem;
}

.catalog-highlight-copy p {
  margin: 0;
  color: var(--muted);
}

.catalog-highlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .5rem;
}

.catalog-highlight-media {
  min-height: clamp(220px, 36vw, 320px);
  border-radius: 1.6rem;
  background: linear-gradient(160deg, rgba(255, 105, 1, 0.45), rgba(117, 112, 255, 0.35));
  box-shadow: var(--shadow-md);
}

.catalog-filters {
  margin: clamp(1.5rem, 3vw, 2.5rem) auto;
  display: grid;
  gap: 1.6rem;

}

.page-produtos .catalog-filters {
  display: none;
}

.page-produtos .catalog-filters {
  display: none;
}

.filters-intro {
  display: grid;
  gap: .6rem;
}

.filters-intro h2 {
  margin: 0;
  font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem);
}

.filters-intro p {
  margin: 0;
  color: var(--muted);
}

.catalog-content {
  margin: 0 auto clamp(4rem, 6vw, 5rem);
  display: grid;
  gap: 1.8rem;
}

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.testimonial-grid {
  display: grid;
  gap: 1.6rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.testimonial-card {
  margin: 0;
  padding: 2rem;
  border-radius: 1.5rem;
  background: var(--card);
  border: 1px solid var(--frosted-border);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 1.2rem;
  backdrop-filter: blur(16px);
}

.testimonial-card blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.testimonial-card figcaption {
  display: grid;
  gap: .2rem;
  font-size: .95rem;
  color: var(--muted);
}

.testimonial-card strong {
  color: var(--text);
}

.newsletter-inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: clamp(2.4rem, 5vw, 4rem);
  border-radius: 2rem;
  background: color-mix(in srgb, var(--card) 80%, rgba(255, 255, 255, 0.15) 20%);
  border: 1px solid var(--frosted-border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px);
  align-items: center;
}

.newsletter-copy p {
  margin: 0;
  color: var(--muted);
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.newsletter-form input {
  flex: 1 1 220px;
  min-width: 220px;
  border-radius: 999px;
  border: 1px solid var(--frosted-border);
  background: color-mix(in srgb, var(--card-solid) 92%, rgba(255, 255, 255, 0.1) 8%);
  padding: .78rem 1.2rem;
  font-size: 1rem;
  color: var(--text);
  backdrop-filter: blur(12px);
}

.newsletter-form input::placeholder {
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

.newsletter-form button {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }
}


/* —— 顶栏空间与对齐（参照 Meta 风格） —— */

/* 提高上下高度，让 logo 视觉上“下移” */
.top-bar-inner {
  padding: 1.1rem 0;
  /* 原来是 .8rem，可再微调为 1.2rem/1.4rem */
  min-height: 72px;
  /* 保底高度，按钮与 Logo 更舒展 */
  align-items: center;
  /* 与 Logo 垂直居中对齐 */
}

/* 加大左右留白，让 logo 视觉上“右移” */
.top-bar .container {
  /* 原来是 padding: 0 2rem; 这里给更灵活的响应式留白 */
  padding: 0 clamp(1rem, 4vw, 3rem);
}

/* Logo 尺寸与按钮更一致，确保基线视觉对齐 */
.top-logo {
  height: 38px;
  /* 你按钮是 40px，这里略大一点更稳重；可调 40–48 */
  display: block;
  /* 去掉行内图片底部空隙带来的轻微错位 */
}

/* 亮/暗主题下只显示对应图标（你之前的需求，一并保留） */
.icon.sun {
  display: none;
}

.icon.moon {
  display: inline;
}

:root.light .icon.sun {
  display: inline;
}

:root.light .icon.moon {
  display: none;
}

/* 可选：小屏减少留白，避免拥挤 */
@media (max-width: 600px) {
  .top-bar-inner {
    padding: .9rem 0;
    min-height: 60px;
  }

  .top-logo {
    height: 32px;
  }

  .top-bar .container {
    padding: 0 1rem;
  }
}

/* 调整顶栏整体高度 */
.top-bar-inner {
  padding: 1.5rem 0;
  /* 上下空间更大，Logo 视觉下移 */
  min-height: 88px;
  /* 顶栏固定最小高度，比原来更高 */
  display: flex;
  align-items: center;
  /* 垂直居中对齐 Logo 和按钮 */
}

/* 控制左右间距，让 Logo 更靠右 */
.top-bar .container {
  padding: 0 clamp(2rem, 6vw, 5rem);
  /* 左右留白更大 */
}

/* Logo 尺寸和位置 */
.top-logo {
  height: 40px;
  /* 让 Logo 稍大，和 Meta 官网类似 */
  display: block;
  /* 去掉行内图片默认基线对齐问题 */
}

/* 让顶栏固定在顶部并支持平滑上/下收放 */
.top-bar {
  position: sticky;
  /* 或 position: fixed; top:0; 也可以 */
  top: 0;
  z-index: 1000;
  transform: translateY(0);
  transition: transform .24s ease;
  /* 平滑隐藏/出现 */
  will-change: transform;
}

/* 固定在最顶部，隐藏/出现靠 transform */
.top-bar {
  position: fixed;
  /* 从 sticky 改为 fixed，任何位置都能立刻出现 */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(0);
  transition: transform .24s ease;
  will-change: transform;
}

/* 让正文不被固定顶栏压住（高度用变量驱动） */
:root {
  --topbar-height: 88px;
}

/* 默认值，可由 JS 实测覆盖 */
body {
  padding-top: var(--topbar-height);
}

/* 建议：保持更高的顶栏空间（你之前的需求） */
.top-bar-inner {
  padding: 1.5rem 0;
  min-height: 88px;
  display: flex;
  align-items: center;
}

.top-bar .container {
  padding: 0 clamp(2rem, 6vw, 5rem);
}

.top-logo {
  height: 40px;
  display: block;
}

/* 顶栏已是 fixed：保持不变（若你还没改则沿用之前的 fixed 版本） */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(0);
  transition: transform .5s ease-in-out;
  will-change: transform;
}

/* 正文预留顶栏高度（已在前一步加过，保留） */
:root {
  --topbar-height: 88px;
}

/* JS 会实时更新 */
body {
  padding-top: var(--topbar-height);
}

/* —— 新增：遮挡罩，模拟“被顶栏挡住”的视觉 —— */
.top-cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  z-index: 999;
  /* 比内容高、比顶栏低（顶栏 1000） */
  background: var(--topbar-bg);
  /* 与顶栏同色以获得无缝遮挡 */
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease;
}

/* 顶栏滑下过程中开启遮挡；结束后淡出 */
.top-cover.on {
  opacity: 1;
}

/* 悬停：轻微放大 + 细微发光 */
.btn.icon-toggle:hover .icon {
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 45%, transparent));
}

/* 按下：有弹性的回按效果 */
.btn.icon-toggle:active .icon {
  transform: translate(-50%, -50%) scale(0.92);
  transition: transform .06s ease;
  /* 按下更快，松手回弹由上面的过渡处理 */
}

/* 减少动画偏好时，关闭大部分动效 */
@media (prefers-reduced-motion: reduce) {

  .btn.icon-toggle .icon,
  .btn.icon-toggle:hover .icon,
  .btn.icon-toggle:active .icon {
    transition: none;
    transform: translate(-50%, -50%);
    filter: none;
  }

  .logo-anim {
    animation: none !important;
    transform: none !important;
  }

  .logo-anim .logo-img,
  .logo-anim .top-logo {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
    transform: translateY(0) !important;
  }
}

.btn.icon-toggle:focus,
.btn.icon-toggle:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.product-count {
  margin: .5rem 0 0 auto;
  font-size: .95rem;
  font-weight: 600;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 70%, rgba(255, 255, 255, 0.14) 30%);
  border: 1px solid var(--frosted-border);
}

.product-count span {
  color: var(--muted);
  font-weight: 500;
}

/* 滚动时隐藏顶部栏 */
.top-bar.hide {
  transform: translateY(-100%);
}

/* 去掉浏览器内置 search 清除按钮 */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}


/* === 可点击指针优化：图片小手、文字 I-beam === */

/* 产品“图片” → 小手 */
.card .thumb {
  cursor: pointer;
}

/* 卡片内“文字区域” → I-beam（可选文字/复制更直觉） */
.card .card-title,
.card .card-body .muted {
  cursor: text;
}

/* 其它可点元素依然保持小手（如 Logo、主题切换、CTA、分页、按钮等） */
.logo-link,
.top-bar a,
.btn,
.btn-cta,
.btn.icon-toggle,
.pagination .page-btn,
.social-icons a,
.contact-lines a {
  cursor: pointer;
}

/* === 详情页：搜索结果头（左标题，右统计） === */
.search-header {
  display: flex;
  align-items: baseline;
  /* 标题与右侧文字基线对齐更美观 */
  justify-content: space-between;
  margin: .5rem 0 1rem;
}

.search-title {
  margin: 0;
  /* 去掉默认外边距，交由容器控制间距 */
}

/* #searchCount 使用了 .product-count 的样式外观，无需额外装饰
   这里只在需要时显示，不需要时由 JS 隐藏 */

/* === 点击水波纹 & 按压反馈 === */
.btn,
.btn-cta,
.page-btn,
.card {
  position: relative;
  /* ripple 需要的定位上下文 */
  overflow: hidden;
  /* 裁掉溢出的 ripple */
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 30%, #fff 0%);
  /* 暗色背景看得清；如需更亮可把 30% 调大 */
  transform: scale(0);
  opacity: .35;
  pointer-events: none;
  animation: ripple .5s ease-out forwards;
}

@keyframes ripple {
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* 轻微按压（配合 JS 的 .press 类） */
.btn.press,
.btn-cta.press,
.page-btn.press,
.card.press {
  transform: scale(.98);
  transition: transform .12s ease;
}

/* === 按压持有态（鼠标左键按住时保持缩小；松开恢复） === */
.holdable {
  transition: transform .12s ease;
  will-change: transform;
}

.holdable.is-pressing {
  transform: scale(0.96);
}

/* === 按住缩小、松开还原 === */
.holdable {
  transition: transform .12s ease;
  will-change: transform;
}

.holdable.is-pressing {
  transform: scale(0.96);
}

/* ========== Category Select 优化样式 ========== */

/* 桌面 & 移动通用：让字体更清晰 */
.filters select {
  font-size: 1rem;
  /* 从 .95rem 调大到 1rem，更易读 */
  font-weight: 500;
  /* 默认比普通文本稍粗 */
  color: var(--text);
  /* 正常项使用主题文字颜色 */
}

/* 默认选项 "Todas as categorias" 显示成提示感 */
#categorySelect option[value=""] {
  color: var(--muted);
  /* 灰色，提示语感 */
  font-weight: 600;
  /* 半粗体，强调入口 */
}

/* 分组标题 optgroup 更明显 */
#categorySelect optgroup {
  font-weight: 600;
  /* 主分类加粗 */
  color: var(--brand);
  /* 用品牌色突出主类 */
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

/* optgroup 下的具体子类 */
#categorySelect optgroup option {
  font-weight: 400;
  color: var(--text);
}

/* 移动端（小于 820px）时，让选择器更好点按 */
@media (max-width: 820px) {
  .filters select {
    font-size: 1.05rem;
    /* 再放大一点，触屏更舒适 */
    padding-left: 1.1rem;
  }
}

/* ===== Hero 轮播控件 ===== */

.hero-controls {
  position: absolute;
  bottom: clamp(2.4rem, 7vh, 3.6rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  pointer-events: none;
  z-index: 2;
}

/* 左右箭头按钮 */
.hero-prev,
.hero-next {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--frosted-border) 82%, transparent);
  background: color-mix(in srgb, rgba(10, 14, 22, .78) 78%, transparent);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  backdrop-filter: blur(14px) saturate(140%);
}

.hero-prev:hover,
.hero-next:hover,
.hero-prev:focus-visible,
.hero-next:focus-visible {
  background: color-mix(in srgb, var(--brand) 38%, rgba(10, 14, 22, .86));
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  transform: translateY(-2px);
  outline: none;
}

/* 中间小点容器 */
.hero-dots {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 26%, transparent);
  background: color-mix(in srgb, var(--text) 18%, transparent);
  opacity: .65;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease;
  cursor: pointer;
}

.hero-dot[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  opacity: 1;
  transform: scale(1.15);
}

@media (pointer: coarse) {
  .hero-prev,
  .hero-next {
    width: 54px;
    height: 54px;
  }

  .hero-controls {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media {
    animation: none;
    transition: none;
  }

  .hero-prev,
  .hero-next,
  .hero-dot {
    transition: none;
  }
}

:root.has-js .reveal-on-scroll {
  --reveal-delay: 0ms;
  --reveal-distance: 64px;
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity .9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay),
    transform .9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay);
  will-change: opacity, transform;
}

:root.has-js .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

:root.has-js.prefers-reduced-motion .reveal-on-scroll {
  transition: none;
  opacity: 1;
  transform: none;
}

/* ==== 顶栏尺寸调整（Logo 更大、更醒目） ==== */
.top-logo {
  height: 36px;
  /* ✅ 原 32 → 36px，更紧凑 */
  width: auto;
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  /* 从 0.4rem 调整到 1rem */
}


.top-bar .icon-toggle {
  width: 36px;
  /* 跟 logo 尺寸相衬 */
  height: 36px;
}

/* 顶栏出现/隐藏动画保持顺滑 */
.top-bar {
  transition: transform .25s ease;
}

.top-bar.hide {
  transform: translateY(-100%);
}