/* /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, written for a phone first.
 *
 * Michelle asked for it "very compact ... designed with mobile-first in mind", in three
 * blocks down the page: the plate at the top, then the color, then one strip of jacks
 * across the screen that wraps - the same shape as the strip along the top of the
 * desktop program.
 *
 * Everything is a link. There is no script on this page at all, so every rule here has
 * to work from the markup the server sent. */

.builder__from[b-yc58gtyyxd] {
    color: var(--rv-muted, inherit);
    margin: 0 0 var(--rv-space-3);
}

/* One column on a phone, preview first. It goes side by side only when there is
   really room for it. */
.builder[b-yc58gtyyxd] {
    display: grid;
    gap: var(--rv-space-4);
}

.builder__preview[b-yc58gtyyxd] {
    position: sticky;
    top: var(--rv-space-2);
    z-index: 1;
    background: var(--rv-bg);
    padding-bottom: var(--rv-space-2);
    /* Half the screen at most: the choices under it are what the page is for. */
    max-height: 50vh;
}

.builder__stage[b-yc58gtyyxd] {
    position: relative;
    margin: 0 auto;
    /* The plate is 491 by 803, so its width is its height times 0.611. Capping the
       width in screen heights is what keeps the whole preview - picture, line and
       price - inside half the screen on a phone, which is what she asked for. */
    max-width: min(240px, 21vh);
}

.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;
    outline-offset: 2px;
}

.builder__port-hit.is-active[b-yc58gtyyxd] {
    outline: 3px solid var(--rv-accent);
}

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

.builder__summary[b-yc58gtyyxd] {
    margin: var(--rv-space-2) 0 0;
    text-align: center;
    font-size: .9rem;
    color: var(--rv-muted, inherit);
}

.builder__price[b-yc58gtyyxd] {
    margin: 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
}

.builder__choices[b-yc58gtyyxd] {
    display: grid;
    gap: var(--rv-space-4);
}

.builder__group[b-yc58gtyyxd] {
    border: 0;
    padding: 0;
    margin: 0;
}

.builder__legend[b-yc58gtyyxd] {
    font-weight: 700;
    padding: 0;
    margin-bottom: var(--rv-space-2);
}

/* What is chosen, said beside the heading, so the blocks can be read while scrolling
   past without opening anything. */
.builder__has[b-yc58gtyyxd] {
    font-weight: 400;
    color: var(--rv-muted, inherit);
}

/* 1. The plate: a square per gang like the port squares, then only the chosen
   gang's plates as pictures. */
/* Clear space under the gang squares, so a tile cannot read as part of the square
   above it - "add padding see the style is connected to the gang numbers". The
   margin-top sits AFTER the shorthand: written before it, the shorthand quietly put
   it back to zero. */
.builder__styles[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rv-space-2);
    list-style: none;
    margin: 0 0 var(--rv-space-2);
    margin-top: var(--rv-space-4);
    padding: 0;
}

.builder__style[b-yc58gtyyxd] {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    /* Wide enough that the longest style name holds to two lines, so every tile
       is the same height as the 1 gang decora's. */
    width: 104px;
    padding: 6px;
    border: var(--rv-rule) solid var(--rv-divider);
    background: #ffffff;
    color: inherit;
    text-decoration: none;
}

.builder__style-art[b-yc58gtyyxd] {
    /* Every tile's picture box is the same size - "make the squares all the same
       height make it the size of the 1 gang decoras". 72px is the height the 1 gang
       decora draws at; a wider plate fits inside the same box rather than making
       its tile shorter. */
    width: 100%;
    height: 72px;
    object-fit: contain;
}

.builder__style-name[b-yc58gtyyxd] {
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    /* Exactly two lines, reserved AND capped, so no name can make its tile taller
       or shorter than the rest. The one name that needs a third line ends in an
       ellipsis, and the full name is on the tile's own tooltip. */
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.builder__style.is-chosen[b-yc58gtyyxd] {
    border-color: var(--rv-accent);
    background: var(--rv-accent-100);
}

.builder__style:focus-visible[b-yc58gtyyxd],
.builder__color:focus-visible[b-yc58gtyyxd],
.builder__port-count:focus-visible[b-yc58gtyyxd],
.builder__port-tab:focus-visible[b-yc58gtyyxd],
.builder__gang-pick:focus-visible[b-yc58gtyyxd],
.builder__jack-choice:focus-visible[b-yc58gtyyxd],
.builder__port-hit:focus-visible[b-yc58gtyyxd] {
    outline: 2px solid var(--rv-accent);
    outline-offset: 2px;
}

/* Everything on this page that can be picked shows the hand, said outright
   rather than left to each element's own default. */
.builder__style[b-yc58gtyyxd],
.builder__color[b-yc58gtyyxd],
.builder__port-count[b-yc58gtyyxd],
.builder__port-tab[b-yc58gtyyxd],
.builder__gang-pick[b-yc58gtyyxd],
.builder__jack-choice[b-yc58gtyyxd],
.builder__port-hit[b-yc58gtyyxd],
.builder__add[b-yc58gtyyxd] {
    cursor: pointer;
}

/* How many ports. */
.builder__ports[b-yc58gtyyxd],
.builder__port-pick[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rv-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.builder__port-count[b-yc58gtyyxd],
.builder__port-tab[b-yc58gtyyxd],
.builder__gang-pick[b-yc58gtyyxd] {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: var(--rv-rule) solid var(--rv-divider);
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: .85rem;
}

.builder__port-count:hover[b-yc58gtyyxd],
.builder__port-tab:hover[b-yc58gtyyxd],
.builder__gang-pick:hover[b-yc58gtyyxd] {
    border-color: var(--rv-accent);
}

.builder__port-count.is-chosen[b-yc58gtyyxd],
.builder__port-tab.is-chosen[b-yc58gtyyxd],
.builder__gang-pick.is-chosen[b-yc58gtyyxd] {
    border-color: var(--rv-accent);
    background: var(--rv-accent-100);
}

.builder__port-tab[b-yc58gtyyxd] {
    line-height: 1.15;
    padding: 6px 12px;
}

.builder__port-tab-has[b-yc58gtyyxd] {
    display: block;
    font-weight: 400;
    font-size: .75rem;
    color: var(--rv-muted, inherit);
}

/* 2. The color: swatches only, so 54 of them fit without filling the screen. The name
   is on the heading and in the title, which is what a long list needs. */
.builder__colors[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.builder__color[b-yc58gtyyxd] {
    display: grid;
    place-items: center;
    /* The plate photograph is narrower than it is tall, so the box itself holds
       the 44px a finger needs. */
    min-width: 44px;
    padding: 3px;
    border: var(--rv-rule) solid var(--rv-divider);
    background: #ffffff;
    line-height: 0;
}

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

.builder__color.is-chosen[b-yc58gtyyxd] {
    border-color: var(--rv-accent);
    box-shadow: inset 0 0 0 2px var(--rv-accent);
}

.builder__swatch[b-yc58gtyyxd] {
    display: block;
    /* A photograph of the plate itself, not a painted square - she asked for
       "images for those instead". 56 tall plus the padding and the border clears
       the 44px a finger needs; the width follows the plate's own shape. */
    width: auto;
    height: 56px;
}

/* 3. The jacks: one strip across the screen that wraps, like the strip along the top
   of the desktop program. It fills whichever port is picked. The strip sits clear of
   the port buttons above it - "add space under the port numbers for the jacks". */
.builder__jacks[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rv-space-2);
    list-style: none;
    margin: var(--rv-space-3) 0 0;
    padding: 0;
}

/* Every tile is the same height: a fixed row for the picture and a fixed two-line
   row for the name, so a one-line name no longer makes a shorter box - "make the
   jack boxes taller so that it can fit those two lines of text" (2026-10-19). */
.builder__jack-choice[b-yc58gtyyxd] {
    display: grid;
    grid-template-rows: 40px 2.4em;
    align-items: center;
    justify-items: center;
    gap: 4px;
    width: 76px;
    padding: 8px 4px;
    border: var(--rv-rule) solid var(--rv-divider);
    background: #ffffff;
    color: inherit;
    text-decoration: none;
}

.builder__jack-choice:hover[b-yc58gtyyxd] {
    border-color: var(--rv-accent);
}

.builder__jack-choice.is-chosen[b-yc58gtyyxd] {
    border-color: var(--rv-accent);
    background: var(--rv-accent-100);
}

.builder__choice-art[b-yc58gtyyxd] {
    display: block;
    width: 36px;
    height: auto;
    max-height: 40px;
}

.builder__choice-name[b-yc58gtyyxd] {
    font-size: .7rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* The one line that says how the port and jack choices fit together. */
.builder__how[b-yc58gtyyxd] {
    margin: var(--rv-space-2) 0 0;
    color: var(--rv-muted, inherit);
    font-size: .9rem;
}

.builder__add[b-yc58gtyyxd] {
    margin-top: var(--rv-space-2);
    width: 100%;
}

/* Past a phone there is room for the plate beside the choices, and the plate can be
   bigger. Nothing above this point assumes a wide screen. */
@media (min-width: 760px) {
    .builder[b-yc58gtyyxd] {
        grid-template-columns: minmax(260px, 360px) 1fr;
        align-items: start;
        gap: var(--rv-space-5);
    }

    .builder__stage[b-yc58gtyyxd] {
        max-width: none;
    }

    .builder__preview[b-yc58gtyyxd] {
        max-height: none;
    }

    .builder__add[b-yc58gtyyxd] {
        width: auto;
    }
}
/* /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;
}