/* =========================================================
   SKS Pottery — public shop layer v0.4.5
   Quiet catalog presentation: pottery first, controls second.
========================================================= */

.sks-shop,
.sks-shop *,
.sks-shop *::before,
.sks-shop *::after{box-sizing:border-box;}

.sks-shop{
    --sks-ivory:#f7f2e7;
    --sks-paper:#fffdf8;
    --sks-green:#18351d;
    --sks-leaf:#586d3f;
    --sks-clay:#9b5429; /* 5:1+ on ivory at normal text sizes */
    --sks-ink:#292b25;
    --sks-muted:#61695f;
    --sks-line:rgba(24,53,29,.16);
    --sks-tile:#ece9e1;

    display:flow-root; /* contains bottom margins before the global footer */
    width:auto;
    max-width:none;
    margin:0;
    overflow-x:clip;
    background:var(--sks-ivory);
    color:var(--sks-ink);
    font-family:"Manrope",Arial,sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:1.5;
}

.sks-shop a{color:inherit;text-decoration:none;}
.sks-shop button,
.sks-shop select,
.sks-shop input{font-family:inherit;}

/* =========================================================
   Compact title band
========================================================= */

.sks-shop-hero{
    min-height:121px;
    display:flex;
    align-items:center;
    padding:20px 28px;
    background:var(--sks-green);
    color:var(--sks-ivory);
}

.sks-shop-hero__inner{
    width:min(1340px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:auto minmax(300px,650px);
    gap:42px;
    align-items:center;
    justify-content:space-between;
}

.sks-shop-hero h1{
    margin:0;
    color:#fff;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:clamp(54px,5.4vw,74px);
    font-style:italic;
    font-weight:500;
    letter-spacing:-.035em;
    line-height:.86;
}

.sks-shop-hero__copy{
    margin:0;
    color:rgba(247,242,231,.88);
    font-size:15px;
    font-weight:400;
    line-height:1.55;
    text-wrap:balance;
}

/* =========================================================
   Main catalog shell — intentionally unframed
========================================================= */

.sks-shop-shell{
    width:min(1360px,calc(100% - 40px));
    margin:0 auto;
    padding:28px 0 36px;
}

.sks-shop-toolbar{
    min-height:44px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:center;
    padding-bottom:18px;
    border-bottom:1px solid var(--sks-line);
}

.sks-shop-filter-toggle{display:none;}

.sks-shop-summary{
    color:var(--sks-muted);
    font-size:13px;
}

.sks-shop-sort{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--sks-green);
    font-size:13px;
}

.sks-shop-sort select{
    min-width:170px;
    height:40px;
    padding:0 34px 0 12px;
    border:1px solid var(--sks-line);
    border-radius:0;
    background:transparent;
    color:var(--sks-green);
    font-size:13px;
}

.sks-shop-active-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    min-height:0;
    padding-top:14px;
}

.sks-shop-active-filters:empty{display:none;}

.sks-shop-chip{
    appearance:none;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:32px;
    padding:6px 10px;
    border:1px solid rgba(24,53,29,.18);
    border-radius:999px;
    background:transparent;
    color:var(--sks-green);
    font-size:12px;
    cursor:pointer;
}

.sks-shop-chip::after{
    content:"×";
    color:var(--sks-clay);
    font-size:15px;
    line-height:1;
}

.sks-shop-layout{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:42px;
    align-items:start;
    padding-top:24px;
}

/* =========================================================
   Quiet, collapsible filter list
========================================================= */

.sks-shop-filters{
    position:sticky;
    top:96px;
    max-height:calc(100vh - 116px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding:0 20px 8px 0;
    border-right:1px solid var(--sks-line);
    background:transparent;
    color:var(--sks-ink);
}

body.admin-bar .sks-shop-filters{
    top:128px;
    max-height:calc(100vh - 148px);
}

.sks-shop-filters::-webkit-scrollbar{width:7px;}
.sks-shop-filters::-webkit-scrollbar-track{background:transparent;}
.sks-shop-filters::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(24,53,29,.18);
}

.sks-shop-filters__top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    padding:0 0 12px;
}

.sks-shop-filters__top h2{
    margin:0;
    color:var(--sks-green);
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:27px;
    font-weight:600;
    line-height:1;
}

.sks-shop-clear-link{
    appearance:none;
    padding:0;
    border:0;
    background:transparent;
    color:var(--sks-clay);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
}

.sks-shop-filter-group{
    margin:0;
    padding:0;
    border:0;
    border-top:1px solid var(--sks-line);
}

.sks-shop-filter-group[hidden]{display:none!important;}

.sks-shop-filter-group summary{
    position:relative;
    display:block;
    padding:17px 24px 8px 0;
    color:var(--sks-green);
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:18px;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    list-style:none;
}

.sks-shop-filter-group summary::-webkit-details-marker{display:none;}

.sks-shop-filter-group summary::after{
    content:"+";
    position:absolute;
    right:3px;
    top:50%;
    color:var(--sks-muted);
    font-family:"Manrope",Arial,sans-serif;
    font-size:16px;
    font-weight:400;
    transform:translateY(-50%);
}

.sks-shop-filter-group[open] summary::after{content:"−";}

.sks-shop-filter-options{
    padding:0 0 13px;
}

.sks-shop-check{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:30px;
    color:#3f463f;
    font-size:13px;
    cursor:pointer;
}

.sks-shop-check[hidden]{display:none!important;}
.sks-shop-check__label{min-width:0;}

.sks-shop-check__count{
    margin-left:auto;
    color:#596158;
    font-size:12px;
    font-variant-numeric:tabular-nums;
}

.sks-shop-check input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.sks-shop-check__box{
    width:16px;
    height:16px;
    flex:0 0 16px;
    border:1px solid rgba(24,53,29,.32);
    background:transparent;
    transition:background .15s ease,border-color .15s ease;
}

.sks-shop-check input:checked + .sks-shop-check__box{
    border-color:var(--sks-green);
    background:var(--sks-green);
    box-shadow:inset 0 0 0 4px var(--sks-ivory);
}

.sks-shop-check input:focus-visible + .sks-shop-check__box{
    outline:2px solid var(--sks-clay);
    outline-offset:3px;
}

.sks-shop-apply{
    width:100%;
    min-height:42px;
    margin-top:14px;
    border:1px solid var(--sks-green);
    background:transparent;
    color:var(--sks-green);
    font-size:13px;
    cursor:pointer;
}

.js .sks-shop-apply{display:none;}

/* =========================================================
   Results and cards
========================================================= */

.sks-shop-results{
    min-width:0;
    scroll-margin-top:110px;
    container-type:inline-size;
    transition:opacity .18s ease;
}

.sks-shop-results.is-loading{
    opacity:.48;
    pointer-events:none;
}

.sks-shop-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:44px 24px;
}

.sks-shop-card{min-width:0;}

.sks-shop-card__image{
    position:relative;
    display:block;
    aspect-ratio:4/5;
    overflow:hidden;
    background:var(--sks-tile);
}

.sks-shop-card.shape-1 .sks-shop-card__image{border-radius:110px 8px 8px 8px;}
.sks-shop-card.shape-2 .sks-shop-card__image{border-radius:8px 80px 8px 8px;}
.sks-shop-card.shape-3 .sks-shop-card__image{border-radius:8px 8px 105px 8px;}
.sks-shop-card.shape-4 .sks-shop-card__image{border-radius:8px;}

.sks-shop-card__photo{
    width:100%;
    height:100%;
    object-fit:cover;
    mix-blend-mode:multiply; /* visually merges pale studio backdrops into the tile */
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

.sks-shop-card__image:hover .sks-shop-card__photo{transform:scale(1.018);}

.sks-shop-card__placeholder{
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    color:rgba(24,53,29,.48);
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:24px;
}

.sks-shop-card__body{padding:13px 1px 0;}

.sks-shop-card__title-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:baseline;
    margin:0 0 5px;
}

.sks-shop-card__title-row h2{
    margin:0;
    overflow-wrap:anywhere;
    color:var(--sks-green);
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:clamp(24px,2vw,30px);
    font-weight:600;
    line-height:1.02;
}

.sks-shop-card__price{
    margin:0;
    color:var(--sks-green);
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:21px;
    font-weight:600;
    line-height:1;
    font-variant-numeric:lining-nums tabular-nums;
    white-space:nowrap;
}

.sks-shop-card__details{
    margin:0;
    overflow:hidden;
    color:var(--sks-muted);
    font-size:13px;
    line-height:1.4;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Small catalogs: remove catalog-management UI and let the work stand alone. */
.sks-shop.is-small-catalog .sks-shop-toolbar,
.sks-shop.is-small-catalog .sks-shop-active-filters,
.sks-shop.is-small-catalog .sks-shop-filters{display:none!important;}

.sks-shop.is-small-catalog .sks-shop-layout{
    display:block;
    padding-top:10px;
}

.sks-shop.is-small-catalog .sks-shop-grid{
    grid-template-columns:repeat(auto-fit,minmax(250px,340px));
    justify-content:center;
    gap:44px 28px;
}

.sks-shop.is-empty-catalog .sks-shop-layout{padding-top:0;}
.sks-shop.is-empty-catalog .sks-shop-empty{
    max-width:720px;
    margin:0 auto;
    border-top:0;
}

.sks-shop-empty{
    padding:68px 24px;
    border-top:1px solid var(--sks-line);
    text-align:center;
}

.sks-shop-empty__title{
    margin:0 0 9px;
    color:var(--sks-green);
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:34px;
}

.sks-shop-empty p:not(.sks-shop-empty__title){
    margin:0 0 18px;
    color:var(--sks-muted);
}

.sks-shop-more-wrap{
    display:none;
    justify-content:center;
    padding-top:46px;
}

.js .sks-shop-more-wrap{display:flex;}

.sks-shop-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 22px;
    border:1px solid var(--sks-green);
    background:transparent;
    color:var(--sks-green);
    font-size:13px;
    cursor:pointer;
}

.sks-shop-more:hover{background:var(--sks-green);color:#fff;}
.sks-shop-more[aria-disabled="true"]{opacity:.5;pointer-events:none;}
.sks-shop-more[hidden],
.sks-shop-more-wrap[hidden],
.sks-shop-empty[hidden]{display:none!important;}

/* Full no-JS fallback. */
.sks-shop-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    padding-top:44px;
}

.js .sks-shop-pagination{display:none;}

.sks-shop-pagination__pages{display:flex;flex-wrap:wrap;gap:6px;}

.sks-shop-pagination__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    min-height:38px;
    padding:7px 10px;
    border:1px solid var(--sks-line);
    background:transparent;
    color:var(--sks-green);
    font-size:12px;
}

.sks-shop-pagination__link.is-current{
    border-color:var(--sks-green);
    background:var(--sks-green);
    color:#fff;
}

.sks-shop-show-results{display:none;}
.sks-shop-unavailable{padding:50px 24px;text-align:center;}

/* =========================================================
   Responsive
========================================================= */

@media(max-width:1050px){
    .sks-shop-layout{grid-template-columns:200px minmax(0,1fr);gap:28px;}
    .sks-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 20px;}
}

@media(max-width:780px){
    .sks-shop-hero{
        min-height:108px;
        padding:18px 16px;
    }

    .sks-shop-hero__inner{
        grid-template-columns:1fr;
        gap:6px;
    }

    .sks-shop-hero h1{font-size:52px;}
    .sks-shop-hero__copy{max-width:520px;font-size:14px;line-height:1.4;}

    .sks-shop-shell{
        width:calc(100% - 24px);
        padding:18px 0 28px;
    }

    .sks-shop-toolbar{grid-template-columns:auto 1fr;gap:12px;}

    .sks-shop-filter-toggle{display:none;}
    .js .sks-shop-filter-toggle{
        display:inline-flex;
        align-items:center;
        gap:8px;
        min-height:40px;
        padding:0 12px;
        border:1px solid var(--sks-line);
        background:transparent;
        color:var(--sks-green);
        font-size:13px;
        cursor:pointer;
    }

    .sks-shop-filter-toggle span{color:var(--sks-clay);font-size:17px;}
    .sks-shop-filter-toggle[aria-expanded="true"] span{transform:rotate(45deg);}
    .sks-shop-summary{justify-self:end;}
    .sks-shop-sort{grid-column:1/-1;justify-content:space-between;}
    .sks-shop-sort select{flex:1;}

    .sks-shop-layout{display:block;padding-top:18px;}

    /* Without JS the filters remain reachable. With JS they are a panel. */
    .sks-shop-filters{
        display:block;
        position:static;
        max-height:none;
        overflow:visible;
        scrollbar-gutter:auto;
        margin-bottom:22px;
        padding:0;
        border-right:0;
        border-bottom:1px solid var(--sks-line);
    }

    .js .sks-shop-filters{display:none;}
    .js .sks-shop-filters.is-open{display:block;}
    body.admin-bar .sks-shop-filters{top:auto;}

    .sks-shop-filters__top{padding:0 0 12px;}

    .js .sks-shop-show-results{
        position:sticky;
        bottom:12px;
        z-index:2;
        display:block;
        width:100%;
        min-height:48px;
        margin:14px 0 16px;
        border:1px solid var(--sks-green);
        background:var(--sks-green);
        color:#fff;
        font-size:13px;
        cursor:pointer;
        box-shadow:0 8px 22px rgba(24,53,29,.12);
    }

    .sks-shop.is-small-catalog .sks-shop-layout{padding-top:0;}
}

@container (max-width:470px){
    .sks-shop-grid{grid-template-columns:1fr;}
    .sks-shop-card__title-row{gap:10px;}
}

@media(max-width:560px){
    .sks-shop-grid{grid-template-columns:1fr;gap:38px;}
    .sks-shop-card__image{aspect-ratio:1/1.12;}
    .sks-shop-card.shape-1 .sks-shop-card__image{border-radius:82px 7px 7px 7px;}
    .sks-shop-card.shape-2 .sks-shop-card__image{border-radius:7px 64px 7px 7px;}
    .sks-shop-card.shape-3 .sks-shop-card__image{border-radius:7px 7px 78px 7px;}
    .sks-shop-card__price{font-size:20px;}
    .sks-shop-card__details{font-size:12px;}

    .sks-shop.is-small-catalog .sks-shop-grid{
        grid-template-columns:minmax(0,1fr);
        max-width:390px;
        margin:0 auto;
    }
}

@media(prefers-reduced-motion:reduce){
    .sks-shop *,
    .sks-shop *::before,
    .sks-shop *::after{transition:none!important;scroll-behavior:auto!important;}
}