/* =====================================================================
   GOKUDO: product catalog and shop archive layout (archive-product.php).
   Loaded on the 'shop' context (is_shop() || is_product_taxonomy()),
   resolved by inc/assets.php. Shared banner, footer, wrap, label, and reveal
   live in base.css (loaded site-wide) and are not repeated here.

   The product card is not here either. The front page rail renders the same
   card, so the whole .pcard block is in components.css, which loads site-wide.
   This file holds only what wraps the card on this page: the full-bleed rule,
   the filter rows, the sort control, the grid, and the closing strip.
   ===================================================================== */

/* ============ FULL WIDTH ============
   This is the one view that runs edge to edge. Every other page caps its content at
   .wrap's 1320px, which is a reading measure, and this page is not read: it is an
   index of cards, and the width it is given turns into more cards per row rather than
   into a longer line of text. The two runs of prose on the page carry their own
   measure already and need nothing here: .ph-sub and .pc-desc, both in components.css.
   The cap is lifted inside <main> only. The banner and the footer are chrome, and
   chrome that changed width on one page would read as the page being misaligned.
   Only max-width is touched, so the gutter and its 24px step at 980px stay base.css's
   and are not restated here. */
body.gokudo-shop main .wrap{max-width:none}

/* ============ PAGE HEAD ============ */
/* Page head (breadcrumb + title + count) lives in components.css. This page takes
   the shared values whole. */

/* Filter rows: a label, then the pills. Every row reads the same, so the label takes
   .label unchanged and states no size, tracking or color of its own.
   align-items is what puts the label's text on the pills' center line. A flex item
   stretches by default, and a stretched span holds its text at the top of the row, which
   reads as a label sitting too high rather than as a stretched box. */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The pill states the filter in English only. The Han reading is on the row's label,
   which says what the row filters on, and a pill that repeats it doubles the row's
   width for a word the label already carried. */
.filters button{background:transparent;border:1px solid var(--line);color:var(--ink);font-family:var(--label);
	font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:11px 18px;cursor:pointer;transition:.18s;
	display:flex;align-items:center;gap:9px}
/* The pill rests at --ink, so the hover answers on the border alone. */
.filters button:hover{border-color:var(--ink)}
.filters button.sel{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.filters .fcount{font-size:10px;color:var(--muted)}
.filters button.sel .fcount{color:var(--on-dark-3)}

/* ============ PRODUCT GRID ============
   The window sets the column count, and the four steps below are the whole ladder.
   They are stated here, beside the grid, because the count is what this grid is.
   Fixed counts, not repeat(auto-fill,minmax()). auto-fill carries one minimum card
   width for the whole ladder, and this page needs two. Two columns at a 900px window
   asks for a minimum of 412px or under. Three columns and not four at a 2056px window
   asks for one over 467px. No single figure is both, so the counts are named.
   The ladder is also why the card drops its spec table. A spec row is two columns of
   its own, and three cards on a row put each of those at a third of the width the row
   was drawn at. archive-product.php passes specs => false. */
.catalog{padding:70px 0 110px}
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:36px;--cols:3}
/* products.js hides the grid when the filters match nothing. The [hidden] rule that does
   that lives in the user agent stylesheet, and the display above is an author rule, so it
   wins. This states the hidden case at author weight. */
.grid[hidden]{display:none}

/* The shared shell is .gk-empty in components.css. These are this view's own sizes. */
.catalog .gk-empty{padding:40px 20px 10px;max-width:520px}
.catalog .gk-empty-title{font-size:clamp(30px,4vw,48px)}
.catalog .gk-empty-body{font-size:16px;margin-top:16px;margin-bottom:28px;max-width:420px}
.catalog .gk-empty .btn{padding:16px 26px}
/* A fourth column here still leaves a 528px card, which is inside the band the steps
   below hold to. */
@media(min-width:2300px){.grid{--cols:4}}
/* Each step down is where one more column would take the card under about 410px, and
   under that the media box stops showing the object at a useful size. The third column
   gives 449px at 1500, and the second gives 412px at 900. */
@media(max-width:1499px){.grid{--cols:2}}
@media(max-width:899px){.grid{--cols:1}}
/* Filter rows and sort control. The sort control is the last child in the markup, so a
   narrow window shows it below the last filter row. A wide window moves it up into a
   second column, at the right of the Category row. The Category row wraps its pills in
   its own column, so the sort control never goes into the middle of a filter row.
   align-items:start keeps the sort control on the first line of a Category row that wraps.
   row-gap is the only space between the rows, so every row sits 30px below the one above. */
.shopbar{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;margin-top:30px}
.shopbar>*{grid-column:1/-1}
.shopbar>.filters:first-child{grid-column:1}
.shopbar>.sorter{grid-column:2;grid-row:1}
.sorter{display:flex;align-items:center;gap:10px}
/* Size, tracking and color come from .label, the same as every other filter label. */
.sorter label{cursor:pointer}
.sorter select{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid var(--line);
	color:var(--ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:11px 34px 11px 14px;
	cursor:pointer;border-radius:0;transition:border-color .18s;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%2346443f' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 12px center}
.sorter select:hover{border-color:var(--ink)}
.sorter select:focus{border-color:var(--blue);outline:none}

/* ============ CTA STRIP ============ */
.catfoot{border-top:1px solid var(--line);background:var(--bg);padding:64px 0}
.catfoot-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.catfoot h3{font-family:var(--display);font-weight:900;font-size:clamp(26px,3vw,40px);text-transform:uppercase;letter-spacing:var(--track-md);line-height:.95}
.catfoot h3 em{font-style:normal;color:var(--blue)}
.catfoot p{color:var(--muted);font-size:15px;margin-top:10px;max-width:440px;line-height:1.6}
.catfoot a.btn{display:inline-flex;align-items:center;gap:12px;
	font-size:12px;letter-spacing:.2em;padding:18px 28px;transition:.22s}

/* ============ RESPONSIVE ============
   The column ladder is not here. It sits with .grid above, because the count is the
   grid's definition rather than an adjustment to it. Only the gap is here, and it is
   here because 980px is base.css's step, not the grid's: the gutter narrows there, and
   a gap that stayed at 36px would be wider than the margin holding the page in. */
@media(max-width:980px){
	.grid{gap:28px}
	/* One column. The sort control goes back to its place in the markup, below the last
	   filter row. */
	.shopbar{grid-template-columns:1fr}
	.shopbar>.filters:first-child{grid-column:1/-1}
	.shopbar>.sorter{grid-column:1/-1;grid-row:auto;justify-self:start}
}
@media(max-width:560px){
	/* .ph-meta{text-align:left} lives in components.css, not here, because it is
	   shared with cart, checkout, my-account, newsroom, and support. */
	/* The select fills the rest of the row, as wide as the filter rows above it */
	.shopbar>.sorter{justify-self:stretch;gap:12px}
	.sorter select{flex:1}
	/* Each row's label takes its own line so the pills wrap cleanly */
	.filters .flabel{width:100%;margin:2px 0}
	/* The card's own narrow-width rules are in components.css, beside the card. */
}