/* Home featured instruments (TODO 00001.5.13). FINAL design/home/inspiration/sections/featured/r3/v3.png.
   Product card (section 8): white, 1px line edge, 4px radius, 4:3 photo on a light sweep, H3 name, slate model
   line, label caps, the range scale (section 7). Static cards carry no price, stock line or Add to cart. */
.p-home-featured {
  box-sizing: border-box; background: var(--wp--preset--color--white);
  padding: var(--wp--custom--section--desktop) var(--wp--custom--gutter--desktop);
}
.p-home-featured *, .p-home-featured *::before, .p-home-featured *::after { box-sizing: border-box; }
.p-home-featured__inner { max-width: var(--wp--custom--layout--wide); margin-inline: auto; }
.p-home-featured__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--90);
}
.p-home-featured .p-home-featured__title {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--60); margin: 0;
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-4);
  font-weight: var(--wp--custom--font-weight--h-4); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-home-featured__title::before { content: ""; flex: none; width: 48px; height: 3px; background: var(--wp--preset--color--orange); }
.p-home-featured__all { margin: 0; flex: none; }
.p-home-featured__all a, .p-home-featured__view a {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); min-height: var(--wp--custom--touch);
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--body); font-weight: 600; text-decoration: none;
}
.p-home-featured__all a::after, .p-home-featured__view a::after {
  content: ""; width: 20px; height: 20px; background: currentColor; transition: transform 0.2s cubic-bezier(.22, .61, .36, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-home-featured a:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: var(--wp--custom--focus--offset);
}
@media (hover: hover) and (pointer: fine) {
  .p-home-featured__all a:hover::after, .p-home-featured__view a:hover::after { transform: translateX(3px); }
}
.p-home-featured .wp-block-woocommerce-product-collection { margin: 0; }
.p-home-featured .wp-block-woocommerce-product-collection-no-results { margin: 0; }
/* Straight after shop by type (same white ground, as in the composite) the two read as one band: one section gap
   between them (guide section 6), not two paddings stacked. */
.p-home-shop-by-type + .p-home-featured { padding-top: 0; }
/* Static cards (no-results) and real products (product-template) share the grid. */
.p-home-featured__grid,
.p-home-featured .wc-block-product-template,
.p-home-featured .wp-block-woocommerce-product-template {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60);
  margin: 0; padding: 0; list-style: none;
}
.p-home-featured__card,
.p-home-featured .wc-block-product {
  position: relative; display: flex; flex-direction: column;
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--default); overflow: hidden;
}
/* The hover lift's 0.2 s transition. Seeded cards (the li) carry data-mo, so under html.mo the kit's reveal and then
   its .mo-done 0.2 s own their transition (a plain rule here has the kit's specificity and, printed later, would cut
   the reveal to 0.2 s transform with a snapped opacity: 00001.5.22.2 Q2); without html.mo this rule gives the li its
   hover transition. */
.p-home-featured__card,
html:not(.mo) .p-home-featured .wc-block-product { transition: transform 0.2s cubic-bezier(.22, .61, .36, 1); }
.p-home-featured__card::after,
.p-home-featured .wc-block-product::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: var(--wp--custom--shadow); opacity: 0; transition: opacity 0.2s cubic-bezier(.22, .61, .36, 1);
}
.p-home-featured__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--mist); }
.p-home-featured__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-home-featured .p-home-featured__name {
  margin: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) 0;
  font-size: var(--wp--preset--font-size--h-4); font-weight: var(--wp--custom--font-weight--h-4); line-height: 1.25;
  color: var(--wp--preset--color--navy);
}
.p-home-featured__model {
  margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60) 0;
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); line-height: 1.5;
}
.p-home-featured__kind {
  margin: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) 0;
  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;
}
.p-home-featured__scale { margin: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) 0; line-height: 0; }
.p-home-featured .norvane-range-scale { display: block; width: 100%; height: 20px; overflow: visible; }
.p-home-featured .norvane-range-scale__ticks line { stroke: var(--wp--preset--color--slate); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-home-featured .norvane-range-scale__seg line { stroke: var(--wp--preset--color--navy); vector-effect: non-scaling-stroke; }
.p-home-featured .norvane-range-scale__seg line:first-child { stroke-width: 3; }
.p-home-featured .norvane-range-scale__seg line + line { stroke-width: 2; }
.p-home-featured__view { margin: auto var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--50); }
.p-home-featured__view a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.p-home-featured__view a:focus-visible { outline: none; }
.p-home-featured__card:focus-within,
.p-home-featured .wc-block-product:focus-within {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: var(--wp--custom--focus--offset);
}
@media (hover: hover) and (pointer: fine) {
  .p-home-featured__card:hover,
  .p-home-featured .wc-block-product:hover { transform: translateY(-4px); }
  .p-home-featured__card:hover::after,
  .p-home-featured .wc-block-product:hover::after { opacity: 1; }
  .p-home-featured__card:hover .p-home-featured__view a::after { transform: translateX(3px); }
}
/* Seeded cards (00001.5.17): the same card with the FINAL's fields from the product, then price, the stock line
   and Add to cart on one row (FINAL r3/v3). */
.p-home-featured .wc-block-product > * { margin-block: 0; }
.p-home-featured .wc-block-product .p-home-featured__photo { margin: 0; }
.p-home-featured .wc-block-product .p-home-featured__photo img { aspect-ratio: 4 / 3; }
/* The reset above would put the name on the photo edge and pack the fields; keep the static card's rhythm. */
.p-home-featured .wc-block-product > .p-home-featured__name { margin-top: var(--wp--preset--spacing--60); }
.p-home-featured .wc-block-product > .p-home-featured__model { margin-top: var(--wp--preset--spacing--20); }
.p-home-featured .wc-block-product > .p-home-featured__kind { margin-top: var(--wp--preset--spacing--40); }
.p-home-featured .wc-block-product > .p-home-featured__scale { margin-top: var(--wp--preset--spacing--40); }
/* Row alignment (Home composite, 00001.5.17 fix2): the seven card fields share the grid's rows, so a name or kind
   line that wraps lowers that row in every card of the row and the model, kind, scale, price and buy rows align. */
@supports (grid-template-rows: subgrid) {
  .p-home-featured .wc-block-product { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; align-content: start; }
  .p-home-featured .wc-block-product > .p-home-featured__price { margin-top: 0; align-self: end; }
}
.p-home-featured__name a { color: inherit; text-decoration: none; }
.p-home-featured__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-home-featured .wc-block-product > .p-home-featured__price {
  margin: auto var(--wp--preset--spacing--60) 0; padding-top: var(--wp--preset--spacing--40); text-align: left;
  color: var(--wp--preset--color--navy); font-weight: 700;
}
/* Buy row (composite): "In stock" on one line, then a small outline Add to cart with a cart icon. The price and
   this row sit together at the card foot, so the buttons line up across a row; it wraps (stock above, button below) only when the card is too narrow for both. */
.p-home-featured .wc-block-product > .p-home-featured__buy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  margin: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}
.p-home-featured__stock {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); margin: 0; white-space: nowrap;
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label); line-height: 1.3;
}
.p-home-featured__stock .p-icon { flex: none; width: 16px; height: 16px; color: var(--wp--preset--color--navy); }
.p-home-featured__add { margin: 0 !important; flex: none; }
.p-home-featured .p-home-featured__add .wp-element-button.wc-block-components-product-button__button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--touch); padding: 0 var(--wp--preset--spacing--30); white-space: nowrap;
  background: transparent; color: var(--wp--preset--color--navy); border: 1px solid var(--wp--preset--color--navy);
  border-radius: var(--wp--custom--radius--default);
  font-size: var(--wp--preset--font-size--label); font-weight: var(--wp--custom--font-weight--button); line-height: 1.2;
}
.p-home-featured__add .wp-element-button::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Press (00001.5.22.13.b, the .12 rule): scale .98 at once; the outline's navy fill lands at once. */
.p-home-featured .p-home-featured__add .wp-element-button.wc-block-components-product-button__button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .p-home-featured .p-home-featured__add .wp-element-button.wc-block-components-product-button__button:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
}
/* Five across from 1200 (the FINAL's row); four from 840 and two from 600, the fifth card waits for the shop. */
@media (max-width: 1199.98px) {
  .p-home-featured__grid,
  .p-home-featured .wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-home-featured__card:nth-child(n + 5),
  .p-home-featured .wc-block-product:nth-child(n + 5) { display: none; }
}
@media (max-width: 991.98px) {
  .p-home-featured { padding: var(--wp--custom--section--tablet) var(--wp--custom--gutter--tablet); }
  .p-home-featured__grid,
  .p-home-featured .wc-block-product-template { gap: var(--wp--preset--spacing--50); }
}
@media (max-width: 839.98px) {
  .p-home-featured__grid,
  .p-home-featured .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .p-home-featured { padding: var(--wp--custom--section--phone) var(--wp--custom--gutter--phone); }
  .p-home-featured__head { margin-bottom: var(--wp--preset--spacing--70); flex-wrap: wrap; }
  .p-home-featured__grid,
  .p-home-featured .wc-block-product-template { grid-template-columns: minmax(0, 1fr); }
}
/* Motion (stage 10, 00001.5.22.2; design/FINDINGS.md "Motion inventory: featured"). inc/motion.php sets data-mo on the
   head (rise), the title (hook) and every product li (rise, kit cascade; the collection entry's 'each'). These are the
   hook start states, all under html.mo and only until .mo-in, so JS off, reduced motion and print show the approved
   look. Story move: each card's range segment opens from its left end (scaleX on the group, fill-box origin), so the
   right end tick travels out to the product's range. Price and buy row fade 600 ms after their card starts. */
.mo .p-home-featured__title[data-mo]::before { transform-origin: 0 50%; transition: transform var(--mo-dur) var(--mo-ease); }
.mo .p-home-featured__title[data-mo]:not(.mo-in)::before { transform: scaleX(0); }
.mo .p-home-featured [data-mo] .norvane-range-scale__seg {
  transform-box: fill-box; transform-origin: 0 50%;
  transition: transform 1.4s var(--mo-ease) calc(var(--mo-i, 0) * var(--mo-stagger) + var(--mo-delay, 0ms) + 400ms);
}
.mo .p-home-featured [data-mo]:not(.mo-in) .norvane-range-scale__seg { transform: scaleX(0); }
.mo .p-home-featured [data-mo] > .p-home-featured__price,
.mo .p-home-featured [data-mo] > .p-home-featured__buy {
  transition: opacity var(--mo-dur) var(--mo-ease) calc(var(--mo-i, 0) * var(--mo-stagger) + var(--mo-delay, 0ms) + 600ms);
}
.mo .p-home-featured [data-mo]:not(.mo-in) > .p-home-featured__price,
.mo .p-home-featured [data-mo]:not(.mo-in) > .p-home-featured__buy { opacity: 0; }