/* Shared directory shell: scoped so listings, home and minisites keep their own design. */
body.directory-page { --directory-ink:#102d3a; --directory-teal:#00aeb8; --directory-line:#dcebef; background:linear-gradient(135deg,#edf9fa,#fff 60%,#f2f8fa); color:var(--directory-ink); }
body.directory-page *, body.directory-page *::before, body.directory-page *::after { box-sizing:border-box; }
body.directory-page [hidden] { display:none !important; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header { position:sticky!important; top:0; z-index:1000; display:flex; align-items:center; gap:20px; min-height:76px; padding:14px max(24px,calc((100vw - 1440px)/2)); background:#051b24; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .logo { flex:0 0 auto; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .logo img { display:block; width:auto!important; height:42px!important; max-height:42px!important; object-fit:contain; transform:none; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav { margin-left:auto; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav ul { gap:2px; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav ul li a { padding:10px 7px; font-size:12px; line-height:1.2; white-space:nowrap; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-shell { position:relative; flex:1; width:auto; min-width:220px; max-width:420px; margin:0; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-bar { display:flex; flex-wrap:nowrap; height:44px; padding:0; margin:0; border:1px solid #cde5e9; border-radius:12px; background:#f6fbfc; box-shadow:none; overflow:hidden; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-bar input { flex:1; min-width:0; width:100%; border:0; border-radius:0; padding:12px; color:#12303e; background:transparent; font:14px Arial,sans-serif; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-bar button { display:flex; align-items:center; gap:7px; flex:0 0 auto; height:42px; padding:0 12px; margin:0; border:0; border-left:1px solid #dbe9ec; border-radius:0; color:#00758a; background:#e6f5f6; font-size:13px; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-dropdown { top:calc(100% + 8px); left:0; right:0; width:100%; max-width:none; max-height:min(70dvh,650px); margin:0; z-index:1100; }
body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-dropdown-scroll { max-height:min(65dvh,600px); overflow:auto; }
body.directory-page main { margin:0; padding:0; }
body.directory-page main > br { display:none; }
.directory-intro { padding:34px 24px 26px; border-bottom:1px solid #dfedf0; background:linear-gradient(110deg,#eefafa,#fcfefe); }
.directory-intro-inner { max-width:1380px; margin:auto; }
.directory-eyebrow { margin:0 0 10px; font-size:11px; letter-spacing:1.8px; font-weight:800; color:#008b9e; }
body.directory-page .directory-intro h1 { margin:0 0 10px; color:var(--directory-ink); font-size:clamp(28px,3vw,42px); line-height:1.12; text-align:left; text-shadow:none; }
.directory-description { margin:0 0 20px; font-size:17px; line-height:1.5; color:#587181; }
.directory-main-search { display:flex; align-items:center; gap:12px; max-width:980px; padding:7px 8px 7px 20px; background:#fff; border:1px solid #bce6eb; border-radius:12px; box-shadow:0 8px 24px #12374708; }
.directory-main-shell { position:relative; max-width:980px; z-index:20; }
.directory-main-shell .search-dropdown { left:0; right:0; width:100%; max-height:65dvh; }
.directory-main-shell .search-dropdown-scroll { max-height:60dvh; overflow:auto; }
.directory-main-search > i { color:#728f9d; font-size:20px; }
.directory-main-search input { width:100%; min-width:0; flex:1; padding:10px 0; border:0; color:var(--directory-ink); background:transparent; font-size:16px; }
.directory-main-search button { min-height:44px; border:0; border-radius:8px; background:linear-gradient(110deg,#00b8bd,#0086a6); color:#fff; padding:12px 34px; font-size:15px; font-weight:700; cursor:pointer; }
.directory-meta { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:16px; color:#426778; font-size:13px; }
.directory-meta i {color: #102c39;margin-right:6px;}
.directory-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.directory-page .hero { position:relative; width:min(1380px,calc(100% - 48px)); height:auto!important; min-height:0!important; aspect-ratio:13 / 1; margin:22px auto 18px; border-radius:14px; overflow:hidden; border:1px solid var(--directory-line); background:#102d3a; }
body.directory-page .hero .carousel { display:flex; width:100%; height:100%!important; min-height:0!important; max-height:none!important; }
body.directory-page .hero .carousel-item { flex:0 0 100%; width:100%; min-width:100%; height:100%!important; min-height:0!important; max-height:none!important; }
body.directory-page .hero .carousel-item a,body.directory-page .hero picture { display:block; height:100%; width:100%; }
body.directory-page .hero img { display:block; width:100%; height:100%; object-fit:cover; }
/* Uploaded advertising banners must remain complete; legacy covers keep their crop. */
body.directory-page .hero .vip-hero-panoramic > a { padding:0; }
body.directory-page .hero .vip-hero-panoramic img { object-fit:contain; object-position:center; }
body.directory-page .hero .carousel::after { display:none; }
body.directory-page .hero > button { width:30px; height:34px; padding:0; font-size:17px; border-radius:8px; background:#052633b8; top:50%; transform:translateY(-50%); }
body.directory-page .hero > .carousel-prev { left:8px; }
body.directory-page .hero > .carousel-next { right:8px; }
.directory-category-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; width:min(1380px,calc(100% - 48px)); margin:0 auto 22px; }
.directory-category-cards > :is(a,button) { display:flex; align-items:center; gap:16px; min-height:96px; padding:18px; border:1px solid var(--directory-line); border-radius:14px; background:#fff; text-decoration:none; color:var(--directory-ink); cursor:pointer; text-align:left; box-shadow:0 7px 22px #143d4b04; }
.directory-category-cards > :is(a,button) > i:first-child {flex-shrink:0;color: #102c39;font-size:30px;}
.directory-category-cards span { flex:1; min-width:0; }
.directory-category-cards strong { display:block; font-size:14px; line-height:1.4; }
.directory-category-cards small { display:block; margin-top:5px; color:#7b929f; font-size:12px; }
.directory-category-cards > :is(a,button) > i:last-child { color:#06a8bc; font-size:13px; }
.directory-category-cards > .is-active { border-color:#8cdae1; background:linear-gradient(135deg,#fff,#effbfc); }
.directory-workspace { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; width:min(1380px,calc(100% - 48px)); margin:0 auto 30px; }
.directory-sidebar { border:1px solid var(--directory-line); border-radius:14px; background:#fff; overflow:hidden; position:sticky; top:98px; }
.directory-sidebar > :is(a,button) { display:flex; align-items:center; gap:12px; width:100%; min-height:66px; padding:16px 18px; border:0; border-bottom:1px solid #e6f0f3; background:transparent; color:var(--directory-ink); text-decoration:none; font-size:13px; text-align:left; cursor:pointer; }
.directory-sidebar > :is(a,button) > i:first-child {color: #102c39;font-size:21px;}
.directory-sidebar span { flex:1; }
.directory-sidebar > :is(a,button) > i:last-child { color:#8ea6b1; font-size:12px; }
.directory-sidebar > .is-active { background:linear-gradient(110deg,#007dac,#00b4bc); color:white; }
.directory-sidebar > .is-active i { color:white!important; }
body.directory-page .directory { width:100%!important; max-width:none!important; min-width:0; margin:0!important; border:1px solid var(--directory-line); border-radius:16px; padding:20px; background:#fff; box-shadow:0 10px 32px #16384404; }
.directory-tools { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.directory-tools label { display:flex; align-items:center; gap:10px; border:1px solid #dcebef; border-radius:9px; padding:0 12px; width:min(420px,100%); background:#f8fcfd; }
.directory-tools label i { color:#77939f; }
.directory-tools input { width:100%; min-width:0; padding:11px 0; border:0; background:transparent; font-size:14px; color:var(--directory-ink); }
.directory-tools > span { flex-shrink:0; color:#7b929f; font-size:12px; }
body.directory-page .directory .category-section { width:100%!important; max-width:none!important; padding:0; margin:0!important; border:0; background:none; box-shadow:none; }
body.directory-page .directory .toggle-button { cursor:default; font-size:27px; padding:0; margin:0 0 18px; border:0; color:#102d3a; }
body.directory-page .directory .toggle-button i {color: #102c39;}
body.directory-page .directory .rubros-content { max-height:none; overflow:visible; margin:0; padding:0; }
body.directory-page .directory .rubros-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; column-count:unset; list-style:none; }
body.directory-page .directory .rubros-list li { margin:0; min-width:0; }
body.directory-page .directory .rubros-list a { display:flex; align-items:center; gap:12px; height:100%; min-height:56px; padding:12px 14px; border:1px solid #e2edf0; border-radius:9px; background:#fff; color:#173441; font-size:13px; line-height:1.35; text-decoration:none; transition:background .15s,border-color .15s; }
body.directory-page .directory .rubros-list a:hover { background:#edfafa; border-color:#92dbe3; color:#007b91; }
body.directory-page .directory .rubros-list a > i {color: #102c39;width:23px;font-size:20px;margin:0;flex-shrink:0;}
body.directory-page .directory .rubros-list a span { flex:1; }
body.directory-page .directory .rubros-list a::after { content:'›'; color:#88a1ad; font-size:22px; margin-left:auto; }
.directory-empty { padding:24px 12px; color:#5b7886; font-size:14px; line-height:1.5; }
body.directory-page .content { width:min(1380px,calc(100% - 48px)); margin:24px auto; }
body.directory-page .content h2 { font-size:20px; text-shadow:none; }
body.directory-page .thumbnail-carousel-wrapper { background:#fff; border:1px solid var(--directory-line); border-radius:14px; padding:16px; box-shadow:none; }
body.directory-page .directory-popular-links { width:min(1380px,calc(100% - 48px)); margin:24px auto; }
body.directory-page .call-to-action { margin-top:28px; }
body.directory-page :is(button,a,input):focus-visible { outline:3px solid #05bccb; outline-offset:3px; }
@media (max-width:1180px) {
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav-toggle { display:block; color:white; margin-left:auto; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav { position:absolute; width:0; margin:0; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav ul { display:none; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav ul.nav-open { display:flex; position:fixed; inset:0 0 0 auto; flex-direction:column; align-items:stretch; justify-content:flex-start; width:min(360px,90vw); height:100dvh; padding:24px; background:#051b24; z-index:2000; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav ul.nav-open li { margin:8px 0; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav ul.nav-open li a { display:block; padding:15px; font-size:14px; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav ul li.close-nav { display:block!important; align-self:flex-end; color:white; }
    .directory-workspace { grid-template-columns:220px minmax(0,1fr); }
    body.directory-page .directory .rubros-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
    .directory-category-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .directory-workspace { grid-template-columns:minmax(0,1fr); }
    .directory-sidebar { display:none; }
    .directory-intro { padding:26px 20px 22px; }
    .directory-description { font-size:15px; }
}
@media (max-width:600px) {
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px 16px; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .logo img { height:34px!important; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav-toggle { grid-column:2; grid-row:1; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .nav-toggle i { font-size:22px; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-shell { grid-column:1 / -1; grid-row:2; width:100%; max-width:none; min-width:0; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-bar input { font-size:16px; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-dropdown { width:100%; max-height:60dvh; }
    body:is(.directory-page,.pricing-redesign,.rubro-listing) .header .search-dropdown-scroll { max-height:55dvh; }
    .directory-intro { padding:24px 16px 20px; }
    .directory-main-search { padding-left:12px; gap:8px; }
    .directory-main-search button { padding:10px 18px; }
    .directory-meta { font-size:11px; gap:8px; }
    body.directory-page .hero { width:calc(100% - 32px); margin:16px auto; aspect-ratio:13 / 1; border-radius:9px; }
    body.directory-page .hero > button { width:22px; height:24px; font-size:12px; }
    .directory-category-cards,.directory-workspace,body.directory-page .content,body.directory-page .directory-popular-links { width:calc(100% - 32px); }
    .directory-category-cards > :is(a,button) { gap:10px; min-height:88px; padding:12px; }
    .directory-category-cards > :is(a,button) > i:first-child { font-size:24px; }
    .directory-category-cards strong { font-size:12px; }
    .directory-category-cards small { font-size:11px; }
    body.directory-page .directory { padding:16px; }
    .directory-tools { gap:8px; }
    .directory-tools input { font-size:16px; }
    body.directory-page .directory .toggle-button { font-size:23px; }
    body.directory-page .directory .rubros-list { grid-template-columns:minmax(0,1fr); gap:8px; }
    body.directory-page .directory .rubros-list a { min-height:54px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { body.directory-page * { scroll-behavior:auto!important; transition:none!important; } }