*{margin:0;padding:0;box-sizing:border-box}
:root{--orange:#e85d3a;--orange-light:#f4a261;--orange-bg:rgba(232,93,58,0.06);--navy:#37465f;--teal:#008080;--teal-light:#70c1b7;--warm-white:#fafaf8;--warm-gray:#e8e4dd;--warm-bg:#f0eeea;--dark-blue:#37465f;--red:#b31419;--zh-serif:'Noto Serif TC',serif;--zh-body:'LXGW WenKai TC','Noto Serif TC',serif}
body{font-family:'Quicksand',sans-serif;background:var(--warm-white);color:var(--navy);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:var(--navy)}

.ta-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:100}
.ta-nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px;min-height:78px}
.ta-logo{max-width:220px;width:100%}
.ta-nav-links{display:flex;align-items:center}
.ta-nav-item{display:flex;flex-direction:column;align-items:center;padding:10px 20px;text-decoration:none;font-size:13px;letter-spacing:3px;font-weight:600;color:var(--navy);opacity:.6;transition:all .3s}
.ta-nav-item:hover{opacity:1;color:#70c1b7}
.ta-nav-item.active{opacity:1;color:#70c1b7}
.ta-nav-item i{font-size:16px;margin-bottom:4px;opacity:.5;color:#70c1b7}
.ta-nav-extra{display:flex;align-items:center;gap:12px;margin-left:16px}
.pcard{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 12px;background:var(--teal);color:#fff;border-radius:20px;letter-spacing:.3px;white-space:nowrap}

.product-hero{max-width:1100px;margin:0 auto;padding:48px 40px 24px;text-align:center}
.product-hero h1{font-family:'DM Serif Display',serif;font-size:36px;color:var(--navy);font-weight:400;margin-bottom:6px;letter-spacing:-1px}
.product-hero h1 em{color:var(--orange);font-style:italic}
.product-hero .sub-zh{font-family:var(--zh-serif);font-size:16px;color:var(--orange-light);letter-spacing:3px;margin-bottom:4px}
.product-hero .sub-sc{font-family:var(--zh-body);font-size:13px;color:#bbb;letter-spacing:2px;margin-bottom:16px}
.product-hero .trust{font-size:12px;color:#aaa;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.trust-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);display:inline-block;margin-right:4px;vertical-align:middle}

.breadcrumb{max-width:1100px;margin:0 auto;padding:0 40px 12px;font-size:12px;color:#bbb}
.breadcrumb a{color:var(--orange)}

.tabs-bar{max-width:1100px;margin:0 auto;padding:0 40px 20px;display:flex;gap:6px;flex-wrap:wrap}
.tab-btn{font-size:12px;font-weight:600;padding:7px 16px;border:1px solid var(--warm-gray);border-radius:20px;background:transparent;color:#999;cursor:pointer;transition:all .2s;font-family:'Quicksand',sans-serif;letter-spacing:.3px}
.tab-btn:hover{border-color:var(--orange-light);color:var(--orange)}
.tab-btn.active{background:var(--orange);color:#fff;border-color:var(--orange)}
.tab-count{font-size:10px;opacity:.6;margin-left:2px}

.main-grid{max-width:1100px;margin:0 auto;padding:0 40px 40px;display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:start}

.cat-section{margin-bottom:36px}
.cat-section[hidden]{display:none}
.cat-header{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--warm-gray)}
.cat-header h2{font-family:'DM Serif Display',serif;font-size:20px;font-weight:400;color:var(--navy)}
.cat-header .cat-zh{font-family:var(--zh-serif);font-size:13px;color:var(--orange-light);letter-spacing:1px}
.cat-header .cat-count{font-size:11px;color:#ccc;margin-left:auto}

.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.p-card{border:1px solid var(--warm-gray);border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;transition:border-color .2s,transform .15s}
.p-card:hover{border-color:var(--orange-light);transform:translateY(-2px)}
.p-img-wrap{position:relative;padding-top:72%;overflow:hidden;background:var(--warm-bg)}
.p-img-wrap img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.p-card:hover .p-img-wrap img{transform:scale(1.03)}
.p-overlay{position:absolute;inset:0;background:rgba(55,70,95,.8);opacity:0;transition:opacity .25s;display:flex;align-items:center;justify-content:center;padding:16px}
.p-card:hover .p-overlay{opacity:1}
.p-overlay p{font-size:12px;color:#fff;text-align:center;line-height:1.6}
.p-code{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;padding:2px 6px;background:rgba(255,255,255,.85);border-radius:3px;color:#999;letter-spacing:.5px;z-index:2}
.p-cat-tag{position:absolute;top:6px;right:6px;font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:.3px;z-index:2}
.p-cat-tag.print{background:rgba(232,93,58,.1);color:#c44a28}
.p-cat-tag.display{background:rgba(0,128,128,.1);color:#008080}
.p-cat-tag.stationery{background:rgba(55,70,95,.1);color:#37465f}
.p-cat-tag.packaging{background:rgba(244,162,97,.15);color:#b87520}
.p-cat-tag.accessory{background:rgba(112,193,183,.15);color:#0f6e56}
.p-add{position:absolute;bottom:8px;right:8px;width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;border:none;font-size:18px;font-weight:700;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;transition:transform .15s;box-shadow:0 2px 8px rgba(232,93,58,.3)}
.p-add:hover{transform:scale(1.1)}
.p-body{padding:12px}
.p-body h3{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:2px}
.p-name-zh{font-family:var(--zh-body);font-size:12px;color:#888;margin-bottom:1px}
.p-name-sc{font-size:10px;color:#bbb;margin-bottom:8px}
.p-desc{font-size:11px;line-height:1.65;color:#999;margin-bottom:4px;display:none}
.p-desc-zh{font-family:var(--zh-body);font-size:11px;line-height:1.65;color:#aaa;display:none}
.p-card.expanded .p-desc,.p-card.expanded .p-desc-zh{display:block}
.p-read-more{font-size:10px;color:var(--orange);cursor:pointer;font-weight:600;margin-top:4px}

.sidebar{position:sticky;top:100px}
.sidebar-card{border:1px solid var(--warm-gray);border-radius:8px;padding:16px;background:#fff;margin-bottom:12px}
.sidebar-title{font-family:'DM Serif Display',serif;font-size:15px;color:var(--navy);margin-bottom:8px}
.sidebar-text{font-size:11px;color:#999;line-height:1.7;margin-bottom:10px}
.sidebar-cta{display:block;width:100%;font-size:13px;font-weight:600;padding:10px;background:var(--orange);color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:'Quicksand',sans-serif;text-align:center;transition:background .2s}
.sidebar-cta:hover{background:#d04e2e}
.cart-list{list-style:none;max-height:none;overflow:visible}
.cart-list li{padding:10px 0;border-bottom:1px solid #f0f0f0;animation:slideIn .3s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.cart-list .item-top{display:flex;align-items:center;gap:8px}
.cart-list .item-thumb{width:34px;height:34px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--warm-bg)}
.cart-list .item-icon{width:34px;height:34px;border-radius:6px;background:var(--warm-bg);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--navy);flex-shrink:0}
.cart-list .item-detail{flex:1;min-width:0}
.cart-list .item-name{font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-list .item-chi{font-size:10px;color:#bbb}
.cart-list .item-remove{background:none;border:none;color:#ddd;cursor:pointer;font-size:12px;padding:4px;transition:color .2s}
.cart-list .item-remove:hover{color:var(--red)}
.item-options{margin-top:6px;padding-left:42px}
.item-options .svc-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:5px}
.item-options .svc-btn{font-size:9px;padding:3px 8px;border:1px solid #ddd;border-radius:12px;background:#fff;color:#888;cursor:pointer;transition:all .2s;font-family:'Quicksand',sans-serif}
.item-options .svc-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.item-options .svc-btn:hover{border-color:var(--orange)}
.item-options .qty-row{display:flex;align-items:center;gap:6px}
.item-options .qty-row label{font-size:10px;color:#aaa}
.item-options .qty-input{width:65px;padding:3px 6px;border:1px solid #ddd;border-radius:4px;font-size:11px;text-align:center;font-family:'Quicksand',sans-serif}
.item-options .qty-input:focus{outline:none;border-color:var(--orange)}
.cart-empty{text-align:center;padding:16px 8px;font-size:11px;color:#ccc}
.cart-empty i{font-size:24px;margin-bottom:6px;display:block;opacity:.3}
.sidebar-count{font-size:10px;font-weight:700;background:var(--orange);color:#fff;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;margin-left:6px}
.enquiry-form{display:none}
.enquiry-form h5{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:8px}
.form-field{margin-bottom:6px}
.form-field label{display:block;font-size:10px;color:#999;margin-bottom:2px}
.form-field input,.form-field textarea{width:100%;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:12px;color:#333;font-family:'Quicksand',sans-serif}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--orange)}
.form-field textarea{resize:vertical;height:40px}
.required{color:var(--red);font-size:9px}
.btn-submit{display:block;width:100%;margin-top:8px;padding:10px;background:var(--navy);color:#fff;border:none;border-radius:5px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Quicksand',sans-serif}
.btn-submit:hover{background:#2a3548}
.submit-success{display:none;text-align:center;padding:16px 8px;color:var(--navy);font-size:13px}

.lb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:8000;align-items:center;justify-content:center;cursor:pointer}
.lb-overlay.show{display:flex}
.lb-overlay img{max-width:90vw;max-height:85vh;border-radius:8px;object-fit:contain}
.lb-close{position:fixed;top:20px;right:24px;font-size:32px;color:#fff;cursor:pointer;z-index:8001}
.lb-info{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);color:#fff;text-align:center;z-index:8001}
.lb-name{font-size:18px;font-weight:700}
.lb-chi{font-size:14px;opacity:.8;margin-top:4px}

.faq-sec{max-width:1100px;margin:0 auto;padding:40px 40px;border-top:1px solid var(--warm-gray)}
.sec-title{font-family:'DM Serif Display',serif;font-size:22px;color:var(--navy);font-weight:400;margin-bottom:4px}
.sec-sub{font-family:var(--zh-serif);font-size:13px;color:var(--orange);margin-bottom:16px;letter-spacing:2px}
.faq-inner{border-top:1px solid #e8e8e8}
details.faq-item{border-bottom:1px solid #eee}
details.faq-item summary{padding:12px 0;font-size:13px;font-weight:600;color:#444;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color .2s;font-family:'Quicksand',sans-serif;list-style:none}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:10px;color:#ccc;transition:transform .3s;flex-shrink:0;margin-left:10px}
details.faq-item[open] summary{color:var(--orange)}
details.faq-item[open] summary::after{transform:rotate(180deg);color:var(--orange)}
details.faq-item summary:hover{color:var(--orange)}
.faq-answer{padding-bottom:12px;font-size:12px;color:#888;line-height:1.7}
.faq-answer .zh{font-family:var(--zh-body);color:#aaa;margin-top:4px;font-size:11px}

.cta-sec{max-width:1100px;margin:0 auto;padding:40px;text-align:center}
.cta-box{background:var(--warm-bg);border-radius:10px;padding:32px 40px}
.cta-box h3{font-family:var(--zh-serif);font-size:18px;color:var(--navy);margin-bottom:4px}
.cta-box p{font-size:13px;color:#999;margin-bottom:16px}
.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta-btns a{font-size:13px;font-weight:600;padding:10px 24px;border-radius:6px;font-family:'Quicksand',sans-serif;transition:all .2s}
.cta-primary-btn{background:var(--orange);color:#fff}
.cta-primary-btn:hover{background:#d04e2e}
.cta-secondary-btn{background:#fff;color:var(--navy);border:1px solid var(--warm-gray)}
.cta-secondary-btn:hover{border-color:var(--orange)}

footer{border-top:1px solid var(--warm-gray);max-width:1100px;margin:0 auto;padding:36px 40px 20px}
.ft-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:start}
.ft-brand img{height:36px;margin-bottom:10px;display:block}
.ft-philosophy{font-family:var(--zh-serif);font-size:12px;color:var(--orange-light);letter-spacing:3px;line-height:1.8}
.ft-heading{font-family:'DM Serif Display',serif;font-size:15px;color:var(--navy);margin-bottom:8px}
.ft-text{font-size:11px;color:#888;line-height:2}
.ft-text a{color:var(--orange);font-weight:600}
.ft-addr{font-size:11px;color:#888;line-height:1.7;margin-bottom:10px}
.ft-bottom{margin-top:24px;padding-top:14px;border-top:1px solid var(--warm-gray);display:flex;justify-content:space-between;font-size:10px;color:#ccc}
.ft-tagline{font-family:'DM Serif Display',serif;font-size:12px;font-style:italic;color:var(--orange-light)}
.ft-kw{font-size:10px;color:#e0ddd8;text-align:center;margin-top:8px}

.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200;font-size:14px;font-weight:600;text-align:center;cursor:pointer}

@media(max-width:768px){
  .ta-nav{padding:0 20px;min-height:auto;flex-wrap:wrap}
  .ta-logo{max-width:150px;padding:16px 0}
  .ta-nav-links{width:100%;border-top:1px solid #eee}
  .ta-nav-item{flex:1;padding:8px 0;font-size:9px}
  .ta-nav-extra{display:none}
  .product-hero{padding:28px 20px 16px}
  .product-hero h1{font-size:26px}
  .breadcrumb,.tabs-bar{padding-left:20px;padding-right:20px}
  .main-grid{grid-template-columns:1fr;padding:0 20px 20px}
  .p-grid{grid-template-columns:1fr 1fr}
  .sidebar{position:static;display:none}
  .faq-sec,.cta-sec{padding:24px 20px}
  footer{padding:24px 20px 16px}
  .ft-grid{grid-template-columns:1fr;gap:16px}
  .mobile-bar{display:block}
}