Shop

/* ── Reset & base ───────────────────────────────────────────────────────── */
#kp-shop{all:initial;display:block;font-family:’Nunito Sans’,sans-serif}
#kp-shop *{box-sizing:border-box;margin:0;padding:0}
#kp-shop a{text-decoration:none !important}
#kp-shop button,#kp-shop select,#kp-shop input{font-family:’Nunito Sans’,sans-serif}
#kp-shop img{display:block}
#kp-shop ul{list-style:none}
#kp-shop{background:#0d0c0b;color:#e0d8ce;padding:36px 0 80px;width:100%}
#kp-shop .ks-wrap{max-width:1280px;margin:0 auto;padding:0 24px}
/* ── Page header ─────────────────────────────────────────────────────────── */
#kp-shop .ks-hd{
margin-bottom:32px;
padding-bottom:24px;
border-bottom:1px solid #1a1916;
}
#kp-shop .ks-hd-label{
font-family:’Cinzel’,serif;
font-size:10px;letter-spacing:3px;text-transform:uppercase;
color:#5c4a30;margin-bottom:6px;
}
#kp-shop .ks-hd-title{
font-family:’Cinzel’,serif;
font-size:30px;font-weight:400;letter-spacing:.5px;
color:#ede5d8;margin-bottom:6px;
}
#kp-shop .ks-hd-sub{
font-size:13.5px;font-weight:300;color:#4a4440;
}
/* ── Main layout ─────────────────────────────────────────────────────────── */
#kp-shop .ks-layout{
display:grid;
grid-template-columns:256px 1fr;
gap:36px;
align-items:start;
}
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#kp-shop .ks-sidebar{
position:sticky;
top:88px;
}
#kp-shop .ks-filter-section{
margin-bottom:6px;
border:1px solid #1a1916;
border-radius:8px;
overflow:hidden;
}
#kp-shop .ks-filter-toggle{
width:100%;
display:flex;align-items:center;justify-content:space-between;
padding:14px 16px;
background:#0f0e0c;border:none;cursor:pointer;
font-family:’Cinzel’,serif;font-size:10.5px;
letter-spacing:2px;text-transform:uppercase;
color:#8a7a60;
transition:color .2s,background .2s;
}
#kp-shop .ks-filter-toggle:hover{background:#111009;color:#d4aa6a}
#kp-shop .ks-filter-toggle.open{border-bottom:1px solid #1a1916}
#kp-shop .ks-filter-toggle svg{
transition:transform .25s;
flex-shrink:0;color:#5c4a30;
}
#kp-shop .ks-filter-toggle.open svg{transform:rotate(180deg)}
#kp-shop .ks-filter-body{
display:none;
padding:14px 16px;
background:#0f0e0c;
}
#kp-shop .ks-filter-body.open{display:block}
/* Category list */
#kp-shop .ks-cat-item{
display:flex;align-items:center;gap:10px;
padding:7px 8px;margin:0 -4px;
border-radius:5px;cursor:pointer;
transition:background .15s;
}
#kp-shop .ks-cat-item:hover{background:rgba(212,170,106,.07)}
#kp-shop .ks-cat-item.active{background:rgba(212,170,106,.1)}
#kp-shop .ks-cat-item .ks-cat-check{
width:16px;height:16px;flex-shrink:0;
border:1.5px solid #3c3228;border-radius:3px;
display:flex;align-items:center;justify-content:center;
transition:border-color .15s,background .15s;
}
#kp-shop .ks-cat-item.active .ks-cat-check{
background:#d4aa6a;border-color:#d4aa6a;
}
#kp-shop .ks-cat-name{
font-size:13px;font-weight:400;
color:#8a827a;flex:1;
transition:color .15s;
}
#kp-shop .ks-cat-item:hover .ks-cat-name,
#kp-shop .ks-cat-item.active .ks-cat-name{color:#d4aa6a}
#kp-shop .ks-cat-count{
font-size:11px;color:#3c3228;
background:#1a1916;padding:2px 6px;
border-radius:3px;
}
/* Price range slider */
#kp-shop .ks-price-vals{
display:flex;justify-content:space-between;
font-size:12.5px;color:#7a7068;
margin-bottom:14px;
}
#kp-shop .ks-price-vals strong{color:#d4aa6a;font-weight:700}
#kp-shop .ks-range-wrap{
position:relative;height:4px;
background:#2c2620;border-radius:2px;
margin:8px 8px 24px;
}
#kp-shop .ks-range-fill{
position:absolute;height:4px;background:#d4aa6a;
border-radius:2px;pointer-events:none;
}
#kp-shop .ks-range-wrap input[type=range]{
position:absolute;width:100%;top:-6px;
height:16px;background:transparent;
pointer-events:none;cursor:pointer;
-webkit-appearance:none;appearance:none;
outline:none;
}
#kp-shop .ks-range-wrap input[type=range]::-webkit-slider-thumb{
pointer-events:all;
width:18px;height:18px;
background:#d4aa6a;border-radius:50%;
border:2.5px solid #0d0c0b;
box-shadow:0 0 0 1.5px #d4aa6a;
-webkit-appearance:none;appearance:none;
cursor:grab;transition:transform .15s;
}
#kp-shop .ks-range-wrap input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);cursor:grabbing}
#kp-shop .ks-range-wrap input[type=range]::-moz-range-thumb{
pointer-events:all;
width:14px;height:14px;
background:#d4aa6a;border-radius:50%;
border:2px solid #0d0c0b;cursor:grab;
}
/* Toggle switches */
#kp-shop .ks-toggle-row{
display:flex;align-items:center;justify-content:space-between;
padding:6px 0;
}
#kp-shop .ks-toggle-label{
font-size:13px;color:#8a827a;
}
#kp-shop .ks-toggle{
position:relative;
width:38px;height:20px;flex-shrink:0;
}
#kp-shop .ks-toggle input{
opacity:0;width:0;height:0;position:absolute;
}
#kp-shop .ks-toggle-track{
position:absolute;inset:0;
background:#1e1c19;border-radius:10px;
border:1px solid #2c2620;
cursor:pointer;transition:background .2s,border-color .2s;
}
#kp-shop .ks-toggle input:checked ~ .ks-toggle-track{
background:#d4aa6a;border-color:#d4aa6a;
}
#kp-shop .ks-toggle-track::after{
content:”;position:absolute;
width:14px;height:14px;border-radius:50%;
background:#5c5248;top:2px;left:2px;
transition:transform .2s,background .2s;
}
#kp-shop .ks-toggle input:checked ~ .ks-toggle-track::after{
transform:translateX(18px);background:#0d0c0b;
}
/* Clear button */
#kp-shop .ks-clear-all{
width:100%;padding:10px;margin-top:8px;
border:1px solid #2c2620;border-radius:6px;
background:transparent;
font-size:12px;font-weight:700;
letter-spacing:.5px;text-transform:uppercase;
color:#5c5248;cursor:pointer;
transition:all .2s;
}
#kp-shop .ks-clear-all:hover{color:#d4aa6a;border-color:#3c3228}
#kp-shop .ks-clear-all.visible{display:block}
#kp-shop .ks-clear-all{display:none}
/* ── Toolbar ─────────────────────────────────────────────────────────────── */
#kp-shop .ks-toolbar{
display:flex;align-items:center;gap:12px;
flex-wrap:wrap;margin-bottom:16px;
}
#kp-shop .ks-result-count{
font-size:12.5px;color:#4a4440;flex:1;
}
#kp-shop .ks-toolbar-right{
display:flex;align-items:center;gap:8px;
}
#kp-shop .ks-sort-label{font-size:12.5px;color:#5c5248}
#kp-shop .ks-select{
background:#111009;border:1px solid #2c2620;
border-radius:5px;color:#c8beb4;
font-family:’Nunito Sans’,sans-serif;
font-size:12.5px;padding:7px 30px 7px 12px;
outline:none;cursor:pointer;
-webkit-appearance:none;appearance:none;
background-image:url(“data:image/svg+xml,%3Csvg width=’10’ height=’6′ viewBox=’0 0 10 6′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath d=’M1 1l4 4 4-4′ stroke=’%235c5248′ stroke-width=’1.5′ stroke-linecap=’round’ stroke-linejoin=’round’/%3E%3C/svg%3E”);
background-repeat:no-repeat;background-position:right 10px center;
}
#kp-shop .ks-view-btns{display:flex;gap:4px}
#kp-shop .ks-view-btn{
width:32px;height:32px;border-radius:5px;
border:1px solid #2c2620;background:transparent;
color:#5c5248;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s;
}
#kp-shop .ks-view-btn:hover{color:#d4aa6a;border-color:#3c3228}
#kp-shop .ks-view-btn.active{
background:rgba(212,170,106,.1);
border-color:#d4aa6a;color:#d4aa6a;
}
/* Mobile filter btn */
#kp-shop .ks-filter-btn{
display:none;
align-items:center;gap:8px;
padding:8px 16px;height:34px;
border:1px solid #2c2620;border-radius:6px;
background:transparent;color:#c8beb4;
font-size:12.5px;font-weight:600;
letter-spacing:.3px;cursor:pointer;
transition:all .2s;
}
#kp-shop .ks-filter-btn:hover{color:#d4aa6a;border-color:#3c3228}
#kp-shop .ks-filter-btn .ks-filter-count{
display:none;
background:#d4aa6a;color:#0d0c0b;
font-size:10px;font-weight:800;
min-width:16px;height:16px;
border-radius:8px;padding:0 4px;
align-items:center;justify-content:center;
}
#kp-shop .ks-filter-btn .ks-filter-count.show{display:flex}
/* ── Active filter pills ─────────────────────────────────────────────────── */
#kp-shop .ks-active-filters{
display:flex;gap:6px;flex-wrap:wrap;
margin-bottom:20px;
}
#kp-shop .ks-pill{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px 5px 12px;
background:rgba(212,170,106,.1);
border:1px solid rgba(212,170,106,.25);
border-radius:20px;
font-size:12px;font-weight:600;
color:#d4aa6a;cursor:pointer;
transition:background .15s;
}
#kp-shop .ks-pill:hover{background:rgba(212,170,106,.18)}
#kp-shop .ks-pill svg{color:#c49a5a;flex-shrink:0}
/* ── Product grid ────────────────────────────────────────────────────────── */
#kp-shop .ks-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
#kp-shop .ks-grid.cols-4{grid-template-columns:repeat(4,1fr)}
/* ── Product card ────────────────────────────────────────────────────────── */
#kp-shop .ks-card{
background:#111009;border:1px solid #1a1916;
border-radius:9px;overflow:hidden;
display:flex;flex-direction:column;
transition:border-color .25s,transform .25s,box-shadow .25s;
cursor:pointer;
}
#kp-shop .ks-card:hover{
border-color:#2c2620;
transform:translateY(-4px);
box-shadow:0 16px 40px rgba(0,0,0,.5);
}
#kp-shop .ks-card-img{
display:block;
position:relative;aspect-ratio:1;
overflow:hidden;background:#080706;
}
#kp-shop .ks-card-img img{
width:100%;height:100%;object-fit:cover;
transition:transform .5s ease;
}
#kp-shop .ks-card:hover .ks-card-img img{transform:scale(1.07)}
#kp-shop .ks-card-badges{
position:absolute;top:10px;left:10px;
display:flex;flex-direction:column;gap:4px;
z-index:2;
}
#kp-shop .ks-badge{
font-size:9.5px;font-weight:800;
padding:3px 8px;border-radius:4px;
letter-spacing:.7px;text-transform:uppercase;
display:inline-block;
}
#kp-shop .ks-badge-sale{background:#d4aa6a;color:#0d0c0b}
#kp-shop .ks-badge-out{background:#2c2620;color:#5c5248}
/* Quick-add overlay on hover */
#kp-shop .ks-card-overlay{
position:absolute;inset:0;
background:rgba(13,12,11,.65);
display:flex;align-items:flex-end;
padding:14px;
opacity:0;
transition:opacity .25s;
z-index:3;
}
#kp-shop .ks-card:hover .ks-card-overlay{opacity:1}
#kp-shop .ks-overlay-atc{
width:100%;padding:10px 0;
background:#d4aa6a;border:none;
border-radius:6px;
color:#0d0c0b;font-size:12px;font-weight:800;
letter-spacing:.7px;text-transform:uppercase;
cursor:pointer;transition:background .2s;
}
#kp-shop .ks-overlay-atc:hover{background:#c49a5a}
#kp-shop .ks-overlay-atc:disabled{background:#2c2620;color:#4a4440;cursor:not-allowed}
#kp-shop .ks-overlay-atc.adding{background:#b88a4a}
#kp-shop .ks-overlay-atc.added{background:transparent;border:1.5px solid #d4aa6a;color:#d4aa6a}
#kp-shop .ks-card-body{
padding:12px 14px 6px;
flex:1;display:flex;flex-direction:column;gap:4px;
}
#kp-shop .ks-card-cat{
font-size:9.5px;font-weight:700;
letter-spacing:1.5px;text-transform:uppercase;color:#3a3530;
}
#kp-shop .ks-card-name{
font-size:13px;font-weight:600;
line-height:1.4;color:#cec6ba;
}
#kp-shop .ks-card-name a{color:inherit !important}
#kp-shop .ks-card-name a:hover{color:#d4aa6a !important}
#kp-shop .ks-stars{display:flex;gap:2px;margin-top:1px}
#kp-shop .ks-star-f{width:11px;height:11px;color:#d4aa6a}
#kp-shop .ks-star-e{width:11px;height:11px;color:#2c2620}
#kp-shop .ks-price-row{
display:flex;align-items:baseline;gap:7px;
margin-top:auto;padding:6px 0 0;
}
#kp-shop .ks-price{font-size:14.5px;font-weight:700;color:#d4aa6a}
#kp-shop .ks-price-orig{font-size:11.5px;color:#4a4440;text-decoration:line-through}
#kp-shop .ks-card-foot{padding:8px 14px 13px}
#kp-shop .ks-card-atc{
width:100%;padding:8px 0;
border-radius:6px;border:1px solid #2c2620;
background:transparent;color:#7a7068;
font-size:11.5px;font-weight:700;
letter-spacing:.4px;text-transform:uppercase;
transition:all .2s;
}
#kp-shop .ks-card-atc:hover:not(:disabled){
background:#d4aa6a;border-color:#d4aa6a;color:#0d0c0b;
}
#kp-shop .ks-card-atc:disabled{color:#2c2620;border-color:#1a1916;cursor:not-allowed}
#kp-shop .ks-card-atc.added{background:rgba(212,170,106,.1);border-color:#d4aa6a;color:#d4aa6a}
/* ── List view ───────────────────────────────────────────────────────────── */
#kp-shop .ks-grid.list{
grid-template-columns:1fr;gap:10px;
}
#kp-shop .ks-grid.list .ks-card{
flex-direction:row;align-items:stretch;
}
#kp-shop .ks-grid.list .ks-card-img{
width:160px;height:auto;aspect-ratio:auto;flex-shrink:0;
border-radius:0;
}
#kp-shop .ks-grid.list .ks-card-overlay{display:none}
#kp-shop .ks-grid.list .ks-card-body{
padding:16px 14px 8px;justify-content:center;
}
#kp-shop .ks-grid.list .ks-card-name{font-size:14px}
#kp-shop .ks-grid.list .ks-card-foot{
padding:8px 14px 16px;display:flex;
align-items:flex-end;flex-shrink:0;
}
#kp-shop .ks-grid.list .ks-card-atc{width:140px}
/* ── Skeleton ────────────────────────────────────────────────────────────── */
#kp-shop .ks-skel{
background:#111009;border:1px solid #1a1916;border-radius:9px;overflow:hidden;
}
#kp-shop .ks-skel-b{
background:#181612;border-radius:4px;
animation:ks-p 1.5s ease-in-out infinite;
}
@keyframes ks-p{0%,100%{opacity:.2}50%{opacity:.6}}
/* ── Pagination ──────────────────────────────────────────────────────────── */
#kp-shop .ks-pager{
display:flex;align-items:center;justify-content:center;
gap:6px;margin-top:40px;
}
#kp-shop .ks-pg{
width:36px;height:36px;border-radius:6px;
border:1px solid #2c2620;background:transparent;
color:#7a7068;font-size:13px;font-weight:600;
display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .2s;
}
#kp-shop .ks-pg:hover:not(:disabled){color:#d4aa6a;border-color:#d4aa6a}
#kp-shop .ks-pg.active{background:#d4aa6a;border-color:#d4aa6a;color:#0d0c0b}
#kp-shop .ks-pg:disabled{opacity:.3;cursor:not-allowed}
#kp-shop .ks-pg-dots{color:#3a3530;font-size:13px;padding:0 2px}
/* ── Empty state ─────────────────────────────────────────────────────────── */
#kp-shop .ks-empty{
grid-column:1/-1;
text-align:center;padding:72px 24px;
}
#kp-shop .ks-empty-icon{
width:52px;height:52px;
border:1.5px solid #2c2620;border-radius:50%;
display:flex;align-items:center;justify-content:center;
margin:0 auto 16px;color:#3a3530;
}
#kp-shop .ks-empty p{font-size:14px;color:#4a4440;margin-bottom:6px}
#kp-shop .ks-empty span{font-size:12.5px;color:#3a3530}
/* ── Mobile overlay + drawer ─────────────────────────────────────────────── */
#ks-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,.7);
z-index:10000;
display:none;
opacity:0;
transition:opacity .3s;
}
#ks-overlay.open{display:block;opacity:1}
#kp-shop .ks-sidebar-drawer{
position:fixed;top:0;left:0;bottom:0;
width:280px;
background:#0d0c0b;
border-right:1px solid #1e1c19;
z-index:10001;
overflow-y:auto;
padding:20px 16px 40px;
transform:translateX(-100%);
transition:transform .3s cubic-bezier(.32,.72,0,1);
}
#kp-shop .ks-sidebar-drawer.open{transform:translateX(0)}
#kp-shop .ks-drawer-head{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:20px;padding-bottom:16px;
border-bottom:1px solid #1e1c19;
}
#kp-shop .ks-drawer-title{
font-family:’Cinzel’,serif;
font-size:12px;letter-spacing:2px;text-transform:uppercase;
color:#8a7a60;
}
#kp-shop .ks-drawer-close{
background:none;border:none;cursor:pointer;
color:#5c5248;padding:4px;
transition:color .2s;
}
#kp-shop .ks-drawer-close:hover{color:#d4aa6a}
/* ── Toast ───────────────────────────────────────────────────────────────── */
#ks-toast{
position:fixed;bottom:28px;right:28px;
background:#181612;border:1px solid #2c2620;
border-left:3px solid #d4aa6a;
border-radius:8px;padding:12px 18px;
font-family:’Nunito Sans’,sans-serif;
font-size:13px;color:#d4ccc2;
z-index:99999;max-width:300px;
transform:translateY(90px);opacity:0;
transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;
}
#ks-toast.show{transform:translateY(0);opacity:1}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1060px){
#kp-shop .ks-layout{grid-template-columns:1fr}
#kp-shop .ks-sidebar{display:none;position:static}
#kp-shop .ks-filter-btn{display:flex}
#kp-shop .ks-grid{grid-template-columns:repeat(3,1fr)}
#kp-shop .ks-grid.cols-4{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
#kp-shop{padding:24px 0 56px}
#kp-shop .ks-wrap{padding:0 16px}
#kp-shop .ks-grid,
#kp-shop .ks-grid.cols-4{grid-template-columns:repeat(2,1fr);gap:10px}
#kp-shop .ks-grid.list .ks-card-img{width:110px}
#kp-shop .ks-grid.list .ks-card-atc{width:100px}
#kp-shop .ks-hd-title{font-size:22px}
}
@media(max-width:420px){
#kp-shop .ks-grid,
#kp-shop .ks-grid.cols-4{grid-template-columns:1fr}
#kp-shop .ks-grid.list .ks-card{flex-direction:column}
#kp-shop .ks-grid.list .ks-card-img{width:100%;aspect-ratio:1}
}