/* slabyard-v2.css — shared CSS for the slab-yard redesign. Image Locator submodule (spec: .specs/image-locator). Scoped under body.slabyard-v2. */

/* ============================================================
   Design tokens (CLAUDE.md §6)
   ============================================================ */
:root {
    --color-primary: #004E90;
    --color-text: #333333;
    --color-bg: #FFFFFF;
    --color-surface: #F2F2F2;
    --color-border: #D7D7D7;
    --color-border-dark: #797979;
    --font-family: 'Montserrat', sans-serif;
    --font-size-base: 12px;
}


body.slabyard-v2 legend {
    font-weight: 700;
    padding: 0 10px;
}

body.slabyard-v2 label.il-input-label {
    font-weight: 700;
    text-align: left;
    margin-left: 20px;

}

/* ============================================================
   Body namespace — applied via <body class="slabyard-v2 ...">
   emitted from the page's pagetitlebodyclass content placeholder
   ============================================================ */
body.slabyard-v2 {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* ============================================================
   Embed mode — hide Site.Master chrome when this page is loaded
   inside an <iframe> (e.g. customer-popup.aspx inside
   #sy-detail-dialog). Opt-in via `body.slabyard-v2--embed`
   emitted from the page's pagetitlebodyclass placeholder.
   ============================================================ */
body.slabyard-v2--embed #logo,
body.slabyard-v2--embed .banner-bar,
body.slabyard-v2--embed .banner,
body.slabyard-v2--embed .banner-headline,
body.slabyard-v2--embed #redbar2,
body.slabyard-v2--embed #blackbar2,
body.slabyard-v2--embed #footer-div-1,
body.slabyard-v2--embed .footer-line {
    display: none;
}

/* Reset the framing container so embedded content sits flush against
   the iframe edges rather than the Site.Master rails. */
body.slabyard-v2--embed #container-box {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    width: 100%;
    max-width: none;
}

body.slabyard-v2--embed #middle-div {
    margin: 0;
    padding: 0;
}


/* Defensive fallback: hide the UserWay accessibility widget's floating UI
   inside embedded pages. Site.Master already skips the script tag when
   IsEmbed is set, but if an older embedded page forgets to flip that flag
   the widget still won't visually stack over the parent's own instance. */
body.slabyard-v2--embed .uwy,
body.slabyard-v2--embed [id^="userwayAccessibilityIcon"],
body.slabyard-v2--embed [class*="userway"] {
    display: none;
}

/* ============================================================
   Image Locator — .il-* block (scoped under body.slabyard-v2)
   ============================================================ */

/* --- Page wrapper --- */
body.slabyard-v2 .il-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

/* --- Header --- */
body.slabyard-v2 .il-header {
    margin: 0 0 16px 0;
    padding: 15px;
/*    border-bottom: 1px solid var(--color-border);*/
}

body.slabyard-v2 .il-header h2 {
    font-family: var(--font-family);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

/* --- Back-to-upload nav row --- */
body.slabyard-v2 .il-empSubNav {
    display: flex;
    align-items: center;
    margin: 0 0 16px 0;
    padding: 8px 0;
}

    body.slabyard-v2 .il-empSubNav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 12px 16px;
        color: #FFFFFF;
        text-decoration: none;
        font-weight: 500;
        text-transform: unset;
        background-color: #004E90;
        border-radius: 5px;
        line-height: 1.2;
        box-sizing: border-box;
        margin: 0 5px;
        min-width: 205px;
        justify-content: center;
        border: 2px solid #004E90 !important;
        font-size: 14px;
    }

        body.slabyard-v2 .il-empSubNav a:hover,
        body.slabyard-v2 .il-empSubNav a:focus {
            background-color: white;
            color: #004E90;
            border: 2px solid #004E90 !important;
        }

        body.slabyard-v2 .il-empSubNav a[href="upload.aspx"],
        body.slabyard-v2 .il-empSubNav a[href="upload2.aspx"] {
            background-color: #333333;
            border-color: #333333 !important;
        }

        body.slabyard-v2 .il-empSubNav a[href="upload.aspx"]:hover,
        body.slabyard-v2 .il-empSubNav a[href="upload.aspx"]:focus,
        body.slabyard-v2 .il-empSubNav a[href="upload2.aspx"]:hover,
        body.slabyard-v2 .il-empSubNav a[href="upload2.aspx"]:focus {
            background-color: #666666;
            border-color: #666666 !important;
            color:white;
        }

body.slabyard-v2 .il-empSubNav a[href="upload.aspx"]::before,
body.slabyard-v2 .il-empSubNav a[href="upload2.aspx"]::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M9 2L4 7l5 5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* --- Search form --- */
body.slabyard-v2 .il-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto 24px auto;
    padding: 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 5px;
}

/* --- Radio group --- */
body.slabyard-v2 .il-radios {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.slabyard-v2 .il-radios label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 8px;
    cursor: pointer;
    line-height: 1.2;
    box-sizing: border-box;
}

body.slabyard-v2 .il-radios input[type="radio"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

/* --- Text input --- */
body.slabyard-v2 .il-input {
    width: 100%;
    min-height: 44px;
    padding: 12px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: #FFFFFF !important;
    border: 1px solid var(--color-border);
    border-radius: 50px;
    box-sizing: border-box;
}

body.slabyard-v2 .il-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* --- Button group --- */
    body.slabyard-v2 .il-btn-group {
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin-top: 10px;
        padding: 0 10px;
    }

body.slabyard-v2 .il-btn-group .il-submit,
body.slabyard-v2 .il-btn-group .il-clear {
    flex: 1;
}

@media (max-width: 480px) {
    body.slabyard-v2 .il-btn-group {
        flex-direction: column;
    }
}

/* --- Submit / Clear buttons --- */
body.slabyard-v2 .il-submit,
body.slabyard-v2 .il-clear {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
    line-height: 1.2;
    border-radius:5px;
}

body.slabyard-v2 .il-submit {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
}

body.slabyard-v2 .il-submit:hover,
body.slabyard-v2 .il-submit:focus {
    background-color: var(--color-text);
    border-color: var(--color-text);
    outline: none;
}

body.slabyard-v2 .il-clear {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border-dark);
}

body.slabyard-v2 .il-clear:hover,
body.slabyard-v2 .il-clear:focus {
    background-color: var(--color-surface);
    border-color: var(--color-text);
    outline: none;
}

/* --- Validation message --- */
body.slabyard-v2 .il-validation {
    color: #B00020;
    font-size: var(--font-size-base);
    padding: 4px 0;
    min-height: 18px;
}

/* --- Loading spinner --- */
body.slabyard-v2 .il-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: var(--color-text);
    font-size: 14px;
}

body.slabyard-v2 .il-loading::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: il-spin 0.8s linear infinite;
}

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

/* --- Error banner --- */
body.slabyard-v2 .il-error {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin: 16px 0;
    background-color: #FDECEA;
    border: 1px solid #B00020;
    color: #B00020;
}

body.slabyard-v2 .il-error button {
    min-height: 44px;
    padding: 12px 24px;
    align-self: flex-start;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-dark);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    box-sizing: border-box;
}

body.slabyard-v2 .il-error button:hover,
body.slabyard-v2 .il-error button:focus {
    background-color: var(--color-surface);
    border-color: var(--color-text);
    outline: none;
}

/* --- Empty state --- */
body.slabyard-v2 .il-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-border-dark);
    font-size: 14px;
}

/* --- Result count header --- */
body.slabyard-v2 .il-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 16px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--color-border);
}

/* --- Result grid (mobile-first) --- */
body.slabyard-v2 .il-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    body.slabyard-v2 .il-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    body.slabyard-v2 .il-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1600px) {
    body.slabyard-v2 .il-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Result card --- */
body.slabyard-v2 .il-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px;
}

body.slabyard-v2 .il-card:hover,
body.slabyard-v2 .il-card:focus-within {
    border-color: var(--color-primary);
}

/* --- Card thumbnail --- */
body.slabyard-v2 .il-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--color-surface);
}

/* --- Card metadata --- */
body.slabyard-v2 .il-meta {
    margin: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    font-size: var(--font-size-base);
    text-align: left;
}

body.slabyard-v2 .il-meta dt {
    font-weight: 700;
    color: var(--color-border-dark);
}

body.slabyard-v2 .il-meta dd {
    margin: 0;
    color: var(--color-text);
    word-break: break-word;
}

/* ============================================================
   Lightbox (<dialog id="il-lightbox">)
   ============================================================ */
body.slabyard-v2 .il-lightbox {
    padding: 0;
    border: none;
    background-color: var(--color-bg);
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
 /*   height: auto;*/
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

body.slabyard-v2 .il-lightbox::backdrop {
    background-color: rgba(0, 0, 0, 0.85);
}

body.slabyard-v2 .il-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(80vh - 100px);
    width: auto;
    height: auto;
    margin: 0 auto;
    background-color: var(--color-surface);
}

body.slabyard-v2 .il-lightbox__caption {
    padding: 12px 16px;
    color: var(--color-text);
    font-size: var(--font-size-base);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    font-weight: 600;
}

body.slabyard-v2 .il-lightbox__close,
body.slabyard-v2 .il-lightbox__download {
    position: absolute;
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-dark);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.slabyard-v2 .il-lightbox__close:hover,
body.slabyard-v2 .il-lightbox__close:focus,
body.slabyard-v2 .il-lightbox__download:hover,
body.slabyard-v2 .il-lightbox__download:focus {
    background-color: var(--color-surface);
    border-color: var(--color-text);
    outline: none;
}

body.slabyard-v2 .il-lightbox__close {
    top: 8px;
    right: 8px;
    font-size: 46px;
    padding: 0;
    border-radius: 5px;
}

body.slabyard-v2 .il-lightbox__download {
    top: 8px;
    left: 8px;
    padding: 12px 16px;
    border-radius: 5px;
    font-weight:700;
}

/* ============================================================
   Skeleton shimmer (applied to <img> before load completes)
   ============================================================ */
body.slabyard-v2 .il-shimmer {
    background-color: var(--color-surface);
    background-image: linear-gradient(
        90deg,
        var(--color-surface) 0%,
        var(--color-border) 50%,
        var(--color-surface) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: il-shimmer 1.4s ease-in-out infinite;
}

@keyframes il-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   Form layout enhancement at 768+
   (radios inline with input + buttons in a single row when there's room)
   ============================================================ */
@media (min-width: 768px) {
    body.slabyard-v2 .il-radios {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
        padding-bottom: 8px;
        justify-content: center;
    }
}


body.slabyard-v2 input:-webkit-autofill,
body.slabyard-v2 input:-webkit-autofill:hover,
body.slabyard-v2 input:-webkit-autofill:focus,
body.slabyard-v2 textarea:-webkit-autofill,
body.slabyard-v2 select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ============================================================
   Customer search page (task 3.1) — .sy-* block
   Scoped under body.slabyard-v2, mobile-first, additive.
   Do NOT modify or reorder the .il-* rules above.
   ============================================================ */

/* --- Page + layout shell --- */
body.slabyard-v2 .sy-page {
/*    max-width: 1600px;*/
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Task 9.1 — skip-to-results link. Off-screen by default; visible on
   keyboard focus so keyboard users can jump past the filter panel. */
body.slabyard-v2 .sy-skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 1000;
    padding: 8px 16px;
    background-color: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
}

body.slabyard-v2 .sy-skip-link:focus {
    left: 8px;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

body.slabyard-v2 .sy-layout {
    display: block;
}

@media (min-width: 768px) {
    body.slabyard-v2 .sy-layout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 0 24px;
        align-items: start;
    }
}

@media (min-width: 1200px) {
    body.slabyard-v2 .sy-layout {
        grid-template-columns: 430px 1fr;
    }
}

/* --- Filters sidebar --- */
body.slabyard-v2 .sy-filters {
    background-color: #f2f2f2;
    padding: 0;
    margin: 0 0 16px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

body.slabyard-v2 .sy-filters-heading {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 14px 12px 10px;
    color: var(--color-text);
    background-color: #f2f2f2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/*@media (min-width: 768px) {
    body.slabyard-v2 .sy-filters {
        margin: 0;
        position: static;
        height: calc(100vh - 115px);
        height: calc(100dvh - 115px);
        overflow: hidden;
    }
}
*/

@media (min-width: 768px) {
    body.slabyard-v2 .sy-filters {
        margin: 0;
        position: sticky;
        top: 0;
        height: calc(100vh - var(--filter-top-offset, 115px));
        height: calc(100dvh - var(--filter-top-offset, 115px));
        overflow: hidden;
    }
}

/* Scrollable middle section — everything between heading and buttons */
body.slabyard-v2 .sy-filters-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

body.slabyard-v2 .sy-filters-empty {
    padding: 16px;
    color: var(--color-border-dark);
    font-size: var(--font-size-base);
}

/* --- Filter section (accordion) --- */
body.slabyard-v2 .sy-filters-section {
    background-color: var(--color-bg);
    margin: 10px;
    /* border: 1px solid var(--color-border); */
    border-radius: 10px;
}

body.slabyard-v2 .sy-filters-section:first-of-type {
    margin-top: 4px;
}

body.slabyard-v2 .sy-filters-section:last-of-type {
    margin-bottom: 6px;
}

body.slabyard-v2 .sy-filters-section__header {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    background-color: var(--color-bg);
    color: var(--color-text);
    box-sizing: border-box;
    border-radius: 15px;
}

body.slabyard-v2 .sy-filters-section__header:hover,
body.slabyard-v2 .sy-filters-section__header:focus {
    background-color: #f7f7f7;
    outline: none;
}

body.slabyard-v2 .sy-filters-section__header:focus {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

body.slabyard-v2 .sy-filters-section:not(.sy-filters-section--collapsed) .sy-filters-section__header:not(.sy-filters-section__header--static) {
    background-color: var(--color-primary);
    color: #fff;
}

body.slabyard-v2 .sy-filters-section:not(.sy-filters-section--collapsed) .sy-filters-section__header:not(.sy-filters-section__header--static) .sy-filters-section__title,
body.slabyard-v2 .sy-filters-section:not(.sy-filters-section--collapsed) .sy-filters-section__header:not(.sy-filters-section__header--static) .sy-filters-section__chips {
    color: #fff;
}

body.slabyard-v2 .sy-filters-section:not(.sy-filters-section--collapsed) .sy-filters-section__header:not(.sy-filters-section__header--static) .sy-filters-section__toggle::after {
    color: #fff;
}

body.slabyard-v2 .sy-filters-section__header--static,
body.slabyard-v2 .sy-filters-section__header--static:hover,
body.slabyard-v2 .sy-filters-section__header--static:focus {
    cursor: default;
    background-color: var(--color-bg);
    box-shadow: none;
}

body.slabyard-v2 .sy-filters-section__title {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
    flex-shrink: 0;
}

body.slabyard-v2 .sy-filters-section__chips {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--color-primary);
    margin: 0 8px;
    font-weight: 500;
}

body.slabyard-v2 .sy-filters-section__toggle {
    flex-shrink: 0;
    display: inline-block;
    min-width: 20px;
    text-align: right;
    color: var(--color-border-dark);
    font-size: 16px;
    line-height: 1;
    transition: transform 0.15s ease;
    font-style: normal;
    /* replace the ▾ character with a cleaner › chevron */
    font-size: 0;
}

body.slabyard-v2 .sy-filters-section__toggle::after {
    content: '❮';
    font-size: 20px;
    color: var(--color-border-dark);
    display: inline-block;
    font-weight: 500;
    transform-origin: center center;
    transition: transform 0.2s ease;
    /* default (expanded): point up */
    transform: rotate(90deg);
}

body.slabyard-v2 .sy-filters-section--no-collapse .sy-filters-section__header--static {
    padding-bottom: 0;
}

body.slabyard-v2 .sy-filters-section[data-section="newProducts"] .sy-filters-section__title {
    color: var(--color-primary);
}

body.slabyard-v2 .sy-filters-section__body {
    padding: 8px 12px 12px 12px;
    background-color: var(--color-bg);
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.6s ease, padding 0.6s ease;
}

body.slabyard-v2 .sy-filters-section--collapsed .sy-filters-section__body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: none;
}

/* collapsed = arrow points down; expanded = arrow points up */
body.slabyard-v2 .sy-filters-section--collapsed .sy-filters-section__toggle::after {
    transform: rotate(-90deg);
    transition: none;
}

body.slabyard-v2 .sy-filters-section:not(.sy-filters-section--collapsed) .sy-filters-section__toggle::after {
    transform: rotate(90deg);
    transition: transform 0.6s ease;
}

/* --- Filter inputs --- */
body.slabyard-v2 .sy-filters-hint {
    margin: 0 0 8px 0;
    font-size: 11px;
    color: var(--color-border-dark);
}

body.slabyard-v2 .sy-filters-select,
body.slabyard-v2 .sy-filters-input,
body.slabyard-v2 .sy-filters-multiselect {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    box-sizing: border-box;
    border-radius: 50px;
}

body.slabyard-v2 .sy-filters-multiselect {
    min-height: 200px;
    padding: 4px;
}

body.slabyard-v2 .sy-filters-select:focus,
body.slabyard-v2 .sy-filters-input:focus,
body.slabyard-v2 .sy-filters-multiselect:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* --- Faceted filter wrapper (Axure revision 2026-07-15) ---
   Wraps a search input + scrollable checkbox list + empty-state note.
   Used by Material Type, Product Name, Block Number, Finish, Color. */
body.slabyard-v2 .sy-filters-facet {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.slabyard-v2 .sy-filters-facet__search {
    position: relative;
}

body.slabyard-v2 .sy-filters-facet__search-input {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px 8px 32px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: 20px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

body.slabyard-v2 .sy-filters-facet__search-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Magnifying-glass glyph — inline SVG data URI, no icon-font dependency.
   Matches the mockup's leading-icon placement inside the pill input. */
body.slabyard-v2 .sy-filters-facet__search::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23797979'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.398 1.398l3.85 3.85a1 1 0 0 0 1.414-1.414l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Scrollable list — matches the mockup's constrained-height pane so long
   lists (Product Name, Block Number) don't grow the whole filter panel. */
body.slabyard-v2 .sy-filters-facet__list {
    max-height: 500px;
    overflow-y: auto;
    /* Subtle inset shadow at top+bottom to hint scrollability. */
    box-shadow: inset 0 -6px 6px -6px rgba(0, 0, 0, 0.08),
                inset 0  6px 6px -6px rgba(0, 0, 0, 0.08);
}

body.slabyard-v2 .sy-filters-facet__empty {
    margin: 0;
    padding: 12px;
    color: var(--color-border-dark);
    font-size: 11px;
    text-align: center;
    font-style: italic;
}

/* Hide the checkbox row wholesale when a search query hides it. */
body.slabyard-v2 .sy-filters-checklist__item[hidden] {
    display: none;
}

/* --- Checkbox lists --- */
body.slabyard-v2 .sy-filters-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.slabyard-v2 .sy-filters-checklist__item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}

body.slabyard-v2 .sy-filters-checklist__item:last-child {
    border-bottom: none;
}

/* --- Selected-first pinning ---
   Checked rows are moved to the top of the list by slabyard-v2.js and stay
   visible even while a search query narrows the rest of the list. The first
   unchecked row carries the group divider. */
body.slabyard-v2 .sy-filters-checklist__item.is-selected {
    background: var(--color-surface);
}

body.slabyard-v2 .sy-filters-checklist__item.is-first-unselected {
    border-top: 2px solid var(--color-border-dark);
}

body.slabyard-v2 .sy-filters-checklist__label {
    display: flex;
    align-items: center;
    /*    min-height: 54px;*/
    padding: 8px 8px;
    cursor: pointer;
    line-height: 1.3;
    font-size: var(--font-size-base);
    color: var(--color-text);
    box-sizing: border-box;
}

body.slabyard-v2 .sy-filters-checklist__label:hover {
    background-color: var(--color-surface);
}

body.slabyard-v2 .sy-filters-checklist__input {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    flex-shrink: 0;
    /* Move the checkbox to the far-right per the mockup pattern? — the
       mockup shows checkboxes on the RIGHT, but flipping order in every
       call site is fragile. Keep left-aligned checkbox (already the
       existing convention on this page) and put count on the right. */
}

/* Text grows to fill available space between checkbox and count. */
body.slabyard-v2 .sy-filters-checklist__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: 700;
}

/* Clearance subtitle: "(Includes Discontinued, Value, etc.)" — lighter weight, same line. */
body.slabyard-v2 .sy-filters-checklist__subtitle {
    font-weight: 400;
    font-size:.875rem;
}

/* Count badge on the far right — grey, right-aligned, small. */
body.slabyard-v2 .sy-filters-checklist__count {
    flex-shrink: 0;
    margin-left: 8px;
    padding: 2px 6px;
    background-color: var(--color-surface);
    color: var(--color-border-dark);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    min-width: 22px;
    text-align: center;
    box-sizing: border-box;
}

/* --- Della Terra outbound links (R1.6) --- */
body.slabyard-v2 .sy-filters-material__outbounds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

body.slabyard-v2 .sy-filters-material__outbound {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 8px;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--font-size-base);
    box-sizing: border-box;
}

body.slabyard-v2 .sy-filters-material__outbound:hover,
body.slabyard-v2 .sy-filters-material__outbound:focus {
    text-decoration: underline;
    background-color: var(--color-surface);
    outline: none;
}

/* --- Length / Height dual-thumb slider (R3.1 / R3.2 — task 3.2) ---
   Two overlaid <input type="range"> elements sharing the same track region.
   Only the thumbs (::-*-range-thumb) receive pointer events so both remain
   grabbable regardless of which one is on top of the DOM stack. */
body.slabyard-v2 .sy-filters-slider {
    position: relative;
    padding: 14px 12px 12px;
    box-sizing: border-box;
    /* Track height + top/bottom padding so both thumbs have room. */
    min-height: 68px;
}

body.slabyard-v2 .sy-filters-slider__track {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 22px;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 1px;
}

body.slabyard-v2 .sy-filters-slider__fill {
    display: none;
}

/* Both range inputs overlap the track. pointer-events off on the input
   body means the invisible input surface doesn't swallow clicks meant for
   the underlying track fill; pointer-events on the thumbs is restored
   in the vendor-prefixed rules below. */
body.slabyard-v2 .sy-filters-slider__range {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 8px;
    width: calc(100% - 24px);
    height: 32px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
    border: none;
}

body.slabyard-v2 .sy-filters-slider__range:focus {
    outline: none;
}

/* Track: kept invisible — the .sy-filters-slider__track div underneath
   provides the visible bar. */
body.slabyard-v2 .sy-filters-slider__range::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 32px;
}
body.slabyard-v2 .sy-filters-slider__range::-moz-range-track {
    background: transparent;
    border: none;
    height: 32px;
}

/* Thumbs — grabbable, ≥ 20px visible with a padded hit area. */
body.slabyard-v2 .sy-filters-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-bg);
    border: 2px solid var(--color-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    margin-top: 6px; /* center 20px thumb over the 32px runnable-track */
}
body.slabyard-v2 .sy-filters-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-bg);
    border: 2px solid var(--color-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
}

body.slabyard-v2 .sy-filters-slider__range:focus::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
body.slabyard-v2 .sy-filters-slider__range:focus::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Layer the max input above the min input so its thumb wins ties at
   the far-right end of the range. */
body.slabyard-v2 .sy-filters-slider__range--min { z-index: 2; }
body.slabyard-v2 .sy-filters-slider__range--max { z-index: 3; }

body.slabyard-v2 .sy-filters-slider__readouts {
    position: relative;
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

body.slabyard-v2 .sy-filters-slider__readout-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

body.slabyard-v2 .sy-filters-slider__readout-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
}

body.slabyard-v2 .sy-filters-slider__readout {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-sizing: border-box;
    text-align: left;
}

body.slabyard-v2 .sy-filters-slider__readout:focus {
    border-color: var(--color-primary);
    outline: none;
}

body.slabyard-v2 .sy-filters-slider__readout-sep {
    color: var(--color-border-dark);
    font-weight: 700;
    align-self: flex-end;
    padding-bottom: 8px;
}

/* --- Search + Clear buttons — side by side row --- */
body.slabyard-v2 .sy-filters-actions {
    display: flex;
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
    background-color: #f2f2f2;
    padding: 12px;
    gap: 6px;
    flex-direction: row-reverse;
}

body.slabyard-v2 .sy-filters-search-wrap {
    display: flex;
    flex: 0 0 65%;
    padding: 0;
    box-sizing: border-box;
    margin-top: 0;
}

body.slabyard-v2 .sy-filters-clearall-wrap {
    display: flex;
    flex: 0 0 35%;
    padding: 0;
    box-sizing: border-box;
    margin-top: 0;
}

body.slabyard-v2 .sy-filters-search {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-bg);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.2;
    border-radius: 10px;
    text-transform: uppercase;
}

body.slabyard-v2 .sy-filters-search:hover,
body.slabyard-v2 .sy-filters-search:focus {
    background-color: var(--color-text);
    border-color: var(--color-text);
    outline: none;
}

body.slabyard-v2 .sy-filters-clearall {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-primary);
    background-color: var(--color-bg);
    border: 2px solid var(--color-primary);
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.2;
    border-radius: 10px;
    text-transform:uppercase;
}

    body.slabyard-v2 .sy-filters-clearall:hover,
    body.slabyard-v2 .sy-filters-clearall:focus {
        background-color: var(--color-surface);
        border-color: var(--color-text);
        outline: none;
        color: var(--color-text);
    }

/* --- Clearance disclaimer banner (R3.4) --- */
body.slabyard-v2 .sy-banner {
    padding: 12px 16px;
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.4;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-banner--clearance {
    background-color: #FFF7E0;
    border: 1px solid #E0B400;
    color: #6B4A00;
}

body.slabyard-v2 .sy-banner[hidden] {
    display: none;
}

/* --- Results column shell (placeholders for tasks 3.5 / 6.3) --- */
body.slabyard-v2 .sy-results-column {
    min-width: 0;
}

/* --- Sticky page header (heading + mode tabs + share bar) --- */
body.slabyard-v2 .sy-results-sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg, #fff);
}

/* --- Mode tabs (2026-07-15 mockup revision) --------------------------
   "Find Products" / "My Favorites" toggle at the top of the results
   column. Replaces the floating Favorites pill from task 5.1's shell. */
/* Keep Site.Master banner-headline hidden for slabyard-v2 — heading is rendered inline in customer.aspx */
body.slabyard-v2 .banner-headline {
    display: none;
}

/* Inline page heading above mode tabs */
body.slabyard-v2 .sy-page-heading {
    font-family: var(--font-family);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 24px 0 8px;
    text-align: center;
}

/* Mode-tabs: pill toggle group, centered, contained width */
body.slabyard-v2 .sy-mode-tabs {
    display: flex;
    gap: 0;
    margin: 12px auto 20px;
    padding: 0;
    width: fit-content;
    border: 2px solid var(--color-primary);
    border-radius:12px;
    overflow: hidden;
}

body.slabyard-v2 .sy-mode-tabs__btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 32px;
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: none;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.slabyard-v2 .sy-mode-tabs__btn:hover:not(.sy-mode-tabs__btn--active) {
    background-color: var(--color-surface);
    color: var(--color-primary);
}

body.slabyard-v2 .sy-mode-tabs__btn--active {
    background-color: var(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
    cursor: default;
}

body.slabyard-v2 .sy-mode-tabs__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Favorites count badge inside the "My Favorites" tab. */
body.slabyard-v2 .sy-mode-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background-color: var(--color-bg);
    color: var(--color-primary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-mode-tabs__btn--active .sy-mode-tabs__badge {
    background-color: #FFFFFF;
    color: var(--color-primary);
}

body.slabyard-v2 .sy-mode-tabs__badge[hidden] {
    display: none;
}

/* Mode panels — Find Products / My Favorites content containers. */
body.slabyard-v2 .sy-mode-panel[hidden] {
    display: none;
}

/* --- Results header (share/help links, right-aligned) --- */
body.slabyard-v2 .sy-results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 0 12px 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
    background-color: #D7D7D7;
}

div#sy-mode-panel-find {
    padding: 0 20px;
}

/* Big-number result count (2026-07-15 mockup): the count is a headline,
   not a small caption. Number is prominent; the "Product Results" label
   sits alongside in a smaller uppercase style. */
body.slabyard-v2 .sy-result-count {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 4px 0;
    color: var(--color-text);
    text-align: center;
}

body.slabyard-v2 .sy-result-count__number {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}

body.slabyard-v2 .sy-result-count__label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-border-dark);
}

/* Della Terra note (relocated from Material Type filter). */
body.slabyard-v2 .sy-dellaterra-note {
    margin: 4px 0 12px 0;
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

body.slabyard-v2 .sy-dellaterra-note[hidden] {
    display: none;
}

body.slabyard-v2 .sy-dellaterra-note__link {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    margin-left: 4px;
}

body.slabyard-v2 .sy-dellaterra-note__link:hover,
body.slabyard-v2 .sy-dellaterra-note__link:focus {
    text-decoration: none;
}

/* Della Terra promo blocks inside the Material Type filter panel */
body.slabyard-v2 .sy-dt-promos {
    margin-top: 16px;
    padding: 16px;
    background-color: #f2f2f259;
    border-radius: 8px;
    text-align: left;
}

body.slabyard-v2 .sy-dt-promos__heading {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 12px;
}

body.slabyard-v2 .sy-dt-promo {
    margin-bottom: 10px;
}

body.slabyard-v2 .sy-dt-promo:last-child {
    margin-bottom: 0;
}

body.slabyard-v2 .sy-dt-promo__title {
    display: block;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px;
    text-decoration: underline;
}

body.slabyard-v2 .sy-dt-promo__title:hover,
body.slabyard-v2 .sy-dt-promo__title:focus {
    color: var(--color-primary-dark, #0a3060);
}

body.slabyard-v2 .sy-dt-promo__body {
    font-family: var(--font-family);
    font-size: 9px;
    color: var(--color-text);
    margin: 0 0 4px;
    line-height: 1.5;
    font-weight: 500;
}

/* Photo disclaimer — italic grey, small, above the results grid. */
body.slabyard-v2 .sy-photo-disclaimer {
    margin: 0 0 16px 0;
    padding: 8px 12px;
    color: var(--color-border-dark);
    font-size: 11px;
    font-style: italic;
    text-align: center;
    line-height: 1.4;
}

/* Share / Help — now text links (not buttons) per the mockup. */
body.slabyard-v2 .sy-share {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

body.slabyard-v2 .sy-share__link {
    min-height: 32px;
    padding: 6px 8px;
    background: transparent;
    color: var(--color-text);
    border: none;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}

    body.slabyard-v2 .sy-share__link:hover,
    body.slabyard-v2 .sy-share__link:focus-visible {
        color: var(--color-text);
        text-decoration: underline;
        outline: none;
    }

body.slabyard-v2 .sy-share__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Backwards-compat — the old .sy-share__btn class is no longer emitted
   by customer.aspx but kept alive as a passthrough alias so any lingering
   markup in shared partials doesn't break. */
body.slabyard-v2 .sy-share__btn {
    /* Fallback shape only. New markup uses .sy-share__link. */
    min-height: 44px;
    padding: 12px 16px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-dark);
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.2;
}

body.slabyard-v2 .sy-share__btn:hover,
body.slabyard-v2 .sy-share__btn:focus {
    background-color: var(--color-surface);
    border-color: var(--color-text);
    outline: none;
}

body.slabyard-v2 .sy-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: var(--color-text);
    font-size: 14px;
}

body.slabyard-v2 .sy-loading[hidden] {
    display: none;
}

body.slabyard-v2 .sy-loading::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: il-spin 0.8s linear infinite;
}

body.slabyard-v2 .sy-validation {
    color: #B00020;
    font-size: var(--font-size-base);
/*    padding: 4px 0;
    min-height: 18px;*/
}

/* The main .sy-results grid rules live in the "Results grid + pagination"
   block below (task 3.5). This margin-only rule keeps a tidy gap under the
   grid before the pagination nav. */
body.slabyard-v2 .sy-results {
    margin: 0 0 16px 0;
}

/* Empty state (R4.4) — Results renders this when data is empty. */
body.slabyard-v2 .sy-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-border-dark);
}

body.slabyard-v2 .sy-empty__title {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

body.slabyard-v2 .sy-empty__hint {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.4;
}

/* --- Results grid + pagination (task 3.5) --------------------------- */
/* Bundle-card grid, one card per bundle. Mobile-first per CLAUDE.md §6.  */
body.slabyard-v2 .sy-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    body.slabyard-v2 .sy-results {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    body.slabyard-v2 .sy-results {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1600px) {
    body.slabyard-v2 .sy-results {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The grid can also legitimately hold an empty-state block, which spans
   the full row rather than living in a single grid track. */
body.slabyard-v2 .sy-results .sy-empty {
    grid-column: 1 / -1;
}

/* Card container. Square corners per CLAUDE.md §6, subtle elevation. */
body.slabyard-v2 .sy-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    padding: 10px;
    border-radius: 20px;
    background-color: var(--color-surface);
    margin: 10px;
}

/* Image button — strips native <button> chrome so the thumbnail can sit
   flush at the top of the card. Focus ring is drawn inside via outline
   offset so it doesn't collide with the card border. */
body.slabyard-v2 .sy-card__image-btn {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 0; /* Prevents inline-image baseline gap. */
}

body.slabyard-v2 .sy-card__image-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Thumbnail. aspect-ratio is supported in every target browser (2021+);
   no fallback needed. */
body.slabyard-v2 .sy-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: var(--color-surface);
}

/* Skeleton shimmer for card thumbnails while the real src loads.
   TODO(3.6): fold this into a shared .sy-lazy-img when LazyImage extracts. */
body.slabyard-v2 .sy-card__image--placeholder {
    background-color: var(--color-surface);
    background-image: linear-gradient(
        90deg,
        var(--color-surface) 0%,
        var(--color-border) 50%,
        var(--color-surface) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: sy-shimmer 1.4s ease-in-out infinite;
}

@keyframes sy-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

body.slabyard-v2 .sy-card__body {
    display: block;
    padding: 0 12px 6px;
    /* Fav star floats right; give the title a positioning context. */
    position: relative;
    text-align: left;
    font-weight: 400;
}

body.slabyard-v2 .sy-card__title {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    word-break: break-word;
    text-align: left;
    padding: 8px 10px;
}

/* Favorites star toggle (R5.3). Task 5.1 will wire the persistence side;
   the DOM shape and aria-pressed contract are already correct. */
body.slabyard-v2 .sy-card__fav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    width: 100%;
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text);
    text-align: center;
}

body.slabyard-v2 .sy-card__fav:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

body.slabyard-v2 .sy-card__fav[aria-pressed="true"] {
    color: var(--color-primary);
}

/* Material type — shown above the metadata list, bold and unlabelled. Kept
   out of `.sy-card__meta` because that dl is a label/value grid and this has
   no label. */
body.slabyard-v2 .sy-card__material {
    margin: 0 0 6px 0;
    padding: 2px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-align: left;
    word-break: break-word;
}

/* Metadata list — two-column dl (label / value). Task 9.4 flattened the
   per-row wrapper <div> (formerly `.sy-card__meta-row`) since CSS grid on
   the <dl> itself pairs <dt> and <dd> naturally. Cuts ~5 nodes per card
   (~120 nodes at page-size 24). Long values wrap under the value column,
   not the label, via the max-content sizing on the first column. */
body.slabyard-v2 .sy-card__meta {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 0;
    column-gap: 16px;
    text-align: left;
    align-items: center;
}

body.slabyard-v2 .sy-card__meta dt::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

    body.slabyard-v2 .sy-card__meta dt {
        margin: 0;
        font-size: 11px;
        font-weight: 500;
        color: var(--color-primary);
        letter-spacing: 0.02em;
        padding: 2px 0;
    }

    body.slabyard-v2 .sy-card__meta dt:last-of-type {
        border-bottom: none;

    }

    body.slabyard-v2 .sy-card__meta dd {
        margin: 0;
        font-size: var(--font-size-base);
        color: var(--color-text);
        word-break: break-word;
        padding: 2px 0;
        font-size: 11px;
    }

body.slabyard-v2 .sy-card__meta dd:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

/* --- Pagination controls (R5.8) ------------------------------------- */
body.slabyard-v2 .sy-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: var(--color-bg);
  /*  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);*/
}

body.slabyard-v2 .sy-pagination__page,
body.slabyard-v2 .sy-pagination__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    font-weight:500;
}

body.slabyard-v2 .sy-pagination__page:hover:not(.sy-pagination__page--current),
body.slabyard-v2 .sy-pagination__step:hover:not([disabled]) {
    background-color: var(--color-surface);
    border-color: var(--color-border-dark);
}

body.slabyard-v2 .sy-pagination__page:focus-visible,
body.slabyard-v2 .sy-pagination__step:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

body.slabyard-v2 .sy-pagination__page--current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
    cursor: default;
    font-weight: 700;
}

body.slabyard-v2 .sy-pagination__step[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Task 9.1 — small gap between the decorative arrow glyph and the word
   inside prev/next buttons. Explicit space so screen readers ignore the
   arrow (aria-hidden) while sighted users see arrow + word. */
body.slabyard-v2 .sy-pagination__step > span + span {
    margin-left: 4px;
}

body.slabyard-v2 .sy-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 4px;
    background: none;
    border: 1px solid transparent;
    color: var(--color-border-dark);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

body.slabyard-v2 .sy-pagination__ellipsis:hover,
body.slabyard-v2 .sy-pagination__ellipsis:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-border);
    border-radius: 2px;
    outline: none;
}

body.slabyard-v2 .sy-pagination__jump {
    display: inline-flex;
    width: 56px;
    min-height: 40px;
    padding: 8px 6px;
    background-color: var(--color-bg);
    border: 2px solid var(--color-primary);
    border-radius: 2px;
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    text-align: center;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

body.slabyard-v2 .sy-pagination__jump::-webkit-inner-spin-button,
body.slabyard-v2 .sy-pagination__jump::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Welcome interstitial (2026-07-15 mockup revision) ---
   Modal dialog fired once per successful login for Customer/Guest users.
   The old task-3.7 corner panel was replaced by this centered dialog.
   .sy-welcome is now the CONTENT container inside <dialog id="sy-welcome-dialog">.

   Backwards-compat: if any legacy caller still sets `<div id="sy-welcome" hidden>`
   the empty div renders nothing — no rule targets bare .sy-welcome outside
   the dialog. */
body.slabyard-v2 .sy-dialog--welcome {
    padding: 0;
    border: none;
    background-color: transparent;
    max-width: 640px;
    width: 90vw;
    max-height: 90vh;
    overflow: visible;
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

body.slabyard-v2 .sy-dialog--welcome::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

    body.slabyard-v2 .sy-dialog--welcome .sy-welcome {
        padding: 32px 40px;
        background-color: var(--color-bg);
/*        border: 1px solid var(--color-border);*/
        text-align: center;
        max-height: 90vh;
        overflow-y: auto;
        box-sizing: border-box;
        border-radius: 25px;
    }

body.slabyard-v2 .sy-welcome__eyebrow {
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--color-border-dark);
    text-transform: uppercase;
}

body.slabyard-v2 .sy-welcome__heading {
    margin: 0 0 24px 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text);
    line-height: 1.2;
    text-transform: uppercase;
}

body.slabyard-v2 .sy-welcome__section {
    margin: 24px 0 16px 0;
}

body.slabyard-v2 .sy-welcome__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    margin: 0 auto 8px;
    color: var(--color-primary);
}

body.slabyard-v2 .sy-welcome__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

body.slabyard-v2 .sy-welcome__section-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text);
    text-transform: uppercase;
}

body.slabyard-v2 .sy-welcome__section-title--footer {
    margin-top: 24px;
}

body.slabyard-v2 .sy-welcome__body {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: var(--color-text);
    line-height: 1.6;
    text-align: center;
}

body.slabyard-v2 .sy-welcome__body--strong {
    margin-top: 20px;
    font-weight: 700;
}

body.slabyard-v2 .sy-welcome__body--accent {
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 24px;
}

body.slabyard-v2 .sy-welcome__link {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

body.slabyard-v2 .sy-welcome__link:hover,
body.slabyard-v2 .sy-welcome__link:focus {
    text-decoration: none;
    outline: none;
}

body.slabyard-v2 .sy-welcome__cta {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 14px 24px;
    margin: 16px 0 8px 0;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.2;
    border-radius: 10px;
}

body.slabyard-v2 .sy-welcome__cta:hover,
body.slabyard-v2 .sy-welcome__cta:focus {
    background-color: #003a6d;
    border-color: #003a6d;
    outline: none;
}

body.slabyard-v2 .sy-welcome__cta:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Phone: reduce padding so the dialog fits comfortably. */
@media (max-width: 767px) {
    body.slabyard-v2 .sy-dialog--welcome .sy-welcome {
        padding: 24px 20px;
    }
    body.slabyard-v2 .sy-welcome__heading {
        font-size: 18px;
    }
}

/* --- Dialog placeholders (later tasks) --- */
body.slabyard-v2 .sy-dialog {
    padding: 0;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    max-width: 90vw;
    /* width: 480px;*/
    box-sizing: border-box;
    border-radius: 25px;
    max-width: min(90vw, max(30vw, 600px));
}

body.slabyard-v2 .sy-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

body.slabyard-v2 .sy-dialog--email {
    /* See "Email modal" section below for the full ruleset. */
    width: 90vw;
    max-width: 560px;
    max-height: 90vh;
    padding: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-dark);
    overflow: hidden;
}

body.slabyard-v2 .sy-dialog--login {
    /* Task 8.x refines */
}

/* ── Della Terra modal ─────────────────────────────────────── */
body.slabyard-v2 .sy-dialog--dellaterra {
    width: min(90vw, 860px);
    max-width: min(90vw, 860px);
    max-height: 90vh;
    padding: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-dark);
    overflow: hidden;
}

body.slabyard-v2 .sy-dialog--dellaterra .sy-dialog__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text);
    z-index: 1;
    padding: 4px 8px;
}

body.slabyard-v2 .sy-dialog--dellaterra .sy-dialog__close:hover {
    color: var(--color-primary);
}

/* ── Copy-link confirmation modal (R8.5) ─────────────────────
   Opened by SlabYardV2.Share after a Copy Link click. Sized small — it's an
   acknowledgement, not a workspace. Stacks above #sy-email-dialog when the
   trigger was one of that dialog's two copy links. */
body.slabyard-v2 .sy-dialog--copied {
    width: min(92vw, 440px);
    max-width: min(92vw, 440px);
    padding: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-dark);
}

body.slabyard-v2 .sy-dialog--copied::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

body.slabyard-v2 .sy-copied {
    position: relative;
    padding: 28px 24px 24px 24px;
}

body.slabyard-v2 .sy-dialog--copied .sy-dialog__close {
    position: absolute;
    top: 4px;
    right: 10px;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text);
    padding: 4px 8px;
}

body.slabyard-v2 .sy-dialog--copied .sy-dialog__close:hover {
    color: var(--color-primary);
}

body.slabyard-v2 .sy-copied__heading {
    margin: 0 0 8px 0;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

body.slabyard-v2 .sy-copied__lead {
    margin: 0 0 14px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text);
}

body.slabyard-v2 .sy-copied__url {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin: 0 0 14px 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* Recipient instruction — the reason this dialog exists rather than a toast,
   so it gets the emphasized treatment. */
body.slabyard-v2 .sy-copied__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 18px 0;
    padding: 10px 12px;
    background-color: var(--color-surface);
    border-left: 3px solid var(--color-primary);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-text);
}

body.slabyard-v2 .sy-copied__note-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

body.slabyard-v2 .sy-copied__actions {
    display: flex;
    justify-content: center;
}

body.slabyard-v2 .sy-copied__ok {
    min-height: 40px;
    padding: 10px 28px;
    background-color: var(--color-primary);
    color: var(--color-bg);
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-copied__ok:hover,
body.slabyard-v2 .sy-copied__ok:focus-visible {
    background-color: #003B6E;
    border-color: #003B6E;
    outline: none;
}

/* ── Help walkthrough modal ─────────────────────────────────── */
body.slabyard-v2 .sy-dialog--help {
    width: min(90vw, 560px);
    max-width: min(90vw, 560px);
    max-height: 90vh;
    padding: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 25px;
    overflow: hidden;
}

body.slabyard-v2 .sy-dialog--help[open] {
    display: flex;
    flex-direction: column;
}

body.slabyard-v2 .sy-help__slide[hidden] {
    display: none;
}

body.slabyard-v2 .sy-dialog--help::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

body.slabyard-v2 .sy-help__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    padding: 4px 8px;
    z-index: 1;
}

body.slabyard-v2 .sy-help__close:hover {
    color: var(--color-primary);
}

body.slabyard-v2 .sy-help__slides {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 48px 40px 24px;
    text-align: center;
}

body.slabyard-v2 .sy-help__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.slabyard-v2 .sy-help__title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
}

body.slabyard-v2 .sy-help__subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.5;
    max-width: 380px;
}

body.slabyard-v2 .sy-help__img-wrap {
    width: 100%;
    margin: 0 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-surface);
}

body.slabyard-v2 .sy-help__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 350px;
    margin: 0 auto;
}

body.slabyard-v2 .sy-help__caption {
    margin: 0;
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.5;
}

body.slabyard-v2 .sy-help__divider {
    margin: 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

body.slabyard-v2 .sy-help__footer {
    padding: 20px 40px 24px;
    text-align: center;
    flex: 0 0 auto;
}

body.slabyard-v2 .sy-help__nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
}

body.slabyard-v2 .sy-help__btn {
    min-width: 120px;
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-family);
    letter-spacing: 0.08em;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

body.slabyard-v2 .sy-help__btn--outline {
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

body.slabyard-v2 .sy-help__btn--outline:hover,
body.slabyard-v2 .sy-help__btn--outline:focus {
    background-color: var(--color-surface);
    outline: none;
}

body.slabyard-v2 .sy-help__btn--filled {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
}

body.slabyard-v2 .sy-help__btn--filled:hover,
body.slabyard-v2 .sy-help__btn--filled:focus {
    background-color: #003a6d;
    border-color: #003a6d;
    outline: none;
}

body.slabyard-v2 .sy-help__counter {
    margin: 0;
    font-size: 12px;
    color: var(--color-text);
}

@media (max-width: 767px) {
    body.slabyard-v2 .sy-help__slides {
        padding: 44px 20px 16px;
    }
    body.slabyard-v2 .sy-help__footer {
        padding: 16px 20px 20px;
    }
    body.slabyard-v2 .sy-help__title {
        font-size: 17px;
    }
}

body.slabyard-v2 .sy-dellaterra-modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-y: auto;
    max-height: 90vh;
}

body.slabyard-v2 .sy-dellaterra-modal__col {
    display: flex;
    flex-direction: column;
}

body.slabyard-v2 .sy-dellaterra-modal__col + .sy-dellaterra-modal__col {
    border-left: 1px solid var(--color-border);
}

body.slabyard-v2 .sy-dellaterra-modal__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

body.slabyard-v2 .sy-dellaterra-modal__body {
    padding: 20px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.slabyard-v2 .sy-dellaterra-modal__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 10px;
}

body.slabyard-v2 .sy-dellaterra-modal__desc {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 0 20px;
    flex: 1;
}

body.slabyard-v2 .sy-dellaterra-modal__cta {
    display: block;
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 14px 16px;
    border-radius: 10px;
    text-decoration: none;
    margin-top: auto;
}

body.slabyard-v2 .sy-dellaterra-modal__cta:hover,
body.slabyard-v2 .sy-dellaterra-modal__cta:focus {
    background-color: #003a6d;
}

@media (max-width: 560px) {
    body.slabyard-v2 .sy-dellaterra-modal {
        grid-template-columns: 1fr;
    }
    body.slabyard-v2 .sy-dellaterra-modal__col + .sy-dellaterra-modal__col {
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
}

/* ============================================================
   Detail dialog + slab-image lightbox (task 4.2)
   ============================================================ */

/* Outer detail dialog — near-full viewport iframe of customer-popup.aspx. */
body.slabyard-v2 .sy-dialog--detail {
    width: 90vw;
    max-width: 700px;
    height: 90vh;
    max-height: 90vh;
    padding: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-dark);
    overflow: visible;
    border-radius: 12px;
}

body.slabyard-v2 .sy-detail__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: var(--color-bg);
    border-radius: 12px;
}

body.slabyard-v2 .sy-detail__error {
    padding: 24px 20px;
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

/* ============================================================
   Customer popup (customer-popup.aspx) — cp- component styles.
   Loaded inside the sy-detail__frame iframe; body carries
   `slabyard-v2 slabyard-v2--embed` so all vars are available.
   ============================================================ */
html body.slabyard-v2.slabyard-v2--embed {
    font-size: 16px;
}
html body.slabyard-v2.slabyard-v2--embed .cp-page {
    font-size: 16px;
}

body.slabyard-v2--embed .cp-page {
    font-family: var(--font-family);
    color: var(--color-text);
    background-color: var(--color-bg);
    text-align: left;
}

body.slabyard-v2--embed .cp-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

body.slabyard-v2--embed .cp-image {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    line-height: 0;
    position: relative;
}

body.slabyard-v2--embed .cp-image__zoom-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 26px;
    line-height: 37px;
    text-align: center;
    pointer-events: none;
    user-select: none;
    font-weight: 300;
    letter-spacing: 0;
}

body.slabyard-v2--embed .cp-image__img {
    display: block;
    width: 100%;
  /*  max-height: 50vh;*/
    object-fit: cover;
    object-position: center;
    cursor: zoom-in;
}

body.slabyard-v2--embed .cp-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.slabyard-v2--embed .cp-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.slabyard-v2--embed .cp-product {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text);
    text-transform: uppercase;
}

body.slabyard-v2--embed .cp-material {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

body.slabyard-v2--embed .cp-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 14px;
    color: var(--color-text);
    margin-top: 4px;
}

/* Action buttons — stacked, full-width */
body.slabyard-v2--embed .cp-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.slabyard-v2--embed .cp-btn {
    display: block;
    width: 100%;
    max-width: 340px;
    min-height: 48px;
    padding: 12px 16px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    transition: background-color 0.15s, color 0.15s;
}

body.slabyard-v2--embed .cp-btn--outline {
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

body.slabyard-v2--embed .cp-btn--outline:hover,
body.slabyard-v2--embed .cp-btn--outline:focus {
    background-color: var(--color-primary);
    color: #fff;
}

body.slabyard-v2--embed .cp-btn--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
}

body.slabyard-v2--embed .cp-btn--primary:hover,
body.slabyard-v2--embed .cp-btn--primary:focus {
    background-color: #003a6e;
    border-color: #003a6e;
}

body.slabyard-v2--embed .cp-fav-feedback {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2a7a2a;
    margin-top: -4px;
}

/* Slab table */
body.slabyard-v2--embed .cp-slabs__select-all {
    background: none;
    border: none;
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: 14px;
    cursor: pointer;
    padding: 0 0 8px 0;
    text-decoration: underline;
}

body.slabyard-v2--embed .cp-slabs__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

body.slabyard-v2--embed .cp-slabs__table th,
body.slabyard-v2--embed .cp-slabs__table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

body.slabyard-v2--embed .cp-slabs__table th {
    font-weight: 700;
    color: var(--color-text);
}

/* Per-slab select column — narrow, centered, with a visible box so the
   individual-slab selection reads as an affordance rather than decoration. */
body.slabyard-v2--embed .cp-slabs__table th:first-child,
body.slabyard-v2--embed .cp-slabs__table td:first-child {
    width: 36px;
    text-align: center;
    padding-right: 0;
}

body.slabyard-v2--embed .cp-slab-select,
body.slabyard-v2--embed #cp-select-all-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

body.slabyard-v2--embed .cp-slabs__table tbody tr:hover {
    background-color: var(--color-surface);
}

body.slabyard-v2--embed .cp-slabs__guest-notice {
    font-size: 14px;
    color: var(--color-border-dark);
    text-align: center;
    padding: 8px 0;
}

/* Photo disclaimer */
body.slabyard-v2--embed .cp-image__caption {
    font-size: 12px;
    color: var(--color-border-dark);
    line-height: 1.5;
    margin: 0;
}

/* Shared close button used by both detail and lightbox variants. */
body.slabyard-v2 .sy-dialog__close {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-dark);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 50px;
    line-height: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    z-index: 2;
    border: none;
}

    body.slabyard-v2 .sy-dialog__close:hover,
    body.slabyard-v2 .sy-dialog__close:focus {
        background-color: var(--color-bg);
        border-color: var(--color-bg);
        outline: none;
    }

/* Slab-image lightbox — behavioral sibling of .il-lightbox with prev/next. */
body.slabyard-v2 .sy-dialog--lightbox {
    padding: 0;
    border: none;
    background-color: var(--color-bg);
    max-width: 95vw;
    max-height: 95vh;
/*    width: 95vw;*/
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

body.slabyard-v2 .sy-dialog--lightbox::backdrop {
    background-color: rgba(0, 0, 0, 0.85);
}

body.slabyard-v2 .sy-lightbox__img {
    display: block;
    max-width: 92vw;
    max-height: calc(92vh - 80px);
    width: auto;
    height: auto;
    margin: 0 auto;
    background-color: var(--color-surface);
    background-color:white;
    object-fit: contain;
}

body.slabyard-v2 .sy-lightbox__caption {
    padding: 12px 16px;
    color: var(--color-text);
    font-size: var(--font-size-base);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    font-weight: 600;
    text-align: center;
}

body.slabyard-v2 .sy-lightbox__prev,
body.slabyard-v2 .sy-lightbox__next,
body.slabyard-v2 .sy-lightbox__close {
    position: absolute;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-dark);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 32px;
    line-height: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    z-index: 2;
}

body.slabyard-v2 .sy-lightbox__prev:hover,
body.slabyard-v2 .sy-lightbox__prev:focus,
body.slabyard-v2 .sy-lightbox__next:hover,
body.slabyard-v2 .sy-lightbox__next:focus,
body.slabyard-v2 .sy-lightbox__close:hover,
body.slabyard-v2 .sy-lightbox__close:focus {
    background-color: var(--color-surface);
    border-color: var(--color-text);
    outline: none;
}

body.slabyard-v2 .sy-lightbox__close {
    top: 8px;
    right: 8px;
    font-size: 40px;
}

body.slabyard-v2 .sy-lightbox__prev {
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}

body.slabyard-v2 .sy-lightbox__next {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

body.slabyard-v2 .sy-lightbox__prev[disabled],
body.slabyard-v2 .sy-lightbox__next[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Tablet — lightbox fills 95% of screen. */
@media (max-width: 1024px) {
    body.slabyard-v2 .sy-dialog--lightbox {
        width: 95vw;
        max-width: 95vw;
        max-height: 95vh;
    }

    body.slabyard-v2 .sy-lightbox__img {
        width: 100%;
        max-width: 100%;
        max-height: calc(95vh - 80px);
        object-fit: contain;
    }
}

/* Mobile — full-bleed dialogs. */
@media (max-width: 767px) {
    body.slabyard-v2 .sy-dialog--detail {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        max-width: 100vw;
    }

    body.slabyard-v2 .sy-dialog--lightbox {
        width: 95vw;
        max-width: 95vw;
        max-height: 95vh;
    }

    body.slabyard-v2 .sy-lightbox__img {
        width: 100%;
        max-width: 100%;
        max-height: calc(95vh - 80px);
        object-fit: contain;
    }
}

/* ============================================================
   Favorites tab (task 5.1) — mounted into #sy-favorites-tab.
   R7.1 anchors this to the top-nav conceptually; the mount lives
   inside .sy-results-column, so we position it near the results
   header via CSS. Task 5.2 populates the panel body.
   ============================================================ */

/* Host container — now inline inside #sy-mode-panel-favorites, flows
   with the document. */
body.slabyard-v2 .sy-favorites-tab {
    display: block;
    padding: 0 20px;
}

/* Trigger button — hidden; the mode tab now handles open/close. */
body.slabyard-v2 .sy-favorites__toggle {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 12px;
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-favorites__toggle:hover,
body.slabyard-v2 .sy-favorites__toggle:focus-visible {
    background-color: var(--color-surface);
    border-color: var(--color-border-dark);
    outline: none;
}

body.slabyard-v2 .sy-favorites__label {
    display: inline-block;
}

/* Count badge — hidden entirely at 0 via [hidden]; visible pill above. */
body.slabyard-v2 .sy-favorites__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-favorites__badge[hidden] {
    display: none;
}

/* Panel — now a full-width inline container inside the mode panel. */
body.slabyard-v2 .sy-favorites__panel {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-favorites__panel[hidden] {
    display: none;
}

body.slabyard-v2 .sy-favorites__empty-hint,
body.slabyard-v2 .sy-favorites__empty {
    margin: 0;
    color: var(--color-border-dark);
    font-size: 12px;
    line-height: 1.4;
}

/* ============================================================
   Favorites panel — task 5.2
   Header row (Select all + bulk actions), then per-bundle groups
   (image, meta, slab list). Scoped under body.slabyard-v2.
   ============================================================ */

body.slabyard-v2 .sy-fav-panel__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin: 0 0 16px 0;
    position: sticky;
    top: var(--sy-sticky-h, 0px);
    z-index: 50;
    background-color: var(--color-bg, #fff);
    border-bottom: 1px solid var(--color-border);
}

body.slabyard-v2 .sy-fav-panel__btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    max-width: 960px;
}

body.slabyard-v2 .sy-fav-panel__hint {
    margin: 0 0 5px 0;
    font-size: .875rem;
    color: var(--color-text);
    text-align: center;
    font-weight: 500;
    line-height: 1.5;
    background-color: #eaf1ff;
    border-left: 4px solid #006dd5;
    padding: 9px 12px;
    border-radius: 0 4px 4px 0;
    letter-spacing:.03rem;
}

body.slabyard-v2 .sy-fav-panel__hint-icon {
    color: var(--color-primary);
    font-weight: 700;
/*    text-transform: uppercase;*/
}

body.slabyard-v2 .sy-fav-icon-envelope {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    flex-shrink: 0;
}

body.slabyard-v2 .sy-fav-panel__select-all-btn {
    display: block;
    flex: 1 1 200px;
    min-height: 44px;
    padding: 10px 24px;
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}

body.slabyard-v2 .sy-fav-panel__select-all-btn:hover:not(:disabled),
body.slabyard-v2 .sy-fav-panel__select-all-btn:focus-visible:not(:disabled) {
    background-color: var(--color-surface);
    outline: none;
}

/* Disabled only when the panel has no slabs to select — same treatment as the
   email button so the two read as one control group. */
body.slabyard-v2 .sy-fav-panel__select-all-icon {
    padding-right: 5px;
}

body.slabyard-v2 .sy-fav-panel__select-all-icon--select {
    color: green;
}

body.slabyard-v2 .sy-fav-panel__select-all-icon--unselect {
    color: red;
}

body.slabyard-v2 .sy-fav-panel__select-all-btn:disabled {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-border-dark);
    cursor: default;
}

/* Bulk trigger for the per-slab checkboxes. Solid fill so it reads as the
   primary action next to the outlined "Select all favorites". */
body.slabyard-v2 .sy-fav-panel__email-selected-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 200px;
    min-height: 44px;
    padding: 10px 24px;
    background-color: var(--color-primary);
    color: var(--color-bg);
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-fav-panel__email-selected-btn:hover:not(:disabled),
body.slabyard-v2 .sy-fav-panel__email-selected-btn:focus-visible:not(:disabled) {
    background-color: #003B6E;
    border-color: #003B6E;
    outline: none;
}

body.slabyard-v2 .sy-fav-panel__email-selected-btn:disabled {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-border-dark);
    cursor: default;
}

/* Bundle card grid — mirrors .sy-results responsive breakpoints. */
body.slabyard-v2 .sy-fav-panel__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px 0 0 0;
}

@media (min-width: 768px) {
    body.slabyard-v2 .sy-fav-panel__body {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    body.slabyard-v2 .sy-fav-panel__body {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Bundle group --- */
body.slabyard-v2 .sy-fav-group {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    margin: 0 0 8px 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 10px;
}

body.slabyard-v2 .sy-fav-group__header {
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-areas:
        "sel  sel"
        "img  meta";
    align-items: start;
    gap: 8px;
    padding: 8px;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

body.slabyard-v2 .sy-fav-group__select {
    grid-area: sel;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
}

body.slabyard-v2 .sy-fav-group__image {
    grid-area: img;
    width: 160px;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    display: block;
}

body.slabyard-v2 .sy-fav-group__meta {
    grid-area: meta;
    min-width: 0; /* prevent overflow when product name is long */
}

body.slabyard-v2 .sy-fav-group__name {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px 0;
    line-height: 1.2;
    word-break: break-word;
    text-align: left;
}

body.slabyard-v2 .sy-fav-group__dl {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    row-gap: 2px;
    font-size: 11px;
    line-height: 1.3;
    text-align: left;
}

    body.slabyard-v2 .sy-fav-group__dl dt {
        font-weight: 700;
        color: var(--color-primary);
    }

body.slabyard-v2 .sy-fav-group__dl dd {
    margin: 0;
    color: var(--color-text);
    word-break: break-word;
}

/* --- Slab list --- */
body.slabyard-v2 .sy-fav-group__slabs {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.slabyard-v2 .sy-fav-slab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-top: 1px solid var(--color-border);
}

body.slabyard-v2 .sy-fav-slab:first-child {
    border-top: none;
}

body.slabyard-v2 .sy-fav-slab__select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

/* Per-slab email-selection checkbox. 16px keeps the 44px row tap target
   comfortable on phones without bloating the desktop row. */
body.slabyard-v2 .sy-fav-slab__select-input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

body.slabyard-v2 .sy-fav-slab__meta {
    min-width: 0;
    flex: 1 1 auto;
    word-break: break-word;
    font-weight: 500;
}

body.slabyard-v2 .sy-fav-slab__dim {
    color: var(--color-border-dark);
}

body.slabyard-v2 .sy-fav-slab__email,
body.slabyard-v2 .sy-fav-slab__unfav {
    flex-shrink: 0;
    min-height: 28px;
    padding: 3px 8px;
    background-color: #f8f8f8;
    color: var(--color-primary);
    /* border: 1px solid var(--color-border);*/
    border: none;
    font-family: var(--font-family);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 3px;
}

body.slabyard-v2 .sy-fav-slab__email:hover,
body.slabyard-v2 .sy-fav-slab__email:focus-visible,
body.slabyard-v2 .sy-fav-slab__unfav:hover,
body.slabyard-v2 .sy-fav-slab__unfav:focus-visible {
    background-color: var(--color-surface);
    border-color: var(--color-border-dark);
    outline: none;
}


/* ============================================================
   Favorites sub-tabs (R7.9 — task 5.3)
   Two-tab shell that wraps the task-5.2 current-favorites content
   and adds a "Sent to Arizona Tile" pane for non-guest users.
   ============================================================ */

body.slabyard-v2 .sy-fav-tabs-wrap {
    display: block;
}

body.slabyard-v2 .sy-fav-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 0 16px 0;
    border-bottom: 2px solid var(--color-border);
}

body.slabyard-v2 .sy-fav-tabs__btn {
    min-height: 44px;
    padding: 10px 32px;
    background-color: transparent;
    color: var(--color-text);
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}

body.slabyard-v2 .sy-fav-tabs__btn:hover {
    color: var(--color-primary);
}

body.slabyard-v2 .sy-fav-tabs__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

body.slabyard-v2 .sy-fav-tabs__btn--active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

body.slabyard-v2 .sy-fav-tabs__body {
    display: block;
}

body.slabyard-v2 .sy-fav-tabs__pane[hidden] {
    /* Defensive — [hidden] already implies display:none, but state this
       explicitly to survive any legacy display-override rules. */
    display: none;
}

/* --- Sent list --- */
body.slabyard-v2 .sy-fav-sent__list {
    display: block;
}

body.slabyard-v2 .sy-fav-sent__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    margin: 0 0 8px 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

body.slabyard-v2 .sy-fav-sent__image {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    display: block;
}

body.slabyard-v2 .sy-fav-sent__meta {
    flex: 1 1 auto;
    min-width: 0;
}

body.slabyard-v2 .sy-fav-sent__name {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px 0;
    line-height: 1.2;
    word-break: break-word;
}

/* Reuses the task-5.2 .sy-fav-group__dl grid rule for label/value pairs. */
body.slabyard-v2 .sy-fav-sent__dl {
    /* All layout comes from the shared .sy-fav-group__dl class on the
       same element. Keeping this selector empty documents the intent. */
}

body.slabyard-v2 .sy-fav-sent__view {
    flex-shrink: 0;
    min-height: 40px;
    padding: 6px 12px;
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    align-self: center;
}

body.slabyard-v2 .sy-fav-sent__view:hover,
body.slabyard-v2 .sy-fav-sent__view:focus-visible {
    background-color: var(--color-surface);
    border-color: var(--color-border-dark);
    outline: none;
}

body.slabyard-v2 .sy-fav-sent__loading {
    padding: 8px 0;
    color: var(--color-border-dark);
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

/* --- History-popup dialog (iframes RequestHistory-popup.aspx) --- */
body.slabyard-v2 .sy-dialog--history {
    width: 90vw;
    max-width: 900px;
    height: 80vh;
    max-height: 80vh;
    padding: 0;
    position: relative;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-dark);
}

body.slabyard-v2 .sy-history__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: var(--color-bg);
}

@media (max-width: 767px) {
    body.slabyard-v2 .sy-fav-sent__row {
        flex-wrap: wrap;
    }
    body.slabyard-v2 .sy-fav-sent__view {
        margin-left: auto;
    }
    body.slabyard-v2 .sy-dialog--history {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
    }
}

/* ============================================================
   Toast (task 5.1) — transient status messages for Favorites errors.
   Reused for any 4xx / network fault; auto-dismissed after 4s by JS.
   ============================================================ */
body.slabyard-v2 .sy-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: 90vw;
    padding: 10px 16px;
    background-color: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    pointer-events: none;
}

body.slabyard-v2 .sy-toast[hidden] {
    display: none;
}

/* ============================================================
   Login dialog embed (task 5.1) — iframe of /login/login-options.aspx
   opened when Favorites gates on auth. Task 8.x may refine further.
   ============================================================ */
body.slabyard-v2 .sy-dialog--login {
    width: 90vw;
    max-width: 480px;
    height: 80vh;
    max-height: 640px;
    padding: 0;
    position: relative;
}

body.slabyard-v2 .sy-login__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 767px) {
    body.slabyard-v2 .sy-dialog--login {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
    }
}

/* ============================================================
   Email modal (R8.1 — task 6.1). Shell is tab-ready so task 6.2
   ("Email Arizona Tile") can slot a second tab in without any
   structural change. Task 6.3 (Share Search Results) reuses the
   same dialog via SlabYardV2.Email.open({seed:{…}}).
   ============================================================ */

/* Container inside the <dialog id="sy-email-dialog">. */
body.slabyard-v2 .sy-email {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
    color: var(--color-text);
    box-sizing: border-box;
    max-height: 90vh;
}

/* Header — centered heading + subtitle + close button. */
body.slabyard-v2 .sy-email__header {
    position: relative;
    padding: 20px 48px 16px;
    text-align: center;
    background-color: var(--color-bg);
}

body.slabyard-v2 .sy-email__heading {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: var(--color-text);
    text-transform: uppercase;
}

body.slabyard-v2 .sy-email__subtitle {
    margin: 6px 0 0;
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-text);
}

body.slabyard-v2 .sy-email__copy-link-inline,
body.slabyard-v2 .sy-email__fill-inline {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

/* Full-width Copy Link button — above the tab strip. */
body.slabyard-v2 .sy-email__copy-link-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 16px;
    min-height: 44px;
    padding: 12px 20px;
    background-color: var(--color-primary);
    color: #fff;
    border: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 10px;
}

body.slabyard-v2 .sy-email__copy-link-btn:hover,
body.slabyard-v2 .sy-email__copy-link-btn:focus {
    background-color: #003a6d;
    outline: none;
}

/* Tab strip wrap — label + pill tabs. */
body.slabyard-v2 .sy-email__tabs-wrap {
    padding: 0 20px 16px;
    background-color: var(--color-bg);
}

body.slabyard-v2 .sy-email__tabs-label {
    margin: 0 0 6px;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    text-align: left;
}

/* Pill/segmented tab strip. */
body.slabyard-v2 .sy-email__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--color-bg);
    border-radius: 10px;
}

body.slabyard-v2 .sy-email__tab {
    flex: 1 1 0;
    min-height: 44px;
    padding: 10px 12px;
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: 0;
    border-right: 2px solid var(--color-primary);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    box-sizing: border-box;
    text-transform: uppercase;
}

body.slabyard-v2 .sy-email__tab:last-child {
    border-right: 0;
}

body.slabyard-v2 .sy-email__tab:hover,
body.slabyard-v2 .sy-email__tab:focus {
    background-color: var(--color-surface);
    outline: none;
}

body.slabyard-v2 .sy-email__tab--active {
    background-color: var(--color-primary) !important;
    color: #fff;
    font-weight: 700;
}

/* Body — hosts one or more <section role="tabpanel"> panes. */
body.slabyard-v2 .sy-email__body {
    padding: 16px 20px 5px;
    overflow-y: auto;
    flex: 1 1 auto;
    background-color: var(--color-bg);
}

body.slabyard-v2 .sy-email__pane[hidden] {
    display: none;
}

/* Field rows. */
body.slabyard-v2 .sy-email__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

body.slabyard-v2 .sy-email__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    body.slabyard-v2 .sy-email__field label {
        font-size: var(--font-size-base);
        font-weight: 700;
        line-height: 1.2;
        color: var(--color-text);
        text-align: left;
    }

body.slabyard-v2 .sy-email__req {
    color: #B00020;
    font-weight: 400;
    font-size: 12px;
}

body.slabyard-v2 .sy-email__field input,
body.slabyard-v2 .sy-email__field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-dark);
    line-height: 1.3;
}

body.slabyard-v2 .sy-email__field textarea {
    resize: vertical;
    min-height: 96px;
}

body.slabyard-v2 .sy-email__field input:focus,
body.slabyard-v2 .sy-email__field textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    border-color: var(--color-primary);
}

body.slabyard-v2 .sy-email__hint {
    margin: 0;
    font-size: 11px;
    color: var(--color-border-dark);
    line-height: 1.3;
    text-align: left;
}

/* Email Arizona Tile — Expedite checkbox row. */
body.slabyard-v2 .sy-email__field--checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
body.slabyard-v2 .sy-email__field--checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
body.slabyard-v2 .sy-email__field--checkbox label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    margin: 0;
    padding: 0;
}

/* Email Arizona Tile — inline notes inside the form grid. */
body.slabyard-v2 .sy-email__note {
    margin: 0;
    font-size: 11px;
    color: var(--color-border-dark);
    line-height: 1.4;
    text-align: left;
}
body.slabyard-v2 .sy-email__note--required {
    color: var(--color-red, #c8102e);
    font-weight: 600;
}

/* Task 6.3 — Share Search Results preview link. Read-only anchor showing
   the URL that will be embedded in the outgoing email. Word-break so long
   GUIDs don't overflow the modal on phone widths. */
body.slabyard-v2 .sy-email__share-preview {
    display: block;
    padding: 8px 12px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    word-break: break-all;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.4;
}

body.slabyard-v2 .sy-email__share-preview:hover,
body.slabyard-v2 .sy-email__share-preview:focus {
    text-decoration: underline;
    outline: none;
}

body.slabyard-v2 .sy-email__error {
    min-height: 1em;
    font-size: 11px;
    line-height: 1.3;
    color: #B00020;
}

body.slabyard-v2 .sy-email__error:empty {
    display: none;
}

/* Actions row — full-width submit button. */
body.slabyard-v2 .sy-email__actions {
    margin-top: 8px;
}

body.slabyard-v2 .sy-email__submit {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 20px;
    background-color: var(--color-primary);
    color: #fff;
    border: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 10px;
}

body.slabyard-v2 .sy-email__submit:hover,
body.slabyard-v2 .sy-email__submit:focus {
    background-color: #003a6d;
    outline: none;
}

body.slabyard-v2 .sy-email__submit[disabled] {
    opacity: 0.6;
    cursor: wait;
}

body.slabyard-v2 .sy-email__cancel {
    background-color: var(--color-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    min-height: 44px;
    min-width: 88px;
    padding: 10px 20px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-email__cancel:hover,
body.slabyard-v2 .sy-email__cancel:focus {
    background-color: var(--color-surface);
    outline: none;
}

/* Footer notes below the form. */
body.slabyard-v2 .sy-email__notes {
    margin: 0;
    padding: 12px 20px 20px;
    font-size: 11px;
    color: var(--color-border-dark);
    line-height: 1.5;
    text-align: left;
}

/* Live status region — shared across tabs. */
body.slabyard-v2 .sy-email__status {
    padding: 8px 20px 16px;
    font-size: var(--font-size-base);
    line-height: 1.3;
    color: var(--color-text);
    min-height: 1em;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-email__status:empty {
    padding: 0;
    min-height: 0;
}

body.slabyard-v2 .sy-email__status--error {
    color: #B00020;
    font-weight: 500;
}

body.slabyard-v2 .sy-email__status--success {
    color: #1B7A2F;
    font-weight: 500;
}

/* Phone — take the full viewport. */
@media (max-width: 767px) {
    body.slabyard-v2 .sy-dialog--email {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
    }
    body.slabyard-v2 .sy-email {
        max-height: 100vh;
        height: 100%;
    }
    body.slabyard-v2 .sy-email__header {
        padding: 16px 48px 12px;
    }
    body.slabyard-v2 .sy-email__copy-link-btn {
        width: calc(100% - 32px);
        margin-left: 16px;
        margin-right: 16px;
    }
    body.slabyard-v2 .sy-email__tabs-wrap {
        padding: 0 16px 12px;
    }
    body.slabyard-v2 .sy-email__body {
        padding: 12px 16px;
    }
    body.slabyard-v2 .sy-email__status {
        padding: 8px 16px 12px;
    }
    body.slabyard-v2 .sy-email__notes {
        padding: 6px 16px 12px;
    }
}

/* Task 6.2 — Email Arizona Tile tab: 2-col grid on desktop for the compact
   scalar fields (Company Name / Account Number, Date Required / Purchase
   Order, Project Name / Builder). Subject, CC, Comments, and the actions row
   opt into full-width with `.sy-email__field--full`. Phone falls back to the
   base flex-column layout, so no phone-specific override is needed. */
@media (min-width: 768px) {
    body.slabyard-v2 .sy-email__form[data-tab="tobranch"] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 12px;
    }
    body.slabyard-v2 .sy-email__form[data-tab="tobranch"] .sy-email__field--full {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   Task 9.2 — Touch-target audit (R12.5).
   Every primary interactive element must have a ≥ 44×44 px hit
   area on phone widths. Desktop keeps its compact density —
   these overrides fire only below 768px. Elements already at
   44px unconditionally (search button, dialog close, clear-all,
   card fav star, filter checkbox labels, lightbox controls,
   welcome dismiss, share buttons) are unchanged.
   ============================================================ */
@media (max-width: 767px) {
    /* Length/Height dual-slider — the invisible <input type="range">
       is the actual hit surface; on phone it should be at least 44px
       tall so tapping the thumb is reliable. Track height stays 4px
       via `.sy-filters-slider__track`; only the input surface grows.
       The visible thumb glyph stays 20px, but the effective hit
       target is now the input's full 44px band. */
    body.slabyard-v2 .sy-filters-slider {
        min-height: 80px; /* thumbs + readouts fit; extra room for taps */
    }
    body.slabyard-v2 .sy-filters-slider__range {
        top: 4px;
        height: 44px;
    }
    body.slabyard-v2 .sy-filters-slider__range::-webkit-slider-runnable-track {
        height: 44px;
    }
    body.slabyard-v2 .sy-filters-slider__range::-moz-range-track {
        height: 44px;
    }
    body.slabyard-v2 .sy-filters-slider__range::-webkit-slider-thumb {
        /* Recenter the visible 20px thumb over the taller runnable-track. */
        margin-top: 12px;
    }
    body.slabyard-v2 .sy-filters-slider__readouts {
        margin-top: 42px;
    }

    /* Pagination — bump both page-number buttons and Prev/Next to 44×44. */
    body.slabyard-v2 .sy-pagination__page,
    body.slabyard-v2 .sy-pagination__step {
        min-width: 44px;
        min-height: 44px;
    }
    body.slabyard-v2 .sy-pagination__ellipsis {
        min-height: 44px;
    }

    /* Favorites panel — per-slab buttons tap-safe on phone. */
    body.slabyard-v2 .sy-fav-slab__email,
    body.slabyard-v2 .sy-fav-slab__unfav {
        min-height: 44px;
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Favorites Sent tab — "View" button. */
    body.slabyard-v2 .sy-fav-sent__view {
        min-height: 44px;
        padding: 8px 14px;
    }

    /* Card fav — ensure tap target is at least 44px tall on phone. */
    body.slabyard-v2 .sy-card__fav {
        min-height: 44px;
    }
}

/* ============================================================
   Mobile filter sheet — portrait phone only (max-width: 767px)
   ============================================================ */

/* Filter open button — shared styles, hidden on desktop by default */
body.slabyard-v2 .sy-filter-open {
    display: none;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 8px 0 12px;
    width: 100%;
    max-width: 100%;
    background-color: #003a6e;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: var(--font-family);
    cursor: pointer;
    min-height: 60px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: left;
}

body.slabyard-v2 .sy-filter-open__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    padding: 0 4px;
}

body.slabyard-v2 .sy-filter-open__divider {
    width: 1px;
    align-self: stretch;
    background-color: rgba(255,255,255,0.3);
    flex-shrink: 0;
}

body.slabyard-v2 .sy-filter-open__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    padding: 12px 14px;
}

body.slabyard-v2 .sy-filter-open__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
}

body.slabyard-v2 .sy-filter-open__subtitle {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.85;
    line-height: 1.3;
}

body.slabyard-v2 .sy-filter-open__chevron {
    flex-shrink: 0;
    margin-right: 16px;
    opacity: 0.8;
}

body.slabyard-v2 .sy-filter-open:hover,
body.slabyard-v2 .sy-filter-open:focus {
    background-color: #003a6e;
    outline: none;
}

/* Close X — shared styles, hidden on desktop by default */
body.slabyard-v2 .sy-filters-close {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    color: var(--color-text);
    line-height: 1;
    box-sizing: border-box;
}

body.slabyard-v2 .sy-filters-close:hover,
body.slabyard-v2 .sy-filters-close:focus {
    color: var(--color-primary);
    outline: none;
}

@media (max-width: 767px) {
    /* Show the trigger button on mobile */
    body.slabyard-v2 .sy-filter-open {
        display: flex;
    }

    /* Hide the static filter sidebar — replaced by the sheet */
    body.slabyard-v2 .sy-filters {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        height: 87vh;
        max-height: 87vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
        z-index: 1100;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Slide up when open */
    body.slabyard-v2 .sy-filters.sy-filters--open {
        transform: translateY(0);
    }

    /* Dim backdrop when sheet is open */
    body.slabyard-v2-sheet-open::before,
    body.sy-filters-sheet-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1099;
    }

    /* Heading row — centered title + X close button */
    body.slabyard-v2 .sy-filters-heading {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 48px;
        flex-shrink: 0;
        border-bottom: 1px solid var(--color-border);
    }

    /* Close X — show on mobile */
    body.slabyard-v2 .sy-filters-close {
        display: flex;
    }

    /* Mode tabs — full width with side margins on mobile */
    body.slabyard-v2 .sy-mode-tabs {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }

    body.slabyard-v2 .sy-mode-tabs__btn {
        flex: 1;
        padding: 10px 16px;
    }

    /* Scrollable filter list fills remaining space */
    body.slabyard-v2 .sy-filters-scroll {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Actions bar — CLEAR + APPLY pinned to bottom */
    body.slabyard-v2 .sy-filters-actions {
        flex-direction: row-reverse;
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ============================================================
   Mobile portrait — general responsive pass (max-width: 767px)
   Covers 390px phones up to iPad Air portrait (820px handled
   by the min-width:768px grid rules that already exist).
   ============================================================ */
@media (max-width: 767px) {

    /* --- Page & layout --- */
    body.slabyard-v2 .sy-page {
        padding: 0;
    }

    /* Hide the static filter sidebar from flow — replaced by bottom sheet */
    body.slabyard-v2 .sy-layout {
        display: block;
    }

    /* Page heading */
    body.slabyard-v2 .sy-page-heading {
        font-size: 18px;
        margin: 16px 16px 8px;
        text-align: center;
    }

    /* Results column — remove the 20px side padding; individual elements add their own */
    div#sy-mode-panel-find {
        padding: 0 12px;
    }

    /* --- Filter trigger row --- */
    body.slabyard-v2 .sy-filter-open {
        width: calc(100% - 32px);
        margin: 20px 16px 30px 16px;
    }

    /* --- Results header (Share / Help / Copy Link) --- */
    body.slabyard-v2 .sy-results-header {
        padding: 6px 12px;
        gap: 6px;
        justify-content: center;
    }

    /* --- Result count --- */
    body.slabyard-v2 .sy-result-count__number {
        font-size: 24px;
    }

    /* --- Photo disclaimer --- */
    body.slabyard-v2 .sy-photo-disclaimer {
        font-size: 11px;
        padding: 6px 0;
        text-align: left;
    }

    /* --- Bundle card grid — single column, tighter padding --- */
    body.slabyard-v2 .sy-results {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.slabyard-v2 .sy-card {
        padding: 8px;
    }

    body.slabyard-v2 .sy-card__title {
        font-size: 15px;
    }

    body.slabyard-v2 .sy-card__meta dt {
        font-size: 11px;
    }

    body.slabyard-v2 .sy-card__meta dd {
        font-size: 13px;
    }

    /* --- Pagination --- */
    body.slabyard-v2 .sy-pagination {
        padding: 8px 12px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        justify-content: center;
    }

    /* --- Favorites group header — stack image above meta on small screens --- */
    body.slabyard-v2 .sy-fav-group__header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sel"
            "img"
            "meta";
    }

    body.slabyard-v2 .sy-fav-group__image {
        width: 100%;
        height: 180px;
    }

    /* --- Favorites panel select-all / actions --- */
    body.slabyard-v2 .sy-fav-panel__actions {
        flex-direction: column;
        gap: 8px;
    }

    /* --- Clearance banner --- */
    body.slabyard-v2 .sy-banner--clearance {
        font-size: 13px;
        padding: 10px 12px;
        margin-bottom: 0;
    }
}

/* ============================================================
   Phone portrait — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {
    body.slabyard-v2 .sy-mode-tabs__btn {
        font-size: 10px;
    }
}

/* ============================================================
   Tablet portrait — 768px to 900px (iPad mini / iPad Air)
   Same slide-up sheet as mobile — sidebar hidden until Filter
   button tapped. Results column goes full width.
   ============================================================ */
@media (min-width: 768px) and (max-width: 900px) {

    /* Full-width single column — no sidebar in flow */
    body.slabyard-v2 .sy-layout {
        display: block;
    }

    /* Filter sheet — same behaviour as mobile */
    body.slabyard-v2 .sy-filters {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        height: 92vh;
        max-height: 92vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
        z-index: 1100;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.slabyard-v2 .sy-filters.sy-filters--open {
        transform: translateY(0);
    }

    /* Show the Filter trigger button */
    body.slabyard-v2 .sy-filter-open {
        display: flex;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Dim backdrop */
    body.sy-filters-sheet-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1099;
    }

    /* Two column cards — full width results column has room */
    body.slabyard-v2 .sy-results {
        grid-template-columns: repeat(2, 1fr);
    }

    body.slabyard-v2 .sy-fav-panel__body {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Heading row inside filter sheet */
    body.slabyard-v2 .sy-filters-heading {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 48px;
        flex-shrink: 0;
        border-bottom: 1px solid var(--color-border);
    }

    /* Close X */
    body.slabyard-v2 .sy-filters-close {
        display: flex;
    }

    /* Actions pinned to bottom */
    body.slabyard-v2 .sy-filters-actions {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Results column padding */
    div#sy-mode-panel-find {
        padding: 0 16px;
    }
}

/* ============================================================
   Scroll-to-top button — phone & tablet portrait only
   ============================================================ */
.sy-scroll-top {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    left: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-primary, #1a3a6b);
    color: #fff;
    line-height: 1;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sy-scroll-top--visible {
    opacity: 1;
    pointer-events: auto;
}

/* Phone portrait */
@media (max-width: 767px) {
    body.slabyard-v2 .sy-scroll-top--visible {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Tablet portrait (iPad mini / iPad Air) */
@media (min-width: 768px) and (max-width: 900px) {
    body.slabyard-v2 .sy-scroll-top--visible {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Phone landscape — not enough vertical room for two sticky bars.
   Revert both sticky headers to normal flow. */
@media (orientation: landscape) and (max-height: 500px) {
    body.slabyard-v2 .sy-results-sticky-header {
        position: static;
    }
    body.slabyard-v2 .sy-fav-panel__header {
        position: static;
    }
}

/* ============================================================
   Login page (Account/Login.aspx) — .lgn-* block.
   Task 8.1 (login refresh) — relocated 2026-07-15 from
   login/login-options.aspx to Account/Login.aspx (the actual
   sign-in surface). Uses body.slabyard-v2 tokens; opts in via
   Page_Load's UsesSlabYardV2 flag.
   ============================================================ */
body.login-page.slabyard-v2 #middle-div {
    background: url('/images/landing.jpg') center center / cover no-repeat;
    min-height: 80vh;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.slabyard-v2 .lgn-page {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 16px;
    box-sizing: border-box;
}

body.slabyard-v2 .lgn-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Two-column grid on desktop (Sign In | Browse); stacks on phone. */
body.slabyard-v2 .lgn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    background-color: rgba(255, 255, 255, .97);
}

@media (min-width: 768px) {
    body.slabyard-v2 .lgn-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        border-radius:15px;
    }
}

body.slabyard-v2 .lgn-card {
    padding: 28px 32px;
    /*    background-color: var(--color-surface);*/
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

body.slabyard-v2 .lgn-card__heading {
    margin: 0 0 8px 0;
    font-family: var(--font-family);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
}

body.slabyard-v2 .lgn-card__intro {
    margin: 0 0 16px 0;
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.5;
    text-align: left;
}

body.slabyard-v2 .lgn-card__foot {
    margin-top: 5px;
    text-align: left;
    display: flex;
}

body.slabyard-v2 .lgn-hint {
    margin: 4px;
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-size: 13px;
}

body.slabyard-v2 .lgn-field {
    margin: 0 0 12px 0;
}

    body.slabyard-v2 .lgn-field > label {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-family);
        font-size: var(--font-size-base);
        color: var(--color-text);
        line-height: 1.2;
        text-align: left;
    }

body.slabyard-v2 .lgn-req {
    color: var(--color-border-dark);
    font-weight: 400;
    margin-left: 4px;
}

body.slabyard-v2 .lgn-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

body.slabyard-v2 .lgn-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

body.slabyard-v2 .lgn-error {
    margin: 4px 0 8px 0;
    min-height: 18px;
    color: #B00020;
    font-size: 11px;
    line-height: 1.3;
}

body.slabyard-v2 .lgn-error:empty {
    display: none;
}

body.slabyard-v2 .lgn-btn {
    display: block;
    width: 100%;
    margin-top: auto;
    min-height: 48px;
    padding: 12px 20px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.2;
    border-radius: 6px;
}

body.slabyard-v2 .lgn-btn--primary {
    color: #FFFFFF;
    background-color: #004E90;
    border: 1px solid #1a3a6b;
}

body.slabyard-v2 .lgn-btn--primary:hover,
body.slabyard-v2 .lgn-btn--primary:focus {
    background-color: #122a52;
    border-color: #122a52;
    outline: none;
}

body.slabyard-v2 .lgn-btn--secondary {
    color: #FFFFFF;
    background-color: #004E90;
    border: 1px solid #1a3a6b;
}

body.slabyard-v2 .lgn-btn--secondary:hover,
body.slabyard-v2 .lgn-btn--secondary:focus {
    background-color: #122a52;
    border-color: #122a52;
    outline: none;
}

body.slabyard-v2 .lgn-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

body.slabyard-v2 .lgn-link {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

body.slabyard-v2 .lgn-link:hover,
body.slabyard-v2 .lgn-link:focus {
    text-decoration: none;
    outline: none;
}

.ui-dialog {
    border: none;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.ui-dialog h2:focus,
.ui-dialog h2:focus-visible {
    outline: none;
}

.ui-dialog .ui-dialog-titlebar-close {
    right: 8px !important;
    top: 50% !important;
    margin-top: -10px !important;
    font-size: 0;
}