/*
 * Beronio Lumber theme. Hand-authored; the Tailwind/Flowbite look of the SvelteKit reference
 * recreated as site CSS (preflight.css is the reset). Generated content never writes here.
 * Holds tokens, base rules, the shared shell (issue 0003) and the CMS block components built so far.
 */

:root {
    --primary-50: #B7BDC5;
    --primary-100: #9EA7B2;
    --primary-200: #6D7A8C;
    --primary-300: #556479;
    --primary-400: #3D4E65;
    --primary-500: #243852;
    --primary-600: #0C223F;
    --primary-700: #0A1C35;
    --primary-800: #071527;
    --primary-900: #040E1A;
}

/* Base rules from the reference's app.pcss */
html,
body {
    font-size: 16px;
}

ul,
ol {
    list-style: inside;
}

p {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Page container: Tailwind `w-full px-4 lg:container lg:mx-auto` with the reference's container config (2xl = 1200px) */
.site-container {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1024px) {
    .site-container {
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1200px) {
    .site-container {
        max-width: 1200px;
    }
}

/* ------------------------------------------------------------------------------------------------
   Shared shell (issue 0003): header, navigation, mobile menu, search modal, contact strip, footer.
   Recreates the Tailwind utility classes of the reference's (frontend)/+layout.svelte, Contact.svelte and
   Footer.svelte. Breakpoints are Tailwind's: sm 640, md 768, lg 1024, xl 1280. Note the reference's `rounded-md`
   resolves to no radius (its config uses an undefined --radius), so the menu panels here are square.
   ------------------------------------------------------------------------------------------------ */

[hidden] {
    display: none !important;
}

/* Header row */
.site-header {
    border-bottom: 1px solid #f3f4f6;
}

.site-header__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.site-header__logo {
    width: 11rem;
}

.site-header__spacer {
    flex-grow: 1;
}

.site-header__contacts {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-header__contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.site-header__icon {
    width: 2.5rem;
    height: 2.5rem;
}

.site-header__contact-text {
    display: none;
}

.site-header__delivery {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.site-header__delivery-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-header__delivery-second {
    margin-top: -0.25rem;
}

.site-header__search-mobile {
    display: block;
    width: 50px;
    height: 50px;
}

.site-header__search-icon {
    width: 100%;
    height: 100%;
}

.site-header__reviews {
    display: none;
    align-items: center;
}

.site-header__menu-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Desktop navigation (md and up) */
.site-nav {
    width: 100%;
    background-color: #fff;
    padding-bottom: 1rem;
}

.site-nav__desktop {
    display: none;
}

.site-nav__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
    padding-bottom: 0.25rem;
    list-style: none;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: block;
    padding: 0;
    color: #374151;
    font-size: 0.75rem;
    line-height: 1rem;
}

.site-nav__link:hover {
    color: #0A1C35;
}

.site-nav__link.active {
    color: #0C223F;
}

.site-nav__toggle {
    display: flex;
    align-items: center;
}

.site-nav__chevron {
    display: inline;
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.5rem;
    color: #071527;
}

.site-nav__dropdown {
    position: absolute;
    z-index: 10;
    width: 12rem;
    margin-top: 0.5rem;
    list-style: none;
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.site-nav__dropdown-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #1f2937;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus {
    background-color: #f3f4f6;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Keyboard focus stays visible where the reference removes the outline */
.site-nav__dropdown-link:focus-visible {
    outline: 2px solid #0C223F;
    outline-offset: -2px;
}

.site-nav__search {
    padding: 0.5rem;
}

.site-nav__search-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.site-nav__quote {
    padding: 0.5rem 0.25rem;
    border-radius: 0.25rem;
    background-color: #0A1C35;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav__quote:hover {
    background-color: #243852;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Mobile menu (below md) */
.site-mobile-menu {
    display: block;
    width: 100%;
}

.site-mobile-menu__list {
    padding: 0.5rem 0.5rem 0.75rem;
    list-style: none;
}

.site-mobile-menu__list li + li {
    margin-top: 0.25rem;
}

.site-mobile-menu__link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
}

.site-mobile-menu__link:hover {
    color: #4b5563;
}

.site-mobile-menu__toggle {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
}

.site-mobile-menu__sub {
    margin-left: 1rem;
    list-style: none;
}

.site-mobile-menu__sub li + li {
    margin-top: 0;
}

.site-mobile-menu__quote {
    display: block;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background-color: #0A1C35;
    color: #fff;
    text-align: center;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-mobile-menu__quote:hover {
    background-color: #243852;
}

@media (min-width: 640px) {
    .site-header__contact-text {
        display: block;
    }

    .site-mobile-menu__list {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .site-nav__list > li + li {
        margin-left: 0.25rem;
    }
}

@media (min-width: 768px) {
    .site-header__delivery {
        display: flex;
    }

    .site-header__search-mobile,
    .site-header__menu-toggle,
    .site-mobile-menu {
        display: none !important;
    }

    .site-nav {
        padding-bottom: 0;
    }

    .site-nav__desktop {
        display: flex;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .site-header__logo {
        width: 15rem;
    }

    .site-header__icon,
    .site-nav__search-icon {
        width: 3rem;
        height: 3rem;
    }

    .site-header__reviews {
        display: flex;
    }

    .site-nav__list {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .site-nav__list > li + li {
        margin-left: 0.5rem;
    }

    .site-nav__link {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .site-nav__list {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .site-nav__link {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .site-nav__quote {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Search modal shell: SearchModal.svelte (results styling belongs to the search issue) */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: rgb(0 0 0 / 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: search-modal-fade 150ms linear;
}

@keyframes search-modal-fade {
    from {
        opacity: 0;
    }
}

.search-modal__panel {
    position: relative;
    width: 100%;
    max-width: 48rem;
    height: 80vh;
    margin-top: 4rem;
    padding: 1rem;
    overflow-y: auto;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.search-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #6b7280;
}

.search-modal__close:hover {
    color: #374151;
}

.search-modal__close-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.search-modal__head {
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem 0;
}

.search-modal__field {
    position: relative;
}

.search-modal__input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #fff;
    font-size: 1rem;
    line-height: 1.5rem;
    -webkit-appearance: none;
    appearance: none;
}

.search-modal__input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
}

.search-modal__field-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    color: #9ca3af;
}

/* Search results (issue 0019): SearchModal.svelte's result lists. Group headings are the section title at its `micro`
   size (inline font-size: 1rem !important) with the entity key capitalized; rows are full-width buttons with an
   item thumbnail (h-16 w-16 object-contain on white, or the grey image-icon placeholder), a text-sm font-medium
   title, and the text-xs "Click to view details" hint on item rows. */
.section-title--micro .section-title__heading {
    font-size: 1rem !important;
}

.search-results__capitalize .section-title__heading {
    text-transform: capitalize;
}

.search-results {
    padding-left: 1rem;
    padding-right: 1rem;
}

.search-results__group {
    margin-bottom: 1.5rem;
}

.search-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-results__list li + li {
    margin-top: 0.5rem;
}

.search-results__result {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    background-color: transparent;
    text-align: left;
    cursor: pointer;
    transition-property: color, background-color, border-color;
    transition-duration: 150ms;
}

.search-results__result:hover {
    background-color: #f9fafb;
}

.search-results__thumb {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.25rem;
    background-color: #fff;
}

.search-results__thumb--empty {
    background-color: #f3f4f6;
}

.search-results__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-results__thumb-icon {
    width: 2rem;
    height: 2rem;
    color: #9ca3af;
}

.search-results__text {
    flex: 1 1 0%;
}

.search-results__title {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #111827;
}

.search-results__hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6b7280;
}

.search-results__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #6b7280;
}

.search-results__error {
    padding: 0.75rem 1rem;
    text-align: center;
    color: #dc2626;
}

.search-results__loading {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.search-results__spinner {
    width: 2rem;
    height: 2rem;
    border: 4px solid #e5e7eb;
    border-top-color: var(--primary-600);
    border-radius: 9999px;
    animation: search-results-spin 1s linear infinite;
}

@keyframes search-results-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-results__spinner {
        animation: none;
    }
}

/* Hairline above the contact strip and footer: <hr class="mt-12"> */
.site-rule {
    height: 0;
    margin-top: 3rem;
    border-top-width: 1px;
}

/* Contact strip: Contact.svelte */
.contact-strip {
    margin-bottom: 2rem;
    padding: 2rem 1rem;
}

.contact-strip__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.contact-strip__cols {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

.contact-strip__details > * + * {
    margin-top: 1.5rem;
}

.contact-strip__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

a.contact-strip__link:hover {
    color: #2563eb;
}

.contact-strip__icon {
    width: 2.5rem;
    height: 2.5rem;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

a.contact-strip__link:hover .contact-strip__icon {
    transform: scale(1.05);
}

.contact-strip__text {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.contact-strip__text--medium {
    font-weight: 500;
}

.contact-strip__cta {
    display: inline-block;
    width: 100%;
    padding: 0.75rem 0;
    border-radius: 0.5rem;
    background-color: #0C223F;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-align: center;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-strip__cta:hover {
    background-color: #f3f4f6;
    color: #0A1C35;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* The reference does not render this link on /contact-us (the engine adds .active for that page) */
.contact-strip__cta.active {
    display: none;
}

.contact-strip__hours {
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.contact-strip__hours-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.contact-strip__hours-rows > * + * {
    margin-top: 0.5rem;
}

.contact-strip__hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.contact-strip__hours-row:last-child {
    border-bottom-width: 0;
}

.contact-strip__day {
    color: #374151;
    font-weight: 500;
}

.contact-strip__time {
    color: #4b5563;
}

.contact-strip__map {
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-strip__map:hover {
    transform: scale(1.02);
}

.contact-strip__map-img {
    width: 100%;
}

@media (min-width: 768px) {
    .contact-strip__grid,
    .contact-strip__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Footer: Footer.svelte */
.site-footer {
    width: 100%;
    padding: 4rem 0;
    background-color: #071527;
    color: #fff;
    font-weight: 300;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 4rem;
    width: 100%;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-footer__logo {
    width: 12rem;
}

.site-footer__certs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
    padding-top: 3.5rem;
}

.site-footer__cert {
    width: 33.333333%;
}

.site-footer__heading {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.site-footer__rule {
    padding-bottom: 0.5rem;
}

.site-footer__social {
    margin-top: 1rem;
}

.site-footer__social-link {
    display: inline-block;
    margin-right: 0.5rem;
}

.site-footer__social-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.site-footer__list {
    list-style: none;
}

.site-footer__list li {
    list-style: none;
}

.site-footer__list li + li {
    margin-top: 0.25rem;
}

.site-copyright {
    width: 100%;
    padding: 1rem 0;
    background-color: #071527;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 300;
}

@media (min-width: 640px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Section title: SectionTitle.svelte */
.section-title {
    width: 100%;
    padding-bottom: 1rem;
}

.section-title__heading {
    font-size: 1.875rem;
    line-height: 2.5rem;
    font-weight: 700;
    color: #0C223F;
}

.section-title__rule {
    width: 20rem;
    border-top-width: 1px;
    border-color: #0C223F;
}

/* Page title band: PageTitle.svelte */
.page-title {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-title__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--primary-700);
    opacity: 0.8;
}

.page-title__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    padding: 4rem 1rem;
    text-align: center;
    color: #fff;
}

.page-title__heading {
    margin-bottom: 0.5rem;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
}

.page-title__subtitle {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

/* Text + image block: TextImage1_2.svelte. Image first on mobile, layout modifier picks the side from sm up */
.text-image {
    width: 100%;
    background-color: #fff;
}

.text-image__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.text-image__media {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.text-image__body {
    order: 2;
}

.text-image__text {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #000;
}

.text-image__img {
    height: 100%;
    max-height: 400px;
    border-radius: 0.75rem;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (min-width: 640px) {
    .text-image__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .text-image--text-left .text-image__body {
        order: 1;
    }

    .text-image--text-left .text-image__media {
        order: 2;
        justify-content: flex-end;
    }
}

/* CMS rich-text utilities: the Tailwind classes that appear in stored page bodies and rich text (privacy policy,
   careers, start here), defined here because the CMS HTML cannot be scanned by a build step. The set is checked by
   check_built (every class of every stored rich text must be defined here or known to be unstyled in the reference). */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 2rem;
    padding-left: 2rem;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

.-mt-1 { margin-top: -0.25rem; }
.mb-3 { margin-bottom: 0.75rem; }
.pl-8 { padding-left: 2rem; }
.order-2 { order: 2; }
.list-decimal { list-style-type: decimal; }
.whitespace-normal { white-space: normal; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words { overflow-wrap: break-word; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; margin-bottom: 0; }

@media (min-width: 640px) {
    .sm\:order-1 { order: 1; }
    .sm\:order-2 { order: 2; }
    .sm\:py-0 { padding-top: 0; padding-bottom: 0; }
}

/* Page body: [slug]/+page.svelte `<section class="w-full py-8"><article class="container mx-auto border-b border-gray-50 py-8">` */
.page-body {
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.page-body__article {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 2rem;
    border-bottom: 1px solid #f9fafb;
}

@media (min-width: 1200px) {
    .page-body__article {
        max-width: 1200px;
    }
}

/* [slug]/[slug2]/+page.svelte wraps a nested page's body in `container mx-auto` without the article's py-8 */
.page-body__article--nested {
    padding-top: 0;
    padding-bottom: 0;
}

/* A body the CMS never filled in (stored as the text `undefined`, which the reference prints): same box, no text */
.page-body__article--blank {
    min-height: calc(5.5rem + 1px); /* 2rem padding twice, one 24px line, the 1px border */
}

/* Text block: Text.svelte (same frame as the accordion; the text is 18px/24px black) */
.cms-text {
    width: 100%;
    background-color: #fff;
}

.cms-text__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.cms-text__text {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #000;
}

/* Accordion: AccordionItems.svelte with the shadcn/bits-ui accordion (single-open, collapsible) */
.accordion {
    width: 100%;
    background-color: #fff;
}

.accordion__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.accordion__item {
    border-bottom-width: 1px;
}

.accordion__header {
    display: flex;
}

.accordion__trigger {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.accordion__trigger:hover {
    text-decoration-line: underline;
}

.accordion__chevron {
    flex: none;
    width: 1rem;
    height: 1rem;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion__item[data-state="open"] .accordion__chevron {
    transform: rotate(180deg);
}

.accordion__content {
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.accordion__answer {
    padding-top: 0;
    padding-bottom: 1rem;
}

/* Entity grids: EntityGrid.svelte, Card.svelte, CatalogGrid.svelte */
.entity-grid {
    width: 100%;
    background-color: #f9fafb;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.entity-grid__categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.entity-grid__link {
    color: inherit;
    text-decoration: inherit;
}

.entity-card {
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.entity-card:hover {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.entity-card__img {
    width: 100%;
    height: 6rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.entity-card__body {
    padding: 1rem;
}

.entity-card__title {
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--primary-700);
}

.entity-grid__catalogs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.entity-grid__catalog {
    cursor: pointer;
    color: inherit;
    text-decoration: inherit;
}

.entity-grid__catalog:hover {
    opacity: 0.7;
}

.entity-grid__catalog-img {
    aspect-ratio: 3 / 4;
    width: 100%;
    object-fit: cover;
}

.entity-grid__catalog-title {
    margin-top: 0.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--primary-700);
}

@media (min-width: 768px) {
    .entity-grid__categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .entity-card__title {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

/* ------------------------------------------------------------------------------------------------
   Home page blocks (issue 0004): Hero.svelte, FeaturesSection.svelte, WhyChooseUs.svelte + FeatureBox.svelte.
   The Tailwind utilities of those components; breakpoints sm 640 and md 768. The product grid is the shared
   entity-grid above.
   ------------------------------------------------------------------------------------------------ */

/* Hero: `relative min-h-[30rem] w-full bg-primary-800`, video `absolute h-full w-full object-cover` */
.hero {
    position: relative;
    min-height: 30rem;
    width: 100%;
    background-color: var(--primary-800);
}

.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.hero__content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 2.5rem;
}

.hero__stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    width: 100%;
    text-align: left;
}

.hero__title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    color: #fff;
}

.hero__subtitle {
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: #d1d5db;
}

.hero__spacer {
    flex-grow: 1;
}

.hero__cta {
    display: inline-block;
    background-color: var(--primary-50);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    color: var(--primary-600);
}

.hero__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Features band: `relative flex h-auto w-full items-center justify-center py-12` over a background image, 70% black scrim */
.features {
    position: relative;
    display: flex;
    height: auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-repeat: no-repeat;
    background-size: cover;
}

.features__scrim {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.7);
}

.features__inner {
    position: relative;
    z-index: 10;
}

.features__item {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    color: #fff;
}

.features__icon-cell {
    display: flex;
    width: 33.333333%;
    align-items: flex-start;
    justify-content: center;
}

.features__icon {
    height: 3rem;
    width: 3rem;
}

.features__copy {
    width: 66.666667%;
    color: #fff;
}

.features__title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.features__text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #fff;
}

@media (min-width: 640px) {
    .features__row {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
}

@media (min-width: 768px) {
    .features__item {
        width: 33.333333%;
    }
}

/* Why Choose Us: container `py-12`, section title without bottom padding, feature boxes side by side from sm up */
.why-choose-us {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.section-title--flush {
    padding-bottom: 0;
}

.why-choose-us__row {
    display: block;
    height: auto;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.feature-box {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.feature-box__img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border-radius: 0.5rem;
    object-fit: cover;
}

.feature-box__overlay {
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    background-color: rgb(10 28 53 / 0.8);
}

.feature-box__body {
    position: relative;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.feature-box__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #fff;
}

.feature-box__rule {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom-width: 1px;
    border-color: #fff;
}

.feature-box__text {
    color: #fff;
}

@media (min-width: 640px) {
    .why-choose-us__row {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 1rem;
    }

    .feature-box {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Contact Us blocks (issue 0006): Banner.svelte, Map.svelte and OurPeople.svelte */
.section-title--small .section-title__heading {
    font-size: 1.25rem;
}

.cms-banner {
    width: 100%;
    background-color: var(--primary-600);
}

.cms-banner__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.cms-banner__text {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 400;
    color: #fff;
}

@media (min-width: 1024px) {
    .cms-banner__text {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

.cms-map {
    width: 100%;
    background-color: #fff;
}

.cms-map__frame {
    display: block;
    width: 100%;
    min-height: 24rem;
}

/* `<section class="py-12"><div class="container mx-auto px-4">`: the reference container without its own padding */
.people {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.people__container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1200px) {
    .people__container {
        max-width: 1200px;
    }
}

.people__group {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.people__list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .people__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.people__card {
    display: flex;
    border-radius: 0.75rem;
    border: 1px solid #f9fafb;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.people__photo {
    display: block;
    width: 6rem;
    height: 100%;
    object-fit: contain;
    border-start-start-radius: 0.75rem;
    border-end-start-radius: 0.75rem;
}

.people__body {
    margin-left: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.people__name,
.people__job {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.people__name {
    font-weight: 500;
    color: #111827;
}

.people__job {
    color: #6b7280;
}

.people__contact {
    margin-top: 1rem;
}

.people__line {
    display: flex;
    align-items: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--primary-700);
}

.people__icon {
    display: block;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* Events (issue 0008): EventList.svelte and events/[slug]/+page.svelte */
.event-list__intro {
    padding-top: 1rem;
}

.event-list__section {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.event-list__inner {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.event-list__heading {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 500;
}

/* The reference card is a div with a click handler; here the title is a real link stretched over the whole card, so the
   card navigates on click, opens in a new tab on middle click and is reachable and operable from the keyboard. */
.event-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    cursor: pointer;
}

.event-card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (min-width: 640px) {
    .event-card {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.event-card > * + * {
    border-left: 1px solid #e5e7eb;
}

.event-card__date {
    margin-bottom: 0.25rem;
}

.event-card__weekday {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 100;
}

.event-card__day {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    text-transform: uppercase;
}

.event-card__body {
    grid-column: span 5 / span 5;
    padding-left: 1rem;
    padding-right: 1rem;
}

.event-card__time {
    font-weight: 100;
}

.event-card__title {
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
}

.event-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
}

.event-card__link:focus-visible {
    outline: none;
}

.event-card__link:focus-visible::after {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.event-card__location,
.event-card__excerpt {
    margin-bottom: 0.5rem;
}

.event-card__excerpt {
    font-size: 1rem;
    line-height: 1.5rem;
}

/* Detail: `<Container class="p-4">`, breadcrumb (the bullets are the reference's global `ol { list-style: inside }`), rule,
   the slug as the heading (capitalised by CSS, as the reference does) and the description */
.event-detail {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.event-detail__crumbs {
    margin-bottom: 0.5rem;
    width: 100%;
    border-radius: 0.375rem;
}

.event-detail__crumbs ol {
    display: flex;
}

.event-detail__sep {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    color: #a3a3a3;
}

.event-detail__current {
    color: #a3a3a3;
}

.event-detail__crumbs a:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.event-detail__rule {
    margin-bottom: 1rem;
}

.event-detail__heading {
    margin-bottom: 1.5rem;
    font-size: 3rem;
    line-height: 1;
    font-weight: 500;
    text-transform: capitalize;
}

/* Board-feet calculator (issue 0009): Calculator.svelte. The reference draws it as a bare card straight under the header
   (no section, no title band, no page padding), so on a phone the card is the full viewport width. Its Tailwind classes
   `rounded-md` resolve to no radius (undefined --radius); the number inputs take the Tailwind forms plugin's base look. */
.calculator {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.calculator__title {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

.calculator__field {
    margin-bottom: 1rem;
}

.calculator__label {
    display: block;
    margin-bottom: 0.5rem;
}

.calculator__input {
    width: 100%;
    appearance: none;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.calculator__input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 2px #3b82f6, 0 0 #0000;
}

.calculator__button {
    border-radius: 0;
    background-color: var(--primary-700);
    padding: 0.5rem 1rem;
    color: #fff;
}

.calculator__button:hover {
    background-color: var(--primary-400);
}

.calculator__button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 0 #fff, 0 0 0 2px var(--primary-500), 0 0 #0000;
}

.calculator__result {
    margin-top: 1rem;
}

.calculator__value {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

/* ------------------------------------------------------------------------------------------------
   Product categories and the Products index (issue 0010): product-categories/[slug]/+page.svelte, EntityList.svelte,
   CatalogGrid.svelte, LogoGrid.svelte and LogoCarousel.svelte. The Tailwind classes of the reference, transcribed.
   The frame is category/open + category/close; a group display (issues 0011-0017) is one more block between the
   introduction and the catalogs, inside .category__main.
   ------------------------------------------------------------------------------------------------ */

/* Breadcrumb band: `flex w-full items-center justify-start gap-2 bg-primary-700 text-white` around Container `py-1 text-sm` */
.breadcrumbs {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    background-color: var(--primary-700);
    color: #fff;
}

.breadcrumbs__inner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.breadcrumbs__lead {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    font-weight: 300;
}

.breadcrumbs__sep {
    font-weight: 300;
}

/* Frame: Container `py-8` > `flex gap-4` > aside (`hidden bg-gray-50 md:block md:w-1/4 lg:w-1/5`) and the main column
   (`overflow-auto md:w-3/4 lg:w-4/5`; `w-100` is not a Tailwind class, so the width stays auto below md) */
.category {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.category__row {
    display: flex;
    gap: 1rem;
}

.category__aside {
    display: none;
    background-color: #f9fafb;
}

.category__main {
    overflow: auto;
}

@media (min-width: 768px) {
    .category__aside {
        display: block;
        width: 25%;
    }

    .category__main {
        width: 75%;
    }
}

@media (min-width: 1024px) {
    .category__aside {
        width: 20%;
    }

    .category__main {
        width: 80%;
    }
}

/* Sidebar headings: `mb-0 pb-0 font-bold leading-10 text-[#0C223F]` over `-mt-1 mb-2 border-t border-[#0C223F] pt-0` */
.category-heading__title {
    margin-bottom: 0;
    padding-bottom: 0;
    font-weight: 700;
    line-height: 2.5rem;
    color: #0C223F;
}

.category-heading__rule {
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
    padding-top: 0;
    border-top: 1px solid #0C223F;
}

.category-search {
    position: relative;
    width: 100%;
    padding-right: 2rem;
    padding-left: 2rem;
}

.category-search__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.category-search__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.category-search__button:hover {
    background-color: #f9fafb;
}

.category-search__label {
    color: #6b7280;
}

.category-search__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
}

.category-nav {
    width: 100%;
    background-color: #f9fafb;
}

.category-nav__link {
    display: block;
    color: var(--primary-700);
}

/* The current category (the engine adds .active to the link whose data-page is the page) is bold, as in EntityList.svelte */
.category-nav__link.active {
    font-weight: 700;
}

/* Main column: SectionTitle, featured image `w-full rounded-xl py-4` (`max-h-96 w-full rounded-xl object-cover`), body `mb-4 h-auto w-full rounded-xl py-4` */
.category__image {
    width: 100%;
    border-radius: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.category__img {
    max-height: 24rem;
    width: 100%;
    border-radius: 0.75rem;
    object-fit: cover;
}

.category__body {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.section-title--small .section-title__heading {
    font-size: 1.25rem;
}

/* Generic accordion groups (issue 0011, dimensional and engineered lumber): `<Accordion.Root class="prose w-full" multiple>` in
   product-categories/[slug]/+page.svelte; every group is an item whose trigger holds `<h3 class="text-xl font-bold text-primary-600">`.
   The trigger, chevron and panel are the accordion rules above. (`prose` has no effect: the reference has no typography plugin.) */
.category-groups__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--primary-600);
}

/* The stored HTML tables and the engineered-lumber table use `styled-table`: app.pcss, then the category page's own
   `:global(.styled-table ...)` rules on top (the later value wins where both set a property) */
.styled-table {
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    overflow: visible;
    position: relative;
}

.styled-table thead tr {
    background-color: #0c223f;
    color: #ffffff;
    text-align: left;
    position: sticky;
    top: 0;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
    text-align: center !important;
    border-right: solid 1px #d5d5d5;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #0c223f;
}

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #0a1c35;
}

/* Plywood groups (issue 0012): PlywoodCategory.svelte and TablePlywood.svelte. `<div class="mx-auto w-full p-4">` holds the search
   box (`relative mb-6`, the forms-plugin text input `rounded-lg border py-2 pl-10 pr-4`, its ring on focus, a search icon at
   `left-3 top-2.5`) and an accordion `w-full space-y-4` whose items are `overflow-hidden rounded-lg border` with a trigger
   `w-full bg-gray-50 px-4 py-3 hover:bg-gray-100` holding the group title (`text-xl font-bold text-gray-800`). The panel is
   `p-4` around the dot table; `.styled-table` is the shared rule set above (the plywood table adds `min-width: 400px` and
   `font-size: .9em`, which it already has). public/js/plywood.js hides filtered rows, columns and groups with `hidden` and
   marks the visible rows `.is-even` / `.is-last` (the reference removes the others from the DOM, so `nth-of-type` and
   `last-of-type` only ever see visible rows). */
.plywood {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.plywood__search {
    position: relative;
    margin-bottom: 1.5rem;
}

.plywood__input {
    width: 100%;
    appearance: none;
    background-color: #fff;
    color: #000;
    border: 1px solid #6b7280;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.plywood__input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.plywood__input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 2px var(--primary-500), 0 0 #0000;
}

.plywood__search-icon {
    position: absolute;
    top: 0.625rem;
    left: 0.75rem;
    color: #9ca3af;
}

.plywood__root > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.plywood__item {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.plywood__trigger {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #f3f4f6;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.plywood__trigger:hover {
    background-color: #e5e7eb;
}

.plywood__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.plywood__panel {
    padding: 1rem;
}

.plywood .table-container {
    overflow-x: auto;
    border-radius: 0.5rem;
}

.plywood__table th[data-thickness] {
    white-space: nowrap;
}

.plywood__table tbody tr:nth-of-type(even) {
    background-color: transparent;
}

.plywood__table tbody tr:last-of-type {
    border-bottom: 1px solid #dddddd;
}

.plywood__table tbody tr:hover {
    background-color: #f9fafb;
}

.plywood__table tbody tr.is-even {
    background-color: #f3f3f3;
}

.plywood__table tbody tr.is-last {
    border-bottom: 2px solid #0c223f;
}

.plywood__dot {
    font-size: 0.8em;
    color: var(--primary-600);
}

.plywood__none {
    color: #e5e7eb;
}

/* Siding and paneling groups (issue 0013): SidingCategory.svelte. `<div class="mx-auto max-w-7xl p-4">` holds the filter
   (desktop cards `hidden gap-2 md:grid md:grid-cols-5 mb-6`: `rounded-lg border p-3 text-center transition-colors
   duration-200`, active `border-primary-600 bg-primary-600 text-white`, inactive `border-gray-200 bg-white text-gray-700
   hover:bg-gray-50`; a `select` `mb-4 md:hidden` with the forms-plugin look), the search box (the plywood input rules) and
   an accordion `w-full space-y-4` whose items are `overflow-hidden rounded-lg border` with a trigger `w-full bg-gray-50
   px-4 py-3 hover:bg-gray-100` holding the group title (`text-xl font-bold text-gray-800`). The panel is `p-4` around a
   card grid `grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5`; a card is `relative cursor-pointer
   overflow-hidden rounded-lg border shadow-sm hover:shadow-md` with a `h-24 bg-gray-100` figure (the reference's
   `aspect-w-2 aspect-h-3` classes resolve to nothing: the reference has no aspect-ratio plugin, the `h-24` sets the
   height) and a `p-2 text-sm` body with the `sku | size` line and the title. public/js/siding.js hides filtered cards and
   emptied groups with `hidden` and owns which group is open (the bits-ui slot quirk, as plywood.js). The card keeps its own
   shadow under the viewer's ring through `--viewer-item-shadow`. */
.siding {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.siding__filters {
    margin-bottom: 1.5rem;
}

.siding__cards {
    display: none;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .siding__cards {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.siding__filter {
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: #fff;
    color: #374151;
    text-align: center;
    cursor: pointer;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.siding__filter[data-state="active"] {
    border-color: var(--primary-600);
    background-color: var(--primary-600);
    color: #fff;
}

.siding__filter[data-state="inactive"]:hover {
    background-color: #f9fafb;
}

.siding__select-wrap {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .siding__select-wrap {
        display: none;
    }
}

.siding__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    color: #000;
    border: 1px solid #6b7280;
    border-radius: 0.5rem;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.siding__select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 0 #fff, 0 0 0 2px var(--primary-500), 0 0 #0000;
}

.siding__search {
    position: relative;
}

.siding__input {
    width: 100%;
    appearance: none;
    background-color: #fff;
    color: #000;
    border: 1px solid #6b7280;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.siding__input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.siding__input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 2px var(--primary-500), 0 0 #0000;
}

.siding__search-icon {
    position: absolute;
    top: 0.625rem;
    left: 0.75rem;
    color: #9ca3af;
}

.siding__root > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.siding__item {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.siding__trigger {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #f3f4f6;
    text-align: center; /* the reference's shadcn trigger sets no text-align, so the button keeps the UA default (the shared
                           accordion rule above sets `left` for the FAQ and the generic groups) */
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.siding__trigger:hover {
    background-color: #e5e7eb;
}

.siding__trigger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* the shared chevron rule sets flex: none; the reference's chevron is a plain flex item and shrinks when a long group title
   overflows the trigger (a few pixels on a phone, and the title gets that width back) */
.siding__trigger .accordion__chevron {
    flex: 0 1 auto;
}

.siding__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.siding__panel {
    padding: 1rem;
}

.siding__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .siding__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .siding__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .siding__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.siding__card {
    --viewer-item-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    cursor: pointer;
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.siding__card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.siding__figure {
    position: relative;
    height: 6rem;
    background-color: #f3f4f6;
}

.siding__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.siding__body {
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.siding__size {
    margin: 0;
    color: #000;
}

.siding__sku {
    font-weight: 600;
}

.siding__name {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25; /* `leading-tight` follows `text-sm` in the reference's stylesheet and wins */
    color: #111827;
}

/* Decking groups (issue 0014): DeckingCategory.svelte. The siding page without the filter: `<div class="mx-auto max-w-7xl
   p-4">` holds the search box (`relative mb-6`, the plywood input rules) and an accordion `w-full space-y-4` whose items are
   `overflow-hidden rounded-lg border` with a trigger `w-full bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100`
   holding the group title (`text-xl font-bold text-gray-800`). The panel is `p-4` around a card grid `grid-cols-2 gap-4
   sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5`; a card is `relative cursor-pointer overflow-hidden rounded-lg border
   shadow-sm hover:shadow-md` with a `h-24 bg-gray-100` figure (the reference's `aspect-w-2 aspect-h-3` classes resolve to
   nothing: the reference has no aspect-ratio plugin, the `h-24` sets the height) and a `p-2 text-sm` body: the `dimensions`
   line (`mb-0 text-black`) when the item has one, the title (`mb-1 font-medium leading-tight text-gray-900`), the sku
   (`mb-2 text-gray-600`). public/js/decking.js hides searched-out cards and emptied groups with `hidden` and owns which
   group is open (the bits-ui slot quirk, as plywood.js). The card keeps its own shadow under the viewer's ring through
   `--viewer-item-shadow`. */
.decking {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.decking__search {
    position: relative;
    margin-bottom: 1.5rem;
}

.decking__input {
    width: 100%;
    appearance: none;
    background-color: #fff;
    color: #000;
    border: 1px solid #6b7280;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.decking__input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.decking__input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 2px var(--primary-500), 0 0 #0000;
}

.decking__search-icon {
    position: absolute;
    top: 0.625rem;
    left: 0.75rem;
    color: #9ca3af;
}

.decking__root > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.decking__item {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.decking__trigger {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #f3f4f6;
    text-align: center; /* the reference's shadcn trigger sets no text-align, so the button keeps the UA default (the shared
                           accordion rule above sets `left` for the FAQ and the generic groups) */
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.decking__trigger:hover {
    background-color: #e5e7eb;
}

.decking__trigger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* the shared chevron rule sets flex: none; the reference's chevron is a plain flex item and shrinks when a long group title
   overflows the trigger (a few pixels on a phone, and the title gets that width back) */
.decking__trigger .accordion__chevron {
    flex: 0 1 auto;
}

.decking__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.decking__panel {
    padding: 1rem;
}

.decking__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .decking__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .decking__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .decking__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.decking__card {
    --viewer-item-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    cursor: pointer;
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.decking__card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.decking__figure {
    position: relative;
    height: 6rem;
    background-color: #f3f4f6;
}

.decking__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.decking__body {
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.decking__dimensions {
    margin: 0;
    color: #000;
}

.decking__name {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25; /* `leading-tight` follows `text-sm` in the reference's stylesheet and wins */
    color: #111827;
}

.decking__sku {
    margin: 0 0 0.5rem;
    color: #4b5563;
}

/* Flooring and finish lumber groups (issue 0015): FlooringCategory.svelte, which BOTH published categories hand their
   groups to (`+page.svelte` maps `flooring` and `finish-lumber` to it; FinishLumber.svelte, the copy with a subcategory
   filter, is dead code: nothing imports it). The decking page with a different card: `<div class="mx-auto max-w-7xl p-4">`
   holds the search box (`relative mb-6`, the plywood input rules) and an accordion `w-full space-y-4` whose items are
   `overflow-hidden rounded-lg border` with a trigger `w-full bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100`
   holding the group title (`text-xl font-bold text-gray-800`). The panel is `p-4` around a card grid `grid-cols-2 gap-4
   sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5`; a card is `relative cursor-pointer overflow-hidden rounded-lg border
   shadow-sm hover:shadow-md` whose figure is `aspect-w-2 aspect-h-3 bg-gray-100` — NO `h-24`, so the image scales to the
   card width at its own ratio and the cards of a row are as tall as their tallest picture — and a `p-2 text-sm` body with
   the title (`mb-1 font-medium leading-tight text-gray-900`) and the sku (`mb-2 text-gray-600`), both drawn by the
   reference with `{@html}` (a stored `<br/>` is a line break). public/js/flooring.js hides searched-out cards and emptied
   groups with `hidden` and owns which group is open (the bits-ui slot quirk, as plywood.js). The card keeps its own shadow
   under the viewer's ring through `--viewer-item-shadow`. */
.flooring {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.flooring__search {
    position: relative;
    margin-bottom: 1.5rem;
}

.flooring__input {
    width: 100%;
    appearance: none;
    background-color: #fff;
    color: #000;
    border: 1px solid #6b7280;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.flooring__input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.flooring__input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 2px var(--primary-500), 0 0 #0000;
}

.flooring__search-icon {
    position: absolute;
    top: 0.625rem;
    left: 0.75rem;
    color: #9ca3af;
}

.flooring__root > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.flooring__item {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.flooring__trigger {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #f3f4f6;
    text-align: center; /* the reference's shadcn trigger sets no text-align, so the button keeps the UA default (the shared
                           accordion rule above sets `left` for the FAQ and the generic groups) */
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.flooring__trigger:hover {
    background-color: #e5e7eb;
}

.flooring__trigger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* the shared chevron rule sets flex: none; the reference's chevron is a plain flex item and shrinks when a long group title
   overflows the trigger (a few pixels on a phone, and the title gets that width back) */
.flooring__trigger .accordion__chevron {
    flex: 0 1 auto;
}

.flooring__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.flooring__panel {
    padding: 1rem;
}

.flooring__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .flooring__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .flooring__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .flooring__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.flooring__card {
    --viewer-item-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    cursor: pointer;
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.flooring__card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.flooring__figure {
    position: relative; /* no height: the reference's figure has none either (its aspect classes resolve to nothing), so
                           the picture scales to the card width at its own ratio */
    background-color: #f3f4f6;
}

.flooring__img {
    display: block;
    width: 100%;
    height: 100%; /* the reference's `h-full`: against the figure's auto height this computes to auto, so the ratio wins */
    object-fit: cover;
}

.flooring__body {
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.flooring__name {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25; /* `leading-tight` follows `text-sm` in the reference's stylesheet and wins */
    color: #111827;
}

.flooring__sku {
    margin: 0 0 0.5rem;
    color: #4b5563;
}

/* Moulding groups (issue 0016): MouldingCategory.svelte. `<div class="mx-auto max-w-7xl p-4">` holds the search box
   (`relative mb-6`) and an accordion `w-full space-y-4` whose items are `overflow-hidden rounded-lg border bg-white
   shadow-sm` — unlike the earlier card families the item has its own white background and small shadow — with a trigger
   `w-full bg-white px-4 py-4 transition-colors hover:bg-gray-50` holding the group title (`text-lg font-semibold
   text-gray-900`). The panel is `bg-gray-50/50 p-4` around a card grid `grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4
   lg:grid-cols-4` (four wide on desktop, not five). A card is `group relative cursor-pointer overflow-hidden rounded-lg
   bg-white shadow-lg transition-all duration-300 hover:shadow-lg` (the hover shadow is the same shadow: nothing moves),
   a `relative` media box with an absolute `bg-gradient-to-b from-transparent to-black/5` over a `h-32 overflow-hidden`
   figure whose image is `h-full w-full object-cover p-0 transition-transform duration-300` plus the reference's inline
   `style="transform:scale(1)"` — which defeats its own `group-hover:scale-105`, so no image ever scales. The body is
   `flex flex-col gap-2 border-t bg-white p-3`: the profile number (`text-lg font-semibold text-gray-900`), the
   description in an h3 (`text-sm text-gray-600`, plain text interpolation), the size badge (`inline-flex rounded
   bg-gray-100 px-2 py-1 text-sm font-medium text-gray-700` in a `mt-auto` wrapper). public/js/moulding.js hides
   searched-out cards and emptied groups with `hidden` and owns which group is open (the bits-ui slot quirk, as
   plywood.js). The card keeps its own shadow under the viewer's ring through `--viewer-item-shadow`. */
.moulding {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.moulding__search {
    position: relative;
    margin-bottom: 1.5rem;
}

.moulding__input {
    width: 100%;
    appearance: none;
    background-color: #fff;
    color: #000;
    border: 1px solid #6b7280;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05); /* `shadow-sm`, composed as Tailwind does */
    transition-property: all; /* `transition-all duration-200` (the earlier families' input only transitions colors) */
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.moulding__input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.moulding__input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 0 #fff, 0 0 0 2px rgb(36 56 82 / 0.2), 0 1px 2px 0 rgb(0 0 0 / 0.05); /* ring-primary-500/20 keeps shadow-sm */
}

.moulding__search-icon {
    position: absolute;
    top: 0.625rem;
    left: 0.75rem;
    color: #9ca3af;
}

.moulding__root > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.moulding__item {
    overflow: hidden;
    background-color: #fff; /* the reference's item is `bg-white shadow-sm`, unlike siding/decking/flooring */
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.moulding__trigger {
    width: 100%;
    padding: 1rem;
    background-color: #fff;
    text-align: center; /* the reference's shadcn trigger sets no text-align, so the button keeps the UA default (the shared
                           accordion rule above sets `left` for the FAQ and the generic groups) */
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.moulding__trigger:hover {
    background-color: #f9fafb;
}

.moulding__trigger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* the shared chevron rule sets flex: none; the reference's chevron is a plain flex item and shrinks when a long group title
   overflows the trigger (a few pixels on a phone, and the title gets that width back) */
.moulding__trigger .accordion__chevron {
    flex: 0 1 auto;
}

.moulding__title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #111827;
}

.moulding__panel {
    padding: 1rem;
    background-color: rgb(249 250 251 / 0.5); /* bg-gray-50/50 */
}

.moulding__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .moulding__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .moulding__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .moulding__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* `lg:grid-cols-4`: four wide on desktop, not five */
    }
}

.moulding__card {
    --viewer-item-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg; hover:shadow-lg is the same */
    cursor: pointer;
    transition-property: all; /* `transition-all duration-300` */
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.moulding__media {
    position: relative;
}

.moulding__gradient {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.05)); /* from-transparent to-black/5 */
}

.moulding__figure {
    height: 8rem; /* h-32 */
    overflow: hidden;
}

.moulding__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0; /* the reference's `p-0` */
    transition-property: transform; /* `transition-transform duration-300`: no transform ever changes (the inline style wins) */
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.moulding__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid #e5e7eb;
    background-color: #fff;
    padding: 0.75rem;
}

.moulding__number {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #111827;
}

.moulding__name {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: #4b5563;
}

.moulding__size {
    margin-top: auto; /* mt-auto: the badge sits at the bottom of the tallest card in the row */
}

.moulding__badge {
    display: inline-flex;
    border-radius: 0.25rem;
    background-color: #f3f4f6;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #374151;
}

/* Download Catalogs: `<section class="mb-8 p-2">` with SectionTitle small and CatalogGrid small (`grid-cols-3 md:grid-cols-6`) */
.category-catalogs {
    margin-bottom: 2rem;
    padding: 0.5rem;
}

.category-catalogs__grid,
.logo-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.category-catalogs__link,
.logo-grid__link {
    cursor: pointer;
    color: inherit;
    text-decoration: inherit;
}

.category-catalogs__link:hover,
.logo-grid__link:hover {
    opacity: 0.7;
}

.category-catalogs__img {
    aspect-ratio: 3 / 4;
    width: 100%;
    object-fit: cover;
}

.category-catalogs__title,
.logo-grid__title {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--primary-700);
}

/* LogoGrid (Hardware, Building Materials): `w-full bg-gray-50 py-8 pb-16` */
.logo-grid {
    width: 100%;
    background-color: #f9fafb;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.logo-grid__img {
    display: block;
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .category-catalogs__grid,
    .logo-grid__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Brands We Carry (Products page): LogoCarousel.svelte, a CSS marquee. 40s linear, the track moves by 250px x 7 */
.logo-carousel {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.logo-carousel__slider {
    position: relative;
    width: 100%;
    height: 9rem;
    margin: auto;
    overflow: hidden;
    background: #fff;
}

.logo-carousel__slider::before,
.logo-carousel__slider::after {
    content: '';
    position: absolute;
    top: 0;
    z-index: 2;
    width: 9rem;
    height: 9rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.logo-carousel__slider::before {
    left: 0;
}

.logo-carousel__slider::after {
    right: 0;
    transform: rotateZ(180deg);
}

.logo-carousel__track {
    display: flex;
    width: calc(9rem * 50);
    animation: logo-carousel-scroll 40s linear infinite;
}

.logo-carousel__slide {
    width: 9rem;
    height: 9rem;
}

.logo-carousel__img {
    object-fit: cover;
}

@media (min-width: 768px) {
    .logo-carousel__img {
        width: 9rem;
        height: 9rem;
    }
}

@keyframes logo-carousel-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

/* Moving content can be stopped (deliberate deviation): the marquee holds still under the pointer or keyboard focus and for
   visitors who ask for reduced motion; the reference runs it always */
.logo-carousel__slider:hover .logo-carousel__track,
.logo-carousel__slider:focus-within .logo-carousel__track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .logo-carousel__track {
        animation: none;
    }
}

/* ------------------------------------------------------------------------------------------------
   Cookie banner (issue 0021): PrivacyBanner.svelte. A fixed bar, so it never moves the page: `fixed bottom-0 left-0 right-0
   z-50 border-t border-gray-200 bg-white p-4 shadow-lg`, inside `mx-auto flex max-w-7xl flex-col items-center
   justify-between gap-4 sm:flex-row`. Svelte's `transition:fade` is 400ms linear in and out. The reference's `rounded-md`
   resolves to no radius (see the shell note above), so the buttons are square.
   ------------------------------------------------------------------------------------------------ */

.cookie-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    border-top: 1px solid #e5e7eb;
    background-color: #fff;
    padding: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Two named animations: reusing one name would leave the finished fade-in in place instead of starting the fade-out. */
.cookie-banner--in {
    animation: cookie-banner-in 400ms linear both;
}

.cookie-banner--out {
    animation: cookie-banner-out 400ms linear both;
}

@keyframes cookie-banner-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cookie-banner-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner--in,
    .cookie-banner--out {
        animation: none;
    }
}

.cookie-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .cookie-banner__inner {
        flex-direction: row;
    }
}

.cookie-banner__text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #4b5563;
}

.cookie-banner__link {
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: 0.75rem;
}

.cookie-banner__button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.cookie-banner__button--opt-out {
    background-color: #f3f4f6;
    color: #374151;
}

.cookie-banner__button--opt-out:hover {
    background-color: #e5e7eb;
}

.cookie-banner__button--accept {
    background-color: var(--primary-600);
    color: #fff;
}

.cookie-banner__button--accept:hover {
    background-color: var(--primary-700);
}

/* ------------------------------------------------------------------------------------------------
   Product viewer (issue 0011, shared by every product display): ProductModal.svelte. The Tailwind classes of the reference,
   transcribed; the markup is category/viewer (the frame) plus the slides public/js/viewer.js builds for each image.
   ------------------------------------------------------------------------------------------------ */

/* `fixed inset-0 z-50 bg-black`, faded in and out over 400ms (svelte's transition:fade) */
.viewer {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: #000;
}

.viewer:focus {
    outline: none;
}

@keyframes viewer-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes viewer-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.viewer[data-state="opening"],
.viewer__notice[data-state="opening"] {
    animation: viewer-fade-in 400ms linear;
}

.viewer[data-state="closing"],
.viewer__notice[data-state="closing"] {
    animation: viewer-fade-out 400ms linear forwards;
}

/* `absolute left-1/2 top-4 z-20 -translate-x-1/2 transform rounded-lg bg-green-500 px-4 py-2 text-white shadow-lg` */
.viewer__notice {
    position: absolute;
    left: 50%;
    top: 1rem;
    z-index: 20;
    transform: translateX(-50%);
    border-radius: 0.5rem;
    background-color: #22c55e;
    padding: 0.5rem 1rem;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* `absolute top-4 z-10 p-2 text-white transition-colors duration-200 hover:text-gray-300`: copy right-28, download right-14, close right-4 */
.viewer__button {
    position: absolute;
    top: 1rem;
    z-index: 10;
    padding: 0.5rem;
    color: #fff;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.viewer__button:hover {
    color: #d1d5db;
}

.viewer__button--copy {
    right: 7rem;
}

.viewer__button--download {
    right: 3.5rem;
}

.viewer__button--close {
    right: 1rem;
}

.viewer__button:focus:not(:focus-visible) {
    outline: none;
}

.viewer__icon {
    width: 1.75rem;
    height: 1.75rem;
}

.viewer__icon--close {
    width: 2rem;
    height: 2rem;
}

.viewer__stage {
    width: 100%;
    height: 100%;
}

.viewer__swiper {
    display: block;
    width: 100%;
    height: 100%;
}

/* the reference's scoped `swiper-container::part(...)` rules */
.viewer__swiper::part(button-prev),
.viewer__swiper::part(button-next) {
    color: #fff;
    opacity: 0.8;
}

.viewer__swiper::part(bullet) {
    background-color: #fff;
    opacity: 0.6;
}

.viewer__swiper::part(bullet-active) {
    background-color: #fff;
    opacity: 1;
}

.viewer__slide {
    position: relative;
}

/* The logo and its rule are `fixed left-10 top-10 z-50 flex w-full items-center gap-4` inside the slide: the slide's transformed
   wrapper is their containing block, so they move with the slide */
.viewer__brand {
    position: fixed;
    left: 2.5rem;
    top: 2.5rem;
    z-index: 50;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
}

.viewer__logo {
    z-index: 50;
    width: 25%;
}

.viewer__rule {
    height: 0.25rem;
    width: 75%;
    background-color: #fff;
}

.viewer__image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* `absolute inset-x-0 bottom-0 h-60 overflow-y-auto px-10 py-4 text-white` around `flex min-h-48 flex-col items-start justify-between md:flex-row` */
.viewer__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15rem;
    overflow-y: auto;
    padding: 1rem 2.5rem;
    color: #fff;
}

.viewer__info-row {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.viewer__text {
    height: 100%;
    width: 100%;
    flex: 1 1 0%;
}

.viewer__aside {
    display: flex;
    height: 100%;
    width: 100%;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    text-align: right;
}

.viewer__text p {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* sku and profile number `text-3xl font-black uppercase tracking-wider text-yellow-400`; size and dimensions `text-lg font-black uppercase
   tracking-wider text-white`; title `text-xl` with a yellow span; description `text-lg` with a gray-300 span and `py-2` */
.viewer__sku {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #facc15;
}

.viewer__size {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
}

.viewer__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.viewer__accent {
    color: #facc15;
}

.viewer__text .viewer__description {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.viewer__muted {
    color: #d1d5db;
}

.viewer__label {
    font-weight: 600;
}

@media (min-width: 768px) {
    .viewer__logo {
        width: 15%;
    }

    .viewer__rule {
        width: 85%;
    }

    .viewer__info-row {
        flex-direction: row;
    }
}

/* The ring a product gets for two seconds after the viewer closes on it: `ring-2 ring-primary-500` */
.is-highlighted {
    box-shadow: 0 0 0 2px var(--primary-500), var(--viewer-item-shadow, 0 0 #0000);
}

/* ------------------------------------------------------------------------------------------------
   Quote and thank-you pages (issue 0020)

   Hand-built pages (pages/quote.html, pages/thank-you.html) from the reference's
   src/routes/(frontend)/quote/+page.svelte and thank-you/+page.svelte. Class by class from the reference's
   Tailwind utilities; its container is `container mx-auto max-w-4xl px-4 py-8`, where max-w-4xl (56rem) wins over
   the container's own 2xl 1200px cap and px-4 (1rem) over the container's 2rem side padding. The page's own focus
   outline (black, inset 2px) is delivered unscoped on the quote page only, through META:HEAD_INJECT, exactly as the
   reference's <style> block (its selectors carry no component scope there) does. */

/* `container mx-auto max-w-4xl px-4 py-8` */
.quote {
    width: 100%;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1rem;
}

/* `grid grid-cols-1 items-start justify-between sm:grid-cols-2` */
.quote__head {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: flex-start;
    justify-content: space-between;
}

@media (min-width: 640px) {
    .quote__head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* `mb-8` */
.quote__identity {
    margin-bottom: 2rem;
}

/* `h-16` */
.quote__logo {
    height: 4rem;
}

/* `mt-2 text-sm` */
.quote__address {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* `text-white` */
.quote__band {
    color: #fff;
}

/* `bg-primary-600 p-4 text-right uppercase` (the type sizes are shared with the section titles, next) */
.quote__band-title {
    background-color: var(--primary-600);
    padding: 1rem;
    text-align: right;
    text-transform: uppercase;
}

/* `text-lg font-bold` (the band title and every section title) */
.quote__section-title,
.quote__band-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
}

/* `w-full` */
.quote__form {
    width: 100%;
}

/* `hidden` (the honeypot paragraph) */
.quote__honeypot {
    display: none;
}

/* `mb-8` */
.quote__section {
    margin-bottom: 2rem;
}

/* `mb-4 bg-primary-600 px-4 py-2 text-white` */
.quote__section-head {
    margin-bottom: 1rem;
    background-color: var(--primary-600);
    padding: 0.5rem 1rem;
    color: #fff;
}

/* `space-y-4` */
.quote__fields > * + * {
    margin-top: 1rem;
}

/* `flex flex-col` */
.quote__field {
    display: flex;
    flex-direction: column;
}

/* `mb-1 font-medium` */
.quote__label {
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* `text-red-600` */
.quote__required {
    color: rgb(220 38 38);
}

/* `w-full border border-gray-300 px-3 py-2` on every input and the textarea, over the reference's forms-plugin base
   (appearance none, white, radius 0, 1rem/1.5rem): without appearance:none the built date input keeps its native
   control chrome. The focus styles come from the page's own META:HEAD_INJECT cascade, not from here. */
.quote__input {
    width: 100%;
    appearance: none;
    background-color: #fff;
    border: 1px solid rgb(209 213 219);
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

/* The forms-plugin base's shadow-DOM rules for date inputs: without `min-height: 1.5em` on the value the built date
   field renders 2px taller than the reference's. */
.quote__input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.quote__input::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit;
}

.quote__input::-webkit-datetime-edit {
    display: inline-flex;
}

.quote__input::-webkit-datetime-edit,
.quote__input::-webkit-datetime-edit-year-field,
.quote__input::-webkit-datetime-edit-month-field,
.quote__input::-webkit-datetime-edit-day-field,
.quote__input::-webkit-datetime-edit-hour-field,
.quote__input::-webkit-datetime-edit-minute-field,
.quote__input::-webkit-datetime-edit-second-field,
.quote__input::-webkit-datetime-edit-millisecond-field,
.quote__input::-webkit-datetime-edit-ampm-field {
    padding-top: 0;
    padding-bottom: 0;
}

/* `mb-2 grid grid-cols-12 gap-4` (the MATERIAL/QUANTITY header row and each of the eight pairs) */
.quote__grid-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* `col-span-8` */
.quote__col-material {
    grid-column: span 8 / span 8;
}

/* `col-span-4` */
.quote__col-quantity {
    grid-column: span 4 / span 4;
}

/* `font-bold` */
.quote__col-title {
    font-weight: 700;
}

/* `mt-6` */
.quote__submit-row {
    margin-top: 1.5rem;
}

/* `w-full rounded-lg bg-primary-600 px-6 py-3 font-semibold uppercase text-white transition-all duration-300
   hover:scale-105 hover:bg-primary-500` */
.quote__submit {
    width: 100%;
    border-radius: 0.5rem;
    background-color: var(--primary-600);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.quote__submit:hover {
    background-color: var(--primary-500);
    transform: scale(1.05);
}

/* Thank-you: `prose flex flex-col items-center justify-center p-8` (prose is a no-op there: no typography plugin),
   h1 `pt-8 text-3xl font-semibold`. */
.thank-you {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.thank-you__title {
    padding-top: 2rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
}