/* Crosby Core: shop grid. Inherits the page's typefaces; only colour and rhythm are set here. */
.cbs{
  --cbs-ink:#1d1b18; --cbs-mute:#6e6a62; --cbs-line:#cfcac0;
  --cbs-tile:#dad6cc; --cbs-paper:#efece6; --cbs-accent:var(--brass,#9c7b45);
  color:var(--cbs-ink); font:inherit; max-width:1320px; margin:0 auto;
  padding:0 clamp(16px,4vw,48px) clamp(40px,6vw,80px); box-sizing:border-box;
}
.cbs *,.cbs *::before,.cbs *::after{box-sizing:border-box}
.cbs a{color:inherit}
.cbs-host{overflow:visible}

/* Bar */
.cbs-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:20px 0;border-top:1px solid var(--cbs-line);border-bottom:1px solid var(--cbs-line);position:relative}
.cbs-filters{flex:1 1 100%;order:2}
.cbs-filters>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border:1px solid var(--cbs-ink);border-radius:999px;font-size:.95rem;user-select:none}
.cbs-filters>summary::-webkit-details-marker{display:none}
.cbs-filters>summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.cbs-filters[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.cbs-count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;
  background:var(--cbs-ink);color:var(--cbs-paper);font-size:.72rem}
.cbs-filters__panel{display:grid;gap:22px;padding:22px 0 6px}
.cbs-filters__h{margin:0 0 10px;font-size:.85rem;color:var(--cbs-mute)}
.cbs-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cbs-chip{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--cbs-line);
  text-decoration:none;font-size:.9rem;line-height:1.2;transition:border-color .15s,background .15s}
.cbs-chip span{color:var(--cbs-mute);font-size:.8em;margin-left:2px}
.cbs-chip:hover{border-color:var(--cbs-ink)}
.cbs-chip.is-on{background:var(--cbs-ink);border-color:var(--cbs-ink);color:var(--cbs-paper)}
.cbs-chip.is-on span{color:inherit;opacity:.7}
.cbs-clear{font-size:.9rem;text-underline-offset:3px}

.cbs-search{order:1;display:flex;gap:8px;flex:1 1 420px;justify-content:flex-end;flex-wrap:wrap}
.cbs-search input,.cbs-search select{font:inherit;font-size:.95rem;color:var(--cbs-ink);background:transparent;
  border:1px solid var(--cbs-line);border-radius:999px;padding:10px 16px;min-height:44px}
.cbs-search input{flex:1 1 200px;min-width:0}
.cbs-search select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.cbs-search button{font:inherit;font-size:.95rem;border:0;border-radius:999px;padding:10px 20px;min-height:44px;
  background:var(--cbs-ink);color:var(--cbs-paper);cursor:pointer}
.cbs-search input:focus-visible,.cbs-search select:focus-visible,.cbs-search button:focus-visible,
.cbs a:focus-visible,.cbs-filters>summary:focus-visible{outline:2px solid var(--cbs-accent);outline-offset:3px}
.cbs .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cbs-status{margin:18px 0 26px;font-size:.9rem;color:var(--cbs-mute)}

/* Grid: images carry the page; text is quiet underneath. */
.cbs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px}
@media (max-width:1100px){.cbs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.cbs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px}}

.cbs-card{display:flex;flex-direction:column;min-width:0}
.cbs-card__media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--cbs-tile)}
.cbs-card__img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;
  transition:opacity .45s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.cbs-card__img--alt{opacity:0}
@media (hover:hover){
  .cbs-card:hover .cbs-card__img--alt{opacity:1}
  .cbs-card:hover .cbs-card__img{transform:scale(1.03)}
}
.cbs-card__badge{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;
  background:var(--cbs-paper);font-size:.75rem}
.cbs-card__body{padding-top:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.cbs-card__name{margin:0;font-size:1rem;font-weight:400;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cbs-card__name a{text-decoration:none}
.cbs-card__price{margin:2px 0 0;font-size:.95rem}
.cbs-card__price del{color:var(--cbs-mute);margin-right:6px;font-size:.88em}
.cbs-card__price ins{text-decoration:none}
.cbs-card__price .woocommerce-price-suffix{display:none}
.cbs-card__lead{margin:0;font-size:.8rem;color:var(--cbs-mute)}
.cbs-card__add{margin-top:10px;align-self:flex-start;font-size:.85rem;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--cbs-line);transition:text-decoration-color .15s}
.cbs-card__add:hover{text-decoration-color:currentColor}
.cbs-card__add.is-added{color:var(--cbs-accent)}
@media (max-width:720px){.cbs-card__name{font-size:.92rem}.cbs-card__lead{display:none}}

.cbs-foot{display:flex;justify-content:center;padding-top:48px}
.cbs-more{display:inline-block;padding:14px 32px;border:1px solid var(--cbs-ink);border-radius:999px;
  text-decoration:none;font-size:.95rem;transition:background .2s,color .2s}
.cbs-more:hover{background:var(--cbs-ink);color:var(--cbs-paper)}
.cbs-end,.cbs-empty{color:var(--cbs-mute);text-align:center;max-width:52ch;margin:0 auto}
.cbs-empty{padding:48px 0}

/* Trending rail */
.cbs--trend{padding-bottom:clamp(24px,4vw,48px)}
.cbs-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,24%);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.cbs-rail .cbs-card{scroll-snap-align:start}
@media (max-width:720px){.cbs-rail{grid-auto-columns:62%}}

@media (prefers-reduced-motion:reduce){.cbs *{transition:none!important}}