/* TN_PS_SEO_LOCAL_MAX_V1 — presentation for SEO/CWV improvements (2026-10). */

/* Home carousel: owl hides .owl-carousel until its script (end of <body>) initializes it,
   which pushed the whole page down (CLS ~0.44). Before init, show the same slides in a row
   with the item counts owl uses at the theme's breakpoints (1/2/3/5). The images carry their
   real width/height, so heights follow the true image ratio — nothing is forced or stretched.
   (TN_PS_SEO_UX_FIX_V2: the earlier fixed 384/660 ratio stretched the 373x550 slides.) */
.home_carousel_slider.owl-carousel:not(.owl-loaded) { display: flex; overflow: hidden; }
.home_carousel_slider.owl-carousel:not(.owl-loaded) > .item { flex: 0 0 100%; }
.home_carousel_slider.owl-carousel:not(.owl-loaded) .carousel_hover { display: none; }
.home_carousel_slider .h_carousel_item img { width: 100%; height: auto; display: block; }
@media (min-width: 575px) { .home_carousel_slider.owl-carousel:not(.owl-loaded) > .item { flex-basis: 50%; } }
@media (min-width: 800px) { .home_carousel_slider.owl-carousel:not(.owl-loaded) > .item { flex-basis: 33.3333%; } }
@media (min-width: 1200px) { .home_carousel_slider.owl-carousel:not(.owl-loaded) > .item { flex-basis: 20%; } }

/* Banners: keep the natural ratio whatever the attributes say. */
picture > img { max-width: 100%; }

/* Home page (TN_PS_HOME_INFO_V3): visible informational band directly above the footer; it shares
   the footer's colour so it reads as the footer's intro, not as a product section. The heading has a
   dedicated class: the theme's bare "h1" rule (css/main-css.css) draws a blue product-title bar, so
   every property of that rule is reset here instead of changing the shared rule. */
.ps-home-info {
  clear: both;
  width: 100%;
  background-color: #474747;
  border-bottom: 1px solid #5c5c5c;
  color: #c9c9c9;
  font-size: 0.875rem;
  line-height: 1.9;
}
.ps-home-info[dir="rtl"] { font-family: "BYekan", Tahoma, sans-serif; }
.ps-home-info__inner { padding-top: 22px; padding-bottom: 18px; }
.ps-home-info .ps-home-info__title {
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none !important; /* the theme's h1 shadow is !important */
  text-align: start;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.7;
  color: #ececec;
}
.ps-home-info .ps-home-info__text { margin: 0; color: #c9c9c9; text-align: start; }
.ps-home-info a { color: #9fd0ff; text-decoration: underline; }
.ps-home-info a:hover, .ps-home-info a:focus { color: #fff; }
@media (max-width: 767px) {
  .ps-home-info { font-size: 0.8125rem; }
  .ps-home-info__inner { padding-top: 16px; padding-bottom: 14px; }
  .ps-home-info .ps-home-info__title { font-size: 0.875rem; }
}

/* Sign design page: visible breadcrumb and description block. */
.ps-seo-breadcrumb { margin: 8px 0 12px; padding: 0; font-size: 0.9rem; }
.ps-seo-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ps-seo-breadcrumb li { display: inline; color: #52606d; }
.ps-seo-breadcrumb li + li::before { content: "/"; margin: 0 6px; color: #9aa5b1; }
.ps-seo-breadcrumb a { color: #0b5394; text-decoration: none; }
.ps-seo-breadcrumb [aria-current] { color: #1f2933; }

.ps-seo-sign-about {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fbfcfe;
  line-height: 1.9;
  color: #1f2933;
}
.ps-seo-sign-about h2 { font-size: 1.1rem; margin: 0 0 8px; color: #0b3d6b; }
.ps-seo-sign-about p { margin: 0 0 8px; }
.ps-seo-sign-about dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0 0; }
.ps-seo-sign-about dt { color: #52606d; }
.ps-seo-sign-about dd { margin: 0; }
.ps-seo-sign-about .ps-seo-sign-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ps-seo-sign-about .ps-seo-sign-links a { color: #0b5394; }

/* Sign-topic hubs: generic intro. */
.ps-seo-hub-intro p { margin: 0 0 10px; line-height: 1.9; color: #1f2933; }
.ps-seo-sign-about .ps-seo-sign-topics a { display: inline-block; margin: 0 0 4px; }

/* TN_PS_SEO_UX_FIX_V2: sign filter — the complete Sign Maker topic list as wrapping chips,
   no inner scroll box. The native checkbox stays in place (same filter behaviour, keyboard
   and screen-reader support); the whole chip is its label. */
.ps-sign-facet-panel .ps-facet-group .ps-facet-options-scroll.ps-facet-topic-chips {
  max-height: none; overflow: visible; padding-bottom: 2px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-option {
  flex: 0 1 auto; min-height: 30px; padding: 4px 9px; gap: 6px;
  border: 1px solid #d5dee8; border-radius: 999px; background: #fff;
  font-size: 11.5px; line-height: 1.5; color: #24364b;
}
.ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-option:hover { border-color: #1268c4; background: #f2f7fd; }
.ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-option input { margin: 0; flex: 0 0 auto; }
.ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-option-label { flex: 0 1 auto; }
.ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-count { font-size: 10px; opacity: .8; }
.ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-option:focus-within { outline: 2px solid #1268c4; outline-offset: 1px; }
.ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-option:has(input:checked) { background: #1268c4; border-color: #1268c4; color: #fff; }
.ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-option:has(input:checked) .ps-facet-count { color: #fff; background: transparent; }
@media (max-width: 767px) {
  .ps-sign-facet-panel .ps-facet-topic-chips .ps-facet-option { min-height: 40px; font-size: 13px; }
}

/* TN_PS_SOFT_FACET_AJAX_V26: selected shape is as obvious as a selected topic chip. */
.ps-sign-facet-panel .ps-shape-option:has(input:checked) { border-color: #1268c4; background: #edf5ff; box-shadow: inset 0 0 0 1px #1268c4; color: #0d4f95; font-weight: 700; }
/* Subtle loading state for in-place filter updates: the current results stay in place, slightly
   dimmed (after a short delay, so fast responses do not flash), and a thin bar runs under the
   filter heading. No overlay, no layout change. */
[data-ps-sign-results] { transition: opacity .15s ease; }
[data-ps-sign-results].ps-catalog-soft-busy { opacity: .55; transition-delay: .12s; cursor: progress; }
.ps-sign-facet-panel.ps-catalog-soft-busy { cursor: progress; }
.ps-sign-facet-panel .ps-facet-head { position: relative; }
.ps-sign-facet-panel.ps-catalog-soft-busy .ps-facet-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, #1268c4, transparent); background-size: 50% 100%;
  background-repeat: no-repeat; animation: psSoftFacetBarV26 1s linear infinite;
}
@keyframes psSoftFacetBarV26 { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .ps-sign-facet-panel.ps-catalog-soft-busy .ps-facet-head::after { animation: none; background: #1268c4; opacity: .5; } }