/* GRUMPY OLD CREW shop-by-type tabs, sort and compact product grid (goc-browse.js). Ink & Brass colors via the page variables. */
/* One compact grid: 2 columns on phones, 3 on tablets, 4 on wide screens (also used with JS off, per category). */
.pdd-page .pdd-goc .pdd-goc-grid,.goc-js .pdd-goc .goc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px!important;list-style:none;margin:0;padding:0}
@media(min-width:720px){.pdd-page .pdd-goc .pdd-goc-grid,.goc-js .pdd-goc .goc-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px!important}}
@media(min-width:1100px){.pdd-page .pdd-goc .pdd-goc-grid,.goc-js .pdd-goc .goc-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px!important}}
/* JS on: the category sections and their lists dissolve into the one grid above, so tabs and sort work across them. */
.goc-js .pdd-goc .goc-cat,.goc-js .pdd-goc .pdd-goc-grid{display:contents}
.goc-js .pdd-goc .goc-cat-h{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.goc-js .goc-nojs{display:none}
.goc-js .pdd-goc .goc-off{display:none!important}
.goc-empty{grid-column:1/-1;padding:28px 24px;border:1px dashed var(--p-line,#c9c3b8);border-radius:var(--r-lg,16px);background:var(--p-sand,#f4efe6);color:var(--p-text,#1C2733);font-size:1.125rem;line-height:1.55}
.goc-empty[hidden]{display:none}
.goc-empty p{margin:0 0 12px}.goc-empty p:last-child{margin:0;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.goc-empty a{font-weight:700;color:var(--p-text,#1C2733)}
.goc-back{min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--p-text,#1C2733);background:var(--p-text,#1C2733);color:var(--p-surface,#fff);font:700 1.125rem/1 var(--p-sans,system-ui);cursor:pointer}

/* Tabs + sort bar */
.goc-bar[hidden]{display:none}
.goc-bar{margin:24px 0 20px;padding:10px 0 12px;background:var(--p-paper,var(--bg,#FFFDF8));border-bottom:1px solid var(--p-line,#ddd6ca);z-index:15}
@media(min-height:700px){.goc-bar{position:sticky;top:var(--goc-top,0px)}}
.goc-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.goc-tabs [role=tab]{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--p-line,#c9c3b8);background:var(--p-surface,#fff);color:var(--p-text,#1C2733);font:600 1.125rem/1 var(--p-sans,system-ui);cursor:pointer;white-space:nowrap}
.goc-tabs [role=tab]:hover{border-color:var(--p-text,#1C2733)}
.goc-tabs [role=tab][aria-selected=true]{background:var(--pdd-band,#1C2733);border-color:var(--pdd-band,#1C2733);color:#FFFDF8}
.goc-n{display:inline-block;min-width:1.7em;padding:3px 7px;border-radius:999px;background:var(--p-sand,#efe8dc);color:var(--p-text,#1C2733);font-size:1rem;font-weight:700;text-align:center}
.goc-tabs [aria-selected=true] .goc-n{background:var(--pdd-gold,#F2A93B);color:#1C2733}
.goc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px}
.goc-count{margin:0 auto 0 0!important;font:600 1.125rem/1.3 var(--p-sans,system-ui);color:var(--p-text,#1C2733)}
.goc-sort-l{font:600 1.125rem/1 var(--p-sans,system-ui);color:var(--p-text,#1C2733)}
.goc-sort{min-height:48px;padding:0 40px 0 14px;border:1.5px solid var(--p-line,#c9c3b8);border-radius:10px;background:var(--p-surface,#fff);color:var(--p-text,#1C2733);font:500 1.125rem/1 var(--p-sans,system-ui)}
.goc-tabs [role=tab]:focus-visible,.goc-sort:focus-visible,.goc-back:focus-visible,.goc-more summary:focus-visible,.goc-empty a:focus-visible{outline:3px solid var(--p-brass-text,#8a6a1f);outline-offset:3px}
[data-theme=dark] .goc-tabs [role=tab][aria-selected=true]{background:var(--pdd-gold,#F2A93B);border-color:var(--pdd-gold,#F2A93B);color:#1C2733}
[data-theme=dark] .goc-tabs [aria-selected=true] .goc-n{background:#1C2733;color:#FFFDF8}
[data-theme=dark] .goc-tabs [role=tab]:focus-visible,[data-theme=dark] .goc-sort:focus-visible,[data-theme=dark] .goc-more summary:focus-visible{outline-color:var(--pdd-gold,#F2A93B)}

/* Compact cards: image, name, price, colors; the rest sits under "Details, sizes and fabric". */
.pdd-goc .pdd-card h4{font-size:1.125rem!important;line-height:1.3;margin:0 0 6px}
.pdd-goc .pdd-price{margin:0 0 8px!important}
.pdd-goc .pdd-price b{font-size:1.25rem!important}
.pdd-goc .pdd-price span:empty{display:none}
.pdd-goc .pdd-price span{font-size:1rem!important}
.pdd-goc .pdd-colors{flex-wrap:wrap;gap:6px 8px;margin:0 0 10px}
.pdd-goc .pdd-colors-l{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.goc-ncol{font:500 1rem/1.2 var(--p-sans,system-ui);color:var(--p-muted,#4A5666)}
.goc-more{margin-top:auto;border-top:1px solid var(--p-line,#e2dccf);padding-top:8px}
.goc-more summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font:600 1.0625rem/1.25 var(--p-sans,system-ui);color:var(--p-text,#1C2733);list-style:none}
.goc-more summary::-webkit-details-marker{display:none}
.goc-more summary::before{content:"+";display:inline-grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%;font-weight:700;line-height:1}
.goc-more[open] summary::before{content:"\2212"}
.goc-more p{font-size:1rem!important;line-height:1.5;margin:0 0 8px!important}
.goc-more .pdd-meta{margin-top:0!important;font-size:.95rem!important}
@media(max-width:719px){.pdd-goc .pdd-card figcaption{padding:12px 12px 14px!important}.pdd-goc .pdd-card h4{font-size:1.0625rem!important}}
/* Add-to-bag controls from shop.js: stack them in the narrow cards and keep 48px targets. */
.pdd-goc .pdd-buy-row{grid-template-columns:1fr!important;font-size:1rem!important;color:var(--p-text,#1C2733)!important}
.pdd-goc .pdd-buy select{min-height:48px;font-size:1.0625rem}
.pdd-goc .pdd-buy-add{min-height:48px;font-size:1.125rem}
.pdd-goc .pdd-buy-status{font-size:1rem}
@media(prefers-reduced-motion:no-preference){.goc-tabs [role=tab]{transition:background-color .15s,border-color .15s,color .15s}}
/* Compact swatches: dots only in the card (names stay in the list's aria-label, each dot's title, the Color menu and the Details text). */
body.pdx .pdd-goc .pdd-sw{gap:6px!important}
body.pdx .pdd-goc .pdd-sw li{font-size:0!important;line-height:0!important;gap:0!important}
body.pdx .pdd-goc .pdd-sw li:before{width:20px;height:20px}
.pdd-goc .pdd-price span{display:block;color:var(--p-muted,#4A5666)}
@media(max-width:719px){.goc-count{flex:1 0 100%}}