@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

    /* CSS Reset (Simplified) - 基础样式重置 */
    body, h1, h2, h3, p, ul, li, figure {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      box-sizing: border-box; /* 非常重要：让padding和border包含在元素总宽度和高度内 */
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      line-height: 1.6;
      background-color: #f4f4f4;
      color: #333;
    }

    ul {
      list-style: none; /* 移除列表默认点 */
    }

    a {
      text-decoration: none; /* 移除链接下划线 */
      color: inherit; /* 链接颜色继承父级 */
    }

    img {
      max-width: 100%; /* 图片不超过父容器 */
      display: block; /* 移除图片底部空白 */
    }

    /* 页面布局 */
    .container {
      margin: 0 auto;
      padding: 5px;
    }

    header {
      background-color: #fff;
      padding: 0 0 5px 0;
      text-align: center;
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
      border-radius: 10px;
    }

    header .logo {
      font-size: 2rem;
      font-weight: bold;
      color: #fff; /* 更改文字颜色以适应背景 */
      padding: 30px; /* 增加内边距 */
      border-radius: 10px 10px 0 0; /* 添加圆角 */
      background-image: url('https://img.liyao.sbs/file/1759008570587_已修改已修改窗帘布站姿五图3.png');
      background-size: cover;
      background-position: center;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
      background-blend-mode: overlay; /* 混合模式，使图片和颜色叠加 */
      aspect-ratio: 9 / 2;
      font-family: 'ZCOOL KuaiLe', sans-serif;
    }

    header p {
      font-size: 0.85rem;
      color: #ffffff;
      margin-top: 5px;
      font-family: 'Times New Roman', Times, serif;
    }

    /* 导航样式 - 根据新的筛选需求重新设计 */
    nav {
      border-top: 1px solid #eee;
      padding-top: 15px;
    }
    
    /* [修复 1] 使用 Flexbox 让 Label 和标签在同一行 */
    .filter-group {
      padding: 0 10px;
      display: flex;
      align-items: center; /* 垂直居中对齐 */
      flex-wrap: wrap; /* 允许标签换行 */
      margin-bottom: 5px;
    }
    .filter-group strong {
        color: #555;
        font-size: 0.9em;
        margin-right: 8px; /* Label 和标签之间的间距 */
        flex-shrink: 0; /* 防止 Label 被压缩 */
    }

    
    nav .filter-tags { /* 用于包裹标签的 flex 容器 */
        display: flex;
        flex-wrap: wrap; /* 允许标签换行 */
        gap: 8px; /* 标签间距 */
    }

#filter-style.style-card-group {
    background-color: #fcfcfc; /* 略微不同的背景色，区分与其他筛选器 */
    padding: 10px 10px 0 10px; /* 内边距 */
    border-radius: 0px; /* 圆角边框 */
    margin-top: 10px; /* 与上方筛选器的间隔 */
    border-top: 1px solid #eee; /* 顶部边框 */
}

#filter-style.style-card-group strong {
    display: block; /* 标题独占一行 */
    font-size: 1.15em; /* 标题字体略大 */
    margin-bottom: 10px; /* 标题与卡片标签的间距 */
    color: #2c3e50; /* 更深的主题色 */
    text-align: center; /* 标题居中 */
}

/* 针对包裹实际卡片标签的 div 样式 */
.filter-tags.style-card-tags {
    display: flex; /* 使用 flexbox 布局卡片 */
    flex-wrap: wrap; /* 允许卡片换行 */
    gap: 4px; /* 卡片之间的间距 */
    padding: 0 5px; /* 略微的内边距 */
    background-color: #fff;
}

/* 针对单个卡片标签的样式 */
/* 注意：这里仍然使用 .filter-tag 作为单个卡片的基类 */
.filter-tags.style-card-tags .filter-tag {
    flex-direction: column; /* 内容垂直排列 */
    background-color: #fff; /* 卡片背景色 */
    color: #555; /* 字体颜色 */
    border-radius: 4px; /* 圆角大于普通标签 */
    line-height: 1.3;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0; /* 防止卡片被压缩 */
    font-weight: 500;
}

.filter-tags.style-card-tags .filter-tag.active {
    background-color: #ffa500; /* 选中时的背景色 */
    color: #414141; /* 选中时的字体颜色 */
    border-color: #007bff;
    transform: scale(1.02); /* 选中时稍微放大和上移 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.filter-tags.style-card-tags .filter-tag:hover:not(.active) {
    background-color: #e6f7ff; /* 悬停时的背景色 */
    border-color: #91d5ff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}

/* 媒体查询：在大屏幕上增加卡片尺寸和数量 */
@media (min-width: 768px) {
    .filter-tags.style-card-tags .filter-tag {
        font-size: 1em;
    }
}

    nav a.filter-tag {
        display: inline-block;
        padding: 4px 8px;
        color: #495057; /* 默认文字颜色 */
        font-size: 0.85rem;
        flex-shrink: 0; /* 防止标签挤压 */
        cursor: pointer; /* 确保可点击 */
        border-radius: 4px;
    }

    nav a.filter-tag.active { /* 选中状态 */
      background-color: #00aaff;
      color: #fff;
    }
    nav a.filter-tag:hover:not(.active) { /* 悬停效果 (未选中时) */
        background-color: #d8dee3;
    }


    /* 商品列表 */
    .products {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(45%, 2fr)); /* 移动端双排 */
      gap: 5px; /* 商品卡片之间间距 */
    }

    .product-card {
      background-color: #fff;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease-in-out;
      display: flex; /* Flexbox 使得内容可以向下布局 */
      flex-direction: column;
      height: 100%; /* 确保卡片高度一致 */
    }

    .product-card:hover { /* 悬停效果 */
      transform: translateY(-5px);
    }

    .product-card img {
      width: 100%;
      height: auto; 
      aspect-ratio: 3 / 4; /* 维持 3:4 的宽高比 */
      object-fit: cover; /* 保持图片比例，裁剪填充 */
      object-position: center; /* 保证图片居中显示,避免裁剪失真*/
    }

    .product-info {
        padding: 10px;
        flex-grow: 1; /* 内容占据剩余空间 */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* 使得底部信息与顶部图片有间距 */
    }

    .product-name-price {
        display: flex;
        justify-content: space-between;
        align-items: baseline; /* 价格和名称基线对齐 */
        margin-bottom: 5px;
    }

    .product-name-price h2 { /* 商品名称 */
      font-size: 1.1rem;
      font-weight: bold;
      margin: 0;
      flex-grow: 1; /* 占据剩余空间 */
      line-height: 1.3;
      overflow: hidden; /* 防止文字溢出 */
      text-overflow: ellipsis; /* 文字溢出时显示省略号 */
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 限制2行 */
      -webkit-box-orient: vertical;
    }

    .product-name-price .price { /* 商品价格 */
      font-size: 1.1rem;
      font-weight: bold;
      color: #e64a19; /* 显眼的价格颜色 */
      margin-right: 10px; /* 价格与名称间距 */
      flex-shrink: 0; /* 防止价格被挤压 */
    }

    .product-tags, .product-season {
        font-size: 0.65rem;
        color: #777;
        margin-bottom: 3px;
    }
    
    .product-tags span, .product-season span {
        display: inline-block;
        margin-right: 5px;
        padding: 2px 6px;
        border-radius: 3px;
    }

    .product-tags span {
        background-color: #f7f7df;
    }

    .product-season span {
        background-color: #e1f5ff;
    }

    .product-season {
        margin-top: auto; /* 推到最底部 */
        padding-top: 5px;
        border-top: 1px dashed #eee;
    }


    /* 模态框 (Modal) */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      display: none; /* 初始隐藏 */
      flex-direction: column; /* 垂直布局，顶部导航和内容 */
      z-index: 1000;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0;
    }
    .modal.active {
        display: flex;
    }

    .modal-nav {
        position: sticky; /* 顶部悬浮 */
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
        backdrop-filter: blur(5px); /* 毛玻璃效果 */
        -webkit-backdrop-filter: blur(5px); /* Safari 支持 */
        z-index: 1001;
        display: flex;
        align-items: center;
        justify-content: space-between; /* 左右对齐 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .modal-nav .back-button {
        font-size: 1rem;
        font-weight: normal;
        color: #333;
        text-decoration: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border-radius: 5px;
        transition: background-color 0.2s;
        flex-shrink: 0; /* 防止被挤压 */
    }
    .modal-nav .back-button::before {
        content: '←';
        font-size: 1.4rem;
        line-height: 1;
    }

    .modal-nav .product-title {
        flex-grow: 1; /* 占据所有可用空间 */
        text-align: center; /* 文本居中 */
        font-size: 1.1rem;
        font-weight: bold;
        color: #333;
        white-space: nowrap; /* 防止文字换行 */
        overflow: hidden;
        text-overflow: ellipsis;
        /* 移除绝对定位相关样式 */
    }

    /* 新增一个右侧占位元素，与返回按钮宽度相同 */
    .modal-nav .right-placeholder {
        visibility: hidden; /* 隐藏但保留空间 */
        /* 复制 back-button 的样式以确保宽度一致 */
        font-size: 1rem;
        font-weight: normal;
        color: #333;
        text-decoration: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border-radius: 5px;
        flex-shrink: 0;
    }
    .modal-nav .right-placeholder::before {
        content: '←';
        font-size: 1.2rem;
        line-height: 1;
    }
    /* 新增模态框导航栏中的价格样式 */
    .modal-nav .modal-nav-price {
        font-size: 1.1rem;
        font-weight: bold;
        color: #e64a19; /* 显眼的价格颜色 */
        margin-left: 10px; /* 与名称的间距 */
        flex-shrink: 0; /* 防止价格被挤压 */
        padding: 5px 10px; /* 与返回按钮保持一致的内边距 */
        border-radius: 5px; /* 与返回按钮保持一致的圆角 */
    }

    .modal-content {
      max-width: 100%;
      min-width: 300px;
      max-height: calc(100% - 60px); /* 减去导航栏高度 */
      position: relative;
      margin: 0 auto; /* 居中显示 */
      padding-top: 10px; /* 留出顶部导航栏的空间 */
      flex-grow: 1; /* 占据剩余空间 */
      overflow-y: auto; /* 内容可滚动 */
      scrollbar-width: thin; /* Firefox 细滚动条 */
    }

    .modal-content img {
      width: 100%;
      height: auto;
    }

    /* 移除旧的 modal-close 样式 */
    /* .modal-close { ... } */

    .modal-header {
      margin-bottom: 10px;
      padding-top: 10px;
    }
    .modal-header h3 {
        font-size: 1.4rem;
        font-weight: bold;
        color: #333;
    }
    .modal-price {
        font-size: 1.3rem;
        font-weight: bold;
        color: #e64a19;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .modal-description {
        font-size: 0.95rem;
        color: #555;
        margin-top: 15px;
        padding: 10px;
        border-top: 1px dashed #eee;
    }


    footer {
      text-align: center;
      margin-top: 10px;
      padding: 5px 0;
      background-color: #ddd;
      font-size: smaller;
      font-weight: light;
      flex-shrink: 0; /* 防止 footer 缩小 */
    }

    /* 加载状态 */
    #loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        font-size: 1.2rem;
        color: #007bff;
        text-align: center;
    }
    #loading-overlay span.spinner {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        border: 0.25rem solid rgba(0,0,0,.15);
        border-right-color: #007bff;
        border-radius: 50%;
        animation: spinner-border .75s linear infinite;
        margin-bottom: 10px;
    }
    @keyframes spinner-border {
        to { transform: rotate(360deg); }
    }
    
    #loading-overlay.hidden {
        display: none;
    }

    /* 媒体查询 */
    @media (min-width: 768px) {
        header .logo {
          font-size: 3rem;
          font-weight: bold;
          color: #000000; /* 更改文字颜色以适应背景 */
          padding: 10px; /* 增加内边距 */
          border-radius: 10px; /* 添加圆角 */
          background-image: unset;
          background-size: unset;
          background-position: unset;
          background-color: unset; /* 半透明黑色背景 */
          background-blend-mode: unset; /* 混合模式，使图片和颜色叠加 */
          aspect-ratio: unset;
          font-family: 'ZCOOL KuaiLe', sans-serif;
        }
        header p {
          font-size: 1rem;
          color: #555555;
          margin-top: 5px;
          font-family: 'Times New Roman', Times, serif;
        }
        .container {
            max-width: 100%;
        }
        .products {
            grid-template-columns: repeat(auto-fit, minmax(200px, 6fr));
        }
        .modal-content {
            max-width: 600px;
        }   
    }
    @media (min-width: 992px) {
        .container {
            max-width: 100%; 
        }
        .products {
            grid-template-columns: repeat(auto-fit, minmax(200px, 8fr));
        }
    }