/*
 * mkt-globals.css — base tokens/reset for MKT theme.
 *
 * The site's page bodies ([mkt_page_code]) and the header/footer chrome each ship
 * their OWN scoped CSS, so this file is lean: it establishes the global document
 * base (Inter font, black background, white text, box-sizing, zero body margin)
 * plus the WordPress/WooCommerce base utilities a standalone theme must own —
 * most importantly `.screen-reader-text`, content alignments, and captions. These
 * were previously supplied by the old parent theme's stylesheet; without them,
 * screen-reader-only labels on WooCommerce/forms would render visibly.
 *
 * Do NOT put component/section styling here — that lives with each page's own
 * markup. Keep this lean to avoid fighting the pages' scoped resets.
 *
 * Base values captured from live: body{font-family:"Inter",sans-serif;
 * background:#000;color:#fff;margin:0;overflow-x:hidden}.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background-color: #000;
	color: #fff;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ── WordPress/WooCommerce base this theme owns (standalone; no parent) ──────────
   Screen-reader-only text. WordPress core, WooCommerce, search and comment forms
   emit elements with class="screen-reader-text" that MUST stay visually hidden; a
   standalone theme has to provide this rule itself or those labels render on-page. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #111;
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 12px 24px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Content alignments + captions for post_content / editorial (formerly parent-supplied). */
.alignleft { float: left; margin-right: 1rem; }
.alignright { float: right; margin-left: 1rem; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
.alignwide { margin-left: auto; margin-right: auto; max-width: 1100px; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignfull img { width: 100vw; }
.wp-caption { max-width: 100%; margin-bottom: 1.25rem; }
.wp-caption img { display: block; margin-left: auto; margin-right: auto; }
/* Embedded media inside a page body can't exceed the content width. A stored embed with an inline
   width>100% (e.g. the Heyzine flip-book iframe on /comics with style="width:110%") would otherwise
   overflow the viewport horizontally at desktop width. This is the generic-page counterpart to the
   product-scoped iframe cap in the @media(max-width:768px) block below; validated on /comics
   (scrollWidth 1584->1440, both iframes still rendered). No !important needed — max-width beats inline width. */
.mkt-main iframe, .mkt-main embed, .mkt-main object, .mkt-main video { max-width: 100%; }
.wp-caption-text, .gallery-caption { margin: 0; font-size: .8125rem; line-height: 1.5; padding: .5rem 0; color: #a1a1aa; }

/* Intentionally NO global `a{}` color rule: body color is #fff, so a global
   link color would make links invisible on any page/template not yet migrated
   (WooCommerce, archives, fallbacks). Header, footer, and each page body define
   their own link colors in their scoped CSS. */

/* Note: .mk-header is position:relative (flows normally), so the WP admin bar
   needs no offset compensation here. */

/* ── Archive / search / pagination templates (mkt-archive.php, mkt-search.php) ──
   Minimal, scoped layout so these fallback pages read as branded, not raw. */
.mkt-main.mkt-archive,
.mkt-main.mkt-search,
.mkt-main.mkt-404 { max-width: 1100px; margin: 0 auto; padding: 48px 24px; }

.mkt-archive__head,
.mkt-search__head { margin: 0 0 32px; }
.mkt-archive__title,
.mkt-search__title { font-size: 1.9rem; margin: 0 0 10px; }
.mkt-archive__title span,
.mkt-search__title span { color: #c5a059; }
.mkt-archive__desc { color: #a1a1aa; }

.mkt-search__form { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.mkt-search__input { flex: 1 1 260px; padding: 10px 14px; background: #151515; border: 1px solid #333; color: #fff; border-radius: 6px; }
.mkt-search__submit { padding: 10px 20px; background: #c5a059; color: #111; border: 0; border-radius: 6px; font-weight: 600; cursor: pointer; }

.mkt-archive__item,
.mkt-search__item { padding: 20px 0; border-bottom: 1px solid #2a2a2a; }
.mkt-archive__item-title a,
.mkt-search__item-title a { color: #fff; text-decoration: none; font-size: 1.2rem; }
.mkt-archive__item-title a:hover,
.mkt-search__item-title a:hover { color: #c5a059; }
.mkt-archive__item-excerpt,
.mkt-search__item-excerpt { color: #a1a1aa; margin: 8px 0 0; }
.mkt-archive__item-more { display: inline-block; margin-top: 8px; color: #c5a059; text-decoration: none; font-size: .9rem; }

/* product result cards in search */
.mkt-search__item.mkt-search__product { display: flex; gap: 16px; align-items: center; }
.mkt-search__product-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; display: block; }
.mkt-search__product-price { color: #c5a059; font-weight: 600; margin-top: 4px; }

.mkt-archive__pagination,
.mkt-search__pagination { padding: 32px 0 0; }
.mkt-archive__pagination .page-numbers,
.mkt-search__pagination .page-numbers { display: inline-block; padding: 6px 12px; margin: 0 3px; border: 1px solid #333; color: #fff; text-decoration: none; border-radius: 4px; }
.mkt-archive__pagination .page-numbers.current,
.mkt-search__pagination .page-numbers.current { background: #c5a059; color: #111; border-color: #c5a059; }

.mkt-archive__empty,
.mkt-search__empty { color: #a1a1aa; padding: 24px 0; }

/* ── Curated loop-grid pages (special-projects, holiday-armory, samurai-series) ──
   Matches the live Loop Grid design: two-column grid on a dark page, borderless
   full-bleed images (natural aspect, not cropped), centered white title (21px/500),
   optional excerpt below, price only for product grids. */
.mkt-grid { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.mkt-grid__head { margin: 0 0 28px; text-align: center; }
.mkt-grid__title { font-size: 1.9rem; margin: 0; color: #fff; }
.mkt-grid__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.mkt-grid__card { background: transparent; border: 0; }
.mkt-grid__card-link { display: block; color: #fff; text-decoration: none; }
.mkt-grid__card-media img { width: 100%; height: auto; display: block; }
.mkt-grid__card-title { font-size: 21px; font-weight: 500; text-align: center; color: #fff; margin: 16px 0 0; line-height: 1.2; }
.mkt-grid__card-title--product { font-size: 24px; } /* live product grids use 24px vs 21px for post grids */
.mkt-grid__card-excerpt { font-size: 16px; text-align: center; color: #fff; margin: 8px 0 0; line-height: 1.5; }
.mkt-grid__card-price { text-align: center; color: #c5a059; font-weight: 600; margin: 8px 0 0; }
.mkt-grid__card-link:hover .mkt-grid__card-title { color: #c5a059; }
.mkt-grid__empty { color: #a1a1aa; padding: 24px 0; }
@media (max-width: 768px) {
	.mkt-grid__items { grid-template-columns: 1fr; }
}

/* ── Page hero banner (mkt-hero.php) — matches the live cart/utility hero ── */
.mkt-hero {
	background-color: #0a0a0a;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border-bottom: 4px solid #ce0a2c; /* live: rgb(206,10,44) */
	min-height: 105px;
	display: flex;
	align-items: center;
}
.mkt-hero__inner { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.mkt-hero__title {
	font-family: "Anton", sans-serif;
	font-size: 37px;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	margin: 0;
}
@media (max-width: 600px) {
	.mkt-hero__title { font-size: 28px; }
}

/* Woo shortcode page wrapper (cart/checkout body under the hero) */
.mkt-woo-page { max-width: 1140px; margin: 0 auto; padding: 40px 24px; }

/* ── Cart (/cart/) — matches live: white page canvas, a boxed/rounded hero card on
   desktop (full-bleed again on mobile), and a two-column product-table + order-review
   layout with a BLACK "Proceed to Checkout" button (live cart's own button color —
   distinct from the site-wide dark-red Woo accent used on product/account buttons).
   Checkout is unaffected: CartFlows renders that page independently of this shortcode. */
/* flow-root: without it, the hero's own top margin below collapses through this
   element (no border/padding of its own to stop it), pushing the whole white
   canvas down and exposing the dark body background as a band under the nav. */
.mkt-cart { background: #fff; padding-bottom: 0; display: flow-root; }
.mkt-cart .mkt-hero {
	max-width: 1008px;
	margin: 26px auto 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
	min-height: 0;
	aspect-ratio: 1008 / 188;
}
.mkt-cart .mkt-hero__inner {
	padding: 0 64px;
}
.mkt-cart .mkt-hero__title {
	font-family: "Anton", sans-serif;
	font-size: 56px;
	font-weight: 500;
	line-height: 56px;
}
.mkt-cart .mkt-woo-page { color: #333; font-family: "Roboto", sans-serif; padding-top: 78px; }
.mkt-cart .woocommerce-message { color: #333; max-width: 888px; margin-left: auto; margin-right: auto; margin-bottom: 32px; }
@media (min-width: 769px) {
	.mkt-cart .mkt-woo-page > .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 524fr) minmax(0, 342fr);
		column-gap: 32px;
		row-gap: 0;
		align-items: start;
		max-width: 888px;
		margin: 0 auto;
	}
	.mkt-cart .mkt-woo-page > .woocommerce > * { grid-column: 1 / -1; }
	.mkt-cart .mkt-woo-page > .woocommerce > form.woocommerce-cart-form { grid-column: 1; }
	.mkt-cart .mkt-woo-page > .woocommerce > .cart-collaterals { grid-column: 2; }
	.mkt-cart .woocommerce table.cart img { width: 46px; max-width: 46px; }
}
.mkt-cart .woocommerce-cart-form,
.mkt-cart .cart-collaterals .cart_totals {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.mkt-cart .woocommerce-cart-form { padding: 0; }
.mkt-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}
.mkt-cart table.cart { width: 100%; border-collapse: collapse; border: 0; margin: 0; }
.mkt-cart table.cart th { text-align: left; color: #333; padding: 10px 8px; border-bottom: 1px solid #e2e2e2; }
.mkt-cart table.cart td { padding: 14px 8px; border-bottom: 1px solid #f0f0f0; color: #333; vertical-align: middle; }
.mkt-cart table.cart td.product-name a { color: #1155cc; }
.mkt-cart table.cart img { border-radius: 4px; max-width: 64px; height: auto; }
.mkt-cart table.cart tr:has(> td.actions):has(button[name="update_cart"][disabled]):not(:has(.coupon)):not(:has(button:not([disabled]), input:not([type="hidden"]), select, a)) { display: none; }
.mkt-cart .cart_totals h2 { font-size: 20px; margin: 0 0 16px; color: #333; }
.mkt-cart .cart_totals table.shop_table { width: 100%; border-collapse: collapse; }
.mkt-cart .cart_totals table.shop_table th,
.mkt-cart .cart_totals table.shop_table td { padding: 10px 0; border-bottom: 1px solid #f0f0f0; color: #333; text-align: left; }
.mkt-cart .cart_totals table.shop_table td { text-align: right; }
.mkt-cart .wc-proceed-to-checkout { padding: 16px 0 0; }
.mkt-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	background-color: #000 !important;
	border-radius: 3px;
	font-family: "Anton", sans-serif;
	font-weight: 700;
	font-size: 25px;
	line-height: 25px;
	padding: 15px 25px;
	letter-spacing: normal;
	margin: 0;
	border: 2px solid #5bc0de;
}
.mkt-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover { background-color: #222 !important; }
@media (max-width: 768px) {
	.mkt-cart { padding-bottom: 40px; }
	.mkt-cart .mkt-woo-page { padding: 0 0 40px; }
	.mkt-cart .mkt-hero { margin: 0; border-radius: 0; box-shadow: none; max-width: none; aspect-ratio: auto; min-height: 71px; }
	.mkt-cart .mkt-hero__inner { padding: 0 20px; }
	.mkt-cart .mkt-hero__title { font-size: 27px; line-height: 27px; }
	.mkt-cart .woocommerce-message { max-width: none; }
	.mkt-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button { font-size: 18px; line-height: 18px; padding: 15px 18px; margin: 0; letter-spacing: normal; }
}

/* Mobile cart product card and native shop menu label. */
@media (max-width: 768px) {
  .mkt-cart { padding-bottom: 0; }
  .mkt-cart .mkt-woo-page { padding-bottom: 30px; }
  .mkt-cart .woocommerce-cart-form { padding: 30px; }
  .mkt-cart table.cart thead { display: none; }
  .mkt-cart table.cart tr.cart_item {
    display: block;
    position: relative;
    padding: 32px 28px 5px;
    border-bottom: 1px solid #f0f0f0;
  }
  .mkt-cart table.cart tr.cart_item td {
    display: block;
    padding: 3px 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    line-height: 21px;
    text-align: left;
  }
  .mkt-cart table.cart tr.cart_item td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    display: inline;
  }
  .mkt-cart table.cart td.product-thumbnail {
    display: block !important;
    padding: 0 0 14px;
  }
  .mkt-cart table.cart tr.cart_item td.product-thumbnail::before {
    display: none;
  }
  .mkt-cart table.cart td.product-thumbnail img {
    display: block;
    width: 80%;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
  }
  .mkt-cart table.cart td.product-subtotal {
    text-align: right;
  }
  .mkt-cart table.cart td.product-remove {
    position: absolute;
    top: 4px;
    right: 22px;
    padding: 0;
  }
  .mkt-cart table.cart tr.cart_item td.product-remove::before {
    display: none;
  }
  .mkt-cart .cart-collaterals { margin-top: 32px; }
  .mkt-cart .cart-collaterals .cart_totals { padding: 30px; }
}
@media (min-width: 769px) {
  .mkt-cart .mkt-woo-page { padding-bottom: 20px; }
}
@media (max-width: 1023px) {
  body .mk-header .mk-hamburger {
    display: flex;
    align-items: center;
  }
  body .mk-header .mk-hamburger::after {
    content: "SHOP";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    margin-left: 8px;
  }
}

/* Graceful "in preparation" fallback (mkt-body.php) — shown when a page has no
   safe body yet (no page_code, and its stored content is a page-builder-only export
   or full HTML document we won't echo). Keeps a real H1 for SEO. */
.mkt-pending { max-width: 900px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.mkt-pending__title { font-size: 1.9rem; margin: 0 0 12px; color: #fff; }
.mkt-pending__note { color: #a1a1aa; margin: 0; }

/* ── Account / login / register (mkt-account) — matches live inverted panel ── */
.mkt-account { background: #fff; color: #333; padding: 48px 24px 72px; }
.mkt-account__notice {
	max-width: 832px; margin: 0 auto 40px; padding: 32px;
	border: 2px solid #333; border-radius: 16px;
	text-align: center; font-size: 16px; color: #333; line-height: 1.6;
}
.mkt-account__inner { max-width: 832px; margin: 0 auto; }
/* Two-column Login | Register when logged out. WooCommerce's form-login.php wraps
   the two forms in .u-columns.col2-set > .u-column1 + .u-column2, and Woo's own CSS
   floats/half-widths them — so we grid the wrapper AND neutralize the float/width on
   the columns (WC CSS loads after ours) to force a true 2-col grid. Verified on staging. */
.mkt-account .u-columns.col2-set {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	width: 100% !important;
	/* explicit row-flow + top alignment — auto-placement + stretch was dropping the
	   two forms into wrong cells/rows (login right, register below-left). */
	grid-auto-flow: row !important;
	align-items: start !important;
}
/* Pin login to col1 and register to col2 so they sit side-by-side (matches live). */
.mkt-account .u-columns.col2-set > .u-column1 { grid-column: 1 !important; grid-row: 1 !important; }
.mkt-account .u-columns.col2-set > .u-column2 { grid-column: 2 !important; grid-row: 1 !important; }
.mkt-account .u-columns.col2-set > .u-column1,
.mkt-account .u-columns.col2-set > .u-column2,
.mkt-account .u-columns.col2-set .col-1,
.mkt-account .u-columns.col2-set .col-2 {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}
.mkt-account .woocommerce h2 { font-size: 32px; font-weight: 500; color: #333; margin: 0 0 18px; }
.mkt-account .woocommerce-form { background: transparent; }
.mkt-account label { color: #333; }
.mkt-account input[type=text], .mkt-account input[type=email], .mkt-account input[type=password] {
	width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #333;
}
.mkt-account .button, .mkt-account button[type=submit] {
	background: #111; color: #fff; border: 0; border-radius: 6px; padding: 10px 22px; font-weight: 600; cursor: pointer;
}
.mkt-account a { color: #c5a059; }
/* Logged-in dashboard: WooCommerce MyAccount nav + content in the light panel.
   Minimal, defensive styling so the dashboard reads as branded (not raw Woo) on
   the white panel. Woo floats .navigation (~35%) and .content (~65%); we grid them
   for a clean 2-col dashboard and de-float. NOTE: live logged-in dashboard not yet
   captured (no prod login) — re-verify against live once a staging account exists
   and adjust orders-table/address styling to match. */
.mkt-account .woocommerce-MyAccount-navigation,
.mkt-account .woocommerce-MyAccount-content { float: none; width: 100%; }
@media (min-width: 769px) {
	.mkt-account .woocommerce-account .woocommerce {
		display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start;
	}
}
.mkt-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.mkt-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid #e5e5e5; }
.mkt-account .woocommerce-MyAccount-navigation a { display: block; padding: 10px 0; color: #333; text-decoration: none; }
.mkt-account .woocommerce-MyAccount-navigation li.is-active a { font-weight: 700; color: #ce0a2c; }
.mkt-account .woocommerce-MyAccount-navigation a:hover { color: #ce0a2c; }
.mkt-account .woocommerce-orders-table,
.mkt-account table.shop_table { width: 100%; border-collapse: collapse; }
.mkt-account .woocommerce-orders-table th,
.mkt-account .woocommerce-orders-table td,
.mkt-account table.shop_table th,
.mkt-account table.shop_table td { padding: 10px 12px; border-bottom: 1px solid #e5e5e5; text-align: left; color: #333; }
/* Addresses view (.u-columns.woocommerce-Addresses.col2-set) reuses the col2-set
   grid rule above — billing/shipping sit side-by-side, which is the desired layout. */
@media (max-width: 768px) {
	.mkt-account .u-columns.col2-set { grid-template-columns: 1fr; }
	/* The desktop rule pins .u-column2 to grid-column:2/grid-row:1 with !important; a single-column
	   template alone leaves that pin intact, so Register stays in an implicit 2nd column and overflows
	   (~157px at 390px). Re-place BOTH columns into column 1 / auto rows so they stack. Injected +
	   re-measured on staging my-account (390px): overflow 157->0, both columns full width, Login above
	   Register, reCAPTCHA within viewport. */
	.mkt-account .u-columns.col2-set > .u-column1,
	.mkt-account .u-columns.col2-set > .u-column2 { grid-column: 1 !important; grid-row: auto !important; }
}

/* ── Single product (Woo-native Type B/C) — matches the live product design ──
   Live (captured galaxy-tff-1): content on the dark site bg, white title/price, a
   two-column gallery-left / summary-right layout (~1080px container, 40px gap), and a
   dark-red add-to-cart button. Type A (page_code React) products echo their own markup
   and are unaffected by these rules. The layout modifier classes come from
   woocommerce/single-product.php: --twocol (plain Woo) vs --stacked (Iconic configurator). */
/* Base container. Text color is set per-variant (--twocol = white on dark;
   --stacked = dark on the light panel) so neither leaks invisible text. */
.mkt-product--twocol { color: #fff; }
.mkt-product .product {
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 24px 64px;
}

/* Plain WooCommerce archive fallback (shop base / tags / categories w/o page_code):
   a branded header (term-name H1 + optional description) matching live's Woo grid,
   plus result-count/ordering spacing so it reads as designed, not raw. */
.mkt-archive-woo__head { max-width: 1200px; margin: 0 auto; padding: 8px 24px 0; }
.mkt-archive-woo__title { font-size: 1.9rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.mkt-archive-woo__desc { color: #cfcfcf; max-width: 800px; margin: 0 0 8px; line-height: 1.5; }
.mkt-archive-woo .woocommerce-result-count,
.mkt-archive-woo .woocommerce-ordering { color: #cfcfcf; }
.mkt-archive-woo .woocommerce-ordering select { background: #111; color: #fff; border: 1px solid #444; border-radius: 4px; padding: 6px 8px; }

/* Two-column (dominant design): gallery left, summary right. WooCommerce's
   content-single-product.php floats .images left (~48%) and .summary right (~48%);
   we replace that with a robust grid so the columns are exact and gap is 40px. */
.mkt-product--twocol .product {
	display: grid;
	grid-template-columns: minmax(0, 497fr) minmax(0, 523fr);
	gap: 40px;
	align-items: start;
}
.mkt-product--twocol .product > .woocommerce-product-gallery,
.mkt-product--twocol .product > .images { float: none !important; width: auto !important; margin: 0 !important; grid-column: 1; }
.mkt-product--twocol .product > .summary,
.mkt-product--twocol .product > .entry-summary { float: none !important; width: auto !important; margin: 0 !important; grid-column: 2; }
/* Full-width rows below the two columns (tabs / description / related / upsells).
   NOTE: WooCommerce emits up-sells as <section class="up-sells upsells products"> —
   its real class is `up-sells` (hyphen), so target that (plus `.related`). */
.mkt-product--twocol .product > .woocommerce-tabs,
.mkt-product--twocol .product > .related,
.mkt-product--twocol .product > .up-sells { grid-column: 1 / -1; clear: both; }

/* Shared 2-column typography — matches live (white title/price on the dark site bg). */
.mkt-product--twocol .product_title,
.mkt-product--twocol .summary .product_title {
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 28px; font-weight: 500; color: #fff; text-transform: none; margin: 0 0 12px;
}
.mkt-product--twocol .summary .price,
.mkt-product--twocol .summary .price .woocommerce-Price-amount { font-size: 33px; font-weight: 400; color: #fff; }
.mkt-product--twocol .woocommerce-product-details__short-description { font-size: 16px; color: #cfcfcf; line-height: 1.5; margin: 16px 0; }
.mkt-product--twocol .woocommerce-tabs .panel { color: #cfcfcf; }
.mkt-product--twocol .quantity input { border: 1px solid #444; background: #111; color: #fff; }

/* Stacked (Iconic configurator products, e.g. marauder-h): full-width gallery on
   top, summary below — the configurator needs the width. Live for these = a LIGHT
   boxed panel (white bg, BLACK Anton title, black 30px price), so this variant sets
   its own light background + dark text (it must NOT inherit the dark-bg white text). */
.mkt-product--stacked .product {
	display: block; background: #fff; color: #333;
	max-width: 1180px; padding: 40px; border-radius: 4px;
}
.mkt-product--stacked .product > .woocommerce-product-gallery,
.mkt-product--stacked .product > .images { float: none !important; width: 100% !important; margin: 0 0 32px !important; }
.mkt-product--stacked .product > .summary,
.mkt-product--stacked .product > .entry-summary { float: none !important; width: 100% !important; margin: 0 !important; }
.mkt-product--stacked .product_title,
.mkt-product--stacked .summary .product_title {
	font-family: "Anton", sans-serif; font-size: 37px; font-weight: 500; color: #000; text-transform: none; margin: 0 0 12px;
}
.mkt-product--stacked .summary .price,
.mkt-product--stacked .summary .price .woocommerce-Price-amount { font-size: 30px; font-weight: 800; color: #000; }
.mkt-product--stacked .woocommerce-product-details__short-description { font-size: 16px; color: #333; line-height: 1.5; margin: 16px 0; }
.mkt-product--stacked .quantity input { border: 1px solid #ccc; background: #fff; color: #333; }

/* Native Praetorian product pages (700/701) are content-first, white-canvas pages.
   They keep the Woo product shell, but swap in the live title/specs/about/reviews
   structure from current Woo fields and CusRev output. */
.mkt-product--praetorian-native { background: #fff; color: #333; overflow-x: hidden; }
.mkt-product--praetorian-native .product { max-width: 1080px; margin: 0 auto; padding: 144px 12px 0; background: #fff; color: #333; }
.mkt-product--praetorian-native .woocommerce-breadcrumb { background: #666; color: #aaa; text-align: center; padding: 12px 16px; margin: 0; font-weight: 600; font-size: 18px; }
.mkt-product--praetorian-native .woocommerce-breadcrumb a { color: #fff; text-decoration: none; }
.mkt-product--praetorian-native .summary .product_title { font-family: "Anton", sans-serif; font-size: 36.8px; line-height: 1; font-weight: 500; color: #000; text-transform: none; margin: 12px 0 26px; }
.mkt-product--praetorian-native .summary .price,
.mkt-product--praetorian-native .summary .price .woocommerce-Price-amount { font-size: 28px; line-height: 1.5; font-weight: 700; color: #000; }
.mkt-product--praetorian-native .summary .stock { color: #cf1f1f; margin: 22px 0 0; font-size: 15px; line-height: 1.5; }
.mkt-product--praetorian-native .woocommerce-product-details__short-description { display: none; }
.mkt-product--praetorian-native .mkt-praetorian-native__fullwidth { grid-column: 1 / -1; width: 100%; }
.mkt-product--praetorian-native .mkt-praetorian-native__mobile-cue { display: none; }
.mkt-product--praetorian-native .mkt-praetorian-native__back { display: table; margin: 40px auto 0; padding: 10px 20px; border-radius: 3px; background: #000; color: #fff; font-size: 13px; text-decoration: none; }
.mkt-product--praetorian-native .mkt-praetorian-native__configure { display: block; width: 254px; max-width: 100%; padding: 8px 20px; margin: 20px 0 12px; border: 1px solid #999; border-radius: 6px; background: #fff; color: #222; font: 500 16px/1.25 "Anton", sans-serif; }
.mkt-product--praetorian-native .mkt-praetorian-native__specs { position: relative; border: 3px solid #444; display: table; padding: 12px 16px 20px; margin: 0 0 30px; }
.mkt-product--praetorian-native .mkt-praetorian-native__specs-label { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); background: #fff; padding: 0 20px; font-weight: 700; font-size: 16px; color: #333; }
.mkt-product--praetorian-native .mkt-praetorian-native__specs-text { font-size: 16px; line-height: 1.5; color: #333; }
.mkt-product--praetorian-native .mkt-praetorian-native__specs-text p { margin: 0; }
.mkt-product--praetorian-native .mkt-praetorian-native__about { margin: 48px 0 76px; }
.mkt-product--praetorian-native .mkt-praetorian-native__about-title { font: 500 40px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0 0 30px; }
.mkt-product--praetorian-native .mkt-praetorian-native__videos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 0 0 36px; }
.mkt-product--praetorian-native .mkt-praetorian-native__videos iframe { width: 100%; height: auto; aspect-ratio: 16/9; border: 0; }
.mkt-product--praetorian-native .mkt-praetorian-native__about-text { font-size: 20px; line-height: 1.6; padding: 0 12px; }
.mkt-product--praetorian-native .mkt-praetorian-native__reviews { background: #000; color: #fff; width: 100vw; margin-left: calc(50% - 50vw); padding: 60px max(24px,calc((100vw - 1140px) / 2)) 66px; }
.mkt-product--praetorian-native .mkt-praetorian-native__reviews-title { color: #fff; text-align: center; font: 500 32px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0 0 130px; }
.mkt-product--praetorian-native .mkt-praetorian-native__reviews-panel { background: #ddd; color: #333; border-radius: 6px; padding: 68px 24px 80px; }
.mkt-product--praetorian-native .mkt-praetorian-native__reviews-panel .cr-all-reviews-shortcode { width: 348px; max-width: 100%; margin: 0 auto; }
.mkt-product .quantity input { padding: 8px; border-radius: 3px; }
.mkt-product .woocommerce-tabs { margin-top: 40px; }
/* Hide ONLY the redundant "In stock" line. The out-of-stock / backorder availability
   notice must stay visible: re-measured live 2026-09-20, production DOES render
   <p class="stock out-of-stock">"This product is currently out of stock and unavailable."</p>
   at display:block/h=22 on /product/praetorian-t/, while this rule was hiding it on staging
   (display:none/h=0) — which also collapsed the whole form.variations_form to height 0, so the
   product read as if it simply had no purchase UI. In-stock products emit no .stock element at
   all on EITHER site (verified on /product/taskmaster/ and /product/1776-flag-prae-slim-250th/),
   so the original blanket rule never actually suppressed an "In stock" line in practice — it only
   ever suppressed the real unavailability notice. CSS-only; purchase logic untouched. */
.mkt-product .summary .stock.in-stock,
.mkt-product .entry-summary .stock.in-stock { display: none !important; }
@media (max-width: 768px) {
	.mkt-product--praetorian-native .product { padding: 24px 8px 0; }
	.mkt-product--praetorian-native .woocommerce-breadcrumb { font-size: 14px; }
	.mkt-product--praetorian-native .summary .product_title { font-size: 22.4px; }
	.mkt-product--praetorian-native .mkt-praetorian-native__configure { display: none; }
	.mkt-product--praetorian-native .mkt-praetorian-native__mobile-cue { display: block; text-align: center; border: 1px solid #999; border-radius: 6px; font: 500 16px/1.3 "Anton", sans-serif; margin-top: -24px; }
	.mkt-product--praetorian-native .mkt-praetorian-native__about { margin: 30px 0 24px; }
	.mkt-product--praetorian-native .mkt-praetorian-native__about-title { font-size: 21px; }
	.mkt-product--praetorian-native .mkt-praetorian-native__about-text { font-size: 16px; padding: 0; }
	.mkt-product--praetorian-native .mkt-praetorian-native__videos { gap: 8px; }
	.mkt-product--praetorian-native .mkt-praetorian-native__reviews { padding: 12px 24px 40px; }
	.mkt-product--praetorian-native .mkt-praetorian-native__reviews-title { font-size: 20px; margin-bottom: 80px; }
	.mkt-product--praetorian-native .mkt-praetorian-native__reviews-panel .cr-all-reviews-shortcode { width: 196px; }
	.mkt-product--praetorian-native .mkt-praetorian-native__reviews-panel { padding: 68px 24px 80px; }
}
@media (max-width: 768px) {
	/* Stack gallery above summary on mobile. The desktop rules pin the gallery to
	   grid-column 1 and the summary to grid-column 2; with a single-column grid that
	   left the summary assigned to a non-existent 2nd track (crammed beside a shrunken
	   gallery). Force both children back to column 1 / full width so they stack. */
	/* minmax(0,1fr), NOT 1fr: plain `1fr` = minmax(AUTO,1fr), so the single mobile
	   track grows to the widest child's max-content (a fixed-width gallery image, a
	   Gravity Forms select, an embed…), blowing past the viewport. minmax(0,1fr)
	   lets the track shrink to the container, which is the real fix for the product
	   mobile overflow across all such pages (rma-service, configurator products, etc.). */
	.mkt-product--twocol .product { grid-template-columns: minmax(0, 1fr); }
	.mkt-product--twocol .product > .woocommerce-product-gallery,
	.mkt-product--twocol .product > .images,
	.mkt-product--twocol .product > .summary,
	.mkt-product--twocol .product > .entry-summary {
		grid-column: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
	}
	/* Cap embedded media inside the product so a fixed-width iframe/embed can't inflate
	   the grid track (belt-and-suspenders with minmax(0,1fr) above). */
	.mkt-product .product iframe,
	.mkt-product .product embed,
	.mkt-product .product object,
	.mkt-product .product video { max-width: 100% !important; }
	.mkt-product .product .woocommerce-product-gallery img { max-width: 100% !important; height: auto; }
	/* Break long unbreakable tokens (e.g. pasted-together URLs) in the WooCommerce
	   product tabs so they can't force a min-content wider than the viewport. */
	.mkt-product .product .woocommerce-Tabs-panel { overflow-wrap: break-word; word-break: break-word; }
	/* Stacked (configurator) also collapses to one column on mobile. */
	.mkt-product--stacked .product { display: block; }
}

/* ── Global WooCommerce primary button (dark red) — site-wide, NOT product-scoped ──
   The old page-builder kit set the Woo accent button to #aa1919 everywhere: product
   Add to cart, cart "Proceed to Checkout" (.checkout-button), checkout "Place order"
   (#place_order), account buttons — all use WooCommerce's `.button.alt`. Woo's default
   is purple (#7f54b3) and its CSS (woocommerce.css / wc-blocks.css) loads AFTER ours
   and is more specific, so we need !important to restore the red site-wide. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	background-color: #aa1919 !important;
	color: #fff !important;
	border: 0;
	border-radius: 3px;
	text-transform: none;
	font-size: 16px;
	font-weight: 700;
	padding: 10px 16px;
	cursor: pointer;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
	background-color: #c11e1e !important;
	color: #fff !important;
}

/* ── Branded CPT archive header (archive-custom-knives.php / archive-knife-models.php) ──
   Real archive title/description/count + the existing .mkt-grid card grid below it. NOT a
   reproduction of production's bespoke marketing copy or curated picks (Custom Knives) nor
   its live search/filter app (Knife Models) — see the doc comment in each template file. */
.mkt-cpt-archive { background: #0a0a0a; }
.mkt-cpt-archive__hero { max-width: 1200px; margin: 0 auto; padding: 64px 24px 32px; text-align: center; }
.mkt-cpt-archive__eyebrow { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #c5a059; margin-bottom: 14px; }
.mkt-cpt-archive__title { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; color: #fff; margin: 0 0 16px; text-transform: uppercase; }
.mkt-cpt-archive__desc { color: #cfcfcf; max-width: 700px; margin: 0 auto 20px; line-height: 1.6; }
.mkt-cpt-archive__count { color: #a1a1aa; font-size: 14px; letter-spacing: .03em; }
.mkt-cpt-archive__count strong { color: #fff; font-size: 18px; }
.mkt-cpt-archive__grid-wrap { max-width: 1200px; margin: 0 auto; padding: 8px 24px 72px; }

/* ── Custom-knives museum (single-custom-knives.php native fallback) ────────── */
.mkt-ck { max-width: 1200px; margin: 0 auto; padding: 56px 24px 80px; color: #fff; }
.mkt-ck__head { text-align: center; margin-bottom: 40px; }
.mkt-ck__eyebrow { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #c5a059; margin-bottom: 12px; }
.mkt-ck__title { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
.mkt-ck__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.mkt-ck__media { min-width: 0; }
.mkt-ck__stage { position: relative; background: #111; border: 1px solid #222; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.mkt-ck__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s ease; padding: 12px; }
.mkt-ck__frame.is-active { opacity: 1; position: relative; }
.mkt-ck__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mkt-ck__thumb { width: 72px; height: 72px; padding: 0; background: #111; border: 1px solid #2a2a2a; border-radius: 6px; overflow: hidden; cursor: pointer; transition: border-color .15s ease; }
.mkt-ck__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-ck__thumb:hover { border-color: #555; }
.mkt-ck__thumb.is-active { border-color: #c5a059; }
.mkt-ck__info { min-width: 0; }
.mkt-ck__rail { border: 1px solid #2a2a2a; border-radius: 8px; padding: 20px 22px; margin-bottom: 28px; background: #0f0f0f; }
.mkt-ck__rail-label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 6px; }
.mkt-ck__rail-value { display: block; font-size: 30px; font-weight: 400; color: #fff; line-height: 1; margin-bottom: 10px; }
.mkt-ck__rail-note { display: block; font-size: 13px; color: #c5a059; letter-spacing: .02em; }
.mkt-ck__desc { font-size: 16px; line-height: 1.6; color: #cfcfcf; overflow-wrap: break-word; word-break: break-word; }
.mkt-ck__desc p { margin: 0 0 14px; }
.mkt-ck__desc a { color: #c5a059; }
@media (max-width: 768px) {
	.mkt-ck { padding: 36px 18px 60px; }
	.mkt-ck__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.mkt-ck__stage { aspect-ratio: 1 / 1; }
}

/* ── Frozen Gravity Forms pages (mkt-gf-page) — /careers/, /general-inquiries/, /order-support/ ──
   Full-width white outer canvas (production's white background spans edge to edge, not just the
   content column) + a 1140px-constrained inner column matching production. That canvas/width is the
   old Elementor page container, not GF's own CSS — GF only styles the form fields. See
   template-parts/mkt-body.php branch 2b + functions.php mkt_frozen_gf_form_map().
   Values below are measured 1:1 against production (paired-metrics.json, 1440 + 390): center-aligned
   heading, system font stack (NOT the theme's Inter brand font — these 3 pages are unconverted legacy
   Elementor pages, and matching THEIR OWN production typography is the correctness target here, not
   this theme's newer pages' typography), #333 text. Production's own heading size is NOT uniform
   across these 3 pages (45px/42px/63px at desktop respectively — each page was hand-set in Elementor
   independently) — so each page is scoped by its own `page-id-*` body class rather than sharing one
   value across the h1/h2 tag. Content width: production's 1140px column has NO additional inner
   padding — the side margin IS the 1140px cap centering itself (confirmed: 1440 viewport, x=150,
   width=1140 ⇒ 1440-150-150=1140 exactly) — so .mkt-gf-page__inner carries no horizontal padding at
   desktop widths; mobile keeps a small 8px gutter (production: 390 viewport, x=8, width=374). */
.mkt-gf-page { background: #fff; color: #333; width: 100%; }
/* padding-top measured against a fresh paired-metrics capture (all 3 pages, both breakpoints agree
   exactly): prod heading.y - main.y = 74px desktop, 26px mobile — was 56/32 (guessed), a real ~18-26px
   gap this whole section sat too high by. */
/* Bottom padding re-measured live (form-bottom-to-footer gap): prod is only ~26px desktop / ~24px
   mobile — this was 72/48px, adding ~55-65px of extra whitespace before the footer that isn't in
   production (root-flagged real defect, 2026-09-20). */
.mkt-gf-page__inner { max-width: 1140px; margin: 0 auto; padding: 74px 0 9px; }
.mkt-gf-page h1,
.mkt-gf-page h2 {
	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-weight: 500;
	color: #333;
	text-align: center;
}
body.page-id-4675 .mkt-gf-page h1 { font-size: 45px; line-height: 1; margin: 0 0 64px; } /* /careers/ — measured heading-to-intro gap */
body.page-id-5866 .mkt-gf-page h2 { font-size: 42px; line-height: 1; margin: 0 0 82px; } /* /general-inquiries/ — measured heading-to-form gap (no intro paragraph on this page) */
body.page-id-5847 .mkt-gf-page h2 { font-size: 63px; line-height: 1; margin: 0 0 82px; } /* /order-support/ — same measured gap as general-inquiries */
.mkt-gf-page__inner > p {
	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: 24px;
	line-height: 1.5;
	color: #333;
	margin: 0 0 32px; /* measured: intro-to-form gap on /careers/, confirmed matching at both breakpoints */
}
.mkt-gf-page .gform_wrapper { max-width: 100%; }
@media (max-width: 780px) {
	.mkt-gf-page__inner { padding: 26px 8px 7px; } /* re-measured live: prod mobile form-to-footer gap is ~24px (was 48px) */
	body.page-id-4675 .mkt-gf-page h1 { font-size: 28px; margin-bottom: 16px; }
	body.page-id-5866 .mkt-gf-page h2 { font-size: 24px; margin-bottom: 34px; }
	body.page-id-5847 .mkt-gf-page h2 { font-size: 42px; margin-bottom: 34px; }
}
/* GF form buttons — measured 1:1 against production (careers/general-inquiries/order-support).
   GF's bundled CSS leaves these unstyled (native browser appearance); production appearance was
   Elementor-controlled. Scoped to .mkt-gf-page to avoid affecting other forms. */
.mkt-gf-page .gform_button_select_files,
.mkt-gf-page [id^=gform_browse_button_] {
	background: #000;
	color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.75);
	border-radius: 4px;
	font-size: 16px;
	padding: 8px 14px;
	cursor: pointer;
	display: inline-block;
	width: auto;
	box-sizing: border-box;
}
/* Submit: re-measured live via computed styles (not just a screenshot rect) against production —
   desktop 100×44 (line-height 24px), mobile 100×52 (line-height 32px), both with padding 10px 20px
   and the SAME system font stack as the heading/intro above (was wrongly left to fall back to the
   browser's native <input type=submit> font, which rendered as plain Arial with 18px padding and no
   explicit line-height — that produced a narrower/taller button, not this exact size/typeface).

   GF 3.0 FORWARD-COMPATIBILITY: Gravity Forms 3.0 changed the submit element from
   <input type="submit"> to <button> with the spinner nested inside it (official changelog,
   https://docs.gravityforms.com/gravityforms-change-log/). An input-only selector would
   silently stop applying the instant the staging/production upgrade lands and the button would
   revert to the browser's native chrome. Both element forms are matched, and the spinner is
   kept from stretching the button's measured 100x44 / 100x52 box. */
.mkt-gf-page input[type=submit].gform_button,
.mkt-gf-page .gform_button[type=submit],
.mkt-gf-page input[type=submit],
.mkt-gf-page button.gform_button,
.mkt-gf-page button[type=submit].gform_button {
	background: #000 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 4px;
	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: 16px;
	line-height: 24px;
	padding: 10px 20px;
	cursor: pointer;
	display: inline-block !important;
	width: auto !important;
	min-width: 0;
	box-sizing: border-box;
}
/* GF 3.x nests a spinner inside the submit <button>; keep it out of the button's box metrics
   so the measured 100x44 / 100x52 geometry survives the upgrade. */
.mkt-gf-page button.gform_button .gform-loader,
.mkt-gf-page button.gform_button .gform_ajax_spinner { position: absolute; }
.mkt-gf-page button.gform_button { position: relative; }
@media (max-width: 780px) {
	.mkt-gf-page input[type=submit].gform_button,
	.mkt-gf-page .gform_button[type=submit],
	.mkt-gf-page input[type=submit],
	.mkt-gf-page button.gform_button,
	.mkt-gf-page button[type=submit].gform_button {
		line-height: 32px; /* measured: prod mobile submit is 100×52, same 10px/20px padding as desktop */
	}
}