/* Collection: products-per-row selector, Quick add under cards, featured large cards, quick-add sheet (7 Oct) */
.gsel{display:flex;align-items:center;gap:2px}
.gsel__l{font:500 10px/1 var(--ff);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:6px}
.gsel__b{width:24px;height:24px;display:grid;place-items:center;background:transparent;border:1px solid transparent;color:var(--mute);font:400 11px/1 var(--ff);cursor:pointer;padding:0}
.gsel__b:hover{color:var(--ink)}
.gsel__b.on{color:var(--ink);border-color:var(--line)}
.gsel--m{display:none}
@media (max-width:989px){.gsel--d{display:none}.gsel--m{display:grid}}
@media (max-width:749px){.toolbar .gsel{margin-left:auto}.gsel__b.gsel--m{width:22px}}
/* columns: desktop 2/4/6, phones 1/2/3/4 */
.grid--coll{grid-auto-flow:row dense;column-gap:0}
@media (min-width:990px){
  html[data-gd="2"] .grid--coll{grid-template-columns:repeat(2,1fr)}
  html[data-gd="4"] .grid--coll{grid-template-columns:repeat(4,1fr)}
  html[data-gd="6"] .grid--coll{grid-template-columns:repeat(6,1fr);row-gap:24px}
}
@media (max-width:989px){
  html[data-gm="1"] .grid--coll{grid-template-columns:1fr}
  html[data-gm="2"] .grid--coll{grid-template-columns:repeat(2,1fr)}
  html[data-gm="3"] .grid--coll{grid-template-columns:repeat(3,1fr);row-gap:18px}
  html[data-gm="4"] .grid--coll{grid-template-columns:repeat(4,1fr);row-gap:14px}
}
/* small cards: keep text readable */
@media (min-width:990px){html[data-gd="6"] .grid--coll .card__info{padding:8px 8px 0}html[data-gd="6"] .grid--coll .card__title{font-size:11.5px}html[data-gd="6"] .grid--coll .card__price{font-size:11.5px}html[data-gd="6"] .grid--coll .card__add{height:30px;font-size:9.5px;letter-spacing:.12em}}
@media (max-width:989px){html[data-gm="3"] .grid--coll .card__info{padding:7px 6px 0}html[data-gm="3"] .grid--coll .card__title{font-size:10.5px}html[data-gm="3"] .grid--coll .card__price{font-size:10.5px}html[data-gm="3"] .grid--coll .card__badge{display:none}html[data-gm="3"] .grid--coll .card__add{height:28px;font-size:9px;letter-spacing:.08em}html[data-gm="4"] .grid--coll .card__info{padding:5px 3px 0}html[data-gm="4"] .grid--coll .card__title{font-size:9px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}html[data-gm="4"] .grid--coll .card__price{font-size:9px}html[data-gm="4"] .grid--coll .card__badge{display:none}html[data-gm="4"] .grid--coll .card__add{height:24px;margin-top:6px;padding:0 2px;font-size:7.5px;letter-spacing:.04em}}
/* Quick add button under every card */
.card__add{display:flex;align-items:center;justify-content:center;width:100%;height:34px;margin-top:10px;padding:0 8px;background:transparent;border:1px solid var(--line);color:var(--ink);font:500 10.5px/1 var(--ff);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s,color .2s;white-space:nowrap;overflow:hidden}
.card__add:hover{border-color:var(--ink)}
.card__add:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.card__add[disabled]{opacity:.6;cursor:default}
.card__add--so{color:var(--mute)}
.rail .card__add{height:32px;font-size:10px}
/* Featured pairs (7 Oct v4): pair side by side a little bigger (desktop 12 + 12 of 40) with two 8-wide neighbours, all the same image height, so gold/silver pairs below never split across rows; phones: pair is its own row of two */
@media (min-width:990px){
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat{grid-template-columns:repeat(40,1fr);grid-auto-flow:row}
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat>.card{grid-column:span 10}
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat>.card--feat{grid-column:span 12}
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat>.card--nb{grid-column:span 8}
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat>.card--nb .card__media{aspect-ratio:8/14.4}
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat>.card--feat .card__title{font-size:14px}
}
/* Quick-add sheet */
.qa{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;visibility:hidden}
.qa.open{visibility:visible}
.qa__bg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
.qa.open .qa__bg{opacity:1}
.qa__p{position:relative;width:100%;max-width:520px;background:var(--bg);color:var(--ink);border-top:1px solid var(--line);padding:18px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);max-height:88vh;overflow:auto}
.qa.open .qa__p{transform:none}
@media (min-width:750px){.qa{align-items:center}.qa__p{border:1px solid var(--line);transform:translateY(16px);opacity:0;transition:transform .25s,opacity .25s}.qa.open .qa__p{opacity:1}}
.qa__x{position:absolute;top:10px;right:10px;width:34px;height:34px;background:transparent;border:0;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.qa__h{display:flex;gap:14px;align-items:center;padding-right:34px;margin-bottom:14px}
.qa__h img{width:72px;height:86px;object-fit:cover;background:var(--soft);flex:none}
.qa__t{font:400 14px/1.35 var(--ff);margin:0 0 4px}
.qa__pr{font-size:13px;color:var(--mute)}
.qa__o{margin:14px 0 0}
.qa__ol{display:flex;justify-content:space-between;font:500 10px/1 var(--ff);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.qa__ol a{color:var(--mute)}
.qa__vs{display:flex;flex-wrap:wrap;gap:6px}
.qa__v{min-width:44px;height:38px;padding:0 12px;background:transparent;border:1px solid var(--line);color:var(--ink);font:400 12px/1 var(--ff);cursor:pointer}
.qa__v:hover{border-color:var(--mute)}
.qa__v.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.qa__v.so{color:var(--mute);text-decoration:line-through}
.qa__go{margin-top:18px}
.qa__go[disabled]{opacity:.45;cursor:default}
.qa__n{display:block;margin-top:10px;font-size:12px;color:var(--mute);text-align:center}
.qa__n a{color:var(--ink)}
.qa__full{display:block;margin-top:12px;text-align:center;font:500 10px/1 var(--ff);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* 7 Oct: wide card beside the first featured pair (Crucifix + Silen set next to the Crucifix pair) */
.grid--feat>.card--wide{grid-column:span 2}
@media (min-width:990px){
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat>.card--wide{grid-column:span 16}
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat>.card--wide .card__media{aspect-ratio:16/14.4}
  html:not([data-gd="2"]):not([data-gd="6"]) .grid--feat>.card--wide .card__title{font-size:14px}
}
@media (max-width:989px){
  .grid--feat>.card--wide .card__media{aspect-ratio:4/3}
  html[data-gm="1"] .grid--feat>.card--wide{grid-column:auto}
  html[data-gm="1"] .grid--feat>.card--wide .card__media{aspect-ratio:auto}
  html[data-gm="3"] .grid--feat>.card--wide{grid-column:span 3}
  html[data-gm="4"] .grid--feat>.card--wide{grid-column:span 4}
}
/* 11 Oct: line up Quick add buttons across a row (titles wrap to 1 or 2 lines, some cards have a badge). Card fills its grid cell, info area stretches, price absorbs the spare height so the button sits at the bottom. */
.card{display:flex;flex-direction:column}
.card>.card__m{flex:0 0 auto}
.card>.card__info{flex:1 0 auto;display:flex;flex-direction:column}
.card__info>.card__badge{align-self:flex-start}
.card__info>.card__price{flex-grow:1}
.card__info>.card__add{flex:0 0 auto}