/* 04-components — Breadcrumb, tabs, accordion, modals, empty/success states, dashboard widgets, marketplace cards, gradient "art" placeholders.
   Loaded on every page in file-name order (see inc/core/assets.php). */

/* ---------- 8. BREADCRUMB / TABS / ACCORDION ------------------------ */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-mut); padding:18px 0;}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb svg{width:13px; height:13px; stroke:var(--muted-2); fill:none; stroke-width:2;}
.breadcrumb .cur{color:var(--text); font-weight:600;}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto;}
.tab{padding:12px 18px; font-size:14px; font-weight:600; color:var(--text-mut); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color var(--fast), border-color var(--fast);}
.tab.active{color:var(--blue); border-bottom-color:var(--blue);}
.tab:hover{color:var(--ink);}
.tabpanel{display:none;}
.tabpanel.active{display:block; animation:fadeUp .4s var(--ease);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-item:last-child{border-bottom:none;}
.acc-head{display:flex; justify-content:space-between; cursor:pointer;}
.acc-head svg{ fill:none; flex-shrink:0;}
.acc-body{max-height:0; overflow:hidden; transition:max-height var(--med) var(--ease); }
/* ---------- 9. MODAL / DRAWER --------------------------------------- */
.modal-overlay{position:fixed; inset:0; background:rgba(4,9,26,.5); backdrop-filter:blur(4px); z-index:300; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity var(--med), visibility var(--med); padding:20px;}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:min(480px,100%); padding:30px; transform:scale(.94) translateY(12px); transition:transform var(--med) var(--ease-out);}
.modal-overlay.open .modal{transform:scale(1) translateY(0);}
.modal h3{font-size:22px; margin-bottom:6px;}
.modal-close{position:absolute; top:16px; right:16px; background:var(--cream-2); border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal-close svg{width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:2.2;}
/* ---------- 10. STATES: skeleton / empty / error / success ---------- */
.skeleton{background:linear-gradient(90deg,var(--cream-2) 25%,var(--cream) 37%,var(--cream-2) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:var(--r-sm);}
.state{display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 24px; gap:14px;}
.state-ico{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.state-ico svg{width:32px; height:32px; fill:none; stroke-width:1.8;}
.state h4{font-size:18px;}
.state p{color:var(--text-mut); font-size:14px; max-width:360px;}
.state-empty .state-ico{background:var(--cream-2); color:var(--muted);}
.state-error .state-ico{background:rgba(214,69,69,.12); color:var(--red);}
.state-success .state-ico{background:rgba(30,158,106,.12); color:var(--green);}
/* toast / trust badges / chips */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--text-soft);}
.chip svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}
/* ---------- 11. DASHBOARD ------------------------------------------- */
.dash{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
.dash-side{background:var(--surface); border-right:1px solid var(--line); padding:24px 18px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.dash-nav{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:3px;}
.dash-nav a{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:11px; font-size:13.5px; font-weight:550; color:var(--text-soft); transition:background var(--fast), color var(--fast);}
.dash-nav a svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8;}
.dash-nav a.active{background:var(--blue-pale); color:var(--blue-deep); font-weight:650;}
.dash-nav a:hover{background:var(--cream-2); color:var(--ink);}
.dash-main{padding:26px 34px; background:var(--bg-alt); min-height:100vh;}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; box-shadow:var(--shadow-sm);}
.kpi .k-top{display:flex; align-items:center; justify-content:space-between;}
.kpi .k-ico{width:40px; height:40px; border-radius:11px; background:var(--blue-pale); display:flex; align-items:center; justify-content:center;}
.kpi .k-ico svg{width:20px; height:20px; stroke:var(--blue-deep); fill:none; stroke-width:1.9;}
.kpi .k-val{font-size:28px; font-weight:700; margin-top:14px; letter-spacing:-.02em;}
.kpi .k-lbl{font-size:12.5px; color:var(--text-mut); margin-top:2px;}
.kpi .k-delta{font-size:12px; font-weight:600;}
.k-up{color:var(--green);}
.k-down{color:var(--red);}
/* simple bar chart */
.barchart{display:flex; align-items:flex-end; gap:10px; height:180px; padding-top:10px;}
.barchart .bar{flex:1; background:linear-gradient(180deg,var(--blue-2),var(--blue)); border-radius:8px 8px 4px 4px; position:relative; transition:height 1s var(--ease); box-shadow:var(--shadow-blue);}
.barchart .bar span{position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:11px; color:var(--text-mut);}
/* ---------- 11b. MARKETPLACE COMPONENTS ----------------------------- */
/* category tile */
.cat-tile{ cursor:pointer;}
.cat-tile:hover{ border-color:var(--blue-pale);}
.cat-ico{width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--blue-pale),var(--cream-2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--shadow-sm); transition:transform var(--med) var(--ease);}
.cat-tile:hover .cat-ico{transform:scale(1.08) rotate(-4deg);}
.cat-ico svg{width:30px; height:30px; stroke:var(--blue-deep); fill:none; stroke-width:1.7;}
.cat-tile .ct-name{font-size:14px; font-weight:650; color:var(--text);}
.cat-tile .ct-count{font-size:11.5px; color:var(--text-mut);}
/* product card */
.prod{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease); display:flex; flex-direction:column;}
.prod:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.prod-media{height:190px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.prod-media svg.art{width:70px; height:70px; stroke:rgba(255,255,255,.9); fill:none; stroke-width:1.4;}
.prod-media .fav{position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform var(--fast);}
.prod-media .fav:hover{transform:scale(1.12);}
.prod-media .fav svg{width:16px; height:16px; stroke:var(--red); fill:none; stroke-width:2;}
.prod-media .plabel{position:absolute; top:12px; left:12px;}
.prod-body{padding:15px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1;}
.prod-body .pname{font-size:14.5px; font-weight:650; line-height:1.35; color:var(--text);}
.prod-price{font-size:17px; font-weight:700; color:var(--ink);}
.prod-price small{font-size:11.5px; font-weight:500; color:var(--text-mut);}
.prod-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--text-mut);}
.prod-meta b{color:var(--text-soft); font-weight:600;}
.prod-supplier{display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid var(--line); margin-top:auto;}
.prod-supplier .sav{width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0;}
.prod-supplier .sname{font-size:12px; font-weight:600; color:var(--text); line-height:1.2;}
.prod-supplier .sloc{font-size:11px; color:var(--text-mut);}
.prod-actions{display:flex; gap:8px; padding:0 16px 16px;}
.prod-actions .btn{flex:1;}
/* company card */
.comp{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.comp:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.comp-cover{height:96px; position:relative;}
.comp-logo{width:60px; height:60px; border-radius:16px; background:var(--surface); border:3px solid var(--surface); box-shadow:var(--shadow-sm); position:absolute; left:20px; bottom:-28px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; color:var(--blue-deep);}
.comp-body{padding:38px 20px 20px;}
.comp-body h4{font-size:16px;}
.comp-tags{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0;}
.comp-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:14px 0;}
.comp-stats .cs{text-align:center;}
.comp-stats .cs b{display:block; font-size:15px; color:var(--ink);}
.comp-stats .cs span{font-size:11px; color:var(--text-mut);}
/* rfq card */
.rfq{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med);}
.rfq:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.rfq .rfq-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px;}
.rfq h4{font-size:15.5px; line-height:1.35;}
.rfq-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:14px 0; font-size:12.5px;}
.rfq-grid .rl{color:var(--text-mut);}
.rfq-grid .rv{font-weight:650; color:var(--text);}
/* service card */
.svc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med);}
.svc:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.svc-ico{width:52px; height:52px; border-radius:14px; background:linear-gradient(150deg,var(--ink),var(--blue-deep)); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:var(--shadow-blue);}
.svc-ico svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8;}
.svc h4{font-size:16px; margin-bottom:7px;}
.svc p{font-size:13px; color:var(--text-mut); line-height:1.6;}
/* pricing card */
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 26px; box-shadow:var(--shadow-sm); position:relative; transition:transform var(--med) var(--ease), box-shadow var(--med);}
.plan:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.plan.feat{border-color:transparent; background:linear-gradient(165deg,var(--ink),var(--blue-deep)); color:#fff;}
.plan.feat h3,.plan.feat .price{color:#fff;}
.plan .tier{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-deep);}
.plan.feat .tier{color:var(--gold-2);}
.plan .price{font-size:38px; font-weight:800; letter-spacing:-.02em; margin:14px 0 2px;}
.plan .price small{font-size:14px; font-weight:500; color:var(--text-mut);}
.plan.feat .price small{color:rgba(255,255,255,.7);}
.plan ul{list-style:none; margin:20px 0; padding:0; display:flex; flex-direction:column; gap:11px;}
.plan li{display:flex; align-items:flex-start; gap:10px; font-size:13.5px;}
.plan li svg{width:17px; height:17px; stroke:var(--green); fill:none; stroke-width:2.4; flex-shrink:0; margin-top:1px;}
.plan.feat li svg{stroke:var(--gold-2);}
.plan-badge{position:absolute; left:50%; transform:translateX(-50%); background:linear-gradient(160deg,var(--gold-2),var(--gold)); color:#5a4415; font-size:11px; font-weight:700; padding:6px 16px; border-radius:var(--r-pill); box-shadow:var(--shadow-gold);}
/* story / blog cards */
.story-card{flex:0 0 190px; height:320px; border-radius:var(--r-lg); position:relative; overflow:hidden; cursor:pointer; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; color:#fff; transition:transform var(--med) var(--ease), box-shadow var(--med);}
.story-card::after{content:""; position:absolute; inset:0; z-index:0;}
.story-card > *{position:relative; z-index:1;}
.story-title{font-size:14px; font-weight:650; line-height:1.35;}
.story-date{font-size:11px; opacity:.8; margin-top:6px;}
.story-icon{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; margin-bottom:auto;}
.story-icon svg{width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.8;}
.blog-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med);}
.blog-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.blog-media{height:170px;}
.blog-body{padding:18px;}
.blog-body .bmeta{font-size:11.5px; color:var(--blue-deep); font-weight:600; text-transform:uppercase; letter-spacing:.08em;}
.blog-body h4{font-size:16px; margin:8px 0; line-height:1.35;}
.blog-body p{font-size:13px; color:var(--text-mut); line-height:1.6;}
/* art gradients for media blocks */
.art-dot{background-image:radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.4px); background-size:16px 16px;}