/* Category page, matched to the website's listing pages (e.g. Cells &
   Accessories > Electrochemical Cells). Scoped to body.store-plp
   (catalog_category_view.xml); page margins, breadcrumb and title type
   are in store-common.css. */

/* ---- Title, description, sub-category chips ---- */
body.store-plp .page-main .page-title-wrapper { margin: 22px 0 18px; } /* beats store-common's margin: 0 */
.store-plp .category-description { margin: 0 0 24px; max-width: 52em; }
.store-plp .category-description,
.store-plp .category-description p {
	font-family: var(--gm-font-body); font-size: 17px; line-height: 1.65; color: var(--gm-body);
}
.store-plp .category-description p { margin: 0 0 12px; }
.store-plp .category-description a { color: var(--gm-navy); text-decoration: underline; }

.store-subnav { margin: 0 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--gm-border); }
.store-subnav ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.store-subnav li { margin: 0; }
.store-chip {
	display: inline-block; padding: 8px 16px; border: 1px solid var(--gm-border-ctl); border-radius: 999px; background: #fff;
	font-family: var(--gm-font-body); font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--gm-navy); text-decoration: none;
}
.store-chip:hover { border-color: var(--gm-navy); background: #f4f8fa; color: var(--gm-navy); text-decoration: none; }
.store-chip.is-current,
.store-chip.is-current:hover { background: var(--gm-navy); border-color: var(--gm-navy); color: #fff !important; } /* store link colour beats it otherwise */

/* ---- Toolbar: count, view mode, sort; pages at the bottom ---- */
/* Magento still lays the page out as 2columns-left (see catalog_category_view.xml);
   its .page-layout-2columns-left .column.main { width: 79%; float: right } needs beating. */
body.store-plp .columns { display: block; }
body.store-plp .columns .column.main { width: 100%; float: none; padding: 0; }
.store-plp .toolbar-products {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
	margin: 0 0 22px; padding: 0; background: none; border: 0;
}
.store-plp .toolbar-products::before, .store-plp .toolbar-products::after { content: none; }
.store-plp .toolbar-products .modes { order: 1; float: none; margin: 0; display: flex; gap: 0; }
.store-plp .toolbar-products .toolbar-amount { order: 0; float: none; margin: 0; padding: 0; line-height: 1;
	font-family: var(--gm-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted); }
.store-plp .toolbar-products .toolbar-amount .toolbar-number { font: inherit; color: var(--gm-ink); }
.store-plp .toolbar-products .toolbar-sorter { order: 2; float: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 8px; }
.store-plp .toolbar-products .sorter-label { font-family: var(--gm-font-body); font-size: 14px; color: var(--gm-body); }
.store-plp .toolbar-products select {
	height: 38px; padding: 0 32px 0 12px; border: 1px solid var(--gm-border-ctl); border-radius: 8px; background-color: #fff;
	font-family: var(--gm-font-body); font-size: 14px; color: var(--gm-ink); box-shadow: none;
}
.store-plp .toolbar-products .sorter-action { margin-left: 2px; }
.store-plp .modes-mode {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border: 1px solid var(--gm-border-ctl); background: #fff; box-shadow: none; float: none; margin: 0;
}
.store-plp .modes-mode:first-of-type { border-radius: 8px 0 0 8px; }
.store-plp .modes-mode:last-of-type { border-radius: 0 8px 8px 0; margin-left: -1px; }
.store-plp .modes-mode.active { background: #f4f8fa; border-color: var(--gm-navy); position: relative; }
.store-plp .modes-mode::before { color: var(--gm-navy); font-size: 22px; }

/* The bottom toolbar repeats count/sort; keep only its page links + per-page limiter */
.store-plp .products ~ .toolbar-products .toolbar-amount,
.store-plp .products ~ .toolbar-products .modes,
.store-plp .products ~ .toolbar-products .toolbar-sorter { display: none; }
.store-plp .products ~ .toolbar-products { margin-top: 36px; justify-content: space-between; }
.store-plp .pages { order: 0; float: none; margin: 0; position: static; }
.store-plp .pages .items { display: flex; gap: 6px; font-size: 0; letter-spacing: 0; white-space: normal; }
.store-plp .pages .item { margin: 0; font-size: 14px; }
.store-plp .pages .item a.page,
.store-plp .pages .item strong.page,
.store-plp .pages .action {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
	border: 1px solid var(--gm-border-ctl); border-radius: 8px; background: #fff; box-sizing: border-box;
	font-family: var(--gm-font-body); font-size: 14px; font-weight: 500; color: var(--gm-navy); text-decoration: none;
}
.store-plp .pages .item a.page:hover, .store-plp .pages .action:hover { border-color: var(--gm-navy); background: #f4f8fa; }
.store-plp .pages .item.current strong.page { background: var(--gm-navy); border-color: var(--gm-navy); color: #fff !important; }
.store-plp .pages .action::before { color: var(--gm-navy); font-size: 26px; line-height: 1; margin: 0; }
.store-plp .pages .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.store-plp .limiter { order: 1; float: none; display: flex; align-items: center; gap: 8px; margin: 0;
	font-family: var(--gm-font-body); font-size: 14px; color: var(--gm-body); }
.store-plp .limiter .label, .store-plp .limiter .limiter-text { font: inherit; color: inherit; }

/* ---- Product cards (grid mode) ---- */
.store-plp .products-grid .product-items {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; /* 4 across, as on the website */
	margin: 0; padding: 0;
}
.store-plp .products-grid .product-items::before, .store-plp .products-grid .product-items::after { content: none; }
.store-plp .products-grid .product-item {
	width: auto !important; margin: 0 !important; padding: 0; float: none;
	display: flex; position: relative;
	border: 1px solid var(--gm-border); border-radius: 12px; background: #fff; overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.store-plp .products-grid .product-item:hover { border-color: var(--gm-navy); box-shadow: 0 6px 18px rgba(0, 38, 64, .08); }
.store-plp .products-grid .product-item-info { display: flex; flex-direction: column; width: 100%; }
.store-plp .products-grid .product-item-photo { display: block; border-bottom: 1px solid var(--gm-border-soft); }
.store-plp .products-grid .product-image-container { display: block; width: 100% !important; }
.store-plp .products-grid .product-image-wrapper { padding-bottom: 100% !important; height: auto !important; }
.store-plp .products-grid .product-image-photo { padding: 16px; box-sizing: border-box; object-fit: contain; }
.store-plp .products-grid .product-item-details { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 18px 20px 20px; margin: 0; }
.store-plp .products-grid .product-item-name { margin: 0; }
.store-plp .products-grid .product-item-link {
	font-family: var(--gm-font-display); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
	color: var(--gm-ink) !important; text-decoration: none; /* store link colour beats it otherwise */
}
.store-plp .products-grid .product-item:hover .product-item-link { color: var(--gm-navy) !important; }
/* The whole card opens the product; the cart form stays clickable above it. */
.store-plp .products-grid .product-item-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.store-plp .products-grid .product-item-inner,
.store-plp .products-grid .product-item-actions form { position: relative; z-index: 2; }
.store-plp .products-grid .price-box { margin: 0; }
/* orders-gamry.css forces gold 23px with a 9-class !important selector; out-specify it */
body.store-plp .products-grid .product-item .product-item-info .product-item-details .price-box .price-container .price-wrapper .price,
body.store-plp .products-grid .product-item .product-item-info .product-item-details .price-box .price {
	font-family: var(--gm-font-body); font-size: 17px !important; font-weight: 600; color: var(--gm-ink) !important;
}
.store-plp .products-grid .product-item-inner { margin-top: auto; }
.store-plp .products-grid .product-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.store-plp .products-grid .actions-primary { display: flex; align-items: center; gap: 10px; float: none; }
.store-plp .products-grid .stock {
	font-family: var(--gm-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #1f6b3a;
}
.store-plp .products-grid .stock.unavailable { color: #8a3b12; }
.store-plp .products-grid .action.tocart {
	height: 38px; padding: 0 16px; border-radius: 8px; white-space: nowrap;
	background: var(--gm-navy); border: 1px solid var(--gm-navy); box-shadow: none;
	font-family: var(--gm-font-body); font-size: 14px; font-weight: 600; line-height: 1;
}
.store-plp .products-grid .action.tocart:hover { background: var(--gm-navy-hover); border-color: var(--gm-navy-hover); }
.store-plp .products-grid .actions-secondary:empty { display: none; }

@media (max-width: 900px) {
	.store-plp .products-grid .product-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.store-plp .products-grid .product-item-details { padding: 14px; }
	.store-plp .products-grid .product-item-link { font-size: 15px; }
	.store-plp .toolbar-products .toolbar-sorter { margin-left: 0; }
	/* Magento's phone toolbar shows "View as Grid List" text buttons; the grid is the only view worth having here */
	.store-plp .toolbar-products .modes { display: none; }
}

/* ---- Consistency pass ---- */
.store-plp .limiter select { height: 38px; } /* matched the 38px sort dropdown beside it */
.store-plp .limiter select { height: 38px !important; min-height: 0 !important; } /* a website stylesheet sets min-height 43px */