/* /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 Plate Builder v2 design (Michelle's Claude Design
 * export, 2026-11-03): a blueprint drawing. The stage sits on grid paper inside
 * a hairline panel with corner registration marks, the sections are numbered 01
 * to 04 in a condensed face, and everything selectable is a square-cornered
 * outline that fills steel blue when chosen.
 *
 * Her one carve-out from the design: the color tiles stay PHOTOGRAPHS of the
 * plate, never painted squares - a photo can tell brass from bronze.
 *
 * Still 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 Archivo and navy. */

.rv-section[b-yc58gtyyxd] {
    --pb-text: #1d1f20;
    --pb-accent: #5980a6;
    --pb-accent-100: #eef6ff;
    --pb-accent-700: #416180;
    --pb-accent-800: #2c455d;
    --pb-divider: rgba(29, 31, 32, 0.16);
    --pb-muted: #5d5d60;
    --pb-heading: "Barlow Condensed", system-ui, sans-serif;
    --pb-body: "Barlow", system-ui, sans-serif;
    font-family: var(--pb-body);
    color: var(--pb-text);
}

/* The heading row: the title left, the one-line hint right. */
.builder__head[b-yc58gtyyxd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.builder__head h1[b-yc58gtyyxd] {
    margin: 0;
    font-family: var(--pb-heading);
    font-weight: 600;
    font-size: clamp(32px, 5vw, 40px);
    letter-spacing: -0.01em;
}

.builder__hint[b-yc58gtyyxd] {
    margin: 0;
    font-size: 14px;
    color: var(--pb-muted);
}

.builder__from[b-yc58gtyyxd] {
    color: var(--pb-muted);
    margin: 0 0 var(--rv-space-3);
    font-size: 14px;
}

/* One column on a phone, preview first; side by side when there is room. */
.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);
}

/* The blueprint panel: hairline border, grid paper, corner marks. */
.builder__panel[b-yc58gtyyxd] {
    position: relative;
    border: 1px solid var(--pb-divider);
    padding: 16px;
    background-image:
        linear-gradient(var(--pb-divider) 1px, transparent 1px),
        linear-gradient(90deg, var(--pb-divider) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
}

.builder__panel > .corner[b-yc58gtyyxd],
.builder__add > .corner[b-yc58gtyyxd] {
    position: absolute;
    width: 11px;
    height: 11px;
    color: rgba(29, 31, 32, 0.55);
    pointer-events: none;
}

.builder__panel > .corner[b-yc58gtyyxd]::before,
.builder__panel > .corner[b-yc58gtyyxd]::after,
.builder__add > .corner[b-yc58gtyyxd]::before,
.builder__add > .corner[b-yc58gtyyxd]::after {
    content: "";
    position: absolute;
    background: currentColor;
}

.builder__panel > .corner[b-yc58gtyyxd]::before,
.builder__add > .corner[b-yc58gtyyxd]::before { left: 5px; top: 0; width: 1px; height: 100%; }

.builder__panel > .corner[b-yc58gtyyxd]::after,
.builder__add > .corner[b-yc58gtyyxd]::after { top: 5px; left: 0; width: 100%; height: 1px; }

.builder__panel > .corner.tl[b-yc58gtyyxd], .builder__add > .corner.tl[b-yc58gtyyxd] { top: -6px; left: -6px; }
.builder__panel > .corner.tr[b-yc58gtyyxd], .builder__add > .corner.tr[b-yc58gtyyxd] { top: -6px; right: -6px; }
.builder__panel > .corner.bl[b-yc58gtyyxd], .builder__add > .corner.bl[b-yc58gtyyxd] { bottom: -6px; left: -6px; }
.builder__panel > .corner.br[b-yc58gtyyxd], .builder__add > .corner.br[b-yc58gtyyxd] { bottom: -6px; right: -6px; }

/* The drawing labels across the top of the panel. */
.builder__panel-top[b-yc58gtyyxd] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--pb-heading);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pb-accent-700);
    margin-bottom: 12px;
}

.builder__stage[b-yc58gtyyxd] {
    position: relative;
    margin: 0 auto;
    /* 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. On a phone the
       height budget keeps the sticky preview inside half the screen. */
    max-width: min(100%, calc(var(--plate-aspect, 0.62) * 20vh));
}

.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: 2px solid var(--pb-accent);
    outline-offset: 1px;
}

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

/* The description, the price and the Add button, inside the panel. */
.builder__panel-bottom[b-yc58gtyyxd] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.builder__summary[b-yc58gtyyxd] {
    margin: 0;
    font-size: 13px;
    color: var(--pb-muted);
    max-width: 46ch;
    flex: 1 1 200px;
}

.builder__buy[b-yc58gtyyxd] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.builder__price[b-yc58gtyyxd] {
    font-family: var(--pb-heading);
    font-weight: 600;
    font-size: 28px;
}

.builder__add[b-yc58gtyyxd] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--pb-heading);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 18px;
    background: var(--pb-accent);
    color: #f2f2f3;
    border: 1px solid var(--pb-accent);
    border-radius: 0;
}

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

.builder__add > .corner[b-yc58gtyyxd] {
    color: rgba(29, 31, 32, 0.55);
}

/* The parts list under the panel: one row per part, summing to the price. */
.builder__bom[b-yc58gtyyxd] {
    margin-top: var(--rv-space-3);
}

.builder__bom-title[b-yc58gtyyxd] {
    font-family: var(--pb-heading);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pb-accent-700);
    margin-bottom: 4px;
}

.builder__bom-row[b-yc58gtyyxd] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--pb-divider);
    font-size: 14px;
}

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

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

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

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

/* The numbered section headings: 01 Plate, 02 Ports, 03 Color, 04 Jack.
   Full width, because a legend shrinks to its words and the floated side
   note would otherwise crowd the heading instead of sitting at the edge. */
.builder__legend[b-yc58gtyyxd] {
    display: block;
    width: 100%;
    font-family: var(--pb-heading);
    font-weight: 600;
    font-size: 22px;
    padding: 0;
    margin-bottom: var(--rv-space-2);
}

.builder__num[b-yc58gtyyxd] {
    color: var(--pb-accent-700);
    font-size: 14px;
    margin-right: 6px;
}

/* The quiet note on the heading's right: the port range, the finish count. */
.builder__side[b-yc58gtyyxd] {
    float: right;
    font-family: var(--pb-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--pb-muted);
}

/* What is chosen, said beside the heading. */
.builder__has[b-yc58gtyyxd] {
    font-family: var(--pb-body);
    font-weight: 400;
    font-size: 15px;
    color: var(--pb-muted);
}

/* 01. The plate: the gang squares, then the chosen gang's styles as text
   buttons, the way the design draws them (her call, 2026-11-03). */
.builder__styles[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 var(--rv-space-2);
    margin-top: var(--rv-space-2);
    padding: 0;
}

.builder__style[b-yc58gtyyxd] {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--pb-divider);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    text-decoration: none;
    font-family: var(--pb-heading);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
}

.builder__style:hover[b-yc58gtyyxd],
.builder__color:hover[b-yc58gtyyxd],
.builder__gang-pick:hover[b-yc58gtyyxd],
.builder__port-count:hover[b-yc58gtyyxd],
.builder__jack-choice:hover[b-yc58gtyyxd] {
    border-color: var(--pb-accent);
}

.builder__style.is-chosen[b-yc58gtyyxd],
.builder__gang-pick.is-chosen[b-yc58gtyyxd],
.builder__port-count.is-chosen[b-yc58gtyyxd],
.builder__jack-choice.is-chosen[b-yc58gtyyxd] {
    border-color: var(--pb-accent);
    background: var(--pb-accent-100);
    color: var(--pb-accent-800);
    box-shadow: inset 0 0 0 1px var(--pb-accent);
}

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

/* Everything on this page that can be picked shows the hand. */
.builder__style[b-yc58gtyyxd],
.builder__color[b-yc58gtyyxd],
.builder__gang-pick[b-yc58gtyyxd],
.builder__port-count[b-yc58gtyyxd],
.builder__jack-choice[b-yc58gtyyxd],
.builder__port-hit[b-yc58gtyyxd],
.builder__add[b-yc58gtyyxd] {
    cursor: pointer;
}

/* The gang squares: six even columns, the way the design draws them, so all
   six always sit on one line - her call, 2026-11-03. */
.builder__ports[b-yc58gtyyxd] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.builder__gang-pick[b-yc58gtyyxd] {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 0 4px;
    border: 1px solid var(--pb-divider);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    text-decoration: none;
    font-family: var(--pb-heading);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

/* 02. The ports: the stepper (plain links) with the count squares beside it. */
.builder__portrow[b-yc58gtyyxd] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.builder__ports--counts[b-yc58gtyyxd] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.builder__port-count[b-yc58gtyyxd] {
    display: grid;
    place-items: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 6px;
    border: 1px solid var(--pb-divider);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    text-decoration: none;
    font-family: var(--pb-heading);
    font-weight: 600;
    font-size: 14px;
}

.builder__stepper[b-yc58gtyyxd] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pb-divider);
    border-radius: 2px;
}

.builder__step[b-yc58gtyyxd] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 20px;
    color: var(--pb-text);
    text-decoration: none;
    cursor: pointer;
}

.builder__port-num[b-yc58gtyyxd] {
    display: grid;
    place-items: center;
    width: 56px;
    border-left: 1px solid var(--pb-divider);
    border-right: 1px solid var(--pb-divider);
    font-family: var(--pb-heading);
    font-weight: 600;
    font-size: 22px;
}

/* 03's filter box, wired by the page script. */
.builder__color-filter[b-yc58gtyyxd] {
    max-width: 240px;
    min-height: 36px;
    padding: 6px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--pb-text);
    background: #ffffff;
    border: 1px solid var(--pb-divider);
    border-radius: 2px;
    margin-bottom: var(--rv-space-2);
}

/* 04's quick links: Select all, Select blanks, Prev and Next port. */
.builder__quick[b-yc58gtyyxd] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.builder__quick-link[b-yc58gtyyxd] {
    font-size: 13px;
    color: var(--pb-accent-700);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 2px;
}

.builder__quick-link:hover[b-yc58gtyyxd] {
    background: var(--pb-accent-100);
}

/* The jack groups are accordions: open by default, closable to compact. */
.builder__jackgroup[b-yc58gtyyxd] {
    margin-top: var(--rv-space-2);
}

.builder__jackgroup-name[b-yc58gtyyxd] {
    font-family: var(--pb-heading);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pb-muted);
    cursor: pointer;
    margin-bottom: 6px;
}

/* 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-family: var(--pb-heading);
    font-weight: 600;
    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;
}

/* 03. The color: the plate PHOTOGRAPHS stay, with the design's selection ring. */
.builder__colors[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Small even squares like the design's swatch grid, each one a CORNER of the
   real plate photograph rather than a painted color - her call, 2026-11-03:
   "cut off the real image ... to only show the right corner". */
.builder__color[b-yc58gtyyxd] {
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pb-divider);
    border-radius: 2px;
    background: transparent;
    line-height: 0;
}

.builder__color.is-chosen[b-yc58gtyyxd] {
    border-color: var(--pb-accent);
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

.builder__swatch[b-yc58gtyyxd] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
}

/* 04. The jacks: one wrapping strip of photo tiles. */
.builder__jacks[b-yc58gtyyxd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: var(--rv-space-3) 0 0;
    padding: 0;
}

.builder__jack-choice[b-yc58gtyyxd] {
    display: grid;
    grid-template-rows: 44px 2.4em auto;
    align-items: center;
    justify-items: center;
    gap: 5px;
    width: 92px;
    padding: 10px 6px 8px;
    border: 1px solid var(--pb-divider);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    text-decoration: none;
}

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

/* The price and the tally of how many ports already carry this jack. */
.builder__choice-meta[b-yc58gtyyxd] {
    font-size: 11.5px;
    color: var(--pb-muted);
    font-variant-numeric: tabular-nums;
    min-height: 1em;
}

/* 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: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e4e2de;
    border-radius: 2px;
}

.builder__glyph > span[b-yc58gtyyxd] {
    position: relative;
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    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);
    border-radius: 1px;
    box-sizing: border-box;
}

.builder__glyph--rj11 > span[b-yc58gtyyxd]::after {
    width: 38%;
    height: 42%;
    background: #2b2b2b;
    border-top: 3px solid var(--jc, #d9d9d4);
    border-radius: 1px;
    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;
    border-radius: 1px;
}

.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;
}

/* 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(--pb-muted);
    font-size: 13px;
}

/* MEDIUM, past a phone: still one column, but the blueprint panel runs the full
   width with the plate drawn big, the parts list under it, then the sections -
   the design's stacked layout. The preview stops sticking: at full width it
   would cover the choices. */
@media (min-width: 760px) {
    .builder__panel[b-yc58gtyyxd] {
        padding: 28px;
    }

    .builder__panel-top[b-yc58gtyyxd] {
        margin-bottom: 16px;
    }

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

    .builder__preview[b-yc58gtyyxd] {
        position: static;
        max-height: none;
        padding-bottom: 0;
    }

    .builder__panel-bottom[b-yc58gtyyxd] {
        margin-top: 24px;
    }

    .builder__price[b-yc58gtyyxd] {
        font-size: 32px;
    }

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

/* LARGE: the panel and parts list on the left, sticking while the choices
   scroll, the sections on the right - the design's side-by-side layout. */
@media (min-width: 1100px) {
    .builder[b-yc58gtyyxd] {
        grid-template-columns: minmax(420px, 1.3fr) 1fr;
        align-items: start;
        gap: 40px;
    }

    .builder__preview[b-yc58gtyyxd] {
        position: sticky;
        top: 20px;
    }

    .builder__stage[b-yc58gtyyxd] {
        max-width: min(100%, calc(var(--plate-aspect, 0.62) * 440px));
    }
}
/* /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;
}