/* public/catalog/catalog.css — self-contained styles for the PUBLIC catalog storefront.
   No dependency on tenant-admin CSS. Dark default; accent is overridable per-catalog via --accent. */
:root{
  --bg:#0a1220; --bg-2:#0c1626; --bg-3:#0e1c2e; --line:#1d3149; --line-2:#23405f;
  --text:#eaf2fb; --text-2:#aebfd0; --text-3:#7c90a6;
  --accent:#12d39a; --accent-ink:#04211a; --buy:#ff9900; --buy-ink:#0a0a0a;
  --radius:16px; --shadow:0 18px 40px -22px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ── Header ─────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:rgba(10,18,32,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;color:#fff;flex:none}
.brand img{height:30px;width:auto;border-radius:6px}
.brand .os{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:30px;padding:0 8px;border-radius:7px;background:var(--accent);color:var(--accent-ink);font-weight:900}
.head-search{flex:1;max-width:520px;position:relative}
.head-search input{width:100%;height:40px;padding:0 14px 0 38px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--text);font-size:14px}
.head-search input:focus{outline:none;border-color:var(--accent)}
.head-search i{position:absolute;left:13px;top:12px;color:var(--text-3)}
.head-spacer{flex:1}
.head-link{font-size:13.5px;color:var(--text-2)}
.head-link:hover{color:#fff}

/* ── Adaptive shell modes (set on <html> by index.html) ────────────────────────────────────
   cat-public : anonymous / public site template → standalone light header, no OS.TV shell
   cat-shell  : logged-in OS.TV app             → OS.TV sidebar + header (design-system CSS loaded); hide the standalone header
   cat-embed  : ?embed=1                          → bare content for embedding (modal / iframe / public template) */
/* cat-shell = load like other modules (OS.TV sidebar + header, plus the storefront's own search sub-bar).
   cat-embed = bare for embedding: hide the OS.TV shell chrome, keep the storefront header. */
html.cat-embed #sidebarContainer, html.cat-embed #osHeader { display:none !important; }
html.cat-shell #view { max-width:1200px; }

/* Embed mode (?embed=1): storefront rendered inside a modal/iframe. Keep the branded header + search;
   the Home link is removed from the markup. Just tighten top spacing. */
.embed .page{padding-top:10px}
.embed .crumbs{margin-top:0}

/* ── Generic ───────────────────────────────────────── */
.page{padding:28px 0 60px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3);margin:16px;flex-wrap:wrap}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-size:9px}
.h1{font-size:27px;font-weight:800;color:#fff;margin:0 0 6px}
.sub{color:var(--text-2);font-size:14.5px;margin:0 0 22px;max-width:640px}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);text-transform:capitalize}
.muted{color:var(--text-3)}
.loading,.empty{text-align:center;padding:60px 20px;color:var(--text-3)}
.empty i{font-size:40px;opacity:.4;display:block;margin-bottom:14px}
.empty-title{font-size:18px;color:var(--text);margin-bottom:6px}

/* ── Catalog list cards ────────────────────────────── */
.cat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.cat-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .15s,transform .15s;display:flex;flex-direction:column}
.cat-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.cat-card .banner{height:110px;background:radial-gradient(circle at 50% 30%,#12233a,#0a1220);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.cat-card .banner img{max-height:60px}
.cat-card .banner .ph{font-size:30px;color:var(--accent)}
.cat-card .body{padding:16px 17px 18px}
.cat-card h3{margin:0 0 6px;font-size:18px;font-weight:800;color:#fff}
.cat-card p{margin:0 0 12px;font-size:13px;color:var(--text-2);min-height:2.4em}
.cat-card .meta{display:flex;gap:14px;font-size:12px;color:var(--text-3)}
.cat-card .meta b{color:var(--text)}

/* ── Storefront layout ─────────────────────────────── */
.store{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start}
.cats{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:10px;position:sticky;top:84px}
.cats h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:6px 10px 8px}
.cat-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:8px;color:var(--text-2);font-size:14px;cursor:pointer}
.cat-link:hover{background:var(--bg-3);color:#fff}
.cat-link.active{background:var(--accent);color:var(--accent-ink);font-weight:700}
.cat-link.child{padding-left:24px;font-size:13.5px}
.cat-link .n{font-size:11px;color:var(--text-3)}
.cat-link.active .n{color:var(--accent-ink)}

/* ── Item grid ─────────────────────────────────────── */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.item-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s;cursor:pointer}
.item-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.item-card .imgwrap{position:relative;background:radial-gradient(circle at 50% 40%,#12233a,#0a1220);padding:22px;display:flex;align-items:center;justify-content:center;min-height:170px}
.item-card .imgwrap img{max-width:150px;max-height:150px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
.item-card .imgwrap .ph{font-size:38px;color:var(--text-3)}
.item-card .star{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);padding:3px 8px;border-radius:6px}
.item-card .body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.item-card .type{font-size:11px;color:var(--text-3);text-transform:capitalize;margin-bottom:4px}
.item-card h3{margin:0 0 8px;font-size:15px;font-weight:700;color:#fff;line-height:1.3}
.item-card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.item-card .price{font-size:16px;font-weight:800;color:#fff}
.item-card .price small{font-size:11px;color:var(--text-3);font-weight:500}
.item-card .view{font-size:12.5px;color:var(--accent);font-weight:700}

/* ── Item detail ───────────────────────────────────── */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
.detail .gallery{background:radial-gradient(circle at 50% 40%,#12233a,#0a1220);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.detail .gallery .ph{font-size:64px;color:var(--text-3)}
/* EVERY slide — photo or video — is forced into the SAME fullsize 16:9 box, edge-to-edge (object-fit:cover, no
   letterboxing). [data-wwbn-play] (wwbn-video-player.js) also needs this explicit box for another reason: its
   inline-play swap absolutely positions the iframe, which would otherwise collapse the container to 0 height.
   Same aspect-ratio/object-fit convention as every other WWBNPlayer consumer (channel-manager .mn-vthumb/.cm-thumb). */
.detail .gallery .gallery-box{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
.detail .gallery .gallery-box img{width:100%;height:100%;object-fit:cover;filter:none}
.detail .gallery .gallery-box[data-wwbn-play]{cursor:pointer}
/* Photo/Video slide switcher — only built when an item has BOTH image_url and video_url (see catalog.js). */
.detail .gallery .gallery-slides{width:100%}
.detail .gallery .gallery-slide[hidden]{display:none}
.detail .gallery .gallery-dots{display:flex;gap:9px;justify-content:center}
.detail .gallery .gdot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:var(--line-2,#33506e);cursor:pointer;transition:.15s}
.detail .gallery .gdot.on{background:var(--accent);transform:scale(1.2)}
.detail .gallery .gdot:hover{background:var(--accent)}
/* "Video available" badge on the PHOTO slide — a plain thumbnail gave no hint a video existed. Jumps straight to
   the video slide (shares [data-goto] delegation with the nav dots, see bindGallerySlides() in catalog.js) — not
   a .gdot itself, so it never joins that NodeList / shifts its on-state indexing. */
.detail .gallery .gallery-video-badge{position:absolute;bottom:12px;right:12px;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;z-index:2}
.detail .gallery .gallery-video-badge i{margin-left:2px}
.detail .gallery .gallery-video-badge:hover{background:var(--accent);color:var(--accent-ink,#fff);transform:scale(1.08)}
.detail h1{font-size:26px;font-weight:800;color:#fff;margin:0 0 6px}
.detail .brand{color:var(--text-3);font-size:13px;margin-bottom:14px}
.detail .short{font-size:15px;color:var(--text-2);margin:0 0 18px}
.detail .desc{font-size:14px;color:var(--text-2);line-height:1.7;margin:0 0 20px;white-space:pre-line}
.sec-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:22px 0 10px}
.attrs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.attrs li{display:flex;justify-content:space-between;gap:10px;font-size:13px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.attrs .k{color:var(--text-3)}
.attrs .v{color:var(--text);font-weight:600;text-align:right}
.offers{display:flex;flex-direction:column;gap:10px}
.offer{display:flex;align-items:center;gap:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.offer .m{flex:1}
.offer .m .name{font-weight:700;color:#fff;font-size:14px}
.offer .m .avail{font-size:11.5px;color:var(--text-3);text-transform:capitalize}
.offer .p{text-align:right}
.offer .p .amt{font-size:17px;font-weight:800;color:#fff}
.offer .p .was{font-size:11.5px;color:var(--text-3);text-decoration:line-through}
.buy{display:inline-flex;align-items:center;gap:8px;background:var(--buy);color:var(--buy-ink);font-weight:800;font-size:13.5px;padding:10px 15px;border-radius:10px;border:none;cursor:pointer;transition:filter .15s}
.buy:hover{filter:brightness(1.08)}
.disclosure{margin-top:14px;font-size:11.5px;color:var(--text-3);line-height:1.5}
.related{margin-top:44px}

/* ── Search results ────────────────────────────────── */
.results-head{margin-bottom:18px}

@media (max-width:820px){
  .store{grid-template-columns:1fr}
  .cats{position:static;display:none}
  .cats.mobile-open{display:block}
  .cat-dropdown{display:block;margin-bottom:16px}
  .detail{grid-template-columns:1fr}
  .attrs{grid-template-columns:1fr}
  .head-search{max-width:none}
  .brand span.long{display:none}
}
@media (min-width:821px){ .cat-dropdown{display:none} }
.cat-dropdown select{width:100%;height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--text);font-size:14px}