/* TLE Store Catalog — everything is scoped under .tlec so it sits inside any theme. */
.tlec{
  --tlec-bg:#F5F7FB; --tlec-surface:#FFFFFF; --tlec-tile:#EEF2F8; --tlec-ink:#16203A; --tlec-muted:#5B6579; --tlec-line:#DCE2EC;
  --tlec-accent:#1D5FC4; --tlec-accent-soft:#E3ECFA; --tlec-on-accent:#FFFFFF; --tlec-sun:#FFD25A; --tlec-sun-ink:#3A2A00;
  --tlec-mto:#7A4FD0; --tlec-mto-soft:#EFE8FC; --tlec-ship:#13805A; --tlec-ship-soft:#E2F4EC;
  --tlec-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --tlec-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tlec-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  box-sizing:border-box; color:var(--tlec-ink); font:15px/1.5 var(--tlec-body);
  background:var(--tlec-bg); border-radius:20px; padding:28px clamp(16px,3vw,32px) 24px; margin-block:24px;
  max-width:1240px; margin-inline:auto; width:100%;
}
.tlec *,.tlec *::before,.tlec *::after{box-sizing:border-box}
.tlec p{margin:0}

/* Neutralise theme button/input styling inside the catalog. */
.tlec button,.tlec input,.tlec select{all:unset;box-sizing:border-box;font-family:var(--tlec-body);color:var(--tlec-ink)}
.tlec button{cursor:pointer}
.tlec :focus-visible{outline:3px solid var(--tlec-accent);outline-offset:2px}
.tlec .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.tlec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.tlec .tlec-eyebrow{font:600 12px/1 var(--tlec-body);letter-spacing:.12em;text-transform:uppercase;color:var(--tlec-muted)}
.tlec .tlec-lede{color:var(--tlec-muted);max-width:64ch;font-size:16px}
.tlec-stats{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--tlec-muted)}
.tlec-stats b{font:500 15px var(--tlec-mono);color:var(--tlec-ink);font-variant-numeric:tabular-nums}

/* Department bar */
.tlec-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding-block:12px;border-bottom:1px solid var(--tlec-line);
  position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:20;background:var(--tlec-bg)}
.tlec-depts{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 520px;min-width:0}
.tlec .tlec-dept{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--tlec-line);background:var(--tlec-surface);
  font:600 14px var(--tlec-body);padding:8px 14px;border-radius:999px;white-space:nowrap}
.tlec .tlec-dept .tlec-n{font:500 12px var(--tlec-mono);color:var(--tlec-muted)}
.tlec .tlec-dept[aria-pressed="true"]{background:var(--tlec-ink);border-color:var(--tlec-ink);color:var(--tlec-bg)}
.tlec .tlec-dept[aria-pressed="true"] .tlec-n{color:inherit;opacity:.7}
.tlec-tools{display:flex;gap:8px;flex:1 1 300px;min-width:0}
.tlec-search{flex:1;min-width:0;position:relative;display:block}
.tlec .tlec-search input{display:block;width:100%;font-size:15px;background:var(--tlec-surface);border:1px solid var(--tlec-line);
  border-radius:999px;padding:9px 14px 9px 36px}
.tlec-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--tlec-muted);stroke-width:2;fill:none}
.tlec .tlec-sort{display:block;font:500 14px var(--tlec-body);background:var(--tlec-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6579' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--tlec-line);border-radius:999px;padding:9px 34px 9px 14px;white-space:nowrap}

/* Type chips */
.tlec-chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:16px}
.tlec .tlec-chip{border:1px dashed var(--tlec-line);color:var(--tlec-muted);font:500 13px var(--tlec-body);padding:5px 11px;border-radius:999px}
.tlec .tlec-chip[aria-pressed="true"]{border-style:solid;border-color:var(--tlec-accent);background:var(--tlec-accent-soft);color:var(--tlec-accent)}
.tlec .tlec-count{color:var(--tlec-muted);font-size:13px;padding-block:12px 14px}
.tlec-count b{font:500 13px var(--tlec-mono);color:var(--tlec-ink)}

/* Grid and cards */
.tlec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.tlec-card{display:flex;min-width:0}
.tlec-card[hidden]{display:none!important}
.tlec .tlec-open{display:flex;flex-direction:column;width:100%;background:var(--tlec-surface);border:1px solid var(--tlec-line);
  border-radius:14px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;text-align:left}
.tlec .tlec-open:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(16,32,64,.45)}
.tlec-ph{position:relative;display:grid;place-items:center;aspect-ratio:1/1;background:var(--tlec-tile);max-width:100%;width:100%}
.tlec .tlec-ph img{width:100%;height:100%;object-fit:contain;display:block;margin:0;border:0;border-radius:0;box-shadow:none;max-width:100%}
.tlec-fallback{font:600 34px var(--tlec-display);color:var(--tlec-muted);opacity:.55}
.tlec-badges{position:absolute;left:8px;top:8px;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100% - 16px)}
.tlec-badge{font:600 10.5px/1 var(--tlec-body);letter-spacing:.04em;text-transform:uppercase;padding:5px 7px;border-radius:6px}
.tlec-badge--mto{background:var(--tlec-mto-soft);color:var(--tlec-mto)}
.tlec-badge--ship{background:var(--tlec-ship-soft);color:var(--tlec-ship)}
.tlec-badge--pre{background:var(--tlec-accent-soft);color:var(--tlec-accent)}
.tlec-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:12px 14px 14px;min-width:0}
.tlec-name{font:600 15px/1.3 var(--tlec-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tlec-meta{font-size:13px;color:var(--tlec-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlec-price{margin-top:auto;padding-top:4px}
.tlec-price span{font:500 15px var(--tlec-mono);font-variant-numeric:tabular-nums;background:var(--tlec-sun);color:var(--tlec-sun-ink);padding:2px 8px;border-radius:6px}
.tlec-price span.tlec-na{background:transparent;color:var(--tlec-muted);padding:0;font-family:var(--tlec-body);font-size:13px}
.tlec .tlec-empty{grid-column:1/-1;text-align:center;color:var(--tlec-muted);padding:48px 0}
.tlec .tlec-foot{color:var(--tlec-muted);font-size:13px;border-top:1px solid var(--tlec-line);margin-top:28px;padding-top:16px}

/* Product detail dialog */
.tlec-dialog{border:none;padding:0;border-radius:18px;background:var(--tlec-surface);color:var(--tlec-ink);
  width:min(880px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);font:15px/1.5 var(--tlec-body)}
.tlec-dialog::backdrop{background:rgba(8,14,28,.55)}
.tlec-dlg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.tlec-dinfo{display:flex;flex-direction:column;gap:14px;min-width:0;padding:26px 26px 24px}
.tlec-dbadges{position:static}
.tlec .tlec-dname{font:600 26px/1.15 var(--tlec-display);margin:0;color:var(--tlec-ink);text-wrap:balance;letter-spacing:0;text-transform:none}
.tlec .tlec-ddesc{color:var(--tlec-muted)}
.tlec-specs{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:0}
.tlec-specs dt{color:var(--tlec-muted);font-weight:500;margin:0}
.tlec-specs dd{margin:0;min-width:0}
.tlec-swatches{display:flex;flex-wrap:wrap;gap:5px}
.tlec-swatches span{font-size:12px;border:1px solid var(--tlec-line);border-radius:999px;padding:2px 8px}
.tlec .tlec-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--tlec-accent);color:var(--tlec-on-accent);
  text-decoration:none;font-weight:600;padding:11px 18px;border-radius:999px;border:0;box-shadow:none}
.tlec .tlec-cta:hover{color:var(--tlec-on-accent);filter:brightness(1.08)}
.tlec .tlec-close{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--tlec-line);background:var(--tlec-surface);border-radius:50%;font-size:20px;line-height:1}
.tlec-note{font-size:12px;color:var(--tlec-muted)}

/* Some themes style every button with high-specificity selectors; hold our look regardless. */
.tlec .tlec-dept,.tlec .tlec-chip,.tlec .tlec-open,.tlec .tlec-close{
  text-transform:none!important;letter-spacing:normal!important;text-decoration:none!important;box-shadow:none;min-height:0!important;line-height:1.3!important}
.tlec .tlec-dept,.tlec .tlec-dept:hover,.tlec .tlec-dept:focus,.tlec .tlec-dept:active{background:var(--tlec-surface)!important;color:var(--tlec-ink)!important;border:1px solid var(--tlec-line)!important;padding:8px 14px!important;font:600 14px/1.3 var(--tlec-body)!important;border-radius:999px!important}
.tlec .tlec-dept[aria-pressed="true"],.tlec .tlec-dept[aria-pressed="true"]:hover,.tlec .tlec-dept[aria-pressed="true"]:focus{background:var(--tlec-ink)!important;border-color:var(--tlec-ink)!important;color:var(--tlec-bg)!important}
.tlec .tlec-chip,.tlec .tlec-chip:hover,.tlec .tlec-chip:focus,.tlec .tlec-chip:active{background:transparent!important;color:var(--tlec-muted)!important;border:1px dashed var(--tlec-line)!important;padding:5px 11px!important;font:500 13px/1.3 var(--tlec-body)!important;border-radius:999px!important}
.tlec .tlec-chip[aria-pressed="true"],.tlec .tlec-chip[aria-pressed="true"]:hover,.tlec .tlec-chip[aria-pressed="true"]:focus{background:var(--tlec-accent-soft)!important;color:var(--tlec-accent)!important;border:1px solid var(--tlec-accent)!important}
.tlec .tlec-open,.tlec .tlec-open:hover,.tlec .tlec-open:focus,.tlec .tlec-open:active{background:var(--tlec-surface)!important;color:var(--tlec-ink)!important;border:1px solid var(--tlec-line)!important;padding:0!important;border-radius:14px!important;font:15px/1.5 var(--tlec-body)!important;width:100%!important;height:auto!important}
.tlec .tlec-close,.tlec .tlec-close:hover,.tlec .tlec-close:focus{background:var(--tlec-surface)!important;color:var(--tlec-ink)!important;border:1px solid var(--tlec-line)!important;padding:0!important;border-radius:50%!important;font-size:20px!important}
.tlec .tlec-open:focus-visible,.tlec .tlec-dept:focus-visible,.tlec .tlec-chip:focus-visible,.tlec .tlec-close:focus-visible{outline:3px solid var(--tlec-accent)!important;outline-offset:2px!important}
.tlec .tlec-search input,.tlec .tlec-search input:focus{background-color:var(--tlec-surface)!important;color:var(--tlec-ink)!important;border:1px solid var(--tlec-line)!important;padding:9px 14px 9px 36px!important;border-radius:999px!important;font:15px/1.3 var(--tlec-body)!important;height:auto!important;max-width:none!important}
.tlec .tlec-sort{background-color:var(--tlec-surface)!important;color:var(--tlec-ink)!important;border:1px solid var(--tlec-line)!important;padding:9px 34px 9px 14px!important;border-radius:999px!important;font:500 14px/1.3 var(--tlec-body)!important;height:auto!important}
.tlec .tlec-name{color:var(--tlec-ink)!important}

@media (max-width:680px){
  .tlec{border-radius:0;padding-inline:16px}
  .tlec-bar{position:static}
  .tlec-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .tlec-body{padding:10px 11px 12px}
  .tlec-dlg{grid-template-columns:1fr}
  .tlec-dimg{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.tlec .tlec-open{transition:none}.tlec .tlec-open:hover{transform:none}}