/* Edur UI v3 draft: append AFTER edur-ui-v2_2.css; remove this file to undo.
   Scoped additions only. Row 2.7 (phone search) is outside this draft. */

/* Row 2.5 — left-align the breadcrumb across its existing content container;
   override black/coral child spans as well as the inherited grey. */
html body.template-13 .breadcrumbs,
html body.template-13.type-product .breadcrumbs {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  text-align: left;
  color: #6a6a6a;
}
html body.template-13 .breadcrumbs :is(a, span),
html body.template-13 .breadcrumbs #navigation-1 span {
  color: #6a6a6a;
}

/* Row 3.4 — 34 x 28 px pagination targets, retaining a 2 px visual bar.
   !important replaces the live v2_2 important height/padding declarations. */
html body.template-13 .product-slider-pagination button.pagination-button {
  box-sizing: border-box !important;
  width: 34px;
  min-width: 34px;
  height: 28px !important;
  min-height: 28px;
  padding: 13px 0 !important;
  background-clip: content-box !important;
  flex-shrink: 0;
}

/* Row 4.6 — the active state belongs to div.topic, not its link or li.
   Explicit white background keeps navy text contrast stable on hover/focus.
   Include child spans: the template separately colours the expander span. */
html body.template-13.type-category .sidebar-inner #categories div.topic.active > a,
html body.template-13.type-category .sidebar-inner #categories div.topic.active > a:hover,
html body.template-13.type-category .sidebar-inner #categories div.topic.active > a:focus-visible {
  color: #2a353d !important;
  background-color: #fff !important;
  box-shadow: inset 3px 0 0 #2a8420 !important;
  border-radius: 8px;
}
html body.template-13.type-category .sidebar-inner #categories div.topic.active > a > span {
  color: inherit !important;
}

/* Row 5.1 — make the anchor box itself 34 x 34 px or larger.
   Preserve native overflow visibility, transforms and the larger ::after target. */
html body.template-13.type-product .p-thumbnails :is(.thumbnail-prev, .thumbnail-next) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  height: 34px;
  margin-top: -17px;
  line-height: 1;
  border-radius: 8px;
}

/* Row 7.6 — persistent underline and 8 px vertical / 8 px brand-side padding.
   Breadcrumb horizontal padding stays zero to preserve the row's left edge. */
html body.template-13 .breadcrumbs a,
html body.template-13.type-product .brand-wrapper-manufacturer-name > a {
  display: inline-block;
  padding: 4px 0;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html body.template-13.type-product .brand-wrapper-manufacturer-name > a {
  padding-left: 8px;
  padding-right: 8px;
  color: #2a353d;
  border-radius: 8px;
}

/* Row 2.5 (Claude fix after render check) — desktop: align breadcrumb with the 24 px content edge (h1 starts at 24; breadcrumb container starts at 4). */
@media (min-width: 768px) {
  html body.template-13 .breadcrumbs,
  html body.template-13.type-product .breadcrumbs { padding-left: 20px; }
}