/* Shop title (TODO 00001.5.14). FINAL design/shop/inspiration/sections/title/r4/f1.png.
   Breadcrumb (section 8), H1 and lead on one row with the margin rule's lead variant (2px navy rule left of the
   lead), then the category index: label caps links between two 1px line hairlines, the current one navy 700
   on a 2px navy bar standing on the lower hairline (section 7). White ground, navy and slate only. */
.p-shop-title {
  box-sizing: border-box; background: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--100) var(--wp--custom--gutter--desktop) 0;
}
.p-shop-title *, .p-shop-title *::before, .p-shop-title *::after { box-sizing: border-box; }
.p-shop-title__inner { max-width: var(--wp--custom--layout--wide); margin-inline: auto; }
.p-shop-title .p-shop-title__crumbs, .p-shop-title .woocommerce-breadcrumb {
  margin: 0; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--small); line-height: 1.5;
}
.p-shop-title .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--wp--preset--spacing--20); }
.p-shop-title .woocommerce-breadcrumb a {
  color: var(--wp--preset--color--slate); text-decoration: none; text-underline-offset: 3px;
}
.p-shop-title .norvane-crumb-sep { display: inline-flex; margin-inline: var(--wp--preset--spacing--30); color: var(--wp--preset--color--slate); }
.p-shop-title__head { display: flex; align-items: center; gap: var(--wp--preset--spacing--90); margin-top: var(--wp--preset--spacing--70); }
.p-shop-title .p-shop-title__h1 {
  flex: 0 1 auto; margin: 0; color: var(--wp--preset--color--navy);
  font-size: var(--wp--preset--font-size--h-1); font-weight: var(--wp--custom--font-weight--h-1);
  letter-spacing: var(--wp--custom--letter-spacing--h-1); line-height: 1.1;
}
.p-shop-title__lead {
  flex: 0 1 34rem; margin: 0 0 0 auto; padding-left: var(--wp--preset--spacing--60);
  border-left: 2px solid var(--wp--preset--color--navy);
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--body-l); line-height: 1.6;
}
.p-shop-title__index {
  margin-top: var(--wp--preset--spacing--80);
  border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line);
}
.p-shop-title__index ul { display: flex; gap: var(--wp--preset--spacing--90); margin: 0; padding: 0; list-style: none; }
.p-shop-title__index li { flex: none; }
.p-shop-title__index a {
  position: relative; display: flex; align-items: center; min-height: var(--wp--custom--control);
  padding-inline: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase; text-decoration: none;
}
.p-shop-title__index a[aria-current="page"] { color: var(--wp--preset--color--navy); font-weight: 700; }
.p-shop-title__index a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wp--preset--color--navy);
}
.p-shop-title a:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset);
}
.p-shop-title__index a:focus-visible { outline-offset: calc(-1 * var(--wp--custom--focus--width)); }
@media (hover: hover) and (pointer: fine) {
  .p-shop-title .woocommerce-breadcrumb a:hover { text-decoration: underline; }
  .p-shop-title__index a:not([aria-current]):hover { color: var(--wp--preset--color--navy); }
}
@media (max-width: 991.98px) {
  .p-shop-title { padding: var(--wp--preset--spacing--90) var(--wp--custom--gutter--tablet) 0; }
  .p-shop-title__head { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--60); }
  .p-shop-title__lead { flex: none; max-width: 40rem; margin: 0; padding-left: 0; border-left: 0; }
  .p-shop-title__index { margin-top: var(--wp--preset--spacing--70); }
  .p-shop-title__index ul { gap: var(--wp--preset--spacing--60); overflow-x: auto; scrollbar-width: none; }
  .p-shop-title__index ul::-webkit-scrollbar { display: none; }
}
@media (max-width: 599.98px) {
  .p-shop-title { padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter--phone) 0; }
  .p-shop-title__index ul { gap: var(--wp--preset--spacing--40); }
}

/* Motion (stage 10, 00001.5.22.8.c; design/FINDINGS.md "Motion inventory: shop-title"). inc/motion.php makes the
   section root the one pinned hook (data-mo="hook", --mo-i:0, no delay); every move is a hook-child. Start states live
   under html.mo and only until the root's .mo-in, so JS off, reduced motion and print show the approved look.
   The title is entered in the register: the H1 settles 12 px down into place, the lead follows 150 ms later from 8 px up
   (its 2 px margin rule travels with it from 992), and on a category page the current link's 2 px navy bar draws along
   the lower hairline from its left end at 300 ms. From above, because the band has no bottom padding and a rise from
   below would cross its foot. Transform only: the H1 and the lead are LCP elements, so nothing takes an opacity start.
   Breadcrumb, index links and hairlines stay still. The transitions are NOT scoped to :not(.mo-done): the root's
   .mo-done comes from the kit's 2.5 s timer and the hook has no transition of its own (GO-043). */
.mo .p-shop-title[data-mo] .p-shop-title__h1 { transition: transform 1.4s var(--mo-ease) var(--mo-delay, 0ms); }
.mo .p-shop-title[data-mo] .p-shop-title__lead { transition: transform var(--mo-dur) var(--mo-ease) calc(var(--mo-delay, 0ms) + 150ms); }
.mo .p-shop-title[data-mo] .p-shop-title__index a[aria-current="page"]::after {
  transform-origin: 0 50%; transition: transform 1.4s var(--mo-ease) calc(var(--mo-delay, 0ms) + 300ms);
}
.mo .p-shop-title[data-mo]:not(.mo-in) .p-shop-title__h1 { transform: translate3d(0, -12px, 0); }
.mo .p-shop-title[data-mo]:not(.mo-in) .p-shop-title__lead { transform: translate3d(0, -8px, 0); }
.mo .p-shop-title[data-mo]:not(.mo-in) .p-shop-title__index a[aria-current="page"]::after { transform: scaleX(0); }