/* ================= SHOP PAGE ================= */
.shop-wrap{width:1256px;margin:0 auto}

/* ---- category hero ---- */
.shop-hero{position:relative;width:100%;background:#000;
  background-image:radial-gradient(circle at 50% 20%,rgba(140,88,180,.20),transparent 42%),radial-gradient(circle at 50% 104%,rgba(23,170,158,.10),transparent 46%);
  padding:52px 0 54px;overflow:hidden;text-align:center}
.crumb{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-family:var(--f-body);font-size:14px;color:#8a8a8a;margin-bottom:14px}
.crumb i{font-size:9px;color:#555}
.crumb a{color:#8a8a8a}.crumb a:hover{color:var(--gold)}.crumb span{color:#d4d4d4}
.shop-title{font-family:var(--f-head);font-weight:600;font-size:66px;line-height:1.02;text-transform:uppercase;color:#fff;text-align:center}
.shop-title .g{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.shop-desc{margin:22px auto 0;max-width:680px;font-family:var(--f-body);font-size:17px;line-height:1.65;color:#a6a6a6;text-align:center}

/* ---- layout ----
   The PRODUCT GRID is centered on the page (main column = 1100px, dead-center
   of the 1800px stage); the sidebar lives in the left margin. This keeps the
   products aligned with the centered hero/title above instead of the whole
   sidebar+grid block being centered as one unit. */
.shop-section{width:100%;background:#000;padding:48px 0 72px}
.shop-section .shop-wrap{width:100%}
.shop-layout{display:flex;align-items:flex-start}
.shop-sidebar{width:288px;flex-shrink:0;margin-left:38px}
.shop-main{width:1100px;min-width:0;margin-left:24px;margin-right:auto}
.sidebar-faq{margin-top:32px;padding-top:28px;border-top:1px solid #1c1c1c}

/* ---- sidebar filters ---- */
.filters-head{display:flex;align-items:center;justify-content:flex-end;margin-bottom:4px}
.clear-filters{font-family:var(--f-head);font-weight:400;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#8a8a8a;background:none;border:none;cursor:pointer}
.clear-filters:hover{color:var(--gold)}
.filter-group{border-top:1px solid #1c1c1c;padding:18px 0}
.filter-label{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:0;margin:0;font-family:var(--f-head);font-weight:500;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:#fff}
.filter-label i{font-size:11px;color:#8a8a8a;transition:transform .25s}
.filter-label:hover{color:#e6e6e6}
.filter-label:hover i{color:var(--gold)}
.filter-group.open .filter-label i{transform:rotate(180deg)}
.filter-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
/* Open = capped height with an INTERNAL scrollbar. Long lists (all 39 brands,
   22 joints, …) are fully reachable by scrolling inside the group, without the
   list blowing out the page. */
.filter-group.open .filter-body{max-height:300px;overflow-y:auto;overflow-x:hidden;padding-top:16px;padding-right:10px;scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
.filter-group.open .filter-body::-webkit-scrollbar{width:7px}
.filter-group.open .filter-body::-webkit-scrollbar-track{background:transparent}
.filter-group.open .filter-body::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:4px}
.filter-group.open .filter-body::-webkit-scrollbar-thumb:hover{background:var(--gold)}
/* option rows in the brand headline face (Oswald) so the sidebar matches the
   site chrome — labels, product names, and buttons all use the same family */
.fopt{display:flex;align-items:center;gap:11px;font-family:var(--f-head);font-weight:400;font-size:14px;letter-spacing:.4px;line-height:1.35;color:#d8d8d8;margin-bottom:12px;cursor:pointer;user-select:none}
.fopt:last-child{margin-bottom:0}
.fopt input{display:none}
.fopt .box{width:17px;height:17px;border-radius:4px;border:1.5px solid #3a3a3a;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s}
.fopt input:checked+.box{background:var(--grad-brand);border-color:transparent}
.fopt input:checked+.box::after{content:'\2713';color:#fff;font-size:10px;font-weight:700;line-height:1}
.fopt:hover{color:#e8e8e8}
.fopt .cnt{margin-left:auto;font-size:12px;font-weight:300;letter-spacing:.5px;color:#6e6e6e}
/* swatches */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px}
.sw{width:36px;height:36px;border-radius:9px;background:var(--c);border:2px solid transparent;cursor:pointer;transition:.15s;position:relative;justify-self:center}
.sw.light{border:2px solid #3a3a3a}
.sw[data-on="1"]{box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold)}
.sw:hover{transform:translateY(-2px)}
.sw-labels{margin-top:10px;font-family:var(--f-head);font-weight:300;font-size:12px;letter-spacing:.5px;color:#7a7a7a}
/* price */
.price-vals{display:flex;justify-content:space-between;font-family:var(--f-head);font-weight:500;font-size:14px;color:#e0e0e0;margin-bottom:14px}
.range-wrap{position:relative;height:26px}
.range-wrap .track{position:absolute;top:8px;left:0;right:0;height:4px;border-radius:2px;background:#282828}
.range-wrap .fill{position:absolute;top:8px;height:4px;border-radius:2px;background:var(--grad-brand)}
.range-wrap input[type=range]{position:absolute;top:-2px;left:0;width:100%;height:24px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:17px;height:17px;border-radius:50%;background:var(--gold);border:2px solid #050505;cursor:pointer;margin-top:1px}
.range-wrap input[type=range]::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;background:var(--gold);border:2px solid #050505;cursor:pointer}

/* ---- product toolbar + grid ---- */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid #1c1c1c}
.result-count{font-family:var(--f-body);font-size:14px;color:#9a9a9a}
.result-count b{color:#fff;font-weight:700}
.sort-sel{display:flex;align-items:center;gap:10px;font-family:var(--f-body);font-size:13px;color:#8a8a8a}
.sort-sel select{background:#111;border:1px solid #2b2b2b;color:#e6e6e6;font-family:var(--f-body);font-size:13px;padding:10px 13px;border-radius:7px;cursor:pointer}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 16px}
.shop-grid .pcardg{width:auto}
.shop-grid .pname{font-size:17px;line-height:1.16;min-height:62px;padding:0 4px}
.shop-grid .pprice{font-size:19px}
.shop-grid .pbox{height:235px}
.shop-grid .pshop{width:92%;font-size:14px;letter-spacing:1.5px;padding:12px 0}
.shop-grid .pstars{font-size:15px;margin:18px 0 11px}
.pcardg{position:relative}
.pcardg.oos .pbox img{opacity:.5}
.out-badge{position:absolute;top:13px;right:13px;z-index:3;background:#2c2c2c;color:#cdcdcd;font-family:var(--f-head);font-weight:500;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:5px 9px;border-radius:4px}
.shop-empty{grid-column:1/-1;text-align:center;padding:70px 0;font-family:var(--f-body);color:#7a7a7a}

/* ---- FAQ rail ---- */
.sidebar-faq h2{font-family:var(--f-head);font-weight:600;font-size:20px;letter-spacing:.5px;text-transform:uppercase;color:#fff;margin-bottom:5px}
.faq-cat{font-family:var(--f-body);font-size:13px;color:#8a8a8a;margin-bottom:20px}
.faq-cat b{color:var(--gold);font-weight:500}
.faq-item{border:1px solid #1e1e1e;border-radius:10px;margin-bottom:11px;background:#0c0c0c;overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:#7a5a2f}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;cursor:pointer;font-family:var(--f-head);font-weight:500;font-size:14.5px;color:#e9e9e9}
.faq-q i{color:var(--gold);font-size:12px;transition:transform .25s;flex-shrink:0}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-item.open .faq-a{max-height:260px}
.faq-a p{padding:0 16px 16px;font-family:var(--f-body);font-size:13.5px;line-height:1.6;color:#9c9c9c;margin:0}
.faq-help{margin-top:18px;border-radius:12px;padding:2px;background:var(--grad-brand)}
.faq-help-in{background:#0b0b0b;border-radius:10px;padding:20px 18px;text-align:center}
.faq-help-in h4{font-family:var(--f-head);font-weight:600;font-size:17px;text-transform:uppercase;color:#fff;margin-bottom:6px}
.faq-help-in p{font-family:var(--f-body);font-size:13px;color:#9a9a9a;line-height:1.5;margin-bottom:14px}
.faq-help-in a{display:inline-block;font-family:var(--f-head);font-weight:500;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--grad-brand);padding:11px 22px;border-radius:6px;transition:filter .2s}
.faq-help-in a:hover{filter:brightness(1.12)}

/* ================= BELOW-THE-GRID LONGFORM =================
   The guide copy and internal-link modules that used to be crammed into the
   hero. Constrained to a readable measure (~72ch) rather than the full 1800px
   stage, because a 1600px line of body text is unreadable and reads as filler. */
.shop-longform{width:100%;background:#000;padding:0 0 76px;border-top:1px solid #141414}
.shop-longform .shop-wrap{width:100%}
.shop-longform > .shop-wrap > *{width:1100px;margin:0 auto;padding:0 24px}
.shop-longform h2{font-family:var(--f-head);font-weight:600;font-size:26px;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;margin:46px 0 16px}
.lf-body p{font-family:var(--f-body);font-size:16px;line-height:1.8;color:#a6a6a6;margin:0 0 16px;max-width:74ch}
.lf-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* Link chips: dense enough to carry 15-20 internal links without becoming a
   footer link farm, and each one is a real category or attribute archive. */
.lf-chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.lf-chips li{margin:0}
.lf-chips a{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1px solid #232323;background:#0c0c0c;color:#d4d4d4;
  font-family:var(--f-body);font-size:14px;line-height:1;transition:border-color .18s,color .18s}
.lf-chips a:hover{border-color:var(--gold);color:#fff}
.lf-chips .cnt{font-size:11px;color:#6d6d6d}
.lf-chips a:hover .cnt{color:var(--gold)}

.lf-guides ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 32px}
.lf-guides a{font-family:var(--f-body);font-size:15px;color:#c9c9c9;
  border-bottom:1px solid transparent;padding-bottom:2px}
.lf-guides a:hover{color:var(--gold);border-bottom-color:#2a2a2a}

/* ---------- guide column alignment (2026-08-25) ----------
   Headings ran the full 1100px block while paragraphs were capped at 74ch, so
   nothing shared an edge and the guide read as drifting text. One measure for
   every child, centered in the section. */
.shop-longform > .shop-wrap > *{width:min(880px,100%);margin-inline:auto}
.shop-longform h2{max-width:100%}
.lf-body p{max-width:100%}
.lf-mfg{width:min(880px,100%);margin-inline:auto}

/* ---------- brand compatibility block ---------- */
.lf-compat{background:#0b0b0b;border:1px solid #1c1c1c;border-radius:12px;padding:22px 24px}
.lf-compat h2{margin-top:0}
.lf-compat-lead{font-family:var(--f-body);font-size:16px;line-height:1.8;color:#a6a6a6;margin:0 0 14px}
.lf-compat-lead strong{color:#e8e8e8;font-weight:600}
.lf-compat-links{margin-top:4px}

/* ---------- product-card imagery: survive extreme aspect ratios ----------
   Cue photography is shot full-length: many files are ~2560x104 (24:1). With
   object-fit:cover the card showed a 100px-tall slice of the middle of the cue,
   which read as a broken image. Contain + a neutral plate shows the whole cue,
   and near-square shots still fill the box. */
.pbox,.shop-grid .pbox{display:flex;align-items:center;justify-content:center;
	background:#0d0d0d;border-radius:10px;overflow:hidden;padding:8px}
.pbox img,.shop-grid .pbox img{width:100%;height:100%;object-fit:contain;object-position:center}
/* extreme letterbox: let it use the full card width, vertically centred */
.pbox img[width][height]{image-rendering:auto}

/* ═══════════════════════════════════════════════════════════════════════════
 * BRAND LANDING PAGES
 *
 * Image sizing is enforced by the CONTAINER, not the source file. Brand assets
 * arrive as square marks, wide wordmarks and 4:3 product shots all at once; if
 * the box is fixed and the image is contained, 53 pages look like one site
 * instead of 53 accidents.
 *   logo panel  800 x 450 (16:9), logo contained, max 180px tall
 *   line banner 1200 x 630 (1.91:1), cropped to fill — doubles as the OG card
 * ═══════════════════════════════════════════════════════════════════════════ */

.lf-brand { margin: 46px 0; }
.lf-brand > h2 { margin: 0 0 14px; }
.lf-prose p:first-child { margin-top: 0; }

/* uniform brand logo panel */
.lf-logo-panel {
	aspect-ratio: 16 / 9;
	max-width: 800px;
	margin: 0 auto 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0d0d0d;
	border: 1px solid #232323;
	border-radius: 12px;
	padding: 28px;
}
.lf-logo-panel img { max-height: 180px; max-width: 78%; width: auto; height: auto; object-fit: contain; }

/* line/series banner */
.lf-line-banner {
	aspect-ratio: 1200 / 630;
	width: 100%;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 16px;
	background: #0d0d0d;
}
.lf-line-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* price band + tier table */
.lf-band { color: #b9b9b9; font-size: 15px; margin: 10px 0 18px; }
.lf-tiers { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 15px; }
.lf-tiers th, .lf-tiers td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #232323; vertical-align: top; }
.lf-tiers thead th { color: #9a9a9a; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.lf-tiers tbody th { font-weight: 600; white-space: nowrap; }
.lf-tiers tbody td:first-of-type { white-space: nowrap; color: #49a0da; }

/* per-line blocks */
.lf-line { margin: 30px 0 38px; }
.lf-line h3 { margin: 0 0 6px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lf-line h3 a { color: inherit; text-decoration: none; }
.lf-line h3 a:hover { text-decoration: underline; }
.lf-line-band { font-size: 14px; font-weight: 500; color: #49a0da; }
.lf-line-note { color: #b0b0b0; margin: 0 0 14px; max-width: 74ch; }
.lf-line-more { margin: 10px 0 0; font-size: 15px; }

/* reputation, two honest columns */
.lf-rep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.lf-rep-col h3 { font-size: 16px; margin: 0 0 8px; }
.lf-rep-col ul { margin: 0; padding-left: 20px; }
.lf-rep-col li { margin-bottom: 7px; color: #cfcfcf; }
.lf-rep-good h3 { color: #5fbf7a; }
.lf-rep-bad  h3 { color: #d9a441; }

/* family + alternatives */
.lf-siblings, .lf-altlist, .lf-facts { margin: 8px 0 0; padding-left: 20px; }
.lf-siblings li, .lf-altlist li, .lf-facts li { margin-bottom: 8px; color: #cfcfcf; }
.lf-deflist dt { font-weight: 600; margin-top: 12px; }
.lf-deflist dd { margin: 4px 0 0; color: #c4c4c4; }
.lf-joint-links { margin-top: 18px; font-size: 15px; }

@media (max-width: 780px) {
	.lf-rep-cols { grid-template-columns: 1fr; gap: 18px; }
	.lf-logo-panel { padding: 18px; }
	.lf-logo-panel img { max-height: 120px; max-width: 86%; }
	.lf-tiers, .lf-tiers thead, .lf-tiers tbody, .lf-tiers tr, .lf-tiers th, .lf-tiers td { display: block; }
	.lf-tiers thead { display: none; }
	.lf-tiers tr { border-bottom: 1px solid #232323; padding: 10px 0; }
	.lf-tiers th, .lf-tiers td { border: 0; padding: 2px 0; }
}

/* sidebar Series module — links to real series pages, not facets */
.filter-series .series-list { list-style: none; margin: 0; padding: 0; }
.filter-series .series-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; }
.filter-series .series-list a { color: #d8d8d8; text-decoration: none; font-size: 14px; }
.filter-series .series-list a:hover { color: #49a0da; text-decoration: underline; }
.filter-series .series-list .cnt { color: #7d7d7d; font-size: 12px; }

/* ==========================================================================
   2026-09-03 — category "sub menu": Seybert's collection sidebar + toolbar,
   Quarter King colours. Rows = collapsed accordions with gold hairlines,
   title left / gold chevron right (→ ✕ when open), inner scroll (320px) with
   the scrollbar on the LEFT like theirs; checkbox rows with small bold counts;
   Price = From–To + Search; About row first. Toolbar: "1479 Pool Cues |
   Product Layout ⊞ ☰ | Sort by". Mobile overrides live in mobile.css.
   ========================================================================== */
.qk-submenu{margin-top:2px}
.qk-submenu .filters-head{margin-bottom:10px}
.qk-submenu .filter-group{border-top:1px solid var(--gold);padding:0;margin-top:-1px}
.qk-submenu .filter-group:last-child{border-bottom:1px solid var(--gold)}
.qk-submenu .filter-label{position:relative;justify-content:flex-start;padding:14px 48px 14px 0;font-family:var(--f-head);font-weight:500;font-size:19px;line-height:1.15;letter-spacing:.8px;text-transform:uppercase;color:#fff}
.qk-submenu .filter-label .fl-text{display:block;font:inherit;margin:0}
.qk-submenu .filter-label i{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--gold);transition:opacity .2s}
.qk-submenu .filter-label .fl-x{position:absolute;right:4px;top:50%;transform:translateY(-54%);font-family:var(--f-body);font-weight:300;font-size:40px;line-height:1;color:var(--gold);opacity:0;transition:opacity .2s}
.qk-submenu .filter-group.open .filter-label i{opacity:0;transform:translateY(-50%)}
.qk-submenu .filter-group.open .filter-label .fl-x{opacity:1}
.qk-submenu .filter-label:hover{color:#fff;opacity:.8}
.qk-submenu .filter-label:hover i{color:var(--gold)}
.qk-submenu .filter-body{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0}
.qk-submenu .filter-group.open .filter-body{max-height:380px;overflow:hidden;padding:0 0 12px;scrollbar-width:auto}
/* scrollbar on the left: rtl container, ltr content */
.qk-submenu .filter-scroll{max-height:320px;overflow-y:auto;direction:rtl;padding:2px 6px 2px 10px;scrollbar-width:thin;scrollbar-color:#e6e6e6 #1a1a1a}
.qk-submenu .filter-scroll > *{direction:ltr}
.qk-submenu .filter-scroll::-webkit-scrollbar{width:6px}
.qk-submenu .filter-scroll::-webkit-scrollbar-track{background:#1a1a1a}
.qk-submenu .filter-scroll::-webkit-scrollbar-thumb{background:#e6e6e6;border-radius:0}
/* rows */
.qk-submenu .fopt-list{list-style:none;margin:0;padding:0}
.qk-submenu .fopt{display:flex;align-items:flex-start;gap:10px;margin:0;padding:6px 0;font-family:var(--f-body);font-weight:400;font-size:14.5px;line-height:1.35;letter-spacing:0;color:#fff;cursor:pointer}
.qk-submenu .fopt .box{width:16px;height:16px;margin-top:1px;border-radius:2px;border:1px solid #c9c9c9;background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s}
.qk-submenu .fopt input:checked+.box{background:var(--gold);border-color:var(--gold)}
.qk-submenu .fopt input:checked+.box::after{content:'\2713';color:#111;font-size:11px;font-weight:700;line-height:1}
.qk-submenu .fopt .fopt-name{color:#fff}
.qk-submenu .fopt .cnt{margin-left:2px;font-size:10px;font-weight:700;letter-spacing:0;color:#fff;position:relative;top:-1px}
.qk-submenu .fopt:hover .fopt-name{color:var(--gold)}
.qk-submenu .series-list li{display:block;padding:6px 0}
.qk-submenu .series-list a{font-family:var(--f-body);font-size:14.5px;color:#fff;text-decoration:none}
.qk-submenu .series-list a:hover{color:var(--gold);text-decoration:none}
.qk-submenu .series-list .cnt{font-size:10px;font-weight:700;color:#fff;position:relative;top:-1px}
.qk-submenu .swatches{padding:6px 0 4px}
/* about */
.qk-submenu .about-body p{margin:6px 0 10px;font-family:var(--f-body);font-size:14px;line-height:1.55;color:#e6e6e6}
.qk-submenu .about-body .about-more a{color:var(--gold);font-family:var(--f-head);font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
/* price */
.qk-submenu .qk-price-range{padding:6px 0 2px}
.qk-submenu .price-row{display:flex;align-items:flex-end;gap:8px}
.qk-submenu .price-field{position:relative;flex:1;display:flex;flex-direction:column;gap:5px;font-family:var(--f-head);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#9a9a9a}
.qk-submenu .price-field .cur{position:absolute;left:9px;bottom:11px;font-family:var(--f-body);font-size:13px;color:#9a9a9a;letter-spacing:0}
.qk-submenu .price-field input{width:100%;background:#0c0c0c;border:1px solid #3a3a3a;color:#fff;font-family:var(--f-body);font-size:14px;padding:9px 8px 9px 20px;border-radius:3px;-moz-appearance:textfield}
.qk-submenu .price-field input::-webkit-outer-spin-button,.qk-submenu .price-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qk-submenu .price-dash{color:#9a9a9a;padding-bottom:10px}
.qk-submenu .qk-price-apply{display:block;width:100%;margin-top:10px;background:var(--gold);color:#111;border:0;border-radius:3px;padding:11px;font-family:var(--f-head);font-weight:500;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer}
.qk-submenu .qk-price-apply:hover{filter:brightness(1.08)}
/* toolbar */
.shop-toolbar{border-bottom:0;padding-bottom:0;margin-bottom:22px;gap:18px}
.result-count{font-family:var(--f-body);font-size:16px;color:#fff}
.result-count b{font-weight:400}
.layout-sel{display:flex;align-items:center;gap:6px;margin:0 auto;font-family:var(--f-body);font-size:15px;color:#fff}
.layout-sel span{margin-right:6px}
.qk-layout-btn{background:none;border:0;padding:4px;cursor:pointer;line-height:0}
.qk-layout-btn svg{fill:#8a8a8a;transition:fill .15s}
.qk-layout-btn:hover svg{fill:#fff}
.qk-layout-btn.is-on svg{fill:var(--gold)}
.sort-sel{font-size:15px;color:#fff;gap:8px}
.sort-sel select{background:#0c0c0c;border:1px solid #3a3a3a;color:#fff;font-size:15px;padding:10px 36px 10px 14px;border-radius:2px;min-width:230px}
/* list layout */
.shop-grid.qk-list{grid-template-columns:1fr !important;gap:0 !important}
.shop-grid.qk-list .pcardg{display:grid;grid-template-columns:200px minmax(0,1fr) 180px;grid-template-areas:"img stars btn" "img name btn" "img price btn";column-gap:24px;row-gap:2px;align-items:center;padding:16px 0;border-bottom:1px solid #1c1c1c;text-align:left}
.shop-grid.qk-list .pbox{grid-area:img;height:150px !important}
.shop-grid.qk-list .pstars{grid-area:stars;margin:0;text-align:left;align-self:end}
.shop-grid.qk-list .pname{grid-area:name;min-height:0;padding:0;text-align:left;font-size:18px}
.shop-grid.qk-list .pprice{grid-area:price;text-align:left;align-self:start}
.shop-grid.qk-list .pshop{grid-area:btn;width:100%;margin:0}
.shop-grid.qk-list .pheart{left:10px;top:10px}
.shop-grid.qk-list .out-badge{left:auto;right:auto;top:10px;transform:translateX(150px)}
/* hero intro is now a div holding the description's own <p>s */
.shop-desc p{margin:0 0 10px}
.shop-desc p:last-child{margin-bottom:0}