/* SLM rock layout (rock-gallery.php): home tile prices + buttons + rows, hub picture cards, See It Up Close, Rock & Gravel Gallery.
   Contrast (WCAG AA): #9A4527 on #FFFFFF 6.5:1 · #3B2A1F on #FFFFFF 14:1 · #4A4038 on #FFFFFF 10:1 · #4A4038 on #F3E6D6 8.2:1
   white on #B5522F 5.0:1 · #3B2A1F on #F2B233 7.3:1 · #FBF7F1 on #3B2A1F 12.8:1 */

/* ---------- Home: price under each color tile ---------- */
body .ocf-rock-colors .slm-rock-price {
    display: block;
    margin-top: -.35rem;
    padding: 0 .8rem .75rem;
    color: #9A4527;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.3;
}

body .ocf-rock-colors .slm-rock-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* ---------- Home: River Rock / Mexican Beach Pebbles rows (only when real photos exist) ---------- */
.slm-rockrows {
    display: grid;
    gap: 1rem;
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.slm-rockrow {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1rem 1.5rem;
    align-items: center;
    padding: 1rem;
    border-top: 4px solid #B5522F;
    border-radius: 12px;
    background: #FFFFFF;
}

.slm-rockrow + .slm-rockrow {
    border-top-color: #4E7F46;
}

.slm-rockrow__head {
    display: grid;
    gap: .5rem;
    justify-items: start;
}

body .slm-rockrow__title {
    margin: 0;
    color: #3B2A1F;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.slm-rockrow__summary {
    margin: 0;
    color: #4A4038;
    line-height: 1.45;
}

.slm-rockrow__photos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slm-rockrow__photos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .slm-rockrow {
        grid-template-columns: 1fr;
    }

    .slm-rockrow__photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Decorative Rock & Gravel hub: 4 picture cards ---------- */
.slm-hubcards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
}

body a.slm-hubcard[href] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-top: 4px solid #B5522F;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 8px 22px rgba(59, 42, 31, .12);
    color: #4A4038;
    text-decoration: none;
}

body a.slm-hubcard:nth-child(2) { border-top-color: #F2B233; }
body a.slm-hubcard:nth-child(3) { border-top-color: #4E7F46; }
body a.slm-hubcard:nth-child(4) { border-top-color: #6B4A32; }

.slm-hubcard__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.slm-hubcard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.1rem 1.15rem;
}

.slm-hubcard__title {
    color: #3B2A1F;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.slm-hubcard__line {
    color: #4A4038;
    line-height: 1.45;
}

.slm-hubcard__btn {
    align-self: flex-start;
    margin-top: auto;
    padding: .6rem 1rem;
    border-radius: 8px;
    background: #B5522F;
    color: #FFFFFF;
    font-weight: 700;
    line-height: 1.2;
}

.slm-hubcard__line + .slm-hubcard__btn,
.slm-hubcard__title + .slm-hubcard__btn {
    margin-top: .6rem;
}

body a.slm-hubcard[href]:hover .slm-hubcard__btn,
body a.slm-hubcard[href]:focus-visible .slm-hubcard__btn {
    background: #A82728;
    text-decoration: underline;
}

body a.slm-hubcard[href]:focus-visible {
    outline: 3px solid #B5522F;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .slm-hubcards {
        grid-template-columns: 1fr;
    }
}

/* ---------- Product pages: See It Up Close ---------- */
.slm-upclose {
    margin: 0 0 2rem;
}

body .slm-upclose__title {
    margin: 0 0 .9rem;
    color: #3B2A1F;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: clamp(1.125rem, 2.2vw, 1.3rem);
    font-weight: 700;
}

.slm-upclose__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 1.25rem;
    align-items: start;
}

.slm-upclose--photo-only .slm-upclose__grid {
    grid-template-columns: 1fr;
}

.slm-upclose__figure {
    margin: 0;
}

.slm-upclose__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    background: #F3E6D6;
}

/* Photo alone: a wide crop so it doesn't fill the whole screen. */
.slm-upclose--photo-only .slm-upclose__img {
    aspect-ratio: 16 / 10;
}

.slm-upclose__caption {
    margin-top: .5rem;
    color: #4A4038;
    font-size: .92rem;
    font-weight: 600;
}

.slm-upclose__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.slm-upclose__thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    border: 3px solid transparent;
    border-radius: 10px;
    background: #F3E6D6;
    cursor: pointer;
}

.slm-upclose__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slm-upclose__thumb[aria-pressed="true"] {
    border-color: #B5522F;
}

.slm-upclose__thumb:focus-visible {
    outline: 3px solid #3B2A1F;
    outline-offset: 2px;
}

.slm-upclose__video .slm-video {
    max-width: 300px;
    margin: 0;
}

/* The up-close video sits on a light page: dark caption + transcript text. */
.slm-upclose .slm-video__caption,
.slm-upclose .slm-video__transcript {
    color: #3B2A1F;
}

.slm-upclose .slm-video__transcript {
    border-color: #DCCAB4;
    background: #FFFFFF;
}

@media (max-width: 767px) {
    /* Phones: photo, then video. */
    .slm-upclose__grid {
        grid-template-columns: 1fr;
    }

    .slm-upclose__video .slm-video {
        margin: 0 auto;
    }

    .slm-upclose--photo-only .slm-upclose__img {
        aspect-ratio: 1;
    }
}

/* ---------- Rock & Gravel Gallery ---------- */
.slm-rockgal__lead {
    max-width: 65ch;
    margin: 0 0 1.25rem;
    color: #4A4038;
    font-size: 1.05rem;
    line-height: 1.6;
}

.slm-rockgal__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.75rem;
}

body .slm-rockgal__nav a[href] {
    padding: .5rem .9rem;
    border: 2px solid #B5522F;
    border-radius: 999px;
    background: #FFFFFF;
    color: #9A4527;
    font-weight: 700;
    text-decoration: none;
}

body .slm-rockgal__nav a[href]:hover,
body .slm-rockgal__nav a[href]:focus-visible {
    text-decoration: underline;
}

.slm-rockgal__section {
    margin: 0 0 2.5rem;
    scroll-margin-top: 110px;
}

body .slm-rockgal__title {
    margin: 0 0 .4rem;
    color: #3B2A1F;
}

.slm-rockgal__intro {
    margin: 0 0 1rem;
    color: #4A4038;
}

body .slm-rockgal__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .slm-rockgal__grid > li {
    margin: 0;
}

.slm-rockcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-top: 4px solid #B5522F;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(59, 42, 31, .1);
}

.slm-rockcard:nth-child(3n + 2) { border-top-color: #F2B233; }
.slm-rockcard:nth-child(3n) { border-top-color: #4E7F46; }

.slm-rockcard__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.slm-rockcard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .3rem;
    padding: .8rem .9rem .9rem;
}

body .slm-rockcard__name {
    margin: 0;
    color: #3B2A1F;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

body .slm-rockcard__price {
    margin: 0;
    color: #9A4527;
    font-size: .92rem;
    font-weight: 700;
}

.slm-rockcard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
    padding-top: .45rem;
}

body .slm-rockcard__details[href],
.slm-rockcard__watch {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: .45rem .85rem;
    border: 2px solid #B5522F;
    border-radius: 8px;
    background: #FFFFFF;
    color: #9A4527;
    font: 700 .9rem/1.2 Montserrat, system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.slm-rockcard__watch {
    border-color: #3B2A1F;
    background: #3B2A1F;
    color: #FBF7F1;
}

body .slm-rockcard__details[href]:hover,
body .slm-rockcard__details[href]:focus-visible,
.slm-rockcard__watch:hover,
.slm-rockcard__watch:focus-visible {
    text-decoration: underline;
}

body .slm-rockcard__details[href]:focus-visible,
.slm-rockcard__watch:focus-visible {
    outline: 3px solid #B5522F;
    outline-offset: 2px;
}

.slm-rockgal__note {
    margin: 0 0 1rem;
    color: #4A4038;
    font-size: .92rem;
}

/* Watch dialog */
.slm-watch {
    width: min(92vw, 380px);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #3B2A1F;
    color: #FBF7F1;
}

.slm-watch::backdrop {
    background: rgba(0, 0, 0, .7);
}

.slm-watch__inner {
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

.slm-watch__title {
    margin: 0;
    color: #F2B233;
    font-weight: 700;
}

.slm-watch .slm-video {
    max-width: 320px;
}

.slm-watch__close {
    justify-self: center;
    min-height: 44px;
    padding: .5rem 1.25rem;
    border: 0;
    border-radius: 8px;
    background: #F2B233;
    color: #3B2A1F;
    font: 700 1rem/1.2 Montserrat, system-ui, sans-serif;
    cursor: pointer;
}

.slm-watch__close:focus-visible {
    outline: 3px solid #FBF7F1;
    outline-offset: 2px;
}

@media (max-width: 1023px) {
    body .slm-rockgal__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body .slm-rockgal__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
    }

    body .slm-rockcard__details[href],
    .slm-rockcard__watch {
        padding: .4rem .65rem;
    }
}

/* ---------- Gallery: tap a photo to enlarge (lightbox) ----------
   Contrast: #FBF7F1 on #1F1610 15.9:1 · #3B2A1F on #F2B233 7.3:1 · #3B2A1F on #FFFFFF 14:1 */
button.slm-rockcard__media {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #F3E6D6;
    cursor: zoom-in;
}

button.slm-rockcard__media:focus-visible {
    outline: 3px solid #B5522F;
    outline-offset: -3px;
}

.slm-rockcard__zoom {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.slm-rockcard__zoom svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: #3B2A1F;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.slm-lightbox {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FBF7F1;
}

.slm-lightbox::backdrop {
    background: rgba(20, 14, 10, .92);
}

.slm-lightbox__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .75rem;
    height: 100%;
    padding: .75rem 1rem 1rem;
    background: #1F1610;
}

.slm-lightbox__bar,
.slm-lightbox__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.slm-lightbox__nav {
    justify-content: center;
}

.slm-lightbox__count {
    margin: 0;
    color: #FBF7F1;
    font-weight: 600;
}

.slm-lightbox__figure {
    align-self: center;
    min-height: 0;
    margin: 0;
    text-align: center;
}

/* Block layout (not flex) so the max-width / max-height caps keep the photo square. `body … img` outranks the theme's `.prose img`. */
body .slm-lightbox img.slm-lightbox__img {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: auto;
    /* Viewport-based height cap keeps the photo's shape; JS caps the width at the file's own size. */
    max-height: calc(100vh - 11rem);
    max-height: calc(100dvh - 11rem);
    border-radius: 10px;
    background: #3B2A1F;
}

.slm-lightbox__caption {
    margin-top: .6rem;
    color: #FBF7F1;
    font-weight: 700;
    text-align: center;
}

.slm-lightbox__btn {
    min-width: 44px;
    min-height: 44px;
    padding: .55rem 1.1rem;
    border: 0;
    border-radius: 8px;
    background: #F2B233;
    color: #3B2A1F;
    font: 700 1rem/1.2 Montserrat, system-ui, sans-serif;
    cursor: pointer;
}

.slm-lightbox__nav .slm-lightbox__btn {
    background: #FFFFFF;
}

.slm-lightbox__btn:hover {
    text-decoration: underline;
}

.slm-lightbox__btn:focus-visible {
    outline: 3px solid #FBF7F1;
    outline-offset: 3px;
}

/* "See the Rock Gallery" under the up-close photo (#9A4527 on #FBF7F1 6.2:1). */
.slm-upclose__more {
    margin: .75rem 0 0;
}

body .slm-upclose__more a[href] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #9A4527;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .18em;
}

body .slm-upclose__more a[href]:focus-visible {
    outline: 3px solid #B5522F;
    outline-offset: 2px;
}