/* ============================================================
   GAOQIAO gqtraffic.com — 分类目录页苹果风覆写 v1
   只覆写表现层，不改任何结构/数据/URL/Schema。
   目标: catalog-taxonomy-sidebar (Category Tree)
         products-container / views-row (产品网格)
         pager (分页)
   ============================================================ */

/* ---------- 布局骨架 ---------- */
.catalog-page--taxonomy .gaq-page-body{padding-top:8px}
.catalog-shell{width:min(1240px,100%);margin:0 auto}
.catalog-taxonomy-layout{
  display:grid;grid-template-columns:264px 1fr;gap:40px;align-items:start;
}

/* ---------- 左侧 Category Tree ---------- */
.catalog-taxonomy-sidebar{
  position:sticky;top:calc(var(--nav-h) + 24px);
  background:rgba(255,255,255,.92);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(22,48,70,.06);
  padding:26px 22px 18px;
}
.catalog-taxonomy-sidebar__head{margin-bottom:6px}
.catalog-kicker{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;
}
.catalog-taxonomy-sidebar__head h2{
  font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--fg);
  padding-bottom:14px;border-bottom:1px solid var(--hairline);
}

/* 旧 Drupal 容器全部透明化，只保留视觉流 */
.catalog-taxonomy-sidebar__body .filters-container,
.catalog-taxonomy-sidebar__body .filters--main--desktop,
.catalog-taxonomy-sidebar__body .faux-exposed-categories,
.catalog-taxonomy-sidebar__body .paragraph,
.catalog-taxonomy-sidebar__body .container,
.catalog-taxonomy-sidebar__body .row,
.catalog-taxonomy-sidebar__body [class*="col-"],
.catalog-taxonomy-sidebar__body .field-wysiwyg,
.catalog-taxonomy-sidebar__body .field,
.catalog-taxonomy-sidebar__body .field__items,
.catalog-taxonomy-sidebar__body .field__item{
  display:block;padding:0;margin:0;border:0;background:none;box-shadow:none;
  width:auto;max-width:none;float:none;position:static;
}

/* 隐藏交互残留元素 */
.catalog-taxonomy-sidebar__body .modal-close,
.catalog-taxonomy-sidebar__body .paragraph-top,
.catalog-taxonomy-sidebar__body .paragraph-scrollto,
.catalog-taxonomy-sidebar__body .visually-hidden{
  display:none !important;
}

/* 分组标题: fieldset-legend */
.catalog-taxonomy-sidebar__body legend{display:block;width:100%;padding:0;border:0}
.catalog-taxonomy-sidebar__body .fieldset-legend{
  display:block;margin:20px 0 8px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-faint);
}
.catalog-taxonomy-sidebar__body .filters--main--desktop:first-child .fieldset-legend{margin-top:6px}

/* 分组列表 */
.catalog-taxonomy-sidebar__body ul.product-categories{
  list-style:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:0;
}
.catalog-taxonomy-sidebar__body ul.product-categories li{margin:0;padding:0}
.catalog-taxonomy-sidebar__body ul.product-categories a{
  display:block;position:relative;
  font-size:14px;font-weight:500;color:var(--fg-dim);line-height:1.35;
  padding:7px 10px 7px 20px;border-radius:9px;
  transition:color .22s ease,background .22s ease;
}
.catalog-taxonomy-sidebar__body ul.product-categories a::before{
  content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--blue);opacity:.45;transition:all .22s ease;
}
.catalog-taxonomy-sidebar__body ul.product-categories a:hover{
  color:var(--fg);background:var(--accent-soft);
}
.catalog-taxonomy-sidebar__body ul.product-categories a:hover::before{
  background:var(--accent);opacity:1;transform:translateY(-50%) scale(1.35);
}
/* 当前页所在分组链接高亮（URL 前缀匹配由浏览器 :focus 无法做到，靠 hover 即可） */

/* ---------- 右侧产品网格 ---------- */
.catalog-taxonomy-main{min-width:0}
.catalog-taxonomy-main .products-container{display:block}

.catalog-taxonomy-main .views-row-container.view-content{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}

/* 卡片本体（a.anchor-block 是整卡链接） */
.catalog-taxonomy-main .views-row{
  display:block;height:100%;
}
.catalog-taxonomy-main .views-row a.anchor-block{
  display:flex;flex-direction:column;height:100%;
  background:var(--bg-card);border:1px solid var(--hairline);
  border-radius:22px;overflow:hidden;
  box-shadow:0 6px 24px rgba(22,48,70,.05);
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;
}
.catalog-taxonomy-main .views-row a.anchor-block:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(22,48,70,.12);
  border-color:rgba(47,111,178,.28);
}

/* 图片区 */
.catalog-taxonomy-main .views-field-field-product-images{
  background:linear-gradient(150deg,var(--bg-soft),#fff);
  border-bottom:1px solid var(--hairline);
  padding:26px;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;
}
.catalog-taxonomy-main .views-field-field-product-images .field-content{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
}
.catalog-taxonomy-main .views-field-field-product-images img{
  width:auto !important;height:auto !important;
  max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(22,48,70,.12));
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.catalog-taxonomy-main .views-row a.anchor-block:hover .views-field-field-product-images img{
  transform:scale(1.06);
}

/* 标题 + 型号 */
.catalog-taxonomy-main .views-field-title{
  padding:18px 20px 4px;
}
.catalog-taxonomy-main .views-field-title .field-content{
  font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.catalog-taxonomy-main .views-field-field-product-brands{
  padding:0 20px 18px;
}
.catalog-taxonomy-main .views-field-field-product-brands .field-content{
  font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fg-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.catalog-taxonomy-main .views-row a.anchor-block:hover .views-field-title .field-content{
  color:var(--blue);
}

/* ---------- 分页 ---------- */
.catalog-taxonomy-main nav.pager{
  margin-top:44px;display:flex;justify-content:center;border:0;padding:0;background:none;
}
.catalog-taxonomy-main nav.pager .pager__items{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  list-style:none;margin:0;padding:0;
}
.catalog-taxonomy-main nav.pager .pager__items a,
.catalog-taxonomy-main nav.pager .pager__items span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;
  font-size:14px;font-weight:500;color:var(--fg-dim);
  border:1px solid var(--hairline);border-radius:12px;background:#fff;
  transition:all .25s ease;
}
.catalog-taxonomy-main nav.pager .pager__items a:hover{
  border-color:var(--blue);color:var(--blue);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(47,111,178,.15);
}
.catalog-taxonomy-main nav.pager .pager__items span{
  background:var(--fg);color:#fff;border-color:var(--fg);font-weight:600;
}
/* “237条”总数提示改成胶囊 */
.catalog-taxonomy-main nav.pager .pager__items a.a1:first-child{
  border-style:dashed;color:var(--fg-faint);cursor:default;pointer-events:none;
  background:var(--bg-soft);
}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .catalog-taxonomy-layout{grid-template-columns:220px 1fr;gap:28px}
  .catalog-taxonomy-main .views-row-container.view-content{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .catalog-taxonomy-layout{grid-template-columns:1fr;gap:24px}
  .catalog-taxonomy-sidebar{position:static;padding:20px 18px 12px}
  /* 手机上树折叠为横向滚动 chip 条，节省纵向空间 */
  .catalog-taxonomy-sidebar__body ul.product-categories{
    flex-direction:row;flex-wrap:wrap;gap:8px;
  }
  .catalog-taxonomy-sidebar__body ul.product-categories a{
    padding:8px 14px;border:1px solid var(--hairline);border-radius:980px;font-size:13px;
  }
  .catalog-taxonomy-sidebar__body ul.product-categories a::before{display:none}
  .catalog-taxonomy-sidebar__body .fieldset-legend{margin:14px 0 6px}
}
@media (max-width:560px){
  .catalog-taxonomy-main .views-row-container.view-content{grid-template-columns:1fr 1fr;gap:12px}
  .catalog-taxonomy-main .views-field-field-product-images{padding:16px}
  .catalog-taxonomy-main .views-field-title{padding:14px 14px 2px}
  .catalog-taxonomy-main .views-field-title .field-content{font-size:13.5px}
  .catalog-taxonomy-main .views-field-field-product-brands{padding:0 14px 14px}
}
@media (max-width:400px){
  .catalog-taxonomy-main .views-row-container.view-content{grid-template-columns:1fr}
}