/* ══════════════════════════════════════════════════════════
   STL Files page
   ══════════════════════════════════════════════════════════ */


/* ── Source filter — segmented control ── */

.lcc-stl-filter {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    min-width: 0;
    /* fieldset defaults to min-content, which breaks flex */
}

.lcc-stl-filter-group {
    display: inline-flex;
    border: 1px solid rgba(44, 43, 40, .25);
}

/* The radios do the work; they are never seen. Kept in the layout so
   focus-visible lands on the segment the user is actually on. */
.lcc-stl-filter input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lcc-stl-filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-left: 1px solid rgba(44, 43, 40, .25);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--charcoal);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.lcc-stl-filter label:first-of-type {
    border-left: 0;
}

/* Count. #6B655D is 5.19:1 on warm white. */
.lcc-stl-filter label span {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .04em;
    color: #6B655D;
}

.lcc-stl-filter label:hover {
    background: rgba(44, 43, 40, .05);
}

/* ── Active segment ── */

.lcc-stl-filter input:checked+label {
    background: var(--charcoal);
    color: var(--warm-white);
}

.lcc-stl-filter input:checked+label span {
    color: rgba(250, 242, 232, .72);
}

/* Kill the divider either side of the filled segment so the fill reads
   as one solid block instead of a button with a line stuck to it. */
.lcc-stl-filter input:checked+label {
    border-left-color: transparent;
}

.lcc-stl-filter input:checked+label+input+label {
    border-left-color: transparent;
}

/* Outline sits inside the joined border, so it can't be clipped. */
.lcc-stl-filter input:focus-visible+label {
    outline: 2px solid #B4521F;
    outline-offset: -2px;
}

/* ── Note under the control ── */

.lcc-stl-note {
    display: none;
    margin: 0 0 22px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .01em;
    color: #6B655D;
}

body:has(#lcc-stl-mw:checked) .lcc-stl-note--mw {
    display: block;
}

/* The note takes over the gap when it appears, so the grid doesn't jump. */
body:has(#lcc-stl-mw:checked) .lcc-stl-filter {
    margin-bottom: 12px;
}

/* ── Secondary "print it yourself" link on a card ── */
/* Sits under Add to cart, deliberately quieter than it: buying is the
   main action, printing is the alternative. #6B655D is 5.19:1.
   Selector carries .woocommerce because ".woocommerce li.product a"
   sets color:inherit and ties on specificity otherwise — checked live,
   the shorter selector loses and the link comes out charcoal. */

.woocommerce li.product a.lcc-stl-alt {
    display: block;
    margin: 9px 0 0;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #6B655D;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(44, 43, 40, .3);
    transition: color .18s ease, text-decoration-color .18s ease;
}

.woocommerce li.product a.lcc-stl-alt:hover,
.woocommerce li.product a.lcc-stl-alt:focus-visible {
    color: var(--charcoal);
    text-decoration-color: var(--charcoal);
}

.woocommerce li.product a.lcc-stl-alt:focus-visible {
    outline: 2px solid #B4521F;
    outline-offset: 2px;
}


/* ── Keeping the buttons on a row level ── */
/* The action block is bottom-anchored, so a card with no MakerWorld
   link dropped its Add to cart 24px below its neighbours' (measured on
   the Çift Yaprak row). This reserves the link's exact height on the
   cards that don't have one.

   body:has(.lcc-stl-alt) means it only applies on a page where some
   card does have the link — collection pages are untouched. */

body:has(.lcc-stl-alt) li.product:not(.product_tag-makerworld-stl-free) .product-action-wrap::after {
    content: "";
    display: block;
    font-size: 11px;
    line-height: 1.4;
    height: 1.4em;
    margin-top: 9px;
}


/* ── The filtering itself ── */

body:has(#lcc-stl-mw:checked) li.product:not(.product_tag-makerworld-stl-free) {
    display: none;
}

body:has(#lcc-stl-buy:checked) li.product:not(.product_tag-lushclayco-claycutter-stl) {
    display: none;
}


/* ── Mobile ── */

@media (max-width: 767px) {

    .lcc-stl-filter-group {
        display: flex;
        width: 100%;
    }

    /* Equal thirds, and the label wraps rather than clipping. Measured
     clean at 320 / 360 / 390 — all three segments 48px tall, no
     overflow at any of them. */
    .lcc-stl-filter label {
        flex: 1 1 0;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        gap: 0 6px;
        min-height: 48px;
        padding: 6px 8px;
        font-size: 10px;
        letter-spacing: .04em;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    .lcc-stl-filter label span {
        font-size: 9px;
    }

    .lcc-stl-note {
        font-size: 11px;
    }

    .woocommerce li.product a.lcc-stl-alt {
        font-size: 10px;
        margin-top: 8px;
    }

    /* Spacer tracks the link's mobile size. */
    body:has(.lcc-stl-alt) li.product:not(.product_tag-makerworld-stl-free) .product-action-wrap::after {
        font-size: 10px;
        margin-top: 8px;
    }
}