/*
 * Product-taxonomy ARCHIVE layouts — MKT theme.
 * Loaded only on product taxonomy archives / the shop base / product_tag archives
 * (see mkt_enqueue_cat_archive_styles() in functions.php).
 *
 * WHY THIS FILE EXISTS
 * The theme's woocommerce/archive-product.php renders curated terms from their ACF
 * `mkt_page_code` (browse/autos/fixed-blades/folders/hats/t-shirts/balisongs) and fell every
 * OTHER populated term through to a bare WooCommerce loop with no grid CSS at all: the theme
 * never shipped any `ul.products` / `li.product` rules and Woo's own layout sheets are not
 * loaded. Measured on staging 2026-09-20 at 1440: cards collapsed to 187px-wide unstyled
 * blocks with the image bleeding to x=0 and the add-to-cart button orphaned in a second
 * column — the "substantially broken category cards" defect.
 *
 * PRODUCTION SPLITS THIS FAMILY THREE WAYS (each route's live HTML fetched and the
 * `data-elementor-type="product-archive"` template id read off it, 2026-09-20):
 *   1. Elementor archive template 15221 — hero band + "Categories" nav band + 3-col
 *      "See Details" card grid. Assigned to: special-projects, new, gear.
 *   2. Elementor archive template 21834 — plain linked H1 + term description + 1-col
 *      loop grid (loop item template 21840). Assigned to: praetorians.
 *   3. No Elementor archive template -> stock WooCommerce `ul.products` grid. This is
 *      production's behaviour on: gear/swag, swag, tools, uncategorized (and the /shop/
 *      base + product_tag archives).
 * So both a hero/nav/card treatment AND a correct plain Woo grid are needed; neither
 * substitutes for the other. The route->treatment map lives in mkt_cat_archive_layout().
 *
 * Every value below is a live computed style or getBoundingClientRect measured against
 * production https://medfordknife.com/product-category/special-projects/ at 1440x1000 and
 * 390x844 (evidence: or-pages/evidence/cat-archive-metrics.json + h1probe output), not a
 * transcription of Elementor's stylesheet. Where Elementor's own declared value and the
 * computed result disagreed (e.g. the grid band's --padding-top:64px computing to
 * padding-top:0 with the 64px actually arriving as inner offset) the COMPUTED result wins,
 * because that is what a visitor sees.
 */

/* ==========================================================================
   1. Hero band  (prod Elementor container 4ace931)
   ========================================================================== */

/* Measured: hero rect 1440x252 (min-height 250px = 25vh of a 1000px viewport) and 390x263
   (min-height 244.76px = 29vh of 844). The background image is the WooCommerce term
   thumbnail (prod resolves it through Jetpack Photon; the theme points straight at the
   attachment URL, set inline by the template part because it is per-term data). Terms with
   no thumbnail (new, gear) legitimately render the flat #131313 band with no image, exactly
   as production does. */
.mkt-cat-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 25vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	padding: 0;
}
/* Prod's overlay is a ::before at #131313 / opacity .73 sitting over the image. */
.mkt-cat-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #131313;
	opacity: 0.73;
	pointer-events: none;
}
.mkt-cat-hero__inner {
	position: relative; /* above the overlay */
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	max-width: 1140px; /* measured: prod hero inner rect x=150 w=1140 at 1440 (e-con-boxed) */
	margin: 0 auto;
	min-height: inherit;
}

/* Measured: h1 40px/500, line-height 40px, system stack, #fff, centered; wrapper margin
   96px 16px 16px at 1440 and 72px 32px 32px at <=575px. Production's h1 does NOT use the
   theme's Inter brand font here (same inheritance trap already fixed on the GF/articles
   pages), so the stack is declared rather than inherited. */
.mkt-cat-hero__title {
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 40px;
	font-weight: 500;
	line-height: 40px;
	color: #fff;
	text-align: center;
	margin: 96px 16px 16px;
}

/* Measured: desc band bg #272727, #fff, font-size 25.6px / line-height 30.72px at 1440
   (Elementor 1.6em / 1.2em), centered, padding 16px 16px 8px, and it spans the boxed
   1140px inner width. */
.mkt-cat-hero__desc {
	background-color: #272727;
	color: #fff;
	font-size: 25.6px;
	line-height: 30.72px;
	text-align: center;
	padding: 16px 16px 8px;
	margin: 0;
}
.mkt-cat-hero__desc p { margin: 0; }
.mkt-cat-hero__desc a { color: #fff; }

/* ==========================================================================
   2. Category nav band  (prod Elementor container 356c15d + nav-menu 1b5142d)
   ========================================================================== */

/* Rendered from the EXISTING `categories` WP menu (term id 604 on staging; its six items
   carry menu-item IDs 15224-15230, the same IDs production serves), so the links are real
   site data and need no content migration. Measured: band 1440x66 / 390x64, bg #3f3f3f,
   items centered, 26px at >=1377px and 19px below it, item padding 13px 20px at 1440 and
   9px at 390, and a 1px x 24px #b74e4e divider between items. */
.mkt-cat-nav {
	background-color: #3f3f3f;
	display: flex;
	flex-direction: column;
	padding: 10px; /* measured: prod band 66px total = a 46px item row inside 10px band padding */
}
.mkt-cat-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-height: 46px; /* prod's menu row measures 46px at 1440 even though each item is shorter */
	margin: 0;
	padding: 0;
}
.mkt-cat-nav li { display: flex; align-items: center; }
/* Divider BETWEEN items only (prod shows none before the first or after the last). */
.mkt-cat-nav li + li::before {
	content: "";
	display: block;
	width: 1px;
	height: 24px;
	background-color: #b74e4e;
	flex: 0 0 1px;
}
.mkt-cat-nav a {
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	display: flex;
	align-items: center;
	color: #fff;
	fill: #fff;
	font-size: 26px;
	/* Measured on prod, not derived: the anchor computes line-height 20px (NOT a ratio off the
	   26px font-size), which with 13px top/bottom padding is exactly the 46px item height prod
	   renders. A 1.2 ratio produced a 57px band against prod's 66px. */
	line-height: 20px;
	text-decoration: none;
	padding: 13px 20px;
	position: relative;
}
/* Prod's e--pointer-underline: a white 3px underline that fades in on hover/current. */
.mkt-cat-nav a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 6px;
	height: 3px;
	background-color: #fff;
	opacity: 0;
	transition: opacity 0.2s;
}
.mkt-cat-nav a:hover::after,
.mkt-cat-nav .current-menu-item > a::after { opacity: 1; }

/* ==========================================================================
   3. Grid band + "See Details" cards  (prod containers 0a5175c / b7cd2dc, loop item 15233)
   ========================================================================== */

/* Measured: band bg rgba(0,0,0,.97) over a cover-positioned
   /wp-content/uploads/2025/06/Grinding-at-Medford-Knife-and-Tool.webp with a #000 / .85
   ::before overlay; background-attachment:fixed only at >=1377px. Computed side padding
   64px at 1440 and 16px at 390; the grid's first row starts 64px below the band top and the
   last row ends 115px above the band bottom (51px loop-widget padding + 64px).
   The background IMAGE is deliberately NOT declared here: this theme forbids hardcoded
   uploads hostnames (see mkt_theme_upload_url() in functions.php — a literal
   medfordknife.com URL in a stylesheet would make staging fetch production's asset). The
   template part resolves it through the uploads abstraction and sets it inline, and
   fail-closed: no usable uploads baseurl means no image, just the near-black band. */
.mkt-cat-grid {
	position: relative;
	background-color: rgba(0, 0, 0, 0.97);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 64px 64px 115px;
}
@media (min-width: 1377px) {
	.mkt-cat-grid { background-attachment: fixed; }
}
.mkt-cat-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0.85;
	pointer-events: none;
}
.mkt-cat-grid__items {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* measured: 3 x 417.33px + 2 x 30px = 1312 at 1440 */
	column-gap: 30px;
	row-gap: 30px;
	align-items: stretch;
	grid-auto-rows: 1fr; /* prod sets this so every row's cards share a height */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card outer: prod's e-con-boxed with its default 10px inset (image box x=74 vs card x=64). */
.mkt-cat-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	margin: 0;
	gap: 0;
	list-style: none;
}
/* Media box: measured min-height 320px at 1440 / 220px at <=575px, overflow hidden.
   BLOCK, not flex, and the image keeps its natural aspect ratio at full column width —
   re-measured on prod against the cards whose source image is NOT square: black-card-dress-
   praetorian-ti-contoured (1439x520) renders img 397x144 inside a 397x320 box, taskmaster
   (1439x1079) renders 397x298, tbf-breakdown-fighter (1439x410) renders 397x113, each sitting
   at the TOP of the 320px box with the remaining space left dark. A flex media box here made
   those images stretch to the full 320px cross-axis height (align-items defaults to stretch),
   and object-fit:cover then cropped ~55% off the sides of the widest ones — a zoomed-in
   close-up instead of the whole knife. Square product images (900x900/1080x1080) still render
   397x397 and grow the box past its min-height, exactly as prod does. */
.mkt-cat-card__media {
	display: block;
	min-height: 320px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: 0; /* kills the inline-image baseline gap now that this is a block box */
}
.mkt-cat-card__media img {
	width: 100%;
	height: auto;
	display: block;
}
/* Measured: title 26px/500 #fff centered, wrapper padding 8px. Declared font stack for the
   same reason as the hero title. */
.mkt-cat-card__title {
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	padding: 8px;
	margin: 0;
}
.mkt-cat-card__title a { color: inherit; text-decoration: none; }
.mkt-cat-card__title a:hover { text-decoration: underline; }
/* Measured: price 22px/600 #dedede centered, no margin/padding of its own. */
.mkt-cat-card__price,
.mkt-cat-card .price {
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 22px;
	font-weight: 600;
	color: #dedede;
	text-align: center;
	margin: 0;
	padding: 0;
}
.mkt-cat-card .price del,
.mkt-cat-card .price ins { color: inherit; }
/* Measured: button rect 199x44 at 1440 = max-width 50% of the 397px media box; bg #e2161c,
   1px #fff border, 4px radius, padding 8px, label 26px #fff, self-centered. Production's
   label is a LINK to the product ("See Details"), not an add-to-cart control, so this is a
   navigation button — the loop's add-to-cart is deliberately not rendered in this family. */
.mkt-cat-card__btn {
	align-self: center;
	width: 50%;
	max-width: 50%;
	box-sizing: border-box;
	background-color: #e2161c;
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 8px;
	margin: 10px 0 0;
	text-align: center;
}
.mkt-cat-card__btn a {
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	display: block;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	margin: 0;
}
.mkt-cat-card__btn:hover { background-color: #c01218; }

/* Breakpoints measured off production's own archive CSS + confirmed against the live
   computed values at 1440 and 390. */
@media (max-width: 1376px) {
	.mkt-cat-nav a { font-size: 19px; }
	.mkt-cat-hero__title { margin: 64px 0 0; }
}
@media (max-width: 1300px) {
	.mkt-cat-hero__title { margin: 96px 32px 32px; }
	.mkt-cat-hero__desc { font-size: 14.4px; line-height: 1.2em; } /* prod .9em */
	.mkt-cat-grid { padding: 16px 16px 67px; }
	.mkt-cat-grid__items { grid-template-columns: repeat(2, 1fr); }
	.mkt-cat-card__title { font-size: 24px; }
	.mkt-cat-card__btn { width: auto; max-width: none; padding: 12px 20px; }
	.mkt-cat-card__btn a { font-size: 18px; }
}
@media (max-width: 575px) {
	.mkt-cat-hero { min-height: 29vh; }
	.mkt-cat-hero__title { margin: 72px 32px 32px; }
	.mkt-cat-hero__desc { font-size: 11.2px; line-height: 1.2em; } /* prod .7em; measured 11.2/13.44 */
	.mkt-cat-nav { padding: 8px; }
	.mkt-cat-nav ul { min-height: 48px; } /* measured: prod's 390 band is 64px = 48 + 8px x2 */
	/* At 390 the six items wrap to TWO rows on prod and each row is 24px tall (prod's anchor
	   computes line-height 1.9px, i.e. Elementor's .1em, and renders a 24px box). Keeping the
	   desktop 20px line-height here made each item 38px and the band 92px against prod's 64px.
	   6px of line box plus the 9px padding reproduces prod's 24px item, and because the anchor
	   is a centred flex box the 19px text sits in the same place as prod's. */
	.mkt-cat-nav a { font-size: 19px; padding: 9px; line-height: 6px; }
	.mkt-cat-nav a::after { left: 9px; right: 9px; height: 4px; }
	/* Measured at 390: band side padding 16px, ONE column, card 358 wide, media box
	   350x350 (min-height 220), title 14px, price 16px, button 109x34. */
	.mkt-cat-grid { padding: 16px 16px 67px; }
	.mkt-cat-grid__items { grid-template-columns: 1fr; }
	.mkt-cat-card { align-items: center; padding: 4px; gap: 2px; }
	.mkt-cat-card > * { width: 100%; }
	.mkt-cat-card__media { min-height: 220px; }
	.mkt-cat-card__title { font-size: 14px; line-height: 1em; padding: 4px; }
	.mkt-cat-card__price, .mkt-cat-card .price { font-size: 16px; }
	.mkt-cat-card__btn { width: auto; max-width: none; padding: 8px 12px; }
	.mkt-cat-card__btn a { font-size: 16px; }
}

/* ==========================================================================
   4. Plain WooCommerce loop archives  (production's own treatment for gear/swag,
      swag, tools, uncategorized and product_tag archives)
   ==========================================================================
   RE-MEASURED AND REWRITTEN 2026-09-20 against the live routes. Production does not
   apply the site's dark card design to these pages at all: it serves WooCommerce's
   own stock LIGHT archive. Measured on /product-category/gear/swag/ at 1440:

     body            background #fff, color #333   (the theme body is #000/#fff)
     main.site-main  max-width 1140px, centered -> x=150 w=1140
     ul.products     Woo's own float grid, .columns-4: li width 251.36px,
                     margin-right 43.31px, margin-bottom 47.87px, 4 per row
     thumbnail       square 600x600 source rendered 251x251
     loop title      16px/500, rgb(48,87,199), line-height 19.2px, LEFT aligned
     price           13.7px/400, rgb(149,142,9)
     button          "Select options", bg rgb(233,230,237), color rgb(81,81,81),
                     16px, padding 9.888px 16px, radius 3px
     h1              40px/500 #333, system stack, margin 8px 0 16px
     breadcrumb      14.72px rgb(118,118,118), system stack, margin-bottom 14.72px

   Both hosts load woocommerce-layout.css, woocommerce-smallscreen.css and
   woocommerce.css, and both emit body.woocommerce plus ul.products.columns-4 -- so
   Woo's own grid already applies on staging. The first version of this section
   replaced that grid with an invented dark 3-column flex layout (width/float
   !important, the clearfix disabled, red buttons, white centered titles), which is
   exactly why staging rendered li 417x589 at x=64 against production's 251x382 at
   x=150. Everything Woo owns is therefore left alone here; this section supplies only
   what production adds on top of Woo: the light page band, the 1140px content column,
   and the archive heading. Anything still off after this is a real delta to measure,
   not something to paper over with another override. */

/* Full-bleed light band. Scoped to this <main> so the dark site header and footer are
   untouched; the body rule covers the area below a short archive, which is white on
   prod too. body.mkt-archive-woo-page is added by mkt_body_class_cat_archive() only for
   this branch, so no other route can pick up a white page. */
.mkt-archive-woo {
	background: #fff;
	color: #333;
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* prod uses the system stack here, not the theme's Inter */
	padding-bottom: 32px;
}
body.mkt-archive-woo-page { background: #fff; }

/* Production's content column is main.site-main itself (max-width 1140, centered). Our
   <main> is the full-bleed white band instead, so the template wraps the archive in
   .mkt-archive-woo__col and the column lives there. A per-child max-width was tried and
   rejected: Woo floats the result count and the ordering select, and auto margins do not
   center a float, so those two would have stayed pinned to the viewport edge. */
.mkt-archive-woo__col {
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
}
@media (max-width: 1188px) {
	.mkt-archive-woo__col { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 780px) {
	/* measured at 390: prod content column is x=10 w=370, a 10px gutter (not the 24px above) */
	.mkt-archive-woo__col { padding-left: 10px; padding-right: 10px; }
}

/* Archive heading. mkt-globals.css styles .mkt-archive-woo__title for the dark archives
   (1.9rem/700 #fff Inter); production's plain archive heading is 40px/500 #333 in the
   system stack, so override it inside this scope only. */
.mkt-archive-woo .mkt-archive-woo__head {
	max-width: none;
	margin: 0;
	padding: 0;
}
.mkt-archive-woo .mkt-archive-woo__title {
	font-size: 40px;
	font-weight: 500;
	line-height: 1.2;
	color: #333;
	margin: 8px 0 16px;
}
.mkt-archive-woo .mkt-archive-woo__desc {
	font-size: 16px;
	color: #333;
	max-width: none;
	margin: 0 0 16px;
}

/* Woo chrome that the dark globals recolour for the other archives. */
.mkt-archive-woo .woocommerce-result-count,
.mkt-archive-woo .woocommerce-ordering { color: #333; }
/* Prod's ordering control measures 235x38: 16px text, 8px 16px padding, 1px #666 border,
   black text on white. mkt-globals.css styles this select for the dark archives (13.3px UA
   text in a 6px/8px box with a #ccc border), which rendered it 184x31 here. */
.mkt-archive-woo .woocommerce-ordering select {
	background: #fff;
	color: #000;
	border: 1px solid #666;
	font-size: 16px;
	padding: 8px 16px;
	font-family: inherit; /* prod's select renders 235px wide; the UA font made it 230px */
}
.mkt-archive-woo .woocommerce-breadcrumb { color: #767676; }

/* Two values production's stack supplies that a standalone theme does not.
   1. li.product computes `list-item` on production and `grid` on staging, even though BOTH
      hosts load the same woocommerce.css 11.1.0 (production's Elementor/Hello Woo styles
      reset it; nothing here did). Under `grid` the loop anchor became a content-sized grid
      item, so the 600x600 thumbnail rendered 103px wide and "Select options" was thrown into
      a second column at the top of the card - the exact symptom first reported on these
      routes. Declared as the computed production value rather than re-implementing the card.
   2. The loop title inherits Hello's heading weight (500) and line-height (19.2px) and the
      kit's link colour (#3057c7) on production; with neither, staging fell back to the UA
      default h2 (700 / 24px) and the UA link blue (#00e). */
.mkt-archive-woo ul.products li.product { display: list-item; }
.mkt-archive-woo ul.products li.product .woocommerce-loop-product__title {
	font-weight: 500;
	line-height: 19.2px;
}
/* Loop link only. A blanket `li.product a` rule also recoloured "Select options", which
   production renders in Woo's own #515151. */
.mkt-archive-woo ul.products li.product a.woocommerce-LoopProduct-link { color: #3057c7; }

/* ==========================================================================
   5. Praetorians/plain-head archive
   ========================================================================== */
.mkt-cat-grid--onecol .mkt-cat-grid__items { grid-template-columns: 1fr; }
.mkt-cat-head--plain {
	max-width: 1140px;
	margin: 0 auto;
	padding: 32px 24px 8px;
}
.mkt-cat-head--plain .mkt-cat-hero__title { margin: 0 0 16px; text-align: center; }
.mkt-cat-head--plain .term-description { color: #cfcfcf; line-height: 1.5; text-align: center; }
.mkt-cat-head--plain .term-description a { color: #fff; }
/* Scoped legacy collection: preserves the current editorial hero and three knife rows. */
.mkt-cat-head--praetorians { max-width:none; min-height:279px; padding:79px max(24px,calc((100% - 1140px)/2)) 40px; background-size:cover; background-position:center; }
.mkt-cat-head--praetorians .mkt-cat-hero__title { font:900 56px/1 Arial,sans-serif; text-align:left; margin:0 0 8px; }
.mkt-cat-head--praetorians .term-description { font-size:14px; line-height:1.5; text-align:left; color:#fff; }
.mkt-cat-head--praetorians .term-description p { margin:0; }
.mkt-cat-head--praetorians .term-description a { color:#3057c7; text-decoration:none; }
.mkt-cat-grid--praetorians { padding:32px max(24px,calc((100% - 1080px)/2)) 50px; background-attachment:scroll; }
.mkt-cat-grid--praetorians .mkt-cat-grid__items { row-gap:30px; }
.mkt-cat-grid--praetorians .mkt-cat-card { min-height:240px; padding:0 10px 10px; display:grid; grid-template-columns:minmax(0,38%) minmax(0,62%); align-items:end; border-bottom:2px solid #fff; }
.mkt-cat-grid--praetorians .mkt-cat-card__media { grid-column:2; grid-row:1; min-height:0; }
.mkt-cat-grid--praetorians .mkt-cat-card__price,
.mkt-cat-grid--praetorians .mkt-cat-card .price,
.mkt-cat-grid--praetorians .mkt-cat-card__btn { display:none; }
.mkt-cat-grid--praetorians .mkt-cat-card__title { grid-column:1; grid-row:1; padding:0; margin:0; text-align:left; font-size:49px; line-height:1; }
.mkt-cat-grid--praetorians .mkt-cat-card__title a { display:block; }
@media(max-width:767px) {
 .mkt-cat-head--praetorians { min-height:154px; padding:22px 10px 20px; }
 .mkt-cat-head--praetorians .mkt-cat-hero__title { font-size:25px; margin-bottom:4px; }
 .mkt-cat-head--praetorians .term-description { font-size:11px; line-height:1.4; }
 .mkt-cat-grid--praetorians { padding:14px 12px 60px; }
 .mkt-cat-grid--praetorians .mkt-cat-grid__items { row-gap:0; }
 .mkt-cat-grid--praetorians .mkt-cat-card { min-height:180px; padding:0 8px; grid-template-columns:30% 70%; align-items:center; }
 .mkt-cat-grid--praetorians .mkt-cat-card__title { font-size:20px; line-height:1; }
}