/* Automatic titles only. Elementor/page content and single-product/post headings
 * never receive this class. Preserve native links, steps and category navigation. */
body.bwoof-ui-v180 :is(.wd-page-title, .bwoof-category-heading).bwoof-page-hero {
  --color-gray-900: #172b40;
  --color-gray-800: #172b40;
  --color-gray-500: #52677b;
  --wd-link-color: #125791;
  --wd-link-color-hover: #0d4777;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 1320px;
  margin: 28px auto 32px;
  padding: clamp(24px, 3.5vw, 44px);
  border: 1px solid #d0e2f1;
  border-radius: 24px;
  background: radial-gradient(ellipse at 10% 10%, rgb(18 87 145 / 9%), transparent 55%), linear-gradient(120deg, #f0f7fc, #fbfdff 70%) !important;
  color: var(--bwoof-text, #172b40);
  text-align: start;
  box-shadow: 0 12px 32px rgb(23 43 64 / 4%);
  font-family: var(--bwoof-font, Vazirmatn, sans-serif);
}
body.bwoof-ui-v180 .bwoof-page-hero > .wd-page-title-bg { display: none; }
body.bwoof-ui-v180 .bwoof-page-hero > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .85fr);
  align-items: center;
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 16px;
  max-width: none;
  width: 100%;
  min-width: 0;
  padding: 0;
}
body.bwoof-ui-v180 .bwoof-page-hero > .container > :not(.bwoof-page-hero__art) { grid-column: 1; min-width: 0; }
body.bwoof-ui-v180 .bwoof-page-hero .bwoof-page-hero__tag {
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #d0e6f7;
  border-radius: 999px;
  background: #eaf5ff;
  color: #125791;
  font-size: 12px;
  font-weight: 650;
}
body.bwoof-ui-v180 .bwoof-page-hero__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #318cca; box-shadow: 0 0 0 4px rgb(49 140 202 / 10%); }
body.bwoof-ui-v180 .bwoof-page-hero :is(.entry-title.title, .bwoof-page-hero__title, .bwoof-category-title) {
  grid-row: 2;
  margin: 0;
  color: #172b40 !important;
  font-family: var(--bwoof-font, Vazirmatn, sans-serif);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
/* Shop/taxonomy titles nest the hook inside this native wrapper. Let its
 * children share the hero grid, as direct titles on other routes already do. */
body.bwoof-ui-v180 .bwoof-page-hero .wd-title-wrapp { display: contents; }
body.bwoof-ui-v180 .bwoof-page-hero .wd-title-wrapp > :not(.bwoof-page-hero__art) { grid-column: 1; min-width: 0; }
body.bwoof-ui-v180 .bwoof-page-hero .bwoof-page-hero__description { grid-row: 3; margin: 0; max-width: 65ch; color: #52677b; font-size: 14px; line-height: 2; }
body.bwoof-ui-v180 .bwoof-page-hero :is(.breadcrumbs, .woocommerce-breadcrumb) { margin: 0; color: #52677b; font-size: 12px; line-height: 1.9; }
body.bwoof-ui-v180 .bwoof-page-hero :is(.breadcrumbs, .woocommerce-breadcrumb) a { color: #125791; }
body.bwoof-ui-v180 .bwoof-page-hero .bwoof-page-hero__art {
  grid-column: 2;
  grid-row: 1 / span 6;
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 240px;
  border: 1px solid #326281;
  border-radius: 18px;
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgb(160 211 240 / 5%) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgb(160 211 240 / 5%) 23px 24px), radial-gradient(circle at 80% 12%, #236b9a, transparent 65%), #0b2c46;
  overflow: hidden;
  color: #eff8ff;
}
.bwoof-page-hero__orbit { position: absolute; width: 210px; height: 210px; border: 1px solid rgb(138 211 255 / 15%); border-radius: 50%; }
.bwoof-page-hero__orbit::after { content: ''; position: absolute; inset: 28px; border: 1px solid rgb(138 211 255 / 12%); border-radius: inherit; }
.bwoof-page-hero__chip { position: relative; display: grid; justify-items: center; gap: 12px; min-width: 124px; padding: 24px; border: 1px solid #69b2df; border-radius: 22px; background: linear-gradient(145deg, #216b9e, #0c3858); box-shadow: 0 0 0 10px rgb(116 189 235 / 5%), 0 12px 28px rgb(0 0 0 / 12%); }
.bwoof-page-hero__chip svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bwoof-page-hero__chip > span { font-size: 12px; font-weight: 700; letter-spacing: 2px; }
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
  counter-reset: bwoof-step;
}
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li { margin: 0; padding: 0; }
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li::before,
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li::after { content: none; }
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li > :is(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d6e1ea;
  border-radius: 12px;
  background: #fff;
  color: #52677b !important;
  opacity: 1;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
  text-decoration: none;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li > :is(a, span)::before { counter-increment: bwoof-step; content: counter(bwoof-step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #edf3f9; color: #52677b; font-size: 11px; }
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li a:is(:hover, :focus-visible) { background: #eaf3fb; border-color: #b0cee5; color: #125791 !important; }
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li.step-active > :is(a, span) { background: #125791; border-color: #125791; color: #fff !important; }
body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li.step-active > :is(a, span)::before { background: rgb(255 255 255 / 16%); color: #fff; }
body.bwoof-ui-v180 .bwoof-page-hero a:focus-visible { outline: 2px solid #125791; outline-offset: 3px; }
body.bwoof-ui-v180 .bwoof-page-hero .wd-nav-product-cat-wrap { margin: 0; width: 100%; }
@media (max-width: 767px) {
  body.bwoof-ui-v180 :is(.wd-page-title, .bwoof-category-heading).bwoof-page-hero { width: calc(100% - 24px); margin-block: 16px 24px; padding: 20px 16px; border-radius: 16px; }
  body.bwoof-ui-v180 .bwoof-page-hero > .container { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.bwoof-ui-v180 .bwoof-page-hero :is(.entry-title.title, .bwoof-page-hero__title, .bwoof-category-title) { font-size: clamp(22px, 5.5vw, 28px); line-height: 1.6; }
  body.bwoof-ui-v180 .bwoof-page-hero .bwoof-page-hero__tag { max-width: 100%; line-height: 1.8; }
  body.bwoof-ui-v180 .bwoof-page-hero .bwoof-page-hero__tag::before { flex: 0 0 6px; }
  body.bwoof-ui-v180 .bwoof-page-hero .bwoof-page-hero__description { font-size: 13px; line-height: 1.9; }
  body.bwoof-ui-v180 .bwoof-page-hero .bwoof-page-hero__art { display: none; }
  body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps { gap: 6px; }
  body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li { flex: 1 1 100px; }
  body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li > :is(a, span) { width: 100%; min-height: 48px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps li > :is(a, span) { transition: none; }
}

body.bwoof-ui-v180 .bwoof-page-hero .wd-checkout-steps a > span { color: inherit; }

/* The category's existing H1 stays in the archive's native topbar flow. */
body.bwoof-ui-v180 .bwoof-catalog-topbar > .bwoof-category-heading.bwoof-page-hero {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  margin-block: 0 24px;
}

/* Archive topbar rules use row 2 for child navigation. Inside the hero that
 * row belongs to its H1; reserve a separate row so links never cover the title. */
body.bwoof-ui-v180 .bwoof-page-hero > .container > .bwoof-category-children {
  grid-column: 1;
  grid-row: 4;
  min-width: 0;
  margin: 0;
}
@media (max-width: 1024px) {
  body.bwoof-ui-v180 .bwoof-page-hero .bwoof-category-child-title > a { min-height: 48px; white-space: normal; }
  /* Children now live inside the hero: no empty outer row or nested frame. */
  body.bwoof-ui-v180 .bwoof-catalog-topbar:has(> .bwoof-category-heading.bwoof-page-hero) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    row-gap: 16px;
  }
  body.bwoof-ui-v180 .bwoof-catalog-topbar > .bwoof-category-heading.bwoof-page-hero { margin-block: 0; }
  body.bwoof-ui-v180 .bwoof-catalog-topbar:has(> .bwoof-category-heading.bwoof-page-hero) > .shop-loop-head { grid-row: 2; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body.bwoof-ui-v180 :is(.wd-page-title, .bwoof-category-heading).bwoof-page-hero { padding: 24px; }
  body.bwoof-ui-v180 .bwoof-page-hero > .container { grid-template-columns: minmax(0, 1fr) minmax(160px, .65fr); column-gap: 24px; }
  body.bwoof-ui-v180 .bwoof-page-hero .bwoof-page-hero__art { min-height: 200px; }
  body.bwoof-ui-v180 .bwoof-page-hero__orbit { width: 170px; height: 170px; }
}
