/* =====================================================================
   The product list and the product card.

   A row reads left to right the way the range is thought about: whose it is
   (the supplier's line, hard against the picture), what it is (its SKU, its
   collection, its type) and, biggest, its number. Every figure sits on the
   baseline of that number, so a row reads as one line. Variants hang from
   their family on a thin line, and the family's own row is set small, so the
   pieces themselves lead.
   ===================================================================== */

.plist{padding-bottom:64px}
.prow,.plist-heads{grid-template-columns:minmax(0,1fr) repeat(4,96px) 20px repeat(3,150px)}
/* --pic is the picture's size. --slot is the same on every row, the widest
   picture with its supplier line, so the words beside it start on one line
   down the whole list, whether the row is a product, a family or a variant. */
.prow{--pic:72px;--slot:74px;--pad-t:14px;--pad-b:14px;
  display:grid;column-gap:16px;align-items:last baseline;padding:var(--pad-t) var(--gutter) var(--pad-b);border-top:1px solid var(--hair);
  cursor:pointer;transition:background-color .12s}
.prow.top{border-top:none}
.prow:hover,.prow.open{background-color:var(--raised)}
.prow.fam{--pic:44px;--pad-t:12px;--pad-b:6px}
.prow.kid{--pic:60px;--pad-t:8px;--pad-b:8px;border-top:none;
  background-image:linear-gradient(var(--hair),var(--hair));background-repeat:no-repeat;
  background-size:calc(100% - 2 * var(--gutter) - 12px) 1px;background-position:right var(--gutter) top}
.prow.kid.first{background-image:none}
.prow.kid.last{--pad-b:14px}

.pid{position:relative;display:grid;grid-template-columns:var(--slot) minmax(0,1fr);column-gap:16px;align-items:start;min-width:0}
.pic{display:flex}
.prow.kid .pic{margin-left:12px}
.pic>i{width:2px;display:block;flex:0 0 2px}
.pic img,.pic .none{width:var(--pic,72px);height:var(--pic,72px);object-fit:cover;display:block;background:var(--sunk)}
.pic .none{display:flex;align-items:center;justify-content:center;color:var(--faint)}
.pstack{height:var(--pic);display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.psku{font-size:10px;line-height:11px;letter-spacing:.04em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pwhat{display:flex;flex-direction:column;min-width:0}
.pcoll{font-size:9.5px;line-height:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--quiet)}
.pkind{font-size:13px;line-height:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnum{font-size:28px;line-height:22px;font-weight:300;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pnum em{font-style:normal}
.prow.fam .pwhat{flex-direction:row;align-items:baseline;gap:8px}
.prow.fam .pcoll{line-height:15px}
.prow.fam .pkind{font-size:12.5px;line-height:15px;color:var(--quiet)}
.prow.fam .pnum{font-size:18px;line-height:14px;color:var(--quiet)}
.prow.kid .pcoll{font-size:9px;line-height:11px}
.prow.kid .pkind{font-size:12.5px;line-height:15px}
.prow.kid .pnum{font-size:24px;line-height:19px}
.edited-mark{margin-left:6px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);vertical-align:2px}

/* the line a variant hangs from: down from under its family's picture, across into its own */
.guide{position:absolute;left:5px;top:calc(-1 * var(--pad-t));bottom:calc(-1 * var(--pad-b) - 6px);width:1px;background:var(--guide)}
.guide-tick{position:absolute;left:5px;top:calc(var(--pic) / 2);width:7px;height:1px;background:var(--guide)}
.prow.kid.first .guide{top:calc(-1 * var(--pad-t) - 10px)}
.prow.kid.last .guide{bottom:auto;height:calc(var(--pad-t) + var(--pic) / 2)}

.pc{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.pc small{display:flex;align-items:center;justify-content:flex-end;gap:3px;height:15px;font-size:9.5px;color:var(--quiet);white-space:nowrap}
.pc b{font-size:14px;line-height:1.25;font-weight:300;color:var(--quiet);white-space:nowrap;font-variant-numeric:tabular-nums}
.pc.lead b{font-size:16px;font-weight:400;color:var(--ink)}
.pc b.zero,.pc b .zero{color:var(--faint)}
.pc .hi{color:var(--faint)}
.pc .unit{font-size:10px;color:var(--faint)}
.pc .from{display:none}
.prow.fam .pc small{height:12px}
.prow.fam .pc b,.prow.fam .pc.lead b{font-size:12.5px;font-weight:300;color:var(--quiet)}
.plist-more{padding:22px var(--gutter);font-size:12.5px;color:var(--quiet)}
.sold-head{display:flex;justify-content:flex-end;align-items:center;gap:7px}
.sold-head button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
.sold-head .days{letter-spacing:.04em;text-transform:none;padding:1px 0 2px;border-bottom:1px solid transparent;color:var(--faint)}
.sold-head .days:hover{color:var(--quiet)}
.sold-head .days.on{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- The toolbar: the search first, the tools inside its right end ---------- */
.plist-top{position:sticky;top:0;z-index:6;background:var(--ground)}
.psearch{height:60px;box-sizing:border-box;display:flex;align-items:center;gap:4px;padding:0 var(--gutter);border-bottom:1px solid var(--rule)}
.psearch-field{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:10px;color:var(--quiet);cursor:text}
.psearch-field input{flex:1;min-width:0;height:100%;background:none;border:none;outline:none;font:inherit;font-size:15px;letter-spacing:.02em;color:var(--ink)}
.psearch-field input::placeholder{color:var(--faint)}
.ptools{display:flex;align-items:center;gap:4px}
.ptools-sep{width:1px;height:18px;margin:0 12px;background:var(--rule)}
.ptool-wrap{position:relative;display:flex}
.ptool{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;
  border-bottom:1px solid transparent;color:var(--quiet);cursor:pointer}
.ptool:hover,.ptool.on{color:var(--ink)}
.ptool.on{border-bottom-color:var(--ink)}
.ptool>i{position:absolute;top:4px;right:2px;min-width:14px;height:14px;box-sizing:border-box;padding:0 3px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:9px;font-weight:500;background:var(--ink);color:var(--ground)}
.ptool:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.pmenu,.pickmenu{box-sizing:border-box;padding:6px 0;background:var(--ground);border:1px solid var(--rule);box-shadow:0 18px 40px rgba(11,11,11,.1)}
.pmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:240px}
.pmenu>.caps,.pickmenu>.caps{display:block;padding:8px 16px 6px}
.pmenu-item{width:100%;height:34px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 16px;background:none;border:none;font:inherit;
  font-size:13px;color:var(--quiet);text-align:left;white-space:nowrap;cursor:pointer}
.pmenu-item:hover{background:var(--raised);color:var(--ink)}
.pmenu-item.on{color:var(--ink);font-weight:400}
.pmenu-item>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pmenu-item small{font-size:11px;color:var(--faint)}
.pmenu-foot{margin-top:6px;padding:10px 16px 6px;border-top:1px solid var(--hair)}
.pchips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px var(--gutter);border-bottom:1px solid var(--hair)}
.pchip{display:inline-flex;align-items:center;gap:7px;height:26px;box-sizing:border-box;padding:0 6px 0 10px;background:none;border:1px solid var(--rule);
  font:inherit;font-size:12px;color:var(--ink);white-space:nowrap;cursor:pointer}
.pchip:hover{border-color:var(--ink)}
.pchip>i{width:2px;height:12px;display:block}
.pchip .ic{color:var(--quiet)}
.pchips .link{font-size:12px;color:var(--quiet)}
.pchips-n{margin-left:auto;font-size:12px;color:var(--faint)}

/* the filters, down the left of the list; on a phone, a sheet from the bottom */
.fveil{position:fixed;left:0;right:0;top:0;bottom:0;z-index:25;background:var(--veil)}
.fpanel{position:fixed;left:0;top:0;bottom:0;z-index:26;width:380px;max-width:100vw;box-sizing:border-box;display:flex;flex-direction:column;
  background:var(--ground);border-right:1px solid var(--rule);box-shadow:24px 0 50px rgba(11,11,11,.07)}
.fpanel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 0 var(--gutter)}
.fpanel-head b{font-size:15px;font-weight:400;color:var(--ink)}
.fpanel-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}
.fsec{padding:12px var(--gutter) 6px}
.fsec>.caps{display:block;margin-bottom:6px}
.fsec .choices{flex-wrap:wrap;gap:6px 18px}
.fopt{width:100%;min-width:0;height:32px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0;background:none;border:none;font:inherit;
  font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.fopt>i{width:2px;height:14px;flex:0 0 2px;display:block}
.fopt>span:not(.tick){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fopt small{margin-left:auto;padding-left:8px;font-size:11px;color:var(--faint)}
.fopt.none{color:var(--faint)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
.fpanel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--gutter);border-top:1px solid var(--hair)}

/* ticking: a box on every picture, so no row moves, and the ticked pieces' bar floating at the foot */
.tick{width:16px;height:16px;flex:0 0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);
  background:var(--ground);color:var(--ground)}
.tick.on,.tick.part{background:var(--ink);border-color:var(--ink)}
.tick .ic{stroke-width:2.6}
.tick>i{width:8px;height:2px;background:var(--ground)}
.pid>.tick{position:absolute;top:5px;left:8px;z-index:1}
.prow.kid .pid>.tick{left:20px}
.pickbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:20px;height:48px;box-sizing:border-box;
  padding:0 8px 0 18px;background:var(--ink);color:var(--ground);box-shadow:0 18px 40px rgba(11,11,11,.2);white-space:nowrap}
.pickbar-n{font-size:13px}
.pickbar-sep{width:1px;height:18px;background:currentColor;opacity:.25}
.pickbar button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 6px;background:none;border:none;font:inherit;font-size:12.5px;color:inherit;cursor:pointer}
.pickbar button:disabled{opacity:.4;cursor:default}
.pickbar button:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.pickbar .short{display:none}
.pickmenu{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:31;width:280px}
.be-pieces{margin-top:18px}
.be-piece{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--hair)}
.be-piece .pic img,.be-piece .pic .none{width:40px;height:40px}
.be-piece b{display:block;font-size:16px;font-weight:300;color:var(--ink)}
.be-piece small{display:block;font-size:11.5px;color:var(--quiet)}
.be-more{padding:8px 0;border-top:1px solid var(--hair);font-size:12px;color:var(--quiet)}
.be-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
@media(max-width:560px){
  .psearch{height:52px}
  .psearch-field input{font-size:14px}
  .ptools{gap:0}
  .ptools-sep{margin:0 6px}
  .pmenu{right:-4px}
  .fveil{top:0!important}
  .fpanel{top:auto!important;right:0;width:auto;max-height:82vh;border-right:none;border-top:1px solid var(--rule);box-shadow:0 -24px 50px rgba(11,11,11,.08)}
  .pickbar{left:8px;right:8px;bottom:16px;transform:none;justify-content:space-between;gap:6px;padding:0 4px 0 14px}
  .pickbar .long{display:none}
  .pickbar .short{display:inline}
  .pickmenu{bottom:76px;width:calc(100vw - 32px)}
  .pid>.tick{top:3px;left:6px}
  .prow.kid .pid>.tick{left:18px}
}

@media(max-width:1100px){
  .prow,.plist-heads{grid-template-columns:minmax(0,1fr) 84px 84px 12px 120px 120px}
  .c-orderable,.c-moq,.c-market{display:none!important}
}
@media(max-width:560px){
  .prow,.plist-heads{grid-template-columns:minmax(0,1fr) 56px 72px;column-gap:10px}
  .c-sold,.c-gap,.c-cost{display:none!important}
  .prow{--pic:56px;--slot:58px;--pad-t:12px;--pad-b:12px}
  .prow.fam{--pic:36px;--pad-t:10px;--pad-b:4px}
  .prow.kid{--pic:44px;--pad-t:8px;--pad-b:8px}
  .prow.kid.last{--pad-b:12px}
  .pid{column-gap:12px}
  .psku{font-size:9px;line-height:10px}
  .pcoll{font-size:8.5px;line-height:10px}
  .pkind{font-size:11.5px;line-height:13px}
  .pnum{font-size:22px;line-height:17px}
  .prow.fam .pcoll{line-height:12px}
  .prow.fam .pkind{font-size:10.5px;line-height:12px}
  .prow.fam .pnum{font-size:14px;line-height:11px}
  /* a variant's collection is its family's, one row up: on a phone its room goes to the number */
  .prow.kid .pcoll{display:none}
  .prow.kid .pkind{font-size:11px;line-height:13px}
  .prow.kid .pnum{font-size:18px;line-height:14px}
  .pc b,.pc.lead b{font-size:15px}
  .prow.fam .pc b,.prow.fam .pc.lead b{font-size:12px}
  /* a family's price range will not fit a phone's column: its lowest, marked as such */
  .pc b .hi{display:none}
  .pc .from{display:inline}
}

/* ---------- The product card ---------- */
/* Pictures on the left; the product on the right, its tools above it. Narrower,
   the three stack with the tools first, so Close is never below the pictures. */
.product-card{display:grid;grid-template-columns:400px minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"gal top" "gal body";column-gap:40px;align-items:start}
.product-card>.drawer-top{grid-area:top}
.product-card>.pgal{grid-area:gal}
.product-card>.pdetail,.product-card>.pedit{grid-area:body}
.pgal{min-width:0;display:flex;flex-direction:column;gap:12px}
.pgal-hero{width:100%;aspect-ratio:1;background:var(--sunk)}
.pgal-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pgal-hero .none{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.pgal-rail{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pgal-rail::-webkit-scrollbar{display:none}
.pgal-rail button{flex:0 0 56px;padding:0 0 5px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer}
.pgal-rail button.on{border-bottom-color:var(--ink)}
.pgal-rail img{width:56px;height:56px;object-fit:cover;display:block;opacity:.7;transition:opacity .15s}
.pgal-rail button.on img,.pgal-rail button:hover img{opacity:1}

.pdetail{flex:1;min-width:0;display:flex;flex-direction:column}
.pd-name{display:flex;flex-direction:column;gap:4px;margin-top:18px}
.pd-name .pcoll{font-size:10px}
.pd-name .pkind{font-size:16px;line-height:20px;white-space:normal}
.pd-num{margin-top:6px;font-size:56px;line-height:1;font-weight:200;color:var(--ink);font-variant-numeric:tabular-nums}
.pd-num em{font-style:normal;color:var(--quiet)}
.pd-sup{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--quiet)}
.pd-sup i{width:2px;height:14px;display:block}
.vtabs{display:flex;align-items:flex-end;gap:24px;margin-top:22px;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.vtabs::-webkit-scrollbar{display:none}
.vtabs button{padding:4px 0 7px;margin-bottom:-1px;border:none;border-bottom:1px solid transparent;background:none;font:inherit;
  font-size:13px;color:var(--faint);cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
.vtabs button:hover{color:var(--quiet)}
.vtabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.pd-stats{display:flex;flex-direction:column;gap:22px;margin-top:22px}
.stat-grid{display:grid;gap:20px}
.stat-grid.q{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-grid.m{grid-template-columns:repeat(3,minmax(0,1fr))}
.pd-about{margin:24px 0 0;font-size:13.5px;line-height:1.65;color:var(--quiet);max-width:460px;white-space:pre-line}
.pd-about.none{color:var(--faint)}
.specs{margin-top:20px}
.spec{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--hair);font-size:12.5px}
.spec span:first-child{color:var(--quiet);white-space:nowrap}
.spec span:last-child{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

.pedit{flex:1;min-width:0;display:flex;flex-direction:column}
.pedit .form-grid{margin-top:24px}
.pedit .form-grid.names{grid-template-columns:repeat(3,minmax(0,1fr))}
.pedit .form-grid.q{grid-template-columns:repeat(4,minmax(0,1fr))}
.pedit .form-grid.specs2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pedit-note{margin-top:22px;font-size:11.5px;line-height:1.6;color:var(--faint)}

@media(max-width:1100px){
  .product-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"top" "gal" "body";row-gap:18px}
  .pgal{max-width:520px}
}
@media(max-width:560px){
  .pd-num{font-size:44px}
  .stat-grid.q{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .stat-grid.m{gap:14px}
  .pd-about{font-size:13px}
  .pedit .form-grid.names,.pedit .form-grid.q{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pedit .form-grid.specs2{grid-template-columns:1fr}
  .pgal-rail{gap:8px}
  .pgal-rail button{flex-basis:52px}
  .pgal-rail img{width:52px;height:52px}
}