:root{--tr-red:#DA3F3F;--tr-black:#1a1a1a;--tr-white:#ffffff;--tr-border:rgba(0,0,0,0.10);--tr-border2:rgba(0,0,0,0.18);--tr-muted:#888;--tr-hint:#bbb;--tr-bg:#ffffff;--tr-surface:#f5f5f5;--tr-ease:cubic-bezier(0.4, 0, 0.2, 1);--tr-font:'Jost', system-ui, -apple-system, sans-serif;--tr-radius:6px;--tr-radius-xl:20px}.traf-drawer *,.traf-drawer *::before,.traf-drawer *::after,.traf-trigger-bar *,.traf-trigger-bar *::before,.traf-trigger-bar *::after{box-sizing:border-box;margin:0;padding:0}.traf-trigger-bar{display:flex;align-items:center;gap:10px;padding:10px 0 14px}.traf-open-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;background:#fff;border:1px solid #ccc;border-radius:var(--tr-radius-xl);font-family:var(--tr-font);font-size:13px;font-weight:500;color:var(--tr-black);cursor:pointer;transition:border-color 0.15s}.traf-open-btn:hover{border-color:var(--tr-black)}.traf-backdrop{position:fixed;inset:0;background:rgb(0 0 0 / .4);z-index:99999;opacity:0;pointer-events:none;transition:opacity 0.3s var(--tr-ease)}.traf-backdrop.is-open{opacity:1;pointer-events:all}.traf-drawer{position:fixed;top:0;right:0;bottom:0;width:88vw;max-width:340px;background:#fff;z-index:100000;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s var(--tr-ease);font-family:var(--tr-font);-webkit-font-smoothing:antialiased;border-left:1px solid #eee;overflow:hidden}.traf-drawer.is-open{transform:translateX(0);box-shadow:-4px 0 24px rgb(0 0 0 / .12)}.traf-drawer.is-open{transform:translateX(0);box-shadow:-4px 0 24px rgb(0 0 0 / .12)}.traf-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee;flex-shrink:0;background:#fff;min-height:56px}.traf-drawer-title{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#000}.traf-drawer-header-right{display:flex;align-items:center;gap:12px}.traf-clear-link{font-size:12px;color:var(--tr-muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer;background:none;border:none;font-family:var(--tr-font);padding:0;transition:color 0.15s}.traf-clear-link:hover{color:#000}.traf-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;color:#000;cursor:pointer;flex-shrink:0;transition:background 0.15s}.traf-close-btn:hover{background:#f0f0f0}.traf-close-btn svg{display:block}.traf-drawer-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0}.traf-drawer-body::-webkit-scrollbar{width:3px}.traf-drawer-body::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}.traf-form{display:block}.traf-section{border-bottom:1px solid #eee}.traf-sec-header-row{display:flex;align-items:center;border-bottom:none}.traf-sec-header-row .traf-sec-btn{flex:1}.traf-clear-all-btn{flex-shrink:0;background:none;border:none;padding:0 20px;font-family:var(--tr-font);font-size:11px;color:var(--tr-muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;line-height:1}.traf-clear-all-btn:hover{color:#333}.traf-sec-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 20px;background:none;border:none;font-family:var(--tr-font);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#000;cursor:pointer;text-align:left}.traf-chevron{flex-shrink:0;transition:transform 0.25s var(--tr-ease);color:#aaa}.traf-sec-btn[aria-expanded="true"] .traf-chevron{transform:rotate(180deg)}.traf-sec-body{overflow:hidden;max-height:1000px;opacity:1;transition:max-height 0.28s var(--tr-ease),opacity 0.22s ease}.traf-sec-body.is-closed{max-height:0!important;opacity:0}.traf-pills{display:flex;flex-wrap:wrap;gap:8px;padding:2px 20px 16px}.traf-sr-input{position:absolute;opacity:0;width:0;height:0}.traf-pill{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid #ccc;border-radius:var(--tr-radius-xl);font-size:13px;font-weight:400;color:#000;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s;user-select:none;white-space:nowrap}.traf-pill.is-on{background:#000;border-color:#000;color:#fff}.traf-pill-count{font-size:11px;opacity:.55}.traf-size-grid{display:flex;flex-wrap:wrap;gap:8px;padding:2px 20px 16px}.traf-sz{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:7px 10px;border:1px solid #ccc;border-radius:var(--tr-radius);font-size:13px;color:#000;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s;user-select:none}.traf-sz.is-on{background:#000;border-color:#000;color:#fff}.traf-swatches{display:flex;flex-wrap:wrap;gap:12px 10px;padding:2px 20px 16px}.traf-swatch-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;user-select:none}.traf-swatch-circle{width:30px;height:30px;border-radius:50%;border:1.5px solid #fff0;display:block;transition:box-shadow 0.15s,transform 0.15s}.traf-swatch-item.is-on .traf-swatch-circle{box-shadow:0 0 0 2px #fff,0 0 0 4px #000;transform:scale(1.1)}.traf-swatch-name{font-size:10px;color:var(--tr-muted);line-height:1}.traf-price-box{padding:4px 20px 20px}.traf-price-labels{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:#000;margin-bottom:14px}.traf-slider-wrap{position:relative;height:34px;display:flex;align-items:center}.traf-track{position:absolute;left:0;right:0;height:3px;background:#eee;border-radius:3px}.traf-fill{position:absolute;height:3px;background:#000;border-radius:3px}.traf-range{position:absolute;width:100%;height:3px;opacity:0;cursor:pointer;-webkit-appearance:none}.traf-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border-bottom:1px solid #f0f0f0;cursor:pointer;user-select:none}.traf-toggle-row:last-child{border-bottom:none}.traf-toggle-label{font-size:13px;color:#000}.traf-toggle{position:relative;width:40px;height:22px;background:#ddd;border-radius:11px;flex-shrink:0;transition:background 0.2s}.traf-toggle.is-on{background:#000}.traf-toggle-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgb(0 0 0 / .2);transition:transform 0.2s}.traf-toggle.is-on .traf-toggle-knob{transform:translateX(18px)}@media (min-width:768px){.traf-drawer{left:0;right:auto;border-left:none;border-right:1px solid #eee;transform:translateX(-100%);width:340px;max-width:340px}.traf-drawer.is-open{transform:translateX(0);box-shadow:4px 0 24px rgb(0 0 0 / .1)}.traf-open-btn{font-size:14px;padding:10px 20px}}@media (min-width:1200px){.traf-drawer{width:360px;max-width:360px}}@media (prefers-reduced-motion:reduce){.traf-drawer,.traf-backdrop,.traf-chevron,.traf-toggle,.traf-toggle-knob{transition:none}}