/* EMKAN v110 — final layout + interaction corrections */

/* 1) ACCOUNT is emitted as the final DOM item in every primary menu (no :has dependency). */

/* 5) Course detail gallery: store-like, compact, aligned, one large + 3 square thumbnails. */
@media (min-width:701px){
  html body.content-section-page #contentApp .v106-course-gallery{
    --v110-course-thumb:104px;
    --v110-course-gap:8px;
    width:min(100%,440px)!important;
    height:328px!important;
    aspect-ratio:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--v110-course-thumb)!important;
    grid-template-rows:1fr!important;
    gap:var(--v110-course-gap)!important;
    margin:18px auto 18px!important;
    align-items:stretch!important;
    direction:ltr!important;
  }
  html body.content-section-page #contentApp .v106-course-gallery-main{
    width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
    aspect-ratio:auto!important;overflow:hidden!important;
  }
  html body.content-section-page #contentApp .v106-course-gallery-main img{
    width:100%!important;height:100%!important;object-fit:cover!important;filter:none!important;
  }
  html body.content-section-page #contentApp .v106-course-gallery-thumbs{
    width:var(--v110-course-thumb)!important;height:100%!important;
    display:grid!important;grid-template-rows:repeat(3,var(--v110-course-thumb))!important;
    gap:var(--v110-course-gap)!important;align-content:stretch!important;
  }
  html body.content-section-page #contentApp .v106-course-thumb{
    width:var(--v110-course-thumb)!important;height:var(--v110-course-thumb)!important;
    min-width:0!important;min-height:0!important;aspect-ratio:1/1!important;
  }
  html body.content-section-page #contentApp .v106-course-thumb img{
    width:100%!important;height:100%!important;object-fit:cover!important;
    filter:grayscale(100%)!important;opacity:.84!important;
  }
  html body.content-section-page #contentApp .v106-course-thumb:is(:hover,:focus-visible,.is-active) img{
    filter:grayscale(100%)!important;opacity:1!important;
  }
}
@media (max-width:700px){
  html body.content-section-page #contentApp .v106-course-gallery{
    width:100%!important;max-width:440px!important;margin:12px auto 16px!important;
  }
}
html body.content-section-page #contentApp .v106-course-single-action,
html body.content-section-page #contentApp .v106-course-actions{
  width:100%!important;display:flex!important;justify-content:center!important;align-items:center!important;
  margin:0 auto 24px!important;text-align:center!important;
}
html body.content-section-page #contentApp .v106-course-single-action .v49-button,
html body.content-section-page #contentApp .v106-course-actions .v49-button{
  margin-inline:auto!important;justify-content:center!important;text-align:center!important;
}

/* 7) R&D landing: absolutely no title/overlay on the image; title remains below only. */
.research-page .category-square :is(.category-name,.category-overlay,.category-glass,.category-overlay-line,.category-caption,.cover-title,.image-title,.media-title),
.research-page .category-square > [class*="title"],
.research-page .category-square > [class*="caption"]{display:none!important}
.research-page .category-square .category-media::after,
.research-page .category-square::before,
.research-page .category-square::after{content:none!important;display:none!important}
.research-page .category-card > .category-caption{
  display:grid!important;position:static!important;inset:auto!important;padding:9px 0 0!important;
  color:var(--fg)!important;text-shadow:none!important;pointer-events:none!important;
}
.research-page .category-card > .category-caption .category-caption-text{color:var(--fg)!important;text-shadow:none!important}

/* 8 + 9) Store category on phone: always two columns, correct language direction/alignment. */
@media (max-width:760px){
  body .store-category-main .store-category-content #productGrid.product-grid,
  body .store-category-main #productGrid.product-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px 10px!important;width:100%!important;
  }
  html[dir="rtl"] .store-category-main :is(.store-category-nav,.store-subcategory-filter,.store-subcategory-filter>summary,.store-subcategory-list){
    direction:rtl!important;text-align:right!important;
  }
  html[dir="ltr"] .store-category-main :is(.store-category-nav,.store-subcategory-filter,.store-subcategory-filter>summary,.store-subcategory-list){
    direction:ltr!important;text-align:left!important;
  }
  .store-category-main .store-subcategory-filter>summary{
    display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;
  }
  html[dir="rtl"] .store-category-main .store-subcategory-list a{display:block!important;text-align:right!important}
  html[dir="ltr"] .store-category-main .store-subcategory-list a{display:block!important;text-align:left!important}
}

/* 6) Product media swaps must never relayout the related-products area. */
.product-main .product-media-main,
.product-main .product-main-image,
.product-main .product-gallery-main{contain:layout paint!important}
.product-main :is(.related-products,.related-grid,.product-related-grid){contain:layout style!important}
.product-main :is(.related-product-media,.related-media,.product-card-media){aspect-ratio:1/1!important;overflow:hidden!important}
.product-main :is(.related-product-media,.related-media,.product-card-media) img{width:100%!important;height:100%!important;object-fit:cover!important}

/* 10) Context/breadcrumb layer is actually clickable on fine pointers too. */
.emkan-context-path,#podcastPath,#storeCategoryPath,#productPath,.product-context-path,.v49-kicker{
  position:relative!important;z-index:80!important;pointer-events:auto!important;
}
.emkan-context-path a.emkan-crumb,#podcastPath a.emkan-crumb,#storeCategoryPath a.emkan-crumb,#productPath a.emkan-crumb,.product-context-path a.emkan-crumb,.v49-kicker a.emkan-crumb{
  position:relative!important;z-index:81!important;pointer-events:auto!important;cursor:pointer!important;
}
.site-header,.nav-frame{isolation:isolate}

/* 11) Welcome wordmark correction ONLY on phones. */
@media (max-width:700px){
  .welcome{
    --line-width:1.72!important;
    --letter-gap:clamp(.35px,.13vw,1px)!important;
    --tight-factor:.34!important;
  }
}
@media (max-width:380px){
  .welcome{--line-width:1.66!important;--letter-gap:.32px!important;--tight-factor:.33!important}
}

/* 2 + 3) Project video controls: readable white controls, accent on hover. */
:is(.architect-project-page,.civil-project-page) .media-surface--video .video-expand,
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-restore{
  color:#fff!important;background:rgba(6,8,12,.46)!important;border:1px solid rgba(255,255,255,.42)!important;
}
:is(.architect-project-page,.civil-project-page) .media-surface--video .video-expand svg,
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-restore svg{
  stroke:#fff!important;fill:none!important;
}
:is(.architect-project-page,.civil-project-page) .media-surface--video .video-expand:is(:hover,:focus-visible),
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-restore:is(:hover,:focus-visible){
  color:var(--hover-accent)!important;border-color:var(--hover-accent)!important;background:rgba(6,8,12,.72)!important;
}
:is(.architect-project-page,.civil-project-page) .media-surface--video .video-expand:is(:hover,:focus-visible) svg,
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-restore:is(:hover,:focus-visible) svg{
  stroke:var(--hover-accent)!important;
}
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-controls,
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-controls button{
  color:#fff!important;
}
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-controls button svg,
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-control-icon{
  stroke:#fff!important;color:#fff!important;
}
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-control-icon--fill{fill:#fff!important;stroke:none!important}
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-controls button:is(:hover,:focus-visible){color:var(--hover-accent)!important}
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-controls button:is(:hover,:focus-visible) svg{stroke:var(--hover-accent)!important}
:is(.architect-project-page,.civil-project-page) .fullscreen-video-shell .video-controls button:is(:hover,:focus-visible) .video-control-icon--fill{fill:var(--hover-accent)!important}

/* Admin module redirects/panels: keep content stable when opened through their dedicated URL. */
.admin-module-entry{min-height:100vh}
.product-main #productMainImage{overflow-anchor:none!important;transform:none!important;transition:none!important}
.product-main #productMainImage img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
.product-main #productThumbs,.product-main .related{overflow-anchor:none!important}
/* Full menu now has 8 equal items: ACCOUNT is last but not a special centered row. */
@media (min-width:561px) and (max-width:980px){
  .menu-page .menu-list .menu-cell:last-child{
    grid-column:auto!important;justify-self:stretch!important;width:auto!important;
    border-inline-start:1px solid var(--separator)!important;
  }
}


/* v111 refinements — project fullscreen clarity + course detail desktop balancing */
body.is-fullscreen-open .project-subnav-shell,
body.is-fullscreen-open .project-subnav,
body.is-fullscreen-open .site-header,
body.is-fullscreen-open .page-shell > .project-subnav-shell{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.fullscreen-viewer{z-index:2147482000 !important}
.fullscreen-dialog{inset:0 !important}
.fullscreen-stage{inset:34px 34px 42px !important}
.fullscreen-arrow{
  display:grid !important;
  place-items:center !important;
  width:46px !important;
  height:74px !important;
  color:#fff !important;
  opacity:.92 !important;
  background:linear-gradient(to var(--v111-arrow-dir,left), rgba(8,10,13,.18), rgba(8,10,13,0)) !important;
}
.fullscreen-arrow--prev{left:8px !important;--v111-arrow-dir:right}
.fullscreen-arrow--next{right:8px !important;--v111-arrow-dir:left}
.fullscreen-arrow:hover,.fullscreen-arrow:focus-visible{color:var(--hover-accent) !important;opacity:1 !important}
.fullscreen-arrow[disabled]{opacity:.22 !important;background:transparent !important}
.fullscreen-arrow .arrow-svg{width:22px !important;height:22px !important}
.fullscreen-arrow .arrow-svg polyline{stroke-width:1.9 !important}
.fullscreen-close{z-index:8 !important;color:#fff !important;background:rgba(8,10,13,.24) !important;border-radius:999px !important;display:grid !important;place-items:center !important;top:10px !important;right:10px !important}
.fullscreen-close:hover,.fullscreen-close:focus-visible{color:var(--hover-accent) !important;opacity:1 !important}
.fullscreen-video-stage{background:#07090b !important}
@media (max-width:700px){
  .fullscreen-stage{inset:42px 14px 46px !important}
  .fullscreen-arrow{width:34px !important;height:56px !important}
  .fullscreen-arrow--prev{left:0 !important}
  .fullscreen-arrow--next{right:0 !important}
}

/* Course detail desktop: compact poster at left, richer info block at right. */
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery{
  display:grid !important;
  grid-template-columns:minmax(320px,420px) minmax(0,1fr) !important;
  gap:34px !important;
  align-items:start !important;
}
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery > .v110-course-hero-side{
  display:grid !important;
  grid-template-columns:minmax(148px,176px) minmax(0,1fr) !important;
  gap:28px !important;
  align-items:start !important;
  min-width:0 !important;
}
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery > .v110-course-hero-side > .v49-facts{
  border-inline-start:0 !important;
  border-inline-end:1px solid var(--line) !important;
  padding-inline-start:0 !important;
  padding-inline-end:22px !important;
  margin:0 !important;
}
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery > .v110-course-hero-side > .v94-hero-summary,
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery > .v110-course-hero-side > div:first-child{
  min-width:0 !important;
}
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-gallery{
  width:min(100%,420px) !important;
  height:auto !important;
  display:block !important;
  margin:0 !important;
}
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-gallery-main{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
  border:1px solid var(--line) !important;
}
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-gallery-main img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-gallery-thumbs{display:none !important}
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-single-action,
body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-actions{margin-top:16px !important;margin-bottom:0 !important;justify-content:flex-start !important}
body.content-section-page #contentApp article.v86-course-detail .learning-workspace{margin-top:22px !important}
body.content-section-page #contentApp article.v86-course-detail .learning-panels > .v49-section{min-height:180px !important}
body.content-section-page #contentApp article.v86-course-detail .learning-stages{align-items:start !important}

@media (max-width:959px){
  body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery > .v110-course-hero-side{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery > .v110-course-hero-side > .v49-facts{
    border-inline-end:0 !important;
    padding-inline-end:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px 18px !important;
  }
  body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-gallery{
    width:min(100%,420px) !important;
    margin-inline:auto !important;
  }
  body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-single-action,
  body.content-section-page #contentApp article.v86-course-detail > .v49-hero.v111-has-gallery .v106-course-actions{justify-content:center !important}
}