/* Editorial catalog layer. The existing components and data flow stay intact. */
body{background:var(--paper);color:var(--ink)}
.topbar{padding:24px 48px;border-color:var(--line)}
.brand{display:block;position:relative;overflow:hidden;width:126px;height:29px;flex:none}
.brand img{position:absolute;left:-20px;top:-19px;width:165px;max-width:none;height:auto;border-radius:0}
.audience{color:var(--green);font-size:.78rem;letter-spacing:.18em}
.catalog-intro{align-items:end;padding:70px 0 48px}
.eyebrow{margin-bottom:9px;color:var(--green);font-size:.8rem;letter-spacing:.2em}
h1{font-family:"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:clamp(2.56rem,4.48vw,4rem);line-height:1.2;font-weight:300;letter-spacing:.14em}
.title-dot{color:var(--green)}
.intro-caption{max-width:235px;margin:0 0 8px;color:var(--muted);font-size:.9rem;line-height:1.8;white-space:normal}
.catalog-controls{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:end;gap:28px;padding:0;background:transparent}
#categories{grid-column:1;grid-row:1;align-items:center;gap:25px;padding:0 0 15px;border-bottom:0}
.category{min-height:40px;padding:7px 12px;border:0;border-radius:0;color:var(--muted);font-size:.875rem;letter-spacing:.04em}
.category[aria-pressed=true]{display:flex;align-items:center;justify-content:center;min-height:27px;height:27px;padding:0 12px;border-radius:3px;background:var(--green);color:#fff;box-shadow:none}
.category:hover:not([aria-pressed=true]){background:transparent;color:var(--ink)}
.search-row{grid-column:2;grid-row:1;gap:9px;padding-bottom:1px}
.search-box{padding:0 10px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.search-box svg,.refresh svg{width:19px;height:19px}
input[type=search]{padding:10px 9px;font-size:.875rem}
input::placeholder{color:var(--muted)}
.refresh{min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:0;color:var(--ink);font-size:.8rem}
.refresh:hover,.primary-button:hover{color:var(--green);border-color:var(--green)}
.results-bar{padding:47px 0 17px}
.results-bar h2{font-weight:500;font-size:1rem;letter-spacing:.04em}
#result-count{color:var(--muted);font-size:.8rem}
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;row-gap:20px;padding:0 0 72px;border:0}
.product-card,.skeleton-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:13px}
.card-link{height:100%;display:flex;flex-direction:column}
.image-wrap{aspect-ratio:1.12;flex:none;margin:15px 15px 0;background:transparent;border:0;border-radius:0}
.image-wrap img{width:81%;height:81%;object-fit:contain;mix-blend-mode:multiply}
.card-link:hover .image-wrap img{transform:scale(1.035)}
.badges{left:14px;top:14px;gap:6px}
.badge{padding:4px 8px;border:1px solid var(--green);border-radius:0;background:var(--paper);color:var(--green);font-size:.7rem;font-weight:500;letter-spacing:.06em}
.badge-new,.badge-stock{background:var(--paper);color:var(--green);border-color:var(--green)}
.photo-count{right:10px;bottom:9px;border-radius:0;background:#faf7f2d9;color:var(--muted)}
.placeholder{color:var(--muted)}
.placeholder svg{stroke:var(--muted)}
.card-arrow{display:none}
.card-info{flex:1;padding:18px 19px 24px}
.card-category{margin:0 0 8px;color:var(--green);font-size:.76rem;letter-spacing:.08em}
.card-name{margin:0;color:var(--ink);font-size:1rem;font-weight:500;line-height:1.6}
.card-price{margin:13px 0 0;color:var(--ink);font-size:1.08rem;font-weight:600;line-height:1.5}
.price-note{color:var(--muted)}
.card-cta{display:flex;align-items:center;justify-content:space-between;min-height:51px;padding:11px 19px;border-top:1px solid var(--line);color:var(--green);font-size:.8rem;letter-spacing:.04em}
.card-link:hover .card-cta{background:#f4eee8}
.card-link:focus-visible{outline-offset:-5px}
.state-symbol{color:var(--green)}
.primary-button{border:1px solid var(--green);border-radius:0;background:var(--green);color:#fff}
.skeleton{margin:15px 15px 0;aspect-ratio:1.12;border-radius:0;background:linear-gradient(90deg,var(--wash) 25%,#f5f0ea 50%,var(--wash) 75%);background-size:200%}
.skeleton-card:after{margin:19px 19px 28px;border-radius:0}
footer{max-width:1184px;margin:0 auto;padding:24px 0 36px;border-color:var(--line)}
dialog{border:1px solid var(--line);border-radius:0}
dialog::backdrop{background:#302d2ab0}
.close-detail{border-radius:0}
.detail-gallery .image-wrap{margin:0;border-radius:0;aspect-ratio:1}
.gallery-controls button,.thumbnail{border-radius:0}
.gallery-controls button{color:var(--green)}
.thumbnail[aria-pressed=true]{outline-color:var(--green)}
.detail-category{color:var(--green)}
.detail-info h2{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-weight:500}
.detail-price{color:var(--ink)}
.local-preview{background:#f2e6d8;color:#6c493b;border-color:#dbc2ad}
@media(max-width:960px){
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .catalog-intro{padding:56px 0 38px}
  .catalog-controls{grid-template-columns:1fr;gap:15px}
  #categories{grid-column:1;grid-row:1}
  .search-row{grid-column:1;grid-row:2;width:100%;max-width:340px;margin-left:auto}
  .results-bar{padding-top:35px}
}
@media(max-width:680px){
  .topbar{padding:17px 20px}
  .brand{width:102px;height:23px}
  .brand img{left:-16px;top:-15px;width:133px}
  main{padding:0 20px}
  .catalog-intro{display:block;padding:43px 0 35px}
  h1{font-size:2.24rem}
  #categories{gap:19px;padding-bottom:8px}
  .category{font-size:.8rem}
  .search-row{max-width:none}
  .search-box{border-radius:0}
  .refresh{width:43px;border-radius:0}
  .results-bar{padding:31px 0 13px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:20px;padding-bottom:50px}
  .image-wrap{aspect-ratio:1.08;margin:9px 9px 0;border-radius:0}
  .card-info{padding:12px 12px 18px}
  .card-name{font-size:.9rem}
  .card-price{font-size:.96rem}
  .card-cta{min-height:43px;padding:9px 12px;font-size:.72rem}
  .badges{left:10px;top:10px}
  footer{margin:0 20px}
  dialog{border:0}
  .detail-layout{padding:70px 22px 32px}
}
@media(max-width:360px){h1{font-size:1.92rem}}