/* CORDEL — shop archive styles */
/* ══ page header ══ */
.pagehead{border-bottom:1px solid var(--line);padding:clamp(40px,6vw,80px) var(--pad) clamp(28px,3.5vw,44px)}

.crumb{font-family:var(--mono);font-size:14px;color:var(--faint);letter-spacing:.04em;margin-bottom:22px}

.crumb a:hover{color:var(--oxblood)}
.crumb span{color:var(--txt-2)}

.pagehead h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(38px,6vw,84px);line-height:.95}

.pagehead .sub{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-top:20px}

.pagehead .sub p{font-size:15px;color:var(--txt-2);max-width:52ch;line-height:1.55}

.pagehead .sub .count{font-family:var(--mono);font-size:14px;color:var(--txt-2);white-space:nowrap}

.pagehead .sub .count b{color:var(--oxblood);font-weight:600}


/* ══ layout: sidebar + grid ══ */
.shoplayout{display:grid;grid-template-columns:320px 1fr}

.filters{border-right:1px solid var(--line);padding:0}

.drawer-head{display:none}

.filters-inner{position:sticky;top:70px;padding:30px var(--pad) 40px;max-height:calc(100vh - 70px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}

.filters-inner::-webkit-scrollbar{width:6px}

.filters-inner::-webkit-scrollbar-track{background:transparent}

.filters-inner::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.filters-inner::-webkit-scrollbar-thumb:hover{background:var(--tan)}

.fgroup{border-bottom:1px solid var(--line);padding:0}

.fgroup:first-child{padding-top:0}

/* collapsible filter group */
.fgroup>summary{display:flex;align-items:center;gap:10px;padding:20px 0;cursor:pointer;list-style:none;user-select:none}
.fgroup>summary::-webkit-details-marker{display:none}
.fg-t{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--txt);flex:1}
.fg-caret{width:10px;height:10px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(45deg);margin-top:-4px;transition:transform .22s var(--e2);flex-shrink:0}
.fgroup[open]>summary .fg-caret{transform:rotate(-135deg);margin-top:2px}
.fgroup>summary:hover .fg-caret{border-color:var(--oxblood)}
.fg-body{padding-bottom:18px}

.fgroup>summary .clr{font-family:var(--mono);font-size:13px;color:var(--faint);cursor:pointer;font-weight:400;text-transform:none;letter-spacing:0}

.fgroup>summary .clr:hover{color:var(--oxblood)}

.fopt{display:flex;align-items:center;gap:11px;padding:8px 0;cursor:pointer;font-size:14.5px;color:var(--txt-2);transition:color .2s;line-height:1.35}
.fopt>span:not(.fcount){flex:1;min-width:0}

.fopt:hover{color:var(--txt)}

.fopt input{appearance:none;width:15px;height:15px;border:1.5px solid var(--line);border-radius:3px;flex-shrink:0;position:relative;transition:all .2s;cursor:pointer}

.fopt input:checked{background:var(--oxblood);border-color:var(--oxblood)}

.fopt input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--bone);border-width:0 2px 2px 0;transform:rotate(45deg)}

.fopt.on{color:var(--txt);font-weight:500}

.fopt .fcount{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--faint)}

/* shade swatches */
.shades{display:flex;flex-wrap:wrap;gap:10px}

.shade{width:26px;height:26px;border-radius:3px;cursor:pointer;outline:1px solid rgba(0,0,0,.12);outline-offset:2px;position:relative;transition:transform .2s}

.shade:hover{transform:translateY(-2px)}

.shade.on{outline:2px solid var(--oxblood);outline-offset:2px}

.shade.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.5)}


/* ══ product area ══ */
.parea{display:flex;flex-direction:column}

/* toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--pad);border-bottom:1px solid var(--line);position:sticky;top:70px;background:rgba(232,226,214,.92);backdrop-filter:blur(10px);z-index:40}

.toolbar .tl{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:14px;color:var(--txt-2)}

.toolbar .tl .rescount b{color:var(--txt);font-weight:600}

.filter-toggle{display:none;font-family:var(--mono);font-size:14px;font-weight:600;border:1px solid var(--txt);padding:9px 16px;background:none;align-items:center;gap:8px}

.toolbar .tr{display:flex;align-items:center;gap:18px}

.densitytoggle{display:flex;gap:4px}

.densitytoggle button{width:30px;height:30px;border:1px solid var(--line);background:none;display:grid;place-items:center;transition:all .2s}

.densitytoggle button.on{border-color:var(--txt);background:var(--txt)}

.densitytoggle button.on svg{stroke:var(--bone)}

.densitytoggle button svg{width:14px;height:14px;stroke:var(--txt-2);fill:none;stroke-width:1.6}

.sortwrap{position:relative;font-family:var(--mono);font-size:14px}

.sortwrap select{appearance:none;background:none;border:1px solid var(--line);padding:9px 32px 9px 14px;font-family:var(--mono);font-size:14px;color:var(--txt);cursor:pointer;border-radius:0}

.sortwrap::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--txt-2)}


/* active filter chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px var(--pad);border-bottom:1px solid var(--line);min-height:0}

.chips:empty{display:none}

.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;background:var(--ink);color:var(--bone);padding:6px 10px;letter-spacing:.02em}

.chip button{background:none;border:0;color:var(--brass);font-size:14px;line-height:1;cursor:pointer;padding:0}

.chip button:hover{color:var(--bone)}

.chips .clrall{font-family:var(--mono);font-size:14px;color:var(--oxblood);border:0;background:none;cursor:pointer;text-decoration:underline;padding:6px 4px}


/* grid */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px);padding:clamp(24px,3vw,40px) var(--pad) clamp(32px,4vw,52px)}

.pgrid.dense{grid-template-columns:repeat(4,1fr)}

.pcard{border:1px solid var(--line);display:flex;flex-direction:column;background:var(--bone);transition:all .3s}

.pcard:hover{background:var(--bone-2);border-color:var(--tan)}

.pcard .pimg{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--bone-2)}

.pcard .pimg img{position:absolute;inset:0;transition:opacity .4s var(--e1),transform 1.1s var(--e1)}

.pcard .pimg img.alt{opacity:0}

.pcard:hover .pimg img.main{opacity:0}

.pcard:hover .pimg img.alt{opacity:1}

.pcard:hover .pimg img{transform:scale(1.05)}

.pcard .pimg .flag{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:14px;letter-spacing:.03em;text-transform:uppercase;background:var(--ink);color:var(--bone);padding:5px 10px;z-index:2}

.pcard .pbody{padding:18px 22px 24px;display:flex;flex-direction:column;gap:7px}

.pcard .pcat{font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}

.pcard .pname{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15}

.pcard .prate{font-size:14px;color:var(--txt-2);display:flex;align-items:center;gap:6px}

.pcard .prate .rstars{color:var(--brass-ink);letter-spacing:1px}

.pcard .prate .rcount{color:var(--faint)}

.pcard .pswatch{display:flex;gap:6px;margin-top:2px}

.pcard .pswatch i{width:14px;height:14px;border-radius:2px;outline:1px solid rgba(0,0,0,.1);outline-offset:1px}

.pcard .pprice{font-size:16px;font-weight:600;margin-top:4px}

.pcard .pprice s{color:var(--faint);font-weight:400;margin-right:8px}

.pcard .pprice{color:var(--txt)}

.pcard .pprice:has(s){color:var(--oxblood)}


/* empty state */
.empty{grid-column:1/-1;padding:80px var(--pad);text-align:center;color:var(--txt-2)}

.empty h3{font-size:24px;font-weight:700;margin-bottom:10px;color:var(--txt)}

.empty button{margin-top:18px;font-family:var(--mono);font-size:14px;font-weight:600;border:1px solid var(--txt);background:none;padding:11px 22px;cursor:pointer}

.empty button:hover{background:var(--ink);color:var(--bone)}


/* load more */
.loadmore{padding:44px var(--pad) 64px;text-align:center;border-bottom:1px solid var(--line)}

.loadmore button{font-family:var(--mono);font-size:14px;font-weight:600;border:1px solid var(--txt);background:none;padding:15px 40px;cursor:pointer;transition:all .25s}

.loadmore button:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}

.loadmore .lm-count{font-family:var(--mono);font-size:14px;color:var(--faint);margin-top:14px}


/* mobile filter drawer scrim */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;opacity:0;visibility:hidden;transition:opacity .3s}

.scrim.on{opacity:1;visibility:visible}


/* footer (shared) */
footer{background:#0E0B09;color:#A79E8C;border-top:1px solid var(--oxblood)}


@media(max-width:1080px){
  .shoplayout{grid-template-columns:1fr}
  .filters{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:88vw;background:var(--bone);z-index:200;border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .35s var(--e2);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .filters::-webkit-scrollbar{width:6px}
  .filters::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .filters.on{transform:translateX(0)}
  .filters-inner{position:static;max-height:none;padding-top:76px}
  /* drawer header bar with styled close */
  .drawer-head{display:flex;position:absolute;top:0;left:0;right:0;height:56px;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid var(--line);background:var(--bone)}
  .drawer-head .dh-title{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--txt)}
  .filter-close{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer;transition:all .2s var(--e1);padding:0}
  .filter-close:hover{background:var(--ink);border-color:var(--ink)}
  .filter-close svg{width:14px;height:14px;stroke:var(--txt);stroke-width:1.8;fill:none;transition:stroke .2s}
  .filter-close:hover svg{stroke:var(--bone)}
  .filter-toggle{display:inline-flex}
  .pgrid.dense{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:760px){
  .nav-links{display:none}.burger{display:block}
  .strip-in{font-size:14px}
  .strip-in .lt a:nth-child(2){display:none}
  .strip-in .rt .soc{gap:0;font-size:0}
  .strip-in .rt .soc svg{width:15px;height:15px}
  .pgrid,.pgrid.dense{grid-template-columns:repeat(2,1fr)}
  .densitytoggle{display:none}
  .pagehead .sub p{display:none}
  .foot .fb{grid-column:1/13}.fcol{grid-column:span 6!important}
}

@media(max-width:460px){
  .pgrid,.pgrid.dense{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01s!important}}
/* always-visible add-to-cart on shop/category product cards */
.pcard{display:flex;flex-direction:column}
.pcard .pcard-link{display:flex;flex-direction:column;flex:1}
.pcard .pimg{position:relative}
.pcard .pcard-add{display:block;width:100%;background:var(--oxblood);color:var(--bone);border:0;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;padding:14px;cursor:pointer;text-align:center;transition:background .2s}
.pcard .pcard-add:hover{background:var(--ink)}
.pcard .pcard-add.is-loading{color:transparent;position:relative}
.pcard .pcard-add.is-done{color:transparent;position:relative}
.pcard .pcard-add-view{background:none;color:var(--txt);border-top:1px solid var(--line)}
.pcard .pcard-add-view:hover{background:var(--ink);color:var(--bone)}

/* ============================================================
   SURFACES — cards lift off the bone page as warm paper, held by
   hairline rules. Text uses the tonal steps; oxblood carries state.
   ============================================================ */
.pcard{background:var(--paper);border-color:var(--line)}
.pimg{background:var(--paper)}
.pcard:hover{border-color:var(--oxblood)}
.pcat{color:var(--tan)}
.pname{color:var(--txt)}
.pprice{color:var(--txt)}
.filters{border-right:1px solid var(--line)}
.fgroup{border-bottom-color:var(--line)}
.fg-t{color:var(--txt)}
.fopt{color:var(--txt-2)}
.fopt:hover{color:var(--oxblood)}
.fcount{color:var(--faint)}
.fgroup>summary .clr{color:var(--oxblood)}
.toolbar{background:var(--paper-90);border-color:var(--line)}
.shop-hd{border-bottom-color:var(--line)}
.flag{background:var(--ink);color:var(--bone)}