/* Header + Bar front styles */
/* Header */
.trd2-header-front{ position:relative; width:100%; z-index:var(--trd2-z,10000); }
.trd2-header-front.sticky{ position:sticky; top:0; }
.trd2-header-front .trd2-h-inner{ height:var(--trd2-h,72px); display:flex; align-items:center; justify-content:space-between; gap:var(--trd2-gap,8px); padding:0 var(--trd2-pad,16px); backdrop-filter:blur(var(--trd2-blur,12px)); background:var(--trd2-surface,rgba(12,14,22,.72)); color:var(--trd2-text,#fff); border-bottom:1px solid var(--trd2-border,rgba(255,255,255,.08)); }
.trd2-header-front .trd2-logo{ color:var(--trd2-text); text-decoration:none; font-weight:600; letter-spacing:.2px; }
.trd2-header-front .trd2-actions{ display:flex; gap:10px; }
.trd2-header-front .trd2-act{ color:var(--trd2-text); opacity:.9; text-decoration:none; }
.trd2-header-front .trd2-search{ flex:1 1 560px; display:flex; align-items:center; justify-content:center; position:relative; }
.trd2-header-front .trd2-search input{ width:100%; max-width:680px; height:42px; border-radius:12px; border:1px solid var(--trd2-border); background:rgba(0,0,0,.25); color:var(--trd2-text); padding:0 14px; outline:none; touch-action: manipulation; }
@media (max-width:812px){ .trd2-header-front .trd2-search input{ font-size:16px !important; } }
.trd2-results{ position:absolute; top:calc(var(--trd2-h,72px) - 6px); left:50%; transform:translateX(-50%); width:clamp(280px,60vw,760px); background:var(--trd2-surface); border:1px solid var(--trd2-border); border-radius:14px; padding:8px; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.trd2-results .itm{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; text-decoration:none; color:var(--trd2-text); }
.trd2-results .itm:hover, .trd2-results .itm.active{ background:rgba(255,255,255,.08); }
.trd2-results .thumb{ width:40px; height:40px; border-radius:8px; background:#1a2236; object-fit:cover; }
.trd2-results .title{ flex:1 1 auto; font-size:14px; }
.trd2-results .price{ opacity:.9; font-size:13px; }

/* Bottom bar */
.trd-bbar{ position:fixed; left:0; right:0; bottom:var(--trd-off,0px); display:flex; justify-content:center; pointer-events:none; z-index:9999; }
.trd-bbar .trd-bbar-inner{ width:calc(100% - 16px); max-width:var(--trd-bar-w,9999px); height:var(--trd-h,72px); backdrop-filter:blur(var(--trd-blur,12px)); background:var(--trd-surface,rgba(12,14,22,.72)); color:var(--trd-text,#fff); border:1px solid var(--trd-border,rgba(255,255,255,.08)); border-radius:var(--trd-r,16px); padding:0 var(--trd-pad-x,12px); margin:8px; display:flex; align-items:center; gap:var(--trd-gap,10px); pointer-events:auto; }
.trd-bbtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:calc(20% - var(--trd-gap)/5); min-width:56px; height:100%; border:0; background:transparent; color:var(--trd-text); text-decoration:none; font:500 var(--trd-font,13px) system-ui; }
.trd-bbtn .trd-ico, .trd-bbtn svg{ font-size:var(--trd-ico,26px); width:1em; height:1em; }
.trd-bbtn .trd-ico{ position:relative; display:inline-flex; align-items:center; }
.trd-bbtn .trd-badge{ position:absolute; top:-6px; right:-12px; font-size:var(--trd-badge-font,10px); min-width:16px; height:16px; line-height:16px; display:inline-flex; align-items:center; justify-content:center; margin-left:6px; font-size:11px; background:var(--trd-active,#ffd400); color:#111; border-radius:999px; padding:0 6px; }
.trd-bbtn span{ opacity:.9; }
.trd-bbtn:focus{ outline:2px solid rgba(255,255,255,.18); border-radius:12px; }

/* Overlays */
.trd-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:9998; }
.trd-sheet{ position:fixed; left:50%; transform:translateX(-50%); bottom:12px; width:clamp(280px,92vw,720px); background:var(--trd-surface,rgba(12,14,22,.92)); border:1px solid var(--trd-border,rgba(255,255,255,.08)); border-radius:16px; box-shadow:0 18px 48px rgba(0,0,0,.35); z-index:10000; }
.trd-ovl-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--trd-border); color:#fff; }
.trd-ovl-body{ max-height:60vh; overflow:auto; padding:10px; }
.trd-ovl-foot{ padding:10px 14px; border-top:1px solid var(--trd-border); display:flex; align-items:center; justify-content:space-between; }
.trd-ovl-list{ list-style:none; margin:0; padding:0; }
.trd-ovl-list li{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; }
.trd-ovl-thumb img, .trd-ovl-thumb{ width:48px; height:48px; border-radius:10px; background:#141b2e; display:block; }
.trd-ovl-title{ color:#fff; text-decoration:none; }
.trd-ovl-meta{ color:rgba(255,255,255,.8); font-size:12px; }
.trd-ovl-remove{ margin-left:auto; width:30px; height:30px; border-radius:8px; border:1px solid var(--trd-border); background:transparent; color:#fff; cursor:pointer; }
.trd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border-radius:10px; border:1px solid var(--trd-border); background:#fff; color:#111; text-decoration:none; }
.trd-btn.ghost{ background:transparent; color:#fff; }
.trd-more-list a{ display:flex; align-items:center; gap:10px; padding:10px 12px; color:#fff; text-decoration:none; border-radius:10px; }
.trd-more-list a:hover{ background:rgba(255,255,255,.06); }
.trd-dot{ width:8px; height:8px; background:var(--trd-active,#ffd400); border-radius:999px; display:inline-block; }

/* Hide by device */
@media (max-width:767px){ .trd-bbar.no-mobile{ display:none !important; } }
@media (min-width:768px) and (max-width:1023px){ .trd-bbar.no-tablet{ display:none !important; } }
@media (min-width:1024px){ .trd-bbar.no-desktop{ display:none !important; } }

.trd-bbar .trd-sheet, .trd-bbar .trd-scrim{ pointer-events:auto; }

.trd-bbtn.trd-cart svg{ transform:scale(var(--trd-cart-scale,1.15)); transform-origin:center; }