/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-8a3uvkm96t] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-8a3uvkm96t] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-k6d4j94cdq],
.components-reconnect-repeated-attempt-visible[b-k6d4j94cdq],
.components-reconnect-failed-visible[b-k6d4j94cdq],
.components-pause-visible[b-k6d4j94cdq],
.components-resume-failed-visible[b-k6d4j94cdq],
.components-rejoining-animation[b-k6d4j94cdq] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-k6d4j94cdq],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-k6d4j94cdq],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-k6d4j94cdq],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-k6d4j94cdq],
#components-reconnect-modal.components-reconnect-retrying[b-k6d4j94cdq],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-k6d4j94cdq],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-k6d4j94cdq],
#components-reconnect-modal.components-reconnect-failed[b-k6d4j94cdq],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-k6d4j94cdq] {
    display: block;
}


#components-reconnect-modal[b-k6d4j94cdq] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-k6d4j94cdq 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-k6d4j94cdq 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-k6d4j94cdq 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-k6d4j94cdq]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-k6d4j94cdq 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-k6d4j94cdq {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-k6d4j94cdq {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-k6d4j94cdq {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-k6d4j94cdq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-k6d4j94cdq] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-k6d4j94cdq] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-k6d4j94cdq] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-k6d4j94cdq] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-k6d4j94cdq] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-k6d4j94cdq] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-k6d4j94cdq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-k6d4j94cdq] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-k6d4j94cdq {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
/* Site footer - help line on navy, link columns on the surface color, then the copyright
   line */

.rv-footer[b-pq6pz10vl5] {
  margin-top: var(--rv-space-16);
  background-color: var(--rv-surface);
  border-top: var(--rv-rule) solid var(--rv-divider);
}

.rv-footer__help[b-pq6pz10vl5] {
  padding: var(--rv-space-6) 0;
  background-color: var(--rv-accent);
  color: #ffffff;
  font-weight: 600;
}

.rv-footer__help p[b-pq6pz10vl5] {
  margin: 0;
}

.rv-footer__help a[b-pq6pz10vl5] {
  color: #ffffff;
}

.rv-footer__help a:focus-visible[b-pq6pz10vl5] {
  outline-color: #ffffff;
}

.rv-footer__columns[b-pq6pz10vl5] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--rv-space-8);
  padding-top: var(--rv-space-12);
  padding-bottom: var(--rv-space-12);
}

.rv-footer__name[b-pq6pz10vl5] {
  margin-bottom: var(--rv-space-1);
  font-size: 20px;
  font-weight: 800;
}

.rv-footer__heading[b-pq6pz10vl5] {
  margin-bottom: var(--rv-space-3);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rv-footer__list[b-pq6pz10vl5] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-footer__list li[b-pq6pz10vl5] {
  margin-bottom: var(--rv-space-2);
}

.rv-footer__legal[b-pq6pz10vl5] {
  padding: var(--rv-space-4) 0;
  border-top: var(--rv-rule) solid var(--rv-divider);
  font-size: 13px;
}

.rv-footer__legal p[b-pq6pz10vl5] {
  margin: 0;
}


/* ---- The compact footer row ---------------------------------------------------
   Smaller type and a tighter bar - "footer font should be smaller". */

.rv-foot__row[b-pq6pz10vl5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 22px;
    padding: 20px 0;
    font-size: 13px;
}

.rv-foot__row a[b-pq6pz10vl5] {
    color: var(--rv-text);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.rv-foot__row a:hover[b-pq6pz10vl5] {
    text-decoration: underline;
}

.rv-foot__social[b-pq6pz10vl5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--rv-accent);
    color: #ffffff !important;
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* Site header - the same markup and styles as the shop theme's header (Mockup A: promo
   strip, navy bar, nav row) */

/* The promo strip: a navy, rounded, page-width bar under the category row, the way
   Chewy draws its own (2026-10-19). */
.rv-promo[b-b62ukq0hf3] {
  padding: var(--rv-space-3) var(--rv-space-6) 0;
}

.rv-promo__inner[b-b62ukq0hf3] {
  box-sizing: border-box;
  max-width: calc(var(--rv-max-width) - 2 * var(--rv-space-6));
  margin: 0 auto;
  padding: var(--rv-space-2) var(--rv-space-6);
  background: var(--rv-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-radius: var(--rv-radius);
}

.rv-bar[b-b62ukq0hf3] {
  background: var(--rv-accent);
  color: #ffffff;
}

.rv-bar__inner[b-b62ukq0hf3],
/* The category row lays out as three pieces: the scrolling list of categories, the
   More menu, then the plate builder link pushed to the right. The More menu is a
   sibling of the list rather than an item inside it, because the list scrolls
   sideways - and a scrolling box clips both directions, which would trap the
   drop-down inside the 44px row. */
.rv-nav__inner[b-b62ukq0hf3] {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: var(--rv-max-width);
  margin: 0 auto;
  padding: 0 var(--rv-space-6);
}

/* Real padding above and below, not only a min-height: when the pieces wrap onto two
   lines partway down from desktop width, a centered min-height leaves nothing over
   the search box - "padding disappears above search box upon stretching". */
.rv-bar__inner[b-b62ukq0hf3] {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  padding-top: var(--rv-space-2);
  padding-bottom: var(--rv-space-2);
  flex-wrap: wrap;
}

/* Logo */
.rv-logo[b-b62ukq0hf3] {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
}

.rv-logo:hover[b-b62ukq0hf3],
.rv-logo:focus[b-b62ukq0hf3] {
  color: #ffffff;
}

.rv-logo__mark[b-b62ukq0hf3] {
  flex: none;
}

.rv-logo__text[b-b62ukq0hf3] {
  display: block;
  line-height: 1;
}

.rv-logo__name[b-b62ukq0hf3] {
  display: block;
  font-family: var(--rv-font);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.rv-logo__sub[b-b62ukq0hf3] {
  display: block;
  font-size: 10px;
  opacity: 0.75;
  margin-top: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Search */
.rv-search[b-b62ukq0hf3] {
  flex: 1 1 320px;
  max-width: 520px;
  display: flex;
  background: #ffffff;
  height: 44px;
  align-items: center;
  margin: 0;
}

.rv-search__field[b-b62ukq0hf3] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 14px;
  font-family: var(--rv-font);
  font-size: 15px;
  color: var(--rv-text);
  min-width: 0;
}

.rv-search__field:focus[b-b62ukq0hf3] {
  outline: none;
}

.rv-search:focus-within[b-b62ukq0hf3] {
  outline: var(--rv-rule) solid #ffffff;
  outline-offset: 2px;
}

.rv-search__button[b-b62ukq0hf3] {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rv-accent-700);
  border: 0;
  color: #ffffff;
  padding: 0;
}

.rv-search__button:hover[b-b62ukq0hf3] {
  background: var(--rv-accent-800);
}

/* Help, account, cart */
.rv-utils[b-b62ukq0hf3] {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  font-weight: 600;
  font-size: 14px;
}

.rv-utils__item[b-b62ukq0hf3] {
  color: #ffffff;
  text-decoration: none;
}

.rv-utils__item:hover[b-b62ukq0hf3],
.rv-utils__item:focus[b-b62ukq0hf3] {
  color: #ffffff;
  text-decoration: underline;
}

/* Category row */
.rv-nav[b-b62ukq0hf3] {
  background: var(--rv-accent);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.rv-nav__list[b-b62ukq0hf3] {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.rv-nav__list[b-b62ukq0hf3]::-webkit-scrollbar {
  display: none;
}

.rv-nav__list li[b-b62ukq0hf3] {
  flex: none;
  margin: 0;
  list-style: none;
}

.rv-nav__list a[b-b62ukq0hf3] {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.rv-nav__list a:hover[b-b62ukq0hf3],
.rv-nav__list a:focus[b-b62ukq0hf3] {
  color: #ffffff;
  text-decoration: underline;
}

/* The More menu, holding every category that did not fit on the row.
   It opens on hover and on keyboard focus, so it needs no JavaScript. */
.rv-nav__more[b-b62ukq0hf3] {
  position: relative;
  flex: none;
}

.rv-nav__more-link[b-b62ukq0hf3] {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.rv-nav__caret[b-b62ukq0hf3] {
  display: inline-block;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}

.rv-nav__drop[b-b62ukq0hf3] {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: none;
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: var(--rv-rule) solid var(--rv-accent);
}

.rv-nav__more:hover .rv-nav__drop[b-b62ukq0hf3],
.rv-nav__more:focus-within .rv-nav__drop[b-b62ukq0hf3] {
  display: block;
}

.rv-nav__drop li[b-b62ukq0hf3] {
  display: block;
  width: 100%;
  margin: 0;
}

.rv-nav__drop a[b-b62ukq0hf3] {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  color: var(--rv-text);
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  white-space: normal;
}

.rv-nav__drop a:hover[b-b62ukq0hf3],
.rv-nav__drop a:focus[b-b62ukq0hf3] {
  color: var(--rv-accent);
  background: var(--rv-surface);
  text-decoration: none;
}

.rv-nav__count[b-b62ukq0hf3] {
  color: var(--rv-text);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* The last link opens the plate builder, set apart at the right with an arrow */
.rv-nav__builder[b-b62ukq0hf3] {
  flex: none;
  margin-left: auto;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.rv-nav__builder:hover[b-b62ukq0hf3],
.rv-nav__builder:focus[b-b62ukq0hf3] {
  color: #ffffff;
  text-decoration: underline;
}

.rv-nav__builder[b-b62ukq0hf3]::after {
  content: " \2192";
}

/* On the navy bar the focus ring turns white, so keyboard users can still see it */
.rv-bar a:focus-visible[b-b62ukq0hf3],
.rv-nav a:focus-visible[b-b62ukq0hf3],
.rv-search__button:focus-visible[b-b62ukq0hf3] {
  outline-color: #ffffff;
}

/* Phones: logo on its own line, search full width, nav scrolls sideways */
@media (max-width: 767px) {
  .rv-bar__inner[b-b62ukq0hf3] {
    gap: var(--rv-space-3);
    padding-top: var(--rv-space-3);
    padding-bottom: var(--rv-space-3);
  }

  .rv-search[b-b62ukq0hf3] {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .rv-utils[b-b62ukq0hf3] {
    gap: var(--rv-space-4);
    font-size: 13px;
  }
}


/* ---- The Chewy-style utilities ---------------------------------------------- */

.rv-search[b-b62ukq0hf3] {
  max-width: 440px;
}

.rv-utils__item--icon[b-b62ukq0hf3] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rv-menu[b-b62ukq0hf3] {
  position: relative;
}

.rv-menu__drop[b-b62ukq0hf3] {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  display: none;
  min-width: 230px;
  padding: 14px;
  background: #ffffff;
  color: var(--rv-text);
  border: var(--rv-rule) solid var(--rv-divider);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.rv-menu:hover .rv-menu__drop[b-b62ukq0hf3],
.rv-menu:focus-within .rv-menu__drop[b-b62ukq0hf3] {
  display: grid;
  gap: 10px;
}

.rv-menu__cta[b-b62ukq0hf3] {
  display: block;
  padding: 10px 14px;
  background: var(--rv-accent);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.rv-menu__link[b-b62ukq0hf3] {
  display: block;
  color: var(--rv-text);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.rv-menu__link:hover[b-b62ukq0hf3],
.rv-menu__cta:hover[b-b62ukq0hf3] {
  text-decoration: underline;
}

/* ---- New Arrivals beside the builder ----------------------------------------- */

/* The same size as every other nav item - "new arrivals link font way too big". */
.rv-nav__arrivals[b-b62ukq0hf3] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.rv-nav__arrivals:hover[b-b62ukq0hf3] {
  text-decoration: underline;
}

/* ---- The desktop mega menu ----------------------------------------------------
   The panel hangs from the NAV BAR, not from its own list item: the category list
   scrolls sideways, and a box that scrolls on one axis clips the other - which is
   what swallowed the menu ("it doesnt work on either site"). An absolutely
   positioned element whose containing block sits outside the scroller is not
   clipped by it, so the row keeps scrolling and the panel opens under the bar. */

.rv-nav__inner[b-b62ukq0hf3] {
  position: relative;
}

.rv-nav__mega[b-b62ukq0hf3] {
  position: absolute;
  top: 100%;
  left: var(--rv-space-6);
  z-index: 30;
  display: none;
  min-width: 480px;
  padding: 18px 22px;
  background: #ffffff;
  color: var(--rv-text);
  border: var(--rv-rule) solid var(--rv-divider);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  columns: 2;
  column-gap: 28px;
}

.rv-nav__has-mega:hover .rv-nav__mega[b-b62ukq0hf3],
.rv-nav__has-mega:focus-within .rv-nav__mega[b-b62ukq0hf3] {
  display: block;
}

.rv-nav__mega a[b-b62ukq0hf3] {
  display: block;
  padding: 6px 0;
  color: var(--rv-text);
  font-weight: 600;
  text-decoration: none;
  break-inside: avoid;
}

.rv-nav__mega a:hover[b-b62ukq0hf3] {
  text-decoration: underline;
}

@media (max-width: 900px) {
  /* A hover menu has no place on a touch screen; the links themselves still work. */
  .rv-nav__mega[b-b62ukq0hf3],
  .rv-menu__drop[b-b62ukq0hf3] {
    display: none !important;
  }

  .rv-nav__arrivals[b-b62ukq0hf3] {
    display: none;
  }
}

/* ---- The slight corner radius (2026-10-19) ---------------------------------- */

.rv-menu__drop[b-b62ukq0hf3],
.rv-nav__mega[b-b62ukq0hf3],
.rv-nav__drop[b-b62ukq0hf3],
.rv-menu__cta[b-b62ukq0hf3] {
  border-radius: var(--rv-radius);
}
/* /Components/Pages/Configurator.razor.rz.scp.css */
/* The plate builder in the design Michelle redrew in Claude Design on
 * 2026-11-04: square corners, 2px rules, Archivo throughout, the red accent
 * the design carries, a header with the step strip, the plate and the parts
 * list down the left, the four numbered sections down the right.
 *
 * Three departures from that drawing, all hers:
 *   - the stage is plain dark gray, not grid paper;
 *   - Add to cart is always live, never swapped for a "finish the jacks" state;
 *   - a finish tile is the PHOTOGRAPH of the whole plate, squashed into the
 *     design's box, because a painted square cannot tell brass from bronze.
 *
 * Written for a phone first, and still no script: everything is a link, so
 * every rule here works from the markup the server sent. The design's own
 * tokens live on this page alone - the site around it keeps its navy. */

.pb[b-yc58gtyyxd] {
    --pb-bg: #f3f2f2;
    --pb-surface: #eae9e9;
    --pb-text: #201e1d;
    --pb-accent: #ec3013;
    --pb-accent-100: #fff2ef;
    --pb-accent-700: #ae1800;
    --pb-divider: rgba(32, 30, 29, 0.4);
    --pb-n100: #f8f4f4;
    --pb-n200: #eae7e7;
    --pb-n300: #d7d3d3;
    --pb-n400: #bab6b6;
    --pb-n700: #605d5d;
    /* The field the plate is drawn on - her call of 2026-11-04, in place of the
       design's grid paper. */
    --pb-stage: #444141;

    background: var(--pb-bg);
    color: var(--pb-text);
    font-family: var(--rv-font);
    font-size: 15px;
    line-height: 1.55;
    padding: var(--rv-space-8) 0 64px;
}

.pb__inner[b-yc58gtyyxd] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--rv-space-6);
    box-sizing: border-box;
}

/* The header: the title and Reset on the left, the step strip on the right. */
.pb__head[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--rv-space-4);
    padding-bottom: var(--rv-space-4);
    border-bottom: 2px solid var(--pb-text);
}

.pb__head-left[b-yc58gtyyxd] {
    display: flex;
    align-items: flex-end;
    gap: var(--rv-space-4);
    flex-wrap: wrap;
}

.pb__title[b-yc58gtyyxd] {
    margin: 0;
    font-weight: 800;
    font-size: clamp(32px, 6vw, 44px);
    line-height: 1;
    letter-spacing: -0.02em;
}

.pb__reset[b-yc58gtyyxd] {
    color: var(--pb-accent);
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    padding: var(--rv-space-2) var(--rv-space-1);
}

.pb__reset:hover[b-yc58gtyyxd] {
    background: rgba(236, 48, 19, 0.1);
}

.pb__progress[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rv-space-4);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pb__progress-link[b-yc58gtyyxd] {
    display: flex;
    gap: var(--rv-space-2);
    align-items: center;
    text-decoration: none;
    color: var(--pb-accent-700);
}

.pb__progress-link.is-done[b-yc58gtyyxd] {
    color: var(--pb-text);
}

.pb__mark[b-yc58gtyyxd] {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    font-size: 11px;
    box-sizing: border-box;
}

.pb__progress-link.is-done .pb__mark[b-yc58gtyyxd] {
    background: var(--pb-text);
    color: var(--pb-bg);
}

.pb__from[b-yc58gtyyxd] {
    margin: var(--rv-space-4) 0 0;
    font-size: 14px;
    color: var(--pb-n700);
}

/* One column on a phone, preview first; side by side when there is room. */
.pb__grid[b-yc58gtyyxd] {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--rv-space-8);
    align-items: start;
}

/* ---- The preview column ------------------------------------------------ */

.pb__preview[b-yc58gtyyxd] {
    padding: var(--rv-space-6) 0;
    box-sizing: border-box;
    min-width: 0;
}

.pb__labels[b-yc58gtyyxd] {
    display: flex;
    justify-content: space-between;
    gap: var(--rv-space-4);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pb-n700);
    padding-bottom: var(--rv-space-2);
}

.pb__labels-sel[b-yc58gtyyxd] {
    color: var(--pb-accent-700);
    white-space: nowrap;
}

.pb__stage-box[b-yc58gtyyxd] {
    height: 300px;
    border: 2px solid var(--pb-text);
    background: var(--pb-stage);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
}

/* Sized by HEIGHT through the picture's own shape (--plate-aspect is its width
   over height, written by the server): every plate draws at the same height, so
   a 6 gang grows wide instead of shrinking. */
.builder__stage[b-yc58gtyyxd] {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: min(100%, calc(var(--plate-aspect, 0.62) * 268px));
}

.builder__frame[b-yc58gtyyxd] {
    display: block;
    width: 100%;
    height: auto;
}

/* Every port on the plate is a link, so a port can be picked by tapping it. */
.builder__port-hit[b-yc58gtyyxd] {
    position: absolute;
    display: block;
    cursor: pointer;
    outline-offset: 2px;
}

.builder__port-hit.is-active[b-yc58gtyyxd] {
    outline: 2px solid var(--pb-accent);
    outline-offset: 1px;
}

.builder__jack[b-yc58gtyyxd] {
    display: block;
    width: 100%;
    height: 100%;
}

/* The port numbers drawn on the plate, like the design's numbered slots. */
.builder__port-hit[b-yc58gtyyxd]::after {
    content: attr(data-port);
    position: absolute;
    top: 0;
    left: 2px;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.4;
    color: var(--pb-accent-700);
    text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff;
    pointer-events: none;
}

.pb__hint[b-yc58gtyyxd] {
    margin: var(--rv-space-2) 0 0;
    font-size: 13px;
    color: var(--pb-n700);
}

/* The total and the Add button. */
.pb__total[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rv-space-4);
    padding: var(--rv-space-6) 0;
    border-bottom: 2px solid var(--pb-text);
}

.pb__total-left[b-yc58gtyyxd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pb__kicker[b-yc58gtyyxd] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pb-n700);
}

.pb__total-num[b-yc58gtyyxd] {
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pb__add[b-yc58gtyyxd] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 220px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    color: var(--pb-bg);
    background: var(--pb-accent);
    border: 1px solid var(--pb-accent);
    border-radius: 0;
    padding: var(--rv-space-3) calc(var(--rv-space-3) * 1.2);
}

.pb__add:hover[b-yc58gtyyxd] {
    background: var(--pb-accent-700);
    border-color: var(--pb-accent-700);
}

.pb__parts[b-yc58gtyyxd] {
    padding-top: var(--rv-space-4);
}

.pb__part[b-yc58gtyyxd] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: var(--rv-space-3);
    padding: var(--rv-space-2) 0;
    border-top: 1px solid var(--pb-divider);
    font-size: 14px;
}

.pb__part-qty[b-yc58gtyyxd] {
    color: var(--pb-n700);
}

.pb__part-line[b-yc58gtyyxd] {
    font-variant-numeric: tabular-nums;
}

/* ---- The four sections ------------------------------------------------- */

.pb__steps[b-yc58gtyyxd] {
    box-sizing: border-box;
    min-width: 0;
}

.pb__sect[b-yc58gtyyxd] {
    padding: var(--rv-space-6) 0;
    border-bottom: 2px solid var(--pb-text);
    display: flex;
    flex-direction: column;
    gap: var(--rv-space-4);
}

.pb__sect--last[b-yc58gtyyxd] {
    border-bottom: 0;
}

.pb__sect-head[b-yc58gtyyxd] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--rv-space-4);
    flex-wrap: wrap;
}

.pb__h2[b-yc58gtyyxd] {
    margin: 0;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
}

.pb__num[b-yc58gtyyxd] {
    color: var(--pb-accent);
    margin-right: var(--rv-space-2);
}

.pb__sect-note[b-yc58gtyyxd] {
    font-size: 14px;
    color: var(--pb-n700);
}

.pb__field[b-yc58gtyyxd] {
    display: flex;
    flex-direction: column;
    gap: var(--rv-space-2);
}

/* 01. The gang strip: six even columns inside one rule, the way the design
   draws it, so every width sits on one line. */
.pb__seg[b-yc58gtyyxd] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 2px solid var(--pb-text);
}

.pb__seg-opt[b-yc58gtyyxd] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    background: var(--pb-bg);
    color: var(--pb-text);
}

.pb__seg-opt + .pb__seg-opt[b-yc58gtyyxd] {
    border-left: 2px solid var(--pb-text);
}

.pb__seg-opt:hover[b-yc58gtyyxd] {
    background: var(--pb-n200);
}

.pb__seg-opt.is-on[b-yc58gtyyxd] {
    background: var(--pb-text);
    color: var(--pb-bg);
}

/* 01. The style and combination cards. */
.pb__cards[b-yc58gtyyxd] {
    display: grid;
    /* auto-FILL, not auto-fit: a width with one style to its name - the 6 gang
       decora - would otherwise stretch that single card across the row. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
    gap: var(--rv-space-2);
}

.pb__card[b-yc58gtyyxd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    padding: var(--rv-space-3);
    background: var(--pb-bg);
    border: 2px solid var(--pb-n400);
    color: var(--pb-text);
}

.pb__card:hover[b-yc58gtyyxd] {
    border-color: var(--pb-text);
}

.pb__card.is-on[b-yc58gtyyxd] {
    background: var(--pb-accent-100);
    border-color: var(--pb-accent);
}

.pb__card-name[b-yc58gtyyxd] {
    font-weight: 700;
    font-size: 15px;
}

.pb__card-desc[b-yc58gtyyxd] {
    font-size: 12px;
    color: var(--pb-n700);
}

/* 02. The stepper, and the row of counts under it. */
.pb__portrow[b-yc58gtyyxd] {
    display: flex;
    align-items: center;
    gap: var(--rv-space-4);
    flex-wrap: wrap;
}

.pb__stepper[b-yc58gtyyxd] {
    display: flex;
    border: 2px solid var(--pb-text);
}

.pb__step-btn[b-yc58gtyyxd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    background: var(--pb-bg);
    color: var(--pb-text);
}

.pb__step-btn:hover[b-yc58gtyyxd] {
    background: var(--pb-n200);
}

.pb__step-btn.is-off[b-yc58gtyyxd] {
    opacity: 0.35;
    pointer-events: none;
}

.pb__step-num[b-yc58gtyyxd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    font-weight: 800;
    font-size: 22px;
    border-left: 2px solid var(--pb-text);
    border-right: 2px solid var(--pb-text);
    font-variant-numeric: tabular-nums;
}

/* 03. The family chips. */
.pb__chips[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rv-space-2);
}

.pb__chip[b-yc58gtyyxd] {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--rv-space-3);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--pb-n400);
    background: transparent;
    color: var(--pb-text);
}

.pb__chip:hover[b-yc58gtyyxd] {
    border-color: var(--pb-text);
}

.pb__chip.is-on[b-yc58gtyyxd] {
    background: var(--pb-text);
    border-color: var(--pb-text);
    color: var(--pb-bg);
}

/* 03. The finish tiles: the design's box, with the plate's own photograph
   squashed to fill it - her call of 2026-11-04. object-fit: fill rather than
   cover, so the WHOLE plate is in the box however tall the picture is. */
.pb__swatches[b-yc58gtyyxd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--rv-space-3);
}

.pb__swatch[b-yc58gtyyxd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    color: var(--pb-text);
}

.pb__swatch-pic[b-yc58gtyyxd] {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* A flex item's automatic minimum is its content, and a plate photograph
       is taller than this box - without min-height the picture would push the
       box out and nothing would be squashed. */
    flex: none;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--pb-n200);
    border: 1px solid rgba(0, 0, 0, 0.18);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.pb__swatch.is-on .pb__swatch-pic[b-yc58gtyyxd] {
    outline-color: var(--pb-text);
}

.pb__swatch-pic img[b-yc58gtyyxd] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.pb__swatch-check[b-yc58gtyyxd] {
    position: absolute;
    left: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: 800;
    background: var(--pb-text);
    color: var(--pb-bg);
}

.pb__swatch-text[b-yc58gtyyxd] {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 1.3;
}

.pb__swatch-name[b-yc58gtyyxd] {
    font-weight: 500;
    overflow-wrap: break-word;
}

.pb__swatch.is-on .pb__swatch-name[b-yc58gtyyxd] {
    font-weight: 700;
}

.pb__swatch-add[b-yc58gtyyxd] {
    color: var(--pb-n700);
}

/* 04. The port chips. */
.pb__porttabs[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rv-space-2);
}

.pb__porttab[b-yc58gtyyxd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 76px;
    padding: var(--rv-space-2) var(--rv-space-3);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    border: 2px solid var(--pb-n400);
    background: var(--pb-bg);
    color: var(--pb-text);
}

.pb__porttab.is-filled[b-yc58gtyyxd] {
    border-color: var(--pb-text);
}

.pb__porttab.is-on[b-yc58gtyyxd] {
    border-color: var(--pb-accent);
    background: var(--pb-accent-100);
}

.pb__porttab-label[b-yc58gtyyxd] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pb-n700);
}

.pb__porttab.is-on .pb__porttab-label[b-yc58gtyyxd] {
    color: var(--pb-accent-700);
}

.pb__porttab-code[b-yc58gtyyxd] {
    font-size: 13px;
    font-weight: 700;
}

.pb__choose[b-yc58gtyyxd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--rv-space-2);
}

.pb__choose-title[b-yc58gtyyxd] {
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
}

.pb__choose-sub[b-yc58gtyyxd] {
    font-size: 14px;
    color: var(--pb-n700);
}

/* 04. The category tabs: a thick underline under the open one. */
.pb__tabs[b-yc58gtyyxd] {
    display: flex;
    border-bottom: 2px solid var(--pb-text);
    overflow-x: auto;
    overflow-y: hidden;
}

.pb__tab[b-yc58gtyyxd] {
    flex: 1 0 auto;
    padding: var(--rv-space-3);
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--pb-n700);
    box-shadow: inset 0 -4px 0 transparent;
}

.pb__tab:hover[b-yc58gtyyxd] {
    color: var(--pb-text);
}

.pb__tab.is-on[b-yc58gtyyxd] {
    color: var(--pb-text);
    box-shadow: inset 0 -4px 0 var(--pb-accent);
}

/* 04. The jack rows: two columns when there is room, a hairline between. */
.pb__jacks[b-yc58gtyyxd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    column-gap: var(--rv-space-6);
}

.pb__jack[b-yc58gtyyxd] {
    display: grid;
    grid-template-columns: 20px 40px minmax(0, 1fr);
    gap: var(--rv-space-3);
    align-items: center;
    padding: var(--rv-space-3);
    border-bottom: 1px solid var(--pb-divider);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    background: transparent;
    color: var(--pb-text);
}

.pb__jack:hover[b-yc58gtyyxd] {
    background: var(--pb-n200);
}

.pb__jack.is-on[b-yc58gtyyxd] {
    background: var(--pb-accent-100);
}

.pb__jack-dot[b-yc58gtyyxd] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid var(--pb-text);
    background: transparent;
}

.pb__jack.is-on .pb__jack-dot[b-yc58gtyyxd] {
    background: var(--pb-text);
    box-shadow: inset 0 0 0 3px var(--pb-accent-100);
}

.pb__jack-icon[b-yc58gtyyxd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 46px;
    box-sizing: border-box;
    background: var(--pb-n100);
    border: 2px solid var(--pb-text);
}

.pb__jack-text[b-yc58gtyyxd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pb__jack-name[b-yc58gtyyxd] {
    font-weight: 700;
    font-size: 15px;
}

.pb__jack-desc[b-yc58gtyyxd] {
    font-size: 13px;
    color: var(--pb-n700);
}

/* 04. The row of actions under the jacks. */
.pb__actions[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rv-space-3);
    align-items: center;
}

.pb__btn[b-yc58gtyyxd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    color: var(--pb-text);
    background: transparent;
    border: 1px solid var(--pb-divider);
    padding: var(--rv-space-2) calc(var(--rv-space-3) * 1.2);
}

.pb__btn:hover[b-yc58gtyyxd] {
    background: rgba(32, 30, 29, 0.07);
}

.pb__btn--ghost[b-yc58gtyyxd] {
    color: var(--pb-accent);
    border-color: transparent;
    padding-inline: var(--rv-space-1);
}

.pb__btn--ghost:hover[b-yc58gtyyxd] {
    background: rgba(236, 48, 19, 0.1);
}

.pb__btn.is-off[b-yc58gtyyxd] {
    opacity: 0.45;
    cursor: default;
}

.pb__btn.is-off:hover[b-yc58gtyyxd] {
    background: transparent;
}

/* Everything that can be picked shows a focus ring in the accent. */
.pb__seg-opt:focus-visible[b-yc58gtyyxd],
.pb__card:focus-visible[b-yc58gtyyxd],
.pb__step-btn:focus-visible[b-yc58gtyyxd],
.pb__chip:focus-visible[b-yc58gtyyxd],
.pb__swatch:focus-visible[b-yc58gtyyxd],
.pb__porttab:focus-visible[b-yc58gtyyxd],
.pb__tab:focus-visible[b-yc58gtyyxd],
.pb__jack:focus-visible[b-yc58gtyyxd],
.pb__btn:focus-visible[b-yc58gtyyxd],
.pb__add:focus-visible[b-yc58gtyyxd],
.pb__reset:focus-visible[b-yc58gtyyxd],
.builder__port-hit:focus-visible[b-yc58gtyyxd] {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

/* The drawn jack faces from the design: a keystone body, then one inner shape
   per kind. The plate itself keeps the real photographs. */
.builder__glyph[b-yc58gtyyxd] {
    width: 30px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.builder__glyph > span[b-yc58gtyyxd] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbfaf7;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

.builder__glyph > span[b-yc58gtyyxd]::after {
    content: "";
    display: block;
}

.builder__glyph--blank > span[b-yc58gtyyxd] {
    background: #efede9;
    opacity: 0.8;
}

.builder__glyph--rj > span[b-yc58gtyyxd]::after {
    width: 54%;
    height: 42%;
    background: #2b2b2b;
    border-top: 3px solid var(--jc, #3b6fb6);
    box-sizing: border-box;
}

.builder__glyph--rj11 > span[b-yc58gtyyxd]::after {
    width: 38%;
    height: 42%;
    background: #2b2b2b;
    border-top: 3px solid var(--jc, #d9d9d4);
    box-sizing: border-box;
}

.builder__glyph--rca > span[b-yc58gtyyxd]::after {
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #111 0 22%, #c8c8c8 24% 40%, var(--jc, #c62828) 42% 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.builder__glyph--coax > span[b-yc58gtyyxd]::after {
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #222 0 14%, #e6e6e6 16% 46%, #c9a94e 48% 100%);
}

.builder__glyph--bnc > span[b-yc58gtyyxd]::after {
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #c9a94e 0 12%, #eee 14% 40%, #a8a8a8 42% 100%);
}

.builder__glyph--hdmi > span[b-yc58gtyyxd]::after {
    width: 62%;
    height: 20%;
    background: #1b1b1b;
    clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
}

.builder__glyph--usb > span[b-yc58gtyyxd]::after {
    width: 46%;
    height: 24%;
    background: var(--jc, #222222);
    box-shadow: 0 0 0 2px #8a8a8a;
}

.builder__glyph--usbc > span[b-yc58gtyyxd]::after {
    width: 40%;
    height: 13%;
    background: #1b1b1b;
    border-radius: 99px;
    box-shadow: 0 0 0 2px #9a9a9a;
}

.builder__glyph--fiber > span[b-yc58gtyyxd]::after {
    width: 56%;
    height: 34%;
    background: #2fa84f;
}

.builder__glyph--speaker > span[b-yc58gtyyxd]::after {
    width: 72%;
    height: 40%;
    background:
        radial-gradient(circle at 26% 50%, #c62828 0 20%, transparent 22%),
        radial-gradient(circle at 74% 50%, #1b1b1b 0 20%, transparent 22%);
}

.builder__glyph--banana > span[b-yc58gtyyxd]::after {
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #1b1b1b 0 20%, #d4b45c 22% 62%, #7a7a7a 64% 100%);
}

.builder__glyph--toslink > span[b-yc58gtyyxd]::after {
    width: 36%;
    aspect-ratio: 1;
    background: #1b1b1b;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #777;
}

.builder__glyph--mini > span[b-yc58gtyyxd]::after {
    width: 26%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #111;
    box-shadow: 0 0 0 3px #a8a8a8;
}

.builder__glyph--generic > span[b-yc58gtyyxd]::after {
    width: 46%;
    height: 30%;
    background: #2b2b2b;
}

/* MEDIUM, past a phone: one column still, but the plate is drawn big. */
@media (min-width: 700px) {
    .pb__stage-box[b-yc58gtyyxd] {
        height: 400px;
        padding: 20px;
    }

    .builder__stage[b-yc58gtyyxd] {
        max-width: min(100%, calc(var(--plate-aspect, 0.62) * 360px));
    }

    .builder__port-hit[b-yc58gtyyxd]::after {
        font-size: 12px;
    }
}

/* LARGE: the plate and the parts list on the left, sticking while the choices
   scroll, the four sections on the right - the design's side-by-side layout. */
@media (min-width: 1100px) {
    .pb__grid[b-yc58gtyyxd] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    }

    .pb__preview[b-yc58gtyyxd] {
        position: sticky;
        top: 0;
    }

    .pb__stage-box[b-yc58gtyyxd] {
        height: 440px;
    }

    .builder__stage[b-yc58gtyyxd] {
        max-width: min(100%, calc(var(--plate-aspect, 0.62) * 396px));
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Homepage - hero, plate types, then the shop categories */

/* A white, bordered, page-width box like the slider above it - "make the any jack
   any gang section white background ... give the same border as the slider has"
   (2026-10-19). */
.hero[b-navvsk7120] {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--rv-space-6));
  max-width: calc(var(--rv-max-width) - 2 * var(--rv-space-6));
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid var(--rv-divider);
  border-radius: var(--rv-radius);
}

.hero__inner[b-navvsk7120] {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--rv-space-8);
  align-items: center;
  padding-top: var(--rv-space-16);
  padding-bottom: var(--rv-space-16);
}

.hero__eyebrow[b-navvsk7120] {
  margin-bottom: var(--rv-space-2);
  color: var(--rv-accent-500);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1[b-navvsk7120] {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero__lead[b-navvsk7120] {
  max-width: 34em;
  font-size: 18px;
}

.hero__actions[b-navvsk7120] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-space-3);
  margin-top: var(--rv-space-6);
}

/* A real built plate, composed from the builder's own photographs - "take that
   default image and use a real wall plate image" (2026-10-19). */
.hero__plate[b-navvsk7120] {
  display: block;
  justify-self: center;
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* Plate types - one card per type, as many across as fit */
.plate-types[b-navvsk7120] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--rv-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plate-card[b-navvsk7120] {
  display: flex;
  flex-direction: column;
  padding: var(--rv-space-6);
  background-color: #ffffff;
  border: var(--rv-rule) solid var(--rv-divider);
}

.plate-card__name[b-navvsk7120] {
  margin-bottom: var(--rv-space-2);
  font-size: 20px;
}

.plate-card__summary[b-navvsk7120] {
  flex: 1;
}

.plate-card__link[b-navvsk7120] {
  font-weight: 700;
}

/* Shop categories - tiles that link to the shop; the navy-gray border marks each tile as
   a link */
.shop-strip[b-navvsk7120] {
  background-color: var(--rv-surface);
  border-top: var(--rv-rule) solid var(--rv-divider);
  border-bottom: var(--rv-rule) solid var(--rv-divider);
}

.shop-strip__list[b-navvsk7120] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--rv-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-strip__list a[b-navvsk7120] {
  display: block;
  padding: var(--rv-space-4);
  background-color: #ffffff;
  border: var(--rv-rule) solid var(--rv-accent-500);
  color: var(--rv-text);
  font-weight: 700;
  text-decoration: none;
}

.shop-strip__list a:hover[b-navvsk7120],
.shop-strip__list a:focus[b-navvsk7120] {
  border-color: var(--rv-accent);
  color: var(--rv-accent);
}

/* Phones: the text goes full width and the plate drawing sits underneath, smaller */
@media (max-width: 767px) {
  .hero__inner[b-navvsk7120] {
    grid-template-columns: 1fr;
    padding-top: var(--rv-space-12);
    padding-bottom: var(--rv-space-12);
  }

  .hero__plate[b-navvsk7120] {
    max-width: 160px;
  }
}


/* ---- The synced hero slider -------------------------------------------------
   The shop's own carousel, drawn here from the feed. One slide fills the track and
   the track snaps as it is scrolled, so it works with a finger or a trackpad and
   needs no script; the dots are anchor links to their slides. */

/* A page-width rounded box with its own edge, not a full-bleed band: the page is
   white and the photo half of a slide is white, so without a border the slider
   melted into the page - "theres no border for the slider its just plain white on
   white" (2026-10-19). The margin is the gap under the promo bar. */
.shero[b-navvsk7120] {
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--rv-space-6));
    max-width: calc(var(--rv-max-width) - 2 * var(--rv-space-6));
    margin: var(--rv-space-4) auto 0;
    border: 1px solid var(--rv-divider);
}

.shero__track[b-navvsk7120] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.shero__track[b-navvsk7120]::-webkit-scrollbar {
    display: none;
}

.shero__slide[b-navvsk7120] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 315px;
    color: #ffffff;
    /* The shop's own slide navy (its --rv-accent-800), darker than the header bar -
       her swatch of 2026-10-19 - so the two sliders read as one. */
    background-color: var(--rv-accent-800);
    scroll-snap-align: start;
}

/* A white panel with breathing room around the photograph, matching the shop -
   "the product image ... is too high, it needs some padding on top and bottom". */
.shero__media[b-navvsk7120] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px 28px;
    background-color: #ffffff;
}

/* The bottom 5% of the photograph is cut off: the supplier's pictures carry a
   colored band along that edge. */
.shero__media img[b-navvsk7120] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    clip-path: inset(0 0 4.7% 0);
}

.shero__text[b-navvsk7120] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 44px 48px;
}

.shero__title[b-navvsk7120] {
    margin: 0;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #ffffff;
}

.shero__blurb[b-navvsk7120] {
    margin: 0;
    max-width: 420px;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}

.shero__btn[b-navvsk7120] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    background-color: #ffffff;
    color: var(--rv-accent);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.shero__dots[b-navvsk7120] {
    position: absolute;
    right: 24px;
    bottom: 18px;
    display: flex;
    gap: 6px;
}

.shero__dot[b-navvsk7120] {
    width: 44px;
    height: 10px;
    border-bottom: 4px solid rgba(255, 255, 255, .4);
    cursor: pointer;
}

.shero__dot:hover[b-navvsk7120],
.shero__dot:focus-visible[b-navvsk7120] {
    border-bottom-color: #ffffff;
}

.visually-hidden[b-navvsk7120] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .shero__slide[b-navvsk7120] {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .shero__media[b-navvsk7120] {
        aspect-ratio: 16 / 9;
    }

    .shero__text[b-navvsk7120] {
        padding: 22px 20px 38px;
    }

    .shero__title[b-navvsk7120] {
        font-size: 26px;
    }
}


/* ---- The strip for trade customers ------------------------------------------
   A page-width rounded gray panel, the slider's own width, instead of a band that
   ran edge to edge behind it - "make that shaded area the same because it is
   overlapping" (2026-10-19). */

.trade[b-navvsk7120] {
    background: none;
}

.trade__inner[b-navvsk7120] {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: center;
    width: calc(100% - 2 * var(--rv-space-6));
    max-width: calc(var(--rv-max-width) - 2 * var(--rv-space-6));
    margin: 0 auto;
    padding: 24px;
    background-color: var(--rv-surface);
    border-radius: var(--rv-radius);
}

.trade__tile[b-navvsk7120] {
    margin: 0;
    padding: 16px 20px;
    background-color: #ffffff;
}

.trade__tile a[b-navvsk7120] {
    color: var(--rv-accent);
    font-weight: 600;
    text-decoration: none;
}

.trade__tile a:hover[b-navvsk7120] {
    text-decoration: underline;
}

/* ---- The small circle rows --------------------------------------------------- */

.crow[b-navvsk7120] {
    position: relative;
}

.crow__heading[b-navvsk7120] {
    color: inherit;
    text-decoration: none;
}

.crow__heading:hover[b-navvsk7120] {
    text-decoration: underline;
}

.crow__track[b-navvsk7120] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 112px;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.crow__track[b-navvsk7120]::-webkit-scrollbar {
    display: none;
}

.crow__item[b-navvsk7120] {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
}

.crow__art[b-navvsk7120] {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--rv-surface);
    border: var(--rv-rule) solid var(--rv-divider);
}

.crow__art img[b-navvsk7120] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #ffffff;
}

.crow__item:hover .crow__art[b-navvsk7120] {
    border-color: var(--rv-accent);
}

.crow__name[b-navvsk7120] {
    max-width: 112px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

/* Always on show - "fix the arrows they disappear keep them visible always". */
.crow__arrow[b-navvsk7120] {
    position: absolute;
    top: 34px;
    right: -6px;
    width: 34px;
    height: 34px;
    padding: 0 0 4px;
    border: var(--rv-rule) solid var(--rv-divider);
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--rv-accent);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.crow__arrow--left[b-navvsk7120] {
    right: auto;
    left: -6px;
}

.crow__arrow:hover[b-navvsk7120] {
    border-color: var(--rv-accent);
}

/* ---- The featured-category circles: five columns, a touch smaller than the old
   full-width tiles, arrows both ways ----------------------------------------------- */

.crow--featured .crow__track[b-navvsk7120] {
    grid-auto-columns: calc((100% - 4 * 20px) / 5);
}

.crow--featured .crow__art[b-navvsk7120] {
    width: min(170px, 100%);
    height: auto;
    aspect-ratio: 1;
    background-color: #ffffff;
}

.crow--featured .crow__name[b-navvsk7120] {
    max-width: none;
    font-size: 15px;
}

.crow--featured .crow__arrow[b-navvsk7120] {
    top: calc(50% - 28px);
}

/* ---- Featured Categories: every subcategory, two rows, one scroller --------------- */

.crow--two .crow__track[b-navvsk7120] {
    grid-template-rows: repeat(2, auto);
    row-gap: 16px;
    grid-auto-columns: calc((100% - 6 * 20px) / 7);
}

.crow--two .crow__art[b-navvsk7120] {
    width: min(120px, 100%);
    height: auto;
    aspect-ratio: 1;
}

.crow--two .crow__name[b-navvsk7120] {
    max-width: none;
}

.crow--two .crow__arrow[b-navvsk7120] {
    top: calc(50% - 17px);
}

/* ---- Build wall plates by type: bordered cards, no text, Build now underlined ----- */

.bcards[b-navvsk7120] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.bcard[b-navvsk7120] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px 14px;
    background-color: #ffffff;
    border: 1px solid var(--rv-divider);
    text-decoration: none;
}

.bcard:hover[b-navvsk7120],
.bcard:focus[b-navvsk7120] {
    border-color: var(--rv-accent);
}

.bcard__art[b-navvsk7120] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
}

.bcard__art img[b-navvsk7120] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bcard__link[b-navvsk7120] {
    color: var(--rv-accent);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- The navy bulk-quote band ------------------------------------------------- */

.band[b-navvsk7120] {
    background-color: var(--rv-accent);
    color: #ffffff;
}

.band__inner[b-navvsk7120] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.band__title[b-navvsk7120] {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.1;
    color: #ffffff;
}

.band__text[b-navvsk7120] {
    margin: 0;
    color: rgba(255, 255, 255, .85);
}

.band__button[b-navvsk7120] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    background-color: #ffffff;
    color: var(--rv-accent);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 900px) {
    .trade__inner[b-navvsk7120] {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .band__inner[b-navvsk7120] {
        flex-direction: column;
        align-items: flex-start;
    }

    .crow__track[b-navvsk7120] {
        grid-auto-columns: 92px;
        gap: 14px;
    }

    .crow__art[b-navvsk7120] {
        width: 76px;
        height: 76px;
    }

    .crow__name[b-navvsk7120] {
        max-width: 92px;
        font-size: 12px;
    }

    .crow--featured .crow__track[b-navvsk7120] {
        grid-auto-columns: calc((100% - 2 * 14px) / 3);
    }

    .crow--featured .crow__art[b-navvsk7120],
    .crow--two .crow__art[b-navvsk7120] {
        width: min(96px, 100%);
        height: auto;
    }

    .crow--two .crow__track[b-navvsk7120] {
        grid-auto-columns: calc((100% - 3 * 14px) / 4);
    }

    .bcards[b-navvsk7120] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcard__art[b-navvsk7120] {
        height: 84px;
    }
}

/* ---- The slight corner radius (2026-10-19) ----------------------------------
   The white tiles stay square - rounded they read as inputs, her note on the
   trade strip. */

.shero[b-navvsk7120],
.band__inner[b-navvsk7120],
.band__button[b-navvsk7120],
.shero__btn[b-navvsk7120] {
    border-radius: var(--rv-radius);
}

.shero[b-navvsk7120] {
    overflow: hidden;
}

/* The band's navy box is the rounded thing, so it is drawn on the inner panel
   rather than the full-bleed section. */
.band[b-navvsk7120] {
    background: none;
}

.band__inner[b-navvsk7120] {
    background-color: var(--rv-accent);
    padding-left: 48px;
    padding-right: 48px;
}