/* =========================================================================
   Bazi Market — shared UI layer (v3)
   Loaded after style.css / tailwind.css / wordpress.css on every page.
   Sections:
     1. Fluid foundation          6. Catalog (archive + category) with sidebar
     2. Sliding pill (header-style)  7. Experts
     3. Boxes, section heads      8. Rich content (product / page / post bodies)
     4. Inner-page hero + crumbs  9. Misc (pager, chips, empty states)
     5. Mobile tab bar
   ========================================================================= */

/* ---------- 1. Fluid foundation ---------- */
:root{
  --gutter:clamp(16px,3.6vw,32px);
  --sec:clamp(48px,7vw,96px);
  --radius-box:clamp(16px,1.6vw,22px);
  --mbar-h:66px;
}
/* containers breathe with the viewport instead of jumping at breakpoints */
.max-w-container.px-5{padding-inline:var(--gutter)}
img,video,iframe{max-width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- 2. Sliding pill — the header's nav indicator, reusable ----------
   Any element with [data-pill-nav] gets a pill (.bm-pill, injected by ui.js) that
   rests on the current item and follows hover / focus.                         */
[data-pill-nav]{position:relative;isolation:isolate}
.bm-pill{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;border-radius:12px;background:var(--brand-tint);opacity:0;pointer-events:none;
  transition:transform .55s var(--ease-lux),width .55s var(--ease-lux),height .55s var(--ease-lux),opacity .3s,background-color .3s}
.bm-pill.is-on{opacity:1}
.bm-pill.is-hover{background:var(--surface-sunken)}
@media (prefers-reduced-motion:reduce){.bm-pill{transition:opacity .2s}}

/* ---------- 3. Boxes & section heads ---------- */
.bm-box{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-box);padding:clamp(16px,2vw,24px);
  transition:border-color .35s,box-shadow .5s var(--ease-lux),transform .5s var(--ease-lux)}
.bm-box:hover{border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.bm-box--flat:hover{box-shadow:none}
.bm-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:900;color:var(--ink-2)}
.bm-box-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.bm-box-title h2,.bm-box-title h3{font-size:15.5px;font-weight:900;color:var(--ink);line-height:1.6;display:flex;align-items:center;gap:10px}

/* ---------- 4. Inner-page hero (.phero) — a floating stage card like the header & footer ---------- */
.phero{margin:12px 12px 0;border-radius:clamp(20px,2.4vw,28px);padding:clamp(108px,12vw,150px) 0 clamp(32px,5vw,60px);isolation:isolate}
@media (min-width:768px){.phero{margin:20px 20px 0}}
.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.phero h1{font-size:clamp(26px,4.4vw,46px);text-wrap:balance}
.phero p.lead{font-size:clamp(14px,1.3vw,16px)}
/* crumbs as pills (inner pages) */
.crumbs{gap:6px}
.phero .crumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
@media (max-width:767px){.phero .crumbs{-webkit-mask-image:linear-gradient(to left,#000 85%,transparent);mask-image:linear-gradient(to left,#000 85%,transparent);padding-inline-end:24px}}
.phero .crumbs::-webkit-scrollbar{display:none}
.phero .crumbs > a,.phero .crumbs > span{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--stage-line);color:var(--on-stage-2);white-space:nowrap;transition:background .3s var(--ease-lux),color .3s,border-color .3s}
.phero .crumbs > a:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#3a3a42}
.phero .crumbs > span{background:#fff;border-color:#fff;color:var(--stage)!important;font-weight:800}
.phero .crumbs > svg{flex:none}
.phero-led{position:absolute;inset-inline-end:clamp(-40px,-2vw,-10px);bottom:-14px;width:min(46vw,520px);display:grid;grid-template-columns:repeat(12,1fr);gap:6px;opacity:.55;pointer-events:none;z-index:-1;
  -webkit-mask-image:linear-gradient(to top left,#000 10%,transparent 70%);mask-image:linear-gradient(to top left,#000 10%,transparent 70%)}
.phero-led span{aspect-ratio:1;border-radius:4px;background:#1e1e23;transition:background-color .9s,box-shadow .9s}
.phero-led span.r{background:var(--led-red);box-shadow:0 0 14px rgba(255,42,51,.55)}
.phero-led span.g{background:var(--led-green);box-shadow:0 0 14px rgba(31,224,106,.45)}
.phero-led span.b{background:var(--led-blue);box-shadow:0 0 14px rgba(47,123,255,.5)}
@media (max-width:767px){.phero-led{width:78vw;opacity:.35}}

/* ---------- 5. Mobile tab bar ---------- */
.mbar{position:fixed;z-index:65;inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:var(--mbar-h);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 6px;
  background:rgba(17,17,19,.94);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--stage-line);border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  transition:transform .55s var(--ease-lux),opacity .35s}
.mbar .bm-pill{top:8px;height:calc(100% - 16px)!important;background:rgba(255,255,255,.08);border-radius:14px}
.mbar .bm-pill.is-hover{background:rgba(255,255,255,.05)}
.mbar-item,.mbar-main{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;font-size:10.5px;font-weight:800;color:var(--on-stage-2);-webkit-tap-highlight-color:transparent}
.mbar-item svg{width:21px;height:21px;transition:transform .45s var(--ease-lux),color .3s}
.mbar-item .lbl,.mbar-main .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:2px}
.mbar-item[aria-current]{color:#fff}
.mbar-item[aria-current] svg{color:var(--brand-on-stage);transform:translateY(-1px)}
.mbar-item:active svg{transform:scale(.88)}
.mbar-main{color:#fff}
.mbar-main .disc{width:52px;height:52px;margin-top:-28px;border-radius:17px;display:grid;place-items:center;background:var(--brand);color:#fff;
  box-shadow:0 3px 0 #8e0e13,0 12px 26px rgba(215,25,32,.45);transition:transform .2s var(--ease-lux),box-shadow .2s}
.mbar-main .disc svg{width:24px;height:24px}
.mbar-main:active .disc{transform:translateY(3px);box-shadow:0 0 0 #8e0e13,0 8px 18px rgba(215,25,32,.35)}
.mbar-main .lbl{margin-top:1px}
#drawer[data-open="true"] ~ .mbar,body.swal2-shown .mbar{transform:translateY(140%);opacity:0}
@media (min-width:768px){.mbar{display:none}}
@media (max-width:767px){
  body{padding-bottom:calc(var(--mbar-h) + 22px + env(safe-area-inset-bottom))}
}
@media (max-width:359px){.mbar{inset-inline:6px}.mbar-item,.mbar-main{font-size:9.5px}.mbar-main .disc{width:48px;height:48px}}

/* ---------- 8. Rich content — product descriptions, warranty text, pages ----------
   Pasted / imported HTML is tidied in PHP (bm_clean_content); this gives it one calm,
   readable rhythm with boxed accents that match the product page.                    */
.bm-rich{font-size:clamp(15px,1.25vw,16.5px);line-height:2.1;color:var(--ink-2);overflow-wrap:anywhere;display:flow-root}
.bm-rich > :first-child{margin-top:0!important}
.bm-rich > :last-child{margin-bottom:0!important}
.bm-rich :where(p,ul,ol,dl,figure,blockquote,.bm-table-scroll,.bm-embed,.wp-block-image){margin-block:0 1.2em}
.bm-rich :where(p){max-width:78ch}
.bm-rich :where(p,li,td,th,h1,h2,h3,h4,h5,h6){text-align:start}
.bm-rich [style*="text-align:center"]{text-align:center}
.bm-rich :where(h1,h2,h3,h4,h5,h6){color:var(--ink);font-weight:900;line-height:1.65;margin-block:1.9em .7em;scroll-margin-top:150px;text-wrap:balance}
.bm-rich h1,.bm-rich h2{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--surface-paper);border:1px solid var(--line);font-size:clamp(17px,1.8vw,21px)}
.bm-rich h1::before,.bm-rich h2::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--brand);box-shadow:0 3px 0 0 var(--brand-edge);margin-bottom:3px}
.bm-rich h3{font-size:clamp(16px,1.5vw,18px);padding-inline-start:14px;border-inline-start:3px solid var(--brand)}
.bm-rich h4{font-size:16px}
.bm-rich :where(h5,h6){font-size:15px}
.bm-rich :where(strong,b){color:var(--ink);font-weight:800}
.bm-rich a:not(.bm-btn):not(.wp-block-button__link){color:var(--brand-text);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:rgba(215,25,32,.35);transition:text-decoration-color .3s}
.bm-rich a:not(.bm-btn):hover{text-decoration-color:var(--brand)}
.bm-rich ul,.bm-rich ol{list-style:none;padding:0;display:grid;gap:8px;counter-reset:bmli}
.bm-rich ul > li,.bm-rich ol > li{position:relative;padding:9px 14px;padding-inline-start:42px;border-radius:12px;background:var(--surface-paper);line-height:1.95;transition:background .35s var(--ease-lux),transform .5s var(--ease-lux)}
.bm-rich ul > li::before{content:"";position:absolute;inset-inline-start:17px;top:calc(9px + 1.05em - 4px);width:8px;height:8px;border-radius:2px;background:var(--brand)}
.bm-rich ol > li{counter-increment:bmli}
.bm-rich ol > li::before{content:counter(bmli,persian);position:absolute;inset-inline-start:10px;top:calc(9px + 1.05em - 12px);width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:12px;font-weight:900;line-height:1}
.bm-rich li:hover{background:var(--brand-tint)}
.bm-rich li > :where(ul,ol){margin-top:8px}
.bm-rich li > :where(ul,ol) > li{background:var(--surface)}
.bm-rich li > p{margin:0}
.bm-rich :where(img,video){display:block;max-width:100%;height:auto;border-radius:14px}
.bm-rich figure,.bm-rich .wp-caption{max-width:100%!important;margin-inline:0}
.bm-rich :where(figcaption,.wp-caption-text){margin-top:8px;font-size:12.5px;color:var(--ink-3);text-align:center}
.bm-rich .aligncenter{margin-inline:auto}
.bm-rich .alignright{float:right;margin:.4em 0 1em 1.5em;max-width:50%}
.bm-rich .alignleft{float:left;margin:.4em 1.5em 1em 0;max-width:50%}
@media (max-width:639px){.bm-rich .alignright,.bm-rich .alignleft{float:none;margin:1em auto;max-width:100%}}
.bm-rich blockquote{position:relative;margin-inline:0;padding:16px 20px;padding-inline-start:52px;border-radius:16px;background:var(--stage);color:var(--on-stage);font-weight:700;line-height:2}
.bm-rich blockquote::before{content:"";position:absolute;inset-inline-start:18px;top:20px;width:20px;height:20px;border-radius:6px;background:var(--brand)}
.bm-rich blockquote :where(p,strong,b,a){color:inherit;margin:0}
.bm-rich blockquote cite{display:block;margin-top:8px;font-size:12.5px;color:var(--on-stage-2);font-style:normal}
.bm-rich hr{border:0;height:1px;margin-block:2em;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)}
.bm-rich .bm-table-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);-webkit-overflow-scrolling:touch}
.bm-rich table{width:100%;min-width:min(100%,460px);border-collapse:collapse;font-size:14px;line-height:1.9;margin:0}
.bm-rich .bm-table-scroll > table{border:0}
.bm-rich :where(th,td){padding:12px 16px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line)}
.bm-rich :where(tr) > :last-child{border-inline-end:0}
.bm-rich tbody tr:last-child > *{border-bottom:0}
.bm-rich thead :where(th,td){background:var(--ink);color:#fff;font-weight:800}
.bm-rich tbody tr > :first-child{color:var(--ink);font-weight:800;background:rgba(244,244,245,.55)}
.bm-rich tbody tr:hover > *{background:var(--brand-tint)}
.bm-rich .bm-embed,.bm-rich iframe[src*="youtube"],.bm-rich iframe[src*="aparat"],.bm-rich iframe[src*="vimeo"]{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:16px;overflow:hidden;background:#000}
.bm-rich .bm-embed iframe{width:100%;height:100%;border:0}
.bm-rich :where(code,kbd){font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:var(--surface-sunken);padding:.15em .4em;border-radius:5px}
.bm-rich pre{direction:ltr;text-align:left;overflow-x:auto;padding:18px;border-radius:14px;background:var(--stage);color:#fff;font-size:13.5px}
.bm-rich details{padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.bm-rich summary{cursor:pointer;color:var(--ink);font-weight:800}
.bm-rich .wp-block-button__link,.bm-rich .wp-element-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;text-decoration:none;box-shadow:var(--shadow-press)}

/* ---------- 6. Catalog: category sidebar (header-style pill), toolbar, grid ---------- */
.cat-sec{padding-block:clamp(20px,3vw,40px) clamp(40px,6vw,80px)}
.cat-layout{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1024px){.cat-layout{grid-template-columns:clamp(250px,22vw,300px) minmax(0,1fr)}}
.cat-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:1024px){.cat-side{position:sticky;top:104px;transition:top .5s var(--ease-lux)}html.hdr-hidden .cat-side{top:20px}}
.cat-nav-box{padding:12px}
.cat-nav-head{padding:6px 8px 0;margin-bottom:8px}
.cat-nav{display:flex;flex-direction:column;gap:2px}
.cat-nav .bm-pill{border-radius:14px}
.cat-link{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:14px;color:var(--ink-2);transition:color .3s;min-width:0}
.cat-link .ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-sunken);color:var(--ink-2);transition:background .35s var(--ease-lux),color .35s,transform .5s var(--ease-lux)}
.cat-link .ic svg{width:19px;height:19px}
.cat-link .t{flex:1;min-width:0;display:flex;flex-direction:column}
.cat-link .t b{font-size:14px;font-weight:800;line-height:1.6;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-link .t small{font-size:11.5px;color:var(--ink-3);line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-link .n{flex:none;min-width:28px;height:24px;padding:0 7px;border-radius:8px;display:grid;place-items:center;background:var(--surface-sunken);color:var(--ink-3);font-size:11.5px;font-weight:900;transition:background .3s,color .3s}
.cat-link:hover .ic{transform:translateY(-1px) rotate(-4deg)}
.cat-link[aria-current] .ic{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(215,25,32,.28)}
.cat-link[aria-current] .t b{color:var(--brand-text)}
.cat-link[aria-current] .n{background:#fff;color:var(--brand-text)}
.cat-link.is-loading .ic{animation:catPulse .9s var(--ease-lux) infinite alternate}
@keyframes catPulse{to{transform:scale(.88);opacity:.6}}
.cat-help-mini{position:relative;overflow:hidden;isolation:isolate;padding:18px;border-radius:var(--radius-box);background:var(--stage);color:var(--on-stage);border:1px solid var(--stage-line)}
.cat-help-mini::before{content:"";position:absolute;z-index:-1;inset:auto -30% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(215,25,32,.35),transparent)}
.cat-help-mini .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--stage-raised);border:1px solid var(--stage-line);color:var(--brand-on-stage)}
.cat-help-mini b{display:block;margin-top:12px;font-size:15px;font-weight:900;line-height:1.7}
.cat-help-mini p{margin:6px 0 14px;font-size:13px;line-height:1.95;color:var(--on-stage-2)}
.cat-help-call{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:13.5px;font-weight:800;color:#fff;opacity:.85}
.cat-help-call:hover{opacity:1}
.cat-help-call svg{width:16px;height:16px;color:var(--brand-on-stage)}
/* phones & tablets: the sidebar becomes a horizontal, swipeable category bar */
@media (max-width:1023px){
  .cat-help-mini{display:none}
  .cat-nav-box{padding:0;background:none;border:0;border-radius:0}
  .cat-nav-head{display:none}
  .cat-nav{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter);scroll-padding-inline:var(--gutter)}
  .cat-nav::-webkit-scrollbar{display:none}
  .cat-nav .bm-pill{display:none}
  .cat-link{flex:none;gap:8px;padding:6px 6px 6px 12px;padding-inline:6px 12px;border:1px solid var(--line-strong);background:var(--surface);border-radius:14px;transition:background .3s,border-color .3s,color .3s}
  .cat-link .ic{width:32px;height:32px;border-radius:10px}
  .cat-link .ic svg{width:17px;height:17px}
  .cat-link .t small{display:none}
  .cat-link .t b{font-size:13px}
  .cat-link .n{height:22px;min-width:24px;font-size:11px}
  .cat-link[aria-current]{background:var(--ink);border-color:var(--ink)}
  .cat-link[aria-current] .t b{color:#fff}
  .cat-link[aria-current] .n{background:rgba(255,255,255,.14);color:#fff}
}
.cat-main{min-width:0;transition:opacity .35s var(--ease-lux),transform .45s var(--ease-lux)}
.cat-main.is-loading{opacity:.35;transform:translateY(8px);pointer-events:none}
.cat-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:clamp(14px,1.6vw,20px);padding:8px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.cat-toolbar .search-field{flex:1 1 220px;max-width:none}
.cat-toolbar .search-field input{border-color:transparent;background:var(--surface-sunken);height:44px}
.cat-toolbar .search-field input:focus{background:var(--surface)}
.cat-count{flex:none;font-size:13px;color:var(--ink-3);padding-inline:6px}
.cat-count b{color:var(--ink);font-weight:900}
.cat-sort{position:relative;flex:none;display:flex;align-items:center}
.cat-sort svg{position:absolute;inset-inline-start:12px;width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.cat-sort .select{height:44px;padding-inline-start:36px;border-color:transparent;background-color:var(--surface-sunken)}
html.bm-js .cat-apply{display:none}
@media (max-width:639px){.cat-toolbar{gap:8px}.cat-toolbar .search-field{flex-basis:100%}.cat-count{order:3;margin-inline-start:auto}}
.cat-main .prod-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(12px,1.4vw,20px)}
@media (max-width:639px){.cat-main .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.cat-main .prod-grid > .pcard{animation:catIn .7s var(--ease-lux) both;animation-delay:calc(var(--k,0) * 45ms)}
@keyframes catIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cat-main .prod-grid > .pcard{animation:none}}
.cat-help{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2vw,22px);align-items:center;padding:clamp(18px,2.4vw,28px)}
.cat-help .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-text)}
.cat-help b{display:block;font-size:clamp(15px,1.4vw,17px);font-weight:900;line-height:1.7}
.cat-help p{margin-top:4px;font-size:14px;color:var(--ink-2);line-height:1.95}
@media (max-width:767px){.cat-help{grid-template-columns:auto minmax(0,1fr)}.cat-help .bm-btn{grid-column:1/-1;width:100%}}

/* ---------- 7. Experts ---------- */
.ex-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,2vw,22px)}
.ex-hero-meta > *{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--stage-line);color:var(--on-stage-2);font-size:12.5px;font-weight:800}
.ex-hero-meta svg{width:15px;height:15px}
.ex-hero-meta a{color:#fff;transition:background .3s,border-color .3s}
.ex-hero-meta a:hover{background:var(--brand);border-color:var(--brand)}
.ex-live i{width:8px;height:8px;border-radius:50%;background:var(--led-green);box-shadow:0 0 10px var(--led-green);animation:exLive 2s var(--ease-lux) infinite}
@keyframes exLive{50%{box-shadow:0 0 2px var(--led-green);opacity:.6}}
.ex-sec{padding-block:clamp(20px,3vw,40px) clamp(40px,6vw,72px)}
.ex-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,24px);padding:6px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.ex-chips{gap:4px;flex:1;min-width:0}
.ex-chips .chip{border-color:transparent;background:transparent;height:40px}
.ex-chips .chip[aria-pressed="true"]{background:transparent;color:var(--brand-text);border-color:transparent}
.ex-chips .chip[aria-pressed="true"] .n{background:var(--brand);color:#fff}
.ex-chips .bm-pill{border-radius:12px}
@media (max-width:767px){.ex-chips{margin-inline:0;padding-inline:0}}
.ex-bar-note{display:flex;align-items:center;gap:8px;padding-inline:10px;font-size:12.5px;color:var(--ink-3);font-weight:700}
.ex-bar-note svg{width:16px;height:16px}
.ex-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))!important;gap:clamp(12px,1.6vw,20px)}
.ex-card{border-radius:var(--radius-box)}
.ex-card[hidden]{display:none}
.ex-card.is-in{animation:catIn .7s var(--ease-lux) both;animation-delay:calc(var(--k,0) * 50ms)}
.ex-none{padding:40px 20px;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--radius-box);color:var(--ink-2);line-height:2}
.ex-desk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(12px,1.6vw,18px)}
.ex-desk-card{position:relative;display:flex;align-items:center;gap:14px;padding:clamp(18px,2vw,24px);border-radius:var(--radius-box);background:var(--surface);border:1px solid var(--line);text-align:start;
  transition:border-color .3s,box-shadow .5s var(--ease-lux),transform .5s var(--ease-lux)}
.ex-desk-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.ex-desk-card .ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-text);transition:background .35s,color .35s}
.ex-desk-card .ic svg{width:24px;height:24px}
.ex-desk-card:hover .ic{background:var(--brand);color:#fff}
.ex-desk-card > span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ex-desk-card small{font-size:12px;color:var(--ink-3);font-weight:700}
.ex-desk-card b{font-size:clamp(15px,1.5vw,18px);font-weight:900;color:var(--ink);line-height:1.6}
.ex-desk-card em{font-style:normal;font-size:12.5px;color:var(--ink-2)}
.ex-desk-card .go{flex:none;width:20px;height:20px;color:var(--ink-3);transition:transform .45s var(--ease-lux),color .3s}
.ex-desk-card:hover .go{transform:translateX(-4px);color:var(--brand-text)}
.ex-desk-card.is-main{background:var(--stage);border-color:var(--stage-line)}
.ex-desk-card.is-main .ic{background:var(--brand);color:#fff;box-shadow:var(--shadow-press)}
.ex-desk-card.is-main b{color:#fff;font-size:clamp(18px,2vw,22px)}
.ex-desk-card.is-main small,.ex-desk-card.is-main em{color:var(--on-stage-2)}
.ex-vals{margin-top:clamp(28px,4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(10px,1.4vw,16px)}
.ex-vals .val{transition:border-color .3s,box-shadow .5s var(--ease-lux),transform .5s var(--ease-lux)}
.ex-vals .val:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.ex-more{margin-top:clamp(18px,2vw,26px);display:flex;justify-content:center}
@media (max-width:639px){.ex-photo{aspect-ratio:16/11}.ex-ph{font-size:52px}}

/* ---------- 9. Generic pages (page.php, projects, landing templates, blog index, search) ---------- */
.bm-page-content{max-width:1180px;padding:clamp(24px,4vw,56px) var(--gutter) var(--sec)}
.bm-page-content.prose{margin-top:clamp(18px,3vw,32px);margin-bottom:var(--sec);margin-inline:auto;width:calc(100% - var(--gutter) * 2);max-width:980px;padding:clamp(20px,4vw,48px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-box);line-height:2.1}
.bm-page-content .swiper.pd-gallery{border-radius:var(--radius-box);margin-bottom:clamp(18px,2.4vw,28px)}
.bm-page-content .swiper.pd-gallery .swiper-slide{aspect-ratio:16/9;max-height:72vh}
.bm-project-body{margin-bottom:24px;padding:clamp(18px,3vw,36px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-box)}
.bm-page-content > .blog-grid{margin-top:8px}
.pager{flex-wrap:wrap}
.pager a{transition:background .3s,border-color .3s,color .3s,transform .4s var(--ease-lux)}
.pager a:hover{border-color:var(--ink);background:var(--ink);color:#fff;transform:translateY(-2px)}
.pager .current{background:var(--brand);border-color:var(--brand);color:#fff}
.empty{background:var(--surface)}
/* generic chips get the same quiet motion as the header */
.chip{transition:background .3s var(--ease-lux),border-color .3s,color .3s,transform .4s var(--ease-lux)}
.chip:hover{transform:translateY(-1px)}